geoMap finished

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/pieChartConfig.tsx

@@ -26,6 +26,10 @@ const BarTypeOptions = [
     label: trans("chart.calendarPie"),
     value: "calendarPie",
   },
+  {
+    label: trans("chart.geoPie"),
+    value: "geoPie",
+  },
 ] as const;
 
 // radius percent for each pie chart when one line has [1, 2, 3] pie charts
@@ -38,7 +42,8 @@ export const PieChartConfig = (function () {
     {
       type: dropdownControl(BarTypeOptions, "basicPie"),
       cellSize: withDefault(NumberControl, 40),
-      range: withDefault(StringControl, "2021-09")
+      range: withDefault(StringControl, "2021-09"),
+      mapUrl: withDefault(StringControl, "https://echarts.apache.org/examples/data/asset/geo/USA.json"),
     },
     (props): PieSeriesOption => {
       const config: PieSeriesOption = {
@@ -64,6 +69,9 @@ export const PieChartConfig = (function () {
           position: 'inside'
         };
       }
+      if (props.type === "geoPie") {
+        config.mapUrl = props.mapUrl;
+      }
       return config;
     }
   )
@@ -78,6 +86,9 @@ export const PieChartConfig = (function () {
         {children.type.getView() === "calendarPie" && children.range.propertyView({
           label: trans("lineChart.range"),
         })}
+        {children.type.getView() === "geoPie" && children.mapUrl.propertyView({
+          label: trans("pieChart.mapUrl"),
+        })}
       </>
     ))
     .build();

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

@@ -12,6 +12,7 @@ import _ from "lodash";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import ReactECharts from "../basicChartComp/reactEcharts";
+import * as echarts from "echarts";
 import {
   childrenToProps,
   depsConfig,
@@ -26,7 +27,7 @@ import {
   getPromiseAfterDispatch,
   dropdownControl,
 } from "lowcoder-sdk";
-import { getEchartsLocale, trans } from "i18n/comps";
+import { getEchartsLocale, i18nObjs, trans } from "i18n/comps";
 import {
   echartsConfigOmitChildren,
   getEchartsConfig,
@@ -141,13 +142,33 @@ PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => {
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
   const childrenProps = childrenToProps(echartsConfigChildren);
+  const [mapJson, setMapJson] = useState(null);
+  useEffect(() => {
+    const fetchMapData = async () => {
+      if (childrenProps.chartConfig.subtype === 'geoPie') {
+        let fetchedMapJson = i18nObjs.usaMap;
+        try {
+          const response = await fetch(childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial);
+          fetchedMapJson = await response.json();
+        } catch {}
+        echarts.registerMap('jsonmap', fetchedMapJson);
+        setMapJson(fetchedMapJson);
+      }
+    };
+
+    fetchMapData();
+  }, [childrenProps.chartConfig.subtype, childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial]);
+
   const option = useMemo(() => {
+    if (!mapJson && childrenProps.chartConfig.subtype === 'geoPie') {
+      return {}; // Return an empty object or some default value until the map is loaded
+    }
     return getEchartsConfig(
       childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
       themeConfig
     );
-  }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+  }, [mapJson, theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   return (
     <ReactResizeDetector

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -94,8 +94,10 @@ export function getSeriesConfig(props: EchartsConfigProps) {
         padAngle: s.padAngle,
         name: s.seriesName,
         label: {
+          show: s.showLabel,
           position: s.labelPosition,
           alignTo: s.labelAlignTo,
+          bleedMargin: s.labelBleedMargin,
         },
         labelLine: {
           length: s.labelLineLength,
@@ -112,6 +114,9 @@ export function getSeriesConfig(props: EchartsConfigProps) {
           shadowBlur: s.itemShadowBlur,
         },
       }
+      if(s.labelAlignTo === 'edge') {
+        config.label.edgeDistance = s.labelEdgeDistance;
+      }
       if(s.roseType !== "none") {
         config.roseType = s.roseType;
       }
@@ -123,6 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
           }
         }
       }
+      config.radius = s.radius;
+      if(s.left!="" && s.top!="") {
+        config.center = [s.left, s.top];
+      }
+      if(props.chartConfig.subtype === 'geoPie') config.coordinateSystem = 'geo';
     } else {
       config.data = s.data;
       config.center = s.date;
@@ -177,6 +187,15 @@ export function getEchartsConfig(
       containLabel: true,
     },
   };
+  if(props.chartConfig.subtype === "geoPie") {
+    config.geo = {
+      map: 'jsonmap',
+      roam: true,
+      itemStyle: {
+        areaColor: '#e7e8ea'
+      }
+    };
+  }
 
   //calendar pie
   if(props.chartConfig.subtype === "calendarPie") {

client/packages/lowcoder-comps/src/comps/pieChartComp/seriesComp.tsx

@@ -16,6 +16,7 @@ import { i18nObjs, trans } from "i18n/comps";
 
 import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
 import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+import { x } from "@fullcalendar/resource/internal-common";
 
 export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
 export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
@@ -82,6 +83,10 @@ export const LabelPositionOptions = [
 const seriesChildrenMap = {
   columnName: StringControl,
   seriesName: StringControl,
+  showLabel: withDefault(BoolControl, true),
+  radius: withDefault(StringControl, 30),
+  left: withDefault(StringControl, ""),
+  top: withDefault(StringControl, ""),
   startAngle: withDefault(NumberControl, 0),
   endAngle: withDefault(NumberControl, 360),
   roseType: dropdownControl(RoseTypeOptions, "none"),
@@ -125,6 +130,15 @@ class SeriesComp extends SeriesTmpComp {
             this.children.columnName.dispatchChangeValueAction(value);
           }}
         />
+        {this.children.radius.propertyView({
+          label: trans("pieChart.radius"),
+        })}
+        {this.children.left.propertyView({
+          label: trans("pieChart.left"),
+        })}
+        {this.children.top.propertyView({
+          label: trans("pieChart.top"),
+        })}
         {this.children.startAngle.propertyView({
           label: trans("pieChart.startAngle"),
         })}
@@ -134,22 +148,25 @@ class SeriesComp extends SeriesTmpComp {
         {this.children.roseType.propertyView({
           label: trans("pieChart.roseType"),
         })}
-        {this.children.labelPosition.propertyView({
+        {this.children.showLabel.propertyView({
+          label: trans("pieChart.showLabel"),
+        })}
+        {this.children.showLabel.getView() && this.children.labelPosition.propertyView({
           label: trans("pieChart.labelPosition"),
         })}
-        {this.children.labelAlignTo.propertyView({
+        {this.children.showLabel.getView() && this.children.labelAlignTo.propertyView({
           label: trans("pieChart.labelAlignTo"),
         })}
-        {this.children.labelBleedMargin.propertyView({
+        {this.children.showLabel.getView() && this.children.labelBleedMargin.propertyView({
           label: trans("pieChart.labelBleedMargin"),
         })}
-        {this.children.labelAlignTo.getView() === "edge" && this.children.labelEdgeDistance.propertyView({
+        {this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "edge" && this.children.labelEdgeDistance.propertyView({
           label: trans("pieChart.labelEdgeDistance"),
         })}
-        {this.children.labelLineLength.propertyView({
+        {this.children.showLabel.getView() && this.children.labelLineLength.propertyView({
           label: trans("pieChart.labelLineLength"),
         })}
-        {this.children.labelAlignTo.getView() === "labelLine" && this.children.labelLineLength2.propertyView({
+        {this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "labelLine" && this.children.labelLineLength2.propertyView({
           label: trans("pieChart.labelLineLength2"),
         })}
         {this.children.padAngle.propertyView({

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

@@ -348,6 +348,10 @@ export const en = {
     borderType: "Border Type",
   },
   pieChart: {
+    showLabel: "Show Label",
+    mapUrl: "Map URL",
+    left: "Left",
+    top: "Top",
     itemBg: "Background Image",
     itemColor: "Color",
     itemShadowColor: "Shadow Color",
@@ -568,6 +572,7 @@ export const en = {
     doughnutPie: "Doughnut Pie",
     rosePie: "Rose Pie",
     calendarPie: "Calendar Pie",
+    geoPie: "Geo Map Pie",
     pieType: "Pie Chart Type",
     spending: "Spending",
     budget: "Budget",

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

@@ -28,4 +28,5 @@ export type I18nObjects = {
   timeXAxisLabel?: XAXisComponentOption["axisLabel"];
   imageEditorLocale?: Record<string, string>;
   defaultPieBg: string;
+  usaMap: Record<string, unknown>;
 };