Added control fields and style fields to Basic and Legacy charts.

Imiss-U1025 · Imiss-U1025 · commit 688aa2517f34 · 2025-01-10T15:21:12.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
@@ -33,7 +33,7 @@ import {
   echartsConfigOmitChildren,
   getEchartsConfig,
   getSelectedPoints,
-} from "comps/chartComp/chartUtils";
+} from "./chartUtils";
 import 'echarts-extension-gmap';
 import log from "loglevel";
 
@@ -124,7 +124,7 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
@@ -16,7 +16,8 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultTextStyle,
+  EchartDefaultChartStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +33,8 @@ import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
 import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -237,7 +240,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: StringControl,
+  title: withDefault(StringControl, trans("echarts.defaultTitle")),
   data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
@@ -255,14 +258,25 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+
+  left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
+  top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('candleStickChart.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'),
+    xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+    yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx
@@ -114,7 +114,13 @@ export function chartPropertyView(
         </div>
       </Section>
       <Section name={sectionNames.layout}>
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.title.propertyView({ label: trans("chart.title") })}
+        {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
         {children.chartConfig.children.compType.getView() !== "pie" && (
           <>
             {children.xAxisDirection.propertyView({
@@ -125,10 +131,24 @@ export function chartPropertyView(
             {children.yConfig.getPropertyView()}
           </>
         )}
-        {children.legendConfig.getPropertyView()}
         {hiddenPropertyView(children)}
+        {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+      </Section>
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.xAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.yAxisStyle}>
+        {children.yAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.legendStyle}>
+        {children.legendStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
     </>
   );
 
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.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 "./chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -134,52 +136,15 @@ export function getEchartsConfig(
   theme?: any,
 ): 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,
-  "color": props.echartsOption.data?.map(data => data.color),
-  "tooltip": props.tooltip && {
-    "trigger": "item",
-    "formatter": "{a} <br/>{b} : {c}%"
-  },
-  "legend":props.legendVisibility&& {
-    "data": props.echartsOption.data?.map(data=>data.name),
-    "top": props.echartsLegendConfig.top,
-  },
-  "series": [
-    {
-      "name": props.echartsConfig.type,
-      "type": props.echartsConfig.type,
-      "left": "10%",
-      "top": 60,
-      "bottom": 60,
-      "width": "80%",
-      "min": 0,
-      "max": 100,
-      "gap": 2,
-      "label": {
-        "show": true,
-        "position": props.echartsLabelConfig.top
-      },
-      "data": props.echartsOption.data
-    }
-  ]
-}
-    return props.echartsOption ? opt : {};
-    
+    return props.echartsOption ? props.echartsOption : {};
   }
-  
   if(props.mode === "map") {
     const {
       mapZoomLevel,
       mapCenterLat,
       mapCenterLng,
-      mapOptions, 
-      showCharts, 
+      mapOptions,
+      showCharts,
     } = props;
 
     const echartsOption = mapOptions && showCharts ? mapOptions : {};
@@ -197,18 +162,38 @@ export function getEchartsConfig(
   // axisChart
   const axisChart = isAxisChart(props.chartConfig.type);
   const gridPos = {
-    left: 20,
-    right: props.legendConfig.left === "right" ? "10%" : 20,
-    top: 50,
-    bottom: 35,
+    left: `${props?.left}%`,
+    right: `${props?.right}%`,
+    bottom: `${props?.bottom}%`,
+    top: `${props?.top}%`,
   };
-  let config: EChartsOptionWithMap = {
-    title: { text: props.title, left: "center" },
-    tooltip: {
-      confine: true,
-      trigger: axisChart ? "axis" : "item",
+  let config: any = {
+    title: {
+      text: props.title,
+      top: props.echartsTitleVerticalConfig.top,
+      left:props.echartsTitleConfig.top,
+      textStyle: {
+        ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+      }
+    },
+    backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+    legend: {
+      ...props.legendConfig,
+      textStyle: {
+        ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+      }
+    },
+    tooltip: props.tooltip && {
+      trigger: "axis",
+      axisPointer: {
+        type: "line",
+        lineStyle: {
+          color: "rgba(0,0,0,0.2)",
+          width: 2,
+          type: "solid"
+        }
+      }
     },
-    legend: props.legendConfig,
     grid: {
       ...gridPos,
       containLabel: true,
@@ -238,7 +223,13 @@ export function getEchartsConfig(
         sourceHeader: false,
       },
     ],
-    series: getSeriesConfig(props),
+    series: getSeriesConfig(props).map(series => ({
+      ...series,
+      itemStyle: {
+        ...series.itemStyle,
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      }
+    })),
   };
   if (axisChart) {
     // pure chart's size except the margin around
@@ -266,9 +257,19 @@ export function getEchartsConfig(
     config = {
       ...config,
       // @ts-ignore
-      xAxis: finalXyConfig.xConfig,
+      xAxis: {
+        ...finalXyConfig.xConfig,
+        axisLabel: {
+          ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+        }
+      },
       // @ts-ignore
-      yAxis: finalXyConfig.yConfig,
+      yAxis: {
+        ...finalXyConfig.yConfig,
+        axisLabel: {
+          ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+        }
+      },
     };
   }
   // log.log("Echarts transformedData and config", transformedData, config);
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
@@ -159,7 +159,8 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx
@@ -16,6 +16,9 @@ import {
   ValueFromOption,
   uiChildren,
   clickEvent,
+  EchartDefaultTextStyle,
+  styleControl,
+  EchartDefaultChartStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -27,6 +30,11 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
 import { SeriesListComp } from "./seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
+import {EchartsTitleVerticalConfig} from "./chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "./chartConfigs/echartsTitleConfig";
+import {EchartsLegendConfig} from "./chartConfigs/echartsLegendConfig";
+import {EchartsLegendOrientConfig} from "./chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "./chartConfigs/echartsLegendAlignConfig";
 
 export const ChartTypeOptions = [
   {
@@ -251,10 +259,37 @@ export const chartUiModeChildren = {
   legendConfig: LegendConfig,
   chartConfig: ChartOptionComp,
   onUIEvent: eventHandlerControl(UIEventOptions),
+
 };
 
-const chartJsonModeChildren = {
+let chartJsonModeChildren: any = {
+  echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+
+
+  left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
+  top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
+
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+  echartsLegendConfig: EchartsLegendConfig,
+  echartsLegendOrientConfig: EchartsLegendOrientConfig,
+  echartsLegendAlignConfig: EchartsLegendAlignConfig,
+  legendVisibility: withDefault(BoolControl, true),
+  tooltip: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+  chartJsonModeChildren = {
+    ...chartJsonModeChildren,
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+    yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+  }
 }
 
 const chartMapModeChildren = {
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx
@@ -114,7 +114,13 @@ export function chartPropertyView(
         </div>
       </Section>
       <Section name={sectionNames.layout}>
-        {children.title.propertyView({ label: trans("chart.title") })}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.echartsTitle.propertyView({ label: trans("chart.title") })}
+        {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
         {children.chartConfig.children.compType.getView() !== "pie" && (
           <>
             {children.xAxisDirection.propertyView({
@@ -125,10 +131,25 @@ export function chartPropertyView(
             {children.yConfig.getPropertyView()}
           </>
         )}
-        {children.legendConfig.getPropertyView()}
         {hiddenPropertyView(children)}
+        {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+      </Section>
+
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.xAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.yAxisStyle}>
+        {children.yAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.legendStyle}>
+        {children.legendStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
     </>
   );
 
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
