@quantlife/qlchart 0.0.1

package/src/plugins/replay/KlineReplay.ts

@@ -0,0 +1,163 @@
+import type { ISeriesApi, SeriesType as LWCSeriesType, Time } from 'lightweight-charts';
+
+/** K线回放选项 */
+export interface KlineReplayOptions {
+  /** 每根K线的间隔时间(ms)，默认 1000 */
+  speed: number;
+}
+
+/** K线回放引擎 */
+export class KlineReplay {
+  private allData: any[] = [];
+  private currentIndex: number = -1;
+  private timerId: ReturnType<typeof setInterval> | null = null;
+  private speed: number = 1000;
+  private series: ISeriesApi<LWCSeriesType> | null = null;
+  private onProgress: ((current: number, total: number) => void) | null = null;
+
+  /** 绑定序列 */
+  attach(series: ISeriesApi<LWCSeriesType>): void {
+    this.series = series;
+  }
+
+  /** 设置进度回调 */
+  setOnProgress(cb: (current: number, total: number) => void): void {
+    this.onProgress = cb;
+  }
+
+  /** 加载全部K线数据（回放前调用） */
+  load(data: any[]): void {
+    this.allData = data;
+    this.currentIndex = -1;
+  }
+
+  /** 开始回放：从第一根开始逐根播放 */
+  play(): void {
+    if (!this.series || this.allData.length === 0) return;
+
+    this.currentIndex = 0;
+    // 只显示第一根
+    (this.series as any).setData([this.allData[0]]);
+    this.emitProgress();
+
+    this.startTimer();
+  }
+
+  /** 暂停回放 */
+  pause(): void {
+    this.clearTimer();
+  }
+
+  /** 继续回放 */
+  resume(): void {
+    if (!this.series || this.allData.length === 0) return;
+    if (this.currentIndex < 0) {
+      this.currentIndex = 0;
+    }
+    this.startTimer();
+  }
+
+  /** 停止回放并恢复全部数据 */
+  stop(): void {
+    this.clearTimer();
+    if (this.series && this.allData.length > 0) {
+      (this.series as any).setData(this.allData);
+    }
+    this.currentIndex = -1;
+    this.emitProgress();
+  }
+
+  /** 手动步进到下一根 */
+  next(): void {
+    if (!this.series || this.allData.length === 0) return;
+    if (this.currentIndex < 0) this.currentIndex = 0;
+
+    const nextIndex = this.currentIndex + 1;
+    if (nextIndex >= this.allData.length) return;
+
+    this.currentIndex = nextIndex;
+    (this.series as any).update(this.allData[this.currentIndex]);
+    this.emitProgress();
+  }
+
+  /** 手动步进到上一根 */
+  prev(): void {
+    if (!this.series || this.allData.length === 0 || this.currentIndex <= 0) return;
+
+    const prevIndex = this.currentIndex - 1;
+    // 需要重新 setData 到 prevIndex 位置
+    this.currentIndex = prevIndex;
+    (this.series as any).setData(this.allData.slice(0, this.currentIndex + 1));
+    this.emitProgress();
+  }
+
+  /** 跳转到指定索引位置 */
+  goto(index: number): void {
+    if (!this.series || this.allData.length === 0) return;
+
+    const clampedIndex = Math.max(0, Math.min(index, this.allData.length - 1));
+    this.currentIndex = clampedIndex;
+    (this.series as any).setData(this.allData.slice(0, this.currentIndex + 1));
+    this.emitProgress();
+  }
+
+  /** 设置播放速度 */
+  setSpeed(ms: number): void {
+    this.speed = Math.max(50, Math.min(ms, 5000));
+    // 如果正在播放，重启定时器
+    if (this.timerId !== null) {
+      this.clearTimer();
+      this.startTimer();
+    }
+  }
+
+  /** 获取当前进度 */
+  getProgress(): { current: number; total: number } {
+    return {
+      current: Math.max(0, this.currentIndex + 1),
+      total: this.allData.length,
+    };
+  }
+
+  /** 是否正在播放 */
+  get isPlaying(): boolean {
+    return this.timerId !== null;
+  }
+
+  /** 销毁，清理定时器 */
+  dispose(): void {
+    this.clearTimer();
+    this.series = null;
+    this.allData = [];
+    this.currentIndex = -1;
+    this.onProgress = null;
+  }
+
+  private startTimer(): void {
+    this.clearTimer();
+    this.timerId = setInterval(() => {
+      const nextIndex = this.currentIndex + 1;
+      if (nextIndex >= this.allData.length) {
+        this.clearTimer();
+        this.emitProgress();
+        return;
+      }
+      this.currentIndex = nextIndex;
+      (this.series as any).update(this.allData[this.currentIndex]);
+      this.emitProgress();
+    }, this.speed);
+  }
+
+  private clearTimer(): void {
+    if (this.timerId !== null) {
+      clearInterval(this.timerId);
+      this.timerId = null;
+    }
+  }
+
+  private emitProgress(): void {
+    if (this.onProgress) {
+      this.onProgress(this.currentIndex + 1, this.allData.length);
+    }
+  }
+}

