lowcoder-map-component 0.1.1

package/src/utils/getDataKey.util.ts

@@ -0,0 +1,115 @@
+import { JSONObject } from "lowcoder-sdk";
+type DataTypeOption = "number" | "string" | "boolean" | "object" | "array";
+
+type DataTypeResult = {
+  all: string[];
+  number?: string[];
+  string?: string[];
+  boolean?: string[];
+  object?: string[];
+  array?: string[];
+};
+export function getDataKeys(args: {
+  data: Array<JSONObject>;
+  dataType?: DataTypeOption | DataTypeOption[];
+  targetKey?: string;
+  fallBack?: (keys: Array<string> | DataTypeResult) => void;
+}): Array<string>;
+
+export function getDataKeys(args: {
+  data: Array<JSONObject>;
+  dataType: DataTypeOption[];
+  targetKey?: string;
+  fallBack?: (keys: Array<string> | DataTypeResult) => void;
+}): DataTypeResult;
+
+// Implementation
+export function getDataKeys({
+  data,
+  dataType,
+  targetKey,
+  fallBack,
+}: {
+  data: Array<JSONObject>;
+  dataType?: DataTypeOption | DataTypeOption[];
+  targetKey?: string;
+  fallBack?: (keys: Array<string> | DataTypeResult) => void;
+}): Array<string> | DataTypeResult {
+  if (!data?.length) return [];
+
+  let sourceData = data;
+  if (targetKey) {
+    sourceData = data
+      .map((d) => d[targetKey])
+      .filter((item) => {
+        if (Array.isArray(item)) return true;
+        return item && typeof item === "object";
+      })
+      .flatMap((item) =>
+        Array.isArray(item) ? item : [item]
+      ) as Array<JSONObject>;
+
+    if (!sourceData.length) return [];
+  }
+
+  if (Array.isArray(dataType)) {
+    const result: DataTypeResult = { all: [] };
+    const allKeys = new Set<string>();
+
+    sourceData.slice(0, 50).forEach((d) => {
+      Object.keys(d).forEach((key) => {
+        allKeys.add(key);
+        dataType.forEach((type) => {
+          if (!result[type]) result[type] = [];
+
+          const hasMatchingType = sourceData.some((item) => {
+            const value = item[key];
+            if (type === "array") return Array.isArray(value);
+            if (type === "object")
+              return (
+                typeof value === "object" &&
+                !Array.isArray(value) &&
+                value !== null
+              );
+            return typeof value === type;
+          });
+
+          if (hasMatchingType && !result[type]!.includes(key)) {
+            result[type]!.push(key);
+          }
+        });
+      });
+    });
+
+    result.all = Array.from(allKeys);
+    fallBack?.(result);
+    return result;
+  }
+
+  const dataKeys: Array<string> = [];
+  sourceData.slice(0, 50).forEach((d) => {
+    Object.keys(d).forEach((key) => {
+      if (!dataKeys.includes(key)) {
+        if (dataType) {
+          const hasMatchingType = sourceData.some((item) => {
+            const value = item[key];
+            if (dataType === "array") return Array.isArray(value);
+            if (dataType === "object")
+              return (
+                typeof value === "object" &&
+                !Array.isArray(value) &&
+                value !== null
+              );
+            return typeof value === dataType;
+          });
+          if (hasMatchingType) dataKeys.push(key);
+        } else {
+          dataKeys.push(key);
+        }
+      }
+    });
+  });
+
+  fallBack?.(dataKeys);
+  return dataKeys;
+}

package/src/utils/getLinearRegression.util.ts

@@ -0,0 +1,46 @@
+export function splitByKey<T extends Record<string, any>>(
+  data: T[]
+): { x: any[]; y: any[] } {
+  if (data.length === 0) return { x: [], y: [] };
+
+  const keys = Object.keys(data[0]);
+  if (keys.length < 2) throw new Error("Require 2 object");
+
+  const [xKey, yKey] = keys;
+
+  return {
+    x: data.map((item) => item[xKey]),
+    y: data.map((item) => item[yKey]),
+  };
+}
+
+export function getLinearRegression(
+  xData: number[],
+  yData: number[]
+): number[] {
+  const n = xData?.length;
+  let sumX = 0,
+    sumY = 0,
+    sumXY = 0,
+    sumXX = 0;
+
+  for (let i = 0; i < n; i++) {
+    sumX += xData[i];
+    sumY += yData[i];
+    sumXY += xData[i] * yData[i];
+    sumXX += xData[i] * xData[i];
+  }
+
+  const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
+  const intercept = (sumY - slope * sumX) / n;
+
+  return xData.map((x) => slope * x + intercept);
+}
+
+export function getLinearRegressionByData<T extends Record<string, any>>(
+  data: T[]
+): number[] {
+  const { x, y } = splitByKey(data);
+
+  return getLinearRegression(x, y);
+}

