Updated Gauge Chart.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

@@ -261,6 +261,7 @@ let chartJsonModeChildren: any = {
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
   label: withDefault(BoolControl, true),
+  progressBar: withDefault(BoolControl, true),
   left:withDefault(NumberControl,trans('gaugeChart.defaultLeft')),
   top:withDefault(NumberControl,trans('gaugeChart.defaultTop')),
   bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')),
@@ -269,13 +270,14 @@ let chartJsonModeChildren: any = {
   min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
   max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
   gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
-  positin_x:withDefault(NumberControl,trans('gaugeChart.position_x')),
-  positin_y:withDefault(NumberControl,trans('gaugeChart.position_y')),
+  position_x:withDefault(NumberControl,trans('gaugeChart.defaultPosition_X')),
+  position_y:withDefault(NumberControl,trans('gaugeChart.defaultPosition_Y')),
   startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
   endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
   splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
   pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')),
   pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')),
+  progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
 
 }
 if (EchartsStyle) {

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx

@@ -47,8 +47,10 @@ export function gaugeChartPropertyView(
         {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })}
         {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength") })}
         {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth") })}
+        {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth") })}
         {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
         {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
+        {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
@@ -62,7 +64,7 @@ export function gaugeChartPropertyView(
       <Section name={sectionNames.labelStyle}>
         {children.labelStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.legendStyle}>
+      <Section name={sectionNames.detailStyle}>
         {children.legendStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

@@ -186,13 +186,13 @@ export function getEchartsConfig(
           "min": props.min,
           "max": props.max,
           "gap": props.gap,
-          "center": [`${props.position_x}%`, `${props.position_y}%`],
-          "startAngle": props.startAngle,
-          "endAngle": props.endAngle,
-          "splitNumber": props.splitNumber,
+          "center": [`${props?.position_x}%`, `${props?.position_y}%`],
+          "startAngle": props?.startAngle,
+          "endAngle": props?.endAngle,
+          "splitNumber": props?.splitNumber,
           "pointer": {
-            "length": `${props.pointerLength}%`,
-            "width": props.pointerWidth,
+            "length": `${props?.pointerLength}%`,
+            "width": props?.pointerWidth,
           },
           "itemStyle": {
             "color": props.echartsOption.data?.map(data => data.color),
@@ -206,6 +206,17 @@ export function getEchartsConfig(
             "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]
           },
+          "progress": {
+            "roundCap": true,
+            "show": props?.progressBar,
+            "width": props?.progressBarWidth
+          },
+          "axisLine": {
+            "roundCap": true,
+            "lineStyle": {
+              "width": props?.progressBarWidth
+            }
+          },
           'detail': {
             "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
             "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16,

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

@@ -120,7 +120,9 @@ export const en = {
     defaultPosition_X: '50',
     position_y: 'Position-Y',
     defaultPosition_Y: '60',
-
+    progressBarWidth: 'Progress Bar Width',
+    defaultProgressBarWidth: '10',
+    progressBar: 'Progress Bar',
   },
   echarts: {
     defaultTitle: "Data Display",

client/packages/lowcoder-design/src/components/Section.tsx

@@ -190,4 +190,5 @@ export const sectionNames = {
   chartStyle:trans("prop.chartStyle"),
   titleStyle:trans("prop.titleStyle"),
   legendStyle:trans("prop.legendStyle"),
+  detailStyle:trans("prop.detailStyle"),
 };

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

@@ -43,6 +43,7 @@ export const en = {
     chartStyle: "Chart Style",
     titleStyle: "Title Style",
     legendStyle: "Legend Style",
+    detailStyle: "Detail Style",
   },
   passwordInput: {
     label: "Password:",