数据可视化仪表盘平台架构设计

┌─────────────────────────────────────────────────────┐
│                   前端展示层                          │
│  React + TypeScript + ECharts + Ant Design           │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐     │
│  │ 图表引擎  │ │ 布局引擎  │ │ 联动筛选引擎     │     │
│  │ (ECharts) │ │ (Grid)   │ │ (Event Bus)     │     │
│  └──────────┘ └──────────┘ └──────────────────┘     │
├─────────────────────────────────────────────────────┤
│                   网关推送层                          │
│  Node.js Gateway + WebSocket Cluster + Redis Pub/Sub │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐     │
│  │ WS 推送   │ │ API 网关  │ │ 查询结果缓存     │     │
│  └──────────┘ └──────────┘ └──────────────────┘     │
├─────────────────────────────────────────────────────┤
│                   数据服务层                          │
│  Node.js Query Service + GraphQL Federation          │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐     │
│  │ 查询路由  │ │ 聚合计算  │ │ 数据预计算       │     │
│  └──────────┘ └──────────┘ └──────────────────┘     │
├─────────────────────────────────────────────────────┤
│                   数据存储层                          │
│  ClickHouse (时序) + Apache Druid (OLAP) + Redis    │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐     │
│  │ClickHouse│ │  Druid   │ │    Redis         │     │
│  │ (原始明细)│ │(多维聚合) │ │  (热数据缓存)    │     │
│  └──────────┘ └──────────┘ └──────────────────┘     │
└─────────────────────────────────────────────────────┘

// LTTB 降采样算法核心实现
function downsampleLTTB(
  data: number[][],
  threshold: number
): number[][] {
  const sampled: number[][] = [data[0]]; // 始终保留首点
  const bucketSize = (data.length - 2) / (threshold - 2);

  let a = 0; // 上一个选中点
  for (let i = 1; i < threshold - 1; i++) {
    const avgRangeStart = Math.floor((i) * bucketSize) + 1;
    const avgRangeEnd = Math.floor((i + 1) * bucketSize) + 1;
    const avgRangeLength = avgRangeEnd - avgRangeStart;

    // 计算 bucket 平均点
    const avgX = avgRangeStart + avgRangeLength / 2;
    const avgY = data.slice(avgRangeStart, avgRangeEnd)
      .reduce((sum, d) => sum + d[1], 0) / avgRangeLength;

    // 选择与前一个选中点形成最大三角形面积的点
    const rangeOffs = Math.floor((i - 1) * bucketSize) + 1;
    const rangeTo = Math.floor(i * bucketSize) + 1;

    let maxArea = -1;
    let maxIdx = rangeOffs;
    for (let j = rangeOffs; j < rangeTo; j++) {
      const area = Math.abs(
        (data[a][0] - avgX) * (data[j][1] - data[a][1])
        - (data[a][0] - data[j][0]) * (avgY - data[a][1])
      ) * 0.5;
      if (area > maxArea) {
        maxArea = area;
        maxIdx = j;
      }
    }
    sampled.push(data[maxIdx]);
    a = maxIdx;
  }

  sampled.push(data[data.length - 1]); // 始终保留末点
  return sampled;
}

// WebSocket 消息优先级调度
class PushScheduler {
  private queues: Map<Priority, AsyncPriorityQueue<PushMessage>>;
  private seqCounter = 0;

  async push(
    connId: string,
    message: PushMessage,
    priority: Priority
  ): Promise<void> {
    // 消息去重 & 压缩
    const deduped = this.deduplicate(connId, message);
    if (!deduped) return;

    const enriched: PushMessage = {
      ...deduped,
      seqId: ++this.seqCounter,
      timestamp: Date.now()
    };

    const queue = this.queues.get(priority)!;
    queue.push(enriched);
  }

  // P0 告警立即发送，P1/P2 按 batch 窗口合并
  private scheduleFlush(): void {
    // P0: 立即消费
    setInterval(() => this.flushQueue(Priority.CRITICAL), 0);
    // P1: 500ms 窗口
    setInterval(() => this.flushQueue(Priority.HIGH), 500);
    // P2: 2s 窗口
    setInterval(() => this.flushQueue(Priority.NORMAL), 2000);
  }
}

