Added control fields and style fields to themeriver charts

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts

@@ -136,8 +136,6 @@ export function getEchartsConfig(
   theme?: any,
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
-    console.log(props?.detailStyle?.detailSize?.split('px')[0] || theme?.detailStyle?.detailSize.split('px')[0] || 3,
-      props?.detailStyle?.detailSize?.split('px')[1] || theme?.detailStyle?.detailSize.split('px')[1] || 3)
     let opt={
       title: {
         text: props?.echartsTitle,

client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts

@@ -136,10 +136,6 @@ export function getEchartsConfig(
   chartSize?: ChartSize,
   theme?: any,
 ): EChartsOptionWithMap {
-  console.log(props.echartsOption && props?.echartsOption?.data?.map(item => ({
-    name: item.name,
-    itemStyle: item.color && {color: item.color}
-  })))
   if (props.mode === "json") {
     let opt={
       title: {

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx

@@ -145,7 +145,7 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx

@@ -16,7 +16,8 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +32,10 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { ThemeriverChartConfig } from "comps/chartComp/chartConfigs/themeriverChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
+import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
 
 export const ChartTypeOptions = [
   {
@@ -253,14 +258,27 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+  echartsLegendOrientConfig: EchartsLegendOrientConfig,
+  echartsLegendAlignConfig: EchartsLegendAlignConfig,
+
+  splitNumber:withDefault(NumberControl,trans('themeriverChart.defaultSplitNumber')),
+  left:withDefault(NumberControl,trans('themeriverChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('themeriverChart.defaultRight')),
+  top:withDefault(NumberControl,trans('themeriverChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('themeriverChart.defaultBottom')),
+
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    axisStyle: styleControl(EchartDefaultTextStyle, 'axisStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 const chartMapModeChildren = {

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx

@@ -31,15 +31,43 @@ export function themeriverChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("themeriverChart.title") })}
+
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
+
+        {children.echartsTitle.propertyView({ label: trans("themeriverChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.splitNumber.propertyView({ label: trans("themeriverChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+        {children.left.propertyView({ label: trans("themeriverChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("themeriverChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("themeriverChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("themeriverChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+
+        {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility")})}
         {children.tooltip.propertyView({label: trans("themeriverChart.tooltip")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
       </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.axisStyle?.getPropertyView()}
+      </Section>
+      {
+        children.legendVisibility.getView() &&
+          <Section name={sectionNames.legendStyle}>
+            {children.legendStyle?.getPropertyView()}
+          </Section>
+      }
+
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts

@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -135,12 +137,15 @@ export function getEchartsConfig(
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
-  "title": {
-    "text": props.echartsTitle,
-    'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-    "left":"center"
-  },
-  "backgroundColor": props?.style?.background || theme?.style?.background,
+      title: {
+        text: props?.echartsTitle,
+        top: props?.echartsTitleVerticalConfig.top,
+        left: props?.echartsTitleConfig.top,
+        textStyle: {
+          ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+        }
+      },
+      backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
   "tooltip": props.tooltip&&{
     "trigger": "axis",
     "axisPointer": {
@@ -152,11 +157,25 @@ export function getEchartsConfig(
       }
     }
   },
+      legend: props.legendVisibility && {
+        "top": props.echartsLegendConfig.top,
+        "left": props.echartsLegendAlignConfig.left,
+        "orient": props.echartsLegendOrientConfig.orient,
+        data: Array.from(new Set(props.echartsOption.data.map(item => item[2]))),
+        textStyle: {
+          ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13)
+        }
+      },
   "singleAxis": {
+    left: `${props?.left}%`,
+    right: `${props?.right}%`,
+    bottom: `${props?.bottom}%`,
+    top: `${props?.top}%`,
     "type": "time",
-    "bottom": 50,
     "axisTick": {},
-    "axisLabel": {},
+    "axisLabel": {
+      ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13)
+    },
     "splitLine": {},
     "axisPointer": {
       "animation": true,
@@ -165,7 +184,7 @@ export function getEchartsConfig(
         "color": "#fff"
       }
     },
-    "splitNumber": 30
+    "splitNumber": props?.splitNumber
   },
   "series": [
     {
@@ -176,6 +195,9 @@ export function getEchartsConfig(
         "position": "top",
         "fontSize": 12
       },
+      itemStyle: {
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+      },
       "emphasis": {
         "itemStyle": {
           "shadowBlur": 20,

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -10,6 +10,16 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Themeriver Chart',
     tooltip: 'Tooltip',
+    left: 'Left',
+    defaultLeft:'15',
+    right: 'Right',
+    defaultRight:'10',
+    top: 'Top',
+    defaultTop:'15',
+    bottom: 'Bottom',
+    defaultBottom:'20',
+    splitNumber: 'Split Number',
+    defaultSplitNumber: '3'
   },
   sunburstChart: {
     sunburstType: 'Sunburst Chart Type',

client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

@@ -493,27 +493,27 @@ export const enObj: I18nObjects = {
   },
   defaultThemeriverChartOption: {
     data: [
-        ["2024-01-01", 10, "Category A"],
-        ["2024-01-02", 15, "Category A"],
-        ["2024-01-03", 20, "Category A"],
-        ["2024-01-04", 25, "Category A"],
-        ["2024-01-05", 30, "Category A"],
-        ["2024-01-06", 35, "Category A"],
-        ["2024-01-07", 40, "Category A"],
-        ["2024-01-08", 45, "Category A"],
-        ["2024-01-09", 50, "Category A"],
-        ["2024-01-10", 55, "Category A"],
-        ["2024-01-01", 15, "Category B"],
-        ["2024-01-02", 20, "Category B"],
-        ["2024-01-03", 25, "Category B"],
-        ["2024-01-04", 30, "Category B"],
-        ["2024-01-05", 35, "Category B"],
-        ["2024-01-06", 40, "Category B"],
-        ["2024-01-07", 45, "Category B"],
-        ["2024-01-08", 50, "Category B"],
-        ["2024-01-09", 55, "Category B"],
-        ["2024-01-10", 60, "Category B"]
-      ]
+      ['2025-01-01', 12, 'Product A'],
+      ['2025-01-01', 10, 'Product B'],
+      ['2025-01-01', 15, 'Product C'],
+      ['2025-01-01', 8, 'Product D'],
+      ['2025-01-02', 14, 'Product A'],
+      ['2025-01-02', 9, 'Product B'],
+      ['2025-01-02', 16, 'Product C'],
+      ['2025-01-02', 7, 'Product D'],
+      ['2025-01-03', 16, 'Product A'],
+      ['2025-01-03', 12, 'Product B'],
+      ['2025-01-03', 18, 'Product C'],
+      ['2025-01-03', 10, 'Product D'],
+      ['2025-01-04', 20, 'Product A'],
+      ['2025-01-04', 15, 'Product B'],
+      ['2025-01-04', 22, 'Product C'],
+      ['2025-01-04', 12, 'Product D'],
+      ['2025-01-05', 18, 'Product A'],
+      ['2025-01-05', 13, 'Product B'],
+      ['2025-01-05', 20, 'Product C'],
+      ['2025-01-05', 11, 'Product D']
+    ]
   },
 
   defaultMapJsonOption: defaultMapData,