@agions/taroviz 1.9.0 → 1.11.1

package/src/hooks/utils/chartDownloadUtils.ts

@@ -0,0 +1,273 @@
+/**
+ * Chart Download Utilities
+ * 图表下载工具函数
+ */
+
+/**
+ * 生成默认文件名
+ */
+export function generateFilename(prefix: string = 'chart'): string {
+  const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');
+  return `${prefix}_${timestamp}`;
+}
+
+/**
+ * 下载 Blob 对象
+ */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * 下载数据 URL
+ */
+export function downloadDataUrl(dataUrl: string, filename: string): void {
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * CSV 转 Blob
+ */
+export function csvToBlob(csv: string, _filename: string): Blob {
+  return new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+}
+
+/**
+ * JSON 转 Blob
+ */
+export function jsonToBlob(json: string, _filename: string): Blob {
+  return new Blob([json], { type: 'application/json;charset=utf-8;' });
+}
+
+/**
+ * 将数据转换为 CSV 格式
+ */
+export function convertToCSV(data: unknown, options?: { includeLabels?: boolean }): string {
+  if (!data) return '';
+
+  // 处理 ECharts 格式的数据
+  if (typeof data === 'object' && (data as { series?: unknown }).series) {
+    return convertSeriesToCSV(data as { series?: unknown[]; xAxis?: { data?: unknown[] }; dataset?: { dimensions?: string[]; source?: unknown[][] } }, options);
+  }
+
+  // 处理数组数据
+  if (Array.isArray(data)) {
+    return convertArrayToCSV(data);
+  }
+
+  // 处理普通对象
+  if (typeof data === 'object') {
+    return convertObjectToCSV(data as Record<string, unknown>);
+  }
+
+  return String(data);
+}
+
+/**
+ * 将 ECharts series 数据转换为 CSV
+ */
+function convertSeriesToCSV(
+  chartData: { series?: unknown[]; xAxis?: { data?: unknown[] }; dataset?: { dimensions?: string[]; source?: unknown[][] } },
+  options?: { includeLabels?: boolean }
+): string {
+  const { series = [], xAxis, dataset } = chartData;
+  const includeLabels = options?.includeLabels ?? true;
+
+  if (!Array.isArray(series) || series.length === 0) return '';
+
+  // 获取类别轴数据
+  let categories: unknown[] = [];
+  if (xAxis?.data && Array.isArray(xAxis.data)) {
+    categories = xAxis.data;
+  } else if (dataset?.dimensions && dataset?.source) {
+    categories = dataset.source.map((row: unknown[]) => row[0]);
+  } else if ((series[0] as { data?: unknown[] })?.data) {
+    const firstSeries = series[0] as { data: unknown[] };
+    categories = firstSeries.data.map((item: unknown, index: number) =>
+      typeof item === 'object' && item !== null ? (item as unknown[])[0] || index : index
+    );
+  }
+
+  // 构建 CSV 头
+  const headers = includeLabels
+    ? ['Category', ...series.map((s: unknown) => (s as { name?: string; seriesIndex?: number }).name || (s as { seriesIndex?: number }).seriesIndex)]
+    : [];
+
+  // 构建 CSV 行
+  const rows: unknown[][] = [];
+
+  series.forEach((s: unknown, seriesIndex: number) => {
+    const seriesObj = s as { data?: unknown[]; name?: string; seriesIndex?: number };
+    const seriesData = seriesObj.data || [];
+    seriesData.forEach((item: unknown, dataIndex: number) => {
+      const value = typeof item === 'object' && item !== null ? (item as unknown[])[1] : item;
+      const category = categories[dataIndex] || dataIndex;
+
+      if (includeLabels) {
+        if (seriesIndex === 0) {
+          rows[dataIndex] = [category, value];
+        } else {
+          rows[dataIndex] = rows[dataIndex] || [category];
+          rows[dataIndex].push(value);
+        }
+      } else {
+        if (seriesIndex === 0) {
+          rows[dataIndex] = [value];
+        } else {
+          rows[dataIndex] = rows[dataIndex] || [];
+          rows[dataIndex].push(value);
+        }
+      }
+    });
+  });
+
+  // 生成 CSV 字符串
+  const csvRows = includeLabels
+    ? [headers.join(','), ...rows.map((row) => row.join(','))]
+    : rows.map((row) => row.join(','));
+
+  return csvRows.join('\n');
+}
+
+/**
+ * 将数组数据转换为 CSV
+ */
+function convertArrayToCSV(data: unknown[]): string {
+  if (data.length === 0) return '';
+
+  // 检查是否为对象数组
+  if (typeof data[0] === 'object' && data[0] !== null) {
+    const keys = Object.keys(data[0]);
+    const headers = keys.join(',');
+    const rows = data.map((item) =>
+      keys.map((key) => JSON.stringify((item as Record<string, unknown>)[key] ?? '')).join(',')
+    );
+    return [headers, ...rows].join('\n');
+  }
+
+  // 简单数组
+  return data.join('\n');
+}
+
+/**
+ * 将对象数据转换为 CSV
+ */
+function convertObjectToCSV(data: Record<string, unknown>): string {
+  const entries = Object.entries(data);
+  return entries.map(([key, value]) => `${key},${JSON.stringify(value)}`).join('\n');
+}
+
+/**
+ * 将 ECharts 数据转换为 JSON
+ */
+export function convertToJSON(data: unknown): string {
+  if (!data) return '{}';
+
+  const dataObj = data as { series?: unknown[]; title?: { text?: string }; legend?: { data?: unknown }; xAxis?: { data?: unknown[] } };
+
+  // 如果是 ECharts 格式，简化数据
+  if (dataObj.series) {
+    const simplified = {
+      title: dataObj.title?.text,
+      legend: dataObj.legend?.data,
+      xAxis: dataObj.xAxis?.data,
+      series: dataObj.series.map((s: unknown) => {
+        const seriesObj = s as { name?: string; type?: string; data?: unknown[] };
+        return {
+          name: seriesObj.name,
+          type: seriesObj.type,
+          data: seriesObj.data?.map((item: unknown) =>
+            typeof item === 'object' && item !== null ? (item as unknown[])[1] : item
+          ),
+        };
+      }),
+    };
+    return JSON.stringify(simplified, null, 2);
+  }
+
+  return JSON.stringify(data, null, 2);
+}
+
+/**
+ * 从图片创建 PDF DataURL
+ */
+export async function createPdfFromImage(
+  imageDataUrl: string,
+  title?: string
+): Promise<string | null> {
+  return new Promise((resolve) => {
+    try {
+      // 创建画布
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        resolve(null);
+        return;
+      }
+
+      // 加载图片
+      const img = new Image();
+      img.onload = () => {
+        // 设置 PDF 尺寸（A4 纵向）
+        const pdfWidth = 595.28; // A4 width in points
+        const pdfHeight = 841.89; // A4 height in points
+
+        canvas.width = pdfWidth;
+        canvas.height = pdfHeight;
+
+        // 填充背景
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, pdfWidth, pdfHeight);
+
+        // 计算图片位置和尺寸（居中）
+        const imgRatio = img.width / img.height;
+        const canvasRatio = pdfWidth / pdfHeight;
+        let drawWidth: number, drawHeight: number, offsetX: number, offsetY: number;
+
+        if (imgRatio > canvasRatio) {
+          drawWidth = pdfWidth * 0.8;
+          drawHeight = drawWidth / imgRatio;
+        } else {
+          drawHeight = pdfHeight * 0.6;
+          drawWidth = drawHeight * imgRatio;
+        }
+
+        offsetX = (pdfWidth - drawWidth) / 2;
+        offsetY = (pdfHeight - drawHeight) / 2;
+
+        // 绘制图片
+        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+
+        // 添加标题
+        ctx.fillStyle = '#333333';
+        ctx.font = '16px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText(title || 'Chart Export', pdfWidth / 2, offsetY - 20);
+
+        // 输出为 PNG（实际应用中应该使用 jsPDF 生成真正的 PDF）
+        resolve(canvas.toDataURL('image/png'));
+      };
+
+      img.onerror = () => {
+        resolve(null);
+      };
+
+      img.src = imageDataUrl;
+    } catch (e) {
+      console.warn('[chartDownloadUtils] Failed to create PDF:', e);
+      resolve(null);
+    }
+  });
+}