package/src/plugins/replay/index.ts

@@ -0,0 +1,2 @@
+export { KlineReplay } from './KlineReplay.js';
+export type { KlineReplayOptions } from './KlineReplay.js';

package/src/plugins/screenshot/ScreenshotUtil.ts

@@ -0,0 +1,123 @@
+import type { IChartApi } from 'lightweight-charts';
+
+/**
+ * 截图导出工具
+ * 从 lightweight-charts v5 的 DOM 容器中获取 canvas 并导出
+ */
+export class ScreenshotUtil {
+  /**
+   * 从 chart 实例获取 canvas 元素
+   * lightweight-charts v5 没有 takeScreenshot()，需要从 DOM 获取
+   */
+  private static getChartCanvas(chart: IChartApi): HTMLCanvasElement | null {
+    // v5 内部 API：尝试获取 chart widget 的 canvas
+    const chartWidget = (chart as any)?._chartWidget;
+    if (chartWidget?.canvasElement) {
+      const canvas = chartWidget.canvasElement();
+      if (canvas instanceof HTMLCanvasElement) return canvas;
+    }
+
+    // 备选：通过 DOM 查找 chart 容器中的 canvas
+    // chart 内部会引用 container element
+    const paneWidget = (chart as any)?._paneWidget;
+    if (paneWidget?._canvasElement) {
+      const canvas = paneWidget._canvasElement;
+      if (canvas instanceof HTMLCanvasElement) return canvas;
+    }
+
+    // 最终备选：尝试从内部结构获取
+    const internalChart = (chart as any)?._private;
+    if (internalChart?.canvasElement) {
+      return internalChart.canvasElement;
+    }
+
+    return null;
+  }
+
+  /**
+   * 从 chart 容器 DOM 获取所有 canvas 并合并
+   */
+  private static getCanvasFromContainer(container: HTMLElement): HTMLCanvasElement | null {
+    const canvases = container.querySelectorAll('canvas');
+    return canvases.length > 0 ? canvases[0] : null;
+  }
+
+  /**
+   * 截取图表为 PNG base64 data URL
+   */
+  static toPng(chart: IChartApi, container?: HTMLElement): string {
+    // 首先尝试从 chart 实例获取
+    let canvas = ScreenshotUtil.getChartCanvas(chart);
+
+    // 如果失败，尝试从容器 DOM 获取
+    if (!canvas && container) {
+      canvas = ScreenshotUtil.getCanvasFromContainer(container);
+    }
+
+    if (!canvas) {
+      console.warn('[ScreenshotUtil] Cannot find chart canvas');
+      return '';
+    }
+
+    try {
+      return canvas.toDataURL('image/png');
+    } catch (err) {
+      console.error('[ScreenshotUtil] Failed to export canvas:', err);
+      return '';
+    }
+  }
+
+  /**
+   * 截取并下载为 PNG 文件
+   */
+  static download(chart: IChartApi, container?: HTMLElement, filename?: string): void {
+    const dataUrl = ScreenshotUtil.toPng(chart, container);
+    if (!dataUrl) {
+      console.warn('[ScreenshotUtil] No screenshot data available');
+      return;
+    }
+
+    const link = document.createElement('a');
+    link.download = filename ?? `chart_${Date.now()}.png`;
+    link.href = dataUrl;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  /**
+   * 截取并复制到剪贴板
+   */
+  static async copyToClipboard(chart: IChartApi, container?: HTMLElement): Promise<boolean> {
+    let canvas = ScreenshotUtil.getChartCanvas(chart);
+
+    if (!canvas && container) {
+      canvas = ScreenshotUtil.getCanvasFromContainer(container);
+    }
+
+    if (!canvas) {
+      console.warn('[ScreenshotUtil] Cannot find chart canvas for clipboard');
+      return false;
+    }
+
+    try {
+      const blob = await new Promise<Blob | null>((resolve) =>
+        canvas!.toBlob(resolve, 'image/png'),
+      );
+
+      if (!blob) {
+        console.warn('[ScreenshotUtil] Failed to create blob from canvas');
+        return false;
+      }
+
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob }),
+      ]);
+
+      return true;
+    } catch (err) {
+      console.error('[ScreenshotUtil] Failed to copy to clipboard:', err);
+      return false;
+    }
+  }
+}

