Fixed an editing ability on Multi Title and Ring chart.

Imiss-U1025 · Imiss-U1025 · commit daf61f82664c · 2024-12-26T13:39:59.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
@@ -271,6 +271,8 @@ let chartJsonModeChildren: any = {
   stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption),
   gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption),
   temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption),
+  multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption),
+  ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption),
   chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
   echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
@@ -329,6 +331,7 @@ let chartJsonModeChildren: any = {
   axisTickColorGrade: withDefault(ColorControl),
   axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')),
 }
+
 if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx
@@ -271,6 +271,7 @@ export function gaugeChartPropertyView(
         {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
         {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
         {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+        {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
         {children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
         {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })}
         {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
@@ -306,7 +307,7 @@ export function gaugeChartPropertyView(
   const multiGaugePropertyView = (
     <>
       <Section name={trans("chart.config")}>
-        {children.echartsOption.propertyView({
+        {children.multiTitleGaugeOption.propertyView({
           label: trans("chart.echartsOptionLabel"),
           styleName: "higher",
           tooltip: (
@@ -338,6 +339,8 @@ export function gaugeChartPropertyView(
         {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
         {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
         {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+        {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+        {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
         {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
         {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
         {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
@@ -369,7 +372,7 @@ export function gaugeChartPropertyView(
   const ringGaugePropertyView = (
     <>
       <Section name={trans("chart.config")}>
-        {children.echartsOption.propertyView({
+        {children.ringGaugeOption.propertyView({
           label: trans("chart.echartsOptionLabel"),
           styleName: "higher",
           tooltip: (
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -425,12 +425,10 @@ export function getEchartsConfig(
           ...basicSeries,
           type: 'gauge',
           pointer: {
-            width: 6,      // Narrow the pointer
-            length: '70%', // Shorten the pointer length
-            offsetCenter: [0, '10%'],
-            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z'
+            ...basicSeries.pointer,
+            icon: props.pointerIcon || 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+            offsetCenter: [0, '8%']
           },
-
           progress: {
             show: true,
             overlap: true,
@@ -440,56 +438,34 @@ export function getEchartsConfig(
             roundCap: true
           },
 
-          data: [
-            {
-              value: 20,
-              name: 'Good',
-              title: {
-                fontSize: 12,
-                offsetCenter: ['-60%', '60%']
-              },
-              detail: {
-                fontSize: 12,
-                offsetCenter: ['-60%', '80%']
-              }
+          data: props.multiTitleGaugeOption.data[0].value.map(item => ({
+            value: item.value,
+            name: item.title,
+            title: {
+              offsetCenter: item.titlePosition
             },
-            {
-              value: 40,
-              name: 'Better',
-              title: {
-                fontSize: 12,
-                offsetCenter: ['0%', '60%']
-              },
-              detail: {
-                fontSize: 12,
-                offsetCenter: ['0%', '80%']
-              }
+            detail: {
+              offsetCenter: item.valuePosition
             },
-            {
-              value: 60,
-              name: 'Perfect',
-              title: {
-                fontSize: 12,
-                offsetCenter: ['60%', '60%']
-              },
-              detail: {
-                fontSize: 12,
-                offsetCenter: ['60%', '80%']
+            itemStyle: {
+              color: item.color
+            },
+            pointer: {
+              itemStyle: {
+                color: item.color
               }
             }
-          ],
+          })),
 
           title: {
-            fontSize: 12
+            ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16),
           },
           detail: {
             width: 30,
             height: 12,
-            fontSize: 12,
-            color: '#fff',
+            ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff'),
             backgroundColor: 'inherit',
-            borderRadius: 3,
-            formatter: '{value}%'
+            formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0],
           }
         }
       ]
@@ -602,11 +578,9 @@ export function getEchartsConfig(
       series: [
         {
           ...basicSeries,
-          type: 'gauge',
-          center: ['50%', '55%'],
-          radius: '80%',              // Shrink the gauge
           startAngle: 90,
-          endAngle: -270,
+          endAngle: 450,
+          type: 'gauge',
           pointer: {
             show: false
           },
@@ -617,7 +591,7 @@ export function getEchartsConfig(
             clip: false,
             itemStyle: {
               borderWidth: 1,
-              borderColor: '#464646'
+              borderColor: 'inherit'
             }
           },
           axisLine: {
@@ -634,63 +608,35 @@ export function getEchartsConfig(
           axisLabel: {
             show: false
           },
-          data: [
-            {
-              value: 20,
-              name: 'Perfect',
-              title: {
-                fontSize: 12,         // Smaller font
-                offsetCenter: ['0%', '-40%'] // Adjust if needed
-              },
-              detail: {
-                valueAnimation: true,
-                fontSize: 12,         // Smaller font
-                width: 40,            // Slightly smaller
-                height: 12,           // Slightly smaller
-                offsetCenter: ['0%', '-20%']
-              }
+          data: props.ringGaugeOption.data[0].value.map(item => ({
+            value: item.value,
+            name: item.title,
+            title: {
+              offsetCenter: item.titlePosition
             },
-            {
-              value: 40,
-              name: 'Good',
-              title: {
-                fontSize: 12,
-                offsetCenter: ['0%', '0%']
-              },
-              detail: {
-                valueAnimation: true,
-                fontSize: 12,
-                width: 40,
-                height: 12,
-                offsetCenter: ['0%', '20%']
-              }
+            detail: {
+              offsetCenter: item.valuePosition
             },
-            {
-              value: 60,
-              name: 'Commonly',
-              title: {
-                fontSize: 12,
-                offsetCenter: ['0%', '40%']
-              },
-              detail: {
-                valueAnimation: true,
-                fontSize: 12,
-                width: 40,
-                height: 12,
-                offsetCenter: ['0%', '60%']
+            itemStyle: {
+              color: item.color
+            },
+            pointer: {
+              itemStyle: {
+                color: item.color
               }
             }
-          ],
+          })),
           title: {
-            fontSize: 12 // Smaller title font size
+            ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16),
           },
           detail: {
-            fontSize: 12,
             width: 40,
             height: 12,
             borderRadius: 20,
             borderWidth: 1,
-            formatter: '{value}%'
+            ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#000000'),
+            // backgroundColor: 'inherit',
+            formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0],
           }
         }
       ]
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
@@ -191,6 +191,30 @@ export const enObj: I18nObjects = {
       {value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" }
     ]
   },
+  defaultMultiTitleGaugeChartOption: {
+    data: [
+      {
+        formatter: "{value}%",
+        value: [
+          {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['-60%', '60%'], valuePosition: ['-60%', '80%']},
+          {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '60%'], valuePosition: ['0%', '80%']},
+          {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['60%', '60%'], valuePosition: ['60%', '80%']},
+        ]
+      }
+    ]
+  },
+  defaultRingGaugeChartOption: {
+    data: [
+      {
+        formatter: "{value}%",
+        value: [
+          {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']},
+          {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']},
+          {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']},
+        ]
+      }
+    ]
+  },
   defaultSankeyChartOption: {
     data: [
       {name: "Show"},
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx
@@ -8,6 +8,8 @@ export type I18nObjects = {
   defaultStageGaugeChartOption: Record<string, unknown>;
   defaultGradeGaugeChartOption: Record<string, unknown>;
   defaultTemperatureGaugeChartOption: Record<string, unknown>;
+  defaultMultiTitleGaugeChartOption: Record<string, unknown>;
+  defaultRingGaugeChartOption: Record<string, unknown>;
   defaultFunnelChartOption: Record<string, unknown>;
   defaultSankeyChartOption: Record<string, unknown>;
   defaultCandleStickChartOption: Record<string, unknown>;
