@quantlife/qlchart 0.0.1

package/python/tests/test_chart.py

@@ -0,0 +1,114 @@
+"""QLChartHTML单元测试"""
+
+import json
+import pytest
+from qlchart import QLChartHTML
+
+
+class TestQLChartHTML:
+    """QLChartHTML单元测试"""
+
+    def setup_method(self):
+        self.chart = QLChartHTML("TestChart")
+        self.sample_ohlcv = [
+            {"time": 1704067200, "open": 42000, "high": 42500, "low": 41800, "close": 42300, "volume": 100},
+            {"time": 1704153600, "open": 42300, "high": 43000, "low": 42200, "close": 42800, "volume": 120},
+            {"time": 1704240000, "open": 42800, "high": 43500, "low": 42600, "close": 43200, "volume": 150},
+        ]
+
+    def _make_long_data(self, n=30):
+        """生成较长的K线数据用于MA/BOLL测试"""
+        return [
+            {"time": i * 86400 + 1704067200, "open": 42000 + i, "high": 42500 + i,
+             "low": 41800 + i, "close": 42200 + i, "volume": 100}
+            for i in range(n)
+        ]
+
+    def test_add_candlestick(self):
+        result = self.chart.add_candlestick(self.sample_ohlcv)
+        assert result is self.chart
+        assert len(self.chart._series_list) == 1
+        assert self.chart._series_list[0]["type"] == "candlestick"
+
+    def test_add_line(self):
+        line_data = [{"time": 1704067200, "value": 42000}]
+        result = self.chart.add_line(line_data, color="#FF0000", name="Test")
+        assert len(self.chart._series_list) == 1
+        assert self.chart._series_list[0]["type"] == "line"
+
+    def test_add_ma(self):
+        data = self._make_long_data(30)
+        result = self.chart.add_ma(data, period=5)
+        assert len(self.chart._series_list) == 1
+        assert self.chart._series_list[0]["type"] == "line"
+        # MA5需要至少5条数据，30条数据应产出26个MA点
+        assert len(self.chart._series_list[0]["data"]) == 26
+
+    def test_add_boll(self):
+        data = self._make_long_data(30)
+        result = self.chart.add_boll(data, period=20)
+        assert len(self.chart._series_list) == 3  # upper + middle + lower
+
+    def test_add_signals(self):
+        signals = [
+            {"time": 1704153600, "type": "buy", "text": "买入"},
+            {"time": 1704240000, "type": "sell", "text": "卖出"},
+        ]
+        result = self.chart.add_signals(signals)
+        assert len(self.chart._markers) == 2
+        assert self.chart._markers[0]["shape"] == "arrowUp"
+        assert self.chart._markers[1]["shape"] == "arrowDown"
+
+    def test_add_volume_colored(self):
+        result = self.chart.add_volume_colored(self.sample_ohlcv)
+        hist_data = self.chart._series_list[0]
+        assert hist_data["type"] == "histogram"
+        # 第一根K线收涨（42300>42000），颜色为绿
+        assert hist_data["data"][0]["color"] == "#26a69a"
+        # 第二根K线收涨（42800>42300），颜色为绿
+        assert hist_data["data"][1]["color"] == "#26a69a"
+
+    def test_to_html_contains_lwc(self):
+        self.chart.add_candlestick(self.sample_ohlcv)
+        html = self.chart.to_html()
+        assert "lightweight-charts" in html
+        assert "createChart" in html
+        assert "TestChart" in html
+
+    def test_to_html_dark_theme(self):
+        self.chart.set_theme("dark").add_candlestick(self.sample_ohlcv)
+        html = self.chart.to_html()
+        assert "#1e1e1e" in html
+
+    def test_to_html_light_theme(self):
+        self.chart.set_theme("light").add_candlestick(self.sample_ohlcv)
+        html = self.chart.to_html()
+        assert "#ffffff" in html
+
+    def test_timestamp_conversion(self):
+        # 毫秒时间戳应自动转换为秒
+        data = [{"time": 1704067200000, "open": 42000, "high": 42500,
+                 "low": 41800, "close": 42300}]
+        self.chart.add_candlestick(data)
+        transformed = self.chart._series_list[0]["data"]
+        assert transformed[0]["time"] == 1704067200
+
+    def test_chain_calls(self):
+        data = self._make_long_data(30)
+        html = (self.chart
+                .add_candlestick(data)
+                .add_volume_colored(data)
+                .add_ma(data, period=5)
+                .set_theme("dark")
+                .to_html())
+        assert isinstance(html, str)
+        # candlestick + volume_colored(histogram) + ma(line) = 3
+        assert len(self.chart._series_list) == 3
+
+    def test_save_file(self, tmp_path):
+        self.chart.add_candlestick(self.sample_ohlcv)
+        filepath = str(tmp_path / "test_chart.html")
+        self.chart.save(filepath)
+        with open(filepath) as f:
+            content = f.read()
+        assert "lightweight-charts" in content

