Updated Gauge Chart.

Author: Imiss-U1025

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

@@ -269,6 +269,8 @@ 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')),
   startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
   endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
   splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),

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

@@ -40,6 +40,8 @@ export function gaugeChartPropertyView(
         {children.radius.propertyView({ label: trans("gaugeChart.radius") })}
         {children.min.propertyView({ label: trans("gaugeChart.min") })}
         {children.max.propertyView({ label: trans("gaugeChart.max") })}
+        {children.position_x.propertyView({ label: trans("gaugeChart.position_x") })}
+        {children.position_y.propertyView({ label: trans("gaugeChart.position_y") })}
         {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })}
         {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })}
         {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })}

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

@@ -186,6 +186,7 @@ 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,

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

@@ -110,12 +110,16 @@ export const en = {
     defaultSplitNumber: '10',
     splitNumber: 'Split Number',
     radius: 'Radius',
-    defaultRadius: '60',
-    defaultPointerLength: '75',
+    defaultRadius: '80',
+    defaultPointerLength: '50',
     pointerLength: 'Pointer Length',
     pointerWidth: 'Pointer Width',
-    defaultPointerWidth: '25',
+    defaultPointerWidth: '5',
     label:'Label',
+    position_x: 'Position-X',
+    defaultPosition_X: '50',
+    position_y: 'Position-Y',
+    defaultPosition_Y: '60',
 
   },
   echarts: {

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -1077,6 +1077,7 @@ const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3p
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 const StyledTextTransformIcon = styled(TextTransformationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
+const StyledFontStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 const StyledTextStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 const StyledTextDecorationPropIcon = styled(TextDecorationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
@@ -1477,7 +1478,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
                                                   >
                                                 ).propertyView({
                                                   label: config.label,
-                                                  preInputNode: <StyledFontFamilyIcon title="chartFontStyle" />,
+                                                  preInputNode: <StyledFontStyleIcon title="chartFontStyle" />,
                                                   placeholder: props[name],
                                                 })
                                                 : name === 'animationIterationCount'