lowcoder-comps 0.0.19 → 0.0.21

package/src/comps/chartComp/chartPropertyView.tsx

@@ -1,218 +0,0 @@
-import { changeChildAction, CompAction } from "lowcoder-core";
-import { ChartCompChildrenType, ChartTypeOptions, getDataKeys } from "./chartConstants";
-import { newSeries } from "./seriesComp";
-import {
-  CustomModal,
-  Dropdown,
-  hiddenPropertyView,
-  Option,
-  RedButton,
-  Section,
-  sectionNames,
-  controlItem,
-} from "lowcoder-sdk";
-import { trans } from "i18n/comps";
-import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
-
-export function chartPropertyView(
-  children: ChartCompChildrenType,
-  dispatch: (action: CompAction) => void
-) {
-  const series = children.series.getView();
-  const columnOptions = getDataKeys(children.data.getView()).map((key) => ({
-    label: key,
-    value: key,
-  }));
-
-  const uiModePropertyView = (
-    <>
-      <Section name={trans("chart.data")}>
-        {children.data.propertyView({
-          label: trans("chart.data"),
-        })}
-        <Dropdown
-          value={children.chartConfig.children.compType.getView()}
-          options={ChartTypeOptions}
-          label={trans("chart.chartType")}
-          onChange={(value) => {
-            // keep the previous value
-            if (children.chartConfig.children.comp.children.hasOwnProperty("showLabel")) {
-              children.chartConfig.dispatchChangeValueAction({
-                compType: value as any,
-                comp: {
-                  showLabel: (
-                    children.chartConfig.children.comp.children as any
-                  ).showLabel.toJsonValue(),
-                },
-              });
-            } else {
-              children.chartConfig.dispatchChangeValueAction({
-                compType: value,
-              });
-            }
-          }}
-        />
-        <Dropdown
-          value={children.xAxisKey.getView()}
-          options={columnOptions}
-          label={trans("chart.xAxis")}
-          onChange={(value) => {
-            dispatch(changeChildAction("xAxisKey", value));
-          }}
-        />
-        <Option
-          items={series}
-          title={trans("chart.chartSeries")}
-          itemTitle={(s) => s.getView().seriesName}
-          popoverTitle={(s) => s.getView().columnName}
-          content={(s, index) => (
-            <>
-              {s.getPropertyViewWithData(columnOptions)}
-              {
-                <RedButton
-                  onClick={() => {
-                    CustomModal.confirm({
-                      title: trans("chart.delete"),
-                      content: trans("chart.confirmDelete") + `${s.getView().seriesName}?`,
-                      onConfirm: () =>
-                        children.series.dispatch(children.series.deleteAction(index)),
-                      confirmBtnType: "delete",
-                      okText: trans("chart.delete"),
-                    });
-                  }}
-                >
-                  {trans("chart.delete")}
-                </RedButton>
-              }
-            </>
-          )}
-          onAdd={() => {
-            if (columnOptions.length <= 0) {
-              return;
-            }
-            children.series.dispatch(
-              children.series.pushAction(
-                newSeries(trans("chart.customSeries"), columnOptions[0].value)
-              )
-            );
-          }}
-          onMove={(fromIndex, toIndex) => {
-            const action = children.series.arrayMoveAction(fromIndex, toIndex);
-            children.series.dispatch(action);
-          }}
-          hide={(s) => s.getView().hide}
-          onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
-          dataIndex={(s) => s.getView().dataIndex}
-        />
-      </Section>
-      <Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
-      <Section name={sectionNames.layout}>
-        {children.title.propertyView({ label: trans("chart.title") })}
-        {children.chartConfig.children.compType.getView() !== "pie" && (
-          <>
-            {children.xAxisDirection.propertyView({
-              label: trans("chart.xAxisDirection"),
-              radioButton: true,
-            })}
-            {children.xConfig.getPropertyView()}
-            {children.yConfig.getPropertyView()}
-          </>
-        )}
-        {children.legendConfig.getPropertyView()}
-        {hiddenPropertyView(children)}
-      </Section>
-      <Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
-    </>
-  );
-
-  const jsonModePropertyView = (
-    <>
-      <Section name={trans("chart.config")}>
-        {children.echartsOption.propertyView({
-          label: trans("chart.echartsOptionLabel"),
-          styleName: "higher",
-          tooltip: (
-            <div>
-              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionTooltip")}
-              </a>
-              <br />
-              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsOptionExamples")}
-              </a>
-            </div>
-          ),
-        })}
-      </Section>
-      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-    </>
-  );
-
-  const mapModePropertyView = (
-    <>
-      <Section name={'Map Configuration'}>
-        {children.mapApiKey.propertyView({
-          label: "API Key"
-        })}
-        {children.mapZoomLevel.propertyView({
-          label: "Zoom Level"
-        })}
-        {controlItem({}, (
-          <b style={{marginTop: '8px'}}>
-            {'Center Position'}
-          </b>
-        ))}
-        {children.mapCenterLng.propertyView({
-          label: "Longitude"
-        })}
-        {children.mapCenterLat.propertyView({
-          label: "Latitude"
-        })}
-        {children.showCharts.propertyView({
-          label: "Show Charts"
-        })}
-      </Section>
-      <Section name={'Map Data'}>
-        {children.mapOptions.propertyView({
-          label: trans("chart.echartsOptionLabel"),
-          styleName: "higher",
-          tooltip: (
-            <div>
-              <a href={mapOptionUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsMapOptionTooltip")}
-              </a>
-              <br />
-              <a href={mapExamplesUrl} target="_blank" rel="noopener noreferrer">
-                {trans("chart.echartsMapOptionExamples")}
-              </a>
-            </div>
-          ),
-        })}
-      </Section>
-      <Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
-      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-    </>
-  );
-  
-  const getChatConfigByMode = (mode: string) => {
-    switch(mode) {
-      case "ui":
-        return uiModePropertyView;
-      case "json":
-        return jsonModePropertyView;
-      case "map":
-        return mapModePropertyView;
-    }
-  }
-  return (
-    <>
-      <Section name={trans("chart.mode")}>
-        {children.mode.propertyView({
-          label: "",
-          radioButton: true,
-        })}
-      </Section>
-      {getChatConfigByMode(children.mode.getView())}
-    </>
-  );
-}

package/src/comps/chartComp/chartUtils.ts

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

@@ -1,194 +0,0 @@
-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}`}
-      />
-    );
-  }
-}