@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/foundation/types/price.ts

@@ -0,0 +1,77 @@
+export interface KLineData {
+  /* 时间戳（毫秒） */
+  timestamp: number
+  /** 日期字符串（如 "2025-06-16"），用于跨品种精确匹配 */
+  date?: string
+  /* 开盘价 */
+  open: number
+  /* 最高价 */
+  high: number
+  /* 最低价 */
+  low: number
+  /* 收盘价 */
+  close: number
+  symbol?: string
+  /** 成交量 */
+  volume?: number
+  /** 成交额 */
+  turnover?: number
+  /** 振幅 */
+  amplitude?: number
+  /** 涨跌幅 */
+  changePercent?: number
+  /** 涨跌额 */
+  changeAmount?: number
+  /** 换手率 */
+  turnoverRate?: number
+  /** 添加自定义字段 */
+  [key: string]: any
+}
+
+export interface KLineDailyDongCaiResponse extends KLineData {
+  symbol: string
+  volume: number
+  turnover: number
+  amplitude: number
+  changePercent: number
+  changeAmount: number
+  turnoverRate: number
+}
+
+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) => ({
+      timestamp: e.timestamp,
+      open: e.open,
+      high: e.high,
+      low: e.low,
+      close: e.close,
+      symbol: e.symbol,
+      volume: e.volume,
+      turnover: e.turnover,
+      amplitude: e.amplitude,
+      changePercent: e.changePercent,
+      changeAmount: e.changeAmount,
+      turnoverRate: e.turnoverRate,
+    }))
+    .sort((a, b) => a.timestamp - b.timestamp)
+}

package/src/foundation/utils/kLineDraw/axis.ts

