@quantlife/qlchart 0.0.1

package/src/types/indicator.ts

@@ -0,0 +1,344 @@
+// ── 2.2 指标总览API：搜索与查询类型 ──
+
+/** 指标搜索查询参数 */
+export interface IndicatorSearchQuery {
+  keyword?: string;
+  category?: string;
+  displayType?: 'overlay' | 'pane';
+}
+
+// ── 2.3 指标自动渲染：数据驱动渲染协议 ──
+
+/** 指标渲染描述（后端返回，前端自动渲染） */
+export interface IndicatorRenderSpec {
+  /** 指标唯一key */
+  key: string;
+  /** 显示名称 */
+  label: string;
+  /** 渲染位置 */
+  placement: 'overlay' | 'pane';
+  /** 副图高度比例（仅pane，默认0.2） */
+  paneHeightRatio?: number;
+  /** 线条定义 */
+  lines: IndicatorLineSpec[];
+}
+
+/** 指标线条渲染定义 */
+export interface IndicatorLineSpec {
+  /** 数据字段名（对应 indicatorData 中的 key） */
+  field: string;
+  /** 显示名称 */
+  label: string;
+  /** 渲染类型 */
+  type: 'line' | 'histogram' | 'area';
+  /** 颜色 */
+  color: string;
+  /** 线宽（默认1） */
+  lineWidth?: number;
+  /** 柱状图正值颜色（仅 histogram） */
+  positiveColor?: string;
+  /** 柱状图负值颜色（仅 histogram） */
+  negativeColor?: string;
+}
+
+/** K线 + 指标合并数据响应（后端可在 ChartFetchResult 中附带） */
+export interface ChartDataWithIndicators {
+  /** K线数据 */
+  candlesticks: import('./series.js').CandlestickRawData[];
+  /** 指标渲染描述列表 */
+  indicatorSpecs?: IndicatorRenderSpec[];
+  /** 指标数据，key 对应 IndicatorRenderSpec.key */
+  indicatorData?: Record<string, Array<{
+    time: number;
+    values: Record<string, number>;
+  }>>;
+}
+
+/** 指标显示类型 */
+export enum IndicatorType {
+  Overlay = 'overlay', // 主图叠加
+  Pane = 'pane',       // 副图（独立面板）
+}
+
+/**
+ * 指标显示类型（v2新架构）
+ */
+export enum IndicatorDisplayType {
+  /** 主图叠加（如MA、EMA、BOLL） */
+  Overlay = 'overlay',
+  /** 主图背景（如成交量Volume） */
+  Background = 'background',
+  /** 副图指标（如MACD、RSI、KDJ） */
+  Pane = 'pane',
+}
+
+/**
+ * 单条指标线定义（v2新架构）
+ * 一个指标（如MACD）可能包含多条线（DIF、DEA、MACD柱）
+ */
+export interface IndicatorLineDef {
+  /** 线的唯一key（如 'dif', 'dea', 'macd'） */
+  key: string;
+  /** 显示名称（如 'DIF'） */
+  label: string;
+  /** 该线的数据在data二维数组的每行中的列索引 */
+  dataIndex: number;
+  /** 渲染类型 */
+  renderType: 'line' | 'histogram' | 'area';
+  /** 默认颜色 */
+  color: string;
+  /** 线宽（默认1） */
+  lineWidth?: number;
+}
+
+/**
+ * 指标元信息（v2新架构）
+ */
+export interface IndicatorMeta {
+  /** 指标唯一标识（如 'MACD'） */
+  key: string;
+  /** 显示名称（如 'MACD(12,26,9)'） */
+  label: string;
+  /** 显示类型：主图叠加 / 主图背景 / 副图 */
+  displayType: IndicatorDisplayType;
+  /** 该指标包含的所有线 */
+  lines: IndicatorLineDef[];
+  /** 指标参数 */
+  params?: Record<string, number>;
+  /** 副图高度占比（仅displayType=pane时生效，默认0.2 = 20%） */
+  paneHeightRatio?: number;
+}
+
+/**
+ * 图表数据响应（v2新架构）
+ * 后端计算所有指标，前端只渲染
+ */
+export interface ChartDataResponse {
+  /** K线时间戳数组（毫秒） */
+  timestamps: number[];
+  /** 二维数据数组：每行是一个时间点的所有值 */
+  data: number[][];
+  /** 指标元信息列表 */
+  indicators: IndicatorMeta[];
+  /** 默认OHLC在data行中的列索引 */
+  ohlcIndex: {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+  };
+  /** 数据版本（2=新格式，缺省或1=旧格式） */
+  version?: number;
+}
+
+/**
+ * 后端返回的指标列表项模板
+ */
+export interface IndicatorTemplate {
+  /** 指标唯一标识 */
+  key: string;
+  /** 显示名称 */
+  label: string;
+  /** 简短描述 */
+  description: string;
+  /** 显示类型 */
+  displayType: IndicatorDisplayType;
+  /** 分类（如 '趋势', '震荡', '成交量', '通道'） */
+  category: string;
+  /** 默认参数 */
+  defaultParams: Record<string, number>;
+  /** 参数定义（用户可调整） */
+  paramDefs: IndicatorParamDef[];
+  /** 包含的线条定义 */
+  lines: IndicatorLineDef[];
+  /** 默认副图高度比例（仅pane类型） */
+  paneHeightRatio?: number;
+  /** 是否内置（vs自定义） */
+  builtin: boolean;
+  /** 图标（emoji或CSS class） */
+  icon?: string;
+  /** 排序权重 */
+  sortOrder?: number;
+}
+
+/**
+ * 后端返回的指标列表响应
+ */
+export interface IndicatorListResponse {
+  /** 可用指标列表 */
+  indicators: IndicatorTemplate[];
+  /** 用户已添加的指标（上次会话状态） */
+  activeIndicators?: ActiveIndicatorConfig[];
+  /** 指标分类列表（用于面板分类筛选） */
+  categories?: string[];
+}
+
+/**
+ * 用户激活的指标配置
+ */
+export interface ActiveIndicatorConfig {
+  /** 对应IndicatorTemplate.key */
+  key: string;
+  /** 用户自定义参数（覆盖defaultParams） */
+  params: Record<string, number>;
+  /** 是否可见 */
+  visible: boolean;
+  /** 用户自定义样式（覆盖lines中的默认颜色） */
+  styleOverrides?: Record<string, string>;
+}
+
+/** 指标参数定义 */
+export interface IndicatorParamDef {
+  name: string;
+  label: string;
+  defaultValue: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+/** 活跃指标配置 */
+export interface IndicatorConfig {
+  id: string;
+  name: string;
+  label: string;
+  type: IndicatorType;
+  params: Record<string, number>;
+  visible: boolean;
+  color?: string;
+  seriesIds: string[];
+  paneIndex?: number;
+}
+
+/** 指标数据响应（API返回） */
+export interface IndicatorDataResponse {
+  name: string;
+  params: Record<string, number>;
+  data: IndicatorDataPoint[];
+}
+
+/** 单条指标数据 */
+export interface IndicatorDataPoint {
+  time: number; // 毫秒时间戳
+  values: Record<string, number>;
+}
+
+/** 指标定义（注册表） */
+export interface IndicatorDefinition {
+  name: string;
+  label: string;
+  type: IndicatorType;
+  defaultParams: Record<string, number>;
+  paramDefs: IndicatorParamDef[];
+  description: string;
+  colors: string[];
+}
+
+/** 内置指标定义 */
+export const BUILTIN_INDICATORS: IndicatorDefinition[] = [
+  // === 主图叠加指标 ===
+  {
+    name: 'MA',
+    label: 'MA 移动平均线',
+    type: IndicatorType.Overlay,
+    defaultParams: { period: 5 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 5, min: 2, max: 500, step: 1 },
+    ],
+    description: '简单移动平均线',
+    colors: ['#FF6D00'],
+  },
+  {
+    name: 'EMA',
+    label: 'EMA 指数移动平均线',
+    type: IndicatorType.Overlay,
+    defaultParams: { period: 12 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 12, min: 2, max: 500, step: 1 },
+    ],
+    description: '指数移动平均线',
+    colors: ['#2962FF'],
+  },
+  {
+    name: 'BOLL',
+    label: 'BOLL 布林带',
+    type: IndicatorType.Overlay,
+    defaultParams: { period: 20, stdDev: 2 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 20, min: 2, max: 200, step: 1 },
+      { name: 'stdDev', label: '标准差倍数', defaultValue: 2, min: 0.5, max: 5, step: 0.1 },
+    ],
+    description: '布林带指标',
+    colors: ['#FF6D00', '#2962FF', '#FF6D00'],
+  },
+  // === 副图指标 ===
+  {
+    name: 'MACD',
+    label: 'MACD 指数平滑异同',
+    type: IndicatorType.Pane,
+    defaultParams: { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 },
+    paramDefs: [
+      { name: 'fastPeriod', label: '快线周期', defaultValue: 12, min: 2, max: 100, step: 1 },
+      { name: 'slowPeriod', label: '慢线周期', defaultValue: 26, min: 2, max: 200, step: 1 },
+      { name: 'signalPeriod', label: '信号线周期', defaultValue: 9, min: 2, max: 100, step: 1 },
+    ],
+    description: 'MACD指标',
+    colors: ['#2962FF', '#FF6D00', '#26a69a'],
+  },
+  {
+    name: 'RSI',
+    label: 'RSI 相对强弱指标',
+    type: IndicatorType.Pane,
+    defaultParams: { period: 14 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 14, min: 2, max: 100, step: 1 },
+    ],
+    description: '相对强弱指标',
+    colors: ['#AB47BC'],
+  },
+  {
+    name: 'KDJ',
+    label: 'KDJ 随机指标',
+    type: IndicatorType.Pane,
+    defaultParams: { kPeriod: 9, dPeriod: 3, jPeriod: 3 },
+    paramDefs: [
+      { name: 'kPeriod', label: 'K周期', defaultValue: 9, min: 2, max: 100, step: 1 },
+      { name: 'dPeriod', label: 'D周期', defaultValue: 3, min: 2, max: 50, step: 1 },
+      { name: 'jPeriod', label: 'J周期', defaultValue: 3, min: 2, max: 50, step: 1 },
+    ],
+    description: 'KDJ随机指标',
+    colors: ['#FFFFFF', '#FFFF00', '#FF00FF'],
+  },
+  {
+    name: 'CCI',
+    label: 'CCI 商品通道指标',
+    type: IndicatorType.Pane,
+    defaultParams: { period: 14 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 14, min: 2, max: 100, step: 1 },
+    ],
+    description: '商品通道指标',
+    colors: ['#00E676'],
+  },
+  {
+    name: 'ATR',
+    label: 'ATR 真实波幅',
+    type: IndicatorType.Pane,
+    defaultParams: { period: 14 },
+    paramDefs: [
+      { name: 'period', label: '周期', defaultValue: 14, min: 2, max: 100, step: 1 },
+    ],
+    description: '平均真实波幅',
+    colors: ['#FF9800'],
+  },
+  {
+    name: 'OBV',
+    label: 'OBV 能量潮',
+    type: IndicatorType.Pane,
+    defaultParams: {},
+    paramDefs: [],
+    description: '能量潮指标',
+    colors: ['#26a69a'],
+  },
+];

