kline-charts-react 0.0.1

package/dist/utils/formatters.d.ts

@@ -0,0 +1,115 @@
+/**
+ * 格式化数字（千分位）
+ */
+export declare function formatNumber(value: number | null | undefined, decimals?: number): string;
+/**
+ * 格式化价格
+ */
+export declare function formatPrice(value: number | null | undefined): string;
+/**
+ * 格式化涨跌幅（带百分号和正负号）
+ */
+export declare function formatPercent(value: number | null | undefined): string;
+/**
+ * 格式化涨跌额（带正负号）
+ */
+export declare function formatChange(value: number | null | undefined): string;
+/**
+ * 格式化成交量（万/亿）
+ * 整数不显示 .00
+ */
+export declare function formatVolume(value: number | null | undefined): string;
+/**
+ * 格式化成交额（万/亿）
+ * 整数不显示 .00
+ */
+export declare function formatAmount(value: number | null | undefined): string;
+/**
+ * 格式化日期
+ */
+export declare function formatDate(date: string | Date, format?: string): string;
+/**
+ * Tooltip 数据类型
+ */
+export interface TooltipData {
+    date: string;
+    open: number | null;
+    high: number | null;
+    low: number | null;
+    close: number | null;
+    volume?: number | null;
+    amount?: number | null;
+    change?: number | null;
+    changePercent?: number | null;
+    turnoverRate?: number | null;
+    amplitude?: number | null;
+    indicators?: string[];
+    ma?: {
+        ma5?: number | null;
+        ma10?: number | null;
+        ma20?: number | null;
+        ma30?: number | null;
+        ma60?: number | null;
+    };
+    boll?: {
+        upper: number | null;
+        mid: number | null;
+        lower: number | null;
+    };
+    sar?: {
+        sar: number | null;
+        trend: number | null;
+    };
+    kc?: {
+        upper: number | null;
+        mid: number | null;
+        lower: number | null;
+    };
+    macd?: {
+        dif: number | null;
+        dea: number | null;
+        macd: number | null;
+    };
+    kdj?: {
+        k: number | null;
+        d: number | null;
+        j: number | null;
+    };
+    rsi?: {
+        rsi6?: number | null;
+        rsi12?: number | null;
+        rsi24?: number | null;
+    };
+    wr?: {
+        wr6?: number | null;
+        wr10?: number | null;
+    };
+    bias?: {
+        bias6?: number | null;
+        bias12?: number | null;
+        bias24?: number | null;
+    };
+    cci?: {
+        cci: number | null;
+    };
+    atr?: {
+        atr: number | null;
+    };
+    obv?: {
+        obv: number | null;
+        obvMa: number | null;
+    };
+    roc?: {
+        roc: number | null;
+        signal: number | null;
+    };
+    dmi?: {
+        pdi: number | null;
+        mdi: number | null;
+        adx: number | null;
+    };
+}
+/**
+ * 格式化 K 线 Tooltip
+ */
+export declare function formatKlineTooltip(data: TooltipData): string;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './formatters';
+export * from './indicators';
+export * from './optionBuilder';
+export * from './timelineBuilder';
+export * from './cache';

package/dist/utils/indicators.d.ts