package/src/api/chartApi.ts

@@ -0,0 +1,30 @@
+import type { ChartDataResponse } from '../types/indicator.js';
+import { IndicatorDataProcessor } from '../core/IndicatorDataProcessor.js';
+
+/**
+ * 图表数据API封装
+ */
+
+/** fetchFn参数 */
+export interface ChartDataParams {
+  pairId: string;
+  product: string;
+  period: string;
+}
+
+/** 获取图表数据（v2格式） */
+export async function fetchChartData(
+  apiBaseUrl: string,
+  params: ChartDataParams,
+): Promise<ChartDataResponse> {
+  const res = await fetch(
+    `${apiBaseUrl}/api/chart/data?${new URLSearchParams(params as unknown as Record<string, string>)}`,
+  );
+  if (!res.ok) throw new Error(`Failed to fetch chart data: ${res.statusText}`);
+  return res.json();
+}
+
+/** 判断fetchFn返回的是否为v2格式 */
+export function isV2Format(response: unknown): response is ChartDataResponse {
+  return IndicatorDataProcessor.isV2Format(response);
+}

package/src/api/indicatorApi.ts

@@ -0,0 +1,27 @@
+import type { IndicatorListResponse } from '../types/indicator.js';
+
+/**
+ * 指标API封装
+ */
+
+/** 获取指标列表 */
+export async function fetchIndicatorList(apiBaseUrl: string): Promise<IndicatorListResponse> {
+  const res = await fetch(`${apiBaseUrl}/api/indicators/list`);
+  if (!res.ok) throw new Error(`Failed to fetch indicator list: ${res.statusText}`);
+  return res.json();
+}
+
+/** 获取指标列表（带fallback默认列表） */
+export async function fetchIndicatorListWithFallback(
+  apiBaseUrl?: string,
+): Promise<IndicatorListResponse> {
+  if (!apiBaseUrl) {
+    return { indicators: [] };
+  }
+  try {
+    return await fetchIndicatorList(apiBaseUrl);
+  } catch (err) {
+    console.warn('[QLChart] Failed to fetch indicator list, using empty list:', err);
+    return { indicators: [] };
+  }
+}

package/src/components/ChartFunctionMenu.tsx

@@ -0,0 +1,64 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { PriceScaleMode } from 'lightweight-charts';
+import type { IChartApi } from 'lightweight-charts';
+
+export interface ChartFunctionMenuProps {
+  chart: IChartApi | null;
+}
+
+export function ChartFunctionMenu({ chart }: ChartFunctionMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [yAxisMode, setYAxisMode] = useState<PriceScaleMode>(PriceScaleMode.Normal);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const handleReset = useCallback(() => {
+    if (!chart) return;
+    chart.priceScale('right').applyOptions({ autoScale: true });
+    chart.timeScale().fitContent();
+    setOpen(false);
+  }, [chart]);
+
+  const handleToggleYAxis = useCallback(() => {
+    if (!chart) return;
+    const nextMode = yAxisMode === PriceScaleMode.Normal
+      ? PriceScaleMode.Percentage
+      : PriceScaleMode.Normal;
+    chart.priceScale('right').applyOptions({ mode: nextMode });
+    setYAxisMode(nextMode);
+    setOpen(false);
+  }, [chart, yAxisMode]);
+
+  // 点击外部收起
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="qlchart-function-menu-wrapper" ref={wrapperRef}>
+      {open && (
+        <div className="qlchart-function-menu-popup">
+          <button className="qlchart-fm-item" onClick={handleReset}>
+            📐 重置坐标
+          </button>
+          <button className="qlchart-fm-item" onClick={handleToggleYAxis}>
+            {yAxisMode === PriceScaleMode.Normal ? '% 切换百分比' : '# 切换常规'}
+          </button>
+        </div>
+      )}
+      <button
+        className="qlchart-function-menu-trigger"
+        onClick={() => setOpen(!open)}
+        title="图表功能"
+      >
+        ⚙
+      </button>
+    </div>
+  );
+}

package/src/components/PaneChartPanel.tsx