package/src/plugins/screenshot/index.ts

@@ -0,0 +1 @@
+export { ScreenshotUtil } from './ScreenshotUtil.js';

package/src/plugins/series/HollowCandlestickSeries.ts

@@ -0,0 +1,111 @@
+import type {
+  ICustomSeriesPaneView,
+  ICustomSeriesPaneRenderer,
+  PaneRendererCustomData,
+  CustomData,
+  CustomSeriesWhitespaceData,
+  CustomSeriesPricePlotValues,
+  PriceToCoordinateConverter,
+  CustomSeriesOptions,
+  Coordinate,
+  CustomSeriesHitTestResult,
+} from 'lightweight-charts';
+
+/** 空心蜡烛图数据 */
+export interface HollowCandlestickData extends CustomData {
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+}
+
+/** 渲染器 */
+class HollowCandlestickRenderer implements ICustomSeriesPaneRenderer {
+  private _data: PaneRendererCustomData<unknown, HollowCandlestickData> | null = null;
+
+  setData(data: PaneRendererCustomData<unknown, HollowCandlestickData> | null): void {
+    this._data = data;
+  }
+
+  draw(
+    target: any,
+    priceConverter: PriceToCoordinateConverter,
+    _isHovered: boolean,
+    _hitTestData?: unknown,
+  ): void {
+    if (!this._data || !this._data.bars.length) return;
+
+    target.useMediaCoordinateSpace((scope: { context: CanvasRenderingContext2D; mediaSize: { width: number; height: number } }) => {
+      const ctx = scope.context;
+      const bars = this._data!.bars;
+      const barSpacing = this._data!.barSpacing;
+
+      // 计算蜡烛宽度（不超过间距的 80%）
+      const candleWidth = Math.max(1, Math.floor(barSpacing * 0.8));
+      const halfCandle = candleWidth / 2;
+
+      for (const bar of bars) {
+        const { open, high, low, close } = bar.originalData;
+        const x = bar.x;
+
+        const isUp = close >= open;
+
+        // 颜色：涨绿跌红
+        const color = isUp ? '#26a69a' : '#ef5350';
+
+        // 坐标转换
+        const openY = priceConverter(open);
+        const closeY = priceConverter(close);
+        const highY = priceConverter(high);
+        const lowY = priceConverter(low);
+
+        if (openY === null || closeY === null || highY === null || lowY === null) continue;
+
+        // 画影线（上下影线）
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(x, highY);
+        ctx.lineTo(x, lowY);
+        ctx.stroke();
+
+        // 画空心矩形（实体）
+        const bodyTop = Math.min(openY, closeY);
+        const bodyBottom = Math.max(openY, closeY);
+        const bodyHeight = Math.max(1, bodyBottom - bodyTop);
+
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x - halfCandle, bodyTop, candleWidth, bodyHeight);
+      }
+    });
+  }
+}
+
+/** 空心蜡烛图 PaneView */
+export class HollowCandlestickSeries implements ICustomSeriesPaneView<unknown, HollowCandlestickData, CustomSeriesOptions> {
+  private _renderer = new HollowCandlestickRenderer();
+
+  defaultOptions(): CustomSeriesOptions {
+    return {} as CustomSeriesOptions;
+  }
+
+  renderer(): ICustomSeriesPaneRenderer {
+    return this._renderer;
+  }
+
+  update(
+    data: PaneRendererCustomData<unknown, HollowCandlestickData>,
+    _seriesOptions: CustomSeriesOptions,
+  ): void {
+    this._renderer.setData(data);
+  }
+
+  priceValueBuilder(plotRow: HollowCandlestickData): CustomSeriesPricePlotValues {
+    return [plotRow.high, plotRow.low, plotRow.close];
+  }
+
+  isWhitespace(data: HollowCandlestickData | CustomSeriesWhitespaceData<unknown>): data is CustomSeriesWhitespaceData<unknown> {
+    return !('open' in data && 'close' in data);
+  }
+}

