lowcoder-comps 0.0.19 → 0.0.20

package/src/comps/chartComp/chartComp.tsx

@@ -1,356 +0,0 @@
-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,
-  withMethodExposing,
-  withViewFn,
-  ThemeContext,
-  chartColorPalette,
-} from "lowcoder-sdk";
-import { getEchartsLocale, trans } from "i18n/comps";
-import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
-import {
-  echartsConfigOmitChildren,
-  getEchartsConfig,
-  getSelectedPoints,
-  loadGoogleMapsScript,
-} from "comps/chartComp/chartUtils";
-import 'echarts-extension-gmap';
-import log from "loglevel";
-
-let ChartTmpComp = (function () {
-  return new UICompBuilder(chartChildrenMap, () => null)
-    .setPropertyViewFn(chartPropertyView)
-    .build();
-})();
-
-ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
-  const apiKey = comp.children.mapApiKey.getView();
-  const mode = comp.children.mode.getView();
-  const mapCenterPosition = {
-    lng: comp.children.mapCenterLng.getView(),
-    lat: comp.children.mapCenterLat.getView(),
-  }
-  const mapZoomlevel = comp.children.mapZoomLevel.getView();
-  const onUIEvent = comp.children.onUIEvent.getView();
-  const onMapEvent = comp.children.onMapEvent.getView();
-
-  const echartsCompRef = useRef<ReactECharts | null>();
-  const [chartSize, setChartSize] = useState<ChartSize>();
-  const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
-  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);
-  }
-
-  useEffect(() => {
-    if(mode !== 'ui') return;
-    
-    // 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)));
-        onUIEvent("select");
-      } else if (param.fromAction === "unselect") {
-        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
-        onUIEvent("unselect");
-      }
-    });
-    // unbind
-    return () => echartsCompInstance?.off("selectchanged");
-  }, [mode, onUIEvent]);
-
-  const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
-  const option = useMemo(() => {
-    return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
-    );
-  }, [chartSize, ...Object.values(echartsConfigChildren)]);
-
-  const isMapScriptLoaded = useMemo(() => {
-    return mapScriptLoaded || window?.google;
-  }, [mapScriptLoaded])
-
-  const loadGoogleMapData = () => {
-    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
-    if (!echartsCompInstance) {
-      return _.noop;
-    }
-
-    comp.children.mapInstance.dispatch(changeValueAction(echartsCompInstance))
-    onMapEvent('mapReady')
-  }
-  
-  const handleOnMapScriptLoad = () => {
-    setMapScriptLoaded(true);
-    loadGoogleMapData();
-  }
-
-  useEffect(() => {
-    if( mode !== 'map') {
-      comp.children.mapInstance.dispatch(changeValueAction(undefined))
-      return;
-    }
-
-    const gMapScript = loadGoogleMapsScript(apiKey);
-    if(isMapScriptLoaded) {
-      handleOnMapScriptLoad();
-      return;
-    }
-    gMapScript.addEventListener('load', handleOnMapScriptLoad);
-    return () => {
-      gMapScript.removeEventListener('load', handleOnMapScriptLoad);
-    }
-  }, [mode, apiKey, option])
-
-  useEffect(() => {
-    if(mode !== 'map') return;
-    onMapEvent('centerPositionChange');
-  }, [mode, mapCenterPosition.lat, mapCenterPosition.lng])
-
-  useEffect(() => {
-    if(mode !== 'map') return;
-    onMapEvent('zoomLevelChange');
-  }, [mode, mapZoomlevel])
-
-  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;
-        }
-      }}
-    >
-      {(mode !== 'map' || (mode === 'map' && isMapScriptLoaded)) && (
-        <ReactECharts
-          ref={(e) => (echartsCompRef.current = e)}
-          style={{ height: "100%" }}
-          notMerge
-          lazyUpdate
-          opts={{ locale: getEchartsLocale() }}
-          option={option}
-          theme={mode !== 'map' ? themeConfig : undefined}
-          mode={mode}
-        />
-      )}
-    </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;
-  }
-};
-
-let 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")),
-]);
-
-ChartComp = withMethodExposing(ChartComp, [
-  {
-    method: {
-      name: "getMapInstance",
-    },
-    execute: (comp) => {
-      return new Promise(resolve => {
-        let intervalCount = 0;
-        const mapInstanceInterval = setInterval(() => {
-          const instance = comp.children.mapInstance.getView();
-          const mapInstance = instance?.getModel()?.getComponent("gmap")?.getGoogleMap()
-          if(mapInstance || intervalCount === 10) {
-            clearInterval(mapInstanceInterval)
-            resolve(mapInstance)
-          }
-          intervalCount++;
-        }, 1000);
-      })
-    }
-  },
-  {
-    method: {
-      name: "getMapZoomLevel",
-    },
-    execute: (comp) => {
-      return comp.children.mapZoomLevel.getView();
-    }
-  },
-  {
-    method: {
-      name: "getMapCenterPosition",
-    },
-    execute: (comp) => {
-      return Promise.resolve({
-        lng: comp.children.mapCenterLng.getView(),
-        lat: comp.children.mapCenterLat.getView(),
-      });
-    }
-  },
-])
-
-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

@@ -1,51 +0,0 @@
-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

@@ -1,307 +0,0 @@
-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,
-      };
-}