@@ -0,0 +1,116 @@
+import { useRef, useEffect, useState } from 'react';
+import {
+  createChart,
+  type IChartApi,
+  ColorType,
+} from 'lightweight-charts';
+
+interface PaneChartPanelProps {
+  /** 主图chart实例，用于时间轴同步 */
+  mainChart: IChartApi | null;
+  /** 主题配置 */
+  themeConfig: {
+    bg: string;
+    text: string;
+    grid: string;
+  };
+  /** paneChart回调，创建后通知父组件 */
+  onChartCreated?: (chart: IChartApi) => void;
+}
+
+/**
+ * 副图面板组件
+ * 独立的Chart实例，时间轴与主图同步
+ */
+export function PaneChartPanel({
+  mainChart,
+  themeConfig,
+  onChartCreated,
+}: PaneChartPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<IChartApi | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const chart = createChart(container, {
+      width: container.clientWidth,
+      height: container.clientHeight,
+      layout: {
+        background: { type: ColorType.Solid, color: themeConfig.bg },
+        textColor: themeConfig.text,
+      },
+      grid: {
+        vertLines: { color: themeConfig.grid },
+        horzLines: { color: themeConfig.grid },
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: false,
+        visible: false, // 副图不显示独立的时间轴
+      },
+      rightPriceScale: {
+        borderVisible: true,
+      },
+    });
+
+    chartRef.current = chart;
+    onChartCreated?.(chart);
+
+    // 时间轴同步：监听主图 visibleRange 变化
+    if (mainChart) {
+      const timeScale = mainChart.timeScale();
+      timeScale.subscribeVisibleLogicalRangeChange((range) => {
+        if (range && chartRef.current) {
+          chartRef.current.timeScale().setVisibleLogicalRange(range);
+        }
+      });
+
+      // 同步当前可见范围
+      const currentRange = timeScale.getVisibleLogicalRange();
+      if (currentRange) {
+        chart.timeScale().setVisibleLogicalRange(currentRange);
+      }
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          chart.applyOptions({ width, height });
+        }
+      }
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+      chart.remove();
+      chartRef.current = null;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mainChart]);
+
+  // 主题更新
+  useEffect(() => {
+    chartRef.current?.applyOptions({
+      layout: {
+        background: { type: ColorType.Solid, color: themeConfig.bg },
+        textColor: themeConfig.text,
+      },
+      grid: {
+        vertLines: { color: themeConfig.grid },
+        horzLines: { color: themeConfig.grid },
+      },
+    });
+  }, [themeConfig]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="qlchart-pane-chart"
+      style={{ width: '100%', height: '100%' }}
+    />
+  );
+}

package/src/components/PaneDivider.tsx

@@ -0,0 +1,66 @@
+import { useCallback } from 'react';
+
+export interface PaneDividerProps {
+  /** pane索引 */
+  index: number;
+  /** 拖拽回调，deltaRatio为高度比例变化量（正=下方变大，负=上方变大） */
+  onDrag: (deltaRatio: number) => void;
+}
+
+/**
+ * PaneDivider - 可拖拽的pane分割线组件
+ * 用于调整主图/副图的高度比例
+ */
+export function PaneDivider({ index, onDrag }: PaneDividerProps) {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const startY = e.clientY;
+    const container = e.currentTarget.parentElement;
+    const containerHeight = container?.clientHeight ?? 600;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaY = e.clientY - startY;
+      const deltaRatio = deltaY / containerHeight;
+      onDrag(deltaRatio);
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+    };
+
+    document.body.style.cursor = 'ns-resize';
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [onDrag]);
+
+  return (
+    <div
+      className="qlchart-pane-divider"
+      data-pane-index={index}
+      onMouseDown={handleMouseDown}
+      style={{
+        height: '4px',
+        width: '100%',
+        cursor: 'ns-resize',
+        background: 'var(--ant-color-border, #1e222d)',
+        flexShrink: 0,
+        position: 'relative',
+      }}
+    >
+      <div style={{
+        position: 'absolute',
+        top: '1px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: '32px',
+        height: '2px',
+        background: 'var(--ant-color-text-quaternary, #555)',
+        borderRadius: '1px',
+      }} />
+    </div>
+  );
+}

package/src/components/QLChartLayout.tsx

