lowcoder-comps 0.0.7 → 0.0.8

package/src/comps/chartComp/chartComp.tsx

@@ -0,0 +1,249 @@
+import {
+  changeChildAction,
+  changeValueAction,
+  CompAction,
+  CompActionTypes,
+  wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "./chartConfigs/cartesianAxisConfig";
+import { chartChildrenMap, ChartSize, getDataKeys } from "./chartConstants";
+import { chartPropertyView } from "./chartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import ReactResizeDetector from "react-resize-detector";
+import ReactECharts from "./reactEcharts";
+import {
+  childrenToProps,
+  depsConfig,
+  genRandomKey,
+  JSONObject,
+  JSONValue,
+  NameConfig,
+  ToViewReturn,
+  UICompBuilder,
+  withDefault,
+  withExposingConfigs,
+  withViewFn,
+  ThemeContext,
+  chartColorPalette,
+} from "lowcoder-sdk";
+import { getEchartsLocale, trans } from "i18n/comps";
+import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
+import {
+  echartsConfigOmitChildren,
+  getEchartsConfig,
+  getSelectedPoints,
+} from "comps/chartComp/chartUtils";
+import log from "loglevel";
+
+let ChartTmpComp = (function () {
+  return new UICompBuilder(chartChildrenMap, () => null)
+    .setPropertyViewFn(chartPropertyView)
+    .build();
+})();
+
+ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
+  const echartsCompRef = useRef<ReactECharts | null>();
+  const [chartSize, setChartSize] = useState<ChartSize>();
+  const firstResize = useRef(true);
+  const 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) {
+    log.error('theme chart error: ', error);
+  }
+  const onEvent = comp.children.onEvent.getView();
+  useEffect(() => {
+    // bind events
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
+    echartsCompInstance.on("selectchanged", (param: any) => {
+      const option: any = echartsCompInstance.getOption();
+      //log.log("chart select change", param);
+      if (param.fromAction === "select") {
+        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
+        onEvent("select");
+      } else if (param.fromAction === "unselect") {
+        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
+        onEvent("unselect");
+      }
+    });
+    // unbind
+    return () => echartsCompInstance.off("selectchanged");
+  }, [onEvent]);
+
+  const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+  const option = useMemo(() => {
+    return getEchartsConfig(
+      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      chartSize
+    );
+  }, [chartSize, ...Object.values(echartsConfigChildren)]);
+
+  return (
+    <ReactResizeDetector
+      onResize={(w, h) => {
+        if (w && h) {
+          setChartSize({ w: w, h: h });
+        }
+        if (!firstResize.current) {
+          // ignore the first resize, which will impact the loading animation
+          echartsCompRef.current?.getEchartsInstance().resize();
+        } else {
+          firstResize.current = false;
+        }
+      }}
+    >
+      <ReactECharts
+        ref={(e) => (echartsCompRef.current = e)}
+        style={{ height: "100%" }}
+        notMerge
+        lazyUpdate
+        opts={{ locale: getEchartsLocale() }}
+        option={option}
+        theme={themeConfig}
+      />
+    </ReactResizeDetector>
+  );
+});
+
+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;
+}
+
+ChartTmpComp = class extends ChartTmpComp {
+  private lastYAxisFormatContextVal?: JSONValue;
+  private lastColorContext?: JSONObject;
+
+  updateContext(comp: this) {
+    // the context value of axis format
+    let resultComp = comp;
+    const data = comp.children.data.getView();
+    const sampleSeries = comp.children.series.getView().find((s) => !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") &&
+      !_.isEqual(colorContextVal, comp.lastColorContext)
+    ) {
+      comp.lastColorContext = colorContextVal;
+      resultComp = resultComp.setChild(
+        "chartConfig",
+        comp.children.chartConfig.reduce(
+          wrapChildAction(
+            "comp",
+            wrapChildAction("itemColor", ItemColorComp.changeContextDataAction(colorContextVal))
+          )
+        )
+      );
+    }
+    return resultComp;
+  }
+
+  override 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(newData);
+          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;
+  }
+
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+const ChartComp = withExposingConfigs(ChartTmpComp, [
+  depsConfig({
+    name: "selectedPoints",
+    desc: trans("chart.selectedPointsDesc"),
+    depKeys: ["selectedPoints"],
+    func: (input) => {
+      return input.selectedPoints;
+    },
+  }),
+  depsConfig({
+    name: "data",
+    desc: trans("chart.dataDesc"),
+    depKeys: ["data", "mode"],
+    func: (input) => {
+      if (input.mode === "ui") {
+        return input.data;
+      } else {
+        // no data in json mode
+        return [];
+      }
+    },
+  }),
+  new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+export const ChartCompWithDefault = withDefault(ChartComp, {
+  xAxisKey: "date",
+  series: [
+    {
+      dataIndex: genRandomKey(),
+      seriesName: trans("chart.spending"),
+      columnName: "spending",
+    },
+    {
+      dataIndex: genRandomKey(),
+      seriesName: trans("chart.budget"),
+      columnName: "budget",
+    },
+  ],
+});

package/src/comps/chartComp/chartConfigs/barChartConfig.tsx

@@ -0,0 +1,51 @@
+import {
+  BoolControl,
+  dropdownControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+import { BarSeriesOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const BarTypeOptions = [
+  {
+    label: trans("chart.basicBar"),
+    value: "basicBar",
+  },
+  {
+    label: trans("chart.stackedBar"),
+    value: "stackedBar",
+  },
+] as const;
+
+export const BarChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+      type: dropdownControl(BarTypeOptions, "basicBar"),
+    },
+    (props): BarSeriesOption => {
+      const config: BarSeriesOption = {
+        type: "bar",
+        label: {
+          show: props.showLabel,
+          position: "top",
+        },
+      };
+      if (props.type === "stackedBar") {
+        config.stack = "stackValue";
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("chart.barType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/comps/chartComp/chartConfigs/cartesianAxisConfig.tsx

@@ -0,0 +1,307 @@
+import { XAXisComponentOption, YAXisComponentOption } from "echarts";
+import { ChartSize, XAxisDirectionType } from "../chartConstants";
+import { i18n } from "lowcoder-core";
+import {
+  MultiCompBuilder,
+  withContext,
+  NumberControl,
+  StringControl,
+  dropdownControl,
+  JSONValue,
+  isNumeric,
+} from "lowcoder-sdk";
+import { i18nObjs, trans } from "i18n/comps";
+import _, { isNil } from "lodash";
+import { xAxisTypeUrl } from "./chartUrls";
+
+const XAxisTypeOptions = [
+  {
+    label: trans("chart.auto"),
+    value: "default",
+  },
+  {
+    label: trans("chart.categoryAxis"),
+    value: "category",
+  },
+  {
+    label: trans("chart.valueAxis"),
+    value: "value",
+  },
+  {
+    label: trans("chart.timeAxis"),
+    value: "time",
+  },
+  {
+    label: trans("chart.logAxis"),
+    value: "log",
+  },
+] as const;
+
+const YAxisTypeOptions = [
+  {
+    label: trans("chart.valueAxis"),
+    value: "value",
+  },
+  {
+    label: trans("chart.categoryAxis"),
+    value: "category",
+  },
+  {
+    label: trans("chart.timeAxis"),
+    value: "time",
+  },
+  {
+    label: trans("chart.logAxis"),
+    value: "log",
+  },
+] as const;
+
+export type EchartsAxisType = "category" | "value" | "time" | "log";
+
+const axisCommonMap = {
+  axisName: StringControl,
+  logBase: NumberControl,
+};
+
+export const AxisFormatterComp = withContext(
+  new MultiCompBuilder({ value: StringControl }, (props) => props.value)
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("chart.yAxisDataFormat"),
+        placeholder: "{{value}}",
+        tooltip: trans("chart.yAxisDataFormatTooltip"),
+      })
+    )
+    .build(),
+  ["value"] as const
+);
+
+export const XAxisConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      ...axisCommonMap,
+      type: dropdownControl(XAxisTypeOptions, "default"),
+    },
+    (props): XAXisComponentOption => {
+      const config: XAXisComponentOption = {
+        name: props.axisName,
+        nameGap: 22,
+        // @ts-ignore
+        nameLocation: "middle",
+      };
+      if (props.type !== "default") {
+        // don't assign value for default value, compute it in the end
+        config.type = props.type;
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.axisName.propertyView({
+          label: trans("chart.xAxisName"),
+        })}
+        {children.type.propertyView({
+          label: trans("chart.xAxisType"),
+          tooltip: (
+            <>
+              {trans("chart.xAxisTypeTooltip")}
+              <a href={xAxisTypeUrl} target="_blank" rel="noreferrer">
+                {trans("chart.xAxisType")}
+              </a>
+            </>
+          ),
+        })}
+        {children.type.getView() === "log" &&
+          children.logBase.propertyView({
+            label: trans("chart.logBase"),
+          })}
+      </>
+    ))
+    .build();
+})();
+
+export const YAxisConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      ...axisCommonMap,
+      // the old data has "type" field with default value "category". change field name to "yAxisType" for compatibility
+      yAxisType: dropdownControl(YAxisTypeOptions, "value"),
+      formatter: AxisFormatterComp,
+    },
+    (props) => () => {
+      const config: YAXisComponentOption = {
+        name: props.axisName,
+        type: props.yAxisType,
+        nameTextStyle: {
+          align: "left",
+        },
+      };
+      const numberFormat = new Intl.NumberFormat(i18n.locales, {
+        notation: "compact",
+      });
+      (config.axisLabel as any) = {
+        formatter: (value: string | number) => {
+          const res = (props.formatter as any)({ value: value });
+          if (!isNil(res) && res !== "") {
+            return res;
+          }
+          if (
+            (props.yAxisType === "value" || props.yAxisType === "log") &&
+            typeof value === "number"
+          ) {
+            return numberFormat.format(value);
+          }
+          return value + "";
+        },
+      };
+      if (props.yAxisType === "log") {
+        (config as any).logBase = props.logBase || 10;
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.axisName.propertyView({
+          label: trans("chart.yAxisName"),
+        })}
+        {children.yAxisType.propertyView({
+          label: trans("chart.yAxisType"),
+        })}
+        {children.yAxisType.getView() === "log" &&
+          children.logBase.propertyView({
+            label: trans("chart.logBase"),
+          })}
+        {children.formatter.getPropertyView()}
+      </>
+    ))
+    .build();
+})();
+
+function calcXAxisType(xAxisData: Array<JSONValue | undefined>): EchartsAxisType {
+  if (!xAxisData || xAxisData.length <= 0) {
+    return "category";
+  }
+  const sampleData = xAxisData[0];
+  if (!sampleData) {
+    return "category";
+  }
+  if (isNumeric(sampleData)) {
+    return "value";
+  } else if (!isNaN(new Date(sampleData.toString()).getDate())) {
+    return "time";
+  } else {
+    return "category";
+  }
+}
+
+const dateInterval = {
+  year: 3600 * 24 * 1000 * 365,
+  month: 3600 * 24 * 1000 * 28,
+  day: 3600 * 24 * 1000,
+};
+
+function calcTimeInterval(xAxisData: Array<JSONValue | undefined>) {
+  const minIntervals = xAxisData.map((data) => {
+    if (!data) {
+      // 1 is echarts default value, to make sure axis tick is integer
+      return 1;
+    }
+    const dataLen = data.toString().length;
+    if (dataLen === 4) {
+      // year 2022
+      return dateInterval.year;
+    } else if (dataLen === 6 || dataLen === 7) {
+      // month 2022-01 222201
+      return dateInterval.month;
+    } else if (dataLen === 10 || dataLen === 8) {
+      // day 2022-01-01 20220101
+      return dateInterval.day;
+    } else {
+      return 1;
+    }
+  });
+  return _.min(minIntervals);
+}
+
+let measureCanvas: HTMLCanvasElement;
+
+// calculate x-axis text width
+function getXAxisDataLength(xAxisData: Array<JSONValue | undefined>) {
+  const canvas = measureCanvas || (measureCanvas = document.createElement("canvas"));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return [];
+  }
+  // echarts default font
+  context.font = "normal 12px sans-serif";
+  return xAxisData.map((d) => (d ? context.measureText(d.toString()).width + 2 : 0));
+}
+
+export function calcXYConfig(
+  xConfig: XAXisComponentOption,
+  yConfig: YAXisComponentOption,
+  xAxisDirection: XAxisDirectionType,
+  xAxisData: Array<JSONValue | undefined>,
+  chartSize?: ChartSize & { right: number }
+) {
+  const resXConfig = { ...xConfig };
+  const resYConfig = { ...yConfig };
+
+  if (!resXConfig.type) {
+    // simple calculate x-axis type
+    resXConfig.type = calcXAxisType(xAxisData);
+  }
+  // x-axis label style adaptive
+  if (resXConfig.type === "category" && chartSize) {
+    const xAxisDataLenList = getXAxisDataLength(xAxisData);
+    // get x-axis single data's max width
+    const maxDataWidth = _.max(xAxisDataLenList);
+    const lastDataWidth = xAxisDataLenList[xAxisDataLenList.length - 1];
+    // grid width
+    let eachDataWidth = chartSize.w / xAxisData.length;
+    let rotate = 0;
+    let labelWidth = maxDataWidth;
+    // rotate when width is not enough
+    if (maxDataWidth && eachDataWidth < maxDataWidth && xAxisDirection === "horizontal") {
+      labelWidth = Math.min(maxDataWidth, 150);
+      // vertical rotate 0.87 => sin(60) when exceeding the right boundary
+      const verticalRotate =
+        lastDataWidth && lastDataWidth * 0.87 > eachDataWidth / 2 + chartSize.right;
+      rotate = verticalRotate ? 270 : 330;
+      // to keep x-axis name under label, nameGap is related to label rotation angle
+      resXConfig.nameGap = verticalRotate ? labelWidth + 5 : labelWidth / 2 + 10;
+    } else if (xAxisDirection === "vertical" && maxDataWidth) {
+      // vertical direction
+      resXConfig.nameGap = maxDataWidth + 10;
+    }
+    resXConfig.axisLabel = {
+      interval: 0,
+      width: labelWidth,
+      // @ts-ignore
+      overflow: "truncate",
+      rotate: rotate,
+    };
+  } else if (resXConfig.type === "time") {
+    (resXConfig as any).minInterval = calcTimeInterval(xAxisData);
+    const timeXAxisLabel = i18nObjs.timeXAxisLabel;
+    if (timeXAxisLabel) {
+      resXConfig.axisLabel = timeXAxisLabel;
+    }
+  }
+  if (xAxisDirection === "vertical") {
+    resYConfig.nameLocation = "middle";
+    resYConfig.nameGap = 25;
+  }
+
+  return xAxisDirection === "horizontal"
+    ? {
+        xConfig: resXConfig,
+        yConfig: resYConfig,
+      }
+    : {
+        xConfig: resYConfig,
+        yConfig: resXConfig,
+      };
+}

package/src/comps/chartComp/chartConfigs/chartUrls.tsx

@@ -0,0 +1,6 @@
+import { language } from "i18n/comps";
+
+const echartsUrlLocale = language === "zh" ? "zh" : "en";
+export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
+export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
+export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;

package/src/comps/chartComp/chartConfigs/legendConfig.tsx

@@ -0,0 +1,55 @@
+import {
+  AlignBottom,
+  AlignClose,
+  AlignRight,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const LegendPositionOptions = [
+  {
+    label: <AlignBottom />,
+    value: "bottom",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+  {
+    label: <AlignClose />,
+    value: "close",
+  },
+] as const;
+
+export const LegendConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(LegendPositionOptions, "bottom"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "bottom",
+        type: "scroll",
+      };
+      if (props.position === "right") {
+        config.top = "center";
+        config.left = "right";
+        config.orient = "vertical";
+      } else if (props.position === "close") {
+        config.show = false;
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.legendPosition"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();