package/src/utils/googleMaps.util.ts

@@ -0,0 +1,28 @@
+import { googleMapsApiUrl } from "@/configs/chartUrls";
+
+export function loadGoogleMapsScript(apiKey: string) {
+  const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+  const scripts = document.getElementsByTagName("script");
+
+  const existingScript = Array.from(scripts).find(
+    (script) =>
+      script.src === mapsUrl || script.src.startsWith(googleMapsApiUrl)
+  );
+
+  if (existingScript) {
+    if (existingScript.src !== mapsUrl) {
+      existingScript.remove();
+    } else {
+      return existingScript;
+    }
+  }
+
+  const script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = mapsUrl;
+  script.async = true;
+  script.defer = true;
+  document.body.appendChild(script);
+
+  return script;
+}

package/src/utils/isEmpty.util.ts

@@ -0,0 +1,10 @@
+export const isEmpty = (value: any): boolean => {
+  if (value == null) return true;
+  if (typeof value === "string" || Array.isArray(value)) {
+    return value.length === 0;
+  }
+  if (typeof value === "object") {
+    return Object.keys(value).length === 0;
+  }
+  return false;
+};

package/src/utils/move.util.ts

@@ -0,0 +1,6 @@
+export function move<T>(arr: T[], fromIndex: number, toIndex: number): T[] {
+  const newArr = [...arr];
+  const item = newArr.splice(fromIndex, 1)[0];
+  newArr.splice(toIndex, 0, item);
+  return newArr;
+}

package/src/utils/selection.util.ts

@@ -0,0 +1,73 @@
+export interface Dataset {
+  source: Array<Record<string, any>>;
+}
+
+export interface Series {
+  name: string;
+  encode: {
+    x?: string;
+    y?: string;
+    itemName?: string;
+    value?: string;
+  };
+}
+
+export interface Option {
+  series: Series[];
+  dataset: Dataset[];
+}
+
+export interface SelectInfo {
+  seriesIndex: number;
+  dataIndex: number[];
+}
+
+export interface Param {
+  selected: SelectInfo[];
+}
+
+export interface SelectedPoint {
+  seriesName: string;
+  itemName?: string;
+  value?: any;
+  x?: any;
+  y?: any;
+}
+
+export function getSelectedPoints(
+  param: Param,
+  option: Option
+): SelectedPoint[] {
+  // Check if required properties exist
+  if (
+    !option.series ||
+    !Array.isArray(option.dataset) ||
+    !option.dataset[0]?.source
+  ) {
+    return [];
+  }
+
+  return param.selected.flatMap((selectInfo: SelectInfo) => {
+    const seriesInfo = option.series[selectInfo.seriesIndex];
+    if (!seriesInfo?.encode) return [];
+
+    return selectInfo.dataIndex.map((index: number) => {
+      const dataSource = option.dataset[0].source;
+      const commonResult = { seriesName: seriesInfo.name };
+
+      if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+        return {
+          ...commonResult,
+          itemName: dataSource[index][seriesInfo.encode.itemName],
+          value: dataSource[index][seriesInfo.encode.value],
+        };
+      } else {
+        return {
+          ...commonResult,
+          x: dataSource[index][seriesInfo.encode.x!],
+          y: dataSource[index][seriesInfo.encode.y!],
+        };
+      }
+    });
+  });
+}

package/src/utils/style.util.ts