@@ -0,0 +1,540 @@
+import { alignToPhysicalPixelCenter, roundToPhysicalPixel } from '../pixelAlign'
+import { getFont, setCanvasFont } from '../../tokens/fonts'
+import { resolveThemeColors } from '../../tokens'
+import type { ColorPresetSettings } from '../../tokens'
+import type { KLineData } from '../../types/price'
+import {
+  formatYMDShanghai,
+  formatTimeLabel,
+  formatMonthOrYear,
+  formatDay,
+  findMonthBoundaries,
+  findDayBoundaries,
+} from '../dateFormat'
+import { priceToY, yToPrice } from '../priceToY'
+
+const textWidthCache = new Map<string, number>()
+const TEXT_WIDTH_CACHE_LIMIT = 512
+
+function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
+  const key = `${ctx.font}\n${text}`
+  const cached = textWidthCache.get(key)
+  if (cached !== undefined) {
+    return cached
+  }
+
+  const width = ctx.measureText(text).width
+  if (textWidthCache.size >= TEXT_WIDTH_CACHE_LIMIT) {
+    textWidthCache.clear()
+  }
+  textWidthCache.set(key, width)
+  return width
+}
+
+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
+  /** 是否绘制顶部边界线（默认 true，如果主图已有底边框则设为 false 避免重复） */
+  drawTopBorder?: boolean
+  /** 是否绘制底部边界线（默认 true，如果副图已有下边框则设为 false 避免重复） */
+  drawBottomBorder?: boolean
+  /** K线级别，如 'daily'、'5min'、'15min' */
+  period: string
+  /** K 线中心点 x 坐标（逻辑像素），由 calcKLinePositions 预计算 */
+  kLineCenters: number[]
+  /** 数据索引可见范围 { start, end } */
+  visibleRange: { start: number; end: number }
+  /** 预计算的月份键值数组（year*12+month），与 data 长度一致 */
+  monthKeys?: Int32Array
+  /** 预计算的日期键值数组（year*366+dayOfYear），与 data 长度一致 */
+  dayKeys?: Int32Array
+}
+
+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
+  borderColor?: string
+  textColor?: string
+  fontSize?: number
+  paddingX?: number
+  /** 价格偏移量（用于价格轴平移时同步显示） */
+  priceOffset?: number
+  /** 优先显示的价格（如十字线已按 active pane 算好） */
+  price?: number
+  formatPrice?: (price: number) => string
+}
+
+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
+  /** 周期类型，分时图显示 HH:mm 格式 */
+  period?: string
+}
+
+export function drawCrosshairTimeLabel(
+  ctx: CanvasRenderingContext2D,
+  opts: CrosshairTimeLabelOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const {
+    x,
+    y,
+    width,
+    height,
+    crosshairX,
+    timestamp,
+    dpr,
+    fontSize = 16,
+    paddingX = 8,
+    period,
+  } = opts
+
+  const text = period === 'timeshare' ? formatTimeLabel(timestamp) : formatYMDShanghai(timestamp)
+
+  ctx.save()
+  setCanvasFont(ctx, getFont(fontSize))
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+
+  const tw = Math.round(measureTextWidth(ctx, text))
+  const rectW = Math.min(width, tw + paddingX * 2)
+  const rectH = height
+
+  const centerX = Math.min(Math.max(crosshairX, x + rectW / 2), x + width - rectW / 2)
+  const centerY = y + height / 2
+
+  const rectX = centerX - rectW / 2
+  const rectY = y
+
+  ctx.fillStyle = colors.label.bg
+  ctx.fillRect(
+    roundToPhysicalPixel(rectX, dpr),
+    roundToPhysicalPixel(rectY, dpr),
+    roundToPhysicalPixel(rectW, dpr),
+    roundToPhysicalPixel(rectH, dpr),
+  )
+
+  ctx.fillStyle = colors.label.text
+  ctx.fillText(text, roundToPhysicalPixel(centerX, dpr), alignToPhysicalPixelCenter(centerY, dpr))
+
+  ctx.restore()
+}
+
+export function drawCrosshairPriceLabel(
+  ctx: CanvasRenderingContext2D,
+  opts: CrosshairPriceLabelOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const {
+    x,
+    y,
+    width,
+    height,
+    crosshairY,
+    priceRange,
+    yPaddingPx = 0,
+    dpr,
+    bgColor = colors.label.bg,
+    borderColor,
+    textColor = colors.label.text,
+    fontSize = 16,
+    priceOffset = 0,
+    price,
+    formatPrice,
+  } = opts
+
+  const pad = Math.max(0, Math.min(yPaddingPx, Math.floor(height / 2) - 1))
+  const { maxPrice, minPrice } = priceRange
+  const displayPrice =
+    price ?? yToPrice(crosshairY - y, maxPrice, minPrice, height, pad, pad) + priceOffset
+  const priceText = formatPrice ? formatPrice(displayPrice) : displayPrice.toFixed(2)
+
+  ctx.save()
+  setCanvasFont(ctx, getFont(fontSize))
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+
+  const textH = fontSize + 4
+  const rectH = textH
+
+  const yy = Math.min(Math.max(crosshairY, y + rectH / 2), y + height - rectH / 2)
+  const rectY = yy - rectH / 2
+
+  const rx = x
+  const ry = roundToPhysicalPixel(rectY, dpr)
+  const rw = width
+  const rh = roundToPhysicalPixel(rectH, dpr)
+  ctx.fillStyle = bgColor
+  ctx.fillRect(rx, ry, rw, rh)
+
+  if (borderColor) {
+    ctx.strokeStyle = borderColor
+    ctx.lineWidth = 1
+    ctx.strokeRect(
+      alignToPhysicalPixelCenter(rx, dpr),
+      alignToPhysicalPixelCenter(ry, dpr),
+      Math.max(0, rw - 1 / dpr),
+      Math.max(0, rh - 1 / dpr),
+    )
+  }
+
+  const centerX = x + width / 2
+  ctx.fillStyle = textColor
+  ctx.fillText(priceText, roundToPhysicalPixel(centerX, dpr), alignToPhysicalPixelCenter(yy, dpr))
+
+  ctx.restore()
+}
+
+/** 绘制"最新价水平虚线"（画在 plotCanvas 的 world 坐标系：需在 translate(-scrollLeft,0) 之后调用） */
+function drawLastPriceDashedLine(
+  ctx: CanvasRenderingContext2D,
+  opts: LastPriceLineOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const {
+    plotWidth,
+    plotHeight,
+    scrollLeft,
+    startIndex,
+    endIndex,
+    kWidth,
+    kGap,
+    priceRange,
+    lastPrice,
+    yPaddingPx = 0,
+    dpr,
+    color = colors.crosshairLine,
+  } = opts
+
+  const { maxPrice, minPrice } = priceRange
+  if (!(lastPrice >= minPrice && lastPrice <= maxPrice)) return
+
+  const pad = Math.max(0, Math.min(yPaddingPx, Math.floor(plotHeight / 2) - 1))
+  const y = priceToY(lastPrice, maxPrice, minPrice, plotHeight, pad, pad)
+
+  const unit = kWidth + kGap
+  const startX = kGap + startIndex * unit
+  const endX = kGap + endIndex * unit
+
+  ctx.save()
+  ctx.strokeStyle = color
+  ctx.lineWidth = 1
+  ctx.setLineDash([4, 3])
+  ctx.beginPath()
+  const yy = alignToPhysicalPixelCenter(y, dpr)
+  ctx.moveTo(roundToPhysicalPixel(startX, dpr), yy)
+  ctx.lineTo(roundToPhysicalPixel(endX, dpr), yy)
+  ctx.stroke()
+  ctx.setLineDash([])
+  ctx.restore()
+}
+
+/** 底部时间轴（X方向随 scrollLeft 变化） */
+export function drawTimeAxis(
+  ctx: CanvasRenderingContext2D,
+  opts: TimeAxisOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const {
+    x,
+    y,
+    width,
+    height,
+    data,
+    scrollLeft,
+    startIndex,
+    endIndex,
+    dpr,
+    kLineCenters,
+    visibleRange,
+    bgColor = colors.tagBg.transparent,
+    textColor = colors.text.secondary,
+    lineColor = colors.border.dark,
+    fontSize = 12,
+    paddingX = 8,
+    drawTopBorder = true,
+    drawBottomBorder = true,
+  } = opts
+
+  ctx.fillStyle = bgColor
+  ctx.fillRect(x, y, width, height)
+
+  if (drawTopBorder) {
+    ctx.strokeStyle = lineColor
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.moveTo(x, alignToPhysicalPixelCenter(y, dpr))
+    ctx.lineTo(x + width, alignToPhysicalPixelCenter(y, dpr))
+    ctx.stroke()
+  }
+
+  if (drawBottomBorder) {
+    ctx.strokeStyle = lineColor
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.moveTo(x, alignToPhysicalPixelCenter(y + height, dpr))
+    ctx.lineTo(x + width, alignToPhysicalPixelCenter(y + height, dpr))
+    ctx.stroke()
+  }
+
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillStyle = textColor
+  const textY = y + height / 2
+  const regularFont = getFont(fontSize)
+  const boldFont = getFont(fontSize, { bold: true })
+
+  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, opts.dayKeys)
+    labelFn = formatDay
+  } else {
+    boundaries = findMonthBoundaries(data, opts.monthKeys)
+    labelFn = formatMonthOrYear
+  }
+
+  const visibleBoundaries = boundaries.filter((idx: number) => idx >= startIndex && idx < endIndex)
+
+  let lastBold: boolean | null = null
+
+  for (const idx of visibleBoundaries) {
+    const k = data[idx]
+    if (!k) continue
+
+    const { text, isYear } = labelFn(k.timestamp)
+    if (showOnlyYear && !isYear) continue
+
+    const centerX = kLineCenters[idx - visibleRange.start]
+    if (centerX === undefined) continue
+    const screenX = centerX - scrollLeft
+
+    const minX = paddingX
+    const maxX = Math.max(paddingX, width - paddingX)
+
+    if (screenX >= minX && screenX <= maxX) {
+      const drawX = Math.min(Math.max(screenX, minX), maxX)
+      if (lastBold !== isYear) {
+        setCanvasFont(ctx, isYear ? boldFont : regularFont)
+        lastBold = isYear
+      }
+      ctx.fillText(text, roundToPhysicalPixel(drawX, dpr), alignToPhysicalPixelCenter(textY, dpr))
+    }
+  }
+}
+
+/** ============ 轴标签绘制函数 ============ */
+
+export interface AxisPriceLabelOptions {
+  x: number
+  y: number
+  width: number
+  height: number
+  priceY: number
+  price: number
+  dpr: number
+  bgColor?: string
+  borderColor?: string
+  textColor?: string
+  fontSize?: number
+}
+
+export function drawAxisPriceLabel(
+  ctx: CanvasRenderingContext2D,
+  opts: AxisPriceLabelOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const {
+    x,
+    y,
+    width,
+    height,
+    priceY,
+    price,
+    dpr,
+    bgColor = colors.label.bg,
+    borderColor,
+    textColor = colors.label.text,
+    fontSize = 12,
+  } = opts
+
+  const priceText = price.toFixed(2)
+
+  ctx.save()
+  setCanvasFont(ctx, getFont(fontSize))
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+
+  const textH = fontSize + 4
+  const rectH = textH
+
+  const yy = Math.min(Math.max(priceY, y + rectH / 2), y + height - rectH / 2)
+  const rectY = yy - rectH / 2
+
+  const rx = x
+  const ry = roundToPhysicalPixel(rectY, dpr)
+  const rw = width
+  const rh = roundToPhysicalPixel(rectH, dpr)
+  ctx.fillStyle = bgColor
+  ctx.fillRect(rx, ry, rw, rh)
+
+  if (borderColor) {
+    ctx.strokeStyle = borderColor
+    ctx.lineWidth = 1
+    ctx.strokeRect(
+      alignToPhysicalPixelCenter(rx, dpr),
+      alignToPhysicalPixelCenter(ry, dpr),
+      Math.max(0, rw - 1 / dpr),
+      Math.max(0, rh - 1 / dpr),
+    )
+  }
+
+  const centerX = x + width / 2
+  ctx.fillStyle = textColor
+  ctx.fillText(priceText, roundToPhysicalPixel(centerX, dpr), roundToPhysicalPixel(yy, dpr) + 1)
+
+  ctx.restore()
+}
+
+export interface AxisTimeLabelOptions {
+  x: number
+  y: number
+  width: number
+  height: number
+  labelX: number
+  timestamp: number
+  dpr: number
+  bgColor?: string
+  textColor?: string
+  fontSize?: number
+  paddingX?: number
+}
+
+export function drawAxisTimeLabel(
+  ctx: CanvasRenderingContext2D,
+  opts: AxisTimeLabelOptions,
+  theme: 'light' | 'dark' = 'light',
+  isAsiaMarket?: boolean,
+  colorPresetSettings?: ColorPresetSettings,
+) {
+  const colors = resolveThemeColors(theme, isAsiaMarket, colorPresetSettings)
+  const { x, y, width, height, labelX, timestamp, dpr, fontSize = 12, paddingX = 8 } = opts
+
+  const text = formatYMDShanghai(timestamp)
+
+  ctx.save()
+  setCanvasFont(ctx, getFont(fontSize))
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+
+  const tw = Math.round(measureTextWidth(ctx, text))
+  const rectW = Math.min(width, tw + paddingX * 2)
+  const rectH = height
+
+  const centerX = Math.min(Math.max(labelX, x + rectW / 2), x + width - rectW / 2)
+  const centerY = y + height / 2
+
+  const rectX = centerX - rectW / 2
+  const rectY = y
+
+  ctx.fillStyle = opts.bgColor ?? colors.label.bg
+  ctx.fillRect(
+    roundToPhysicalPixel(rectX, dpr),
+    roundToPhysicalPixel(rectY, dpr),
+    roundToPhysicalPixel(rectW, dpr),
+    roundToPhysicalPixel(rectH, dpr),
+  )
+
+  ctx.fillStyle = opts.textColor ?? colors.label.text
+  ctx.fillText(text, roundToPhysicalPixel(centerX, dpr), alignToPhysicalPixelCenter(centerY, dpr))
+
+  ctx.restore()
+}

