lowcoder-map-component 0.1.1

package/src/configs/totalChartConfig.tsx

@@ -0,0 +1,670 @@
+import { IconControl } from "@/controls/IconControl";
+import TrendlineControl from "@/controls/TrendlineControl";
+import { trans } from "@/i18n/comps";
+import { Flex } from "antd";
+import { LineSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorControl,
+  dropdownControl,
+  EchartDefaultChartStyle,
+  jsonControl,
+  MultiCompBuilder,
+  NumberControl,
+  showLabelPropertyView,
+  StringControl,
+  styleControl,
+  toArray,
+  withDefault,
+} from "lowcoder-sdk";
+import React from "react";
+import {
+  BorderTypeOptions,
+  ItemColorComp,
+  SymbolOptions,
+} from "./lineChartConfig";
+
+export const DataTypeOptions = [
+  {
+    label: trans("totalChart.number"),
+    value: "number",
+  },
+  {
+    label: trans("totalChart.string"),
+    value: "string",
+  },
+] as const;
+
+export const CurrencyOptions = [
+  {
+    label: "%",
+    value: "percent",
+    description: "Phần trăm",
+  },
+  {
+    label: "$",
+    value: "usd",
+    description: "Đô la Mỹ",
+  },
+  {
+    label: "€",
+    value: "eur",
+    description: "Euro",
+  },
+  {
+    label: "¥",
+    value: "jpy",
+    description: "Yên Nhật",
+  },
+  {
+    label: "£",
+    value: "gbp",
+    description: "Bảng Anh",
+  },
+  {
+    label: "₩",
+    value: "krw",
+    description: "Won Hàn Quốc",
+  },
+  {
+    label: "VNĐ",
+    value: "vnd",
+    description: "Đồng Việt Nam",
+  },
+  {
+    label: "฿",
+    value: "thb",
+    description: "Baht Thái",
+  },
+] as const;
+
+export const UnitOptions = [
+  {
+    label: "cái",
+    value: "unit",
+    description: "Đơn vị",
+  },
+  {
+    label: "văn bản",
+    value: "document",
+    description: "Đếm",
+  },
+  {
+    label: "từ",
+    value: "text",
+    description: "Đếm",
+  },
+  {
+    label: "số",
+    value: "number",
+    description: "Đếm",
+  },
+  {
+    label: "kg",
+    value: "kg",
+    description: "Kilogram",
+  },
+  {
+    label: "g",
+    value: "gram",
+    description: "Gram",
+  },
+  {
+    label: "l",
+    value: "liter",
+    description: "Lít",
+  },
+  {
+    label: "m",
+    value: "meter",
+    description: "Mét",
+  },
+  {
+    label: "cm",
+    value: "centimeter",
+    description: "Centimet",
+  },
+  {
+    label: "m²",
+    value: "square_meter",
+    description: "Mét vuông",
+  },
+  {
+    label: "m³",
+    value: "cubic_meter",
+    description: "Mét khối",
+  },
+] as const;
+
+export const TimeOptions = [
+  {
+    label: "giờ",
+    value: "hour",
+    description: "Giờ",
+  },
+  {
+    label: "ngày",
+    value: "day",
+    description: "Ngày",
+  },
+  {
+    label: "tuần",
+    value: "week",
+    description: "Tuần",
+  },
+  {
+    label: "tháng",
+    value: "month",
+    description: "Tháng",
+  },
+  {
+    label: "năm",
+    value: "year",
+    description: "Năm",
+  },
+] as const;
+
+export const AllUnitOptions = [
+  ...CurrencyOptions,
+  ...UnitOptions,
+  ...TimeOptions,
+  {
+    label: "Mặc định",
+    value: "",
+    description: "Mặc định",
+  },
+] as const;
+
+export type UnitOptionValue = (typeof AllUnitOptions)[number]["value"];
+
+export const formatValue = (
+  value: React.ReactNode,
+  option: UnitOptionValue,
+  unit?: React.ReactNode
+): React.ReactNode => {
+  const formatters: Record<
+    UnitOptionValue,
+    (val: React.ReactNode, unit?: React.ReactNode) => React.ReactNode
+  > = {
+    "": (val, unit) => (
+      <span className="statistic">
+        <span className="total">{val}</span>{" "}
+        <span className="unit">{unit}</span>
+      </span>
+    ),
+    percent: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span>
+        <span className="unit">%</span>
+      </span>
+    ),
+    usd: (val) => (
+      <span className="statistic">
+        <span className="unit">$</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    eur: (val) => (
+      <span className="statistic">
+        <span className="unit">€</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    jpy: (val) => (
+      <span className="statistic">
+        <span className="unit">¥</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    gbp: (val) => (
+      <span className="statistic">
+        <span className="unit">£</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    krw: (val) => (
+      <span className="statistic">
+        <span className="unit">₩</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    vnd: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">VNĐ</span>
+      </span>
+    ),
+    thb: (val) => (
+      <span className="statistic">
+        <span className="unit">฿</span>
+        <span className="total">{val}</span>
+      </span>
+    ),
+    unit: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">cái</span>
+      </span>
+    ),
+    document: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span>{" "}
+        <span className="unit">văn bản</span>
+      </span>
+    ),
+    text: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">từ</span>
+      </span>
+    ),
+    number: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">số</span>
+      </span>
+    ),
+    kg: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">kg</span>
+      </span>
+    ),
+    gram: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">g</span>
+      </span>
+    ),
+    liter: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">l</span>
+      </span>
+    ),
+    meter: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">m</span>
+      </span>
+    ),
+    centimeter: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">cm</span>
+      </span>
+    ),
+    square_meter: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">m²</span>
+      </span>
+    ),
+    cubic_meter: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">m³</span>
+      </span>
+    ),
+    hour: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">giờ</span>
+      </span>
+    ),
+    day: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">ngày</span>
+      </span>
+    ),
+    week: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">tuần</span>
+      </span>
+    ),
+    month: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">tháng</span>
+      </span>
+    ),
+    year: (val) => (
+      <span className="statistic">
+        <span className="total">{val}</span> <span className="unit">năm</span>
+      </span>
+    ),
+  };
+
+  return formatters[option]?.(value, unit);
+};
+
+export const CompStyles = [
+  {
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",
+  },
+  {
+    name: "shadowColor",
+    label: trans("style.shadowColor"),
+    shadowColor: "shadowColor",
+  },
+  { name: "textSize", label: trans("style.fontSize"), fontSize: "fontSize" },
+  {
+    name: "borderColor",
+    label: trans("style.borderColor"),
+    borderColor: "borderColor",
+  },
+  {
+    name: "radius",
+    label: trans("style.borderStyle"),
+    borderStyle: "borderStyle",
+  },
+  {
+    name: "radius",
+    label: trans("style.borderRadius"),
+    borderRadius: "borderRadius",
+  },
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
+] as const;
+
+export const TotalChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      data: withDefault(BoolControl, true),
+      dataStyle: styleControl(EchartDefaultChartStyle, "dataStyle"),
+      dataType: dropdownControl(DataTypeOptions, "number"),
+      decreaseColor: ColorControl,
+      decreaseIcon: IconControl,
+      icon: IconControl,
+      iconStyle: styleControl(CompStyles, "iconStyle"),
+      increaseColor: ColorControl,
+      increaseIcon: IconControl,
+      precision: withDefault(NumberControl, 0),
+      precisionSub: withDefault(NumberControl, 1),
+      precisionTrend: withDefault(NumberControl, 2),
+      showIcon: withDefault(BoolControl, true),
+      showSubData: withDefault(BoolControl, true),
+      showTitle: withDefault(BoolControl, true),
+      showTrendIndicator: withDefault(BoolControl, true),
+      showTrendLine: withDefault(BoolControl, true),
+      subDecreaseColor: ColorControl,
+      subDecreaseIcon: IconControl,
+      subIncreaseColor: ColorControl,
+      subIncreaseIcon: IconControl,
+      subStyle: styleControl(CompStyles, "subStyle"),
+      title: StringControl,
+      titleStyle: styleControl(CompStyles, "subStyle"),
+      trendStyle: styleControl(CompStyles, "trendStyle"),
+      unit: dropdownControl(AllUnitOptions, ""),
+      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) => {
+      const config: LineSeriesOption & {
+        polarData: any;
+        showTrendline: boolean;
+        trendlines: any;
+      } = {
+        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 {
+        type: "total",
+        dataStyle: props.dataStyle,
+        dataType: props.dataType,
+        decreaseColor: props.decreaseColor,
+        decreaseIcon: props.decreaseIcon,
+        icon: props.icon,
+        iconStyle: props.iconStyle,
+        increaseColor: props.increaseColor,
+        increaseIcon: props.increaseIcon,
+        precision: props.precision,
+        precisionSub: props.precisionSub,
+        precisionTrend: props.precisionTrend,
+        showIcon: props.showIcon,
+        showSubData: props.showSubData,
+        showTitle: props.showTitle,
+        showTrendIndicator: props.showTrendIndicator,
+        showTrendLine: props.showTrendLine,
+        subDecreaseColor: props.subDecreaseColor,
+        subDecreaseIcon: props.subDecreaseIcon,
+        subIncreaseColor: props.subIncreaseColor,
+        subIncreaseIcon: props.subIncreaseIcon,
+        subStyle: props.subStyle,
+        title: props.title,
+        titleStyle: props.titleStyle,
+        trendStyle: props.trendStyle,
+        unit: props.unit,
+        ...config,
+      };
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.dataType.propertyView({
+          label: trans("totalChart.dataType"),
+        })}
+        {children.unit.propertyView({
+          label: trans("totalChart.unit"),
+          placeholder: "%",
+        })}
+        {children.precision.propertyView({
+          label: trans("totalChart.precision"),
+        })}
+        {children.dataStyle?.getPropertyView()}
+        <Flex vertical gap={5}>
+          <div className="sub-title">{trans("totalChart.title")}</div>
+          {children.showTitle.propertyView({
+            label: trans("totalChart.showTitle"),
+          })}
+          {children.showTitle.getView() && (
+            <>
+              {children.title?.propertyView({
+                label: trans("totalChart.title"),
+              })}
+              {children.titleStyle?.getPropertyView()}
+            </>
+          )}
+        </Flex>
+        <Flex gap={5} vertical>
+          <div className="sub-title">{trans("totalChart.icon")}</div>
+          {children.showIcon.propertyView({
+            label: trans("totalChart.showIcon"),
+          })}
+          {children.showIcon.getView() && (
+            <>
+              {children.icon.propertyView({
+                label: "Icon",
+              })}
+              {children.iconStyle?.getPropertyView()}
+            </>
+          )}
+        </Flex>
+        <Flex gap={5} vertical>
+          <div className="sub-title">{trans("totalChart.trendIndicator")}</div>
+          {children.showTrendIndicator.propertyView({
+            label: trans("totalChart.showTrendIndicator"),
+          })}
+          {children.showTrendIndicator.getView() && (
+            <>
+              {children.increaseColor.propertyView({
+                label: trans("totalChart.increaseColor"),
+              })}
+              {children.increaseIcon.propertyView({
+                label: trans("totalChart.increaseIcon"),
+              })}
+              {children.decreaseColor.propertyView({
+                label: trans("totalChart.decreaseColor"),
+              })}
+              {children.decreaseIcon.propertyView({
+                label: trans("totalChart.decreaseIcon"),
+              })}
+              {children.precisionTrend.propertyView({
+                label: trans("totalChart.precision"),
+              })}
+            </>
+          )}
+        </Flex>
+        <Flex vertical gap={5}>
+          <div className="sub-title">{trans("totalChart.subData")}</div>
+          {children.showSubData.propertyView({
+            label: trans("totalChart.showSubData"),
+          })}
+          {children.showSubData.getView() && (
+            <>
+              <>
+                {children.subIncreaseColor.propertyView({
+                  label: trans("totalChart.increaseColor"),
+                })}
+                {children.subIncreaseIcon.propertyView({
+                  label: trans("totalChart.increaseIcon"),
+                })}
+                {children.subDecreaseColor.propertyView({
+                  label: trans("totalChart.decreaseColor"),
+                })}
+                {children.subDecreaseIcon.propertyView({
+                  label: trans("totalChart.decreaseIcon"),
+                })}
+                {children.precisionSub.propertyView({
+                  label: trans("totalChart.precision"),
+                })}
+              </>
+            </>
+          )}
+        </Flex>
+        <Flex gap={5} vertical>
+          <div className="sub-title">{trans("chart.trendLine")}</div>
+          {children.showTrendLine.propertyView({
+            label: trans("chart.trendLine"),
+          })}
+
+          {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()}
+        </Flex>
+      </>
+    ))
+    .build();
+})();

package/src/configs/treeChartConfig.tsx

@@ -0,0 +1,31 @@
+import { trans } from "@/i18n/comps";
+import { TreeSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const TreeChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (_): TreeSeriesOption => {
+      const config: TreeSeriesOption = {
+        type: "tree",
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("treeChart.treeType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();