lowcoder-map-component 0.1.1

package/src/configs/lineChartConfigv2.tsx

@@ -0,0 +1,246 @@
+import TrendlineControl from "@/controls/TrendlineControl";
+import { trans } from "@/i18n/comps";
+import { LineSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorControl,
+  ColorOrBoolCodeControl,
+  dropdownControl,
+  jsonControl,
+  MultiCompBuilder,
+  NumberControl,
+  showLabelPropertyView,
+  StringControl,
+  toArray,
+  withContext,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const BorderTypeOptions = [
+  {
+    label: trans("chart.solid"),
+    value: "solid",
+  },
+  {
+    label: trans("chart.dashed"),
+    value: "dashed",
+  },
+  {
+    label: trans("chart.dotted"),
+    value: "dotted",
+  },
+] as const;
+
+export const SymbolOptions = [
+  {
+    label: trans("chart.rect"),
+    value: "rect",
+  },
+  {
+    label: trans("chart.circle"),
+    value: "circle",
+  },
+  {
+    label: trans("chart.roundRect"),
+    value: "roundRect",
+  },
+  {
+    label: trans("chart.triangle"),
+    value: "triangle",
+  },
+  {
+    label: trans("chart.diamond"),
+    value: "diamond",
+  },
+  {
+    label: trans("chart.pin"),
+    value: "pin",
+  },
+  {
+    label: trans("chart.arrow"),
+    value: "arrow",
+  },
+  {
+    label: trans("chart.none"),
+    value: "none",
+  },
+  {
+    label: trans("chart.emptyCircle"),
+    value: "emptyCircle",
+  },
+] 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 LineChartConfigv2 = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+      showEndLabel: BoolControl,
+      // stacked: BoolControl,
+      // area: BoolControl,
+      // smooth: BoolControl,
+      // polar: BoolControl,
+      itemColor: ItemColorComp,
+      symbol: dropdownControl(SymbolOptions, "emptyCircle"),
+      symbolSize: withDefault(NumberControl, 4),
+      radiusAxisMax: NumberControl,
+      polarRadiusStart: withDefault(StringControl, "30"),
+      polarRadiusEnd: withDefault(StringControl, "80%"),
+      polarStartAngle: withDefault(NumberControl, 90),
+      polarEndAngle: withDefault(NumberControl, -180),
+      polarIsTangent: withDefault(BoolControl, false),
+      labelData: jsonControl(toArray, []),
+      borderColor: ColorControl,
+      borderWidth: NumberControl,
+      borderType: dropdownControl(BorderTypeOptions, "solid"),
+      showTrendline: withDefault(BoolControl, false),
+      trendlineControl: TrendlineControl,
+    },
+    (props): LineSeriesOption => {
+      const config: LineSeriesOption & {
+        polarData: any;
+        showTrendline: boolean;
+        trendlines: any;
+      } = {
+        type: "line",
+        label: {
+          show: props.showLabel,
+        },
+        symbol: props.symbol,
+        symbolSize: props.symbolSize,
+        showTrendline: props.showTrendline,
+        trendlines: props.trendlineControl,
+        itemStyle: {
+          color: (params) => {
+            const color = (props.itemColor as any)({
+              seriesName: params.seriesName,
+              value: params.data,
+            });
+            if (color === "true") {
+              return "red";
+            } else if (color === "false" || !color) {
+              return params.color;
+            }
+            return color;
+          },
+          borderColor: props.borderColor,
+          borderWidth: props.borderWidth,
+          borderType: props.borderType,
+        },
+        polarData: {
+          polar: props.polar,
+          radiusAxisMax: props.radiusAxisMax,
+          polarRadiusStart: props.polarRadiusStart,
+          polarRadiusEnd: props.polarRadiusEnd,
+          polarStartAngle: props.polarStartAngle,
+          polarEndAngle: props.polarEndAngle,
+          labelData: props.labelData,
+          polarIsTangent: props.polarIsTangent,
+        },
+      };
+      // if (props.stacked) {
+      //   config.stack = "stackValue";
+      // }
+      // if (props.area) {
+      //   config.areaStyle = {};
+      // }
+      // if (props.smooth) {
+      //   config.smooth = true;
+      // }
+      if (props.showEndLabel) {
+        config.endLabel = {
+          show: true,
+          formatter: "{a}",
+          distance: 20,
+        };
+      }
+      if (props.polar) {
+        config.coordinateSystem = "polar";
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {/* {children.stacked.propertyView({
+          label: trans("lineChart.stacked"),
+        })}
+        {children.area.propertyView({
+          label: trans("lineChart.area"),
+        })}
+        {children.polar.propertyView({
+          label: trans("lineChart.polar"),
+        })}
+        {children.polar.getView() &&
+          children.polarIsTangent.propertyView({
+            label: trans("barChart.polarIsTangent"),
+          })}
+        {children.polar.getView() &&
+          children.polarStartAngle.propertyView({
+            label: trans("barChart.polarStartAngle"),
+          })}
+        {children.polar.getView() &&
+          children.polarEndAngle.propertyView({
+            label: trans("barChart.polarEndAngle"),
+          })}
+        {children.polar.getView() &&
+          children.radiusAxisMax.propertyView({
+            label: trans("barChart.radiusAxisMax"),
+          })}
+        {children.polar.getView() &&
+          children.polarRadiusStart.propertyView({
+            label: trans("barChart.polarRadiusStart"),
+          })}
+        {children.polar.getView() &&
+          children.polarRadiusEnd.propertyView({
+            label: trans("barChart.polarRadiusEnd"),
+          })}
+        {children.polar.getView() &&
+          children.labelData.propertyView({
+            label: trans("barChart.polarLabelData"),
+          })} */}
+        {showLabelPropertyView(children)}
+        {children.showEndLabel.propertyView({
+          label: trans("lineChart.showEndLabel"),
+        })}
+        {children.smooth.propertyView({ label: trans("chart.smooth") })}
+        {children.symbol.propertyView({
+          label: trans("lineChart.symbol"),
+        })}
+        {children.symbolSize.propertyView({
+          label: trans("lineChart.symbolSize"),
+        })}
+        {/* {children.itemColor.getPropertyView()} */}
+        {children.borderColor.propertyView({
+          label: trans("lineChart.borderColor"),
+        })}
+        {children.borderWidth.propertyView({
+          label: trans("lineChart.borderWidth"),
+        })}
+        {children.borderType.propertyView({
+          label: trans("lineChart.borderType"),
+        })}
+        {children.showTrendline.propertyView({
+          label: trans("lineChart.showTrendline"),
+        })}
+        {children.showTrendline.getView() &&
+          children.trendlineControl.getPropertyView()}
+      </>
+    ))
+    .build();
+})();