/**
 * 大数据量 ECharts 配置生成器
 * 根据数据量动态选择最优渲染策略
 */
export function createOptimizedChartOption(
  rawData: ChartData[],
  chartType: ChartType
): EChartsOption {
  const dataPointCount = rawData.length;
  const useProgressive = dataPointCount > 50_000;
  const useLargeMode = dataPointCount > 200_000;
  const useSampling = dataPointCount > 500_000;

  // 根据数据量选择降采样策略
  const displayData = useSampling
    ? downsampleLTTB(rawData, 50_000)
    : rawData;

  return {
    animation: false, // 大数据量关闭动画
    renderer: 'canvas', // 强制 Canvas 渲染
    progressive: useProgressive ? 2000 : 0,
    progressiveThreshold: useProgressive ? 50_000 : Infinity,
    large: useLargeMode, // 开启大数据模式
    largeThreshold: 200_000,
    tooltip: {
      trigger: 'axis',
      // 使用函数格式化避免大数据量 Tooltip 计算
      formatter: throttle((params: any) => {
        return formatTooltip(params);
      }, 100)
    },
    xAxis: {
      type: 'category',
      // 大数据量时隐藏部分刻度标签
      axisLabel: {
        interval: dataPointCount > 10_000 ? 'auto' : 0,
        rotate: dataPointCount > 5_000 ? 45 : 0
      }
    },
    series: [{
      type: chartType,
      data: displayData,
      showSymbol: dataPointCount < 1_000, // 大数据量隐藏散点
      sampling: useLargeMode ? 'lttb' : undefined,
      itemStyle: {
        // 简化渲染：关闭抗锯齿
        borderWidth: dataPointCount > 100_000 ? 0 : 1
      },
      emphasis: {
        // 大数据量禁用 hover 高亮
        disabled: useLargeMode
      }
    }],
    // 开启 GPU 加速
    useCoarsePointer: true,
    pointerCapture: true
  };
}

/**
 * WebSocket 推送服务核心实现
 * 支持：增量推送、消息去重、断线重连、背压控制
 */
class DashboardPushServer {
  private wss: WebSocket.Server;
  private connections: Map<string, ConnectionState>;
  private redisSub: Redis;
  private seqId = 0;

  async start(port: number): Promise<void> {
    this.wss = new WebSocket.Server({
      port,
      perMessageDeflate: true, // 启用 permessage-deflate 压缩
      maxPayload: 1024 * 1024  // 限制单条消息 1MB
    });

    this.wss.on('connection', (ws, req) => {
      this.handleConnection(ws, req);
    });

    // 订阅 Redis 频道，接收其他实例广播的消息
    this.redisSub.subscribe('dashboard:push', (channel, msg) => {
      this.broadcastLocally(msg);
    });
  }

  private handleConnection(ws: WebSocket, req: Request): void {
    const connId = generateConnId();
    const state: ConnectionState = {
      id: connId,
      ws,
      dashboards: new Set(),
      lastSeqId: 0,
      buffer: [] // 发送缓冲区
    };
    this.connections.set(connId, state);

    ws.on('message', (data) => {
      const msg = JSON.parse(data.toString());

      switch (msg.type) {
        case 'subscribe':
          state.dashboards.add(msg.dashboardId);
          // 订阅时拉取增量：携带 lastSeqId
          this.sendMissingUpdates(connId, msg.dashboardId, msg.lastSeqId);
          break;
        case 'ack':
          // 客户端确认收到，移除缓冲区
          this.ackMessage(connId, msg.seqId);
          break;
      }
    });

    // 背压控制：检测发送缓冲区
    this.monitorBackpressure(connId);
  }

  private monitorBackpressure(connId: string): void {
    setInterval(() => {
      const state = this.connections.get(connId);
      if (!state) return;

      const buffered = state.ws.bufferedAmount;
      if (buffered > 256 * 1024) { // 超过 256KB 缓冲
        // 跳过低优先级消息，防止雪崩
        this.skipLowPriorityMessages(connId);
      }
    }, 1000);
  }
}

