@363045841yyt/klinechart-core 0.8.6 → 0.8.8

package/src/engine/renderers/yAxis.ts

@@ -1,11 +1,11 @@
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
 import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '../../utils/kLineDraw/axis'
-import { drawScaleTicks } from '../renderers/Indicator/scale/indicator_scale'
 import { resolveThemeColors } from '../../tokens'
+import { getFont, setCanvasFont } from '../theme/fonts'
+import { roundToPhysicalPixel } from '../draw/pixelAlign'
 
 import type { KLineData } from '../../types/price'
-import type { ScaleType } from '../utils/tickPosition'
 
 /**
  * 创建 Y 轴渲染器插件
@@ -25,7 +25,14 @@ export function createYAxisRendererPlugin(options: {
     priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
 
     draw(context: RenderContext) {
-      const { ctx, pane, dpr, yAxisCtx, data } = context
+      const { ctx, pane, dpr, yAxisCtx, data, period } = context
+
+      // 分时模式始终显示右轴，不受设置约束
+      if (period !== 'timeshare') {
+        const rightType = context.settings?.rightAxisType as string | undefined
+        if (rightType === 'none') return
+      }
+
       const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const scaleType = pane.yAxis.getScaleType()
 
@@ -35,32 +42,28 @@ export function createYAxisRendererPlugin(options: {
 
       const isPercent = scaleType === 'percent' && pane.role === 'price'
 
-      if (pane.capabilities.showPriceAxisTicks) {
-        const tickValueMin = isPercent ? pane.yAxis.getDisplayPercentRange().minPct : displayRange.minPrice
-        const tickValueMax = isPercent ? pane.yAxis.getDisplayPercentRange().maxPct : displayRange.maxPrice
-        const formatLabel = isPercent
+      if (pane.capabilities.showPriceAxisTicks && context.yAxisTicks) {
+        targetCtx.clearRect(0, 0, axisWidth, pane.height)
+
+        const font = getFont(12)
+        setCanvasFont(targetCtx, font)
+        targetCtx.textBaseline = 'middle'
+        targetCtx.textAlign = 'center'
+        targetCtx.fillStyle = tokenColors.text.secondary
+
+        const format = isPercent
           ? (v: number) => {
               const sign = v >= 0 ? '+' : ''
               return sign + v.toFixed(2) + '%'
             }
-          : undefined
+          : (v: number) => v.toFixed(2)
 
-        drawScaleTicks({
-          tickColor: tokenColors.text.secondary,
-          ctx: targetCtx,
-          dpr,
-          axisWidth,
-          height: pane.height,
-          paddingTop: pane.yAxis.getPaddingTop(),
-          paddingBottom: pane.yAxis.getPaddingBottom(),
-          valueMin: tickValueMin,
-          valueMax: tickValueMax,
-          isMain: true,
-          decimals: 2,
-          hideEdgeTicks: false,
-          scaleType: isPercent ? 'percent' : scaleType,
-          formatLabel,
-        })
+        const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
+
+        for (const tick of context.yAxisTicks) {
+          const displayValue = isPercent ? pane.yAxis.toPercent(tick.value) : tick.value
+          targetCtx.fillText(format(displayValue), textX, tick.y)
+        }
       }
 
       // 绘制价格范围带（先于标签，使标签覆盖在范围带之上）
@@ -80,6 +83,7 @@ export function createYAxisRendererPlugin(options: {
       // 绘制来自 yAxisLabels 的标签（最新价格、极值点、绘图锚点等）
       if (context.yAxisLabels && pane.role === 'price') {
         for (const label of context.yAxisLabels) {
+          if (label.price == null || !Number.isFinite(label.price)) continue
           const isLastPrice = label.type === 'lastPrice'
           drawAxisPriceLabel(targetCtx, {
             x: 0,

package/src/engine/scale/price.ts

@@ -2,7 +2,7 @@
 
 export type PriceRange = { maxPrice: number; minPrice: number }
 
-export function priceToY(
+function priceToY(
     price: number,
     maxPrice: number,
     minPrice: number,
@@ -22,7 +22,7 @@ export function priceToY(
  * - y 是相对于绘图区顶部的逻辑像素坐标（不含额外 translate）
  * - paddingTop/paddingBottom 需与 priceToY 使用一致
  */
