@c2-markdown-ui/vue 0.0.0-stage → 0.4.4

package/src/lib/widgets/Chart.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+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;
+  labels: string[];
+  datasets: Dataset[];
+  options?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 400,
+  url: '',
+  options: () => ({})
+});
+
+const emit = defineEmits<{
+  change: [data: any]
+}>();
+
+// 远端数据：拉取成功后覆盖本地 CSV 数据
+// 加载失败静默处理：回落本地数据，均无数据时图表区域显示灰色"暂无数据"
+const remoteData = ref<RemoteChartData | null>(null);
+const loading = ref(false);
+
+// 实际渲染数据：远端优先，本地 CSV 作为初始/后备
+const effectiveLabels = computed(() => remoteData.value ? remoteData.value.labels : props.labels);
+const effectiveDatasets = computed(() => remoteData.value ? remoteData.value.datasets : props.datasets);
+/** 无任何可渲染数据（本地与远端均为空） */
+const isEmpty = computed(() =>
+  !loading.value && effectiveLabels.value.length === 0 && effectiveDatasets.value.length === 0
+);
+
+// Clamp height to safe bounds: 200px min, 800px max, 400px default
+const safeHeight = Math.max(200, Math.min(800, props.height || 400));
+
+const canvasRef = ref<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
+      };
+    }
+  });
+};
+
+// 构建图表（销毁旧实例后重建）
+const renderChart = () => {
+  if (!canvasRef.value) return;
+  if (chart) {
+    chart.destroy();
+    chart = null;
+  }
+
+  const chartType = getChartType(props.type);
+  const preparedDatasets = prepareDatasets(effectiveDatasets.value, chartType, effectiveLabels.value);
+
+  const defaultOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      title: {
+        display: !!props.title,
+        text: props.title || ''
+      },
+      legend: {
+        display: effectiveDatasets.value.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;
+
+        emit('change', {
+          label: effectiveLabels.value[dataIndex],
+          value: effectiveDatasets.value[datasetIndex]?.data[dataIndex],
+          datasetLabel: effectiveDatasets.value[datasetIndex]?.label,
+          dataIndex,
+          datasetIndex
+        });
+      }
+    }
+  };
+
+  const mergedOptions = { ...defaultOptions, ...props.options };
+
+  const chartData = chartType === 'scatter'
+    ? { datasets: preparedDatasets }
+    : { labels: effectiveLabels.value, datasets: preparedDatasets };
+
+  chart = new Chart(canvasRef.value, {
+    type: chartType as any,
+    data: chartData,
+    options: mergedOptions
+  });
+};
+
+// 远端数据源：fetch 拉取 CSV 文本或 JSON，成功后覆盖本地数据并触发重建
+watch(() => props.url, (url) => {
+  if (!url) {
+    remoteData.value = null;
+    return;
+  }
+  let cancelled = false;
+  loading.value = true;
+  (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.value = parsed;
+    } catch {
+      // 加载失败：静默回落本地数据
+    } finally {
+      if (!cancelled) loading.value = false;
+    }
+  })();
+}, { immediate: true });
+
+// 数据（远端覆盖本地）变化时重建图表
+watch([effectiveLabels, effectiveDatasets], () => {
+  renderChart();
+});
+
+onMounted(() => {
+  renderChart();
+});
+
+onUnmounted(() => {
+  if (chart) {
+    chart.destroy();
+    chart = null;
+  }
+});
+</script>
+
+<template>
+  <div class="widget-chart" :style="{ height: `${safeHeight}px` }">
+    <div v-if="isEmpty" class="chart-empty">暂无数据</div>
+    <div v-if="loading" class="chart-loading">数据加载中...</div>
+    <canvas ref="canvasRef"></canvas>
+  </div>
+</template>
+
+<style scoped>
+.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);
+  font-size: 12px;
+}
+</style>