lowcoder-comps 0.0.31 → 0.0.32

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,
-      };
-}

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

@@ -1,9 +0,0 @@
-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`;
-export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
-export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
-export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

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

@@ -1,55 +0,0 @@
-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();
-})();

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

@@ -1,96 +0,0 @@
-import { LineSeriesOption } from "echarts";
-import {
-  MultiCompBuilder,
-  BoolControl,
-  dropdownControl,
-  showLabelPropertyView,
-  withContext,
-  StringControl,
-  ColorOrBoolCodeControl,
-} from "lowcoder-sdk";
-import { trans } from "i18n/comps";
-
-const BarTypeOptions = [
-  {
-    label: trans("chart.basicLine"),
-    value: "basicLine",
-  },
-  {
-    label: trans("chart.stackedLine"),
-    value: "stackedLine",
-  },
-  {
-    label: trans("chart.areaLine"),
-    value: "areaLine",
-  },
-] as const;
-
-export const ItemColorComp = withContext(
-  new MultiCompBuilder({ value: ColorOrBoolCodeControl }, (props) => props.value)
-    .setPropertyViewFn((children) =>
-      children.value.propertyView({
-        label: trans("chart.pointColorLabel"),
-        placeholder: "{{value < 25000}}",
-        tooltip: trans("chart.pointColorTooltip"),
-      })
-    )
-    .build(),
-  ["seriesName", "value"] as const
-);
-
-export const LineChartConfig = (function () {
-  return new MultiCompBuilder(
-    {
-      showLabel: BoolControl,
-      type: dropdownControl(BarTypeOptions, "basicLine"),
-      smooth: BoolControl,
-      itemColor: ItemColorComp,
-    },
-    (props): LineSeriesOption => {
-      const config: LineSeriesOption = {
-        type: "line",
-        label: {
-          show: props.showLabel,
-        },
-        itemStyle: {
-          color: (params) => {
-            if (!params.encode || !params.dimensionNames) {
-              return params.color;
-            }
-            const dataKey = params.dimensionNames[params.encode["y"][0]];
-            const color = (props.itemColor as any)({
-              seriesName: params.seriesName,
-              value: (params.data as any)[dataKey],
-            });
-            if (color === "true") {
-              return "red";
-            } else if (color === "false" || !color) {
-              return params.color;
-            }
-            return color;
-          },
-        },
-      };
-      if (props.type === "stackedLine") {
-        config.stack = "stackValue";
-      } else if (props.type === "areaLine") {
-        config.areaStyle = {};
-      }
-      if (props.smooth) {
-        config.smooth = true;
-      }
-      return config;
-    }
-  )
-    .setPropertyViewFn((children) => (
-      <>
-        {children.type.propertyView({
-          label: trans("chart.lineType"),
-        })}
-        {showLabelPropertyView(children)}
-        {children.smooth.propertyView({ label: trans("chart.smooth") })}
-        {children.itemColor.getPropertyView()}
-      </>
-    ))
-    .build();
-})();

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

@@ -1,83 +0,0 @@
-import { MultiCompBuilder } from "lowcoder-sdk";
-import { PieSeriesOption } from "echarts";
-import { dropdownControl } from "lowcoder-sdk";
-import { ConstructorToView } from "lowcoder-core";
-import { trans } from "i18n/comps";
-
-const BarTypeOptions = [
-  {
-    label: trans("chart.basicPie"),
-    value: "basicPie",
-  },
-  {
-    label: trans("chart.doughnutPie"),
-    value: "doughnutPie",
-  },
-  {
-    label: trans("chart.rosePie"),
-    value: "rosePie",
-  },
-] as const;
-
-// radius percent for each pie chart when one line has [1, 2, 3] pie charts
-const pieRadiusConfig = [65, 35, 20];
-
-type PieConfigViewType = ConstructorToView<typeof PieChartConfig>;
-
-export const PieChartConfig = (function () {
-  return new MultiCompBuilder(
-    {
-      type: dropdownControl(BarTypeOptions, "basicPie"),
-    },
-    (props): PieSeriesOption => {
-      const config: PieSeriesOption = {
-        type: "pie",
-        label: {
-          show: true,
-          formatter: "{d}%",
-        },
-      };
-      if (props.type === "rosePie") {
-        config.roseType = "area";
-      } else if (props.type === "doughnutPie") {
-        config.radius = ["40%", "60%"];
-      }
-      return config;
-    }
-  )
-    .setPropertyViewFn((children) => (
-      <>
-        {children.type.propertyView({
-          label: trans("chart.pieType"),
-        })}
-      </>
-    ))
-    .build();
-})();
-
-export function getPieRadiusAndCenter(
-  seriesLength: number,
-  pieIndex: number,
-  pieConfig: PieConfigViewType
-) {
-  const columnPieNum = Math.min(seriesLength, pieRadiusConfig.length);
-  const radiusNumber = pieRadiusConfig[columnPieNum - 1];
-  const isDoughnutPie = Array.isArray(pieConfig.radius);
-  const radius = isDoughnutPie
-    ? [(radiusNumber / 1.6).toFixed(2) + "%", radiusNumber + "%"]
-    : radiusNumber + "%";
-
-  /*** calculate center coordinates ***/
-  const pieDiameter = 100 / columnPieNum;
-  const xPosition = (pieDiameter * (pieIndex % columnPieNum) + pieDiameter / 2).toFixed(2) + "%";
-  const rowIndex = Math.floor(pieIndex / columnPieNum) + 1;
-  const yPosition =
-    ((100 / Math.floor((columnPieNum * 2 + seriesLength - 1) / columnPieNum)) * rowIndex).toFixed(
-      2
-    ) + "%";
-  // log.log("Echarts height: index:", pieConfig, radius, pieIndex, xPosition, yPosition);
-  return {
-    radius: radius,
-    center: [xPosition, yPosition],
-  } as const;
-}

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

@@ -1,62 +0,0 @@
-import {
-  MultiCompBuilder,
-  dropdownControl,
-  BoolControl,
-  showLabelPropertyView,
-} from "lowcoder-sdk";
-import { ScatterSeriesOption } from "echarts";
-import { trans } from "i18n/comps";
-
-const ScatterShapeOptions = [
-  {
-    label: trans("chart.circle"),
-    value: "circle",
-  },
-  {
-    label: trans("chart.rect"),
-    value: "rect",
-  },
-  {
-    label: trans("chart.triangle"),
-    value: "triangle",
-  },
-  {
-    label: trans("chart.diamond"),
-    value: "diamond",
-  },
-  {
-    label: trans("chart.pin"),
-    value: "pin",
-  },
-  {
-    label: trans("chart.arrow"),
-    value: "arrow",
-  },
-] as const;
-
-export const ScatterChartConfig = (function () {
-  return new MultiCompBuilder(
-    {
-      showLabel: BoolControl,
-      shape: dropdownControl(ScatterShapeOptions, "circle"),
-    },
-    (props): ScatterSeriesOption => {
-      return {
-        type: "scatter",
-        symbol: props.shape,
-        label: {
-          show: props.showLabel,
-        },
-      };
-    }
-  )
-    .setPropertyViewFn((children) => (
-      <>
-        {showLabelPropertyView(children)}
-        {children.shape.propertyView({
-          label: trans("chart.scatterShape"),
-        })}
-      </>
-    ))
-    .build();
-})();