@363045841yyt/klinechart-core 0.8.5 → 0.8.7

package/src/tokens/theme-base.ts

@@ -0,0 +1,36 @@
+import type { SpacingTokens, TypographyTokens, MotionTokens } from './types'
+
+export const spacing: SpacingTokens = {
+  none: '0',
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  xxl: '32px',
+  xxxl: '64px',
+}
+
+export const typography: TypographyTokens = {
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  fontFamilyMono:
+    "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSizeSm: '10px',
+  fontSizeMd: '12px',
+  fontSizeLg: '14px',
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
+  lineHeightTight: 1.2,
+  lineHeightStandard: 1.4,
+}
+
+export const motion: MotionTokens = {
+  durationInstant: '0ms',
+  durationFast: '120ms',
+  durationModerate: '200ms',
+  easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+}

package/src/tokens/theme-china.ts

@@ -45,6 +45,10 @@ export function withAsiaMarketColors(theme: Theme): Theme {
             candleUpWick: theme.colors.candleDownWick,
             candleDownWick: theme.colors.candleUpWick,
 
+            // ── Time-share area fill ──
+            timeShareAreaUp: theme.colors.timeShareAreaDown,
+            timeShareAreaDown: theme.colors.timeShareAreaUp,
+
             // ── Volume bars ──
             volumeUp: theme.colors.volumeDown,
             volumeDown: theme.colors.volumeUp,

package/src/tokens/theme-dark.ts

@@ -18,9 +18,13 @@
  */
 
 import type { Theme } from './types'
+import { spacing, typography, motion } from './theme-base'
 
 export const darkTheme: Theme = {
     name: 'dark',
+    spacing,
+    typography,
+    motion,
     colors: {
         background: '#111827',
         foreground: '#E8EAED',
@@ -36,6 +40,7 @@ export const darkTheme: Theme = {
 
         volumeUp: '#22D69B66',
         volumeDown: '#FF646466',
+        volumeNeutral: '#FFFFFF66',
 
         axisText: '#9AA0A6',
         axisLine: '#2A2F36',
@@ -72,6 +77,13 @@ export const darkTheme: Theme = {
         avwapBand: '#A78BFA33',
         mtfOverlay: '#38BDF8',
 
+        timeSharePriceLine: '#60A5FA',
+        timeShareAvgLine: '#FBBF24',
+        timeShareAreaUp: 'rgba(34, 214, 155, 0.20)',
+        timeShareAreaDown: 'rgba(255, 100, 100, 0.20)',
+        timeSharePreClose: '#9CA3AF',
+        timeShareVolume: '#60A5FA',
+
         palette: {
             // Same hue ordering as light theme; values tuned for dark BG.
             i1: '#4A9EFF', // blue (brightened)
@@ -105,7 +117,7 @@ export const darkTheme: Theme = {
             transparent: 'transparent',
             active: '#1890ff',
             activeHover: '#40a9ff',
-            hover: '#3a3a4a',
+            hover: '#262C36',
         },
         border: {
             dark: 'rgba(255, 255, 255, 0.15)',
@@ -205,36 +217,4 @@ export const darkTheme: Theme = {
         },
         wmsrGrid: 'rgba(255, 255, 255, 0.1)',
     },
-    spacing: {
-        none: '0',
-        xxs: '2px',
-        xs: '4px',
-        sm: '8px',
-        md: '12px',
-        lg: '16px',
-        xl: '24px',
-        xxl: '32px',
-        xxxl: '64px',
-    },
-    typography: {
-        fontFamily:
-            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        fontFamilyMono:
-            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
-        fontSizeSm: '10px',
-        fontSizeMd: '12px',
-        fontSizeLg: '14px',
-        fontWeightRegular: 400,
-        fontWeightMedium: 500,
-        fontWeightBold: 700,
-        lineHeightTight: 1.2,
-        lineHeightStandard: 1.4,
-    },
-    motion: {
-        durationInstant: '0ms',
-        durationFast: '120ms',
-        durationModerate: '200ms',
-        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
-    },
 }

package/src/tokens/theme-light.ts

@@ -20,9 +20,13 @@
  */
 
 import type { Theme } from './types'
+import { spacing, typography, motion } from './theme-base'
 
 export const lightTheme: Theme = {
     name: 'light',
+    spacing,
+    typography,
+    motion,
     colors: {
         background: '#FAFAFA',
         foreground: '#1F1F1F',
@@ -38,6 +42,7 @@ export const lightTheme: Theme = {
 
         volumeUp: '#0F8B5C66', // 40% alpha — paired with candleUp
         volumeDown: '#C2363B66',
+        volumeNeutral: '#00000066',
 
         axisText: '#5A5A5A',
         axisLine: '#D0D0D0',
@@ -78,6 +83,13 @@ export const lightTheme: Theme = {
         // #0369A1 → 4.59:1.
         mtfOverlay: '#0369A1',
 
+        timeSharePriceLine: '#4A90D9',
+        timeShareAvgLine: '#F5A623',
+        timeShareAreaUp: 'rgba(15, 139, 92, 0.15)',
+        timeShareAreaDown: 'rgba(213, 19, 26, 0.15)',
+        timeSharePreClose: '#888888',
+        timeShareVolume: '#4A90D9',
+
         palette: {
             // Okabe-Ito-derived qualitative scale, AA on #FAFAFA
             i1: '#0072B2', // strong blue
@@ -101,7 +113,7 @@ export const lightTheme: Theme = {
             weak: 'hsl(210, 7%, 65%)',
             white: 'rgba(255, 255, 255, 0.92)',
         },
-price: {
+        price: {
             lastPrice: 'rgba(230, 100, 115, 0.95)',
         },
         tagBg: {
@@ -211,36 +223,4 @@ price: {
         },
         wmsrGrid: 'rgba(0, 0, 0, 0.1)',
     },
-    spacing: {
-        none: '0',
-        xxs: '2px',
-        xs: '4px',
-        sm: '8px',
-        md: '12px',
-        lg: '16px',
-        xl: '24px',
-        xxl: '32px',
-        xxxl: '64px',
-    },
-    typography: {
-        fontFamily:
-            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        fontFamilyMono:
-            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
-        fontSizeSm: '10px',
-        fontSizeMd: '12px',
-        fontSizeLg: '14px',
-        fontWeightRegular: 400,
-        fontWeightMedium: 500,
-        fontWeightBold: 700,
-        lineHeightTight: 1.2,
-        lineHeightStandard: 1.4,
-    },
-    motion: {
-        durationInstant: '0ms',
-        durationFast: '120ms',
-        durationModerate: '200ms',
-        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
-    },
 }

package/src/tokens/types.ts

@@ -251,6 +251,7 @@ export interface ColorTokens {
     // Volume bars (paired with candle bull/bear)
     readonly volumeUp: ColorValue
     readonly volumeDown: ColorValue
+    readonly volumeNeutral: ColorValue
 
     // Price + time axes
     readonly axisText: ColorValue
@@ -290,6 +291,14 @@ export interface ColorTokens {
     readonly alertTriggered: ColorValue
     readonly alertMuted: ColorValue
 
+    // Time-share (分时图) specific colors
+    readonly timeSharePriceLine: ColorValue
+    readonly timeShareAvgLine: ColorValue
+    readonly timeShareAreaUp: ColorValue
+    readonly timeShareAreaDown: ColorValue
+    readonly timeSharePreClose: ColorValue
+    readonly timeShareVolume: ColorValue
+
     // Anchored VWAP / MTF overlay accents
     readonly avwapLine: ColorValue
     readonly avwapBand: ColorValue

package/src/types/price.ts

@@ -38,6 +38,19 @@ export interface KLineDailyDongCaiResponse extends KLineData {
 }
 
 
+export interface TimeShareData {
+  timestamp: number
+  price: number
+  average: number
+  volume: number
+  amount: number
+}
+
+export function isTimeShareData(data: unknown[]): data is TimeShareData[] {
+  const first = data[0]
+  return data.length > 0 && first !== null && typeof first === 'object' && 'price' in (first as object) && 'average' in (first as object)
+}
+
 export function toKLineData(arr: KLineDailyDongCaiResponse[]): KLineData[] {
   return arr
     .map((e) => ({

package/src/utils/dateFormat.ts

@@ -24,7 +24,7 @@ const ymdCache = new Map<number, string>()
  * @example
  * formatDateToYYYYMMDDNoDash(1736793600000) // "20250114"
  */
-export function formatDateToYYYYMMDDNoDash(timestamp: number): string {
+function formatDateToYYYYMMDDNoDash(timestamp: number): string {
     const d = new Date(timestamp)
     const year = d.getFullYear()
     const month = String(d.getMonth() + 1).padStart(2, '0')
@@ -39,7 +39,7 @@ export function formatDateToYYYYMMDDNoDash(timestamp: number): string {
  * @example
  * getCurrentDateYYYYMMDD() // "20250114"（根据实际日期）
  */
-export function getCurrentDateYYYYMMDD(): string {
+function getCurrentDateYYYYMMDD(): string {
     const d = new Date()
     const year = d.getFullYear()
     const month = String(d.getMonth() + 1).padStart(2, '0')
@@ -130,7 +130,7 @@ export function formatMonthOrYear(timestamp: number): { text: string; isYear: bo
  * @example
  * monthKey(1736793600000) // 24301 (2025*12 + 0)
  */
-export function monthKey(timestamp: number): number {
+function monthKey(timestamp: number): number {
     const d = new Date(timestamp)
     return d.getFullYear() * 12 + d.getMonth()
 }
@@ -176,7 +176,7 @@ export function formatTimestamp(
  * @param ts - 时间戳（毫秒）
  * @returns 格式化后的日期字符串，例如 "2025-01-14"
  */
-export const formatShanghaiDate = formatDateToYYYYMMDD
+const formatShanghaiDate = formatDateToYYYYMMDD
 
 /**
  * formatDateToYYYYMMDD 的别名，用于十字线日期标签显示
@@ -283,6 +283,29 @@ export function formatDay(timestamp: number): { text: string; isYear: boolean }
     return { text: `${month}-${day}`, isYear }
 }
 
+// ========== 时分标签缓存 ==========
+const TIME_LABEL_CACHE_SIZE = 256
+const timeLabelCache = new Map<number, string>()
+
+/**
+ * 将时间戳格式化为 "HH:mm" 格式（上海时区）
+ * 用于分时图底部时间轴标签显示
+ */
+export function formatTimeLabel(timestamp: number): string {
+  const cached = timeLabelCache.get(timestamp)
+  if (cached !== undefined) return cached
+
+  const d = new Date(timestamp)
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  const result = `${hh}:${mm}`
+
+  if (timeLabelCache.size >= TIME_LABEL_CACHE_SIZE) timeLabelCache.clear()
+  timeLabelCache.set(timestamp, result)
+
+  return result
+}
+
 // 兼容 getDayOfYear — fallback when not on Date prototype
 function getDayOfYear(date: Date): number {
     const start = new Date(date.getFullYear(), 0, 0)

package/src/utils/kLineDraw/axis.ts

@@ -1,7 +1,7 @@
 import type { KLineData } from '../../types/price'
 import { priceToY, yToPrice } from '../priceToY'
 import { alignToPhysicalPixelCenter, roundToPhysicalPixel } from '../../engine/draw/pixelAlign'
-import { formatYMDShanghai, formatMonthOrYear, formatDay, findMonthBoundaries, findDayBoundaries } from '../../utils/dateFormat'
+import { formatYMDShanghai, formatTimeLabel, formatMonthOrYear, formatDay, findMonthBoundaries, findDayBoundaries } from '../../utils/dateFormat'
 import { resolveThemeColors } from '../../tokens'
 import type { ColorPresetSettings } from '../../tokens'
 import { getFont, setCanvasFont } from '../../engine/theme/fonts'
@@ -24,92 +24,6 @@ function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
     return width
 }
 
-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
-    /** 是否绘制左侧边界竖线（默认 true） */
-    drawLeftBorder?: boolean
-    /** 是否绘制刻度短线（默认 true） */
-    drawTickLines?: boolean
-    /** 价格偏移量（用于价格轴平移时同步显示） */
-    priceOffset?: number
-}
-
-/** 右侧价格轴（固定，不随 translate/scroll 变化） */
-export function drawPriceAxis(ctx: CanvasRenderingContext2D, opts: PriceAxisOptions, theme: 'light' | 'dark' = 'light', isAsiaMarket?: boolean, colorPresetSettings?: ColorPresetSettings) {
-    const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
-    const {
-        x,
-        y,
-        width,
-        height,
-        priceRange,
-        yPaddingPx = 0,
-        dpr,
-        ticks = 10,
-        bgColor = colors.tagBg.transparent,
-        textColor = colors.text.secondary,
-        lineColor = colors.border.dark,
-        fontSize = 16,
-        drawLeftBorder = true,
-        drawTickLines = true,
-        priceOffset = 0,
-    } = opts
-
-    const wantPad = yPaddingPx
-    const pad = Math.max(0, Math.min(wantPad, Math.floor(height / 2) - 1))
-
-    const { maxPrice, minPrice } = priceRange
-    const range = maxPrice - minPrice
-    const step = range === 0 ? 0 : range / (Math.max(2, ticks) - 1)
-
-    ctx.fillStyle = bgColor
-    ctx.fillRect(x, y, width, height)
-
-    if (drawLeftBorder) {
-        ctx.strokeStyle = lineColor
-        ctx.lineWidth = 1
-        ctx.beginPath()
-        ctx.moveTo(alignToPhysicalPixelCenter(x, dpr), y)
-        ctx.lineTo(alignToPhysicalPixelCenter(x, dpr), y + height)
-        ctx.stroke()
-    }
-
-    setCanvasFont(ctx, getFont(fontSize))
-    ctx.textBaseline = 'middle'
-    ctx.textAlign = 'center'
-    ctx.strokeStyle = lineColor
-    ctx.fillStyle = textColor
-
-    const centerX = x + width / 2
-
-    for (let i = 0; i < Math.max(2, ticks); i++) {
-        const p = range === 0 ? maxPrice : maxPrice - step * i
-        const yy = Math.round(priceToY(p, maxPrice, minPrice, height, pad, pad) + y)
-
-        if (drawTickLines) {
-            ctx.beginPath()
-            const lineY = alignToPhysicalPixelCenter(yy, dpr)
-            ctx.moveTo(x, lineY)
-            ctx.lineTo(x + 4, lineY)
-            ctx.stroke()
-        }
-
-        const displayPrice = p + priceOffset
-        ctx.fillText(displayPrice.toFixed(2), roundToPhysicalPixel(centerX, dpr), alignToPhysicalPixelCenter(yy, dpr))
-    }
-}
 
 export interface TimeAxisOptions {
     x: number
@@ -135,6 +49,10 @@ export interface TimeAxisOptions {
     drawBottomBorder?: boolean
     /** K线级别，如 'daily'、'5min'、'15min' */
     period: string
+    /** K 线中心点 x 坐标（逻辑像素），由 calcKLinePositions 预计算 */
+    kLineCenters: number[]
+    /** 数据索引可见范围 { start, end } */
+    visibleRange: { start: number; end: number }
 }
 
 export interface LastPriceLineOptions {
@@ -197,6 +115,8 @@ export interface CrosshairTimeLabelOptions {
     fontSize?: number
     paddingX?: number
     paddingY?: number
+    /** 周期类型，分时图显示 HH:mm 格式 */
+    period?: string
 }
 
 export function drawCrosshairTimeLabel(ctx: CanvasRenderingContext2D, opts: CrosshairTimeLabelOptions, theme: 'light' | 'dark' = 'light', isAsiaMarket?: boolean, colorPresetSettings?: ColorPresetSettings) {
@@ -211,9 +131,10 @@ export function drawCrosshairTimeLabel(ctx: CanvasRenderingContext2D, opts: Cros
         dpr,
         fontSize = 16,
         paddingX = 8,
+        period,
     } = opts
 
-    const text = formatYMDShanghai(timestamp)
+    const text = period === 'timeshare' ? formatTimeLabel(timestamp) : formatYMDShanghai(timestamp)
 
     ctx.save()
     setCanvasFont(ctx, getFont(fontSize))
@@ -306,7 +227,7 @@ export function drawCrosshairPriceLabel(ctx: CanvasRenderingContext2D, opts: Cro
 }
 
 /** 绘制"最新价水平虚线"（画在 plotCanvas 的 world 坐标系：需在 translate(-scrollLeft,0) 之后调用） */
-export function drawLastPriceDashedLine(ctx: CanvasRenderingContext2D, opts: LastPriceLineOptions, theme: 'light' | 'dark' = 'light', isAsiaMarket?: boolean, colorPresetSettings?: ColorPresetSettings) {
+function drawLastPriceDashedLine(ctx: CanvasRenderingContext2D, opts: LastPriceLineOptions, theme: 'light' | 'dark' = 'light', isAsiaMarket?: boolean, colorPresetSettings?: ColorPresetSettings) {
     const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
     const {
         plotWidth,
@@ -356,11 +277,11 @@ export function drawTimeAxis(ctx: CanvasRenderingContext2D, opts: TimeAxisOption
         height,
         data,
         scrollLeft,
-        kWidth,
-        kGap,
         startIndex,
         endIndex,
         dpr,
+        kLineCenters,
+        visibleRange,
         bgColor = colors.tagBg.transparent,
         textColor = colors.text.secondary,
         lineColor = colors.border.dark,
@@ -370,16 +291,6 @@ export function drawTimeAxis(ctx: CanvasRenderingContext2D, opts: TimeAxisOption
         drawBottomBorder = true,
     } = opts
 
-    const physKWidth = Math.round(kWidth * dpr)
-    const alignedPhysKWidth = physKWidth % 2 === 0 ? physKWidth + 1 : physKWidth
-    const physKGap = Math.round(kGap * dpr)
-    const unitPx = alignedPhysKWidth + physKGap
-    const startXPx = physKGap
-
-    const unit = unitPx / dpr
-    const startX = startXPx / dpr
-    const alignedKWidth = alignedPhysKWidth / dpr
-
     ctx.fillStyle = bgColor
     ctx.fillRect(x, y, width, height)
 
@@ -408,13 +319,34 @@ export function drawTimeAxis(ctx: CanvasRenderingContext2D, opts: TimeAxisOption
     const regularFont = getFont(fontSize)
     const boldFont = getFont(fontSize, { bold: true })
 
-    const isMinuteData = opts.period.includes('min')
-    const showOnlyYear = !isMinuteData && opts.period !== 'daily'
-    const boundaries = isMinuteData ? findDayBoundaries(data) : findMonthBoundaries(data)
+    const isTimeShare = opts.period === 'timeshare'
+    const isMinuteData = !isTimeShare && opts.period.includes('min')
+    const showOnlyYear = !isMinuteData && !isTimeShare && opts.period !== 'daily'
+
+    let boundaries: number[]
+    let labelFn: (ts: number) => { text: string; isYear: boolean }
+
+    if (isTimeShare) {
+      const visibleCount = endIndex - startIndex
+      const maxLabels = Math.max(2, Math.min(8, Math.floor(visibleCount / 2) || 1))
+      const step = Math.max(1, Math.floor(visibleCount / maxLabels))
+      boundaries = []
+      for (let i = 0; i <= maxLabels; i++) {
+        const idx = startIndex + Math.min(i * step, Math.max(0, visibleCount - 1))
+        boundaries.push(idx)
+      }
+      labelFn = (ts) => ({ text: formatTimeLabel(ts), isYear: false })
+    } else if (isMinuteData) {
+      boundaries = findDayBoundaries(data)
+      labelFn = formatDay
+    } else {
+      boundaries = findMonthBoundaries(data)
+      labelFn = formatMonthOrYear
+    }
+
     const visibleBoundaries = boundaries.filter((idx: number) => idx >= startIndex && idx < endIndex)
 
     let lastBold: boolean | null = null
-    const labelFn = isMinuteData ? formatDay : formatMonthOrYear
 
     for (const idx of visibleBoundaries) {
         const k = data[idx]
@@ -423,8 +355,9 @@ export function drawTimeAxis(ctx: CanvasRenderingContext2D, opts: TimeAxisOption
         const { text, isYear } = labelFn(k.timestamp)
         if (showOnlyYear && !isYear) continue
 
-        const worldX = startX + idx * unit + alignedKWidth / 2
-        const screenX = worldX - scrollLeft
+        const centerX = kLineCenters[idx - visibleRange.start]
+        if (centerX === undefined) continue
+        const screenX = centerX - scrollLeft
 
         const minX = paddingX
         const maxX = Math.max(paddingX, width - paddingX)

package/src/utils/uuid.ts

@@ -0,0 +1,8 @@
+export function generateUUID(): string {
+  if (typeof crypto.randomUUID === 'function') return crypto.randomUUID()
+  const bytes = crypto.getRandomValues(new Uint8Array(16))
+  bytes[6] = (bytes[6]! & 0x0f) | 0x40
+  bytes[8] = (bytes[8]! & 0x3f) | 0x80
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'))
+  return `${hex.slice(0, 4).join('')}-${hex.slice(4, 6).join('')}-${hex.slice(6, 8).join('')}-${hex.slice(8, 10).join('')}-${hex.slice(10).join('')}`
+}

package/src/utils/volumePrice.ts

@@ -8,7 +8,7 @@ export { DEFAULT_VOLUME_PRICE_CONFIG }
  * 成交量前缀和计算器
  * 用于优化成交量移动平均的计算，避免重复遍历
  */
-export class VolumePrefixSum {
+class VolumePrefixSum {
   private prefixSum: number[] = []
   private dataLength: number = 0
 
@@ -93,7 +93,7 @@ function getPrefixSum(data: KLineData[]): VolumePrefixSum {
  * @param config - 量价关系计算配置
  * @returns 量价关系类型
  */
-export function analyzeVolumePriceRelation(
+function analyzeVolumePriceRelation(
   data: KLineData[],
   index: number,
   config: VolumePriceConfig

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.8.5"
+export const VERSION = "0.8.7"