lowcoder-map-component 0.1.1

package/src/configs/cartesianAxisConfig.tsx

@@ -0,0 +1,314 @@
+import { XAxisDirectionType } from "@/controls";
+import { trans } from "@/i18n/comps";
+import { ChartSize } from "@/utils/echarts.util";
+import dayjs from "dayjs";
+import { XAXisComponentOption, YAXisComponentOption } from "echarts";
+import {
+  JSONValue,
+  MultiCompBuilder,
+  StringControl,
+  isNumeric,
+  withContext,
+} from "lowcoder-sdk";
+
+export type EchartsAxisType = "category" | "value" | "time" | "log";
+
+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 timeFormat = [
+  "YYYY-MM-DD",
+  "DD-MM-YYYY",
+  "MM-DD-YYYY",
+  "YYYY/MM/DD",
+  "DD/MM/YYYY",
+  "MM/DD/YYYY",
+  "YYYY-MM",
+  "MM-YYYY",
+  "YYYY/MM",
+  "MM/YYYY",
+  "YYYY",
+];
+
+function isDateLike(value: string) {
+  return timeFormat.some((fmt) => dayjs(value, fmt, true).isValid());
+}
+
+export function calcXAxisType(
+  xAxisData: Array<JSONValue | undefined>
+): EchartsAxisType {
+  if (!xAxisData || xAxisData.length <= 0) {
+    return "category";
+  }
+
+  const validData = xAxisData.filter(Boolean);
+  if (validData.length === 0) {
+    return "category";
+  }
+
+  const sampleSize = Math.min(10, validData.length);
+  const samples = validData.slice(0, sampleSize);
+
+  let numericCount = 0;
+  let timeCount = 0;
+  let categoryCount = 0;
+
+  for (const sample of samples) {
+    if (isNumeric(sample)) {
+      numericCount++;
+      continue;
+    }
+
+    if (typeof sample === "string") {
+      const trimmed = sample.trim();
+
+      if (/^\d{2}-\d{4}$/.test(trimmed)) {
+        const [month, year] = trimmed.split("-");
+        const monthNum = parseInt(month, 10);
+        const yearNum = parseInt(year, 10);
+        if (
+          monthNum >= 1 &&
+          monthNum <= 12 &&
+          yearNum > 1900 &&
+          yearNum < 2100
+        ) {
+          timeCount++;
+          continue;
+        }
+      }
+
+      if (/^\d{2}-\d{2}-\d{4}$/.test(trimmed)) {
+        const [day, month, year] = trimmed.split("-");
+        const dayNum = parseInt(day, 10);
+        const monthNum = parseInt(month, 10);
+        const yearNum = parseInt(year, 10);
+        if (
+          dayNum >= 1 &&
+          dayNum <= 31 &&
+          monthNum >= 1 &&
+          monthNum <= 12 &&
+          yearNum > 1900 &&
+          yearNum < 2100
+        ) {
+          timeCount++;
+          continue;
+        }
+      }
+
+      if (isDateLike(trimmed)) {
+        timeCount++;
+        continue;
+      }
+    }
+
+    if (sample instanceof Date && !isNaN(sample.getTime())) {
+      timeCount++;
+      continue;
+    }
+
+    categoryCount++;
+  }
+
+  const total = samples.length;
+
+  // if (timeCount / total >= 0.8) {
+  //   return "time";
+  // }
+
+  if (numericCount / total >= 0.8) {
+    return "value";
+  }
+
+  return "category";
+}
+
+const dateInterval = {
+  year: 3600 * 24 * 1000 * 365,
+  month: 3600 * 24 * 1000 * 28,
+  day: 3600 * 24 * 1000,
+  hour: 3600 * 1000,
+};
+
+function calcTimeInterval(xAxisData: Array<JSONValue | undefined>) {
+  if (!xAxisData || xAxisData.length === 0) {
+    return dateInterval.month;
+  }
+
+  const validData = xAxisData.filter(Boolean);
+  if (validData.length === 0) {
+    return dateInterval.month;
+  }
+
+  const sampleSize = Math.min(10, validData.length);
+  const samples = validData.slice(0, sampleSize);
+
+  const intervals: number[] = [];
+
+  for (const data of samples) {
+    let dataStr = "";
+
+    if (data instanceof Date && !isNaN(data.getTime())) {
+      dataStr = data.toISOString();
+    } else {
+      dataStr = String(data).trim();
+    }
+
+    // Format: MM-YYYY
+    if (/^\d{2}-\d{4}$/.test(dataStr)) {
+      intervals.push(dateInterval.month);
+      continue;
+    }
+
+    // Format: DD-MM-YYYY DD/MM/YYYY
+    if (/^\d{2}[-/]\d{2}[-/]\d{4}$/.test(dataStr)) {
+      intervals.push(dateInterval.day);
+      continue;
+    }
+
+    // Format: YYYY-MM-DD  YYYY/MM/DD
+    if (/^\d{4}[-/]\d{2}[-/]\d{2}$/.test(dataStr)) {
+      intervals.push(dateInterval.day);
+      continue;
+    }
+
+    // Format: YYYY-MM YYYY/MM
+    if (/^\d{4}[-/]\d{2}$/.test(dataStr)) {
+      intervals.push(dateInterval.month);
+      continue;
+    }
+
+    // Format: YYYY
+    if (/^\d{4}$/.test(dataStr)) {
+      intervals.push(dateInterval.year);
+      continue;
+    }
+
+    // Format ISO
+    if (/\d{4}-\d{2}-\d{2}[T\s]\d{2}:\d{2}/.test(dataStr)) {
+      if (/\d{2}:\d{2}:\d{2}/.test(dataStr)) {
+        intervals.push(dateInterval.hour || dateInterval.day);
+      } else {
+        intervals.push(dateInterval.day);
+      }
+      continue;
+    }
+
+    // Format: DD/MM/YYYY HH:mm  DD-MM-YYYY HH:mm
+    if (/^\d{2}[-/]\d{2}[-/]\d{4}\s+\d{2}:\d{2}/.test(dataStr)) {
+      intervals.push(dateInterval.hour || dateInterval.day);
+      continue;
+    }
+
+    const dataLen = dataStr.length;
+    if (dataLen === 4) {
+      intervals.push(dateInterval.year);
+    } else if (dataLen >= 6 && dataLen <= 8) {
+      intervals.push(dateInterval.month);
+    } else if (dataLen >= 10 && dataLen <= 19) {
+      intervals.push(dateInterval.day);
+    } else if (dataLen > 19) {
+      intervals.push(dateInterval.hour || dateInterval.day);
+    } else {
+      intervals.push(dateInterval.month);
+    }
+  }
+
+  return intervals.length > 0 ? Math.min(...intervals) : dateInterval.month;
+}
+
+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);
+    const maxDataWidth =
+      xAxisDataLenList.length > 0 ? Math.max(...xAxisDataLenList) : 0;
+    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.minInterval = calcTimeInterval(xAxisData);
+  }
+  if (xAxisDirection === "vertical") {
+    resYConfig.nameLocation = "middle";
+    resYConfig.nameGap = 25;
+  }
+
+  return xAxisDirection === "horizontal"
+    ? {
+        xConfig: resXConfig,
+        yConfig: resYConfig,
+      }
+    : {
+        xConfig: resYConfig,
+        yConfig: resXConfig,
+      };
+}

