lowcoder-comps 0.0.29 → 0.0.31

package/src/comps/chartComp/chartUtils.ts

@@ -0,0 +1,291 @@
+import {
+  CharOptionCompType,
+  ChartCompPropsType,
+  ChartSize,
+  noDataAxisConfig,
+  noDataPieChartConfig,
+} from "comps/chartComp/chartConstants";
+import { getPieRadiusAndCenter } from "comps/chartComp/chartConfigs/pieChartConfig";
+import { EChartsOptionWithMap } from "./reactEcharts/types";
+import _ from "lodash";
+import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-sdk";
+import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
+import Big from "big.js";
+import { googleMapsApiUrl } from "./chartConfigs/chartUrls";
+
+export function transformData(
+  originData: JSONObject[],
+  xAxis: string,
+  seriesColumnNames: string[]
+) {
+  // aggregate data by x-axis
+  const transformedData: JSONObject[] = [];
+  originData.reduce((prev, cur) => {
+    if (cur === null || cur === undefined) {
+      return prev;
+    }
+    const groupValue = cur[xAxis] as string;
+    if (!prev[groupValue]) {
+      // init as 0
+      const initValue: any = {};
+      seriesColumnNames.forEach((name) => {
+        initValue[name] = 0;
+      });
+      prev[groupValue] = initValue;
+      transformedData.push(prev[groupValue]);
+    }
+    // remain the x-axis data
+    prev[groupValue][xAxis] = groupValue;
+    seriesColumnNames.forEach((key) => {
+      if (key === xAxis) {
+        return;
+      } else if (isNumeric(cur[key])) {
+        const bigNum = Big(cur[key]);
+        prev[groupValue][key] = bigNum.add(prev[groupValue][key]).toNumber();
+      } else {
+        prev[groupValue][key] += 1;
+      }
+    });
+    return prev;
+  }, {} as any);
+  return transformedData;
+}
+
+const notAxisChartSet: Set<CharOptionCompType> = new Set(["pie"] as const);
+export const echartsConfigOmitChildren = [
+  "hidden",
+  "selectedPoints",
+  "onUIEvent",
+  "mapInstance"
+] as const;
+type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
+
+export function isAxisChart(type: CharOptionCompType) {
+  return !notAxisChartSet.has(type);
+}
+
+export function getSeriesConfig(props: EchartsConfigProps) {
+  const visibleSeries = props.series.filter((s) => !s.getView().hide);
+  const seriesLength = visibleSeries.length;
+  return visibleSeries.map((s, index) => {
+    if (isAxisChart(props.chartConfig.type)) {
+      let encodeX: string, encodeY: string;
+      const horizontalX = props.xAxisDirection === "horizontal";
+      let itemStyle = props.chartConfig.itemStyle;
+      // FIXME: need refactor... chartConfig returns a function with paramters
+      if (props.chartConfig.type === "bar") {
+        // barChart's border radius, depend on x-axis direction and stack state
+        const borderRadius = horizontalX ? [2, 2, 0, 0] : [0, 2, 2, 0];
+        if (props.chartConfig.stack && index === visibleSeries.length - 1) {
+          itemStyle = { ...itemStyle, borderRadius: borderRadius };
+        } else if (!props.chartConfig.stack) {
+          itemStyle = { ...itemStyle, borderRadius: borderRadius };
+        }
+      }
+      if (horizontalX) {
+        encodeX = props.xAxisKey;
+        encodeY = s.getView().columnName;
+      } else {
+        encodeX = s.getView().columnName;
+        encodeY = props.xAxisKey;
+      }
+      return {
+        name: s.getView().seriesName,
+        selectedMode: "single",
+        select: {
+          itemStyle: {
+            borderColor: "#000",
+          },
+        },
+        encode: {
+          x: encodeX,
+          y: encodeY,
+        },
+        // each type of chart's config
+        ...props.chartConfig,
+        itemStyle: itemStyle,
+        label: {
+          ...props.chartConfig.label,
+          ...(!horizontalX && { position: "outside" }),
+        },
+      };
+    } else {
+      // pie
+      const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
+      return {
+        ...props.chartConfig,
+        radius: radiusAndCenter.radius,
+        center: radiusAndCenter.center,
+        name: s.getView().seriesName,
+        selectedMode: "single",
+        encode: {
+          itemName: props.xAxisKey,
+          value: s.getView().columnName,
+        },
+      };
+    }
+  });
+}
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+  if (props.mode === "json") {
+    return props.echartsOption ? props.echartsOption : {};
+  }
+  if(props.mode === "map") {
+    const {
+      mapZoomLevel,
+      mapCenterLat,
+      mapCenterLng,
+      mapOptions, 
+      showCharts, 
+    } = props;
+
+    const echartsOption = mapOptions && showCharts ? mapOptions : {};
+    return {
+      gmap: {
+        center: [mapCenterLng, mapCenterLat],
+        zoom: mapZoomLevel,
+        renderOnMoving: true,
+        echartsLayerZIndex: showCharts ? 2019 : 0,
+        roam: true
+      },
+      ...echartsOption,
+    }
+  }
+  // axisChart
+  const axisChart = isAxisChart(props.chartConfig.type);
+  const gridPos = {
+    left: 20,
+    right: props.legendConfig.left === "right" ? "10%" : 20,
+    top: 50,
+    bottom: 35,
+  };
+  let config: EChartsOptionWithMap = {
+    title: { text: props.title, left: "center" },
+    tooltip: {
+      confine: true,
+      trigger: axisChart ? "axis" : "item",
+    },
+    legend: props.legendConfig,
+    grid: {
+      ...gridPos,
+      containLabel: true,
+    },
+  };
+  if (props.data.length <= 0) {
+    // no data
+    return {
+      ...config,
+      ...(axisChart ? noDataAxisConfig : noDataPieChartConfig),
+    };
+  }
+  const yAxisConfig = props.yConfig();
+  const seriesColumnNames = props.series
+    .filter((s) => !s.getView().hide)
+    .map((s) => s.getView().columnName);
+  // y-axis is category and time, data doesn't need to aggregate
+  const transformedData =
+    yAxisConfig.type === "category" || yAxisConfig.type === "time"
+      ? props.data
+      : transformData(props.data, props.xAxisKey, seriesColumnNames);
+  config = {
+    ...config,
+    dataset: [
+      {
+        source: transformedData,
+        sourceHeader: false,
+      },
+    ],
+    series: getSeriesConfig(props),
+  };
+  if (axisChart) {
+    // pure chart's size except the margin around
+    let chartRealSize;
+    if (chartSize) {
+      const rightSize =
+        typeof gridPos.right === "number"
+          ? gridPos.right
+          : (chartSize.w * parseFloat(gridPos.right)) / 100.0;
+      chartRealSize = {
+        // actually it's self-adaptive with the x-axis label on the left, not that accurate but work
+        w: chartSize.w - gridPos.left - rightSize,
+        // also self-adaptive on the bottom
+        h: chartSize.h - gridPos.top - gridPos.bottom,
+        right: rightSize,
+      };
+    }
+    const finalXyConfig = calcXYConfig(
+      props.xConfig,
+      yAxisConfig,
+      props.xAxisDirection,
+      transformedData.map((d) => d[props.xAxisKey]),
+      chartRealSize
+    );
+    config = {
+      ...config,
+      // @ts-ignore
+      xAxis: finalXyConfig.xConfig,
+      // @ts-ignore
+      yAxis: finalXyConfig.yConfig,
+    };
+  }
+  // log.log("Echarts transformedData and config", transformedData, config);
+  return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+  const series = option.series;
+  const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+  if (series && dataSource) {
+    return param.selected.flatMap((selectInfo: any) => {
+      const seriesInfo = series[selectInfo.seriesIndex];
+      if (!seriesInfo || !seriesInfo.encode) {
+        return [];
+      }
+      return selectInfo.dataIndex.map((index: any) => {
+        const commonResult = {
+          seriesName: seriesInfo.name,
+        };
+        if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+          return {
+            ...commonResult,
+            itemName: dataSource[index][seriesInfo.encode.itemName],
+            value: dataSource[index][seriesInfo.encode.value],
+          };
+        } else {
+          return {
+            ...commonResult,
+            x: dataSource[index][seriesInfo.encode.x],
+            y: dataSource[index][seriesInfo.encode.y],
+          };
+        }
+      });
+    });
+  }
+  return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+  const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+  const scripts = document.getElementsByTagName('script');
+  // is script already loaded
+  let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+  if(scriptIndex > -1) {
+    return scripts[scriptIndex];
+  }
+  // is script loaded with diff api_key, remove the script and load again
+  scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+  if(scriptIndex > -1) {
+    scripts[scriptIndex].remove();
+  }
+
+  const script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = mapsUrl;
+  script.async = true;
+  script.defer = true;
+  window.document.body.appendChild(script);
+
+  return script;
+}

