Added Tooltip to CandleStick chart.

Imiss-U1025 · Imiss-U1025 · commit 5fb1fc08a482 · 2025-01-11T14:36:08.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
@@ -16,7 +16,7 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartDefaultChartStyle,
+  EchartCandleStickChartStyle,
   EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
@@ -264,12 +264,12 @@ let chartJsonModeChildren: any = {
   dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
   tooltip: withDefault(BoolControl, true),
   dataZoomVisibility: withDefault(BoolControl, true),
-  axisFlag: withDefault(BoolControl, true),
+  axisFlagVisibility: withDefault(BoolControl, true),
 }
-if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
     titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
     labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
     legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
@@ -33,15 +33,15 @@ export function candleStickChartPropertyView(
         })}
         {children.echartsTitleConfig.getPropertyView()}
         {children.echartsTitleVerticalConfig.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.axisFlag.propertyView({label: trans("candleStickChart.axisFlag")})}
-        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
+        {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {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.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight"), tooltip: trans("candleStickChart.dataZoomHeightTooltip") })}
+        {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom"), tooltip: trans("candleStickChart.dataZoomBottomTooltip") })}
+        {children.axisFlagVisibility.propertyView({label: trans("candleStickChart.axisFlagVisibility"), tooltip: trans("candleStickChart.axisFlagVisibilityTooltip") })}
+        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility"), tooltip: trans("candleStickChart.dataZoomVisibilityTooltip") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -172,7 +172,7 @@ export function getEchartsConfig(
       yAxis: {
         type: "value",
         scale: true,
-        splitArea: props?.axisFlag && {
+        splitArea: props?.axisFlagVisibility && {
           show: true,
           areaStyle: {
             color: props?.echartsOption?.axisColor
@@ -185,7 +185,7 @@ export function getEchartsConfig(
       xAxis: props?.echartsOption && {
         type: 'category',
         data: props?.echartsOption.xAxis.data,
-        splitArea: !props?.axisFlag && {
+        splitArea: !props?.axisFlagVisibility && {
           show: true,
           areaStyle: {
             // Provide multiple colors to alternate through
@@ -213,7 +213,6 @@ export function getEchartsConfig(
           data: props?.echartsOption.data,
           itemStyle: {
             ...props?.echartsOption.itemStyle,
-            borderColor: props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
             borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
             borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
             borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -195,7 +195,7 @@ export function getEchartsConfig(
             "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
             "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
             "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
-            "borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
+            "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],
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -54,7 +54,7 @@ export const en = {
     tooltip: 'Tooltip',
     legendVisibility: 'Legend Visibility',
     dataZoomVisibility: 'Data Zoom Visibility',
-    axisFlag: 'Axis Flag',
+    axisFlagVisibility: 'Axis Flag',
     left: 'Left',
     defaultLeft:'10',
     right: 'Right',
@@ -66,7 +66,12 @@ export const en = {
     defaultDataZoomBottom: '20',
     dataZoomBottom: 'Data Zoom Bottom',
     defaultDataZoomHeight: '15',
-    dataZoomHeight: 'Data Zoom Height'
+    dataZoomHeight: 'Data Zoom Height',
+    axisFlagVisibilityTooltip: "Divide the area Vertically/horizontally.",
+    dataZoomVisibilityTooltip: "Show or hide the DataZoom of the Chart.",
+    dataZoomHeightTooltip: "Select the Height length of DataZoom.",
+    dataZoomBottomTooltip: "Select the Bottom length of DataZoom."
+
   },
   sankeyChart: {
     sankeyType: 'Sankey Chart Type',
@@ -196,6 +201,8 @@ export const en = {
     positionChart_x_Tooltip: "Change the Horizontal position of the Chart.",
     positionChart_y_Tooltip: "Change the Vertical position of the Chart.",
     topTooltip: "Change the top length of the Chart.",
+    rightTooltip: "Change the right length of the Chart.",
+    leftTooltip: "Change the left length of the Chart.",
     bottomTooltip: "Change the bottom length of the Chart.",
     widthTooltip: "Change the width of the Chart.",
     radiusTooltip: "Set the Radius value of the Chart.",
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2004,6 +2004,15 @@ export const EchartDefaultChartStyle = [
   CHARTBORDERWIDTH,
 ] as const;
 
+export const EchartCandleStickChartStyle = [
+  getBackground("primarySurface"),
+  CHARTSHADOWCOLOR,
+  CHARTBOXSHADOW,
+  CHARTBORDERSTYLE,
+  CHARTBORDERRADIUS,
+  CHARTBORDERWIDTH,
+] as const;
+
 export const EchartDefaultDetailStyle = [
   CHARTBACKGROUNDCOLOR,
   DETAILSIZE,
