@quantlife/qlchart 0.0.1

package/src/plugins/indicators/IndicatorRenderer.ts

@@ -0,0 +1,350 @@
+import type { IChartApi, ISeriesApi, UTCTimestamp } from 'lightweight-charts';
+import type { SeriesManager } from '../../core/SeriesManager.js';
+import type { IndicatorConfig, IndicatorDataPoint, IndicatorRenderSpec } from '../../types/index.js';
+import { IndicatorType } from '../../types/index.js';
+import { OverlayIndicator } from './OverlayIndicator.js';
+import { PaneIndicator } from './PaneIndicator.js';
+import { AutoIndicatorRenderer } from './AutoIndicatorRenderer.js';
+
+/** 将指标数据点转换为 LWC 线数据 */
+function toLineData(data: IndicatorDataPoint[], valueKey: string): { time: UTCTimestamp; value: number }[] {
+  return data
+    .filter((d) => d.values[valueKey] != null)
+    .map((d) => ({
+      time: (d.time / 1000) as UTCTimestamp,
+      value: d.values[valueKey],
+    }));
+}
+
+/**
+ * IndicatorRenderer - 指标渲染器
+ * 统一管理指标的渲染和移除
+ *
+ * 双模式架构：
+ * - 有 renderSpec → AutoIndicatorRenderer（数据驱动，零硬编码）
+ * - 无 renderSpec → switch-case fallback（兼容旧模式）
+ *
+ * 重构：副图指标使用LWC v5原生pane系统，不再使用PaneChartPanel
+ */
+export class IndicatorRenderer {
+  private chart: IChartApi | null = null;
+  private seriesManager: SeriesManager | null = null;
+  /** indicatorConfig.id → series引用列表 */
+  private renderedSeries = new Map<string, Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }>>();
+  /** 副图pane索引分配器（0是主图，从1开始） */
+  private nextPaneIndex = 1;
+  /** indicatorConfig.id → paneIndex 映射 */
+  private indicatorPaneMap = new Map<string, number>();
+  /** ★ V2 新增：paneIndex → 主series 引用（副图的代表性series） */
+  private paneSeriesMap = new Map<number, ISeriesApi<any>>();
+  /** ★ 任务3-2.3：自动渲染引擎（数据驱动模式） */
+  private autoRenderer: AutoIndicatorRenderer | null = null;
+  /** ★ 任务3-2.3：使用 AutoRenderer 渲染的 spec key 集合 */
+  private autoRenderedKeys = new Set<string>();
+
+  setChart(chart: IChartApi): void {
+    this.chart = chart;
+    // ★ 任务3-2.3：初始化 AutoIndicatorRenderer
+    this.autoRenderer = new AutoIndicatorRenderer(chart);
+  }
+
+  setSeriesManager(sm: SeriesManager): void {
+    this.seriesManager = sm;
+  }
+
+  /**
+   * @deprecated 不再需要独立的paneChart，副图使用LWC v5原生pane
+   */
+  setPaneChart(_chart: IChartApi): void {
+    // no-op: 副图系统已重构为LWC v5原生pane
+  }
+
+  /**
+   * 渲染指标（双模式）
+   * - 有 config.renderSpec → 使用 AutoIndicatorRenderer（数据驱动）
+   * - 无 spec → fallback 到 switch-case
+   * @returns 渲染后创建的 seriesIds
+   */
+  renderIndicator(
+    config: IndicatorConfig & { renderSpec?: IndicatorRenderSpec },
+    data: IndicatorDataPoint[],
+  ): string[] {
+    if (!this.chart) throw new Error('Chart not initialized');
+
+    // ★ 任务3-2.3：数据驱动模式 — 有 spec 时走 AutoIndicatorRenderer
+    if (config.renderSpec && this.autoRenderer) {
+      this.autoRenderer.render(config.renderSpec, data);
+      this.autoRenderedKeys.add(config.id);
+      // 返回模拟的 seriesIds（AutoRenderer 内部管理 series）
+      return [`${config.id}_auto`];
+    }
+
+    // fallback：switch-case 模式（兼容旧指标）
+    let seriesRefs: Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> = [];
+
+    switch (config.name) {
+      // 主图叠加指标
+      case 'MA':
+        if (this.seriesManager) {
+          const ids = OverlayIndicator.renderMA(this.seriesManager, data, config.color);
+          return ids;
+        }
+        break;
+      case 'EMA':
+        if (this.seriesManager) {
+          const ids = OverlayIndicator.renderEMA(this.seriesManager, data, config.color);
+          return ids;
+        }
+        break;
+      case 'BOLL':
+        if (this.seriesManager) {
+          const ids = OverlayIndicator.renderBOLL(this.seriesManager, data);
+          return ids;
+        }
+        break;
+      // 副图指标 — 使用LWC v5原生pane
+      case 'MACD': {
+        const paneIndex = this.allocPaneIndex(config.id);
+        const lineData = [
+          toLineData(data, 'dif'),
+          toLineData(data, 'dea'),
+          toLineData(data, 'macd'),
+        ];
+        seriesRefs = PaneIndicator.renderMACD(this.chart, paneIndex, lineData);
+        this.setPaneHeight(paneIndex, 0.25);
+        // ★ V2: 注册 pane 代表 series
+        if (seriesRefs.length > 0) {
+          this.paneSeriesMap.set(paneIndex, seriesRefs[0].series);
+        }
+        break;
+      }
+      case 'RSI': {
+        const paneIndex = this.allocPaneIndex(config.id);
+        seriesRefs = PaneIndicator.renderRSI(this.chart, paneIndex, toLineData(data, 'rsi'), config.color);
+        this.setPaneHeight(paneIndex, 0.2);
+        // ★ V2: 注册 pane 代表 series
+        if (seriesRefs.length > 0) {
+          this.paneSeriesMap.set(paneIndex, seriesRefs[0].series);
+        }
+        break;
+      }
+      case 'KDJ': {
+        const paneIndex = this.allocPaneIndex(config.id);
+        const lineData = [
+          toLineData(data, 'k'),
+          toLineData(data, 'd'),
+          toLineData(data, 'j'),
+        ];
+        seriesRefs = PaneIndicator.renderKDJ(this.chart, paneIndex, lineData);
+        this.setPaneHeight(paneIndex, 0.2);
+        // ★ V2: 注册 pane 代表 series
+        if (seriesRefs.length > 0) {
+          this.paneSeriesMap.set(paneIndex, seriesRefs[0].series);
+        }
+        break;
+      }
+      case 'CCI': {
+        const paneIndex = this.allocPaneIndex(config.id);
+        seriesRefs = PaneIndicator.renderCCI(this.chart, paneIndex, toLineData(data, 'cci'), config.color);
+        this.setPaneHeight(paneIndex, 0.2);
+        // ★ V2: 注册 pane 代表 series
+        if (seriesRefs.length > 0) {
+          this.paneSeriesMap.set(paneIndex, seriesRefs[0].series);
+        }
+        break;
+      }
+      default:
+        console.warn(`[IndicatorRenderer] Unknown indicator: ${config.name}`);
+    }
+
+    const ids = seriesRefs.map(r => r.id);
+    this.renderedSeries.set(config.id, seriesRefs);
+    return ids;
+  }
+
+  /**
+   * 分配pane索引（同一指标复用同一pane）
+   */
+  private allocPaneIndex(indicatorId: string): number {
+    let paneIndex = this.indicatorPaneMap.get(indicatorId);
+    if (paneIndex === undefined) {
+      paneIndex = this.nextPaneIndex++;
+      this.indicatorPaneMap.set(indicatorId, paneIndex);
+    }
+    return paneIndex;
+  }
+
+  /**
+   * ★ V5 需求3：设置pane拉伸比例（使用 LWC v5 setStretchFactor）
+   * 主图保持大比例，副图保持小比例，确保时间轴有空间
+   */
+  private setPaneHeight(paneIndex: number, ratio: number): void {
+    if (!this.chart) return;
+    try {
+      const panes = (this.chart as any).panes?.();
+      if (!panes || !panes[paneIndex]) return;
+
+      // 使用 setStretchFactor 设置比例（LWC v5 推荐）
+      if (typeof panes[paneIndex].setStretchFactor === 'function') {
+        panes[paneIndex].setStretchFactor(ratio);
+      } else {
+        // fallback：setHeight
+        const mainHeight = panes[0]?.getHeight?.() ?? 300;
+        panes[paneIndex].setHeight?.(mainHeight * ratio);
+      }
+
+      // ★ 确保主图占比最大
+      if (paneIndex > 0 && typeof panes[0]?.setStretchFactor === 'function') {
+        // 统计当前副图数量，重新分配主图比例
+        // 主图应占 60%-70% 的空间
+        const subPaneCount = panes.length - 1; // 减去主图
+        const mainStretch = Math.max(0.4, 1 - subPaneCount * 0.15);
+        panes[0].setStretchFactor(mainStretch);
+      }
+    } catch {
+      // 防御性
+    }
+  }
+
+  /**
+   * 更新指标（移除旧的，重新渲染）
+   */
+  updateIndicator(
+    config: IndicatorConfig,
+    data: IndicatorDataPoint[],
+  ): string[] {
+    this.removeIndicator(config.id);
+    return this.renderIndicator(config, data);
+  }
+
+  /**
+   * 移除指标
+   */
+  removeIndicator(indicatorId: string): void {
+    // ★ 任务3-2.3：优先检查是否为 AutoRenderer 渲染的
+    if (this.autoRenderedKeys.has(indicatorId)) {
+      this.autoRenderer?.remove(indicatorId);
+      this.autoRenderedKeys.delete(indicatorId);
+      return;
+    }
+
+    const seriesRefs = this.renderedSeries.get(indicatorId);
+    if (!seriesRefs || !this.chart) return;
+
+    for (const ref of seriesRefs) {
+      try {
+        this.chart.removeSeries(ref.series);
+      } catch {
+        // series可能已被chart销毁
+      }
+    }
+
+    this.renderedSeries.delete(indicatorId);
+
+    // 释放pane索引
+    const paneIndex = this.indicatorPaneMap.get(indicatorId);
+    if (paneIndex !== undefined) {
+      this.paneSeriesMap.delete(paneIndex);  // ★ V2: 清理 series 映射
+      this.indicatorPaneMap.delete(indicatorId);
+
+      // ★ V5 需求2：使用 LWC v5 原生 removePane API 彻底删除副图面板
+      if (paneIndex > 0 && this.chart) {
+        const stillInUse = Array.from(this.indicatorPaneMap.values())
+          .some(idx => idx === paneIndex);
+
+        if (!stillInUse) {
+          try {
+            // 先移除该 pane 上的所有 series（防御性）
+            const allPanes = (this.chart as any).panes?.() ?? [];
+            // 计算实际 pane 索引（paneIndex 可能因为之前的删除而偏移）
+            // LWC v5 removePane 接受 pane index
+            (this.chart as any).removePane?.(paneIndex);
+          } catch {
+            console.warn(`[IndicatorRenderer] removePane(${paneIndex}) failed`);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 获取已渲染的指标ID列表
+   */
+  getRenderedIndicatorIds(): string[] {
+    return Array.from(this.renderedSeries.keys());
+  }
+
+  /**
+   * 清理所有渲染的指标
+   */
+  clearAll(): void {
+    // ★ 任务3-2.3：清理 AutoRenderer
+    this.autoRenderer?.removeAll();
+    this.autoRenderedKeys.clear();
+
+    for (const [indicatorId] of this.renderedSeries) {
+      this.removeIndicator(indicatorId);
+    }
+    this.renderedSeries.clear();
+    this.indicatorPaneMap.clear();
+    this.paneSeriesMap.clear();
+    this.nextPaneIndex = 1;
+
+    // ★ V5 需求2：删除所有非主图 pane（LWC v5 removePane API）
+    if (this.chart) {
+      try {
+        const panes = (this.chart as any).panes?.() ?? [];
+        // 从后往前删除，避免索引偏移
+        for (let i = panes.length - 1; i >= 1; i--) {
+          (this.chart as any).removePane?.(i);
+        }
+      } catch {
+        console.warn('[IndicatorRenderer] clearAll: removePane failed');
+      }
+      // 保持时间轴对齐
+      try {
+        this.chart.timeScale().fitContent();
+      } catch {
+        // 防御性
+      }
+    }
+  }
+
+  // ════════════════════════════════════════════
+  // ★ V2 新增：Pane Series 查询接口
+  // ════════════════════════════════════════════
+
+  /**
+   * ★ V2: 获取指定 pane 的代表 series
+   */
+  getPaneSeries(paneIndex: number): ISeriesApi<any> | null {
+    return this.paneSeriesMap.get(paneIndex) ?? null;
+  }
+
+  /**
+   * ★ V2: 根据 series 反查 paneIndex
+   */
+  getPaneIndexBySeries(series: ISeriesApi<any>): number {
+    for (const [idx, s] of this.paneSeriesMap) {
+      if (s === series) return idx;
+    }
+    return 0; // 主图
+  }
+
+  /**
+   * ★ V5 需求1: 根据指标ID获取 paneIndex
+   */
+  getPaneIndexByIndicatorId(indicatorId: string): number {
+    return this.indicatorPaneMap.get(indicatorId) ?? 0;
+  }
+
+  /**
+   * ★ V2: 获取所有已注册的 pane 信息
+   */
+  getRegisteredPanes(): Array<{ paneIndex: number; hasSeries: boolean }> {
+    return Array.from(this.paneSeriesMap.entries()).map(([idx, series]) => ({
+      paneIndex: idx,
+      hasSeries: !!series,
+    }));
+  }
+}

package/src/plugins/indicators/OverlayIndicator.ts

@@ -0,0 +1,114 @@
+import type { ISeriesApi, SeriesType as LWCSeriesType, UTCTimestamp } from 'lightweight-charts';
+import type { SeriesManager } from '../../core/SeriesManager.js';
+import type { IndicatorDataPoint } from '../../types/index.js';
+import { SeriesType } from '../../types/index.js';
+
+/** 将指标数据点转换为 LWC 线数据 */
+function toLineData(data: IndicatorDataPoint[], valueKey: string): { time: UTCTimestamp; value: number }[] {
+  return data
+    .filter((d) => d.values[valueKey] != null)
+    .map((d) => ({
+      time: (d.time / 1000) as UTCTimestamp,
+      value: d.values[valueKey],
+    }));
+}
+
+/**
+ * OverlayIndicator - 主图叠加指标渲染
+ * MA, EMA, BOLL 等
+ */
+export class OverlayIndicator {
+  /**
+   * 渲染 MA 指标
+   * @returns seriesId[]
+   */
+  static renderMA(
+    seriesManager: SeriesManager,
+    data: IndicatorDataPoint[],
+    color = '#FF6D00',
+  ): string[] {
+    const ids: string[] = [];
+    const priceScaleId = `ind_ma_${Date.now()}`;
+
+    const series = seriesManager.addOverlaySeries(
+      SeriesType.Line,
+      {
+        color,
+        lineWidth: 1,
+        priceLineVisible: false,
+        lastValueVisible: false,
+        priceScaleId,
+      },
+    );
+
+    if (series) {
+      const lineData = toLineData(data, 'ma');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (series as any).setData(lineData);
+      ids.push(`ov_ma_${Date.now()}`);
+    }
+
+    return ids;
+  }
+
+  /**
+   * 渲染 EMA 指标
+   */
+  static renderEMA(
+    seriesManager: SeriesManager,
+    data: IndicatorDataPoint[],
+    color = '#2962FF',
+  ): string[] {
+    const ids: string[] = [];
+
+    const series = seriesManager.addOverlaySeries(
+      SeriesType.Line,
+      {
+        color,
+        lineWidth: 1,
+        priceLineVisible: false,
+        lastValueVisible: false,
+      },
+    );
+
+    if (series) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (series as any).setData(toLineData(data, 'ema'));
+      ids.push(`ov_ema_${Date.now()}`);
+    }
+
+    return ids;
+  }
+
+  /**
+   * 渲染 BOLL 布林带（3条线）
+   */
+  static renderBOLL(
+    seriesManager: SeriesManager,
+    data: IndicatorDataPoint[],
+    colors = ['#FF6D00', '#2962FF', '#FF6D00'],
+  ): string[] {
+    const ids: string[] = [];
+
+    const keys = ['upper', 'middle', 'lower'] as const;
+    for (let i = 0; i < keys.length; i++) {
+      const series = seriesManager.addOverlaySeries(
+        SeriesType.Line,
+        {
+          color: colors[i],
+          lineWidth: 1,
+          priceLineVisible: false,
+          lastValueVisible: false,
+        },
+      );
+
+      if (series) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (series as any).setData(toLineData(data, keys[i]));
+        ids.push(`ov_boll_${keys[i]}_${Date.now()}`);
+      }
+    }
+
+    return ids;
+  }
+}

package/src/plugins/indicators/PaneIndicator.ts

@@ -0,0 +1,137 @@
+import type { IChartApi, UTCTimestamp } from 'lightweight-charts';
+import { LineSeries, HistogramSeries } from 'lightweight-charts';
+
+/** 副图指标线数据 */
+export interface PaneLineData {
+  key: string;
+  label: string;
+  data: Array<{ time: UTCTimestamp; value: number }>;
+  renderType: 'line' | 'histogram' | 'area';
+  color: string;
+  lineWidth?: number;
+}
+
+/**
+ * PaneIndicator - 副图指标渲染（LWC v5原生pane系统）
+ *
+ * 使用 chart.addSeries(def, options, paneIndex) 将series添加到指定pane
+ * 不再需要独立的PaneChartPanel
+ */
+export class PaneIndicator {
+  /**
+   * 在指定pane中渲染指标线
+   * @returns 创建的series引用列表
+   */
+  static render(
+    chart: IChartApi,
+    paneIndex: number,
+    lines: PaneLineData[],
+    priceScaleId?: string,
+  ): Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> {
+    const results: Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> = [];
+    const scaleId = priceScaleId ?? `pane_${paneIndex}_${Date.now()}`;
+
+    for (const line of lines) {
+      const definition = line.renderType === 'histogram' ? HistogramSeries : LineSeries;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const series = chart.addSeries(definition as any, {
+        color: line.color,
+        lineWidth: (line.lineWidth ?? 1) as any,
+        priceScaleId: scaleId,
+        priceLineVisible: true,
+        lastValueVisible: true,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any, paneIndex);
+
+      if (line.renderType === 'histogram') {
+        // 柱状图：按正负值着色
+        const histData = line.data.map(d => ({
+          ...d,
+          color: d.value >= 0 ? line.color : '#ef5350',
+        }));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (series as any).setData(histData);
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (series as any).setData(line.data);
+      }
+
+      results.push({
+        id: `${scaleId}_${line.key}_${Date.now()}`,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        series: series as any,
+      });
+    }
+
+    // 设置pane的priceScale边距
+    chart.priceScale(scaleId).applyOptions({
+      scaleMargins: { top: 0.1, bottom: 0 },
+      borderVisible: true,
+    });
+
+    return results;
+  }
+
+  /**
+   * 渲染 MACD（2条线 + 1个柱状图）
+   */
+  static renderMACD(
+    chart: IChartApi,
+    paneIndex: number,
+    data: Array<{ time: UTCTimestamp; value: number }>[],
+    colors = ['#2962FF', '#FF6D00', '#26a69a'],
+  ): Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> {
+    const lines: PaneLineData[] = [
+      { key: 'dif', label: 'DIF', data: data[0] ?? [], renderType: 'line', color: colors[0], lineWidth: 1 },
+      { key: 'dea', label: 'DEA', data: data[1] ?? [], renderType: 'line', color: colors[1], lineWidth: 1 },
+      { key: 'macd', label: 'MACD', data: data[2] ?? [], renderType: 'histogram', color: colors[2] },
+    ];
+    return PaneIndicator.render(chart, paneIndex, lines);
+  }
+
+  /**
+   * 渲染 RSI
+   */
+  static renderRSI(
+    chart: IChartApi,
+    paneIndex: number,
+    data: Array<{ time: UTCTimestamp; value: number }>,
+    color = '#AB47BC',
+  ): Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> {
+    return PaneIndicator.render(chart, paneIndex, [
+      { key: 'rsi', label: 'RSI', data, renderType: 'line', color, lineWidth: 1 },
+    ]);
+  }
+
+  /**
+   * 渲染 KDJ（3条线）
+   */
+  static renderKDJ(
+    chart: IChartApi,
+    paneIndex: number,
+    data: Array<{ time: UTCTimestamp; value: number }>[],
+    colors = ['#FFFFFF', '#FFFF00', '#FF00FF'],
+  ): Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> {
+    const lines: PaneLineData[] = [
+      { key: 'k', label: 'K', data: data[0] ?? [], renderType: 'line', color: colors[0], lineWidth: 1 },
+      { key: 'd', label: 'D', data: data[1] ?? [], renderType: 'line', color: colors[1], lineWidth: 1 },
+      { key: 'j', label: 'J', data: data[2] ?? [], renderType: 'line', color: colors[2], lineWidth: 1 },
+    ];
+    return PaneIndicator.render(chart, paneIndex, lines);
+  }
+
+  /**
+   * 渲染 CCI
+   */
+  static renderCCI(
+    chart: IChartApi,
+    paneIndex: number,
+    data: Array<{ time: UTCTimestamp; value: number }>,
+    color = '#00E676',
+  ): Array<{ id: string; series: import('lightweight-charts').ISeriesApi<any> }> {
+    return PaneIndicator.render(chart, paneIndex, [
+      { key: 'cci', label: 'CCI', data, renderType: 'line', color, lineWidth: 1 },
+    ]);
+  }
+}

package/src/plugins/indicators/index.ts

@@ -0,0 +1,4 @@
+export { IndicatorRenderer } from './IndicatorRenderer.js';
+export { OverlayIndicator } from './OverlayIndicator.js';
+export { PaneIndicator } from './PaneIndicator.js';
+export { AutoIndicatorRenderer } from './AutoIndicatorRenderer.js';