package/src/configs/mapChartConfig.tsx

@@ -0,0 +1,106 @@
+import { ColorScaleControls } from "@/controls/ColorScaleControl";
+import { trans } from "@/i18n/comps";
+import { MapSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorOrBoolCodeControl,
+  dropdownControl,
+  MultiCompBuilder,
+  StringControl,
+  withContext,
+} from "lowcoder-sdk";
+export const MapTypeOptions = [
+  {
+    label: "World",
+    value: "world",
+  },
+  {
+    label: "Viet Nam",
+    value: "vietnam",
+  },
+  {
+    label: "Custom",
+    value: "custom",
+  },
+] as const;
+export const RegionMapTypeOptions = [
+  {
+    label: "Choropleth",
+    value: "choropleth",
+  },
+  {
+    label: "Bubble Map",
+    value: "bubble-map",
+  },
+] as const;
+
+export const ItemColorComp = withContext(
+  new MultiCompBuilder(
+    { value: ColorOrBoolCodeControl },
+    (props) => props.value
+  )
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("chart.regionColorLabel"),
+        placeholder: "{{value < 50}}",
+        tooltip: trans("chart.regionColorTooltip"),
+      })
+    )
+    .build(),
+  ["name", "value"] as const
+);
+
+export const MapChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      colorScale: ColorScaleControls,
+      mapType: dropdownControl(MapTypeOptions, "vietnam"),
+      mapUrl: StringControl,
+      roam: BoolControl,
+      showLabel: BoolControl,
+    },
+    (props): MapSeriesOption => {
+      const config: MapSeriesOption = {
+        ...props,
+        type: "map",
+        map: props.mapType,
+        roam: props.roam,
+        label: {
+          show: props.showLabel,
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: props.emphasisColor,
+          },
+        },
+      };
+
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.colorScale.getPropertyView()}
+          {children.mapType.propertyView({
+            label: trans("mapChart.mapType"),
+          })}
+          {children.mapType.getView() === "custom" &&
+            children.mapUrl.propertyView({
+              label: trans("mapChart.mapUrl"),
+              tooltip: trans("mapChart.mapUrlTooltip"),
+              placeholder: "https://example.com/map.json",
+            })}
+
+          {children.roam.propertyView({
+            label: trans("mapChart.roam"),
+          })}
+          {children.showLabel.propertyView({
+            label: trans("mapChart.showLabel"),
+          })}
+        </>
+      );
+    })
+
+    .build();
+})();