package/src/types/series.ts

@@ -0,0 +1,53 @@
+/** 序列类型枚举 */
+export enum SeriesType {
+  Candlestick = 'candlestick',
+  Bar = 'bar',
+  Line = 'line',
+  Area = 'area',
+  Baseline = 'baseline',
+  Histogram = 'histogram',
+  // 自定义类型
+  HollowCandlestick = 'hollow-candlestick',
+  VolumeCandlestick = 'volume-candlestick',
+  HeikinAshi = 'heikin-ashi',
+  Renko = 'renko',
+  LineBreak = 'line-break',
+}
+
+/** K线数据（API返回的原始格式） */
+export interface CandlestickRawData {
+  time: number; // 毫秒时间戳
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume?: number;
+}
+
+/** LWC K线数据 */
+export interface CandlestickData {
+  time: number; // 秒级时间戳
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+}
+
+/** LWC 成交量数据 */
+export interface HistogramData {
+  time: number;
+  value: number;
+  color?: string;
+}
+
+/** LWC 线数据 */
+export interface LineData {
+  time: number;
+  value: number;
+}
+
+/** 指标数据（API返回） */
+export interface IndicatorRawData {
+  time: number; // 毫秒时间戳
+  value: number;
+}

package/src/types/theme.ts

@@ -0,0 +1,48 @@
+import type { DeepPartial } from 'lightweight-charts';
+
+/** 图表主题选项（映射到LWC的theme相关选项） */
+export interface ChartThemeOptions {
+  layout: {
+    background: { color: string };
+    textColor: string;
+  };
+  grid: {
+    vertLines: { color: string };
+    horzLines: { color: string };
+  };
+  crosshair?: {
+    mode?: number;  // CrosshairMode.Normal = 0, CrosshairMode.Magnet = 1
+    vertLine?: { color?: string; labelBackgroundColor?: string };
+    horzLine?: { color?: string; labelBackgroundColor?: string };
+  };
+  /** ★ V3: 时间格式化配置 */
+  localization?: {
+    timeFormatter?: (time: import('lightweight-charts').Time) => string;
+    dateFormat?: string;
+  };
+  /** ★ V3: 时间轴配置 */
+  timeScale?: {
+    timeVisible?: boolean;
+    secondsVisible?: boolean;
+    tickMarkFormatter?: (time: import('lightweight-charts').Time, tickMarkType: number, locale: string) => string;
+  };
+}
+
+/** 主题预设名称 */
+export type ThemePreset = 'dark' | 'light';
+
+/** 主题配置 */
+export interface ThemeConfig {
+  name: ThemePreset;
+  chart: ChartThemeOptions;
+  /** 涨色 */
+  upColor: string;
+  /** 跌色 */
+  downColor: string;
+  /** 工具栏背景色 */
+  toolbarBg: string;
+  /** 工具栏文字色 */
+  toolbarText: string;
+  /** 工具栏按钮激活色 */
+  toolbarActiveBg: string;
+}

