@363045841yyt/klinechart-core 0.8.5 → 0.8.7

package/src/engine/indicators/chartIndicatorManager.ts

@@ -67,7 +67,8 @@ export class ChartIndicatorManager {
             ChartIndicatorManager._defaultMainParamsCache = {}
             for (const def of getRegisteredIndicatorDefinitions()) {
                 if (def.category === 'main') {
-                    ChartIndicatorManager._defaultMainParamsCache[def.displayName.toUpperCase()] = (def.runtime?.defaultConfig ?? {}) as Record<string, number | boolean | string>
+                    const key = def.name.toUpperCase()
+                    ChartIndicatorManager._defaultMainParamsCache[key] = (def.runtime?.defaultConfig ?? {}) as Record<string, number | boolean | string>
                 }
             }
         }
@@ -81,7 +82,7 @@ export class ChartIndicatorManager {
         if (ChartIndicatorManager._enableMainIndicatorsCache === null) {
             ChartIndicatorManager._enableMainIndicatorsCache = getRegisteredIndicatorDefinitions()
                 .filter(d => d.category === 'main')
-                .map(d => d.displayName.toUpperCase())
+                .map(d => d.name.toUpperCase())
         }
         return ChartIndicatorManager._enableMainIndicatorsCache
     }

package/src/engine/indicators/ichimokuState.ts

@@ -10,6 +10,8 @@ import { createIndicatorStateKey } from '../../plugin/stateKeys'
  * - chikou (迟行线) = close[t+displacement]，后置位移
  *
  * 任一字段都可能 undefined（数据不足或位移外）。
