lowcoder-map-component 0.1.1

package/src/comps/Mapcharts/comp.tsx

@@ -0,0 +1,381 @@
+import { ChartPropertyView } from "@/components/ChartPropertyView";
+import { getEchartsLocale, trans } from "@/i18n/comps";
+import { formatAllStyles } from "@/utils/chartStyle.util";
+import { ChartSize, echartProps, getEChartConfig } from "@/utils/echarts.util";
+import { getSelectedPoints } from "@/utils/selection.util";
+import { registerMap } from "echarts";
+import ReactECharts from "echarts-for-react";
+import EChartsReactCore from "echarts-for-react/lib/core";
+import {
+  changeChildAction,
+  chartColorPalette,
+  childrenToProps,
+  CompAction,
+  CompActionTypes,
+  depsConfig,
+  genRandomKey,
+  getPromiseAfterDispatch,
+  NameConfig,
+  Theme,
+  ThemeContext,
+  UICompBuilder,
+  valueComp,
+  withDefault,
+  withExposingConfigs,
+  withViewFn,
+} from "lowcoder-sdk";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { chartUiProps } from "./constants";
+
+let clickEventCallback = () => {};
+
+let MapChartTmpComp = (function () {
+  return new UICompBuilder(
+    {
+      ...echartProps,
+      ...chartUiProps,
+    },
+    () => null
+  )
+    .setPropertyViewFn(ChartPropertyView)
+    .build();
+})();
+
+MapChartTmpComp = withViewFn(MapChartTmpComp, (comp) => {
+  const onUIEvent = comp.children.onUIEvent.getView();
+  const onEvent = comp.children.onEvent.getView();
+  const { mapType, mapUrl } = comp.children.chartConfig.getView();
+  const echartsCompRef = useRef<EChartsReactCore | null>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartSize, setChartSize] = useState<ChartSize>();
+  const firstResize = useRef(true);
+  const theme: Theme = useContext(ThemeContext);
+  const [mapsRegistered, setMapsRegistered] = useState(false);
+  const [customMapLoaded, setCustomMapLoaded] = useState(false);
+  const prevMapUrlRef = useRef(null);
+  const prevMapType = useRef<any>(null);
+
+  const defaultChartTheme = {
+    color: chartColorPalette,
+    backgroundColor: "#fff",
+  };
+
+  let themeConfig = defaultChartTheme;
+  try {
+    themeConfig = theme?.theme?.chart
+      ? JSON.parse(theme.theme.chart)
+      : defaultChartTheme;
+  } catch (error) {
+    console.error("theme chart error: ", error);
+  }
+
+  useEffect(() => {
+    const loadMaps = async () => {
+      try {
+        try {
+          const worldMapModule = await import("@/geo/world.geo.json");
+          registerMap("world", worldMapModule.default as any);
+        } catch (e) {
+          console.warn("Failed to load world.json");
+        }
+        try {
+          const worldMapModule = await import("@/geo/vn.geo.json");
+          registerMap("vietnam", worldMapModule.default as any);
+        } catch (e) {
+          console.warn("Failed to load vietnam.json");
+        }
+
+        setMapsRegistered(true);
+      } catch (error) {
+        console.error("Failed to load maps:", error);
+        setMapsRegistered(true);
+      }
+    };
+
+    loadMaps();
+  }, []);
+
+  useEffect(() => {
+    const loadCustomMap = async () => {
+      if (
+        mapType !== "custom" ||
+        !mapUrl ||
+        !mapsRegistered ||
+        prevMapUrlRef.current === mapUrl
+      ) {
+        return;
+      }
+
+      try {
+        const response = await fetch(mapUrl);
+
+        prevMapUrlRef.current = mapUrl;
+        if (!response.ok) {
+          throw new Error(`Failed to fetch map: ${response.statusText}`);
+        }
+
+        const geoData = await response.json();
+
+        if (!geoData) throw new Error("Data not found");
+
+        registerMap("custom", geoData);
+        console.log("Custom map loaded and registered successfully");
+        setCustomMapLoaded(true);
+      } catch (error) {
+        console.error("Failed to load custom map:", error);
+
+        setCustomMapLoaded(false);
+      }
+    };
+    loadCustomMap();
+  }, [mapType, mapUrl, mapsRegistered]);
+
+  const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+    await getPromiseAfterDispatch(dispatch, action, {
+      autoHandleAfterReduce: true,
+    });
+    onEvent("click");
+  };
+
+  useEffect(() => {
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return undefined;
+    }
+    echartsCompInstance?.on("click", (param: any) => {
+      document.dispatchEvent(
+        new CustomEvent("clickEvent", {
+          bubbles: true,
+          detail: {
+            action: "click",
+            data: param.data,
+          },
+        })
+      );
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction("lastInteractionData", param.data, false)
+      );
+    });
+    return () => {
+      echartsCompInstance?.off("click");
+      document.removeEventListener("clickEvent", clickEventCallback);
+    };
+  }, []);
+
+  useEffect(() => {
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return;
+    }
+    echartsCompInstance?.on("selectchanged", (param: any) => {
+      const option: any = echartsCompInstance?.getOption();
+      document.dispatchEvent(
+        new CustomEvent("clickEvent", {
+          bubbles: true,
+          detail: {
+            action: param.fromAction,
+            data: getSelectedPoints(param, option),
+          },
+        })
+      );
+
+      if (param.fromAction === "select") {
+        comp.dispatch(
+          changeChildAction(
+            "selectedPoints",
+            getSelectedPoints(param, option),
+            false
+          )
+        );
+        onUIEvent("select");
+      } else if (param.fromAction === "unselect") {
+        comp.dispatch(
+          changeChildAction(
+            "selectedPoints",
+            getSelectedPoints(param, option),
+            false
+          )
+        );
+        onUIEvent("unselect");
+      }
+
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction(
+          "lastInteractionData",
+          getSelectedPoints(param, option),
+          false
+        )
+      );
+    });
+    return () => {
+      echartsCompInstance?.off("selectchanged");
+      document.removeEventListener("clickEvent", clickEventCallback);
+    };
+  }, [onUIEvent]);
+
+  const childrenProps = formatAllStyles(childrenToProps(comp.children));
+
+  const updateSeriesMap = (
+    data: any,
+    newMapType: string,
+    index: number = 0
+  ): any => {
+    if (!data || !Array.isArray(data.series)) {
+      throw new Error("Invalid data format: missing series array");
+    }
+
+    const updatedData = { ...data };
+    updatedData.series = [...data.series];
+
+    if (!updatedData.series[index]) {
+      throw new Error(`Series index ${index} does not exist`);
+    }
+
+    updatedData.series[index] = {
+      ...updatedData.series[index],
+      mapType: newMapType,
+      map: newMapType,
+    };
+
+    return updatedData;
+  };
+
+  const option = useMemo(() => {
+    if (!mapsRegistered) {
+      return {
+        title: {
+          text: "Loading map...",
+          left: "center",
+          top: "center",
+        },
+      };
+    }
+
+    const defaultOption = getEChartConfig(
+      childrenProps,
+      chartSize,
+      themeConfig
+    );
+    const isFinished = mapType === "custom" && !customMapLoaded;
+
+    const newOption = updateSeriesMap(
+      defaultOption,
+      isFinished ? prevMapType.current : mapType
+    );
+
+    if (!isFinished) prevMapType.current = mapType;
+
+    return newOption;
+  }, [
+    themeConfig,
+    childrenProps,
+    chartSize,
+    mapsRegistered,
+    mapType,
+    customMapLoaded,
+  ]);
+
+  useResizeDetector({
+    targetRef: containerRef,
+    onResize: ({ width, height }) => {
+      if (width && height) {
+        setChartSize({ w: width, h: height });
+      }
+      if (!firstResize.current) {
+        echartsCompRef.current?.getEchartsInstance().resize();
+      } else {
+        firstResize.current = false;
+      }
+    },
+  });
+
+  return (
+    <div ref={containerRef} style={{ height: "100%" }}>
+      <ReactECharts
+        ref={(e) => (echartsCompRef.current = e)}
+        style={{ height: "100%" }}
+        notMerge
+        lazyUpdate
+        opts={{
+          locale: getEchartsLocale(),
+          renderer: "canvas",
+        }}
+        option={option}
+      />
+    </div>
+  );
+});
+
+MapChartTmpComp = class extends MapChartTmpComp {
+  updateContext(comp: any) {
+    return comp;
+  }
+
+  reduce(action: CompAction): this {
+    const comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      const newData = comp.children.data.getView();
+      if (comp.children.data !== this.children.data) {
+        setTimeout(() => {
+          comp.children.series.dispatchDataChanged(newData);
+        }, 0);
+      }
+      return this.updateContext(comp);
+    }
+    return comp;
+  }
+
+  autoHeight(): boolean {
+    return false;
+  }
+};
+
+let MapChartComp = withExposingConfigs(MapChartTmpComp, [
+  depsConfig({
+    name: "selectedPoints",
+    desc: trans("chart.selectedPointsDesc"),
+    depKeys: ["selectedPoints"],
+    func: (input) => {
+      return input.selectedPoints;
+    },
+  }),
+  depsConfig({
+    name: "lastInteractionData",
+    desc: trans("chart.lastInteractionDataDesc"),
+    depKeys: ["lastInteractionData"],
+    func: (input) => {
+      return input.lastInteractionData;
+    },
+  }),
+  depsConfig({
+    name: "data",
+    desc: trans("chart.dataDesc"),
+    depKeys: ["data", "mode"],
+    func: (input) => [],
+  }),
+  new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+export const MapChartCompWithDefault = withDefault(MapChartComp, {
+  xAxisKey: valueComp<string>("time"),
+  series: [
+    {
+      dataIndex: genRandomKey(),
+      seriesName: "Value",
+      columnName: "value",
+    },
+    {
+      dataIndex: genRandomKey(),
+      seriesName: "Population",
+      columnName: "population",
+    },
+    {
+      dataIndex: genRandomKey(),
+      seriesName: "Gdp",
+      columnName: "gdp",
+    },
+  ],
+});

package/src/comps/Mapcharts/constants.tsx

@@ -0,0 +1,312 @@
+import { createSeriesListComp } from "@/components/SeriesComp";
+import { RegionMapTypeOptions } from "@/configs/mapChartConfig";
+import {
+  ChartOptionMap,
+  EndTimeControl,
+  RowLimitConfig,
+  StartTimeControl,
+  TimeGranularityControl,
+  TimeRangeControl,
+} from "@/controls";
+import { trans } from "@/i18n/comps";
+import {
+  dropdownControl,
+  EchartDefaultTextStyle,
+  jsonControl,
+  RecordConstructorToView,
+  StringControl,
+  styleControl,
+  toJSONObjectArray,
+  uiChildren,
+  withDefault,
+  withType,
+} from "lowcoder-sdk";
+
+const defaultChartData = [
+  {
+    name: "Thành phố Hà Nội",
+    value: 120,
+    population: 8000,
+    gdp: 200,
+    time: "2025-09-01",
+  },
+  {
+    name: "Thành phố Hồ Chí Minh",
+    value: 150,
+    population: 9000,
+    gdp: 250,
+    time: "2025-09-02",
+  },
+  {
+    name: "Thành phố Đà Nẵng",
+    value: 95,
+    population: 1200,
+    gdp: 80,
+    time: "2025-09-03",
+  },
+  {
+    name: "Thành phố Hải Phòng",
+    value: 110,
+    population: 2200,
+    gdp: 90,
+    time: "2025-09-04",
+  },
+  {
+    name: "Thành phố Cần Thơ",
+    value: 88,
+    population: 1600,
+    gdp: 70,
+    time: "2025-09-05",
+  },
+
+  {
+    name: "Tỉnh Bắc Ninh",
+    value: 77,
+    population: 1200,
+    gdp: 65,
+    time: "2025-09-06",
+  },
+  {
+    name: "Tỉnh Quảng Ninh",
+    value: 99,
+    population: 1300,
+    gdp: 85,
+    time: "2025-09-07",
+  },
+  {
+    name: "Tỉnh Thanh Hóa",
+    value: 66,
+    population: 3000,
+    gdp: 60,
+    time: "2025-09-08",
+  },
+  {
+    name: "Tỉnh Nghệ An",
+    value: 70,
+    population: 3200,
+    gdp: 62,
+    time: "2025-09-09",
+  },
+  {
+    name: "Tỉnh Thừa Thiên Huế",
+    value: 55,
+    population: 1100,
+    gdp: 45,
+    time: "2025-09-10",
+  },
+
+  {
+    name: "Tỉnh Khánh Hòa",
+    value: 85,
+    population: 1500,
+    gdp: 72,
+    time: "2025-09-11",
+  },
+  {
+    name: "Tỉnh Bình Dương",
+    value: 140,
+    population: 2500,
+    gdp: 190,
+    time: "2025-09-12",
+  },
+  {
+    name: "Tỉnh Đồng Nai",
+    value: 130,
+    population: 2800,
+    gdp: 175,
+    time: "2025-09-13",
+  },
+  {
+    name: "Tỉnh Long An",
+    value: 74,
+    population: 1400,
+    gdp: 60,
+    time: "2025-09-14",
+  },
+  {
+    name: "Tỉnh Tiền Giang",
+    value: 60,
+    population: 1350,
+    gdp: 55,
+    time: "2025-09-15",
+  },
+
+  {
+    name: "Tỉnh Vĩnh Long",
+    value: 58,
+    population: 1000,
+    gdp: 48,
+    time: "2025-09-16",
+  },
+  {
+    name: "Tỉnh An Giang",
+    value: 65,
+    population: 1900,
+    gdp: 52,
+    time: "2025-09-17",
+  },
+  {
+    name: "Tỉnh Kiên Giang",
+    value: 72,
+    population: 1800,
+    gdp: 58,
+    time: "2025-09-18",
+  },
+  {
+    name: "Tỉnh Sóc Trăng",
+    value: 54,
+    population: 1300,
+    gdp: 42,
+    time: "2025-09-19",
+  },
+  {
+    name: "Tỉnh Bạc Liêu",
+    value: 49,
+    population: 900,
+    gdp: 38,
+    time: "2025-09-20",
+  },
+
+  {
+    name: "Tỉnh Cà Mau",
+    value: 62,
+    population: 1200,
+    gdp: 50,
+    time: "2025-09-21",
+  },
+  {
+    name: "Tỉnh Tây Ninh",
+    value: 80,
+    population: 1500,
+    gdp: 68,
+    time: "2025-09-22",
+  },
+  {
+    name: "Tỉnh Bình Phước",
+    value: 78,
+    population: 1300,
+    gdp: 66,
+    time: "2025-09-23",
+  },
+  {
+    name: "Tỉnh Lâm Đồng",
+    value: 83,
+    population: 1400,
+    gdp: 70,
+    time: "2025-09-24",
+  },
+  {
+    name: "Tỉnh Gia Lai",
+    value: 59,
+    population: 1600,
+    gdp: 47,
+    time: "2025-09-25",
+  },
+
+  {
+    name: "Tỉnh Kon Tum",
+    value: 40,
+    population: 600,
+    gdp: 30,
+    time: "2025-09-26",
+  },
+  {
+    name: "Tỉnh Đắk Lắk",
+    value: 73,
+    population: 1700,
+    gdp: 60,
+    time: "2025-09-27",
+  },
+  {
+    name: "Tỉnh Đắk Nông",
+    value: 50,
+    population: 700,
+    gdp: 35,
+    time: "2025-09-28",
+  },
+  {
+    name: "Tỉnh Phú Yên",
+    value: 56,
+    population: 900,
+    gdp: 44,
+    time: "2025-09-29",
+  },
+  {
+    name: "Tỉnh Bình Thuận",
+    value: 68,
+    population: 1200,
+    gdp: 55,
+    time: "2025-09-30",
+  },
+
+  {
+    name: "Tỉnh Ninh Thuận",
+    value: 45,
+    population: 600,
+    gdp: 33,
+    time: "2025-09-12",
+  },
+  {
+    name: "Tỉnh Quảng Nam",
+    value: 76,
+    population: 1500,
+    gdp: 64,
+    time: "2025-09-13",
+  },
+  {
+    name: "Tỉnh Quảng Ngãi",
+    value: 63,
+    population: 1100,
+    gdp: 50,
+    time: "2025-09-14",
+  },
+  {
+    name: "Tỉnh Bình Định",
+    value: 82,
+    population: 1600,
+    gdp: 69,
+    time: "2025-09-15",
+  },
+];
+export const chartUiProps = {
+  chartConfig: withType(ChartOptionMap, "map"),
+  chartType: withDefault(StringControl, "map"),
+  defaultData: jsonControl(toJSONObjectArray, defaultChartData),
+  endTime: EndTimeControl,
+  mapStyle: styleControl(EchartDefaultTextStyle, "mapStyle"),
+  regionMapType: dropdownControl(RegionMapTypeOptions, "choropleth"),
+  regionName: withDefault(StringControl, "name"),
+  regionValue: withDefault(StringControl, "value"),
+  rowLimitConfig: RowLimitConfig,
+  series: createSeriesListComp(),
+  sortBy: withDefault(StringControl, "value"),
+  sortOrder: dropdownControl(
+    [
+      { label: "Ascending", value: "asc" },
+      { label: "Descending", value: "desc" },
+    ],
+    "desc"
+  ),
+  startTime: StartTimeControl,
+  timeColumn: withDefault(StringControl, "time"),
+  timeGranularity: TimeGranularityControl,
+  timeRange: TimeRangeControl,
+  title: withDefault(StringControl, trans("mapChart.defaultTitle")),
+  value: withDefault(StringControl, "value"),
+};
+
+const chartUiChildrenMap = uiChildren(chartUiProps);
+export type ChartUiPropsType = RecordConstructorToView<
+  typeof chartUiChildrenMap
+>;
+
+export type UIChartDataType = {
+  seriesName: string;
+  name: string;
+  value: any;
+};
+
+export type NonUIChartDataType = {
+  name: string;
+  value: any;
+};