package/src/plugins/series/RenkoSeries.ts

@@ -0,0 +1,104 @@
+import type {
+  ICustomSeriesPaneView,
+  ICustomSeriesPaneRenderer,
+  PaneRendererCustomData,
+  CustomData,
+  CustomSeriesWhitespaceData,
+  CustomSeriesPricePlotValues,
+  PriceToCoordinateConverter,
+  CustomSeriesOptions,
+  Coordinate,
+  CustomSeriesHitTestResult,
+} from 'lightweight-charts';
+
+/** 砖形图数据（后端提供） */
+export interface RenkoData extends CustomData {
+  /** 砖块开盘价 */
+  open: number;
+  /** 砖块收盘价 */
+  close: number;
+  /** 方向 */
+  type: 'up' | 'down';
+}
+
+/** 砖形图渲染器 */
+class RenkoRenderer implements ICustomSeriesPaneRenderer {
+  private _data: PaneRendererCustomData<unknown, RenkoData> | null = null;
+
+  setData(data: PaneRendererCustomData<unknown, RenkoData> | null): void {
+    this._data = data;
+  }
+
+  draw(
+    target: any,
+    priceConverter: PriceToCoordinateConverter,
+    _isHovered: boolean,
+    _hitTestData?: unknown,
+  ): void {
+    if (!this._data || !this._data.bars.length) return;
+
+    target.useMediaCoordinateSpace((scope: { context: CanvasRenderingContext2D; mediaSize: { width: number; height: number } }) => {
+      const ctx = scope.context;
+      const bars = this._data!.bars;
+      const barSpacing = this._data!.barSpacing;
+
+      // 砖块宽度为间距的 80%
+      const brickWidth = Math.max(2, Math.floor(barSpacing * 0.8));
+      const halfBrick = brickWidth / 2;
+
+      for (const bar of bars) {
+        const { open, close, type } = bar.originalData;
+        const x = bar.x;
+
+        const isUp = type === 'up';
+        const fillColor = isUp ? '#26a69a' : '#ef5350';
+        const borderColor = isUp ? '#2bbd8f' : '#ff6b6b';
+
+        const openY = priceConverter(open);
+        const closeY = priceConverter(close);
+
+        if (openY === null || closeY === null) continue;
+
+        const brickTop = Math.min(openY, closeY);
+        const brickHeight = Math.max(1, Math.abs(closeY - openY));
+
+        // 填充矩形
+        ctx.fillStyle = fillColor;
+        ctx.fillRect(x - halfBrick, brickTop, brickWidth, brickHeight);
+
+        // 边框
+        ctx.strokeStyle = borderColor;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x - halfBrick, brickTop, brickWidth, brickHeight);
+      }
+    });
+  }
+}
+
+/** 砖形图 PaneView */
+export class RenkoSeries implements ICustomSeriesPaneView<unknown, RenkoData, CustomSeriesOptions> {
+  private _renderer = new RenkoRenderer();
+
+  defaultOptions(): CustomSeriesOptions {
+    return {} as CustomSeriesOptions;
+  }
+
+  renderer(): ICustomSeriesPaneRenderer {
+    return this._renderer;
+  }
+
+  update(
+    data: PaneRendererCustomData<unknown, RenkoData>,
+    _seriesOptions: CustomSeriesOptions,
+  ): void {
+    this._renderer.setData(data);
+  }
+
+  priceValueBuilder(plotRow: RenkoData): CustomSeriesPricePlotValues {
+    return [plotRow.open, plotRow.close];
+  }
+
+  isWhitespace(data: RenkoData | CustomSeriesWhitespaceData<unknown>): data is CustomSeriesWhitespaceData<unknown> {
+    return !('open' in data && 'close' in data);
+  }
+}

package/src/plugins/series/VolumeCandlestickSeries.ts