package/src/configs/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`;
+export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
+export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

package/src/configs/echartConfig.tsx

@@ -0,0 +1,260 @@
+import * as echarts from "echarts";
+import { PieConfigViewType } from "@/configs/pieChartConfig";
+import { trans } from "@/i18n/comps";
+import { ChartSize, EChartPropsType, isAxisChart } from "../utils/echarts.util";
+
+export function getAxisSeriesConfig(props: EChartPropsType, series: any) {
+  const horizontalX = props.xAxisDirection === "horizontal";
+  const encodeX = horizontalX ? props.xAxisKey : series.getView().columnName;
+  const encodeY = horizontalX ? series.getView().columnName : props.xAxisKey;
+
+  const markLineData = series.getView().markLines.map((line: any) => ({
+    type: line.getView().type,
+  }));
+
+  const markAreaData = series.getView().markAreas.map((area: any) => [
+    {
+      name: area.getView().name,
+      [horizontalX ? "xAxis" : "yAxis"]: area.getView().from,
+      label: { position: horizontalX ? "top" : "right" },
+    },
+    { [horizontalX ? "xAxis" : "yAxis"]: area.getView().to },
+  ]);
+
+  return {
+    name: series.getView().seriesName,
+    columnName: series.getView().columnName,
+    selectedMode: "single",
+    select: { itemStyle: { borderColor: "#000" } },
+    step: series.getView().step,
+    encode: { x: encodeX, y: encodeY },
+    markLine: { data: markLineData },
+    markArea: {
+      itemStyle: { color: "rgba(255, 173, 177, 0.4)" },
+      data: markAreaData,
+    },
+  };
+}
+
+const pieRadiusConfig = [65, 35, 20];
+
+export function getPieRadiusAndCenter(
+  seriesLength: number,
+  pieIndex: number,
+  _: PieConfigViewType
+) {
+  const columnPieNum = Math.min(seriesLength, pieRadiusConfig.length);
+  const radiusNumber = pieRadiusConfig[columnPieNum - 1];
+  const radius = 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;
+}
+
+export function getPieSeriesConfig(
+  props: EChartPropsType,
+  series: any,
+  index: number,
+  seriesLength: number
+) {
+  const radiusAndCenter = getPieRadiusAndCenter(
+    seriesLength,
+    index,
+    props.chartConfig
+  );
+
+  return {
+    columnName: series.getView().columnName,
+    radius: radiusAndCenter.radius,
+    center: radiusAndCenter.center,
+    name: series.getView().seriesName,
+    selectedMode: "single",
+    encode: {
+      itemName: props.xAxisKey,
+      value: series.getView().columnName,
+    },
+  };
+}
+
+export function getSeriesConfig(props: EChartPropsType) {
+  const visibleSeries =
+    props.chartConfig.subtype === "waterfall"
+      ? [props.series[0], props.series[0]]
+      : props.series.filter((s: any) => !s.getView().hide);
+
+  const isAxis = isAxisChart(
+    props.chartConfig.type,
+    props.chartConfig.polarData?.polar
+  );
+
+  return visibleSeries.map((series: any, index: number) => {
+    const seriesView = series.getView();
+    const base = isAxis
+      ? getAxisSeriesConfig(props, series)
+      : getPieSeriesConfig(props, series, index, visibleSeries.length);
+
+    const numericCfg = (props.chartConfig as any)[index];
+
+    const seriesViewConfig = {
+      type:
+        (seriesView.chartType === "linev2" ? "line" : seriesView.chartType) ||
+        (props.chartConfig.type === "linev2" ? "line" : props.chartConfig.type),
+      name: seriesView.seriesName,
+      areaStyle: props.areaColor
+        ? {
+          opacity: 0.5,
+          color: props.areaColor,
+        }
+        : seriesView.areaStyle || undefined,
+      columnName: seriesView.columnName || undefined,
+      markLines: seriesView.markLines || undefined,
+      markAreas: seriesView.markAreas || undefined,
+      markPoint: props.showMaxPoint
+        ? {
+          data: [{ type: "max", name: "Max" }],
+          label: { show: true, position: "top" },
+        }
+        : undefined,
+      hide: seriesView.hide || undefined,
+      dataIndex: seriesView.dataIndex || undefined,
+      step: seriesView.step || undefined,
+      itemStyle: {
+        color: seriesView.color,
+        ...(seriesView.itemStyle || {}),
+      },
+      stack: seriesView.stack || undefined,
+      barWidth: seriesView.barWidth || undefined,
+      smooth: seriesView.smooth || undefined,
+    };
+
+    const mergedConfig = {
+      ...base,
+      ...(numericCfg ?? props.chartConfig),
+    };
+
+    return {
+      ...mergedConfig,
+      ...seriesViewConfig,
+    };
+  });
+}
+
+export function getPolarConfig(props: EChartPropsType) {
+  const { polarData } = props.chartConfig;
+
+  const isTangent = polarData.polarIsTangent;
+  const hasLabels = polarData.labelData.length > 0;
+
+  return {
+    polar: {
+      radius: [polarData.polarRadiusStart, polarData.polarRadiusEnd],
+    },
+    radiusAxis: {
+      type: isTangent ? "category" : undefined,
+      data: isTangent && hasLabels ? polarData.labelData : undefined,
+      max: isTangent ? undefined : polarData.radiusAxisMax || undefined,
+    },
+    angleAxis: {
+      type: isTangent ? undefined : "category",
+      data: !isTangent && hasLabels ? polarData.labelData : undefined,
+      max: isTangent ? polarData.radiusAxisMax || undefined : undefined,
+      startAngle: polarData.polarStartAngle,
+      endAngle: polarData.polarEndAngle,
+    },
+  };
+}
+
+export function calculateChartRealSize(chartSize: ChartSize, grid: any) {
+  const rightSize =
+    typeof grid.right === "number"
+      ? grid.right
+      : (chartSize.w * parseFloat(grid.right)) / 100.0;
+
+  return {
+    w: chartSize.w - grid.left - rightSize,
+    h: chartSize.h - grid.top - grid.bottom,
+    right: rightSize,
+  };
+}
+
+export function getLegendConfig(seriesConfig: any[]) {
+  // Đảm bảo legend hiển thị đủ tất cả series
+  const legendData = seriesConfig.map((s) => s.name).filter(Boolean);
+
+  return {
+    legend: {
+      data: legendData,
+      type: "scroll", // Nếu nhiều series thì dùng scroll
+      orient: "vertical",
+      right: 10,
+      top: "center",
+    },
+  };
+}
+
+export function getMixedChartAxisConfig(seriesConfig: any[]) {
+  const isMixed = seriesConfig.some((s) => s.type !== seriesConfig[0].type);
+
+  if (!isMixed) return {};
+
+  return {
+    yAxis: [
+      { type: "value", position: "left" },
+      { type: "value", position: "right" },
+    ],
+  };
+}
+
+export const MarkLineTypeOptions = [
+  {
+    label: trans("chart.max"),
+    value: "max",
+  },
+  {
+    label: trans("chart.average"),
+    value: "average",
+  },
+  {
+    label: trans("chart.min"),
+    value: "min",
+  },
+] as const;
+
+export const StepOptions = [
+  {
+    label: trans("chart.none"),
+    value: "",
+  },
+  {
+    label: trans("chart.start"),
+    value: "start",
+  },
+  {
+    label: trans("chart.middle"),
+    value: "middle",
+  },
+  {
+    label: trans("chart.end"),
+    value: "end",
+  },
+] as const;
+
+export const eChartConfigOmitChildren = [
+  "hidden",
+  "selectedPoints",
+  "onUIEvent",
+  "mapInstance",
+] as const;

package/src/configs/echartsLabelConfig.tsx

@@ -0,0 +1,47 @@
+import { trans } from "@/i18n/comps";
+import { LegendComponentOption } from "echarts";
+import {
+  AlignClose,
+  AlignLeft,
+  AlignRight,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+export const PositionLabelOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+] as const;
+export const EchartsLabelConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(PositionLabelOptions, "inside"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "inside",
+        type: "scroll",
+      };
+      config.top = props.position;
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.labelPosition"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/echartsLegendConfig.tsx

@@ -0,0 +1,29 @@
+import { trans } from "@/i18n/comps";
+import { LegendComponentOption } from "echarts";
+import { dropdownControl, MultiCompBuilder } from "lowcoder-sdk";
+import { legendPositionOptions } from "./legendConfig";
+
+export const EchartsLegendConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(legendPositionOptions, "bottom"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "bottom",
+        type: "scroll",
+      };
+      config.top = props.position;
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.legendPosition"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/echartsTitleConfig.tsx

@@ -0,0 +1,49 @@
+import { trans } from "@/i18n/comps";
+import { LegendComponentOption } from "echarts";
+import {
+  AlignClose,
+  AlignLeft,
+  AlignRight,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+
+export const PositionTitleHorizontalOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+] as const;
+
+export const EchartsTitleConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(PositionTitleHorizontalOptions, "center"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "center",
+        type: "scroll",
+      };
+      config.top = props.position;
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.titlePosition"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();