Added datazoom, grid to candleStick chart.

Author: Imiss-U1025

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

@@ -257,9 +257,15 @@ let chartJsonModeChildren: any = {
   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 (EchartsStyle) {
   chartJsonModeChildren = {

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

@@ -32,10 +32,17 @@ export function candleStickChartPropertyView(
           ),
         })}
         {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.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("funnelChart.legendVisibility")})}
+        {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
+        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
@@ -46,7 +53,7 @@ export function candleStickChartPropertyView(
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}
       </Section>
 
-      <Section name={sectionNames.chartStyle}> //chart's style
+      <Section name={sectionNames.chartStyle}>
         {children.chartStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.titleStyle}>
@@ -55,9 +62,12 @@ export function candleStickChartPropertyView(
       <Section name={sectionNames.labelStyle}>
         {children.labelStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.legendStyle}>
-        {children.legendStyle?.getPropertyView()}
-      </Section>
+      {
+        children.legendVisibility.getView() ?
+          <Section name={sectionNames.legendStyle}>
+            {children.legendStyle?.getPropertyView()}
+          </Section> : <></>
+      }
     </>
   );
 

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

@@ -161,30 +161,41 @@ export function getEchartsConfig(
         }
       },
       "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
-      "color": props.echartsOption.data?.map(data => data.color),
-      "tooltip": props.tooltip&&{
+      "color": props?.echartsOption.data?.map(data => data.color),
+      "tooltip": props?.tooltip&&{
         "trigger": "axis",
         "axisPointer": {
           "type": "cross"
         }
       },
       "grid": {
-        "left": "10%",
-        "right": "10%",
-        "bottom": "10%",
+        "left": `${props?.left}%`,
+        "right": `${props?.right}%`,
+        "bottom": `${props?.bottom}%`,
+        "top": `${props?.top}%`,
       },
+      "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,
@@ -194,9 +205,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,
         }
       ]
     }

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

@@ -52,6 +52,20 @@ export const en = {
     title: 'Title',
     defaultTitle: 'CandleStick Chart',
     tooltip: 'Tooltip',
+    legendVisibility: 'Legend Visibility',
+    dataZoomVisibility: 'Data Zoom Visibility',
+    left: 'Left',
+    defaultLeft:'10',
+    right: 'Right',
+    defaultRight:'10',
+    top: 'Top',
+    defaultTop:'20',
+    bottom: 'Bottom',
+    defaultBottom:'20',
+    defaultDataZoomBottom: '20',
+    dataZoomBottom: 'Data Zoom Bottom',
+    defaultDataZoomHeight: '15',
+    dataZoomHeight: 'Data Zoom Height'
   },
   sankeyChart: {
     sankeyType: 'Sankey Chart Type',
@@ -79,7 +93,7 @@ export const en = {
     defaultMax:'100',
     gap: 'Gap',
     defaultGap: '2',
-    label:'Label',
+    label:'Label Visibility',
     opacity: 'Opacity',
     defaultOpacity: '1',
 

client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx

@@ -1,15 +1,15 @@
 import opacityToHex from "./opacityToHex";
 
 const getBackgroundColor = (
-  backgroundColor = '',
-  gradientColor = '',
-  opacity = '',
-  direction = '',
+  backgroundColor: any,
+  gradientColor: any,
+  opacity: any,
+  direction: any,
 ) => {
   if (direction?.split(' ').length < 4)
     return gradientColor && backgroundColor
       ? {
-        "type": 'radical',
+        "type": 'radial',
         "x": direction?.split(' ')[0],
         "y": direction?.split(' ')[1],
         "r": direction?.split(' ')[2],