Added dataZoom, grid to candleStick chart.

Author: Imiss-U1025

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

@@ -16,14 +16,16 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle
 } 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";
@@ -252,15 +254,25 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  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')),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
+  dataZoomVisibility: withDefault(BoolControl, true),
 }
 if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 

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

@@ -31,16 +31,43 @@ export function candleStickChartPropertyView(
             </div>
           ),
         })}
+        {children.echartsTitleConfig.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.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
         {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()}
       </Section>
-      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</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> : <></>
+      }
     </>
   );