@363045841yyt/klinechart 0.1.0 → 0.1.2

package/dist/klinechart.css

@@ -1,2 +1,2 @@
-.chart-container[data-v-7f0057f3]{-webkit-overflow-scrolling:touch;background:#fff;width:100%;height:400px;overflow:auto hidden}.chart-canvas[data-v-7f0057f3]{display:block}
+.kline-tooltip[data-v-8d05acf2]{z-index:10;color:#000000c7;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #0000001f;border-radius:8px;min-width:200px;max-width:260px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;box-shadow:0 6px 18px #0000001f}.kline-tooltip__title[data-v-8d05acf2]{justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:600;display:flex}.kline-tooltip__grid[data-v-8d05acf2]{grid-template-columns:1fr;gap:2px;display:grid}.kline-tooltip__grid .row[data-v-8d05acf2]{justify-content:space-between;gap:10px;display:flex}.kline-tooltip__grid .row span[data-v-8d05acf2]:first-child{color:#0000008f}.chart-wrapper[data-v-28c7f9b2]{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.chart-container[data-v-28c7f9b2]{scrollbar-width:none;-ms-overflow-style:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;width:80%;height:80%;position:relative;overflow:auto hidden}.chart-container[data-v-28c7f9b2]::-webkit-scrollbar{display:none}.chart-container[data-v-28c7f9b2]:hover{cursor:grab}.chart-container[data-v-28c7f9b2]:active{cursor:grabbing}.scroll-content[data-v-28c7f9b2]{height:100%;min-height:inherit;position:relative}.canvas-layer[data-v-28c7f9b2]{pointer-events:none;position:sticky;top:0;left:0}.plot-canvas[data-v-28c7f9b2]{display:block;position:absolute;top:0;left:0}.y-axis-canvas[data-v-28c7f9b2]{display:block;position:absolute;top:0;right:0}.x-axis-canvas[data-v-28c7f9b2]{display:block;position:absolute;bottom:0;left:0}
 /*$vite$:1*/

package/dist/types/price.d.ts

@@ -4,6 +4,20 @@ export interface KLineData {
     high: number;
     low: number;
     close: number;
+    /** 股票代码（东财等数据源会提供） */
+    stockCode?: string;
+    /** 成交量 */
+    volume?: number;
+    /** 成交额 */
+    turnover?: number;
+    /** 振幅 */
+    amplitude?: number;
+    /** 涨跌幅 */
+    changePercent?: number;
+    /** 涨跌额 */
+    changeAmount?: number;
+    /** 换手率 */
+    turnoverRate?: number;
 }
 export interface KLineDailyDongCaiResponse extends KLineData {
     stockCode: string;

package/dist/utils/dateFormat.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 日期格式化工具函数集合
+ * 统一管理项目中所有日期相关的格式化逻辑
+ */
+/**
+ * 将时间戳格式化为 YYYYMMDD 格式（纯数字，无分隔符）
+ * @param timestamp - 时间戳（毫秒）
+ * @returns 格式化后的日期字符串，例如 "20250114"
+ *
+ * @example
+ * formatDateToYYYYMMDDNoDash(1736793600000) // "20250114"
+ */
+export declare function formatDateToYYYYMMDDNoDash(timestamp: number): string;
+/**
+ * 获取当前日期的 YYYYMMDD 格式（纯数字，无分隔符）
+ * @returns 当前日期的格式化字符串，例如 "20250114"
+ *
+ * @example
+ * getCurrentDateYYYYMMDD() // "20250114"（根据实际日期）
+ */
+export declare function getCurrentDateYYYYMMDD(): string;
+/**
+ * 将时间戳格式化为 YYYY-MM-DD 格式（上海时区）
+ * @param timestamp - 时间戳（毫秒）
+ * @returns 格式化后的日期字符串，例如 "2025-01-14"
+ *
+ * @example
+ * formatDateToYYYYMMDD(1736793600000) // "2025-01-14"
+ */
+export declare function formatDateToYYYYMMDD(timestamp: number): string;
+/**
+ * 格式化月份或年份用于显示
+ * 当年为 1 月时显示年份，其他月份显示月份号
+ * @param timestamp - 时间戳（毫秒）
+ * @returns 包含文本和是否为年份的标志
+ *
+ * @example
+ * formatMonthOrYear(1704067200000) // { text: "2024", isYear: true }  (2024年1月)
+ * formatMonthOrYear(1706745600000) // { text: "02", isYear: false } (2024年2月)
+ */
+export declare function formatMonthOrYear(timestamp: number): {
+    text: string;
+    isYear: boolean;
+};
+/**
+ * 生成月份键值用于比较（YYYY-M 格式）
+ * 注意：月份未补零，用于快速比较月份是否相同
+ * @param timestamp - 时间戳（毫秒）
+ * @returns 月份键值，例如 "2025-1"
+ *
+ * @example
+ * monthKey(1736793600000) // "2025-1"
+ */
+export declare function monthKey(timestamp: number): string;
+/**
+ * formatDateToYYYYMMDD 的别名，保持与历史代码的兼容性
+ * timestamp 是"上海时区当天 00:00:00"映射到 UTC 的值；显示时强制按上海时区格式化
+ * @param ts - 时间戳（毫秒）
+ * @returns 格式化后的日期字符串，例如 "2025-01-14"
+ */
+export declare const formatShanghaiDate: typeof formatDateToYYYYMMDD;
+/**
+ * formatDateToYYYYMMDD 的别名，用于十字线日期标签显示
+ * 按上海时区格式化，避免不同时区出现日期偏移
+ * @param ts - 时间戳（毫秒）
+ * @returns 格式化后的日期字符串，例如 "2025-01-14"
+ */
+export declare const formatYMDShanghai: typeof formatDateToYYYYMMDD;

package/dist/utils/kLineDraw/MA.d.ts

@@ -0,0 +1,8 @@
+import { KLineData } from '../../types/price';
+import { drawOption, PriceRange } from './kLine';
+export declare const MA5_COLOR = "rgba(255, 193, 37, 1)";
+export declare const MA10_COLOR = "rgba(190, 131, 12, 1)";
+export declare const MA20_COLOR = "rgba(69, 112, 249, 1)";
+export declare function drawMA5Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number, startIndex?: number, endIndex?: number, priceRange?: PriceRange): void;
+export declare function drawMA10Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number, startIndex?: number, endIndex?: number, priceRange?: PriceRange): void;
+export declare function drawMA20Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number, startIndex?: number, endIndex?: number, priceRange?: PriceRange): void;