-export function yToPrice(
+function yToPrice(
     y: number,
     maxPrice: number,
     minPrice: number,

package/src/engine/theme/fonts.ts

@@ -5,7 +5,7 @@
  */
 
 /** 数字和文本的标准字体栈 */
-export const FONT_FAMILY = '"Trebuchet MS", Roboto, Ubuntu, sans-serif'
+const FONT_FAMILY = '"Trebuchet MS", Roboto, Ubuntu, sans-serif'
 
 /** 获取指定字号的字体字符串，用于 Canvas ctx.font */
 export function getFont(size: number, options?: { bold?: boolean }): string {

package/src/engine/utils/klineConfig.ts

@@ -10,11 +10,7 @@
  * @returns 奇数化后的物理像素宽度
  */
 export function calcKWidthPx(kWidth: number, dpr: number): number {
-    let kWidthPx = Math.round(kWidth * dpr)
-    if (kWidthPx % 2 === 0) {
-        kWidthPx += 1
-    }
-    return Math.max(1, kWidthPx)
+    return Math.max(1, Math.round(kWidth * dpr))
 }
 
 /**

package/src/engine/utils/tickPosition.ts

@@ -206,6 +206,40 @@ function generatePixelUniformPercentTicks(options: {
     return positions
 }
 
+/**
+ * 计算均匀像素 Y 位置的值（统一像素反算）
+ * 所有刻度类型都先确定像素均匀 Y 位置，再通过 yToPrice 反算该位置的值
+ */
+export interface UniformPixelTick {
+  y: number
+  value: number
+}
+
+/**
+ * 在给定 Y 像素位置，按指定刻度类型反算价格/值
+ */
+export function priceAtYForScaleType(
+  y: number,
+  valueMin: number,
+  valueMax: number,
+  scaleType: ScaleType,
+  height: number,
+  paddingTop: number,
+  paddingBottom: number,
+): number {
+  const viewH = Math.max(1, height - paddingTop - paddingBottom)
+  const ratio = 1 - (y - paddingTop) / viewH
+
+  if (scaleType === 'log') {
+    if (valueMin <= 0 || valueMax <= 0) return valueMin + ratio * (valueMax - valueMin)
+    const logMin = Math.log(valueMin)
+    const logMax = Math.log(valueMax)
+    return Math.exp(logMin + ratio * (logMax - logMin))
+  }
+
+  return valueMin + ratio * (valueMax - valueMin)
+}
+
 // calculateValueTickPositions 缓存
 let _cvtpCacheKey = ''
 let _cvtpCacheResult: TickPositionWithValue[] = []

package/src/engine/viewport/chartViewportManager.ts

@@ -95,16 +95,6 @@ export class ChartViewportManager {
     this._pendingScrollLeft = v
   }
 
-  /** 仅设置缓存 scrollLeft（由 DataManager 内部使用） */
-  setCachedScrollLeft(v: number): void {
-    this.cachedScrollLeft = v
-  }
-
-  /** 仅设置待写入 scrollLeft（由 DataManager 内部使用） */
-  setPendingScrollLeft(v: number): void {
-    this._pendingScrollLeft = v
-  }
-
   /** 在 RAF 回调中应用待写入的 scrollLeft */
   applyPendingScrollLeft(container: HTMLElement): void {
     if (this._pendingScrollLeft !== null) {
@@ -206,7 +196,8 @@ export class ChartViewportManager {
 
     const dom = this.deps.getDom()
 
-    const canvasLayerWidth = `${viewWidth}px`
+    const dprRoundedViewWidth = Math.round(viewWidth * dpr) / dpr
+    const canvasLayerWidth = `${dprRoundedViewWidth}px`
     if (dom.canvasLayer.style.width !== canvasLayerWidth) {
       dom.canvasLayer.style.width = canvasLayerWidth
     }
@@ -216,9 +207,9 @@ export class ChartViewportManager {
       dom.canvasLayer.style.height = canvasLayerHeight
     }
 
-    const xAxisWidth = Math.round(plotWidth * dpr)
-    if (dom.xAxisCanvas.width !== xAxisWidth) {
-      dom.xAxisCanvas.width = xAxisWidth
+    const xAxisWidthPx = Math.round(dprRoundedViewWidth * dpr)
+    if (dom.xAxisCanvas.width !== xAxisWidthPx) {
+      dom.xAxisCanvas.width = xAxisWidthPx
     }
 
     const xAxisHeight = Math.round(this.deps.getBottomAxisHeight() * dpr)
@@ -226,7 +217,7 @@ export class ChartViewportManager {
       dom.xAxisCanvas.height = xAxisHeight
     }
 
-    const xAxisCssWidth = `${xAxisWidth / dpr}px`
+    const xAxisCssWidth = `${dprRoundedViewWidth}px`
     if (dom.xAxisCanvas.style.width !== xAxisCssWidth) {
       dom.xAxisCanvas.style.width = xAxisCssWidth
     }
@@ -297,6 +288,11 @@ export class ChartViewportManager {
     this.observedSize.width = cssWidth
     this.observedSize.height = cssHeight
 
+    if (this.cachedScrollLeft === 0 && cssWidth > 0) {
+      this.cachedScrollLeft = cssWidth
+      this._pendingScrollLeft = cssWidth
+    }
+
     const pixelSize = entry.devicePixelContentBoxSize?.[0]
     const cssSize = entry.contentBoxSize?.[0]
     if (!pixelSize || !cssSize || cssSize.inlineSize <= 0) {

package/src/plugin/types.ts

@@ -262,6 +262,14 @@ export interface XAxisRange {
   opacity: number
 }
 
+/** Y轴刻度（位置+值），由 RenderContext 构建时预计算，所有 Y 轴渲染器共用 */
+export interface YAxisTick {
+  /** Y像素位置（相对 pane 顶部，逻辑像素） */
+  y: number
+  /** 该Y位置通过 pane.yAxis.yToPrice 反算的价格值 */
+  value: number
+}
+
 /** 渲染上下文 */
 /** MarkerManager 接口（用于 RenderContext） */
 export interface MarkerManagerLike {
@@ -294,6 +302,7 @@ export interface RenderContext {
   crosshairIndex?: number | null
   // 可选的其他 Canvas 上下文
   yAxisCtx?: CanvasRenderingContext2D
+  leftAxisCtx?: CanvasRenderingContext2D
   xAxisCtx?: CanvasRenderingContext2D
   borderCtx?: CanvasRenderingContext2D
   /** 覆盖层 Canvas 上下文（用于十字线、Tooltip 等动态内容） */
@@ -327,6 +336,8 @@ export interface RenderContext {
   isAsiaMarket?: boolean
   /** 用户颜色预设覆盖项 */
   colorPresetSettings?: import('../tokens').ColorPresetSettings
+  /** 预计算的 Y 轴刻度列表（统一像素均匀分布 → yToPrice 反算），所有 Y 轴渲染器共用 */
+  yAxisTicks?: YAxisTick[]
 }
 
 export type DrawingAnchor = {

package/src/semantic/types.ts

@@ -31,7 +31,7 @@ export interface DataConfig {
   startDate: string
   /** 结束日期 YYYY-MM-DD */
   endDate: string
-  period: 'daily' | 'weekly' | 'monthly' | '5min' | '15min' | '30min' | '60min'
+  period: 'daily' | 'weekly' | 'monthly' | '5min' | '15min' | '30min' | '60min' | 'timeshare'
   adjust: AdjustType
 }
 

package/src/tokens/__tests__/__snapshots__/baseline.test.ts.snap

@@ -14,6 +14,7 @@ exports[`theme baseline — dark > CSS declaration block (snapshot) 1`] = `
   --klc-color-candle-doji-border: #8A8F98;
   --klc-color-volume-up: #22D69B66;
   --klc-color-volume-down: #FF646466;
+  --klc-color-volume-neutral: #FFFFFF66;
   --klc-color-axis-text: #9AA0A6;
   --klc-color-axis-line: #2A2F36;
   --klc-color-axis-tick: #2A2F36;
@@ -41,6 +42,12 @@ exports[`theme baseline — dark > CSS declaration block (snapshot) 1`] = `
   --klc-color-avwap-line: #A78BFA;
   --klc-color-avwap-band: #A78BFA33;
   --klc-color-mtf-overlay: #38BDF8;
+  --klc-color-time-share-price-line: #60A5FA;
+  --klc-color-time-share-avg-line: #FBBF24;
+  --klc-color-time-share-area-up: rgba(34, 214, 155, 0.20);
+  --klc-color-time-share-area-down: rgba(255, 100, 100, 0.20);
+  --klc-color-time-share-pre-close: #9CA3AF;
+  --klc-color-time-share-volume: #60A5FA;
   --klc-color-palette-i1: #4A9EFF;
   --klc-color-palette-i2: #FFB95A;
   --klc-color-palette-i3: #22D69B;
@@ -207,6 +214,7 @@ exports[`theme baseline — light > CSS declaration block (snapshot) 1`] = `
   --klc-color-candle-doji-border: #6E6E6E;
   --klc-color-volume-up: #0F8B5C66;
   --klc-color-volume-down: #C2363B66;
+  --klc-color-volume-neutral: #00000066;
   --klc-color-axis-text: #5A5A5A;
   --klc-color-axis-line: #D0D0D0;
   --klc-color-axis-tick: #D0D0D0;
@@ -234,6 +242,12 @@ exports[`theme baseline — light > CSS declaration block (snapshot) 1`] = `
   --klc-color-avwap-line: #7C3AED;
   --klc-color-avwap-band: #7C3AED33;
   --klc-color-mtf-overlay: #0369A1;
+  --klc-color-time-share-price-line: #4A90D9;
+  --klc-color-time-share-avg-line: #F5A623;
+  --klc-color-time-share-area-up: rgba(15, 139, 92, 0.15);
+  --klc-color-time-share-area-down: rgba(213, 19, 26, 0.15);
+  --klc-color-time-share-pre-close: #888888;
+  --klc-color-time-share-volume: #4A90D9;
   --klc-color-palette-i1: #0072B2;
   --klc-color-palette-i2: #E69F00;
   --klc-color-palette-i3: #009E73;

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)
@@ -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)