@c2-markdown-ui/svelte 0.0.0-stage → 0.4.3

package/src/lib/widgets/Chart.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import {
+    Chart,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    LineController,
+    BarController,
+    PieController,
+    ScatterController
+  } from 'chart.js';
+  import { parseChartCsv, normalizeRemoteChartData, type RemoteChartData } from './chartRemoteData';
+
+  // Register Chart.js components
+  Chart.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    LineController,
+    BarController,
+    PieController,
+    ScatterController
+  );
+
+  interface Dataset {
+    label: string;
+    data: number[];
+  }
+
+  interface Props {
+    type: "chart-line" | "chart-bar" | "chart-pie" | "chart-scatter";
+    title?: string;
+    height?: number;
+    /** 远端数据源 URL：设置后运行时 fetch 拉取（CSV 文本或 JSON），本地 CSV 作为初始/后备数据 */
+    url?: string;
+    /** 是否展示图例：未设置（undefined）时自动判断（多数据集或饼图时展示） */
+    legend?: boolean;
+    labels: string[];
+    datasets: Dataset[];
+    options?: Record<string, any>;
+    onchange: (data: any) => void;
+  }
+
+  let { type, title, height, url = '', legend, labels, datasets, options = {}, onchange }: Props = $props();
+
+  // 远端数据：拉取成功后覆盖本地 CSV 数据
+  // 加载失败静默处理：回落本地数据，均无数据时图表区域显示灰色"暂无数据"
+  let remoteData = $state<RemoteChartData | null>(null);
+  let loading = $state(false);
+
+  // 实际渲染数据：远端优先，本地 CSV 作为初始/后备
+  const effectiveLabels = $derived(remoteData ? remoteData.labels : labels);
+  const effectiveDatasets = $derived(remoteData ? remoteData.datasets : datasets);
+  /** 无任何可渲染数据（本地与远端均为空） */
+  const isEmpty = $derived(
+    !loading && effectiveLabels.length === 0 && effectiveDatasets.length === 0
+  );
+
+  // Clamp height to safe bounds: 200px min, 800px max, 400px default
+  const safeHeight = Math.max(200, Math.min(800, height || 400));
+
+  let canvas = $state<HTMLCanvasElement>();
+  let chart: Chart | null = null;
+
+  const getChartType = (widgetType: string) => {
+    switch (widgetType) {
+      case 'chart-line': return 'line';
+      case 'chart-bar': return 'bar';
+      case 'chart-pie': return 'pie';
+      case 'chart-scatter': return 'scatter';
+      default: return 'line';
+    }
+  };
+
+  const getDefaultColors = () => [
+    '#1677ff',
+    '#52c41a',
+    '#faad14',
+    '#ff4d4f',
+    '#722ed1',
+    '#13c2c2'
+  ];
+
+  const prepareDatasets = (datasets: Dataset[], chartType: string, chartLabels: string[]) => {
+    const colors = getDefaultColors();
+    
+    return datasets.map((dataset, index) => {
+      const color = colors[index % colors.length];
+      let processedData: any = dataset.data;
+      
+      // For scatter plots, convert data to {x, y} format
+      if (chartType === 'scatter') {
+        processedData = dataset.data.map((value, dataIndex) => ({
+          x: dataIndex,
+          y: value
+        }));
+      }
+      
+      if (chartType === 'pie') {
+        return {
+          ...dataset,
+          data: processedData,
+          backgroundColor: colors.slice(0, dataset.data.length),
+          borderColor: colors.slice(0, dataset.data.length),
+          borderWidth: 1
+        };
+      } else {
+        return {
+          ...dataset,
+          data: processedData,
+          borderColor: color,
+          backgroundColor: chartType === 'line' ? color + '20' : color,
+          borderWidth: 2,
+          fill: chartType === 'line' ? false : true
+        };
+      }
+    });
+  };
+
+  // 远端数据源：fetch 拉取 CSV 文本或 JSON，成功后覆盖本地数据并重建图表
+  $effect(() => {
+    if (!url) return;
+    loading = true;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const text = await res.text();
+        if (cancelled) return;
+        let parsed: RemoteChartData | null = null;
+        const trimmed = text.trim();
+        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+          try {
+            parsed = normalizeRemoteChartData(JSON.parse(trimmed));
+          } catch {
+            parsed = null;
+          }
+        }
+        if (!parsed) parsed = parseChartCsv(text);
+        if (cancelled) return;
+        if (!parsed) throw new Error('响应无法解析为图表数据（CSV 或 JSON）');
+        remoteData = parsed;
+      } catch {
+        // 加载失败：静默回落本地数据（均无数据时图表区域显示灰色"暂无数据"）
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  // 图表构建/重建：type/标题/数据（本地或远端）变化时销毁重建
+  $effect(() => {
+    if (!canvas) return;
+
+    const chartType = getChartType(type);
+    // Svelte 5 的 $state/$derived 会生成深度代理，而 Chart.js 会向数据数组定义
+    // $listeners 等内部属性，触发 state_descriptors_fixed 报错；深拷贝为纯数据后再使用
+    const plainLabels: string[] = JSON.parse(JSON.stringify(effectiveLabels ?? []));
+    const plainDatasets: Dataset[] = JSON.parse(JSON.stringify(effectiveDatasets ?? []));
+    const preparedDatasets = prepareDatasets(plainDatasets, chartType, plainLabels);
+
+    const defaultOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!title,
+          text: title || ''
+        },
+        legend: {
+          display: legend !== undefined ? legend : (plainDatasets.length > 1 || chartType === 'pie')
+        }
+      },
+      onClick: (_event: any, elements: any[]) => {
+        if (elements.length > 0) {
+          const element = elements[0];
+          const dataIndex = element.index;
+          const datasetIndex = element.datasetIndex;
+
+          onchange({
+            label: plainLabels[dataIndex],
+            value: plainDatasets[datasetIndex]?.data[dataIndex],
+            datasetLabel: plainDatasets[datasetIndex]?.label,
+            dataIndex,
+            datasetIndex
+          });
+        }
+      }
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    const chartData = chartType === 'scatter'
+      ? { datasets: preparedDatasets }
+      : { labels: plainLabels, datasets: preparedDatasets };
+
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+    chart = new Chart(canvas, {
+      type: chartType as any,
+      data: chartData,
+      options: mergedOptions
+    });
+  });
+
+  onDestroy(() => {
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+  });
+</script>
+
+<div class="widget-chart" style="height: {safeHeight}px;">
+  {#if isEmpty}
+    <div class="chart-empty">暂无数据</div>
+  {/if}
+  {#if loading}
+    <div class="chart-loading">数据加载中...</div>
+  {/if}
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .widget-chart {
+    position: relative;
+    width: 100%;
+  }
+
+  canvas {
+    max-width: 100%;
+    height: 100%;
+  }
+
+  .chart-empty {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 13px;
+    background: #ffffff;
+  }
+
+  .chart-loading {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.05);
+    color: inherit;
+    font-size: 12px;
+  }
+</style>