package/src/configs/mapChartConfigv2.tsx

@@ -0,0 +1,106 @@
+import { ColorScaleControls } from "@/controls/ColorScaleControl";
+import { trans } from "@/i18n/comps";
+import { MapSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorOrBoolCodeControl,
+  dropdownControl,
+  MultiCompBuilder,
+  StringControl,
+  withContext,
+} from "lowcoder-sdk";
+export const MapTypeOptions = [
+  // {
+  //   label: "World",
+  //   value: "world",
+  // },
+  {
+    label: "Viet Nam",
+    value: "vietnam",
+  },
+  // {
+  //   label: "Custom",
+  //   value: "custom",
+  // },
+] as const;
+export const RegionMapTypeOptions = [
+  {
+    label: "Choropleth",
+    value: "choropleth",
+  },
+  {
+    label: "Bubble Map",
+    value: "bubble-map",
+  },
+] as const;
+
+export const ItemColorComp = withContext(
+  new MultiCompBuilder(
+    { value: ColorOrBoolCodeControl },
+    (props) => props.value
+  )
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("chart.regionColorLabel"),
+        placeholder: "{{value < 50}}",
+        tooltip: trans("chart.regionColorTooltip"),
+      })
+    )
+    .build(),
+  ["name", "value"] as const
+);
+
+export const MapChartConfigV2 = (function () {
+  return new MultiCompBuilder(
+    {
+      colorScale: ColorScaleControls,
+      mapType: dropdownControl(MapTypeOptions, "vietnam"),
+      mapUrl: StringControl,
+      roam: BoolControl,
+      showLabel: BoolControl,
+    },
+    (props): MapSeriesOption => {
+      const config: MapSeriesOption = {
+        ...props,
+        type: "mapv2",
+        map: props.mapType,
+        roam: props.roam,
+        label: {
+          show: props.showLabel,
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: props.emphasisColor,
+          },
+        },
+      };
+
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {/* {children.colorScale.getPropertyView()} */}
+          {children.mapType.propertyView({
+            label: trans("mapChart.mapType"),
+          })}
+          {children.mapType.getView() === "custom" &&
+            children.mapUrl.propertyView({
+              label: trans("mapChart.mapUrl"),
+              tooltip: trans("mapChart.mapUrlTooltip"),
+              placeholder: "https://example.com/map.json",
+            })}
+
+          {children.roam.propertyView({
+            label: trans("mapChart.roam"),
+          })}
+          {children.showLabel.propertyView({
+            label: trans("mapChart.showLabel"),
+          })}
+        </>
+      );
+    })
+
+    .build();
+})();

package/src/configs/mixedChartConfig.tsx

@@ -0,0 +1,21 @@
+import { BarSeriesOption, LineSeriesOption } from "echarts";
+import { MultiCompBuilder } from "lowcoder-sdk";
+import { BarChartConfig } from "./barChartConfig";
+import { LineChartConfig } from "./lineChartConfig";
+
+export const MixedChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      line: LineChartConfig,
+      bar: BarChartConfig,
+    },
+    (props): any[] => {
+      const lineConfig = props.line as LineSeriesOption;
+      const barConfig = props.bar as BarSeriesOption;
+
+      return [lineConfig, barConfig];
+    }
+  )
+    .setPropertyViewFn((children) => <></>)
+    .build();
+})();

package/src/configs/pieChartConfig.tsx

