lowcoder-map-component 0.1.1

package/src/utils/time.util.ts

@@ -0,0 +1,221 @@
+import { timeFormat } from "@/configs/cartesianAxisConfig";
+import dayjs, { Dayjs } from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import { JSONObject } from "lowcoder-sdk";
+
+dayjs.extend(isBetween);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
+
+export interface TimeFilterParams {
+  timeColumn: string;
+  timeGranularity: string;
+  timeRange: string;
+  startTime?: string;
+  endTime?: string;
+  timeFormat?: string;
+}
+
+function groupDataByTimeGranularity(
+  data: JSONObject[],
+  timeColumn: string,
+  timeGranularity: string,
+  seriesColumns: string[],
+  timeFormat?: string
+): JSONObject[] {
+  if (!timeColumn || !timeGranularity) {
+    return data;
+  }
+
+  const groupedData: Record<string, JSONObject> = {};
+
+  data.forEach((item) => {
+    const rawValue = item[timeColumn];
+    if (!rawValue || typeof rawValue !== "string") return;
+
+    let timestamp = parseDateWithFormat(rawValue, timeFormat);
+
+    if (!timestamp || !timestamp.isValid()) {
+      timestamp = parseDateWithFormat(rawValue);
+    }
+
+    if (!timestamp || !timestamp.isValid()) {
+      console.warn("Invalid date:", rawValue);
+      return;
+    }
+
+    let groupKey: string | number;
+
+    switch (timeGranularity) {
+      case "second":
+        groupKey = timestamp.format("ss");
+        break;
+      case "minute":
+        groupKey = timestamp.format("mm:ss");
+        break;
+      case "hour":
+        groupKey = timestamp.format("HH:mm:ss");
+        break;
+      case "day":
+        groupKey = timestamp.format("DD");
+        break;
+      case "week":
+        groupKey = `W${timestamp.week()} ${timestamp.format("YYYY")}`;
+        break;
+      case "month":
+        groupKey = timestamp.format("MM-YYYY");
+        break;
+      case "quarter":
+        groupKey = timestamp.format("[Q]Q-YYYY");
+        break;
+      case "year":
+        groupKey = timestamp.format("YYYY");
+        break;
+      default:
+        groupKey = timestamp.format("DD-MM-YYYY");
+    }
+
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = {
+        [timeColumn]: groupKey,
+        ...seriesColumns.reduce((acc, col) => ({ ...acc, [col]: 0 }), {}),
+      };
+    }
+
+    seriesColumns.forEach((col) => {
+      if (item[col] !== undefined && item[col] !== null) {
+        const currentValue = Number(groupedData[groupKey][col]) || 0;
+        const newValue = currentValue + Number(item[col]);
+        groupedData[groupKey][col] = newValue;
+      }
+    });
+  });
+
+  const result = Object.values(groupedData).sort(
+    (a, b) =>
+      dayjs(a[timeColumn] as string).valueOf() -
+      dayjs(b[timeColumn] as string).valueOf()
+  );
+
+  return result;
+}
+
+export function parseDateWithFormat(
+  dateString: string,
+  format?: string
+): Dayjs | null {
+  if (!dateString) return null;
+
+  if (format) {
+    const parsed = dayjs(dateString, format, true);
+    if (parsed.isValid()) return parsed;
+  }
+
+  if (/^\d{2}-\d{4}$/.test(dateString)) {
+    const [month, year] = dateString.split("-");
+    return dayjs(`${year}-${month.padStart(2, "0")}-01`);
+  }
+
+  for (const fmt of timeFormat) {
+    const parsed = dayjs(dateString, fmt, true);
+    if (parsed.isValid()) return parsed;
+  }
+
+  return null;
+}
+
+function filterDataByTimeRange(
+  data: JSONObject[],
+  params: TimeFilterParams
+): JSONObject[] {
+  const { timeColumn, timeRange, startTime, endTime, timeFormat } = params;
+
+  if (!timeColumn || timeRange === "noFilter") {
+    return data;
+  }
+
+  const now = dayjs();
+  let startDate: Dayjs;
+  let endDate: Dayjs = now;
+
+  switch (timeRange) {
+    case "lastDay":
+      startDate = now.subtract(1, "day");
+      break;
+    case "lastWeek":
+      startDate = now.subtract(1, "week");
+      break;
+    case "lastMonth":
+      startDate = now.subtract(1, "month");
+      break;
+    case "lastQuarter":
+      startDate = now.subtract(1, "quarter");
+      break;
+    case "lastYear":
+      startDate = now.subtract(1, "year");
+      break;
+    case "currentDay":
+      startDate = now.startOf("day");
+      break;
+    case "custom":
+      startDate = startTime
+        ? parseDateWithFormat(startTime, timeFormat) || now.subtract(1, "day")
+        : now.subtract(1, "day");
+      if (endTime) {
+        endDate = parseDateWithFormat(endTime, timeFormat) || now;
+      }
+
+      break;
+    default:
+      return data;
+  }
+
+  return data.filter((item) => {
+    const t = dayjs(item[timeColumn] as string);
+    return t.isValid() && t.isBetween(startDate, endDate, null, "[]");
+  });
+}
+
+export function validateAndParseTime(
+  timeString: string,
+  format: string = "DD-MM-YYYY HH:mm"
+): Dayjs | null {
+  if (!timeString) return null;
+
+  const parsed = dayjs(timeString, format);
+  return parsed.isValid() ? parsed : null;
+}
+
+export function formatTimeByGranularity(
+  time: Dayjs,
+  granularity: string
+): string {
+  switch (granularity) {
+    case "second":
+      return time.format("DD-MM-YYYY HH:mm:ss");
+    case "minute":
+      return time.format("DD-MM-YYYY HH:mm");
+    case "hour":
+      return time.format("DD-MM-YYYY HH:00");
+    case "day":
+      return time.format("DD-MM-YYYY");
+    case "week":
+      return `W${time.week()} ${time.format("YYYY")}`;
+    case "month":
+      return time.format("MM-YYYY");
+    case "quarter":
+      return time.format("YYYY-[Q]Q");
+    case "year":
+      return time.format("YYYY");
+    default:
+      return time.format("DD-MM-YYYY");
+  }
+}
+
+export { filterDataByTimeRange, groupDataByTimeGranularity };

