lowcoder-map-component 0.1.1

package/src/comps/PercentageCharts/comp.tsx

@@ -0,0 +1,359 @@
+import { ChartPropertyView } from "@/components/ChartPropertyView";
+import { EchartsAxisType } from "@/configs/cartesianAxisConfig";
+import { eChartConfigOmitChildren } from "@/configs/echartConfig";
+import { ItemColorComp } from "@/configs/lineChartConfig";
+import { AxisFormatterComp } from "@/controls";
+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 { getDataKeys } from "@/utils/getDataKey.util";
+import { getSelectedPoints } from "@/utils/selection.util";
+import ReactECharts from "echarts-for-react";
+import EChartsReactCore from "echarts-for-react/lib/core";
+import {
+  changeChildAction,
+  changeValueAction,
+  chartColorPalette,
+  childrenToProps,
+  CompAction,
+  CompActionTypes,
+  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 PercentageChartTmpComp = (function () {
+  return new UICompBuilder(
+    {
+      ...echartProps,
+      ...chartUiProps,
+    },
+    () => null
+  )
+    .setPropertyViewFn(ChartPropertyView)
+    .build();
+})();
+
+PercentageChartTmpComp = withViewFn(PercentageChartTmpComp, (comp) => {
+  const onUIEvent = comp.children.onUIEvent.getView();
+  const onEvent = comp.children.onEvent.getView();
+  const eChartCompRef = useRef<EChartsReactCore | null>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartSize, setChartSize] = useState<ChartSize>();
+  const firstResize = useRef(true);
+  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 option = useMemo(() => {
+    return getEChartConfig(childrenProps, chartSize, themeConfig);
+  }, [themeConfig, childrenProps, chartSize]);
+
+  useResizeDetector({
+    targetRef: containerRef,
+    onResize: ({ width, height }) => {
+      if (width && height) {
+        setChartSize({ w: width, h: height });
+      }
+      if (!firstResize.current) {
+        // ignore the first resize, which will impact the loading animation
+        eChartCompRef.current?.getEchartsInstance().resize();
+      } else {
+        firstResize.current = false;
+      }
+    },
+  });
+
+  return (
+    <div ref={containerRef} style={{ height: "100%" }}>
+      <ReactECharts
+        ref={(e) => (eChartCompRef.current = e)}
+        style={{ height: "100%" }}
+        notMerge
+        lazyUpdate
+        opts={{ locale: getEchartsLocale() }}
+        option={{
+          ...option,
+          tooltip: {
+            trigger: "axis",
+            formatter: (params: any) => {
+              const item = params[0];
+              return `${item.axisValue}<br/>${item.value}%`;
+            },
+          },
+
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              formatter: "{value}%",
+            },
+          },
+        }}
+      />
+    </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;
+}
+
+PercentageChartTmpComp = class extends PercentageChartTmpComp {
+  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;
+      resultComp = resultComp.setChild(
+        "chartConfig",
+        comp.children.chartConfig.reduce(
+          wrapChildAction(
+            "comp",
+            wrapChildAction(
+              "itemColor",
+              ItemColorComp.changeContextDataAction(colorContextVal)
+            )
+          )
+        )
+      );
+    }
+    return resultComp;
+  }
+
+  reduce(action: CompAction): this {
+    const comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      const newData = comp.children.data.getView();
+      // data changes
+      if (comp.children.data !== this.children.data) {
+        setTimeout(() => {
+          // update x-axis value
+          const keys = getDataKeys({ data: newData, dataType: "string" });
+          if (
+            keys.length > 0 &&
+            !keys.includes(comp.children.xAxisKey.getView())
+          ) {
+            comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+          }
+          // pass to child series comp
+          comp.children.series.dispatchDataChanged(newData);
+        }, 0);
+      }
+      return this.updateContext(comp);
+    }
+    return comp;
+  }
+
+  autoHeight(): boolean {
+    return false;
+  }
+};
+
+let PercentageChartComp = withExposingConfigs(PercentageChartTmpComp, [
+  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 PercentageChartCompWithDefault = withDefault(PercentageChartComp, {
+  xAxisKey: valueComp<string>("quarter"),
+  series: [
+    {
+      dataIndex: genRandomKey(),
+      seriesName: "Value",
+      columnName: "value",
+      chartType: "line",
+    },
+  ],
+});

package/src/comps/PercentageCharts/constants.tsx

@@ -0,0 +1,98 @@
+import { createSeriesListComp } from "@/components/SeriesComp";
+import { ChartOptionMap } from "@/controls";
+import { trans } from "@/i18n/comps";
+import {
+  EchartDefaultTextStyle,
+  jsonControl,
+  RecordConstructorToView,
+  StringControl,
+  styleControl,
+  toJSONObjectArray,
+  uiChildren,
+  withDefault,
+  withType,
+} from "lowcoder-sdk";
+
+const defaultChartData = [
+  { quarter: "Q1-2008", value: 90 },
+  { quarter: "Q2-2008", value: 85 },
+  { quarter: "Q3-2008", value: 83 },
+  { quarter: "Q4-2008", value: 85 },
+  { quarter: "Q1-2009", value: 88 },
+  { quarter: "Q2-2009", value: 90 },
+  { quarter: "Q3-2009", value: 92 },
+  { quarter: "Q4-2009", value: 95 },
+  { quarter: "Q1-2010", value: 98 },
+  { quarter: "Q2-2010", value: 102 },
+  { quarter: "Q3-2010", value: 106 },
+  { quarter: "Q4-2010", value: 109 },
+  { quarter: "Q1-2011", value: 110 },
+  { quarter: "Q2-2011", value: 111 },
+  { quarter: "Q3-2011", value: 112 },
+  { quarter: "Q4-2011", value: 113 },
+  { quarter: "Q1-2012", value: 114 },
+  { quarter: "Q2-2012", value: 115 },
+  { quarter: "Q3-2012", value: 116 },
+  { quarter: "Q4-2012", value: 115 },
+  { quarter: "Q1-2013", value: 114 },
+  { quarter: "Q2-2013", value: 113 },
+  { quarter: "Q3-2013", value: 112 },
+  { quarter: "Q4-2013", value: 111 },
+  { quarter: "Q1-2014", value: 110 },
+  { quarter: "Q2-2014", value: 109 },
+  { quarter: "Q3-2014", value: 107 },
+  { quarter: "Q4-2014", value: 106 },
+  { quarter: "Q1-2015", value: 105 },
+  { quarter: "Q2-2015", value: 104 },
+  { quarter: "Q3-2015", value: 103 },
+  { quarter: "Q4-2015", value: 102 },
+  { quarter: "Q1-2016", value: 101 },
+  { quarter: "Q2-2016", value: 100 },
+  { quarter: "Q3-2016", value: 98 },
+  { quarter: "Q4-2016", value: 97 },
+  { quarter: "Q1-2017", value: 96 },
+  { quarter: "Q2-2017", value: 95 },
+  { quarter: "Q3-2017", value: 94 },
+  { quarter: "Q4-2017", value: 93 },
+  { quarter: "Q1-2018", value: 92 },
+  { quarter: "Q2-2018", value: 91 },
+  { quarter: "Q3-2018", value: 90 },
+  { quarter: "Q4-2018", value: 91 },
+  { quarter: "Q1-2019", value: 92 },
+  { quarter: "Q2-2019", value: 93 },
+  { quarter: "Q3-2019", value: 92 },
+  { quarter: "Q4-2019", value: 90 },
+  { quarter: "Q1-2020", value: 88 },
+  { quarter: "Q2-2020", value: 85 },
+  { quarter: "Q3-2020", value: 83 },
+];
+
+export const chartUiProps = {
+  chartConfig: withType(ChartOptionMap, "line"),
+  chartType: withDefault(StringControl, "line"),
+  title: withDefault(StringControl, trans("percentageChart.defaultTitle")),
+  defaultData: jsonControl(toJSONObjectArray, defaultChartData),
+  series: createSeriesListComp("line"),
+  xAxisStyle: styleControl(EchartDefaultTextStyle, "xAxis"),
+  yAxisStyle: styleControl(EchartDefaultTextStyle, "yAxisStyle"),
+};
+
+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;
+};