package/src/comps/chartComp/reactEcharts/core.tsx

@@ -0,0 +1,194 @@
+import type { ECharts } from "echarts";
+import { PureComponent } from "react";
+import isEqual from "fast-deep-equal";
+import { EChartsReactProps, EChartsInstance } from "./types";
+import _ from "lodash";
+import log from "loglevel";
+
+function isString(v: any): boolean {
+  return typeof v === "string";
+}
+
+function isFunction(v: any): boolean {
+  return typeof v === "function";
+}
+
+/**
+ * core component for echarts binding
+ */
+export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
+  /**
+   * echarts render container
+   */
+  public ele: HTMLElement | null;
+
+  /**
+   * echarts library entry
+   */
+  protected echarts: any;
+
+  constructor(props: EChartsReactProps) {
+    super(props);
+
+    this.echarts = props.echarts;
+    this.ele = null;
+  }
+
+  componentDidMount() {
+    this.renderNewEcharts();
+  }
+
+  // update
+  componentDidUpdate(prevProps: EChartsReactProps) {
+    /**
+     * if shouldSetOption return false, then return, not update echarts options
+     * default is true
+     */
+    const { shouldSetOption } = this.props;
+    if (shouldSetOption && isFunction(shouldSetOption) && !shouldSetOption(prevProps, this.props)) {
+      return;
+    }
+
+    /**
+     * the props below need to dispose before re-render
+     * 1. when switching theme
+     * 2. when modifying opts
+     * 3. when modifying onEvents, thus the binded event issue #151 can be cancel
+     */
+    if (
+      !isEqual(prevProps.theme, this.props.theme) ||
+      !isEqual(prevProps.opts, this.props.opts) ||
+      !isEqual(prevProps.onEvents, this.props.onEvents) ||
+      !isEqual(prevProps.mode, this.props.mode)
+      // this.props.option.gmap
+    ) {
+      this.dispose();
+
+      this.renderNewEcharts(); // re-render
+      return;
+    }
+
+    if(this.props.mode === "json") {
+      this.updateEChartsOption();
+      return;
+    }
+
+    // when these props are not isEqual, update echarts
+    const pickKeys = ["option", "notMerge", "lazyUpdate", "showLoading", "loadingOption"];
+    if (!isEqual(_.pick(this.props, pickKeys), _.pick(prevProps, pickKeys))) {
+      this.updateEChartsOption();
+    }
+  }
+
+  componentWillUnmount() {
+    this.dispose();
+  }
+
+  /**
+   * return the echart object
+   * 1. if exist, return the existed instance
+   * 2. or new one instance
+   */
+  public getEchartsInstance(): ECharts {
+    return (
+      this.echarts.getInstanceByDom(this.ele) ||
+      this.echarts.init(this.ele, this.props.theme, this.props.opts)
+    );
+  }
+
+  /**
+   * dispose echarts and clear size-sensor
+   */
+  private dispose() {
+    if (this.ele) {
+      // dispose echarts instance
+      this.echarts.dispose(this.ele);
+    }
+  }
+
+  /**
+   * render a new echarts instance
+   */
+  private renderNewEcharts() {
+    const { onEvents, onChartReady } = this.props;
+
+    // 1. new echarts instance
+    const echartsInstance = this.updateEChartsOption();
+
+    // 2. bind events
+    this.bindEvents(echartsInstance, onEvents || {});
+
+    // 3. on chart ready
+    if (onChartReady && isFunction(onChartReady)) onChartReady(echartsInstance);
+  }
+
+  // bind the events
+  private bindEvents(instance: any, events: EChartsReactProps["onEvents"]) {
+    function _bindEvent(eventName: string, func: Function) {
+      // ignore the event config which not satisfy
+      if (isString(eventName) && isFunction(func)) {
+        // binding event
+        instance.on(eventName, (param: any) => {
+          func(param, instance);
+        });
+      }
+    }
+
+    // loop and bind
+    for (const eventName in events) {
+      if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+        _bindEvent(eventName, events[eventName]);
+      }
+    }
+  }
+
+  /**
+   * render the echarts
+   */
+  private updateEChartsOption(): EChartsInstance {
+    const {
+      option,
+      notMerge = false,
+      lazyUpdate = false,
+      showLoading,
+      loadingOption = null,
+    } = this.props;
+    // 1. get or initial the echarts object
+    const echartInstance = this.getEchartsInstance();
+    // 2. set the echarts option
+    try {
+      // set option catch exception
+      echartInstance.setOption(option, {
+        notMerge: notMerge,
+        lazyUpdate: lazyUpdate,
+        silent: true,
+      });
+    } catch (e) {
+      // FIXME: if don't dispose, setOption again will call cause bugs
+      // https://github.com/apache/echarts/issues/16608
+      this.dispose();
+      log.warn("invalid echarts option:", e);
+    }
+    // 3. set loading mask
+    if (showLoading) echartInstance.showLoading(loadingOption);
+    else echartInstance.hideLoading();
+
+    return echartInstance;
+  }
+
+  render(): JSX.Element {
+    const { style, className = "" } = this.props;
+    // default height = 300
+    const newStyle = { height: 300, ...style };
+
+    return (
+      <div
+        ref={(e: HTMLElement | null) => {
+          this.ele = e;
+        }}
+        style={newStyle}
+        className={`echarts-for-react ${className}`}
+      />
+    );
+  }
+}

