polar chart

Imiss-U1025 · Imiss-U1025 · commit 82e3b4765766 · 2025-02-11T03:27:06.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts
@@ -218,6 +218,23 @@ export function getEchartsConfig(
     transformedData = [{[seriesColumnNames[0] + "_placeholder"]: 0, [seriesColumnNames[0]]: total}, ...transformedData]
   }
 
+  if(props.chartConfig.subtype === "polar") {
+    config = {
+      ...config,
+      polar: {
+        radius: [props.chartConfig.polarData.polarRadiusDeg, `${props.chartConfig.polarData.polarRadiusSize}%`],
+      },
+      radiusAxis: {
+        max: props.chartConfig.polarData.radiusAxisMax,
+      },
+      angleAxis: {
+        type: 'category',
+        data: props.chartConfig.polarData.labelData,
+        startAngle: 75
+      },
+    }
+  }
+
   console.log("TransformedData", transformedData);
 
   config = {
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
@@ -7,6 +7,8 @@ import {
   showLabelPropertyView,
   ColorControl,
   Dropdown,
+  toArray,
+  jsonControl,
 } from "lowcoder-sdk";
 import { changeChildAction, CompAction } from "lowcoder-core";
 import { BarSeriesOption } from "echarts";
@@ -25,6 +27,10 @@ const BarTypeOptions = [
     label: trans("chart.waterfallBar"),
     value: "waterfall",
   },
+  {
+    label: trans("chart.polar"),
+    value: "polar",
+  },
 ] as const;
 
 export const BarChartConfig = (function () {
@@ -35,6 +41,10 @@ export const BarChartConfig = (function () {
       barWidth: withDefault(NumberControl, i18nObjs.defaultBarChartOption.barWidth),
       showBackground: BoolControl,
       backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
+      radiusAxisMax: withDefault(NumberControl, 4),
+      polarRadiusDeg: withDefault(NumberControl, 30),
+      polarRadiusSize: withDefault(NumberControl, 80),
+      labelData: jsonControl(toArray, []),
     },
     (props): BarSeriesOption => {
       const config: BarSeriesOption = {
@@ -48,6 +58,12 @@ export const BarChartConfig = (function () {
         showBackground: props.showBackground,
         backgroundStyle: {
           color: props.backgroundColor,
+        },
+        polarData: {
+          radiusAxisMax: props.radiusAxisMax,
+          polarRadiusDeg: props.polarRadiusDeg,
+          polarRadiusSize: props.polarRadiusSize,
+          labelData: props.labelData,
         }
 
       };
@@ -58,6 +74,9 @@ export const BarChartConfig = (function () {
         config.label = undefined;
         config.stack = "stackValue";
       }
+      if (props.type === "polar") {
+        config.coordinateSystem = 'polar';
+      }
       return config;
     }
   )
@@ -81,6 +100,18 @@ export const BarChartConfig = (function () {
         {children.showBackground.getView() && children.backgroundColor.propertyView({
           label: trans("barChart.bgColor"),
         })}
+        {children.type.getView()  === "polar" && children.radiusAxisMax.propertyView({
+          label: trans("barChart.radiusAxisMax"),
+        })}
+        {children.type.getView()  === "polar" && children.polarRadiusDeg.propertyView({
+          label: trans("barChart.polarRadiusDeg"),
+        })}
+        {children.type.getView()  === "polar" && children.polarRadiusSize.propertyView({
+          label: trans("barChart.polarRadiusSize"),
+        })}
+        {children.type.getView()  === "polar" && children.labelData.propertyView({
+          label: trans("barChart.polarLabelData"),
+        })}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -317,6 +317,10 @@ export const en = {
     barWidth: 'Bar Width(%)',
     showBg: 'Show Bar Background',
     bgColor: 'Background Color',
+    radiusAxisMax: 'Max',
+    polarRadiusDeg: 'Degree',
+    polarRadiusSize: 'Size (%)',
+    polarLabelData: 'Label Data',
     defaultTitle: 'Bar Chart',
     barType: 'Bar Chart Type',
     tooltip: 'Tooltip',
@@ -479,6 +483,7 @@ export const en = {
     basicBar: "Basic Bar",
     stackedBar: "Stacked Bar",
     waterfallBar: "Waterfall Chart",
+    polar: "Polar",
     barType: "Bar Chart Type",
     categoryAxis: "Category Axis",
     valueAxis: "Value Axis",