@@ -0,0 +1,156 @@
+import { trans } from "@/i18n/comps";
+import { PieSeriesOption } from "echarts";
+import {
+  ColorControl,
+  ConstructorToView,
+  dropdownControl,
+  MultiCompBuilder,
+  NumberControl,
+  StringControl,
+  withDefault,
+} from "lowcoder-sdk";
+
+// radius percent for each pie chart when one line has [1, 2, 3] pie charts
+const pieRadiusConfig = [65, 35, 20];
+
+export type PieConfigViewType = ConstructorToView<typeof PieChartConfig>;
+
+const PieTypeOptions = [
+  {
+    label: trans("chart.pie"),
+    value: "pie",
+  },
+  {
+    label: trans("chart.rosePie"),
+    value: "rosePie",
+  },
+  {
+    label: trans("chart.doughnutPie"),
+    value: "doughnutPie",
+  },
+  {
+    label: trans("chart.calendarPie"),
+    value: "calendarPie",
+  },
+  {
+    label: trans("chart.geoPie"),
+    value: "geoPie",
+  },
+] as const;
+
+export const PieChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      type: dropdownControl(PieTypeOptions, "pie"),
+      cellSize: withDefault(NumberControl, 40),
+      borderColor: ColorControl,
+      borderWidth: StringControl,
+      borderRadius: StringControl,
+    },
+    (props): PieSeriesOption => {
+      const config: PieSeriesOption = {
+        type: "pie",
+        label: {
+          show: true,
+          formatter: "{d}%",
+        },
+        itemStyle: {
+          borderColor: props.borderColor,
+          borderWidth: props.borderWidth,
+          borderRadius: props.borderRadius,
+        },
+      };
+      if (props.type === "rosePie") {
+        config.roseType = "area";
+      }
+      if (props.type === "doughnutPie") {
+        config.radius = ["40%", "60%"];
+      }
+      if (props.type === "calendarPie") {
+        config.coordinateSystem = "calendar";
+        config.cellSize = [props.cellSize, props.cellSize];
+        config.label = {
+          ...config.label,
+          position: "inside",
+        };
+      }
+
+      return config;
+    }
+  )
+    // luongld2: lỗi khi khi switch qua calendarchart nên comment lại thử 
+     .setPropertyViewFn((children) => (
+      <>
+        {children.type.propertyView({
+          label: trans("chart.pieType"),
+        })}
+        {children.borderColor.propertyView({
+          label: trans("style.borderColor"),
+        })}
+        {children.borderWidth.propertyView({
+          label: trans("style.borderWidth"),
+        })}
+        {children.borderRadius.propertyView({
+          label: trans("style.borderRadius"),
+        })}
+      </>
+    ))
+    // .setPropertyViewFn((children) => (
+    //   <>
+    //     {children.type.propertyView({
+    //       label: trans("chart.pieType"),
+    //     })}
+    //     {children.type.getView() === "calendarPie" &&
+    //       children.cellSize.propertyView({
+    //         label: trans("lineChart.cellSize"),
+    //       })}
+    //     {children.type.getView() === "calendarPie" &&
+    //       children.range.propertyView({
+    //         label: trans("lineChart.range"),
+    //       })}
+    //     {children.type.getView() === "geoPie" &&
+    //       children.mapUrl.propertyView({
+    //         label: trans("pieChart.mapUrl"),
+    //       })}
+    //     {children.borderColor.propertyView({
+    //       label: trans("style.borderColor"),
+    //     })}
+    //     {children.borderWidth.propertyView({
+    //       label: trans("style.borderWidth"),
+    //     })}
+    //     {children.borderRadius.propertyView({
+    //       label: trans("style.borderRadius"),
+    //     })}
+    //   </>
+    // ))
+    .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) + "%";
+  return {
+    radius: radius,
+    center: [xPosition, yPosition],
+  } as const;
+}

package/src/configs/radarChartConfig.tsx

@@ -0,0 +1,31 @@
+import { trans } from "@/i18n/comps";
+import { RadarSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const RadarChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (props): RadarSeriesOption => {
+      const config: RadarSeriesOption = {
+        type: "radar",
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("radarChart.radarType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/sankeyChartConfig.tsx

@@ -0,0 +1,35 @@
+import { trans } from "@/i18n/comps";
+import { SankeySeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const SankeyChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (props): SankeySeriesOption => {
+      const config: SankeySeriesOption = {
+        type: "sankey",
+        label: {
+          show: props.showLabel,
+          position: "top",
+        },
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("sankeyChart.sankeyType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();