@@ -0,0 +1,315 @@
+interface ColorStop {
+  offset: number;
+  color: string;
+}
+
+interface RadialGradient {
+  type: "radial";
+  x: number;
+  y: number;
+  r: number;
+  colorStops: ColorStop[];
+}
+
+interface LinearGradient {
+  type: "linear";
+  x: number;
+  y: number;
+  x2: number;
+  y2: number;
+  colorStops: ColorStop[];
+}
+
+type Gradient = RadialGradient | LinearGradient;
+
+interface StyleContainer {
+  fontFamily?: string;
+  textSize?: number;
+  textWeight?: string;
+  textColor?: string;
+  fontStyle?: string;
+  shadowColor?: string;
+  boxShadow?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  borderStyle?: string;
+  borderRadius?: number;
+  backgroundColor?: string;
+  detailSize?: string;
+  padding?: string;
+}
+
+interface ThemeContainer {
+  fontFamily?: string;
+  textSize?: number;
+  fontWeight?: string;
+  fontColor?: string;
+  fontStyle?: string;
+  shadowColor?: string;
+  boxShadow?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  borderType?: string;
+  borderRadius?: number;
+  backgroundColor?: string;
+  detailSize?: string;
+  padding?: string;
+}
+
+interface StyleWrapperResult {
+  fontFamily: string;
+  textSize: number;
+  fontWeight?: string;
+  color: string;
+  fontStyle?: string;
+  textShadowColor?: string;
+  textShadowBlur?: number;
+  textShadowOffsetX?: number;
+  textShadowOffsetY?: number;
+  borderColor: string;
+  borderWidth: number;
+  borderType?: string;
+  borderRadius: number;
+  backgroundColor: string | Gradient;
+  width?: number;
+  height?: number;
+  padding: number[];
+}
+
+interface ChartStyleWrapperResult {
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  borderColor: string;
+  borderWidth: number;
+  borderType?: string;
+  borderRadius: number;
+}
+
+/**
+ * Parses a radial-gradient CSS string into an ECharts-compatible object.
+ */
+function parseRadialGradient(gradient: string): RadialGradient {
+  const radialGradientRegex = /radial-gradient\(([^,]+),\s*(.+)\)/;
+  const match = gradient.match(radialGradientRegex);
+
+  if (!match) {
+    throw new Error("Invalid radial-gradient format");
+  }
+
+  const shape = match[1].trim();
+  const colorStops = parseColorStops(match[2]);
+
+  return {
+    type: "radial",
+    x: 0.5,
+    y: 0.5,
+    r: 0.8,
+    colorStops,
+  };
+}
+
+/**
+ * Parses color stops from a gradient string into an array of objects.
+ */
+function parseColorStops(colorStopsString: string): ColorStop[] {
+  const colorStopRegex =
+    /((?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+)\s+([\d.]+%)/g;
+  const colorStops: ColorStop[] = [];
+  let match: RegExpExecArray | null;
+
+  while (
+    (match = colorStopRegex.exec(colorStopsString.toLowerCase())) !== null
+  ) {
+    const color = match[1].trim().toLowerCase();
+    const offset = parseFloat(match[2]) / 100;
+    colorStops.push({ offset, color });
+  }
+
+  return colorStops;
+}
+
+/**
+ * Parses a linear-gradient CSS string into an ECharts-compatible object.
+ */
+function parseLinearGradient(gradient: string): LinearGradient {
+  const linearGradientRegex = /linear-gradient\((\d+deg),\s*(.+)\)/;
+  const match = gradient.match(linearGradientRegex);
+
+  if (!match) {
+    throw new Error("Invalid linear-gradient format");
+  }
+
+  const angle = parseFloat(match[1]);
+  const colorStops = parseColorStops(match[2]);
+
+  const x2 = Math.sin((angle * Math.PI) / 180);
+  const y = Math.cos((angle * Math.PI) / 180);
+
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2,
+    y2: y,
+    colorStops,
+  };
+}
+
+/**
+ * Parses background value (gradient or solid color) into ECharts-compatible format.
+ */
+function parseBackground(background: string): string | Gradient {
+  if (background.startsWith("linear-gradient")) {
+    return parseLinearGradient(background);
+  } else if (background.startsWith("radial-gradient")) {
+    return parseRadialGradient(background);
+  } else {
+    return background;
+  }
+}
+
+/**
+ * Wraps style properties with fallbacks to theme and default values.
+ */
+function styleWrapper(
+  styleContainer: StyleContainer | undefined,
+  themeContainer: ThemeContainer | undefined,
+  defaultFontSize: number = 18,
+  defaultFontColor: string = "#000000",
+  detailBorderWidth: number = 0,
+  defaultBackgroundColor: string = ""
+): StyleWrapperResult {
+  const parseSize = (sizeString?: string): number | undefined => {
+    if (!sizeString) return undefined;
+    const match = sizeString.match(/(\d+)px/);
+    return match ? parseInt(match[1], 10) : undefined;
+  };
+
+  const parseBoxShadow = (
+    boxShadow?: string
+  ): { blur?: number; offsetX?: number; offsetY?: number } => {
+    if (!boxShadow) return {};
+
+    const parts = boxShadow.split("px").filter((part) => part.trim() !== "");
+    return {
+      blur: parts[0] ? parseInt(parts[0], 10) : undefined,
+      offsetX: parts[1] ? parseInt(parts[1], 10) : undefined,
+      offsetY: parts[2] ? parseInt(parts[2], 10) : undefined,
+    };
+  };
+
+  const parsePadding = (padding?: string): number[] => {
+    if (!padding) return [0, 0, 0, 0];
+
+    const parts = padding
+      .split("px")
+      .map((part) => part.trim())
+      .filter((part) => part !== "")
+      .map((part) => parseInt(part, 10));
+
+    return parts.length === 0 ? [0, 0, 0, 0] : parts;
+  };
+
+  const boxShadowStyle = parseBoxShadow(styleContainer?.boxShadow);
+  const boxShadowTheme = parseBoxShadow(themeContainer?.boxShadow);
+
+  const backgroundColor =
+    styleContainer?.backgroundColor ||
+    themeContainer?.backgroundColor ||
+    defaultBackgroundColor;
+
+  return {
+    fontFamily:
+      styleContainer?.fontFamily ||
+      themeContainer?.fontFamily ||
+      "Arial, sans-serif",
+    textSize:
+      styleContainer?.textSize || themeContainer?.textSize || defaultFontSize,
+    fontWeight: styleContainer?.textWeight || themeContainer?.fontWeight,
+    color:
+      styleContainer?.textColor ||
+      themeContainer?.fontColor ||
+      defaultFontColor,
+    fontStyle: styleContainer?.fontStyle || themeContainer?.fontStyle,
+    textShadowColor: styleContainer?.shadowColor || themeContainer?.shadowColor,
+    textShadowBlur: boxShadowStyle.blur || boxShadowTheme.blur,
+    textShadowOffsetX: boxShadowStyle.offsetX || boxShadowTheme.offsetX,
+    textShadowOffsetY: boxShadowStyle.offsetY || boxShadowTheme.offsetY,
+    borderColor:
+      styleContainer?.borderColor || themeContainer?.borderColor || "inherit",
+    borderWidth:
+      styleContainer?.borderWidth ||
+      themeContainer?.borderWidth ||
+      detailBorderWidth,
+    borderType: styleContainer?.borderStyle || themeContainer?.borderType,
+    borderRadius: Number(
+      styleContainer?.borderRadius || themeContainer?.borderRadius || 0
+    ),
+    backgroundColor: backgroundColor.startsWith("gradient")
+      ? parseBackground(backgroundColor)
+      : backgroundColor,
+    width:
+      parseSize(styleContainer?.detailSize) ||
+      parseSize(themeContainer?.detailSize),
+    height:
+      parseSize(styleContainer?.detailSize) ||
+      parseSize(themeContainer?.detailSize),
+    padding:
+      parsePadding(styleContainer?.padding) ||
+      parsePadding(themeContainer?.padding),
+  };
+}
+
+/**
+ * Wraps chart-specific style properties.
+ */
+function chartStyleWrapper(
+  styleContainer: StyleContainer | undefined,
+  themeContainer: ThemeContainer | undefined,
+  detailBorderWidth: number = 0
+): ChartStyleWrapperResult {
+  const parseBoxShadow = (
+    boxShadow?: string
+  ): { blur?: number; offsetX?: number; offsetY?: number } => {
+    if (!boxShadow) return {};
+
+    const parts = boxShadow.split("px").filter((part) => part.trim() !== "");
+    return {
+      blur: parts[0] ? parseInt(parts[0], 10) : undefined,
+      offsetX: parts[1] ? parseInt(parts[1], 10) : undefined,
+      offsetY: parts[2] ? parseInt(parts[2], 10) : undefined,
+    };
+  };
+
+  const boxShadowStyle = parseBoxShadow(styleContainer?.boxShadow);
+  const boxShadowTheme = parseBoxShadow(themeContainer?.boxShadow);
+
+  return {
+    shadowColor: styleContainer?.shadowColor || themeContainer?.shadowColor,
+    shadowBlur: boxShadowStyle.blur || boxShadowTheme.blur,
+    shadowOffsetX: boxShadowStyle.offsetX || boxShadowTheme.offsetX,
+    shadowOffsetY: boxShadowStyle.offsetY || boxShadowTheme.offsetY,
+    borderColor:
+      styleContainer?.borderColor || themeContainer?.borderColor || "inherit",
+    borderWidth:
+      styleContainer?.borderWidth ||
+      themeContainer?.borderWidth ||
+      detailBorderWidth,
+    borderType: styleContainer?.borderStyle || themeContainer?.borderType,
+    borderRadius: Number(
+      styleContainer?.borderRadius || themeContainer?.borderRadius || 0
+    ),
+  };
+}
+
+export { chartStyleWrapper, parseBackground, styleWrapper };
+export type {
+  ChartStyleWrapperResult,
+  ColorStop,
+  Gradient,
+  StyleContainer,
+  StyleWrapperResult,
+  ThemeContainer,
+};