Remote Chart

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx

@@ -253,6 +253,7 @@ export const chartUiModeChildren = {
 };
 
 let chartJsonModeChildren: any = {
+  echartsData: jsonControl(toJSONObjectArray),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
   echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,

client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx

@@ -28,9 +28,7 @@ export function chartPropertyView(
   const uiModePropertyView = (
     <>
       <Section name={trans("chart.data")}>
-        {children.data.propertyView({
-          label: trans("chart.data"),
-        })}
+        {children.echartsData.propertyView({ label: trans("chart.data") })}
         <Dropdown
           value={children.chartConfig.children.compType.getView()}
           options={ChartTypeOptions}
@@ -151,6 +149,11 @@ export function chartPropertyView(
       <Section name={sectionNames.legendStyle}>
         {children.legendStyle?.getPropertyView()}
       </Section>
+      <Section name={sectionNames.advanced}>
+        {children.data.propertyView({
+          label: trans("chart.data"),
+        })}
+      </Section>
     </>
   );
 

client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts

@@ -212,9 +212,7 @@ export function getEchartsConfig(
     .map((s) => s.getView().columnName);
   // y-axis is category and time, data doesn't need to aggregate
   const transformedData =
-    yAxisConfig.type === "category" || yAxisConfig.type === "time"
-      ? props.data
-      : transformData(props.data, props.xAxisKey, seriesColumnNames);
+    yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
   config = {
     ...config,
     dataset: [
@@ -228,6 +226,9 @@ export function getEchartsConfig(
       itemStyle: {
         ...series.itemStyle,
         ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      },
+      lineStyle: {
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       }
     })),
   };

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

@@ -140,13 +140,14 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
   }, [onUIEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+  const childrenProps = childrenToProps(echartsConfigChildren);
   const option = useMemo(() => {
     return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren)]);
+  }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   useEffect(() => {
     comp.children.mapInstance.dispatch(changeValueAction(null, false))

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx

@@ -250,6 +250,7 @@ export const chartUiModeChildren = {
 };
 
 let chartJsonModeChildren: any = {
+  echartsData: jsonControl(toObject),
   echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
   echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
   echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
@@ -271,8 +272,8 @@ if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
     ...chartJsonModeChildren,
     chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
     titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
-    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
-    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+    xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'),
+    yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx

@@ -16,21 +16,7 @@ export function candleStickChartPropertyView(
   const jsonModePropertyView = (
     <>
       <Section name={trans("chart.config")}>
-        {children.echartsOption.propertyView({
-          label: trans("chart.echartsOptionLabel"),
-          styleName: "higher",
-          tooltip: (
-            <div>
-              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionTooltip")}
-              </a>
-              <br />
-              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionExamples")}
-              </a>
-            </div>
-          ),
-        })}
+        {children.echartsData.propertyView({ label: trans("chart.data") })}
         {children.echartsTitleConfig.getPropertyView()}
         {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
@@ -56,10 +42,27 @@ export function candleStickChartPropertyView(
         {children.titleStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.xAxisStyle}>
-        {children.labelStyle?.getPropertyView()}
+        {children.xAxisStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.yAxisStyle}>
-        {children.legendStyle?.getPropertyView()}
+        {children.yAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.advanced}>
+        {children.echartsOption.propertyView({
+          label: trans("chart.echartsOptionLabel"),
+          styleName: "higher",
+          tooltip: (
+            <div>
+              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionTooltip")}
+              </a>
+              <br />
+              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionExamples")}
+              </a>
+            </div>
+          ),
+        })}
       </Section>
     </>
   );

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts

@@ -149,7 +149,7 @@ export function getEchartsConfig(
         }
       },
       backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
-      color: props?.echartsOption.data?.map(data => data.color),
+      color: props?.echartsData.data?.map(data => data.color) || props?.echartsOption.data?.map(data => data.color),
       tooltip: props?.tooltip && {
         trigger: "axis",
         axisPointer: {
@@ -178,25 +178,25 @@ export function getEchartsConfig(
         splitArea: props?.axisFlagVisibility && {
           show: true,
           areaStyle: {
-            color: props?.echartsOption?.axisColor
+            color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
           }
         },
         axisLabel: {
-          ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13),
+          ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13),
         }
       },
       xAxis: props?.echartsOption && {
         type: 'category',
-        data:  props?.echartsOption.xAxis && props?.echartsOption.xAxis.data,
+        data: props?.echartsData.xAxis && props?.echartsData.xAxis.data || props?.echartsOption.xAxis && props?.echartsOption.xAxis.data,
         splitArea: !props?.axisFlagVisibility && {
           show: true,
           areaStyle: {
             // Provide multiple colors to alternate through
-            color: props?.echartsOption?.axisColor
+            color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
           },
         },
         axisLabel: {
-          ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13),
+          ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13),
         },
         boundaryGap: true,
         // Turn off x-axis split lines if desired, so you only see colored areas
@@ -205,16 +205,25 @@ export function getEchartsConfig(
         },
         // Show split areas, each day with a different background color
       },
-      series:  props?.echartsOption && [
+      series: props?.echartsOption && [
         {
           name: props?.echartsConfig.type,
           type: props?.echartsConfig.type,
           label: {
             show: true,
             position: props?.echartsLabelConfig.top
           },
-          data: props?.echartsOption.data,
-          itemStyle: {
+          data: props?.echartsData?.data || props?.echartsOption.data,
+          itemStyle: props?.echartsData.itemStyle ? {
+            ...props?.echartsData.itemStyle,
+            borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
+            borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
+            borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
+            shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
+            shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
+            shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
+            shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
+          } : {
             ...props?.echartsOption.itemStyle,
             borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
             borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
@@ -227,7 +236,7 @@ export function getEchartsConfig(
         },
       ],
     }
-    return props.echartsOption ? opt : {};
+    return props.echartsData || props.echartsOption ? opt : {};
 
   }
 

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

@@ -156,13 +156,14 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   }, [mode, onUIEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+  const childrenProps = childrenToProps(echartsConfigChildren);
   const option = useMemo(() => {
     return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
       themeConfig
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren)]);
+  }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   const isMapScriptLoaded = useMemo(() => {
     return mapScriptLoaded || window?.google;

client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

@@ -263,6 +263,7 @@ export const chartUiModeChildren = {
 };
 
 let chartJsonModeChildren: any = {
+  echartsData: jsonControl(toJSONObjectArray),
   echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
 

client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx

@@ -27,9 +27,7 @@ export function chartPropertyView(
   const uiModePropertyView = (
     <>
       <Section name={trans("chart.data")}>
-        {children.data.propertyView({
-          label: trans("chart.data"),
-        })}
+        {children.echartsData.propertyView({ label: trans("chart.data") })}
         <Dropdown
           value={children.chartConfig.children.compType.getView()}
           options={ChartTypeOptions}
@@ -151,6 +149,11 @@ export function chartPropertyView(
       <Section name={sectionNames.legendStyle}>
         {children.legendStyle?.getPropertyView()}
       </Section>
+      <Section name={sectionNames.advanced}>
+        {children.data.propertyView({
+          label: trans("chart.data"),
+        })}
+      </Section>
     </>
   );
 

client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts

@@ -136,7 +136,7 @@ export function getEchartsConfig(
   theme?: any,  
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
-    return props.echartsOption ? props.echartsOption : {};
+    return props.echartsOption || props.echartsOption ? props.echartsOption : {};
   }
   if(props.mode === "map") {
     const {
@@ -181,7 +181,7 @@ export function getEchartsConfig(
       ...props.legendConfig,
       textStyle: {
         ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
-      }
+      },
     },
     tooltip: props.tooltip&&{
       trigger: "axis",
@@ -212,9 +212,7 @@ export function getEchartsConfig(
     .map((s) => s.getView().columnName);
   // y-axis is category and time, data doesn't need to aggregate
   const transformedData =
-    yAxisConfig.type === "category" || yAxisConfig.type === "time"
-      ? props.data
-      : transformData(props.data, props.xAxisKey, seriesColumnNames);
+  yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
   config = {
     ...config,
     dataset: [
@@ -228,6 +226,9 @@ export function getEchartsConfig(
       itemStyle: {
         ...series.itemStyle,
         ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      },
+      lineStyle: {
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       }
     })),
   };

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

@@ -116,13 +116,14 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
   }, [mapScriptLoaded]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+  const childrenProps = childrenToProps(echartsConfigChildren);
   const option = useMemo(() => {
     return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
       theme?.theme?.components?.candleStickChart || {},
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren)]);
+  }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   const isMapScriptLoaded = useMemo(() => {
     return mapScriptLoaded || window?.google;

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

@@ -141,13 +141,14 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
   }, [onUIEvent]);
 
   let echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+  const childrenProps = childrenToProps(echartsConfigChildren);
   const option = useMemo(() => {
     return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
       themeConfig,
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren), theme]);
+  }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   useEffect(() => {
     comp.children.mapInstance.dispatch(changeValueAction(null, false))

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

@@ -255,6 +255,7 @@ export const chartUiModeChildren = {
 };
 
 let chartJsonModeChildren: any = {
+  echartsData: jsonControl(toObject),
   echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption),
   echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
   echartsTitleVerticalConfig: EchartsTitleVerticalConfig,

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx

@@ -16,21 +16,8 @@ export function funnelChartPropertyView(
   const jsonModePropertyView = (
     <>
       <Section name={trans("chart.config")}>
-        {children.echartsOption.propertyView({
-          label: trans("chart.echartsOptionLabel"),
-          styleName: "higher",
-          tooltip: (
-            <div>
-              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionTooltip")}
-              </a>
-              <br />
-              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionExamples")}
-              </a>
-            </div>
-          ),
-        })}
+        {children.echartsData.propertyView({ label: trans("chart.data") })}
+
         {children.echartsTitleConfig.getPropertyView()}
         {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
@@ -74,6 +61,23 @@ export function funnelChartPropertyView(
         </Section> : <></>
       }
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+      <Section name={sectionNames.advanced}>
+        {children.echartsOption.propertyView({
+          label: trans("chart.echartsOptionLabel"),
+          styleName: "higher",
+          tooltip: (
+            <div>
+              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionTooltip")}
+              </a>
+              <br />
+              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionExamples")}
+              </a>
+            </div>
+          ),
+        })}
+      </Section>
     </>
   );