package/src/comps/chartComp/reactEcharts/index.ts

@@ -0,0 +1,21 @@
+import * as echarts from "echarts";
+import "echarts-wordcloud";
+import { EChartsReactProps, EChartsInstance, EChartsOptionWithMap } from "./types";
+import EChartsReactCore from "./core";
+
+/**
+ * reference: https://github.com/hustcc/echarts-for-react
+ * add exception-catch for setOption
+ * if query isn't successfully loaded, chart will fail to load and can't reload
+ */
+export type { EChartsReactProps, EChartsOptionWithMap, EChartsInstance };
+
+// export the Component the echarts Object.
+export default class EChartsReact extends EChartsReactCore {
+  constructor(props: EChartsReactProps) {
+    super(props);
+
+    // initialize as echarts package
+    this.echarts = echarts;
+  }
+}

package/src/comps/chartComp/reactEcharts/types.ts

@@ -0,0 +1,76 @@
+import { CSSProperties } from "react";
+import { EChartsOption } from "echarts";
+import { GoogleMapComponentOption } from "echarts-extension-gmap";
+
+export type EChartsOptionWithMap = EChartsOption & GoogleMapComponentOption<any>;
+
+export type EChartsInstance = any;
+
+export type Opts = {
+  readonly devicePixelRatio?: number;
+  readonly renderer?: "canvas" | "svg";
+  readonly width?: number | null | undefined | "auto";
+  readonly height?: number | null | undefined | "auto";
+  readonly locale?: string;
+};
+
+export type EChartsReactProps = {
+  /**
+   * echarts library entry, use it for import necessary.
+   */
+  readonly echarts?: any;
+  /**
+   * `className` for container
+   */
+  readonly className?: string;
+  /**
+   * `style` for container
+   */
+  readonly style?: CSSProperties;
+  /**
+   * echarts option
+   */
+  readonly option: EChartsOptionWithMap;
+  /**
+   * echarts theme config, can be:
+   * 1. theme name string
+   * 2. theme object
+   */
+  readonly theme?: string | Record<string, any>;
+  /**
+   * notMerge config for echarts, default is `false`
+   */
+  readonly notMerge?: boolean;
+  /**
+   * lazyUpdate config for echarts, default is `false`
+   */
+  readonly lazyUpdate?: boolean;
+  /**
+   * showLoading config for echarts, default is `false`
+   */
+  readonly showLoading?: boolean;
+  /**
+   * loadingOption config for echarts, default is `null`
+   */
+  readonly loadingOption?: any;
+  /**
+   * echarts opts config, default is `{}`
+   */
+  readonly opts?: Opts;
+  /**
+   * when after chart reander, do the callback widht echarts instance
+   */
+  readonly onChartReady?: (instance: EChartsInstance) => void;
+  /**
+   * bind events, default is `{}`
+   */
+  readonly onEvents?: Record<string, Function>;
+  /**
+   * should update echarts options
+   */
+  readonly shouldSetOption?: (prevProps: EChartsReactProps, props: EChartsReactProps) => boolean;
+  /** 
+   * echarts mode: ui | json | map 
+  */
+  readonly mode?: 'ui' | 'json' | 'map'
+};

