Added control fields and style fields to sunburst charts.

Author: Imiss-U1025

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

@@ -145,7 +145,7 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx

@@ -16,7 +16,9 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
+  RadarLabelStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +33,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { SunburstChartConfig } from "comps/chartComp/chartConfigs/sunburstChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -253,14 +257,22 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+
+  radiusInline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusInline')),
+  radiusOutline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusOutline')),
+  position_x:withDefault(StringControl,trans('sunburstChart.defaultPosition_X')),
+  position_y:withDefault(StringControl,trans('sunburstChart.defaultPosition_Y')),
   tooltip: withDefault(BoolControl, true),
-  legendVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx

@@ -31,15 +31,35 @@ export function sunburstChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("sunburstChart.title") })}
-        {children.tooltip.propertyView({label: trans("sunburstChart.tooltip")})}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+
+        {children.echartsTitle.propertyView({ label: trans("sunburstChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.radiusInline.propertyView({ label: trans("sunburstChart.radiusInline"), tooltip: trans("sunburstChart.radiusInlineTooltip") })}
+        {children.radiusOutline.propertyView({ label: trans("sunburstChart.radiusOutline"), tooltip: trans("sunburstChart.radiusOutlineTooltip") })}
+        {children.position_x.propertyView({ label: trans("sunburstChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+        {children.position_y.propertyView({ label: trans("sunburstChart.position_Y"), tooltip: trans("echarts.positionChart_y_Tooltip") })}
+
+        {children.tooltip.propertyView({label: trans("sunburstChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+        {children.labelVisibility.propertyView({label: trans("sunburstChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
       </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>
+      {
+        children.labelVisibility.getView() &&
+          <Section name={sectionNames.detailStyle}>
+            {children.detailStyle?.getPropertyView()}
+          </Section>
+      }
+
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts

@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -133,32 +135,44 @@ export function getEchartsConfig(
   chartSize?: ChartSize,
   theme?: any,
 ): EChartsOptionWithMap {
+
   if (props.mode === "json") {
     let opt={
-  "title": {
-    "text": props.echartsTitle,
-    'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-    "left":"center"
-  },
-  "backgroundColor": props?.style?.background || theme?.style?.background,
-  "color": props.echartsOption.data?.map(data => data.color),
-  "tooltip": props.tooltip&&{
-    "trigger": "item",
-    "formatter": "{b}: {c}"
-  },
-  "series": [
-    {
-      "name": props.echartsConfig.type,
-      "type": props.echartsConfig.type,
-      "top": "10%",
-      "left": "10%",
-      "bottom": "10%",
-      "right": "10%",
-      "symbolSize": 7,
-      'data': props.echartsOption.data,
+      title: {
+        text: props?.echartsTitle,
+        top: props?.echartsTitleVerticalConfig.top,
+        left: props?.echartsTitleConfig.top,
+        textStyle: {
+          ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+        }
+      },
+      backgroundColor: parseBackground(
+        props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"
+      ),
+      color: props.echartsOption.data?.map(data => data.color),
+      tooltip: props.tooltip&&{
+        trigger: "item",
+        formatter: "{b}: {c}"
+      },
+      series: [
+        {
+          type: props.echartsConfig.type,
+          radius: [`${props?.radiusInline}%`, `${props?.radiusOutline}%`],
+          center: [`${props?.position_x}%`, `${props?.position_y}%`],
+          symbolSize: 7,
+          data: props.echartsOption.data,
+          levels: props.echartsOption.levels,
+          itemStyle: {
+            ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+          },
+          label: {
+            show: props?.labelVisibility,
+            rotate: 'tangential',
+            ...styleWrapper(props?.detailStyle, theme?.detailStyle,11)
+          },
+        }
+      ],
     }
-  ]
-}
     return props.echartsOption ? opt : {};
 
   }

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

@@ -26,6 +26,17 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Sunburst Chart',
     tooltip: 'Tooltip',
+    defaultRadiusInline: "20",
+    defaultRadiusOutline: "80",
+    defaultPosition_X: "50",
+    defaultPosition_Y: "50",
+    radiusInline: "Inline Radius",
+    radiusOutline: "Outline Radius",
+    position_x: "Position-X",
+    position_Y: "Position-Y",
+    radiusInlineTooltip: "Set the Inline radius value of the Chart.",
+    radiusOutlineTooltip: "Set the Outline radius value of the Chart.",
+    labelVisibility: "Label"
   },
   treemapChart: {
     treemapType: 'Treemap Chart Type',

client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

@@ -474,6 +474,28 @@ export const enObj: I18nObjects = {
             }
           ]
         }
+    ],
+    levels: [
+      {
+        itemStyle: {
+          color: '#f6e58d'
+        },
+      },
+      {
+        itemStyle: {
+          color: '#12e192'
+        },
+      },
+      {
+        itemStyle: {
+          color: '#ffbe76'
+        },
+      },
+      {
+        itemStyle: {
+          color: '#007979'
+        },
+      }
     ]
   },
   defaultCalendarChartOption: {