package/dist/utils/kLineDraw/axis.d.ts

@@ -0,0 +1,113 @@
+import { KLineData } from '../../types/price';
+export interface PriceAxisOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    priceRange: {
+        maxPrice: number;
+        minPrice: number;
+    };
+    yPaddingPx?: number;
+    dpr: number;
+    ticks?: number;
+    bgColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    fontSize?: number;
+    paddingX?: number;
+}
+/** 右侧价格轴（固定，不随 translate/scroll 变化） */
+export declare function drawPriceAxis(ctx: CanvasRenderingContext2D, opts: PriceAxisOptions): void;
+export interface TimeAxisOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    data: KLineData[];
+    scrollLeft: number;
+    kWidth: number;
+    kGap: number;
+    startIndex: number;
+    endIndex: number;
+    dpr: number;
+    bgColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    fontSize?: number;
+    /** 左右内边距（逻辑像素），避免月份/年份文字贴边 */
+    paddingX?: number;
+}
+export interface LastPriceLineOptions {
+    /** 绘图区宽度（逻辑像素） */
+    plotWidth: number;
+    /** 绘图区高度（逻辑像素） */
+    plotHeight: number;
+    /** 当前滚动位置（逻辑像素） */
+    scrollLeft: number;
+    /** 可视范围：用于确定虚线的起止 worldX */
+    startIndex: number;
+    endIndex: number;
+    /** K线布局 */
+    kWidth: number;
+    kGap: number;
+    /** 价格范围 */
+    priceRange: {
+        maxPrice: number;
+        minPrice: number;
+    };
+    /** 最新价 */
+    lastPrice: number;
+    /** Y轴 padding（与绘图区一致） */
+    yPaddingPx?: number;
+    dpr: number;
+    color?: string;
+}
+export interface CrosshairPriceLabelOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** 十字线的 y（相对该 canvas 的逻辑像素坐标） */
+    crosshairY: number;
+    priceRange: {
+        maxPrice: number;
+        minPrice: number;
+    };
+    yPaddingPx?: number;
+    dpr: number;
+    bgColor?: string;
+    textColor?: string;
+    fontSize?: number;
+    paddingX?: number;
+}
+export interface CrosshairTimeLabelOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** 十字线的 x（相对该 canvas 的逻辑像素坐标） */
+    crosshairX: number;
+    /** 命中的交易日时间戳（毫秒） */
+    timestamp: number;
+    dpr: number;
+    bgColor?: string;
+    textColor?: string;
+    fontSize?: number;
+    paddingX?: number;
+    paddingY?: number;
+}
+/**
+ * 在底部时间轴上绘制"十字线日期标签"
+ * 说明：该函数假设时间轴背景/刻度已绘制完（即 drawTimeAxis 之后调用）。
+ */
+export declare function drawCrosshairTimeLabel(ctx: CanvasRenderingContext2D, opts: CrosshairTimeLabelOptions): void;
+/**
+ * 在右侧价格轴上绘制"十字线价格标签"
+ * 说明：该函数假设价格轴背景/刻度已绘制完（即 drawPriceAxis 之后调用）。
+ */
+export declare function drawCrosshairPriceLabel(ctx: CanvasRenderingContext2D, opts: CrosshairPriceLabelOptions): void;
+/** 绘制"最新价水平虚线"（画在 plotCanvas 的 world 坐标系：需在 translate(-scrollLeft,0) 之后调用） */
+export declare function drawLastPriceDashedLine(ctx: CanvasRenderingContext2D, opts: LastPriceLineOptions): void;
+/** 底部时间轴（X方向随 scrollLeft 变化） */
+export declare function drawTimeAxis(ctx: CanvasRenderingContext2D, opts: TimeAxisOptions): void;