@@ -0,0 +1,109 @@
+import { OHLCV, MAResult, MACDResult, BOLLResult, KDJResult, RSIResult, WRResult, BIASResult, CCIResult, ATRResult, OBVResult, ROCResult, DMIResult, SARResult, KCResult } from '../types';
+/**
+ * 计算 SMA（简单移动平均）
+ */
+export declare function calcSMA(data: (number | null)[], period: number): (number | null)[];
+/**
+ * 计算 EMA（指数移动平均）
+ */
+export declare function calcEMA(data: (number | null)[], period: number): (number | null)[];
+/**
+ * 计算 WMA（加权移动平均）
+ */
+export declare function calcWMA(data: (number | null)[], period: number): (number | null)[];
+/**
+ * 计算 MA（移动平均线）
+ */
+export declare function calcMA(closes: (number | null)[], options?: {
+    periods?: number[];
+    type?: 'sma' | 'ema' | 'wma';
+}): MAResult[];
+/**
+ * 计算 MACD
+ */
+export declare function calcMACD(closes: (number | null)[], options?: {
+    short?: number;
+    long?: number;
+    signal?: number;
+}): MACDResult[];
+/**
+ * 计算 BOLL（布林带）
+ */
+export declare function calcBOLL(closes: (number | null)[], options?: {
+    period?: number;
+    stdDev?: number;
+}): BOLLResult[];
+/**
+ * 计算 KDJ
+ */
+export declare function calcKDJ(data: OHLCV[], options?: {
+    period?: number;
+    kPeriod?: number;
+    dPeriod?: number;
+}): KDJResult[];
+/**
+ * 计算 RSI
+ */
+export declare function calcRSI(closes: (number | null)[], options?: {
+    periods?: number[];
+}): RSIResult[];
+/**
+ * 计算 WR（威廉指标）
+ */
+export declare function calcWR(data: OHLCV[], options?: {
+    periods?: number[];
+}): WRResult[];
+/**
+ * 计算 BIAS（乖离率）
+ */
+export declare function calcBIAS(closes: (number | null)[], options?: {
+    periods?: number[];
+}): BIASResult[];
+/**
+ * 计算 CCI（顺势指标）
+ */
+export declare function calcCCI(data: OHLCV[], options?: {
+    period?: number;
+}): CCIResult[];
+/**
+ * 计算 ATR（平均真实波幅）
+ */
+export declare function calcATR(data: OHLCV[], options?: {
+    period?: number;
+}): ATRResult[];
+/**
+ * 计算 OBV（能量潮）
+ */
+export declare function calcOBV(data: OHLCV[], options?: {
+    maPeriod?: number;
+}): OBVResult[];
+/**
+ * 计算 ROC（变动率）
+ */
+export declare function calcROC(closes: (number | null)[], options?: {
+    period?: number;
+    signalPeriod?: number;
+}): ROCResult[];
+/**
+ * 计算 DMI（趋向指标）
+ */
+export declare function calcDMI(data: OHLCV[], options?: {
+    period?: number;
+    adxPeriod?: number;
+}): DMIResult[];
+/**
+ * 计算 SAR（抛物线转向指标）
+ */
+export declare function calcSAR(data: OHLCV[], options?: {
+    afStart?: number;
+    afIncrement?: number;
+    afMax?: number;
+}): SARResult[];
+/**
+ * 计算 KC（肯特纳通道）
+ */
+export declare function calcKC(data: OHLCV[], options?: {
+    emaPeriod?: number;
+    atrPeriod?: number;
+    multiplier?: number;
+}): KCResult[];

package/dist/utils/optionBuilder.d.ts

@@ -0,0 +1,32 @@
+import { EChartsOption } from 'echarts';
+import { KlineWithIndicators, ThemeConfig, IndicatorType, PaneConfig } from '../types';
+export declare const DATA_ZOOM_INSIDE_ID = "kline-zoom-inside";
+export declare const DATA_ZOOM_SLIDER_ID = "kline-zoom-slider";
+/**
+ * 生成默认面板配置参数
+ */
+interface GetDefaultPanesOptions {
+    /** 最多显示几个副图，默认 3，最大 3，传入 0 表示不显示副图 */
+    maxSubPanes?: number;
+}
+/**
+ * 生成默认面板配置
+ * 每个副图指标独立一个面板
+ */
+export declare function getDefaultPanes(indicators: IndicatorType[], options?: GetDefaultPanesOptions): PaneConfig[];
+/**
+ * 构建 ECharts Option
+ */
+export declare function buildOption(params: {
+    data: KlineWithIndicators[];
+    theme: ThemeConfig;
+    indicators: IndicatorType[];
+    panes?: PaneConfig[];
+    visibleCount?: number;
+    containerHeight?: number;
+}): EChartsOption;
+/**
+ * 合并 ECharts Option
+ */
+export declare function mergeOption(baseOption: EChartsOption, customOption: EChartsOption | undefined, mode?: 'safeMerge' | 'replace'): EChartsOption;
+export {};

package/dist/utils/timelineBuilder.d.ts

@@ -0,0 +1,11 @@
+import { EChartsOption } from 'echarts';
+import { TimelineData, ThemeConfig } from '../types';
+/**
+ * 构建分时图 Option
+ */
+export declare function buildTimelineOption(params: {
+    data: TimelineData[];
+    theme: ThemeConfig;
+    prevClose?: number;
+    containerHeight?: number;
+}): EChartsOption;

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "kline-charts-react",
+  "version": "0.0.1",
+  "description": "Professional stock K-line chart React component with built-in data source, powered by ECharts and stock-sdk",
+  "author": "chengzuopeng",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/kline-charts-react.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "yarn --cwd playground dev",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc -b && vite build",
+    "build:playground": "yarn --cwd playground build",
+    "lint": "eslint .",
+    "preview": "yarn --cwd playground preview",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "echarts": "^5.5.0",
+    "stock-sdk": "^1.6.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.4.0"
+  },
+  "keywords": [
+    "kline",
+    "k-line",
+    "stock",
+    "chart",
+    "echarts",
+    "react",
+    "candlestick",
+    "trading",
+    "finance",
+    "stock-chart",
+    "technical-analysis",
+    "macd",
+    "bollinger",
+    "kdj",
+    "rsi",
+    "a-share",
+    "hk-stock",
+    "us-stock"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chengzuopeng/kline-charts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chengzuopeng/kline-charts/issues"
+  },
+  "homepage": "https://github.com/chengzuopeng/kline-charts#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}