package/src/hooks/utils/dataTransformUtils.ts

@@ -0,0 +1,287 @@
+/**
+ * Data Transform Utilities
+ * 数据转换工具函数
+ */
+import type { EChartsOption } from 'echarts';
+
+// ============================================================================
+// 类型定义
+// ============================================================================
+
+/** 原始数据条目 */
+export interface DataItem {
+  name?: string;
+  value?: number | number[];
+  [key: string]: unknown;
+}
+
+/** 数据源 */
+export interface DataSource {
+  categories?: (string | number)[];
+  series?: DataItem[];
+  rows?: Record<string, unknown>[];
+  columns?: string[];
+}
+
+/** 聚合方式 */
+export type AggregationType = 'sum' | 'average' | 'max' | 'min' | 'count' | 'first' | 'last';
+
+/** 时间周期 */
+export type TimePeriod = 'day' | 'week' | 'month' | 'quarter' | 'year';
+
+/** 映射配置 */
+export interface TransformMapping {
+  xField?: string;
+  yField?: string;
+  seriesField?: string;
+  sizeField?: string;
+  colorField?: string;
+  nameField?: string;
+  valueField?: string;
+}
+
+// ============================================================================
+// 转换函数
+// ============================================================================
+
+export function transformLineOrBar(
+  data: DataSource,
+  chartType: 'line' | 'bar',
+  mapping: TransformMapping,
+  extraConfig: Partial<EChartsOption>
+): EChartsOption {
+  const { xField = 'name', yField = 'value', seriesField } = mapping || {};
+
+  const categories = data.categories || data.rows?.map((r) => String(r[xField])) || [];
+  const seriesData = data.series || data.rows || [];
+
+  if (seriesField) {
+    const groups = new Map<string, DataItem[]>();
+    seriesData.forEach((item) => {
+      const key = String((item as Record<string, unknown>)[seriesField] || 'default');
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key)!.push(item);
+    });
+    const series = Array.from(groups.entries()).map(([name, items]) => ({
+      name,
+      type: chartType,
+      data: items.map((item) => (item as Record<string, unknown>)[yField] ?? 0),
+    }));
+    return {
+      xAxis: { type: 'category', data: categories },
+      yAxis: { type: 'value' },
+      series,
+      ...extraConfig,
+    };
+  }
+
+  const series = [
+    {
+      type: chartType as 'line' | 'bar',
+      data: seriesData.map((item) => (item as Record<string, unknown>)[yField] ?? 0),
+    },
+  ];
+
+  return {
+    xAxis: { type: 'category', data: categories },
+    yAxis: { type: 'value' },
+    series,
+    ...extraConfig,
+  };
+}
+
+export function transformPie(
+  data: DataSource,
+  mapping: TransformMapping,
+  extraConfig: Partial<EChartsOption>
+): EChartsOption {
+  const { nameField = 'name', valueField = 'value' } = mapping || {};
+
+  const seriesData: Array<{ name: string; value: number }> = (data.series || data.rows || []).map(
+    (item) => ({
+      name: String((item as Record<string, unknown>)[nameField] || ''),
+      value: Number((item as Record<string, unknown>)[valueField]) || 0,
+    })
+  );
+
+  return {
+    series: [{ type: 'pie', radius: '60%', data: seriesData }],
+    ...extraConfig,
+  };
+}
+
+export function transformScatter(
+  data: DataSource,
+  mapping: TransformMapping,
+  extraConfig: Partial<EChartsOption>
+): EChartsOption {
+  const { xField = 'x', yField = 'y', sizeField } = mapping || {};
+
+  const seriesData = (data.series || data.rows || []).map((item) => {
+    const record = item as Record<string, unknown>;
+    const point: (number | string)[] = [Number(record[xField]) || 0, Number(record[yField]) || 0];
+    if (sizeField) point.push(Number(record[sizeField]) || 1);
+    return point;
+  });
+
+  return {
+    xAxis: { type: 'value', scale: true },
+    yAxis: { type: 'value', scale: true },
+    series: [{ type: 'scatter', data: seriesData }],
+    ...extraConfig,
+  };
+}
+
+export function transformRadar(
+  data: DataSource,
+  mapping: TransformMapping,
+  extraConfig: Partial<EChartsOption>
+): EChartsOption {
+  const { nameField = 'name', valueField = 'value' } = mapping || {};
+
+  const indicators = (data.series || data.rows || []).map((item) => {
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[nameField] || ''),
+      max: Math.max(Number(record[valueField]) || 100, 100),
+    };
+  });
+
+  const values = (data.series || data.rows || []).map(
+    (item) => Number((item as Record<string, unknown>)[valueField]) || 0
+  );
+
+  return {
+    radar: { indicator: indicators },
+    series: [{ type: 'radar', data: [{ value: values }] }],
+    ...extraConfig,
+  };
+}
+
+export function transformHeatmap(
+  data: DataSource,
+  mapping: TransformMapping,
+  extraConfig: Partial<EChartsOption>
+): EChartsOption {
+  const { xField = 'x', yField = 'y', valueField = 'value' } = mapping || {};
+
+  const xCategories = [
+    ...new Set(
+      (data.series || data.rows || []).map((d) => String((d as Record<string, unknown>)[xField]))
+    ),
+  ];
+  const yCategories = [
+    ...new Set(
+      (data.series || data.rows || []).map((d) => String((d as Record<string, unknown>)[yField]))
+    ),
+  ];
+
+  const seriesData = (data.series || data.rows || []).map((item) => {
+    const record = item as Record<string, unknown>;
+    const xIndex = xCategories.indexOf(String(record[xField]));
+    const yIndex = yCategories.indexOf(String(record[yField]));
+    return [xIndex, yIndex, Number(record[valueField]) || 0];
+  });
+
+  return {
+    xAxis: { type: 'category', data: xCategories },
+    yAxis: { type: 'category', data: yCategories },
+    visualMap: { min: 0, calculable: true },
+    series: [{ type: 'heatmap', data: seriesData }],
+    ...extraConfig,
+  };
+}
+
+export function groupByTime(
+  data: DataItem[],
+  dateField: string,
+  period: TimePeriod
+): Record<string, DataItem[]> {
+  return data.reduce(
+    (acc, item) => {
+      const date = new Date(String((item as Record<string, unknown>)[dateField]));
+      let key: string;
+
+      switch (period) {
+        case 'day':
+          key = date.toISOString().split('T')[0];
+          break;
+        case 'week': {
+          const week = getWeekNumber(date);
+          key = `${date.getFullYear()}-W${week}`;
+          break;
+        }
+        case 'month':
+          key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+          break;
+        case 'quarter':
+          key = `${date.getFullYear()}-Q${Math.ceil((date.getMonth() + 1) / 3)}`;
+          break;
+        case 'year':
+          key = String(date.getFullYear());
+          break;
+        default:
+          key = date.toISOString().split('T')[0];
+      }
+
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(item);
+      return acc;
+    },
+    {} as Record<string, DataItem[]>
+  );
+}
+
+function getWeekNumber(date: Date): number {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+
+export function aggregateValues(
+  items: DataItem[],
+  field: string,
+  method: AggregationType,
+  fillMissing?: 'zero' | 'forward' | 'interpolate'
+): number {
+  if (items.length === 0) {
+    if (fillMissing === 'zero') return 0;
+    return NaN;
+  }
+
+  const values = items.map((item) => Number((item as Record<string, unknown>)[field]) || 0);
+
+  switch (method) {
+    case 'sum': {
+      let sum = 0;
+      for (let i = 0; i < values.length; i++) sum += values[i];
+      return sum;
+    }
+    case 'average': {
+      if (values.length === 0) return 0;
+      let sum = 0;
+      for (let i = 0; i < values.length; i++) sum += values[i];
+      return sum / values.length;
+    }
+    case 'max': {
+      let max = values[0];
+      for (let i = 1; i < values.length; i++) if (values[i] > max) max = values[i];
+      return max;
+    }
+    case 'min': {
+      let min = values[0];
+      for (let i = 1; i < values.length; i++) if (values[i] < min) min = values[i];
+      return min;
+    }
+    case 'count':
+      return values.length;
+    case 'first':
+      return values[0];
+    case 'last':
+      return values[values.length - 1];
+    default:
+      return values[0];
+  }
+}