lowcoder-map-component 0.1.1

package/src/comps/Totalcharts/comp.tsx

@@ -0,0 +1,463 @@
+import { ChartPropertyView } from "@/components/ChartPropertyView";
+import { EchartsAxisType } from "@/configs/cartesianAxisConfig";
+import { eChartConfigOmitChildren } from "@/configs/echartConfig";
+import { formatValue } from "@/configs/totalChartConfig";
+import { AxisFormatterComp } from "@/controls";
+import { renderIcon } from "@/controls/IconControl";
+import { getEchartsLocale, trans } from "@/i18n/comps";
+import { formatAllStyles } from "@/utils/chartStyle.util";
+import { deepEqual } from "@/utils/deepEqual.util";
+import { ChartSize, echartProps, getEChartConfig } from "@/utils/echarts.util";
+import { getSelectedPoints } from "@/utils/selection.util";
+import {
+  FallOutlined,
+  LineOutlined,
+  RiseOutlined,
+  WarningOutlined,
+} from "@ant-design/icons";
+import { Button, Card, Flex, Statistic } from "antd";
+import ReactECharts from "echarts-for-react";
+import EChartsReactCore from "echarts-for-react/lib/core";
+import {
+  changeChildAction,
+  chartColorPalette,
+  childrenToProps,
+  CompAction,
+  depsConfig,
+  genRandomKey,
+  getPromiseAfterDispatch,
+  JSONObject,
+  NameConfig,
+  Theme,
+  ThemeContext,
+  UICompBuilder,
+  valueComp,
+  withDefault,
+  withExposingConfigs,
+  withViewFn,
+  wrapChildAction,
+} from "lowcoder-sdk";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { chartUiProps } from "./constants";
+
+let clickEventCallback = () => {};
+
+let TotalchartsTmpComp = (function () {
+  return new UICompBuilder(
+    {
+      ...echartProps,
+      ...chartUiProps,
+    },
+    () => null
+  )
+    .setPropertyViewFn(ChartPropertyView)
+    .build();
+})();
+
+function calculateGrowth(
+  newValue: number,
+  oldValue: number
+): {
+  percent: number;
+  status: "increase" | "decrease" | string;
+} {
+  const percent = ((newValue - oldValue) / oldValue) * 100;
+
+  let status = "";
+
+  if (percent > 0) {
+    status = "increase";
+  } else if (percent < 0) {
+    status = "decrease";
+  } else {
+    status = "-";
+  }
+
+  return {
+    percent: Math.round(percent * 100) / 100,
+    status,
+  };
+}
+
+TotalchartsTmpComp = withViewFn(TotalchartsTmpComp, (comp) => {
+  const onUIEvent = comp.children.onUIEvent.getView();
+  const onEvent = comp.children.onEvent.getView();
+  const eChartCompRef = useRef<EChartsReactCore | null>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const theme: Theme = useContext(ThemeContext);
+
+  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);
+  }
+
+  const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+    await getPromiseAfterDispatch(dispatch, action, {
+      autoHandleAfterReduce: true,
+    });
+    onEvent("click");
+  };
+
+  useEffect(() => {
+    const eChartCompInstance = eChartCompRef?.current?.getEchartsInstance();
+    if (!eChartCompInstance) {
+      return undefined;
+    }
+
+    eChartCompInstance?.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 () => {
+      eChartCompInstance?.off("click");
+      document.removeEventListener("clickEvent", clickEventCallback);
+    };
+  }, []);
+
+  useEffect(() => {
+    // bind events
+    const eChartCompInstance = eChartCompRef?.current?.getEchartsInstance();
+    if (!eChartCompInstance) {
+      return;
+    }
+    eChartCompInstance?.on("selectchanged", (param: any) => {
+      const option: any = eChartCompInstance?.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
+        )
+      );
+    });
+    // unbind
+    return () => {
+      eChartCompInstance?.off("selectchanged");
+      document.removeEventListener("clickEvent", clickEventCallback);
+    };
+  }, [onUIEvent]);
+
+  const eChartConfigChildren: any = {};
+  for (const [key, value] of Object.entries(comp.children)) {
+    if (!eChartConfigOmitChildren.includes(key as any)) {
+      eChartConfigChildren[key] = value;
+    }
+  }
+
+  const childrenProps = formatAllStyles(childrenToProps(comp.children));
+
+  const { chartConfig, data } = childrenProps;
+
+  const { chartData, trend, subData, title, value, unit } = data?.[0] || {};
+  const { dataStyle, iconStyle, titleStyle } = chartConfig;
+
+  let xAxisKey = childrenProps.xAxisKey;
+  if (!xAxisKey && chartData && chartData.length > 0) {
+    const firstItem = chartData[0];
+    xAxisKey = firstItem.hasOwnProperty("date")
+      ? "date"
+      : Object.keys(firstItem)[0];
+  }
+
+  const updatedChildrenProps: any = {
+    ...childrenProps,
+    data: chartData,
+    xAxisKey: xAxisKey || childrenProps.xAxisKey,
+  };
+  const trendGrowth = calculateGrowth(trend?.value, trend?.oldValue);
+  const color =
+    (trendGrowth.status === "increase" &&
+      (chartConfig.increaseColor || "#0CD12E")) ||
+    (trendGrowth.status === "decrease" &&
+      (chartConfig.decreaseColor || "#ED3333")) ||
+    "";
+  const subGrowth = calculateGrowth(subData?.value, subData?.oldValue);
+  const subColor =
+    (subGrowth.status === "increase" && chartConfig?.subIncreaseColor) ||
+    (subGrowth.status === "decrease" && chartConfig?.subDecreaseColor) ||
+    "";
+
+  const [chartSize, setChartSize] = useState<ChartSize>();
+  const firstResize = useRef(true);
+
+  const option = useMemo(() => {
+    return getEChartConfig(updatedChildrenProps, chartSize, themeConfig);
+  }, [themeConfig, updatedChildrenProps, chartSize]);
+
+  useResizeDetector({
+    targetRef: containerRef,
+    onResize: ({ width, height }) => {
+      if (width && height) {
+        setChartSize({ w: width, h: height });
+      }
+      if (!firstResize.current) {
+        eChartCompRef.current?.getEchartsInstance().resize();
+      } else {
+        firstResize.current = false;
+      }
+    },
+  });
+
+  return (
+    <div ref={containerRef} style={{ height: "100%" }}>
+      <Card
+        style={{
+          borderRadius: 12,
+          ...dataStyle,
+        }}
+        styles={{ body: { padding: 16 } }}
+      >
+        <Flex vertical gap={5}>
+          <Flex gap={12} justify="space-between" align="center">
+            {chartConfig.showIcon ? (
+              <Button
+                icon={
+                  chartConfig.icon ? (
+                    renderIcon(chartConfig.icon)
+                  ) : (
+                    <WarningOutlined />
+                  )
+                }
+                type="primary"
+                style={{
+                  ...iconStyle,
+                  backgroundColor: iconStyle.backgroundColor || color,
+                  cursor: "unset",
+                }}
+              ></Button>
+            ) : (
+              <div></div>
+            )}
+            {chartConfig.showTrendIndicator && trend && (
+              <Statistic
+                value={trendGrowth.percent}
+                precision={chartConfig?.precisionTrend || 0}
+                valueStyle={{ color, fontSize: 14 }}
+                prefix={
+                  (trendGrowth.status === "increase" &&
+                    (chartConfig?.increaseIcon ? (
+                      renderIcon(chartConfig.increaseIcon)
+                    ) : (
+                      <RiseOutlined />
+                    ))) ||
+                  (trendGrowth.status === "decrease" &&
+                    (chartConfig?.decreaseIcon ? (
+                      renderIcon(chartConfig.decreaseIcon)
+                    ) : (
+                      <FallOutlined />
+                    ))) || <LineOutlined />
+                }
+                suffix={trend.suffix}
+              />
+            )}
+          </Flex>
+
+          <Flex align="center" vertical>
+            <Flex gap={5} align="center">
+              <Statistic
+                value={value}
+                valueStyle={{ color, fontWeight: "bold" }}
+                precision={chartConfig?.precision || 0}
+                valueRender={(val: any) =>
+                  formatValue(val, chartConfig.unit, unit)
+                }
+              />
+            </Flex>
+            {chartConfig.showTitle && (
+              <b style={titleStyle}>{chartConfig.title || title}</b>
+            )}
+            {chartConfig.showSubData && (
+              <Statistic
+                value={subData?.value}
+                precision={chartConfig?.precisionSub || 0}
+                valueStyle={{ fontSize: 14, color: subColor }}
+                suffix={subData?.suffix}
+                valueRender={(val) => <b>{val}</b>}
+                prefix={
+                  chartConfig.subIncreaseIcon
+                    ? (subGrowth.status === "increase" &&
+                        renderIcon(chartConfig.subIncreaseIcon)) ||
+                      (subGrowth.status === "decrease" &&
+                        renderIcon(chartConfig.subDecreaseIcon)) || (
+                        <LineOutlined />
+                      )
+                    : null
+                }
+              />
+            )}
+          </Flex>
+        </Flex>
+
+        {chartConfig.showTrendLine && chartData?.length ? (
+          <div style={{ marginTop: 12, height: "10em" }}>
+            <ReactECharts
+              ref={(e) => (eChartCompRef.current = e)}
+              style={{ height: "100%" }}
+              notMerge
+              lazyUpdate
+              opts={{ locale: getEchartsLocale() }}
+              option={option}
+            />
+          </div>
+        ) : null}
+      </Card>
+    </div>
+  );
+});
+
+function getYAxisFormatContextValue(
+  data: Array<JSONObject>,
+  yAxisType: EchartsAxisType,
+  yAxisName?: string
+) {
+  const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+  let contextValue = dataSample;
+  if (yAxisType === "time") {
+    // to timestamp
+    const time =
+      typeof dataSample === "number" || typeof dataSample === "string"
+        ? new Date(dataSample).getTime()
+        : null;
+    if (time) contextValue = time;
+  }
+  return contextValue;
+}
+
+TotalchartsTmpComp = class extends TotalchartsTmpComp {
+  updateContext(comp: any) {
+    // the context value of axis format
+    let resultComp = comp;
+    const data = comp.children.data.getView();
+    const sampleSeries = comp.children.series
+      .getView()
+      .find((s: any) => !s.getView().hide);
+    const yAxisContextValue = getYAxisFormatContextValue(
+      data,
+      comp.children.yConfig.children.yAxisType.getView(),
+      sampleSeries?.children.columnName.getView()
+    );
+    if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+      comp.lastYAxisFormatContextVal = yAxisContextValue;
+      resultComp = comp.setChild(
+        "yConfig",
+        comp.children.yConfig.reduce(
+          wrapChildAction(
+            "formatter",
+            AxisFormatterComp.changeContextDataAction({
+              value: yAxisContextValue,
+            })
+          )
+        )
+      );
+    }
+    // item color context
+    const colorContextVal = {
+      seriesName: sampleSeries?.children.seriesName.getView(),
+      value: yAxisContextValue,
+    };
+    if (
+      comp.children.chartConfig.children.comp.children.hasOwnProperty(
+        "itemColor"
+      ) &&
+      !deepEqual(colorContextVal, comp.lastColorContext)
+    ) {
+      comp.lastColorContext = colorContextVal;
+    }
+    return resultComp;
+  }
+
+  reduce(action: CompAction): this {
+    return super.reduce(action);
+  }
+
+  autoHeight(): boolean {
+    return false;
+  }
+};
+
+let TotalChartComp = withExposingConfigs(TotalchartsTmpComp, [
+  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 TotalChartCompWithDefault = withDefault(TotalChartComp, {
+  xAxisKey: valueComp<string>("value"),
+  series: [
+    {
+      dataIndex: genRandomKey(),
+    },
+  ],
+});

package/src/comps/Totalcharts/constants.tsx

@@ -0,0 +1,66 @@
+import { createSeriesListComp } from "@/components/SeriesComp";
+import { ChartOptionMap } from "@/controls";
+import {
+  EchartDefaultTextStyle,
+  jsonControl,
+  NumberControl,
+  RecordConstructorToView,
+  StringControl,
+  styleControl,
+  toJSONObjectArray,
+  uiChildren,
+  withDefault,
+  withType,
+} from "lowcoder-sdk";
+
+const defaultChartData = [
+  {
+    trend: { value: 9.2, oldValue: 9.5, suffix: "% kỳ trước" },
+    subData: { value: 10.2, oldValue: 9.8, suffix: "% kế hoạch" },
+    value: 30,
+    unit: "Văn bản",
+    title: "Văn bản chậm tiến độ",
+    chartData: [
+      { date: "25-01-2025", value: 320 },
+      { date: "30-03-2025", value: 450 },
+      { date: "12-05-2025", value: 380 },
+      { date: "07-07-2025", value: 520 },
+      { date: "09-08-2025", value: 480 },
+      { date: "10-09-2025", value: 600 },
+    ],
+  },
+];
+
+export const chartUiProps = {
+  chartConfig: withType(ChartOptionMap, "total"),
+  chartType: withDefault(StringControl, "total"),
+  title: StringControl,
+  defaultData: jsonControl(toJSONObjectArray, defaultChartData),
+  series: createSeriesListComp("line"),
+  xAxisStyle: styleControl(EchartDefaultTextStyle, "xAxis"),
+  yAxisStyle: styleControl(EchartDefaultTextStyle, "yAxisStyle"),
+  top: withDefault(NumberControl, 30),
+  bottom: withDefault(NumberControl, 0),
+  left: withDefault(NumberControl, 0),
+  right: withDefault(NumberControl, 0),
+};
+
+const chartUiChildrenMap = uiChildren(chartUiProps);
+export type ChartUiPropsType = RecordConstructorToView<
+  typeof chartUiChildrenMap
+>;
+
+export type UIChartDataType = {
+  seriesName: string;
+  // coordinate chart
+  x?: any;
+  y?: any;
+  // pie or funnel
+  itemName?: any;
+  value?: any;
+};
+
+export type NonUIChartDataType = {
+  name: string;
+  value: any;
+};