@@ -0,0 +1,151 @@
+import { useMemo, useRef, useEffect, useCallback, useState } from 'react';
+import type { LayoutMode, PanelConfig } from '../types/chart.js';
+import { QLChartPanel } from './QLChartPanel.js';
+import { useChartStore } from '../store/useChartStore.js';
+import { useCrosshairSync } from '../hooks/useCrosshairSync.js';
+import { GlobalToolbar } from './toolbar/GlobalToolbar.js';
+import { DrawingModule } from './drawing/DrawingModule.js';
+import type { IChartApi } from 'lightweight-charts';
+
+export interface QLChartLayoutProps {
+  /** 布局模式 */
+  mode?: LayoutMode;
+  /** 面板配置 */
+  panels?: PanelConfig[];
+  /** 是否开启光标联动 */
+  crosshairSync?: boolean;
+  /** 布局变化回调 */
+  onLayoutChange?: (mode: LayoutMode) => void;
+}
+
+/** 布局模式对应的 CSS Grid 配置 */
+const GRID_CONFIG: Record<LayoutMode, { columns: string; rows: string; count: number }> = {
+  '1': { columns: '1fr', rows: '1fr', count: 1 },
+  '2h': { columns: '1fr 1fr', rows: '1fr', count: 2 },
+  '2v': { columns: '1fr', rows: '1fr 1fr', count: 2 },
+  '4': { columns: '1fr 1fr', rows: '1fr 1fr', count: 4 },
+};
+
+export function QLChartLayout({
+  mode: modeProp,
+  panels: panelsProp,
+  crosshairSync = true,
+  onLayoutChange,
+}: QLChartLayoutProps) {
+  const storeMode = useChartStore((s) => s.layoutMode);
+  const storePanels = useChartStore((s) => s.panels);
+  const activePairId = useChartStore((s) => s.activePairId);
+  const activeProduct = useChartStore((s) => s.activeProduct);
+
+  const mode = modeProp ?? storeMode;
+  const panels = panelsProp ?? storePanels;
+  const gridConfig = GRID_CONFIG[mode];
+
+  // Bug③修复：chartRefs改为useState驱动，chart创建时触发重渲染和effect重新执行
+  const [chartInstances, setChartInstances] = useState<(IChartApi | null)[]>([]);
+
+  // Register chart instance from QLChartPanel
+  const handleChartCreated = useCallback((chart: IChartApi | null, index: number) => {
+    setChartInstances(prev => {
+      const next = [...prev];
+      while (next.length <= index) next.push(null);
+      next[index] = chart;
+      return next;
+    });
+  }, []);
+
+  // Crosshair sync — 使用useState驱动的chartInstances
+  const chartRefsForSync = useRef<(IChartApi | null)[]>(chartInstances);
+  chartRefsForSync.current = chartInstances;
+
+  const isSingleMode = mode === '1';
+
+  // 确保有足够的 panel 配置
+  const effectivePanels = useMemo(() => {
+    const result: PanelConfig[] = [];
+    for (let i = 0; i < gridConfig.count; i++) {
+      if (panels[i]) {
+        result.push(panels[i]);
+      } else {
+        result.push({
+          id: `panel_${i}`,
+          pairId: activePairId ?? 'default',
+          product: activeProduct ?? 'BTC',
+          period: '1h',
+          seriesType: 'candlestick' as any,
+          showToolbar: true,
+        });
+      }
+    }
+    return result;
+  }, [panels, gridConfig.count, activePairId, activeProduct]);
+
+  const panelIdList = effectivePanels.map(p => p.id);
+  useCrosshairSync(
+    crosshairSync ? chartRefsForSync : { current: [] },
+    crosshairSync ? panelIdList : [],
+  );
+
+  // 当 panels 变化时，自动设置 activePanelId
+  useEffect(() => {
+    const store = useChartStore.getState();
+    if ((!store.activePanelId || !effectivePanels.some(p => p.id === store.activePanelId)) && effectivePanels.length > 0) {
+      store.setActivePanel(effectivePanels[0].id);
+    }
+  }, [effectivePanels]);
+
+  // Resize charts on layout change
+  useEffect(() => {
+    // Trigger resize after layout change
+    const timer = setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [mode]);
+
+  return (
+    <div className="qlchart-layout-wrapper" style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
+      {/* 多图模式才显示全局工具栏 */}
+      {!isSingleMode && <GlobalToolbar />}
+
+      {/* 图表区域 */}
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {/* 多面板模式：全局绘图Sidebar */}
+        {!isSingleMode && (
+          <div className="qlchart-global-drawing-sidebar">
+            <DrawingModule />
+          </div>
+        )}
+
+        {/* 图表 Grid */}
+        <div
+          className="qlchart-layout"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: gridConfig.columns,
+            gridTemplateRows: gridConfig.rows,
+            gap: '4px',
+            flex: 1,
+            overflow: 'hidden',
+          }}
+        >
+          {effectivePanels.map((panel, index) => (
+            <div key={panel.id} className="qlchart-layout-cell">
+              <QLChartPanel
+                pairId={panel.pairId}
+                product={panel.product}
+                period={panel.period}
+                seriesType={panel.seriesType}
+                showToolbar={isSingleMode ? (panel.showToolbar ?? true) : false}
+                panelId={panel.id}
+                panelIndex={index}
+                onChartCreated={handleChartCreated}
+                isSinglePanel={isSingleMode}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}