package/src/comps/chartComp/seriesComp.tsx

@@ -0,0 +1,119 @@
+import {
+  BoolControl,
+  StringControl,
+  list,
+  JSONObject,
+  isNumeric,
+  genRandomKey,
+  Dropdown,
+  OptionsType,
+  MultiCompBuilder,
+  valueComp,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+
+export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
+export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
+type SeriesDataType = ConstructorToDataType<typeof SeriesComp>;
+
+type ActionDataType = {
+  type: "chartDataChanged";
+  chartData: Array<JSONObject>;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+  return {
+    seriesName: name,
+    columnName: columnName,
+    dataIndex: genRandomKey(),
+  };
+}
+
+const seriesChildrenMap = {
+  columnName: StringControl,
+  seriesName: StringControl,
+  hide: BoolControl,
+  // unique key, for sort
+  dataIndex: valueComp<string>(""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+  return props;
+})
+  .setPropertyViewFn(() => {
+    return <></>;
+  })
+  .build();
+
+class SeriesComp extends SeriesTmpComp {
+  getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+    return (
+      <>
+        {this.children.seriesName.propertyView({
+          label: trans("chart.seriesName"),
+        })}
+        <Dropdown
+          value={this.children.columnName.getView()}
+          options={columnOptions}
+          label={trans("chart.dataColumns")}
+          onChange={(value) => {
+            this.children.columnName.dispatchChangeValueAction(value);
+          }}
+        />
+      </>
+    );
+  }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+  override reduce(action: CompAction): this {
+    if (isMyCustomAction<ActionDataType>(action, "chartDataChanged")) {
+      // auto generate series
+      const actions = this.genExampleSeriesActions(action.value.chartData);
+      return this.reduce(this.multiAction(actions));
+    }
+    return super.reduce(action);
+  }
+
+  private genExampleSeriesActions(chartData: Array<JSONObject>) {
+    const actions: CustomAction[] = [];
+    if (!chartData || chartData.length <= 0 || !chartData[0]) {
+      return actions;
+    }
+    let delCnt = 0;
+    const existColumns = this.getView().map((s) => s.getView().columnName);
+    // delete series not in data
+    existColumns.forEach((columnName) => {
+      if (chartData[0]?.[columnName] === undefined) {
+        actions.push(this.deleteAction(0));
+        delCnt++;
+      }
+    });
+    if (existColumns.length > delCnt) {
+      // don't generate example if exists
+      return actions;
+    }
+    // generate example series
+    const exampleKeys = Object.keys(chartData[0])
+      .filter((key) => {
+        return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+      })
+      .slice(0, 3);
+    exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+    return actions;
+  }
+
+  dispatchDataChanged(chartData: Array<JSONObject>): void {
+    this.dispatch(
+      customAction<ActionDataType>({
+        type: "chartDataChanged",
+        chartData: chartData,
+      })
+    );
+  }
+}