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

package/src/types/price.ts

@@ -1,76 +0,0 @@
-export interface KLineData {
-  /* 时间戳（毫秒） */
-  timestamp: number
-  /** 日期字符串（如 "2025-06-16"），用于跨品种精确匹配 */
-  date?: string
-  /* 开盘价 */
-  open: number
-  /* 最高价 */
-  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
-  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,
-      stockCode: e.stockCode,
-      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/utils/kLineDraw/axis.ts

@@ -1,540 +0,0 @@
-import { alignToPhysicalPixelCenter, roundToPhysicalPixel } from '../../engine/draw/pixelAlign'
-import { getFont, setCanvasFont } from '../../engine/theme/fonts'
-import { resolveThemeColors } from '../../tokens'
-import type { ColorPresetSettings } from '../../tokens'
-import type { KLineData } from '../../types/price'
-import {
-  formatYMDShanghai,
-  formatTimeLabel,
-  formatMonthOrYear,
-  formatDay,
-  findMonthBoundaries,
-  findDayBoundaries,
-} from '../../utils/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()
-}