lowcoder-comps 0.0.19 → 0.0.20

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?v=3.exp`;
-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();
-})();

package/src/comps/chartComp/chartConstants.tsx

@@ -1,288 +0,0 @@
-import {
-  jsonControl,
-  JSONObject,
-  stateComp,
-  toJSONObjectArray,
-  toObject,
-  BoolControl,
-  withDefault,
-  StringControl,
-  NumberControl,
-  FunctionControl,
-  dropdownControl,
-  eventHandlerControl,
-  valueComp,
-  withType,
-  ValueFromOption,
-  uiChildren,
-} from "lowcoder-sdk";
-import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
-import { BarChartConfig } from "./chartConfigs/barChartConfig";
-import { XAxisConfig, YAxisConfig } from "./chartConfigs/cartesianAxisConfig";
-import { LegendConfig } from "./chartConfigs/legendConfig";
-import { LineChartConfig } from "./chartConfigs/lineChartConfig";
-import { PieChartConfig } from "./chartConfigs/pieChartConfig";
-import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
-import { SeriesListComp } from "./seriesComp";
-import { EChartsOption } from "echarts";
-import { i18nObjs, trans } from "i18n/comps";
-
-export const ChartTypeOptions = [
-  {
-    label: trans("chart.bar"),
-    value: "bar",
-  },
-  {
-    label: trans("chart.line"),
-    value: "line",
-  },
-  {
-    label: trans("chart.scatter"),
-    value: "scatter",
-  },
-  {
-    label: trans("chart.pie"),
-    value: "pie",
-  },
-] as const;
-
-const chartModeOptions = [
-  {
-    label: trans("chart.UIMode"),
-    value: "ui",
-  },
-  {
-    label: "ECharts JSON",
-    value: "json",
-  },
-  {
-    label: "Map",
-    value: "map",
-  },
-] as const;
-
-export const UIEventOptions = [
-  {
-    label: trans("chart.select"),
-    value: "select",
-    description: trans("chart.selectDesc"),
-  },
-
-  {
-    label: trans("chart.unSelect"),
-    value: "unselect",
-    description: trans("chart.unselectDesc"),
-  },
-] as const;
-
-export const MapEventOptions = [
-  {
-    label: trans("chart.mapReady"),
-    value: "mapReady",
-    description: trans("chart.mapReadyDesc"),
-  },
-  {
-    label: trans("chart.zoomLevelChange"),
-    value: "zoomLevelChange",
-    description: trans("chart.zoomLevelChangeDesc"),
-  },
-  {
-    label: trans("chart.centerPositionChange"),
-    value: "centerPositionChange",
-    description: trans("chart.centerPositionChangeDesc"),
-  },
-] as const;
-
-export const XAxisDirectionOptions = [
-  {
-    label: trans("chart.horizontal"),
-    value: "horizontal",
-  },
-  {
-    label: trans("chart.vertical"),
-    value: "vertical",
-  },
-] as const;
-
-export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
-
-export const noDataAxisConfig = {
-  animation: false,
-  xAxis: {
-    type: "category",
-    name: trans("chart.noData"),
-    nameLocation: "middle",
-    data: [],
-    axisLine: {
-      lineStyle: {
-        color: "#8B8FA3",
-      },
-    },
-  },
-  yAxis: {
-    type: "value",
-    axisLabel: {
-      color: "#8B8FA3",
-    },
-    splitLine: {
-      lineStyle: {
-        color: "#F0F0F0",
-      },
-    },
-  },
-  tooltip: {
-    show: false,
-  },
-  series: [
-    {
-      data: [700],
-      type: "line",
-      itemStyle: {
-        opacity: 0,
-      },
-    },
-  ],
-} as EChartsOption;
-
-export const noDataPieChartConfig = {
-  animation: false,
-  tooltip: {
-    show: false,
-  },
-  legend: {
-    formatter: trans("chart.unknown"),
-    top: "bottom",
-    selectedMode: false,
-  },
-  color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
-  series: [
-    {
-      type: "pie",
-      radius: "35%",
-      center: ["25%", "50%"],
-      silent: true,
-      label: {
-        show: false,
-      },
-      data: [
-        {
-          name: "1",
-          value: 70,
-        },
-        {
-          name: "2",
-          value: 68,
-        },
-        {
-          name: "3",
-          value: 48,
-        },
-        {
-          name: "4",
-          value: 40,
-        },
-      ],
-    },
-    {
-      type: "pie",
-      radius: "35%",
-      center: ["75%", "50%"],
-      silent: true,
-      label: {
-        show: false,
-      },
-      data: [
-        {
-          name: "1",
-          value: 70,
-        },
-        {
-          name: "2",
-          value: 68,
-        },
-        {
-          name: "3",
-          value: 48,
-        },
-        {
-          name: "4",
-          value: 40,
-        },
-      ],
-    },
-  ],
-} as EChartsOption;
-
-export type ChartSize = { w: number; h: number };
-
-export const getDataKeys = (data: Array<JSONObject>) => {
-  if (!data) {
-    return [];
-  }
-  const dataKeys: Array<string> = [];
-  data.slice(0, 50).forEach((d) => {
-    Object.keys(d).forEach((key) => {
-      if (!dataKeys.includes(key)) {
-        dataKeys.push(key);
-      }
-    });
-  });
-  return dataKeys;
-};
-
-const ChartOptionMap = {
-  bar: BarChartConfig,
-  line: LineChartConfig,
-  pie: PieChartConfig,
-  scatter: ScatterChartConfig,
-};
-
-const ChartOptionComp = withType(ChartOptionMap, "bar");
-export type CharOptionCompType = keyof typeof ChartOptionMap;
-
-export const chartUiModeChildren = {
-  title: StringControl,
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
-  xAxisKey: valueComp<string>(""), // x-axis, key from data
-  xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
-  series: SeriesListComp,
-  xConfig: XAxisConfig,
-  yConfig: YAxisConfig,
-  legendConfig: LegendConfig,
-  chartConfig: ChartOptionComp,
-  onUIEvent: eventHandlerControl(UIEventOptions),
-};
-
-const chartMapModeChildren = {
-  mapInstance: stateComp(),
-  getMapInstance: FunctionControl,
-  mapApiKey: withDefault(StringControl, ''),
-  mapZoomLevel: withDefault(NumberControl, 3),
-  mapCenterLng: withDefault(NumberControl, 15.932644),
-  mapCenterLat: withDefault(NumberControl, 50.942063),
-  mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
-  onMapEvent: eventHandlerControl(MapEventOptions),
-  showCharts: withDefault(BoolControl, true),
-}
-
-export const chartChildrenMap = {
-  mode: dropdownControl(chartModeOptions, "ui"),
-  echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
-  selectedPoints: stateComp<
-    Array<{
-      seriesName: string;
-      // coordinate chart
-      x?: any;
-      y?: any;
-      // pie or funnel
-      itemName?: any;
-      value?: any;
-    }>
-  >([]),
-  ...chartUiModeChildren,
-  ...chartMapModeChildren,
-};
-
-const chartUiChildrenMap = uiChildren(chartChildrenMap);
-export type ChartCompPropsType = RecordConstructorToView<typeof chartUiChildrenMap>;
-export type ChartCompChildrenType = RecordConstructorToComp<typeof chartUiChildrenMap>;