package/src/utils/dataTransformer.ts

@@ -0,0 +1,63 @@
+import type { UTCTimestamp } from 'lightweight-charts';
+import type {
+  CandlestickRawData,
+  IndicatorRawData,
+} from '../types/index.js';
+
+/**
+ * 将API返回的K线原始数据转换为LWC CandlestickData[]
+ * 注意：time从毫秒转秒
+ */
+export function transformCandlestickData(apiData: CandlestickRawData[]) {
+  return apiData
+    .map((item) => ({
+      time: (item.time / 1000) as UTCTimestamp,
+      open: item.open,
+      high: item.high,
+      low: item.low,
+      close: item.close,
+    }))
+    .sort((a, b) => (a.time as number) - (b.time as number));
+}
+
+/**
+ * 将API返回的K线数据转换为LWC HistogramData[]（成交量）
+ * 涨绿跌红
+ */
+export function transformVolumeData(apiData: CandlestickRawData[]) {
+  return apiData
+    .map((item) => ({
+      time: (item.time / 1000) as UTCTimestamp,
+      value: item.volume ?? 0,
+      color: item.close >= item.open ? 'rgba(38, 166, 154, 0.35)' : 'rgba(239, 83, 80, 0.35)',
+    }))
+    .sort((a, b) => (a.time as number) - (b.time as number));
+}
+
+/**
+ * 将API返回的K线数据转换为VolumeCandlestickData[]（含volume字段）
+ */
+export function transformVolumeCandlestickData(apiData: CandlestickRawData[]) {
+  return apiData
+    .map((item) => ({
+      time: (item.time / 1000) as UTCTimestamp,
+      open: item.open,
+      high: item.high,
+      low: item.low,
+      close: item.close,
+      volume: item.volume ?? 0,
+    }))
+    .sort((a, b) => (a.time as number) - (b.time as number));
+}
+
+/**
+ * 将API返回的指标数据转换为LWC LineData[]
+ */
+export function transformIndicatorData(apiData: IndicatorRawData[]) {
+  return apiData
+    .map((item) => ({
+      time: (item.time / 1000) as UTCTimestamp,
+      value: item.value,
+    }))
+    .sort((a, b) => (a.time as number) - (b.time as number));
+}