package/src/foundation/utils/viewportSide.ts

@@ -0,0 +1,3 @@
+export function isOnRightHalf(viewportX: number, viewportWidth: number): boolean {
+  return viewportX >= viewportWidth / 2
+}

package/src/index.ts

@@ -1,11 +1,11 @@
-export * from './reactivity'
+export * from './foundation/reactivity'
 export * from './controllers'
-export * from './mcp'
+export * from './features/mcp'
 export { VERSION } from './version'
-export * from './tokens'
-export { formatTimestamp } from './utils/dateFormat'
-export { generateUUID } from './utils/uuid'
-export type { ChartSettings } from './config/chartSettings'
+export * from './foundation/tokens'
+export { formatTimestamp } from './foundation/utils/dateFormat'
+export { generateUUID } from './foundation/utils/uuid'
+export type { ChartSettings } from './foundation/config/chartSettings'
 
 // ── Batch 1: Error taxonomy ───────────────────────────────────────────────
 export {
@@ -17,20 +17,20 @@ export {
 export { getRecoveryHint, formatKLineChartError, type FormatErrorOptions } from './errors-help'
 
 // ── Batch 2: Framework-agnostic foundation ────────────────────────────────
-export * from './input'
+export * from './features/input'
 export * from './scale'
-export * from './scheduler'
-export type * from './render'
-export * from './renderer-tier'
+export * from './rendering/scheduler'
+export type * from './rendering/render'
+export * from './rendering/renderer-tier'
 
 // ── Batch 3: Scene abstraction (depends on render) ────────────────────────
-export * from './scene'
+export * from './rendering/scene'
 
 // ── Batch 4: Independent business features ────────────────────────────────
-export * from './alerts'
-export * from './replay'
-export * from './chartTypes'
-export * from './indicators'
+export * from './features/alerts'
+export * from './features/replay'
+export * from './features/chartTypes'
+export * from './features/indicators'
 
 // ── Batch 5: Component data models ────────────────────────────────────────
 export * from './components/volumeProfile'