package/dist/utils/kLineDraw/grid.d.ts

@@ -0,0 +1,30 @@
+import { KLineData } from '../../types/price';
+import { drawOption, PriceRange } from './kLine';
+export interface GridOption {
+    /** 网格线颜色 */
+    gridColor?: string;
+    /** 最新价线颜色 */
+    lastPriceColor?: string;
+    /** 文本颜色 */
+    textColor?: string;
+    /** 文字字号 */
+    fontSize?: number;
+    /** 右侧文字 padding */
+    rightTextPadding?: number;
+    /** 底部日期文字 padding */
+    bottomTextPadding?: number;
+    /** 价格刻度档位数（默认 10） */
+    priceTicks?: number;
+}
+/**
+ * 价格/日期网格层（绘制在平移后的坐标系：ctx 已 translate(-scrollLeft, 0)）
+ * - Y轴：min/max 价格线 + 右侧价格文字
+ * - X轴：日期变更处画竖线 + 底部日期文字
+ * - 最新价：可视区最后一根 close 在[min,max]内则画横向虚线 + 右侧文字
+ */
+export declare function drawGridLayer(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr: number, startIndex: number, endIndex: number, priceRange: PriceRange, 
+/**
+ * 右侧价格轴所在的“世界坐标X”（在 translate(-scrollLeft, 0) 之后的坐标系里）
+ * 通常传入：scrollLeft + viewWidth
+ */
+axisRightX: number, gridOpt?: GridOption): void;

package/dist/utils/{draw → kLineDraw}/kLine.d.ts

@@ -4,13 +4,11 @@ export interface drawOption {
     kGap: number;
     yPaddingPx?: number;
 }
+export interface PriceRange {
+    maxPrice: number;
+    minPrice: number;
+}
 /**
- * K 线图绘制
- * @param ctx
- * @param data
- * @param option
- * @param logicHeight
- * @param dpr
- * @returns
+ * K线图绘制 - 影线固定为 1 物理像素宽
  */
-export declare function kLineDraw(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number): void;
+export declare function kLineDraw(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number, startIndex?: number, endIndex?: number, priceRange?: PriceRange): void;