/**
 * OffscreenCanvas 渲染管线
 * 将 Canvas 渲染完全移出主线程
 */
class OffscreenRenderer {
  private worker: Worker;
  private canvas: HTMLCanvasElement;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.worker = new Worker(
      new URL('./render-worker.ts', import.meta.url),
      { type: 'module' }
    );

    // 将 Canvas 控制权转移给 Worker
    const offscreen = canvas.transferControlToOffscreen();
    this.worker.postMessage(
      { type: 'init', canvas: offscreen },
      [offscreen] // Transferable
    );

    this.worker.onmessage = (e) => {
      if (e.data.type === 'renderComplete') {
        // 渲染完成回调（如在渲染后更新 DOM overlay）
        this.onRenderComplete?.(e.data.meta);
      }
    };
  }

  // 主线程只负责发送数据和配置，不参与渲染
  updateData(data: RenderData): void {
    this.worker.postMessage({
      type: 'update',
      data: data.buffer, // 使用 ArrayBuffer 避免结构化克隆开销
      viewport: {
        width: this.canvas.clientWidth * devicePixelRatio,
        height: this.canvas.clientHeight * devicePixelRatio,
        dpr: devicePixelRatio
      }
    }, [data.buffer]); // Transferable 零拷贝
  }

  onRenderComplete?: (meta: RenderMeta) => void;
}

// Worker 线程内的渲染逻辑
// render-worker.ts
self.onmessage = (e) => {
  if (e.data.type === 'init') {
    const ctx = (e.data.canvas as OffscreenCanvas)
      .getContext('2d')!;
    startRenderLoop(ctx);
  }

  if (e.data.type === 'update') {
    pendingData = e.data.data;
    pendingViewport = e.data.viewport;
  }
};

function startRenderLoop(ctx: OffscreenCanvasRenderingContext2D) {
  const render = () => {
    if (pendingData) {
      ctx.clearRect(0, 0, pendingViewport.width, pendingViewport.height);
      drawHeatmap(ctx, pendingData, pendingViewport);
      pendingData = null;
      self.postMessage({ type: 'renderComplete' });
    }
    requestAnimationFrame(render);
  };
  render();
}

/**
 * 大数据量虚拟表格组件
 * 支持：动态行高、固定列、滚动锚定、键盘导航
 */
import { useVirtualizer } from '@tanstack/react-virtual';

interface VirtualTableProps<T> {
  data: T[];
  columns: ColumnDef<T>[];
  estimateRowHeight: (index: number) => number;
  overscan?: number; // 预渲染行数
}

function VirtualTable<T>({
  data,
  columns,
  estimateRowHeight,
  overscan = 20
}: VirtualTableProps<T>) {
  const parentRef = useRef<HTMLDivElement>(null);

  // 动态行高的虚拟化器
  const virtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    estimateSize: estimateRowHeight,
    overscan,
    // 测量后缓存实际行高，避免重测
    measureElement: (el) => el
  });

  // 预计算可见范围内的行数据（避免渲染时重复计算）
  const visibleRange = virtualizer.getVirtualItems();
  const virtualItems = useMemo(
    () => visibleRange.map((item) => ({
      ...item,
      data: data[item.index]
    })),
    [visibleRange, data]
  );

  return (
    <div ref={parentRef} className="virtual-table-container">
      <div
        style={{
          height: virtualizer.getTotalSize(),
          width: '100%',
          position: 'relative'
        }}
      >
        {virtualItems.map((virtualRow) => (
          <div
            key={virtualRow.key}
            data-index={virtualRow.index}
            ref={virtualizer.measureElement}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              transform: `translateY(${virtualRow.start}px)`,
              width: '100%'
            }}
          >
            <TableRow
              data={virtualRow.data}
              columns={columns}
              rowIndex={virtualRow.index}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

/**
 * 关键优化：滚动事件节流 + will-change 提示
 * 使用 IntersectionObserver 替代 scroll 事件监听
 */
// CSS 层面优化
// .virtual-table-container {
//   will-change: transform;
//   contain: strict;
//   content-visibility: auto;
// }