package/src/utils/timeFormatter.util.ts

@@ -0,0 +1,104 @@
+import dayjs from "dayjs";
+
+export function getTimeBasedTooltipFormatter(props: any) {
+  return (params: any) => {
+    if (!Array.isArray(params)) {
+      const timeParam = params;
+      const timeValue = timeParam.axisValue;
+      let timeDisplay = timeValue;
+
+      if (dayjs(timeValue).isValid()) {
+        const date = dayjs(timeValue);
+        const formats: Record<string, string> = {
+          second: "YYYY-MM-DD HH:mm:ss",
+          minute: "YYYY-MM-DD HH:mm",
+          hour: "YYYY-MM-DD HH:00",
+          day: "YYYY-MM-DD",
+          week: `YYYY [Week] W`,
+          month: "YYYY-MM",
+          quarter: `YYYY [Q]Q`,
+          year: "YYYY",
+        };
+
+        timeDisplay = date.format(
+          formats[props.timeGranularity] || "YYYY-MM-DD"
+        );
+      }
+
+      const value = timeParam.value[timeParam.encode.y[0]];
+      return `
+        <div style="font-weight: bold; margin-bottom: 5px;">${timeDisplay}</div>
+        <div style="display: flex; align-items: center; margin: 3px 0;">
+          <span style="display: inline-block; width: 10px; height: 10px; background: ${timeParam.color}; margin-right: 5px; border-radius: 2px;"></span>
+          <span>${timeParam.seriesName}: ${value}</span>
+        </div>
+      `;
+    }
+
+    // Handle array of params (multiple series)
+    const timeParam = params[0];
+    const timeValue = timeParam.axisValue;
+    let timeDisplay = timeValue;
+
+    if (dayjs(timeValue).isValid()) {
+      const date = dayjs(timeValue);
+      const formats: Record<string, string> = {
+        second: "YYYY-MM-DD HH:mm:ss",
+        minute: "YYYY-MM-DD HH:mm",
+        hour: "YYYY-MM-DD HH:00",
+        day: "YYYY-MM-DD",
+        week: `YYYY [Week] W`,
+        month: "YYYY-MM",
+        quarter: `YYYY [Q]Q`,
+        year: "YYYY",
+      };
+
+      timeDisplay = date.format(formats[props.timeGranularity] || "YYYY-MM-DD");
+    }
+
+    let result = `<div style="font-weight: bold; margin-bottom: 5px;">${timeDisplay}</div>`;
+
+    params.forEach((param: any) => {
+      const yField = Array.isArray(param.encode.y)
+        ? param.encode.y[0]
+        : param.encode.y;
+      const value = param.value[yField];
+      result += `
+        <div style="display: flex; align-items: center; margin: 3px 0;">
+          <span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; margin-right: 5px; border-radius: 2px;"></span>
+          <span>${param.seriesName}: ${value}</span>
+        </div>
+      `;
+    });
+
+    return result;
+  };
+}
+
+export function getTimeAxisFormatter(timeGranularity: string) {
+  return (value: any) => {
+    if (typeof value !== "string" && typeof value !== "number") {
+      return value;
+    }
+
+    try {
+      const date = dayjs(value);
+      if (!date.isValid()) return String(value);
+
+      const formats: Record<string, string> = {
+        second: "HH:mm:ss",
+        minute: "HH:mm",
+        hour: "HH:00\nMM-DD",
+        day: "MM-DD",
+        week: "MM-DD\n'W'W",
+        month: "YYYY-MM",
+        quarter: "YYYY-'Q'Q",
+        year: "YYYY",
+      };
+
+      return date.format(formats[timeGranularity] || "MM-DD");
+    } catch (error) {
+      return String(value);
+    }
+  };
+}