+ *
+ * series 长度 = data.length + displacement，末尾 displacement 槽位为未来云（仅 spanA/spanB）。
  */
 export interface IchimokuPoint {
     tenkan?: number

package/src/engine/indicators/macdState.ts

@@ -44,7 +44,7 @@ export interface MACDRenderState extends BaseIndicatorState {
  * MACD State 的命名空间 key
  * 格式: indicator:macd:{paneId}
  */
-export const MACD_STATE_KEY = 'indicator:macd'
+const MACD_STATE_KEY = 'indicator:macd'
 
 /**
  * 创建 MACD State Key

package/src/engine/indicators/registerBuiltins.ts

@@ -6,6 +6,7 @@ export async function loadBuiltinIndicators(): Promise<void> {
   if (loaded) return
   await Promise.all([
     import('../renderers/subVolume'),
+    import('../renderers/timeShare'),
     import('../renderers/Indicator/atr'),
     import('../renderers/Indicator/boll'),
     import('../renderers/Indicator/cci'),

package/src/engine/indicators/rsiState.ts

@@ -33,7 +33,7 @@ export interface RSIRenderState extends BaseIndicatorState {
 /**
  * RSI 状态的基础 StateStore 键名
  */
-export const RSI_STATE_KEY = 'indicator:rsi'
+const RSI_STATE_KEY = 'indicator:rsi'
 
 /**
  * 创建 RSI 状态的 StateStore 键名

package/src/engine/indicators/scheduler.ts

@@ -526,13 +526,7 @@ export class IndicatorScheduler {
     /**
      * 检查 state 中的 visibleMin/visibleMax 是否为 Infinity，如果是则输出 warning
      */
-    private checkVisibleExtremes(state: { visibleMin: number; visibleMax: number }, indicatorName: string): void {
-        if (!Number.isFinite(state.visibleMin) || !Number.isFinite(state.visibleMax)) {
-            console.warn(`[IndicatorScheduler] ${indicatorName} state has non-finite visibleMin/visibleMax:`, {
-                visibleMin: state.visibleMin,
-                visibleMax: state.visibleMax,
-            })
-        }
+    private checkVisibleExtremes(_state: { visibleMin: number; visibleMax: number }, _indicatorName: string): void {
     }
 
     /** 遍历注册表中的所有指标，通过 applyResult 回调写入 StateStore */

package/src/engine/indicators/visibleStateComposers.ts

@@ -542,6 +542,57 @@ export function createValuePointVisibleStateComposer<T extends object>(
     }
 }
 
+/**
+ * 一目均衡表专用的 visible state composer。
+ * 与 createValuePointVisibleStateComposer 的区别：
+ * - 将 visibleRange 向后扩展 displacement 根，以确保未来云的极值计入 valueMin/valueMax
+ */
+export function createIchimokuVisibleStateComposer<T extends object>(
+    bundleKey: string,
+    emptyState: {
+        timestamp: number
+        series: (T | undefined)[]
+        params: unknown
+        valueMin: number
+        valueMax: number
+        visibleMin: number
+        visibleMax: number
+    },
+    fields: readonly (keyof T)[],
+): IndicatorVisibleStateComposer {
+    return ({ bundle, visibleRange, timestamp, active }) => {
+        const source = getPointArraySeriesBundle<T>(bundle, bundleKey)
+        if (!active) {
+            return {
+                ...emptyState,
+                timestamp,
+                series: source.series,
+                params: source.params,
+            }
+        }
+
+        const displacement = (source.params as Record<string, unknown>)?.displacement as number ?? 26
+        const extendedRange = {
+            start: visibleRange.start,
+            end: Math.min(visibleRange.end + displacement, source.series.length),
+        }
+        const extremes = calcPointArrayExtremes(source.series, fields, extendedRange)
+        const bounds = computeMAFamilyBounds(
+            Number.isFinite(extremes.min) && Number.isFinite(extremes.max) ? extremes : null,
+            emptyState,
+        )
+        return {
+            timestamp,
+            series: source.series,
+            params: source.params,
+            valueMin: bounds.valueMin,
+            valueMax: bounds.valueMax,
+            visibleMin: extremes.min,
+            visibleMax: extremes.max,
+        }
+    }
+}
+
 export function createBandVisibleStateComposer<T extends object>(
     bundleKey: string,
     emptyState: {

package/src/engine/layout/chartPaneLayout.ts

@@ -8,6 +8,7 @@ export interface PaneLayoutDependencies {
   getDom: () => ChartDom
   getOption: () => {
     rightAxisWidth: number
+    leftAxisWidth: number
     yPaddingPx: number
     priceLabelWidth?: number
     paneGap?: number
@@ -59,6 +60,15 @@ export class ChartPaneLayout {
     return index === 0 ? 'price' : 'indicator'
   }
 
+  private createAxisCanvas(spec: PaneSpec, pane: Pane, side: 'left' | 'right'): HTMLCanvasElement {
+    const canvas = document.createElement('canvas')
+    canvas.id = `${spec.id}-${side}Axis`
+    canvas.className = side === 'right' ? 'right-axis' : 'left-axis'
+    canvas.style.position = 'absolute'
+    canvas.style.left = '0'
+    return canvas
+  }
+
   private initPanes() {
     const prevScaleTypes = new Map<string, 'linear' | 'log' | 'percent'>()
     for (const r of this.paneRenderers) {
@@ -76,7 +86,7 @@ export class ChartPaneLayout {
 
       const mainCanvas = document.createElement('canvas')
       const overlayCanvas = document.createElement('canvas')
-      const yAxisCanvas = document.createElement('canvas')
+      const yAxisCanvas = this.createAxisCanvas(spec, pane, 'right')
 
       const isMain = pane.role === 'price'
 
@@ -94,16 +104,14 @@ export class ChartPaneLayout {
       overlayCanvas.style.pointerEvents = 'none'
       overlayCanvas.style.backgroundColor = 'transparent'
 
-      yAxisCanvas.id = `${spec.id}-yAxis`
-      yAxisCanvas.className = 'right-axis'
-      yAxisCanvas.style.position = 'absolute'
-      yAxisCanvas.style.left = '0'
+      const leftYAxisCanvas = this.createAxisCanvas(spec, pane, 'left')
 
       const renderer = new PaneRenderer(
-        { mainCanvas, overlayCanvas, yAxisCanvas },
+        { mainCanvas, overlayCanvas, yAxisCanvas, leftYAxisCanvas },
         pane,
         {
           rightAxisWidth: this.deps.getOption().rightAxisWidth,
+          leftAxisWidth: this.deps.getOption().leftAxisWidth ?? 0,
           yPaddingPx: this.deps.getOption().yPaddingPx,
           priceLabelWidth: this.deps.getOption().priceLabelWidth,
         },
@@ -116,6 +124,7 @@ export class ChartPaneLayout {
     const dom = this.deps.getDom()
     const canvasLayer = dom.canvasLayer
     const rightAxisLayer = dom.rightAxisLayer
+    const leftAxisLayer = dom.leftAxisLayer
     if (canvasLayer) {
       const existingCanvases = canvasLayer.querySelectorAll('canvas:not(.x-axis-canvas)')
       existingCanvases.forEach((canvas) => canvas.remove())
@@ -124,12 +133,19 @@ export class ChartPaneLayout {
       const existingAxisCanvases = rightAxisLayer.querySelectorAll('canvas.right-axis')
       existingAxisCanvases.forEach((canvas) => canvas.remove())
     }
+    if (leftAxisLayer) {
+      const existingLeftAxisCanvases = leftAxisLayer.querySelectorAll('canvas.left-axis')
+      existingLeftAxisCanvases.forEach((canvas) => canvas.remove())
+    }
 
     this.paneRenderers.forEach((renderer) => {
       const domEls = renderer.getDom()
       canvasLayer.appendChild(domEls.mainCanvas)
       canvasLayer.appendChild(domEls.overlayCanvas)
       rightAxisLayer.appendChild(domEls.yAxisCanvas)
+      if (leftAxisLayer && domEls.leftYAxisCanvas) {
+        leftAxisLayer.appendChild(domEls.leftYAxisCanvas)
+      }
     })
 
     this.deps.setKnownPaneIds(
@@ -290,6 +306,10 @@ export class ChartPaneLayout {
       domEls.overlayCanvas.style.top = `${y}px`
       domEls.yAxisCanvas.style.top = `${y}px`
       domEls.yAxisCanvas.style.left = '0px'
+      if (domEls.leftYAxisCanvas) {
+        domEls.leftYAxisCanvas.style.top = `${y}px`
+        domEls.leftYAxisCanvas.style.left = '0px'
+      }
 
       y += h + gap
     }

package/src/engine/modes/kLineMode.ts

@@ -0,0 +1,57 @@
+import type { ChartModeHandler } from './types'
+import type { Pane, VisibleRange } from '../layout/pane'
+import type { ChartDataManager } from '../data/chartDataManager'
+
+export class KLineMode implements ChartModeHandler {
+  readonly debugName = 'KLine'
+
+  readonly allowPan = true
+  readonly allowZoom = true
+  readonly allowVerticalScroll = true
+  readonly allowRightAxisScale = true
+  readonly useIndicatorScheduler = true
+
+  computeContentWidth(
+    _dataLength: number,
+    _leftBufferWidth: number,
+    _viewWidth: number,
+    _opt: { kWidth: number; kGap: number },
+    _dpr: number,
+  ): number | null {
+    return null
+  }
+
+  computeKWidth(
+    _dataLength: number,
+    _viewWidth: number,
+    _dpr: number,
+  ): { kWidth: number; kGap: number } | null {
+    return null
+  }
+
+  updatePaneRange(
+    pane: Pane,
+    range: VisibleRange,
+    dm: ChartDataManager,
+    mergedIndicatorRange?: { min: number; max: number } | null,
+  ): void {
+    pane.updateRange(dm.getInternalData(), range, mergedIndicatorRange)
+  }
+
+  onActivate(_chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+    currentPeriod: string
+  }, _prev: ChartModeHandler | null): void {
+  }
+
+  onDeactivate(_chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+  }, _next: ChartModeHandler | null): void {
+  }
+}

package/src/engine/modes/timeShareMode.ts

@@ -0,0 +1,95 @@
+import type { ChartModeHandler } from './types'
+import type { Pane, VisibleRange } from '../layout/pane'
+import type { ChartDataManager } from '../data/chartDataManager'
+
+export class TimeShareMode implements ChartModeHandler {
+  readonly debugName = 'TimeShare'
+
+  readonly allowPan = false
+  readonly allowZoom = false
+  readonly allowVerticalScroll = false
+  readonly allowRightAxisScale = false
+  readonly useIndicatorScheduler = false
+
+  computeContentWidth(
+    _dataLength: number,
+    leftBufferWidth: number,
+    viewWidth: number,
+    _opt: { kWidth: number; kGap: number },
+    _dpr: number,
+  ): number | null {
+    return leftBufferWidth + Math.max(viewWidth, 1)
+  }
+
+  computeKWidth(
+    dataLength: number,
+    viewWidth: number,
+    dpr: number,
+  ): { kWidth: number; kGap: number } | null {
+    if (dataLength <= 0 || viewWidth <= 0) return null
+
+    const kGapPx = 1
+    const totalGapPx = (dataLength + 1) * kGapPx
+    const availablePx = Math.max(1, viewWidth * dpr - totalGapPx)
+    let kWidthPx = Math.max(1, Math.floor(availablePx / dataLength))
+
+    return {
+      kWidth: kWidthPx / dpr,
+      kGap: kGapPx / dpr,
+    }
+  }
+
+  updatePaneRange(
+    pane: Pane,
+    range: VisibleRange,
+    dm: ChartDataManager,
+    _mergedIndicatorRange?: { min: number; max: number } | null,
+  ): void {
+    const tsData = dm.getTimeShareData()
+    const end = Math.min(range.end, tsData.length)
+    if (tsData.length === 0) return
+
+    const baseline = tsData[0]?.price ?? 0
+    if (baseline === 0) return
+
+    pane.yAxis.setScaleType('percent')
+    pane.yAxis.setBasePrice(baseline)
+
+    let maxAbsPct = 0
+    for (let i = Math.max(0, range.start); i < end; i++) {
+      const p = tsData[i]?.price
+      if (p !== undefined && Number.isFinite(p)) {
+        const pct = Math.abs((p - baseline) / baseline) * 100
+        if (pct > maxAbsPct) maxAbsPct = pct
+      }
+    }
+    if (maxAbsPct <= 0) return
+
+    const padding = Math.max(maxAbsPct * 0.1, 0.5)
+    const displayPct = maxAbsPct + padding
+    const minPrice = baseline * (1 - displayPct / 100)
+    const maxPrice = baseline * (1 + displayPct / 100)
+    pane.yAxis.setRange({ maxPrice, minPrice })
+  }
+
+  onActivate(chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+    currentPeriod: string
+  }, _prev: ChartModeHandler | null): void {
+    chart.enableMainIndicator('timeShare')
+    chart.setRendererEnabled('candle', false)
+  }
+
+  onDeactivate(chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+  }, _next: ChartModeHandler | null): void {
+    chart.disableMainIndicator('timeShare')
+    chart.setRendererEnabled('candle', true)
+  }
+}

package/src/engine/modes/types.ts

@@ -0,0 +1,63 @@
+import type { Pane } from '../layout/pane'
+import type { ChartDataManager } from '../data/chartDataManager'
+import type { VisibleRange } from '../layout/pane'
+
+export interface ChartModeHandler {
+  readonly debugName: string
+
+  /** 是否允许水平拖拽平移 */
+  readonly allowPan: boolean
+
+  /** 是否允许缩放（滚轮/捏合/API） */
+  readonly allowZoom: boolean
+
+  /** 是否允许主图垂直滚动 */
+  readonly allowVerticalScroll: boolean
+
+  /** 是否允许右轴价格缩放 */
+  readonly allowRightAxisScale: boolean
+
+  /** 是否使用指标调度器（计算 MA/BOLL 等技术指标） */
+  readonly useIndicatorScheduler: boolean
+
+  /** 计算内容宽度（CSS px）。返回 null 走标准可滚动计算 */
+  computeContentWidth(
+    dataLength: number,
+    leftBufferWidth: number,
+    viewWidth: number,
+    opt: { kWidth: number; kGap: number },
+    dpr: number,
+  ): number | null
+
+  /** 计算 K 线宽度/间距。返回 null 走标准缩放计算 */
+  computeKWidth(
+    dataLength: number,
+    viewWidth: number,
+    dpr: number,
+  ): { kWidth: number; kGap: number } | null
+
+  /** 更新 Pane 的价格范围 */
+  updatePaneRange(
+    pane: Pane,
+    range: VisibleRange,
+    dm: ChartDataManager,
+    mergedIndicatorRange?: { min: number; max: number } | null,
+  ): void
+
+  /** 激活时调用 */
+  onActivate(chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+    currentPeriod: string
+  }, prev: ChartModeHandler | null): void
+
+  /** 停用时调用 */
+  onDeactivate(chart: {
+    enableMainIndicator: (id: string, params?: Record<string, number | boolean | string>) => boolean
+    disableMainIndicator: (id: string) => boolean
+    setRendererEnabled: (name: string, enabled: boolean) => void
+    dataManager: ChartDataManager
+  }, next: ChartModeHandler | null): void
+}

package/src/engine/paneRenderer.ts

@@ -5,16 +5,19 @@ export type PaneRendererDom = {
     mainCanvas: HTMLCanvasElement      // 主画布：K线、指标、网格
     overlayCanvas: HTMLCanvasElement   // 覆盖层：十字线、Tooltip（透明）
     yAxisCanvas: HTMLCanvasElement     // Y轴刻度
+    leftYAxisCanvas?: HTMLCanvasElement // 左侧Y轴刻度
 }
 
 export type PaneRendererContexts = {
     mainCtx: CanvasRenderingContext2D | null
     overlayCtx: CanvasRenderingContext2D | null
     yAxisCtx: CanvasRenderingContext2D | null
+    leftAxisCtx: CanvasRenderingContext2D | null
 }
 
 export type PaneRendererOptions = {
     rightAxisWidth: number
+    leftAxisWidth: number
     yPaddingPx: number
     priceLabelWidth?: number
 }
@@ -70,11 +73,34 @@ export class PaneRenderer {
                 mainCtx: this.dom.mainCanvas.getContext('2d'),
                 overlayCtx: this.dom.overlayCanvas.getContext('2d'),
                 yAxisCtx: this.dom.yAxisCanvas.getContext('2d'),
+                leftAxisCtx: this.dom.leftYAxisCanvas?.getContext('2d') ?? null,
             }
         }
         return this.contexts
     }
 
+    private static resizeCanvas(
+        canvas: HTMLCanvasElement,
+        widthPx: number,
+        heightPx: number,
+        dpr: number,
+    ): void {
+        if (canvas.width !== widthPx) {
+            canvas.width = widthPx
+        }
+        if (canvas.height !== heightPx) {
+            canvas.height = heightPx
+        }
+        const cssW = `${widthPx / dpr}px`
+        if (canvas.style.width !== cssW) {
+            canvas.style.width = cssW
+        }
+        const cssH = `${heightPx / dpr}px`
+        if (canvas.style.height !== cssH) {
+            canvas.style.height = cssH
+        }
+    }
+
     getWebGL(): PaneRendererWebGLHandles {
         return this.webgl
     }
@@ -102,58 +128,23 @@ export class PaneRenderer {
 
         // Main Canvas
         const mainWidth = Math.round(width * dpr)
-        if (mainCanvas.width !== mainWidth) {
-            mainCanvas.width = mainWidth
-        }
-
         const mainHeight = Math.round(height * dpr)
-        if (mainCanvas.height !== mainHeight) {
-            mainCanvas.height = mainHeight
-        }
-
-        const mainCssWidth = `${mainWidth / dpr}px`
-        if (mainCanvas.style.width !== mainCssWidth) {
-            mainCanvas.style.width = mainCssWidth
-        }
-
-        const mainCssHeight = `${mainHeight / dpr}px`
-        if (mainCanvas.style.height !== mainCssHeight) {
-            mainCanvas.style.height = mainCssHeight
-        }
+        PaneRenderer.resizeCanvas(mainCanvas, mainWidth, mainHeight, dpr)
 
         // Overlay Canvas - 与 Main Canvas 相同尺寸
-        if (overlayCanvas.width !== mainWidth) {
-            overlayCanvas.width = mainWidth
-        }
-        if (overlayCanvas.height !== mainHeight) {
-            overlayCanvas.height = mainHeight
-        }
-        if (overlayCanvas.style.width !== mainCssWidth) {
-            overlayCanvas.style.width = mainCssWidth
-        }
-        if (overlayCanvas.style.height !== mainCssHeight) {
-            overlayCanvas.style.height = mainCssHeight
-        }
+        PaneRenderer.resizeCanvas(overlayCanvas, mainWidth, mainHeight, dpr)
 
         // YAxis Canvas
         const yAxisWidth = Math.round(canvasYAxisWidth * dpr)
-        if (yAxisCanvas.width !== yAxisWidth) {
-            yAxisCanvas.width = yAxisWidth
-        }
-
-        const yAxisHeight = Math.round(height * dpr)
-        if (yAxisCanvas.height !== yAxisHeight) {
-            yAxisCanvas.height = yAxisHeight
-        }
-
-        const yAxisCssWidth = `${yAxisWidth / dpr}px`
-        if (yAxisCanvas.style.width !== yAxisCssWidth) {
-            yAxisCanvas.style.width = yAxisCssWidth
-        }
-
-        const yAxisCssHeight = `${yAxisHeight / dpr}px`
-        if (yAxisCanvas.style.height !== yAxisCssHeight) {
-            yAxisCanvas.style.height = yAxisCssHeight
+        PaneRenderer.resizeCanvas(yAxisCanvas, yAxisWidth, Math.round(height * dpr), dpr)
+
+        // Left YAxis Canvas
+        const leftCanvas = this.dom.leftYAxisCanvas
+        if (leftCanvas) {
+            const fallbackLeftAxisWidth = this.opt.leftAxisWidth
+            const leftParentWidth = leftCanvas.parentElement?.clientWidth ?? 0
+            const canvasLeftAxisWidth = leftParentWidth > 0 ? leftParentWidth : fallbackLeftAxisWidth
+            PaneRenderer.resizeCanvas(leftCanvas, Math.round(Math.max(canvasLeftAxisWidth, 0) * dpr), Math.round(height * dpr), dpr)
         }
 
         this.webgl.candleSurface?.resize(width, height, dpr)