lowcoder-comps 0.0.18 → 0.0.19

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

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

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

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

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

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

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