kline-charts-react 0.0.1

package/dist/kline-charts-react.css

@@ -0,0 +1 @@
+._container_119o2_1{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;gap:12px}._spinner_119o2_11{display:flex;gap:6px}._dot_119o2_16{width:8px;height:8px;background-color:#1890ff;border-radius:50%;animation:_bounce_119o2_1 .6s infinite alternate}._dot_119o2_16:nth-child(2){animation-delay:.2s}._dot_119o2_16:nth-child(3){animation-delay:.4s}@keyframes _bounce_119o2_1{0%{transform:translateY(0);opacity:.4}to{transform:translateY(-10px);opacity:1}}._text_119o2_43{color:#999;font-size:13px}._container_1xu4v_1{display:flex;align-items:center;gap:16px;padding:8px 12px;border-bottom:1px solid var(--kline-border-color, #e8e8e8);background:var(--kline-bg-color, #fff)}._group_1xu4v_10{display:flex;gap:4px}._button_1xu4v_15{padding:4px 10px;font-size:13px;color:var(--kline-text-color, #333);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s}._button_1xu4v_15:hover{background:var(--kline-hover-bg, #f5f5f5)}._button_1xu4v_15._active_1xu4v_30{color:#fff;background:var(--kline-active-color, #1890ff)}._container_1fbmi_1{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--kline-border-color, #e8e8e8);background:var(--kline-bg-color, #fff);flex-wrap:wrap}._button_1fbmi_11{padding:4px 12px;font-size:12px;color:var(--kline-text-secondary, #666);background:var(--kline-tag-bg, #f0f0f0);border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .2s}._button_1fbmi_11:hover{border-color:var(--kline-active-color, #1890ff);color:var(--kline-active-color, #1890ff)}._button_1fbmi_11._active_1fbmi_27{color:var(--kline-active-color, #1890ff);background:#1890ff1a;border-color:var(--kline-active-color, #1890ff)}._divider_1fbmi_33{width:1px;height:20px;background:var(--kline-border-color, #e8e8e8);margin:0 4px}._container_2tswg_1{display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--kline-bg-color, #fff);border-bottom:1px solid var(--kline-border-color, #e8e8e8)}._group_2tswg_10{display:flex;align-items:center;gap:2px}._divider_2tswg_16{width:1px;height:16px;margin:0 8px;background:var(--kline-border-color, #e8e8e8)}._spacer_2tswg_23{flex:1}._iconButton_2tswg_27{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--kline-text-color, #333);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s}._iconButton_2tswg_27:hover:not(:disabled){background:var(--kline-hover-bg, #f5f5f5)}._iconButton_2tswg_27:disabled{color:var(--kline-text-disabled, #ccc);cursor:not-allowed}._textButton_2tswg_51{padding:4px 8px;font-size:12px;color:var(--kline-text-secondary, #666);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s}._textButton_2tswg_51:hover{background:var(--kline-hover-bg, #f5f5f5);color:var(--kline-text-color, #333)}._textButton_2tswg_51._active_2tswg_67{color:var(--kline-active-color, #1890ff);background:#1890ff1a}._container_1vdme_1{display:flex;align-items:center;gap:16px;padding:4px 8px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;flex-wrap:wrap}._group_1vdme_11{display:flex;align-items:center;gap:12px;flex-wrap:wrap}._item_1vdme_18{font-weight:500;white-space:nowrap}._title_p093j_1{position:absolute;left:8px;z-index:10;display:flex;align-items:center;gap:8px;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;pointer-events:none;background:var(--kline-bg-color, rgba(255, 255, 255, .9));padding:2px 6px;border-radius:2px}._label_p093j_16{font-weight:600;color:var(--kline-text-color, #333)}._value_p093j_21{color:var(--kline-text-secondary, #666)}._container_o8wlo_1{display:flex;flex-direction:column;background:var(--kline-bg-color, #fff);border:1px solid var(--kline-border-color, #e8e8e8);border-radius:4px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}._fullscreen_o8wlo_12{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;border-radius:0;border:none}._chartWrapper_o8wlo_23{flex:1;position:relative;min-height:200px}._chart_o8wlo_23{width:100%;height:100%}._error_o8wlo_34{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--kline-text-secondary, #999);font-size:14px}._error_o8wlo_34 button{padding:6px 16px;font-size:13px;color:#fff;background:var(--kline-active-color, #1890ff);border:none;border-radius:4px;cursor:pointer;transition:opacity .2s}._error_o8wlo_34 button:hover{opacity:.85}._timelineToolbar_o8wlo_63{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--kline-border-color, #e8e8e8)}._timelineLabel_o8wlo_71{font-size:14px;font-weight:500;color:var(--kline-text-color, #333)}._refreshButton_o8wlo_77,._fullscreenButton_o8wlo_78{padding:4px 12px;font-size:12px;color:var(--kline-text-color, #333);background:var(--kline-tag-bg, #f0f0f0);border:1px solid var(--kline-border-color, #e8e8e8);border-radius:4px;cursor:pointer;transition:all .2s}._refreshButton_o8wlo_77:hover,._fullscreenButton_o8wlo_78:hover{background:var(--kline-hover-bg, #f5f5f5)}._refreshButton_o8wlo_77:disabled{opacity:.5;cursor:not-allowed}._refreshButton_o8wlo_77:not(:disabled):hover{border-color:var(--kline-active-color, #1890ff);color:var(--kline-active-color, #1890ff)}._fullscreenButton_o8wlo_78:hover{border-color:var(--kline-active-color, #1890ff);color:var(--kline-active-color, #1890ff)}:root{--kline-bg-color: #ffffff;--kline-text-color: #333333;--kline-text-secondary: #999999;--kline-border-color: #e8e8e8;--kline-active-color: #1890ff;--kline-hover-bg: #f5f5f5;--kline-tag-bg: #f0f0f0;--kline-text-disabled: #cccccc;--kline-up-color: #f5222d;--kline-down-color: #52c41a}.kline-dark{--kline-bg-color: #1a1a1a;--kline-text-color: #d1d1d1;--kline-text-secondary: #666666;--kline-border-color: #333333;--kline-hover-bg: #2a2a2a;--kline-tag-bg: #2a2a2a;--kline-text-disabled: #444444}

package/dist/types/data.d.ts

@@ -0,0 +1,207 @@
+/**
+ * K 线数据结构
+ */
+export interface KlineData {
+    /** 日期/时间 */
+    date: string;
+    /** 股票代码 */
+    code?: string;
+    /** 股票名称 */
+    name?: string;
+    /** 开盘价 */
+    open: number | null;
+    /** 收盘价 */
+    close: number | null;
+    /** 最高价 */
+    high: number | null;
+    /** 最低价 */
+    low: number | null;
+    /** 成交量 */
+    volume: number | null;
+    /** 成交额 */
+    amount: number | null;
+    /** 涨跌幅 */
+    changePercent?: number | null;
+    /** 涨跌额 */
+    change?: number | null;
+    /** 振幅 */
+    amplitude?: number | null;
+    /** 换手率 */
+    turnoverRate?: number | null;
+}
+/**
+ * 分时数据结构
+ */
+export interface TimelineData {
+    /** 时间 HH:mm */
+    time: string;
+    /** 价格 */
+    price: number;
+    /** 成交量（累计） */
+    volume: number;
+    /** 成交额（累计） */
+    amount: number;
+    /** 均价 */
+    avgPrice: number;
+}
+/**
+ * 带指标的 K 线数据
+ */
+export interface KlineWithIndicators extends KlineData {
+    /** MA 指标 */
+    ma?: MAResult;
+    /** MACD 指标 */
+    macd?: MACDResult;
+    /** BOLL 指标 */
+    boll?: BOLLResult;
+    /** KDJ 指标 */
+    kdj?: KDJResult;
+    /** RSI 指标 */
+    rsi?: RSIResult;
+    /** WR 指标 */
+    wr?: WRResult;
+    /** BIAS 指标 */
+    bias?: BIASResult;
+    /** CCI 指标 */
+    cci?: CCIResult;
+    /** ATR 指标 */
+    atr?: ATRResult;
+    /** OBV 指标（能量潮） */
+    obv?: OBVResult;
+    /** ROC 指标（变动率） */
+    roc?: ROCResult;
+    /** DMI 指标（趋向指标） */
+    dmi?: DMIResult;
+    /** SAR 指标（抛物线转向） */
+    sar?: SARResult;
+    /** KC 指标（肯特纳通道） */
+    kc?: KCResult;
+}
+/**
+ * MA 指标结果
+ */
+export interface MAResult {
+    ma5?: number | null;
+    ma10?: number | null;
+    ma20?: number | null;
+    ma30?: number | null;
+    ma60?: number | null;
+    ma120?: number | null;
+    ma250?: number | null;
+    [key: string]: number | null | undefined;
+}
+/**
+ * MACD 指标结果
+ */
+export interface MACDResult {
+    dif: number | null;
+    dea: number | null;
+    macd: number | null;
+}
+/**
+ * BOLL 指标结果
+ */
+export interface BOLLResult {
+    mid: number | null;
+    upper: number | null;
+    lower: number | null;
+    bandwidth?: number | null;
+}
+/**
+ * KDJ 指标结果
+ */
+export interface KDJResult {
+    k: number | null;
+    d: number | null;
+    j: number | null;
+}
+/**
+ * RSI 指标结果
+ */
+export interface RSIResult {
+    rsi6?: number | null;
+    rsi12?: number | null;
+    rsi24?: number | null;
+    [key: string]: number | null | undefined;
+}
+/**
+ * WR 指标结果
+ */
+export interface WRResult {
+    wr6?: number | null;
+    wr10?: number | null;
+    [key: string]: number | null | undefined;
+}
+/**
+ * BIAS 指标结果
+ */
+export interface BIASResult {
+    bias6?: number | null;
+    bias12?: number | null;
+    bias24?: number | null;
+    [key: string]: number | null | undefined;
+}
+/**
+ * CCI 指标结果
+ */
+export interface CCIResult {
+    cci: number | null;
+}
+/**
+ * ATR 指标结果
+ */
+export interface ATRResult {
+    tr?: number | null;
+    atr: number | null;
+}
+/**
+ * OBV 指标结果（能量潮）
+ */
+export interface OBVResult {
+    obv: number | null;
+    obvMa: number | null;
+}
+/**
+ * ROC 指标结果（变动率）
+ */
+export interface ROCResult {
+    roc: number | null;
+    signal: number | null;
+}
+/**
+ * DMI 指标结果（趋向指标）
+ */
+export interface DMIResult {
+    pdi: number | null;
+    mdi: number | null;
+    adx: number | null;
+    adxr: number | null;
+}
+/**
+ * SAR 指标结果（抛物线转向）
+ */
+export interface SARResult {
+    sar: number | null;
+    trend: 1 | -1 | null;
+    ep: number | null;
+    af: number | null;
+}
+/**
+ * KC 指标结果（肯特纳通道）
+ */
+export interface KCResult {
+    mid: number | null;
+    upper: number | null;
+    lower: number | null;
+    width: number | null;
+}
+/**
+ * OHLCV 数据（用于指标计算）
+ */
+export interface OHLCV {
+    open: number | null;
+    high: number | null;
+    low: number | null;
+    close: number | null;
+    volume?: number | null;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './data';
+export * from './theme';
+export * from './props';

package/dist/types/props.d.ts

@@ -0,0 +1,279 @@
+import { CSSProperties } from 'react';
+import { EChartsOption } from 'echarts';
+import { KlineData, TimelineData } from './data';
+import { ThemeConfig } from './theme';
+/**
+ * 周期类型
+ */
+export type PeriodType = 'timeline' | 'timeline5' | '1' | '5' | '15' | '30' | '60' | 'daily' | 'weekly' | 'monthly';
+/**
+ * 市场类型
+ */
+export type MarketType = 'A' | 'HK' | 'US';
+/**
+ * 复权类型
+ */
+export type AdjustType = '' | 'qfq' | 'hfq';
+/**
+ * 指标类型
+ */
+export type IndicatorType = 'ma' | 'macd' | 'boll' | 'kdj' | 'rsi' | 'wr' | 'bias' | 'cci' | 'atr' | 'obv' | 'roc' | 'dmi' | 'sar' | 'kc' | 'volume';
+/**
+ * MA 指标配置
+ */
+export interface MAOptions {
+    periods?: number[];
+    type?: 'sma' | 'ema' | 'wma';
+}
+/**
+ * MACD 指标配置
+ */
+export interface MACDOptions {
+    short?: number;
+    long?: number;
+    signal?: number;
+}
+/**
+ * BOLL 指标配置
+ */
+export interface BOLLOptions {
+    period?: number;
+    stdDev?: number;
+}
+/**
+ * KDJ 指标配置
+ */
+export interface KDJOptions {
+    period?: number;
+    kPeriod?: number;
+    dPeriod?: number;
+}
+/**
+ * RSI 指标配置
+ */
+export interface RSIOptions {
+    periods?: number[];
+}
+/**
+ * WR 指标配置
+ */
+export interface WROptions {
+    periods?: number[];
+}
+/**
+ * BIAS 指标配置
+ */
+export interface BIASOptions {
+    periods?: number[];
+}
+/**
+ * CCI 指标配置
+ */
+export interface CCIOptions {
+    period?: number;
+}
+/**
+ * ATR 指标配置
+ */
+export interface ATROptions {
+    period?: number;
+}
+/**
+ * OBV 指标配置（能量潮）
+ */
+export interface OBVOptions {
+    maPeriod?: number;
+}
+/**
+ * ROC 指标配置（变动率）
+ */
+export interface ROCOptions {
+    period?: number;
+    signalPeriod?: number;
+}
+/**
+ * DMI 指标配置（趋向指标）
+ */
+export interface DMIOptions {
+    period?: number;
+    adxPeriod?: number;
+}
+/**
+ * SAR 指标配置（抛物线转向）
+ */
+export interface SAROptions {
+    afStart?: number;
+    afIncrement?: number;
+    afMax?: number;
+}
+/**
+ * KC 指标配置（肯特纳通道）
+ */
+export interface KCOptions {
+    emaPeriod?: number;
+    atrPeriod?: number;
+    multiplier?: number;
+}
+/**
+ * 指标参数配置
+ */
+export interface IndicatorOptions {
+    ma?: MAOptions | boolean;
+    macd?: MACDOptions | boolean;
+    boll?: BOLLOptions | boolean;
+    kdj?: KDJOptions | boolean;
+    rsi?: RSIOptions | boolean;
+    wr?: WROptions | boolean;
+    bias?: BIASOptions | boolean;
+    cci?: CCIOptions | boolean;
+    atr?: ATROptions | boolean;
+    obv?: OBVOptions | boolean;
+    roc?: ROCOptions | boolean;
+    dmi?: DMIOptions | boolean;
+    sar?: SAROptions | boolean;
+    kc?: KCOptions | boolean;
+}
+/**
+ * 获取 K 线数据参数
+ */
+export interface GetKlineParams {
+    symbol: string;
+    market: MarketType;
+    period: PeriodType;
+    adjust: AdjustType;
+    cursor?: string | number;
+    limit?: number;
+}
+/**
+ * 获取分时数据参数
+ */
+export interface GetTimelineParams {
+    symbol: string;
+    market: MarketType;
+}
+/**
+ * 数据源提供者
+ */
+export interface KLineDataProvider {
+    getKline: (params: GetKlineParams, signal?: AbortSignal) => Promise<KlineData[]>;
+    getTimeline?: (params: GetTimelineParams, signal?: AbortSignal) => Promise<TimelineData[]>;
+}
+/**
+ * 请求配置
+ */
+export interface RequestOptions {
+    debounceMs?: number;
+    abortOnChange?: boolean;
+    dedupe?: boolean;
+}
+/**
+ * 自动刷新配置
+ */
+export interface AutoRefreshOptions {
+    intervalMs?: number;
+    onlyTradingTime?: boolean;
+}
+/**
+ * 时间轴配置
+ */
+export type TimeAxisOptions = {
+    mode: 'trading';
+    sessionCompression?: boolean;
+} | {
+    mode: 'continuous';
+};
+/**
+ * ECharts Option 合并配置
+ */
+export interface EChartsOptionMergeOptions {
+    mode?: 'safeMerge' | 'replace';
+    replaceMerge?: string[];
+}
+/**
+ * 面板配置
+ */
+export interface PaneConfig {
+    id: string;
+    height?: number | string;
+    indicators: IndicatorType[];
+}
+/**
+ * SDK 配置
+ */
+export interface SDKOptions {
+    baseUrl?: string;
+    timeout?: number;
+    headers?: Record<string, string>;
+}
+/**
+ * KLineChart 组件 Props
+ */
+export interface KLineChartProps {
+    /** 股票代码（必填） */
+    symbol: string;
+    /** 市场类型 */
+    market?: MarketType;
+    /** K 线周期 */
+    period?: PeriodType;
+    /** 复权类型 */
+    adjust?: AdjustType;
+    /** 图表高度 */
+    height?: number | string;
+    /** 图表宽度 */
+    width?: number | string;
+    /** 主题 */
+    theme?: 'light' | 'dark' | ThemeConfig;
+    /** 启用的技术指标 */
+    indicators?: IndicatorType[];
+    /** 指标参数配置 */
+    indicatorOptions?: IndicatorOptions;
+    /** 是否显示工具栏 */
+    showToolbar?: boolean;
+    /** 是否显示周期切换 */
+    showPeriodSelector?: boolean;
+    /** 是否显示指标切换 */
+    showIndicatorSelector?: boolean;
+    /** 最多显示几个副图，默认 3，最大 3，传入 0 表示不显示副图 */
+    maxSubPanes?: number;
+    /** 初始可见 K 线数量 */
+    visibleCount?: number;
+    /** 数据加载回调 */
+    onDataLoad?: (data: KlineData[]) => void;
+    /** 周期切换回调 */
+    onPeriodChange?: (period: PeriodType) => void;
+    /** 错误回调 */
+    onError?: (error: Error) => void;
+    /** 数据源提供者 */
+    dataProvider?: KLineDataProvider;
+    /** stock-sdk 配置 */
+    sdkOptions?: SDKOptions;
+    /** 请求配置 */
+    requestOptions?: RequestOptions;
+    /** 自动刷新配置 */
+    autoRefresh?: boolean | AutoRefreshOptions;
+    /** 时间轴配置 */
+    timeAxis?: TimeAxisOptions;
+    /** 自定义 ECharts 配置 */
+    echartsOption?: EChartsOption;
+    /** ECharts Option 合并策略 */
+    echartsOptionMerge?: EChartsOptionMergeOptions;
+    /** 面板配置 */
+    panes?: PaneConfig[];
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+}
+/**
+ * KLineChart Ref 方法
+ */
+export interface KLineChartRef {
+    refresh(): Promise<void>;
+    setPeriod(period: PeriodType): void;
+    setIndicators(indicators: IndicatorType[]): void;
+    zoomTo(start: number, end: number): void;
+    resetZoom(): void;
+    getEchartsInstance(): unknown | null;
+    exportImage(type?: 'png' | 'jpeg'): string;
+    getData(): KlineData[];
+}

package/dist/types/theme.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 主题配置
+ */
+export interface ThemeConfig {
+    /** 背景色 */
+    backgroundColor: string;
+    /** 文字颜色 */
+    textColor: string;
+    /** 次要文字颜色 */
+    textColorSecondary: string;
+    /** 网格线颜色 */
+    gridLineColor: string;
+    /** 上涨颜色 */
+    upColor: string;
+    /** 下跌颜色 */
+    downColor: string;
+    /** 均线颜色（按周期顺序） */
+    maColors: string[];
+    /** 成交量上涨颜色 */
+    volumeUpColor: string;
+    /** 成交量下跌颜色 */
+    volumeDownColor: string;
+    /** 十字准线颜色 */
+    crosshairColor: string;
+    /** Tooltip 背景色 */
+    tooltipBgColor: string;
+    /** Tooltip 边框颜色 */
+    tooltipBorderColor: string;
+    /** 分割线颜色 */
+    splitLineColor: string;
+    /** 区域填充颜色（分时图下方） */
+    areaColor: string;
+    /** 选中高亮色 */
+    activeColor: string;
+}
+/**
+ * 浅色主题
+ */
+export declare const lightTheme: ThemeConfig;
+/**
+ * 深色主题
+ */
+export declare const darkTheme: ThemeConfig;
+/**
+ * 获取主题配置
+ */
+export declare function getTheme(theme: 'light' | 'dark' | ThemeConfig): ThemeConfig;

package/dist/utils/cache.d.ts

@@ -0,0 +1,56 @@
+interface CacheConfig {
+    enabled: boolean;
+    ttl: number;
+    maxSize: number;
+}
+/**
+ * 根据周期类型获取推荐的缓存 TTL
+ * - 分时数据：30 秒（需要较实时的数据）
+ * - 分钟 K 线：2 分钟
+ * - 日/周/月 K 线：10 分钟（历史数据变化慢）
+ */
+export declare function getTTLByPeriod(period: string): number;
+/**
+ * 简单的内存缓存
+ */
+export declare class DataCache<T> {
+    private cache;
+    private config;
+    constructor(config?: Partial<CacheConfig>);
+    /**
+     * 生成缓存 key
+     */
+    static buildKey(params: Record<string, unknown>): string;
+    /**
+     * 获取缓存
+     */
+    get(key: string): T | undefined;
+    /**
+     * 设置缓存
+     * @param key 缓存键
+     * @param data 缓存数据
+     * @param ttl 可选的自定义 TTL（毫秒）
+     */
+    set(key: string, data: T, ttl?: number): void;
+    /**
+     * 清理过期缓存
+     */
+    cleanup(): void;
+    /**
+     * 删除缓存
+     */
+    delete(key: string): boolean;
+    /**
+     * 清空缓存
+     */
+    clear(): void;
+    /**
+     * 获取缓存大小
+     */
+    size(): number;
+}
+/**
+ * 全局数据缓存实例
+ */
+export declare const dataCache: DataCache<unknown>;
+export {};