package/src/utils/heikinAshi.ts

@@ -0,0 +1,41 @@
+/**
+ * 平均K线（Heikin Ashi）数据预处理
+ * HA只是OHLC值的重计算，渲染逻辑复用CandlestickSeries
+ */
+import type { CandlestickData } from '../types/index.js';
+
+/**
+ * 将标准K线数据转换为平均K线
+ * 算法：
+ *   HA_CLOSE = (open + high + low + close) / 4
+ *   HA_OPEN = (prev_HA_open + prev_HA_close) / 2
+ *   HA_HIGH = max(high, HA_open, HA_close)
+ *   HA_LOW = min(low, HA_open, HA_close)
+ */
+export function transformToHeikinAshi(data: CandlestickData[]): CandlestickData[] {
+  if (data.length === 0) return [];
+
+  const result: CandlestickData[] = [];
+  let prevOpen = data[0].open;
+  let prevClose = data[0].close;
+
+  for (const bar of data) {
+    const haClose = (bar.open + bar.high + bar.low + bar.close) / 4;
+    const haOpen = (prevOpen + prevClose) / 2;
+    const haHigh = Math.max(bar.high, haOpen, haClose);
+    const haLow = Math.min(bar.low, haOpen, haClose);
+
+    result.push({
+      time: bar.time,
+      open: haOpen,
+      high: haHigh,
+      low: haLow,
+      close: haClose,
+    });
+
+    prevOpen = haOpen;
+    prevClose = haClose;
+  }
+
+  return result;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { transformCandlestickData, transformVolumeData, transformIndicatorData } from './dataTransformer.js';
+export { darkPreset, lightPreset } from './themePresets.js';
+export { getPeriodInterval, generateFutureWhitespace, calcFuturePointCount } from './timeScaleUtils.js';

package/src/utils/lineBreak.ts

@@ -0,0 +1,88 @@
+/**
+ * 线形反转（Line Break）数据预处理
+ * 三线反转算法输出为标准 CandlestickData 格式，复用 CandlestickSeries 渲染
+ */
+import type { CandlestickData } from '../types/index.js';
+
+interface LineBreakBar {
+  time: number;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  direction: 'up' | 'down';
+}
+
+/**
+ * 将标准K线数据转换为线形反转数据
+ *
+ * @param data 原始K线数据
+ * @param period 反转周期（默认3线反转）
+ */
+export function transformToLineBreak(
+  data: CandlestickData[],
+  period: number = 3,
+): CandlestickData[] {
+  if (data.length < period) return data;
+
+  const lines: LineBreakBar[] = [];
+
+  // 初始化：前N根直接作为初始线
+  for (let i = 0; i < period; i++) {
+    const bar = data[i];
+    const direction: 'up' | 'down' = bar.close >= bar.open ? 'up' : 'down';
+    lines.push({
+      time: bar.time,
+      open: bar.open,
+      high: bar.high,
+      low: bar.low,
+      close: bar.close,
+      direction,
+    });
+  }
+
+  // 从第N根开始应用线形反转规则
+  for (let i = period; i < data.length; i++) {
+    const bar = data[i];
+    const recentLines = lines.slice(-period);
+
+    if (bar.close > Math.max(...recentLines.map(l => l.high))) {
+      // 突破最高点 → 上涨线
+      const prevLine = lines[lines.length - 1];
+      lines.push({
+        time: bar.time,
+        open: prevLine.close,
+        high: bar.high,
+        low: Math.min(bar.low, prevLine.close),
+        close: bar.close,
+        direction: 'up',
+      });
+    } else if (bar.close < Math.min(...recentLines.map(l => l.low))) {
+      // 跌破最低点 → 下跌线
+      const prevLine = lines[lines.length - 1];
+      lines.push({
+        time: bar.time,
+        open: prevLine.close,
+        high: Math.max(bar.high, prevLine.close),
+        low: bar.low,
+        close: bar.close,
+        direction: 'down',
+      });
+    } else {
+      // 未突破 → 延续上一根线的方向，更新close
+      const lastLine = lines[lines.length - 1];
+      lastLine.close = bar.close;
+      lastLine.high = Math.max(lastLine.high, bar.high);
+      lastLine.low = Math.min(lastLine.low, bar.low);
+    }
+  }
+
+  // 转换为 CandlestickData 格式
+  return lines.map(l => ({
+    time: l.time,
+    open: l.open,
+    high: l.high,
+    low: l.low,
+    close: l.close,
+  }));
+}