Updated guage chart.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx

@@ -147,7 +147,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
       chartSize,
       themeConfig,
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren), theme, childrenToProps(echartsConfigChildren)]);
+  }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
   useEffect(() => {
     comp.children.mapInstance.dispatch(changeValueAction(null, false))
@@ -175,7 +175,6 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
           lazyUpdate
           opts={{ locale: getEchartsLocale() }}
           option={option}
-          theme={themeConfig}
           mode={mode}
         />
     </ReactResizeDetector>

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

@@ -17,8 +17,8 @@ import {
   clickEvent,
   styleControl,
   EchartsStyle,
-  FunnelTextStyle,
-  FunnelChartStyle
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -278,10 +278,10 @@ let chartJsonModeChildren: any = {
 if (EchartsStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    chartStyle: styleControl(FunnelChartStyle, 'chartStyle'),
-    titleStyle: styleControl(FunnelTextStyle, 'titleStyle'),
-    labelStyle: styleControl(FunnelTextStyle, 'labelStyle'),
-    legendStyle: styleControl(FunnelTextStyle, 'legendStyle'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 

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

@@ -16,7 +16,9 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartsStyle,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -265,12 +267,18 @@ let chartJsonModeChildren: any = {
   width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
   min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
   max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
-  gap:withDefault(NumberControl,trans('gaugeChart.defaultGap'))
+  gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
+  startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
+  endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
+  splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
 }
 if (EchartsStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 const chartMapModeChildren = {

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

@@ -39,14 +39,26 @@ export function gaugeChartPropertyView(
         {children.width.propertyView({ label: trans("gaugeChart.width") })} */}
         {children.min.propertyView({ label: trans("gaugeChart.min") })}
         {children.max.propertyView({ label: trans("gaugeChart.max") })}
+        {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })}
+        {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })}
+        {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })}
         {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
         {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.labelStyle}>
+        {children.labelStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.legendStyle}>
+        {children.legendStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>

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

@@ -157,13 +157,25 @@ export function getEchartsConfig(
       "min": props.min,
       "max": props.max,
       "gap": props.gap,
+      "startAngle": props.startAngle,
+      "endAngle": props.endAngle,
+      "splitNumber": props.splitNumber,
       'detail': {
         "backgroundColor": props?.style?.background, "formatter": "{value}%"
       },
       "label": {
         "show": props.label,
-        "position": props.echartsLabelConfig.top
-          },
+        "position": props.echartsLabelConfig.top,
+        "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
+        "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
+        "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
+        "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
+        "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
+        "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
+        "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
+        "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
+        "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
+      },
       /*"detail": {
         "formatter": "{value}%"
       }, */

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

@@ -103,7 +103,14 @@ export const en = {
     defaultMax:'100',
     gap: 'Gap',
     defaultGap: '2',
+    defaultStartAngle: '180',
+    startAngle: 'Start Angle',
+    defaultEndAngle: '0',
+    endAngle: 'End Angle',
+    defaultSplitNumber: '10',
+    splitNumber: 'Split Number',
     label:'Label',
+
   },
   echarts: {
     defaultTitle: "Data Display",

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

@@ -1964,7 +1964,7 @@ export const JsonEditorStyle = [LABEL] as const;
 
 export const EchartsStyle = [getBackground("primarySurface")] as const;
 
-export const FunnelTextStyle = [
+export const EchartDefaultTextStyle = [
   CHARTTEXTCOLOR,
   CHARTTEXTSIZE,
   CHARTTEXTWEIGHT,
@@ -1974,7 +1974,7 @@ export const FunnelTextStyle = [
   CHARTBOXSHADOW,
 ] as const;
 
-export const FunnelChartStyle = [
+export const EchartDefaultChartStyle = [
   CHARTBACKGROUNDCOLOR,
   CHARTGRADIENTCOLOR,
   DIRECTION,