package/dist/utils/kLineDraw/pixelAlign.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 像素对齐工具函数 - 逻辑像素空间（配合 ctx.scale(dpr) 使用）
+ */
+/**
+ * 将逻辑坐标对齐到物理像素边界（用于矩形填充）
+ */
+export declare function roundToPhysicalPixel(value: number, dpr: number): number;
+/**
+ * 将逻辑坐标对齐到物理像素中心（用于 1px 线条）
+ */
+export declare function alignToPhysicalPixelCenter(value: number, dpr: number): number;
+/**
+ * 对齐矩形到物理像素边界
+ */
+export declare function alignRect(x: number, y: number, width: number, height: number, dpr: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * 创建用于绘制垂直线的矩形（1 物理像素宽）
+ * 所有坐标都对齐到物理像素边界，避免亚像素模糊
+ */
+export declare function createVerticalLineRect(centerX: number, y1: number, y2: number, dpr: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;
+/**
+ * 创建用于绘制水平线的矩形（1 物理像素高）
+ * 所有坐标都对齐到物理像素边界，避免亚像素模糊
+ *
+ * @param x1 - 水平线起始点的 X 坐标（逻辑像素）
+ * @param x2 - 水平线结束点的 X 坐标（逻辑像素）
+ * @param centerY - 水平线中心 Y 坐标（逻辑像素）
+ * @param dpr - 设备像素比，用于将逻辑像素转换为物理像素
+ * @returns 返回对齐到物理像素的矩形信息，如果 x1 和 x2 相等则返回 null
+ *          返回对象包含 x, y, width, height 属性，单位均为逻辑像素
+ *          高度(height)始终为 1/dpr（即 1 物理像素的高度）
+ */
+export declare function createHorizontalLineRect(x1: number, x2: number, centerY: number, dpr: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;

package/dist/utils/kline/format.d.ts

@@ -0,0 +1,14 @@
+import { KLineData } from '../../types/price';
+export { formatShanghaiDate } from '../dateFormat';
+export declare const UP_COLOR = "rgba(214, 10, 34, 1)";
+export declare const DOWN_COLOR = "rgba(3, 123, 102, 1)";
+export declare const NEUTRAL_COLOR = "rgba(0, 0, 0, 0.78)";
+export declare function getUpDownColor(delta: number): string;
+/** 成交量/成交额单位换算：万/亿 */
+export declare function formatWanYi(n: number, digits?: number): string;
+export declare function formatSignedNumber(n: number, digits?: number): string;
+export declare function formatPercent(n: number, digits?: number): string;
+export declare function formatSignedPercent(n: number, digits?: number): string;
+export declare function calcOpenColor(k: KLineData, prev?: KLineData): string;
+export declare function calcCloseColor(k: KLineData): string;
+export declare function calcChangeColor(k: KLineData): string;

package/dist/utils/kline/ma.d.ts

@@ -0,0 +1,2 @@
+import { KLineData } from '../../types/price';
+export declare function calcMAAtIndex(data: KLineData[], index: number, period: number): number | undefined;

package/dist/utils/kline/viewport.d.ts

@@ -0,0 +1,10 @@
+import { KLineData } from '../../types/price';
+export type PriceRange = {
+    maxPrice: number;
+    minPrice: number;
+};
+export declare function getVisibleRange(scrollLeft: number, viewWidth: number, kWidth: number, kGap: number, totalDataCount: number): {
+    start: number;
+    end: number;
+};
+export declare function getVisiblePriceRange(data: KLineData[], startIndex: number, endIndex: number): PriceRange;

package/dist/utils/logger.d.ts

@@ -1,3 +1,3 @@
 type TagLevel = 'info' | 'success' | 'warn' | 'error';
-export declare function tagLog(level: TagLevel, tag: string, value: unknown): void;
+export declare function tagLog(level: TagLevel | string, value: unknown): void;
 export {};

package/dist/utils/priceToY.d.ts

@@ -1 +1,7 @@
 export declare function priceToY(price: number, maxPrice: number, minPrice: number, canvasHeight: number, paddingTop: number, paddingBottom: number): number;
+/**
+ * 将逻辑像素 y 反算回价格
+ * - y 是相对于绘图区顶部的逻辑像素坐标（不含额外 translate）
+ * - paddingTop/paddingBottom 需与 priceToY 使用一致
+ */
+export declare function yToPrice(y: number, maxPrice: number, minPrice: number, canvasHeight: number, paddingTop: number, paddingBottom: number): number;

package/package.json

@@ -1,56 +1,58 @@
-{
-  "name": "@363045841yyt/klinechart",
-  "version": "0.1.0",
-  "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "build-only": "vite build",
-    "preview": "vite preview",
-    "type-check": "vue-tsc --build",
-    "test:unit": "vitest",
-    "format": "prettier --write --experimental-cli src/",
-    "prepublishOnly": "pnpm run build-only"
-  },
-  "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/kmap.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  },
-  "dependencies": {
-    "axios": "^1.13.2",
-    "pinia": "^3.0.4"
-  },
-  "devDependencies": {
-    "@tsconfig/node24": "^24.0.3",
-    "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.10.4",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
-    "jsdom": "^27.4.0",
-    "npm-run-all2": "^8.0.4",
-    "prettier": "3.7.4",
-    "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@^7.3.0",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-vue-devtools": "^8.0.5",
-    "vitest": "^4.0.16",
-    "vue-tsc": "^3.2.1"
-  }
+{
+  "name": "@363045841yyt/klinechart",
+  "version": "0.1.2",
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:lan": "vite --host 0.0.0.0",
+    "aktools": "cd .. && cd aktoolshttp && uv run python -m aktools",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build-only": "vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --build",
+    "test:unit": "vitest",
+    "format": "prettier --write --experimental-cli src/",
+    "prepublishOnly": "pnpm run build-only"
+  },
+  "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/kmap.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "pinia": "^3.0.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.3",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.4",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "jsdom": "^27.4.0",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "3.7.4",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.0.16",
+    "vue-tsc": "^3.2.1"
+  }
 }

package/dist/utils/draw/MA.d.ts

@@ -1,5 +0,0 @@
-import { KLineData } from '../../types/price';
-import { drawOption } from './kLine';
-export declare function drawMA10Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number): void;
-export declare function drawMA20Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number): void;
-export declare function drawMA5Line(ctx: CanvasRenderingContext2D, data: KLineData[], option: drawOption, logicHeight: number, dpr?: number): void;