Reverted candlestick chart, updated background ability.

Author: Imiss-U1025

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

@@ -144,9 +144,9 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      themeConfig,
+      theme?.theme?.components?.candleStickChart || {},
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren), theme]);
+  }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
   useEffect(() => {
     comp.children.mapInstance.dispatch(changeValueAction(null, false))
@@ -168,14 +168,15 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
       }}
     >
       <ReactECharts
-          ref={(e) => (echartsCompRef.current = e)}
-          style={{ height: "100%" }}
-          notMerge
-          lazyUpdate
-          opts={{ locale: getEchartsLocale() }}
-          option={option}
-          mode={mode}
-        />
+        ref={(e) => (echartsCompRef.current = e)}
+        style={{ height: "100%" }}
+        notMerge
+        lazyUpdate
+        opts={{ locale: getEchartsLocale() }}
+        option={option}
+        theme={mode !== 'map' ? themeConfig : undefined}
+        mode={mode}
+      />
     </ReactResizeDetector>
   );
 });

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

@@ -16,17 +16,14 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle,
-  EchartDefaultChartStyle,
-  EchartDefaultTextStyle
+  EchartsStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
 import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
 import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
 import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
 import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
-import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
 import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
 import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
@@ -255,25 +252,15 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
-  echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
-  left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
-  right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
-  top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
-  bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
-  dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
-  dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
+  // style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
-  dataZoomVisibility: withDefault(BoolControl, true),
 }
 if (EchartsStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
-    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
-    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
-    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+    style: styleControl(EchartsStyle, 'style'),
   }
 }
 

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

@@ -31,46 +31,19 @@ export function candleStickChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitleConfig.getPropertyView()}
-        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
-        {children.left.propertyView({ label: trans("candleStickChart.left") })}
-        {children.right.propertyView({ label: trans("candleStickChart.right") })}
-        {children.top.propertyView({ label: trans("candleStickChart.top") })}
-        {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
         {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
-        {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })}
-        {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })}
         {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
-        {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
-        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
       <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+        {children.style?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}
-      </Section>
-
-      <Section name={sectionNames.chartStyle}>
-        {children.chartStyle?.getPropertyView()}
-      </Section>
-      <Section name={sectionNames.titleStyle}>
-        {children.titleStyle?.getPropertyView()}
-      </Section>
-      <Section name={sectionNames.labelStyle}>
-        {children.labelStyle?.getPropertyView()}
-      </Section>
-      {
-        children.legendVisibility.getView() ?
-          <Section name={sectionNames.legendStyle}>
-            {children.legendStyle?.getPropertyView()}
-          </Section> : <></>
-      }
+      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );
-  
+
   const getChatConfigByMode = (mode: string) => {
     switch(mode) {
       case "json":

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

@@ -135,62 +135,38 @@ export function getEchartsConfig(
   chartSize?: ChartSize,
   theme?: any,
 ): EChartsOptionWithMap {
-
-
   if (props.mode === "json") {
     let opt={
       "title": {
         "text": props.echartsTitle,
         'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-        "left":props.echartsTitleConfig.top,
-        "textStyle": {
-          "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
-          "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
-          "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
-          "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
-          "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
-          "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
-          "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
-          "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
-          "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
-        }
+        "left":"center"
       },
-      "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"),
-      "color": props?.echartsOption.data?.map(data => data.color),
-      "tooltip": props?.tooltip&&{
+      "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
+      "color": props.echartsOption.data?.map(data => data.color),
+      "tooltip": props.tooltip&&{
         "trigger": "axis",
         "axisPointer": {
           "type": "cross"
         }
       },
       "grid": {
-        "left": `${props?.left}%`,
-        "right": `${props?.right}%`,
-        "bottom": `${props?.bottom}%`,
-        "top": `${props?.top}%`,
+        "left": "10%",
+        "right": "10%",
+        "bottom": "10%",
       },
-      "dataZoom": [
-        {
-          "show": props?.dataZoomVisibility,
-          "type": 'slider',
-          "start": 0,
-          "end": 100,
-          "bottom": props?.dataZoomBottom,
-          'height': props?.dataZoomHeight
-        }
-      ],
       "xAxis": {
         "type": "category",
-        "data": props?.echartsOption.xAxis.data
+        "data": props.echartsOption.xAxis.data
       },
       "yAxis": {
         "type": "value",
         "scale": true
       },
       "series": [
         {
-          "name": props?.echartsConfig.type,
-          "type": props?.echartsConfig.type,
+          "name": props.echartsConfig.type,
+          "type": props.echartsConfig.type,
           "left": "10%",
           "top": 60,
           "bottom": 60,
@@ -200,9 +176,9 @@ export function getEchartsConfig(
           "gap": 2,
           "label": {
             "show": true,
-            "position": props?.echartsLabelConfig.top
+            "position": props.echartsLabelConfig.top
           },
-          "data": props?.echartsOption.data,
+          "data": props.echartsOption.data,
         }
       ]
     }