@@ -0,0 +1,127 @@
+import type {
+  ICustomSeriesPaneView,
+  ICustomSeriesPaneRenderer,
+  PaneRendererCustomData,
+  CustomData,
+  CustomSeriesWhitespaceData,
+  CustomSeriesPricePlotValues,
+  PriceToCoordinateConverter,
+  CustomSeriesOptions,
+} from 'lightweight-charts';
+
+/** 成交量蜡烛图数据 */
+export interface VolumeCandlestickData extends CustomData {
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume: number;
+}
+
+/** 成交量蜡烛图渲染器 */
+class VolumeCandlestickRenderer implements ICustomSeriesPaneRenderer {
+  private _data: PaneRendererCustomData<unknown, VolumeCandlestickData> | null = null;
+
+  setData(data: PaneRendererCustomData<unknown, VolumeCandlestickData> | null): void {
+    this._data = data;
+  }
+
+  draw(
+    target: any,
+    priceConverter: PriceToCoordinateConverter,
+    _isHovered: boolean,
+    _hitTestData?: unknown,
+  ): void {
+    if (!this._data || !this._data.bars.length) return;
+
+    target.useMediaCoordinateSpace((scope: { context: CanvasRenderingContext2D; mediaSize: { width: number; height: number } }) => {
+      const ctx = scope.context;
+      const bars = this._data!.bars;
+      const barSpacing = this._data!.barSpacing;
+
+      // 计算最大成交量
+      let maxVolume = 0;
+      for (const bar of bars) {
+        const vol = bar.originalData.volume ?? 0;
+        if (vol > maxVolume) maxVolume = vol;
+      }
+      if (maxVolume === 0) maxVolume = 1;
+
+      const maxCandleWidth = Math.max(1, Math.floor(barSpacing * 0.8));
+      const minCandleWidth = Math.max(1, Math.floor(barSpacing * 0.15));
+
+      for (const bar of bars) {
+        const { open, high, low, close, volume } = bar.originalData;
+        const x = bar.x;
+        const isUp = close >= open;
+
+        const color = isUp ? '#26a69a' : '#ef5350';
+
+        // 坐标转换
+        const openY = priceConverter(open);
+        const closeY = priceConverter(close);
+        const highY = priceConverter(high);
+        const lowY = priceConverter(low);
+
+        if (openY === null || closeY === null || highY === null || lowY === null) continue;
+
+        // 蜡烛宽度按 volume/maxVolume 比例缩放
+        const volRatio = (volume ?? 0) / maxVolume;
+        const candleWidth = Math.max(minCandleWidth, Math.floor(maxCandleWidth * volRatio));
+        const halfCandle = candleWidth / 2;
+
+        // 画影线
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(x, highY);
+        ctx.lineTo(x, lowY);
+        ctx.stroke();
+
+        // 画实体（涨实跌空）
+        const bodyTop = Math.min(openY, closeY);
+        const bodyBottom = Math.max(openY, closeY);
+        const bodyHeight = Math.max(1, bodyBottom - bodyTop);
+
+        if (isUp) {
+          // 涨 — 实心
+          ctx.fillStyle = color;
+          ctx.fillRect(x - halfCandle, bodyTop, candleWidth, bodyHeight);
+        } else {
+          // 跌 — 空心
+          ctx.strokeStyle = color;
+          ctx.lineWidth = 1;
+          ctx.strokeRect(x - halfCandle, bodyTop, candleWidth, bodyHeight);
+        }
+      }
+    });
+  }
+}
+
+/** 成交量蜡烛图 PaneView */
+export class VolumeCandlestickSeries implements ICustomSeriesPaneView<unknown, VolumeCandlestickData, CustomSeriesOptions> {
+  private _renderer = new VolumeCandlestickRenderer();
+
+  defaultOptions(): CustomSeriesOptions {
+    return {} as CustomSeriesOptions;
+  }
+
+  renderer(): ICustomSeriesPaneRenderer {
+    return this._renderer;
+  }
+
+  update(
+    data: PaneRendererCustomData<unknown, VolumeCandlestickData>,
+    _seriesOptions: CustomSeriesOptions,
+  ): void {
+    this._renderer.setData(data);
+  }
+
+  priceValueBuilder(plotRow: VolumeCandlestickData): CustomSeriesPricePlotValues {
+    return [plotRow.high, plotRow.low, plotRow.close];
+  }
+
+  isWhitespace(data: VolumeCandlestickData | CustomSeriesWhitespaceData<unknown>): data is CustomSeriesWhitespaceData<unknown> {
+    return !('open' in data && 'close' in data);
+  }
+}

package/src/plugins/series/index.ts

@@ -0,0 +1,6 @@
+export { HollowCandlestickSeries } from './HollowCandlestickSeries.js';
+export type { HollowCandlestickData } from './HollowCandlestickSeries.js';
+export { RenkoSeries } from './RenkoSeries.js';
+export type { RenkoData } from './RenkoSeries.js';
+export { VolumeCandlestickSeries } from './VolumeCandlestickSeries.js';
+export type { VolumeCandlestickData } from './VolumeCandlestickSeries.js';