package/src/utils/timeProcessing.util.ts

@@ -0,0 +1,38 @@
+import { JSONObject } from "lowcoder-sdk";
+import { EChartPropsType } from "./echarts.util";
+import { filterDataByTimeRange, groupDataByTimeGranularity } from "./time.util";
+
+export function processTimeData(
+  props: EChartPropsType,
+  data: JSONObject[],
+  seriesColumnNames: string[]
+) {
+  let processedData = data;
+
+  if (props.timeColumn && props.timeRange !== "noFilter") {
+    processedData = filterDataByTimeRange(processedData, {
+      timeColumn: props.timeColumn,
+      timeGranularity: props.timeGranularity,
+      timeRange: props.timeRange,
+      startTime: props.startTime,
+      endTime: props.endTime,
+      timeFormat: props.timeFormat,
+    });
+  }
+
+  if (
+    props.timeColumn &&
+    props.timeGranularity &&
+    props.timeColumn === props.xAxisKey
+  ) {
+    processedData = groupDataByTimeGranularity(
+      processedData,
+      props.timeColumn,
+      props.timeGranularity,
+      seriesColumnNames,
+      props.timeFormat
+    );
+  }
+
+  return processedData;
+}

package/src/utils/trendline.util.ts

@@ -0,0 +1,342 @@
+import { UIChartDataType } from "@/comps/Linecharts/constants";
+import { JSONObject } from "lowcoder-sdk";
+
+export interface TrendlineConfig {
+  type: string;
+  name: string;
+  order?: number;
+  period?: number;
+  color?: string;
+}
+
+export const calculateTrendline = (
+  data: UIChartDataType[],
+  trendlineConfig: TrendlineConfig,
+  xAxisKey: string,
+  yAxisKey: string
+): number[] => {
+  const { type, order = 2, period = 2 } = trendlineConfig;
+
+  const preparedData = data.map((item) => ({
+    x: item[xAxisKey as keyof UIChartDataType] || 0,
+    y: item[yAxisKey as keyof UIChartDataType] || 0,
+  }));
+
+  switch (type) {
+    case "linear":
+      return calculateLinearTrendline(preparedData);
+
+    case "polynomial":
+      return calculatePolynomialTrendline(preparedData, order);
+
+    case "exponential":
+      return calculateExponentialTrendline(preparedData);
+
+    case "logarithmic":
+      return calculateLogarithmicTrendline(preparedData);
+
+    case "power":
+      return calculatePowerTrendline(preparedData);
+
+    case "movingAverage":
+      return calculateMovingAverage(preparedData, period);
+
+    default:
+      return calculateLinearTrendline(preparedData);
+  }
+};
+
+// Linear trendline (y = mx + b)
+const calculateLinearTrendline = (
+  data: Array<{ x: number; y: number }>
+): number[] => {
+  const n = data.length;
+  let sumX = 0,
+    sumY = 0,
+    sumXY = 0,
+    sumXX = 0;
+
+  data.forEach((point) => {
+    sumX += point.x;
+    sumY += point.y;
+    sumXY += point.x * point.y;
+    sumXX += point.x * point.x;
+  });
+
+  const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
+  const intercept = (sumY - slope * sumX) / n;
+
+  return data.map((point) => slope * point.x + intercept);
+};
+
+// Polynomial trendline (y = a₀ + a₁x + a₂x² + ... + aₙxⁿ)
+const calculatePolynomialTrendline = (
+  data: Array<{ x: number; y: number }>,
+  order: number
+): number[] => {
+  const n = data.length;
+
+  if (order === 2) {
+    let sumX = 0,
+      sumY = 0,
+      sumXX = 0,
+      sumXXX = 0,
+      sumXXXX = 0,
+      sumXY = 0,
+      sumXXY = 0;
+
+    data.forEach((point) => {
+      const x = point.x;
+      const y = point.y;
+      const xx = x * x;
+
+      sumX += x;
+      sumY += y;
+      sumXX += xx;
+      sumXXX += xx * x;
+      sumXXXX += xx * xx;
+      sumXY += x * y;
+      sumXXY += xx * y;
+    });
+
+    const Sxx = sumXX - (sumX * sumX) / n;
+    const Sxy = sumXY - (sumX * sumY) / n;
+    const Sxx2 = sumXXX - (sumX * sumXX) / n;
+    const Sx2y = sumXXY - (sumXX * sumY) / n;
+    const Sx2x2 = sumXXXX - (sumXX * sumXX) / n;
+
+    const denominator = Sxx * Sx2x2 - Sxx2 * Sxx2;
+    const a = (Sxy * Sx2x2 - Sx2y * Sxx2) / denominator;
+    const b = (Sx2y * Sxx - Sxy * Sxx2) / denominator;
+    const c = (sumY - a * sumX - b * sumXX) / n;
+
+    return data.map((point) => a * point.x + b * point.x * point.x + c);
+  }
+
+  // Fallback to linear for higher orders
+  return calculateLinearTrendline(data);
+};
+
+// Exponential trendline (y = ae^(bx))
+const calculateExponentialTrendline = (
+  data: Array<{ x: number; y: number }>
+): number[] => {
+  // Filter out non-positive values for log transformation
+  const validData = data.filter((p) => p.y > 0);
+
+  if (validData.length === 0) return new Array(data.length).fill(0);
+
+  // Transform to linear: ln(y) = ln(a) + bx
+  const transformedData = validData.map((p) => ({
+    x: p.x,
+    y: Math.log(p.y),
+  }));
+
+  const linearResult = calculateLinearTrendline(transformedData);
+
+  // Transform back: y = e^(ln(y))
+  return data.map((p, index) => {
+    if (index < validData.length) {
+      return Math.exp(linearResult[index]);
+    }
+    return 0;
+  });
+};
+
+// Logarithmic trendline (y = a + b*ln(x))
+const calculateLogarithmicTrendline = (
+  data: Array<{ x: number; y: number }>
+): number[] => {
+  // Filter out non-positive x values
+  const validData = data.filter((p) => p.x > 0);
+
+  if (validData.length === 0) return new Array(data.length).fill(0);
+
+  // Transform to linear: y = a + b*ln(x)
+  const transformedData = validData.map((p) => ({
+    x: Math.log(p.x),
+    y: p.y,
+  }));
+
+  const linearResult = calculateLinearTrendline(transformedData);
+
+  return data.map((p, index) => {
+    if (index < validData.length && p.x > 0) {
+      return linearResult[index];
+    }
+    return 0;
+  });
+};
+
+// Power trendline (y = ax^b)
+const calculatePowerTrendline = (
+  data: Array<{ x: number; y: number }>
+): number[] => {
+  // Filter out non-positive values
+  const validData = data.filter((p) => p.x > 0 && p.y > 0);
+
+  if (validData.length === 0) return new Array(data.length).fill(0);
+
+  // Transform to linear: ln(y) = ln(a) + b*ln(x)
+  const transformedData = validData.map((p) => ({
+    x: Math.log(p.x),
+    y: Math.log(p.y),
+  }));
+
+  const linearResult = calculateLinearTrendline(transformedData);
+
+  // Transform back: y = e^(ln(y))
+  return data.map((p, index) => {
+    if (index < validData.length && p.x > 0 && p.y > 0) {
+      return Math.exp(linearResult[index]);
+    }
+    return 0;
+  });
+};
+
+// Moving Average trendline
+const calculateMovingAverage = (
+  data: Array<{ x: number; y: number }>,
+  period: number
+): number[] => {
+  const result: number[] = [];
+
+  for (let i = 0; i < data.length; i++) {
+    if (i < period - 1) {
+      // Not enough data points for full period
+      result.push(data[i].y);
+    } else {
+      // Calculate moving average
+      let sum = 0;
+      for (let j = 0; j < period; j++) {
+        sum += data[i - j].y;
+      }
+      result.push(sum / period);
+    }
+  }
+
+  return result;
+};
+
+export const createTrendlineSeries = (
+  trendlineConfig: TrendlineConfig,
+  trendlineData: number[],
+  xAxisData: any[],
+  index: number
+) => {
+  const { type, name, color } = trendlineConfig;
+
+  return {
+    name: name || `Trendline ${index + 1}`,
+    type: "line",
+    data: trendlineData.map((value, idx) => [xAxisData[idx], value]),
+    smooth: false,
+    lineStyle: {
+      width: 2,
+      type: getLineStyleType(type),
+      color: color || getDefaultColor(index),
+    },
+    symbol: "none",
+    tooltip: {
+      show: true,
+    },
+  };
+};
+
+const getLineStyleType = (type: string): string => {
+  switch (type) {
+    case "linear":
+      return "solid";
+    case "polynomial":
+      return "dashed";
+    case "exponential":
+      return "dotted";
+    case "logarithmic":
+      return "dashdot";
+    case "power":
+      return "solid";
+    case "movingAverage":
+      return "solid";
+    default:
+      return "solid";
+  }
+};
+
+const getDefaultColor = (index: number): string => {
+  const colors = [
+    "#ff0000",
+    "#00ff00",
+    "#0000ff",
+    "#ffff00",
+    "#ff00ff",
+    "#00ffff",
+  ];
+  return colors[index % colors.length];
+};
+
+export const addTrendlinesToChartConfig = (
+  chartConfig: any,
+  data: UIChartDataType[],
+  trendlines: any[],
+  xAxisKey: string,
+  yAxisKey: string
+) => {
+  if (!trendlines || trendlines.length === 0) {
+    return chartConfig;
+  }
+
+  const xAxisData = data.map((item) => item[xAxisKey as keyof UIChartDataType]);
+
+  const trendlineSeries = trendlines.map((trendline, index) => {
+    const trendlineConfig = trendline.getView();
+    const trendlineData = calculateTrendline(
+      data,
+      trendlineConfig,
+      xAxisKey,
+      yAxisKey
+    );
+
+    return createTrendlineSeries(
+      trendlineConfig,
+      trendlineData,
+      xAxisData,
+      index
+    );
+  });
+
+  return {
+    ...chartConfig,
+    series: [...(chartConfig.series || []), ...trendlineSeries],
+  };
+};
+
+export interface DataPoint {
+  x: number;
+  y: number;
+}
+
+export function convertToDataPoints(
+  data: JSONObject[],
+  xAxisKey: string,
+  yAxisKey: string
+): DataPoint[] {
+  const points: DataPoint[] = [];
+
+  data.forEach((item) => {
+    const xVal = item[xAxisKey];
+    const yVal = item[yAxisKey];
+
+    if (typeof xVal === "number" && typeof yVal === "number") {
+      points.push({ x: xVal, y: yVal });
+    } else if (
+      typeof xVal === "string" &&
+      !isNaN(Number(xVal)) &&
+      typeof yVal === "string" &&
+      !isNaN(Number(yVal))
+    ) {
+      points.push({ x: Number(xVal), y: Number(yVal) });
+    }
+  });
+
+  return points.sort((a, b) => a.x - b.x);
+}