Added control fields and style fields to radar charts

lowcoder-org · FalkWolsky · Jan 11, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
commit 5e37980ff1f42597ab0de35ae2ff9bbee9caf4ba
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx
@@ -1,6 +1,7 @@
 import {
   AlignBottom,
   AlignTop,
+  AlignClose,
   dropdownControl,
   MultiCompBuilder,
 } from "lowcoder-sdk";
@@ -12,6 +13,10 @@ const LegendPositionOptions = [
     label: <AlignBottom />,
     value: "bottom",
   },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
   {
     label: <AlignTop />,
     value: "top",

diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
@@ -144,7 +144,7 @@ export function getEchartsConfig(
           ...styleWrapper(props?.titleStyle, theme?.titleStyle)
         }
       },
-      "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+      backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
       tooltip: props?.tooltip && {
         position: "top"
       },

diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
@@ -145,7 +145,7 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.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,10 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { RadarChartConfig } from "comps/chartComp/chartConfigs/radarChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
+import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
 
 export const ChartTypeOptions = [
   {
@@ -252,15 +258,31 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
+  echartsLegendOrientConfig: EchartsLegendOrientConfig,
+  echartsLegendAlignConfig: EchartsLegendAlignConfig,
+
+  position_x:withDefault(NumberControl,trans('radarChart.defaultPosition_X')),
+  position_y:withDefault(NumberControl,trans('radarChart.defaultPosition_Y')),
+  radius:withDefault(NumberControl,trans('radarChart.defaultRadius')),
+  splitNumber:withDefault(NumberControl,trans('radarChart.defaultSplitNumber')),
+  startAngle:withDefault(NumberControl,trans('radarChart.defaultStartAngle')),
   // style: styleControl(EchartsStyle, 'style'),
+  areaFlag:withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
+  indicatorVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+    detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
   }
 }
 

diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx
@@ -31,15 +31,44 @@ export function radarChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("radarChart.title") })}
-        {children.tooltip.propertyView({label: trans("radarChart.tooltip")})}
+
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
+        {children.echartsTitle.propertyView({ label: trans("radarChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.radius.propertyView({ label: trans("radarChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+        {children.startAngle.propertyView({ label: trans("radarChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+        {children.splitNumber.propertyView({ label: trans("radarChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+        {children.position_x.propertyView({ label: trans("radarChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+        {children.position_y.propertyView({ label: trans("radarChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+
+        {children.areaFlag.propertyView({label: trans("radarChart.areaFlag"), tooltip: trans("radarChart.areaFlagTooltip")})}
+        {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})}
+        {children.indicatorVisibility.propertyView({label: trans("radarChart.indicatorVisibility"), tooltip: trans("radarChart.indicatorVisibilityTooltip")})}
       </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.indicatorVisibility.getView() ?
+          <Section name={sectionNames.labelStyle}>
+            {children.detailStyle?.getPropertyView()}
+          </Section> : <></>
+      }
+      {
+        children.legendVisibility.getView() ?
+          <Section name={sectionNames.legendStyle}>
+            {children.legendStyle?.getPropertyView()}
+          </Section> : <></>
+      }
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.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[],
@@ -134,33 +136,82 @@ export function getEchartsConfig(
   theme?: any,
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
+    console.log(props?.detailStyle?.detailSize?.split('px')[0] || theme?.detailStyle?.detailSize.split('px')[0] || 3,
+      props?.detailStyle?.detailSize?.split('px')[1] || theme?.detailStyle?.detailSize.split('px')[1] || 3)
     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": {
-    "trigger": "axis",
-    "formatter": function(params) {
-      let tooltipText = params[0].name + '<br/>';
-      params.forEach(function(item) {
-        tooltipText += item.seriesName + ': ' + item.value + '<br/>';
-      });
-      return tooltipText;
-    }
-  },
-     "radar": [
-    {
-      "indicator": props.echartsOption.indicator,
-      "center": ["50%", "50%"],
-      "radius": "60%"
-    }
+      title: {
+        text: props?.echartsTitle,
+        top: props?.echartsTitleVerticalConfig.top,
+        left: props?.echartsTitleConfig.top,
+        textStyle: {
+          ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+        }
+      },
+      legend: props.legendVisibility && {
+        top: props.echartsLegendConfig.top,
+        left: props.echartsLegendAlignConfig.left,
+        orient: props.echartsLegendOrientConfig.orient,
+        textStyle: {
+          ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15),
+        }
+      },
+      backgroundColor: parseBackground(
+        props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"
+      ),
+      color: props.echartsOption.data?.map(data => data.color),
+      tooltip: {
+        trigger: "axis",
+        formatter: function (params) {
+          let tooltipText = params[0].name + '<br/>';
+          params.forEach(function (item) {
+            tooltipText += item.seriesName + ': ' + item.value + '<br/>';
+          });
+          return tooltipText;
+        }
+      },
+      radar: [
+        {
+          indicator: props.echartsOption.indicator,
+          center: [`${props?.position_x}%`, `${props?.position_y}%`],
+          startAngle: props?.startAngle,
+          endAngle: props?.endAngle,
+          splitNumber: props?.splitNumber,
+          radius: `${props.radius}%`,
+          shape: props?.areaFlag ? 'circle' : 'line',
+          axisName: {
+            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13),
+            show: props?.indicatorVisibility,
+          },
+          splitArea: {
+            areaStyle: {
+              color: props?.echartsOption?.color,
+              ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+            }
+          },
+        }
+      ],
+      series: props?.echartsOption && {
+        data: props?.echartsOption?.series && [
+          ...props?.echartsOption?.series.map(item => ({
+            ...item,
+            areaStyle: item.areaColor && {
+              ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+              color: item.areaColor
+            },
+            lineStyle: {
+              ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+              color: item.lineColor,
+              width: item.lineWidth,
+            },
+            symbolSize: item.pointSize,
+            itemStyle: {
+              color: item.pointColor
+            }
+          }))
         ],
-     "series": props.echartsOption.series.map(option=>{return {...option,type:'radar'}})
-}
+        type: "radar"
+      }
+    }
     return props.echartsOption ? opt : {};
 
   }

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -87,7 +87,21 @@ export const en = {
     radarType: 'Radar Chart Type',
     title: 'Title',
     defaultTitle: 'Radar Chart',
+    radius: 'Radius',
+    defaultRadius: '60',
+    defaultStartAngle: '90',
+    startAngle: 'Start Angle',
+    defaultSplitNumber: '5',
+    position_x: 'Position-X',
+    defaultPosition_X: '50',
+    position_y: 'Position-Y',
+    defaultPosition_Y: '50',
+    splitNumber: 'Split Number',
     tooltip: 'Tooltip',
+    areaFlag: 'Area Flag',
+    areaFlagTooltip: "Divide the area into a Line or a Circle.",
+    indicatorVisibility: "Indicator",
+    indicatorVisibilityTooltip: "Show or hide the Indicator of the Chart.",
   },
   candleStickChart: {
     candleStickType: 'CandleStick Chart Type',
@@ -223,6 +237,7 @@ export const en = {
 
   },
   echarts: {
+    legendVisibility: 'Legend',
     defaultTitle: "Data Display",
     legendPosition: "Legend-Y",
     legendOrient: "Legend Orient",

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
@@ -325,32 +325,29 @@ export const enObj: I18nObjects = {
     }
   },
   defaultRadarChartOption: {
+    color: ['#6ee1d5', '#a7dd85'],
     indicator: [
-        { name: "Indicator 1", max: 100 },
-        { name: "Indicator 2", max: 100 },
-        { name: "Indicator 3", max: 100 },
-        { name: "Indicator 4", max: 100 },
-        { name: "Indicator 5", max: 100 }
+      { name: "Indicator 1", max: 100 },
+      { name: "Indicator 2", max: 100 },
+      { name: "Indicator 3", max: 100 },
+      { name: "Indicator 4", max: 100 },
+      { name: "Indicator 5", max: 100 },
+      { name: "Indicator 6", max: 100 }
     ],
     series: [
-       {
-      "name": "Data 1",
-      "data": [
-        {
-          "value": [90, 80, 70, 60, 50],
-          "name": "Data 1"
-        }
-      ]
+      {
+        "name": "Data A",
+        "value": [90, 80, 70, 70, 80, 70],
       },
       {
-      "name": "Data 2",
-      "data": [
-        {
-          "value": [70, 60, 50, 40, 30],
-          "name": "Data 2"
-        }
-      ]
-    }
+        name: "Data B",
+        value: [60, 60, 40, 50, 50, 40],
+        areaColor: '#ff00ff77',
+        lineColor: '#ff00ff77',
+        lineWidth: 2,
+        pointSize: 8,
+        pointColor: "#ff00ff77",
+      }
     ]
   },
   defaultHeatmapChartOption: {

diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx
@@ -17,6 +17,7 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo
     "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
     "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
     "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
+    "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number)
   }
 }
 

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2029,6 +2029,22 @@ export const EchartDefaultDetailStyle = [
   CHARTBORDERWIDTH,
 ] as const;
 
+export const RadarLabelStyle = [
+  CHARTBACKGROUNDCOLOR,
+  PADDING,
+  CHARTTEXTCOLOR,
+  CHARTTEXTSIZE,
+  CHARTTEXTWEIGHT,
+  CHARTFONTFAMILY,
+  CHARTFONTSTYLE,
+  CHARTSHADOWCOLOR,
+  CHARTBOXSHADOW,
+  CHARTBORDERCOLOR,
+  CHARTBORDERSTYLE,
+  CHARTBORDERRADIUS,
+  CHARTBORDERWIDTH,
+] as const;
+
 export const CalendarStyle = [
   getBackground("primarySurface"),
   {