@363045841yyt/klinechart-core 0.8.6 → 0.8.8

package/src/data-fetchers/timeShareBuffer.ts

@@ -0,0 +1,92 @@
+import { createSignal, type Signal } from '../reactivity/signal'
+import type { SymbolSpec } from '../controllers/types'
+import type { TimeShareData } from '../types/price'
+import type { TimeShareFetcherFn } from './types'
+import type { DataBufferLike } from './dataBufferTypes'
+import type { DataWindow } from './dataBuffer'
+import { routerTimeShareFetcher } from './router'
+
+export class TimeShareBuffer implements DataBufferLike {
+  private _data: TimeShareData[] = []
+  private _dataSignal = createSignal<ReadonlyArray<TimeShareData>>([])
+  private _loadingSignal = createSignal<boolean>(false)
+  private _fetcher: TimeShareFetcherFn | null = null
+  private _queryDate = 0
+  private _requestSeq = 0
+  private _disposed = false
+
+  get data(): Signal<ReadonlyArray<unknown>> {
+    return this._dataSignal as Signal<ReadonlyArray<unknown>>
+  }
+
+  get loading(): Signal<boolean> {
+    return this._loadingSignal
+  }
+
+  get loadedWindow(): DataWindow | null {
+    if (this._data.length === 0) return null
+    return {
+      earliestTs: this._data[0]!.timestamp,
+      latestTs: this._data[this._data.length - 1]!.timestamp,
+    }
+  }
+
+  getRawData(): TimeShareData[] {
+    return this._data
+  }
+
+  setFetcher(fetcher: TimeShareFetcherFn | null): void {
+    this._fetcher = fetcher
+  }
+
+  setQueryDate(date: number): void {
+    this._queryDate = date
+  }
+
+  getFetcher(): TimeShareFetcherFn | null {
+    return this._fetcher
+  }
+
+  getQueryDate(): number {
+    return this._queryDate
+  }
+
+  async load(spec: SymbolSpec): Promise<void> {
+    if (this._disposed) return
+    const fetcher = this._fetcher ?? routerTimeShareFetcher
+    const requestSeq = ++this._requestSeq
+    this._loadingSignal.set(true)
+
+    try {
+      const data = await fetcher(spec.source ?? 'gotdx', {
+        symbol: spec.symbol,
+        exchange: spec.exchange,
+        date: this._queryDate || undefined,
+      })
+      this._queryDate = 0
+
+      if (requestSeq !== this._requestSeq) return
+      if (this._disposed) return
+
+      this._data = [...data]
+      this._dataSignal.set([...data])
+    } finally {
+      if (requestSeq === this._requestSeq) {
+        this._loadingSignal.set(false)
+      }
+    }
+  }
+
+  setInlineData(data: unknown[]): void {
+    if (this._disposed) return
+    this._data = data as TimeShareData[]
+    this._dataSignal.set([...(data as TimeShareData[])])
+  }
+
+  dispose(): void {
+    this._disposed = true
+    this._requestSeq++
+    this._data = []
+    this._loadingSignal.set(false)
+  }
+}

package/src/data-fetchers/tradingview.ts

@@ -66,9 +66,9 @@ async function fetchTradingview(
   version: '1.0.0',
   capabilities: ['daily', 'weekly', 'monthly', '5min', '15min', '30min', '60min'],
 })
-export class TradingviewFetcher {
+class TradingviewFetcher {
   static fetcher = fetchTradingview
 }
 
 /** @deprecated Use `TradingviewFetcher.fetcher` directly or rely on routerDataFetcher. */
-export const tradingviewDataFetcher = fetchTradingview
+const tradingviewDataFetcher = fetchTradingview

package/src/data-fetchers/types.ts

@@ -1,4 +1,4 @@
-import type { KLineData } from '../controllers/types'
+import type { KLineData, TimeShareData } from '../controllers/types'
 
 export type FetchConfig = {
   symbol: string
@@ -9,11 +9,23 @@ export type FetchConfig = {
   exchange?: string
 }
 
+export type TimeShareFetchConfig = {
+  symbol: string
+  exchange?: string
+  /** YYYYMMDD format query date, e.g. 20260618 */
+  date?: number
+}
+
 export type DataFetcherFn = (
   source: string,
   config: FetchConfig,
 ) => Promise<ReadonlyArray<KLineData>>
 
+export type TimeShareFetcherFn = (
+  source: string,
+  config: TimeShareFetchConfig,
+) => Promise<ReadonlyArray<TimeShareData>>
+
 export interface DataFetcherDefinitionConfig {
   name: string
   displayName: string
@@ -24,4 +36,5 @@ export interface DataFetcherDefinitionConfig {
 
 export interface DataFetcherDefinition extends DataFetcherDefinitionConfig {
   fetcher: DataFetcherFn
-}
+  timeShareFetcher?: TimeShareFetcherFn
+}

package/src/engine/__tests__/chart.dpr.test.ts

@@ -35,6 +35,7 @@ const defaultOptions: ChartOptions = {
   kGap: 2,
   yPaddingPx: 0,
   rightAxisWidth: 0,
+  leftAxisWidth: 0,
   bottomAxisHeight: 24,
   minKWidth: 2,
   maxKWidth: 50,

package/src/engine/chart.ts

@@ -1,7 +1,7 @@
 import type { KLineData } from '../types/price'
 import type { ChartSettings } from '../config/chartSettings'
 import { createSignal, type Signal, type Computed } from '../reactivity/signal'
-import type { SymbolSpec } from '../controllers/types'
+import type { SymbolSpec, CustomDataSource } from '../controllers/types'
 import { ChartDataManager } from './data/chartDataManager'
 import { ChartPaneLayout } from './layout/chartPaneLayout'
 import { UpdateLevel } from './layout/pane'
@@ -19,6 +19,9 @@ import { ChartIndicatorManager } from './indicators/chartIndicatorManager'
 import type { IndicatorScheduler } from './indicators/scheduler'
 import type { SubPaneEntry } from './subPaneManager'
 import { ChartRenderer } from './render/chartRenderer'
+import { KLineMode } from './modes/kLineMode'
+import { TimeShareMode } from './modes/timeShareMode'
+import type { ChartModeHandler } from './modes/types'
 
 import {
     createPluginHost,
@@ -70,6 +73,19 @@ export class Chart {
     /** 渲染器 */
     private renderer: ChartRenderer
 
+    /** 当前活跃的模式处理器 */
+    private _activeMode: ChartModeHandler
+    private _kLineMode = new KLineMode()
+    private _timeShareMode = new TimeShareMode()
+
+    /** 模式切换时保存的渲染状态（退出分时时恢复） */
+    private _modeSavedKWidth = 0
+    private _modeSavedKGap = 0
+    private _modeSavedZoomLevel = 0
+
+    /** 分时模式激活前的 pane Y 轴刻度类型（退出分时时恢复） */
+    private _savedScaleTypes: Map<string, ScaleType> | undefined
+
     /**
      * 启用主图指标
      * @param indicatorId 指标ID
@@ -125,6 +141,7 @@ export class Chart {
         const { kWidth: _kWidth, kGap: _kGap, ...restOpt } = opt
         // Chart 不持有业务 SSOT，kWidth/kGap/zoomLevel 由外部通过 applyRenderState() 传入
         this.opt = { ...restOpt, kWidth: _kWidth ?? 0, kGap: _kGap ?? 0 }
+        this._activeMode = this._kLineMode
         this.interaction = new InteractionController(this)
         this.interaction.setOnInteractionChange((snapshot) => {
             this._interactionSignal.set(snapshot)
@@ -154,6 +171,7 @@ export class Chart {
             getDom: () => this.dom,
             getOption: () => ({
                 rightAxisWidth: this.opt.rightAxisWidth,
+                leftAxisWidth: this.opt.leftAxisWidth,
                 yPaddingPx: this.opt.yPaddingPx,
                 priceLabelWidth: this.opt.priceLabelWidth,
                 paneGap: this.opt.paneGap,
@@ -176,8 +194,7 @@ export class Chart {
             getEffectiveDpr: () => this.viewportManager.getEffectiveDpr(),
             getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
             getCachedScrollLeft: () => this.viewportManager.getCachedScrollLeft(),
-            setCachedScrollLeft: (v) => { this.viewportManager.setCachedScrollLeft(v) },
-            setPendingScrollLeft: (v) => { this.viewportManager.setPendingScrollLeft(v) },
+            setScrollLeft: (v) => { this.viewportManager.setScrollLeft(v) },
             getDom: () => this.dom,
             getObservedSize: () => this.viewportManager.getObservedSize(),
             getViewport: () => this.viewportManager.getViewport(),
@@ -186,6 +203,20 @@ export class Chart {
             getIndicatorScheduler: () => this.indicatorManager.indicatorSchedulerAccessor,
             setPendingIndicatorDataUpdate: (v) => { this.dataManager.pendingIndicatorDataUpdate = v },
             isPointerDown: () => this.interaction.isPointerDown(),
+            onTimeShareDataReady: (dataLength) => {
+                const vp = this.viewportManager.computeViewport()
+                if (!vp || vp.plotWidth <= 0) return
+                const result = this._activeMode.computeKWidth(dataLength, vp.plotWidth, vp.dpr)
+                if (result) {
+                    this.applyRenderState(result.kWidth, result.kGap)
+                    const container = this.dom.container
+                    if (container) {
+                        const leftBuffer = this.dataManager.getLeftLoadBufferWidth()
+                        this.viewportManager.setScrollLeft(leftBuffer)
+                        this.viewportManager.applyPendingScrollLeft(container)
+                    }
+                }
+            },
         })
 
         this.zoomController = new ChartZoomController({
@@ -248,6 +279,7 @@ export class Chart {
             getViewportManager: () => this.viewportManager,
             getDataManager: () => this.dataManager,
             getIndicatorManager: () => this.indicatorManager,
+            getActiveMode: () => this._activeMode,
         })
         this.renderer.registerDrawingPlugins()
         this.renderer.initCoreRenderers()
@@ -259,15 +291,73 @@ export class Chart {
         return this.viewportManager.getViewport()
     }
 
+    /** 获取当前活跃的模式处理器 */
+    get activeMode(): ChartModeHandler {
+        return this._activeMode
+    }
+
+    /** 切换模式处理器 */
+    setActiveMode(mode: ChartModeHandler): void {
+        if (this._activeMode === mode) return
+        const prev = this._activeMode
+
+        if (mode === this._timeShareMode) {
+            this._modeSavedKWidth = this.opt.kWidth
+            this._modeSavedKGap = this.opt.kGap
+            this._modeSavedZoomLevel = this.zoomController.currentZoomLevel
+            this._savedScaleTypes = new Map<string, ScaleType>()
+            for (const r of this.paneRenderers) {
+                this._savedScaleTypes.set(r.getPane().id, r.getPane().yAxis.getScaleType())
+            }
+        } else if (prev === this._timeShareMode) {
+            for (const renderer of this.paneRenderers) {
+                const p = renderer.getPane()
+                const saved = this._savedScaleTypes?.get(p.id) ?? 'linear'
+                p.yAxis.setScaleType(saved)
+                p.yAxis.setBasePrice(null)
+            }
+            this._savedScaleTypes = undefined
+        }
+
+        if (this._modeSavedKWidth > 0 && mode !== this._timeShareMode) {
+            this.applyRenderState(this._modeSavedKWidth, this._modeSavedKGap, this._modeSavedZoomLevel)
+            this._modeSavedKWidth = 0
+        }
+
+        prev.onDeactivate(
+            { enableMainIndicator: (id, p) => this.enableMainIndicator(id, p), disableMainIndicator: (id) => this.disableMainIndicator(id), setRendererEnabled: (n, e) => this.setRendererEnabled(n, e), dataManager: this.dataManager },
+            mode,
+        )
+        this._activeMode = mode
+        this._activeMode.onActivate(
+            { enableMainIndicator: (id, p) => this.enableMainIndicator(id, p), disableMainIndicator: (id) => this.disableMainIndicator(id), setRendererEnabled: (n, e) => this.setRendererEnabled(n, e), dataManager: this.dataManager, currentPeriod: this.dataManager.currentPeriod },
+            prev,
+        )
+    }
+
     getCurrentDpr(): number {
         return this.viewportManager.getEffectiveDpr()
     }
 
+    /** 获取当前周期 */
+    get currentPeriod(): string {
+        return this.dataManager.currentPeriod
+    }
+
     /** 获取缓存的 scrollLeft（避免读取 DOM 触发强制回流） */
     getCachedScrollLeft(): number {
         return this.viewportManager.getCachedScrollLeft()
     }
 
+    /** 同步程序性 scrollLeft 写入后的缓存，避免等待异步 scroll 事件 */
+    syncScrollLeft(scrollLeft: number): void {
+        this.viewportManager.setScrollLeft(scrollLeft)
+    }
+
+    setScrollLeft(v: number): void {
+        this.viewportManager.setScrollLeft(v)
+    }
+
     /** 获取逻辑 scrollLeft（减去左侧加载缓冲宽度，可为负值） */
     getLogicalScrollLeft(): number {
         return this.viewportManager.getLogicalScrollLeft()
@@ -318,14 +408,13 @@ export class Chart {
         this.renderer.updateSettings(settings)
         this.interaction.updateSettings(settings)
 
-        // 同步刻度类型设置到所有 pane（百分比仅用于主图）
-        if ('axisType' in settings) {
-            const axisType = (settings.axisType as ScaleType) ?? 'linear'
-            const currentType = this.paneRenderers[0]?.getPane().yAxis.getScaleType()
-            if (axisType !== currentType) {
+        // 同步右轴刻度类型设置到所有 pane（百分比仅用于主图）
+        if ('rightAxisType' in settings) {
+            const axisType = settings.rightAxisType as string
+            if (axisType !== 'none') {
                 for (const renderer of this.paneRenderers) {
                     const pane = renderer.getPane()
-                    const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : axisType
+                    const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : (axisType as ScaleType)
                     pane.yAxis.setScaleType(scaleType)
                 }
             }
@@ -631,6 +720,11 @@ export class Chart {
         return this.dataManager.getData()
     }
 
+    /** 获取渲染数据源（分时图下为 TimeShareData，K线图为 KLineData） */
+    getRenderData(): unknown[] {
+        return this.dataManager.getRenderData()
+    }
+
     /** 获取指标调度器（供外部控制器更新指标配置） */
     getIndicatorScheduler(): IndicatorScheduler {
         return this.indicatorManager.indicatorSchedulerAccessor
@@ -660,6 +754,11 @@ export class Chart {
         return this.dataManager.getContentWidth()
     }
 
+    /** 获取左侧加载缓冲宽度（视口宽度，用于计算 overlay 像素偏移） */
+    getLeftLoadBufferWidth(): number {
+        return this.dataManager.getLeftLoadBufferWidth()
+    }
+
     /** 滚动到最右侧（最新数据位置） */
     scrollToRight(): void {
         this.dataManager.scrollToRight()
@@ -667,6 +766,28 @@ export class Chart {
 
     /** 容器尺寸变化时调用 */
     resize() {
+        if (this._activeMode.debugName === 'TimeShare') {
+            const tsData = this.dataManager.getTimeShareData()
+            const vp = this.viewportManager.computeViewport()
+            if (!vp || vp.plotWidth <= 0) return
+            if (tsData.length > 0) {
+                const result = this._activeMode.computeKWidth(tsData.length, vp.plotWidth, vp.dpr)
+                if (result) {
+                    this.applyRenderState(result.kWidth, result.kGap)
+                    const container = this.dom.container
+                    if (container) {
+                        const leftBuffer = this.dataManager.getLeftLoadBufferWidth()
+                        this.viewportManager.setScrollLeft(leftBuffer)
+                        this.viewportManager.applyPendingScrollLeft(container)
+                    }
+                }
+            }
+            this.renderer.clearCachedFrame()
+            this.layoutManager.layoutPanes()
+            this.viewportManager.updateViewportSignal()
+            this.scheduleDraw()
+            return
+        }
         const vp = this.viewportManager.computeViewport()
         // 防御性检查：容器尺寸无效时跳过布局
         if (!vp || vp.viewWidth < 10 || vp.viewHeight < 10) {
@@ -736,6 +857,11 @@ export class Chart {
         return this.dataManager.data
     }
 
+    /** 加载信号 */
+    get loading(): Signal<boolean> {
+        return this.dataManager.loading
+    }
+
     /** 符号信号 */
     get symbols(): Signal<ReadonlyArray<SymbolSpec>> {
         return this.dataManager.symbols
@@ -813,6 +939,10 @@ export class Chart {
     }
 
     setSymbols(specs: ReadonlyArray<SymbolSpec>): void {
+        const primaryPeriod = specs[0]?.period
+        if (primaryPeriod) {
+            this.setActiveMode(primaryPeriod === 'timeshare' ? this._timeShareMode : this._kLineMode)
+        }
         this.dataManager.setSymbols(specs)
     }
 
@@ -824,6 +954,29 @@ export class Chart {
         this.dataManager.removeComparisonSymbol(symbol)
     }
 
+    setComparisonData(symbol: string, data: KLineData[]): void {
+        this.dataManager.setComparisonData(symbol, data)
+    }
+
+    setCurrentSymbol(symbol: string): void {
+        this.dataManager.setCurrentSymbol(symbol)
+    }
+
+	setCurrentPeriod(period: string): void {
+	        this.setActiveMode(period === 'timeshare' ? this._timeShareMode : this._kLineMode)
+	        this.dataManager.setCurrentPeriod(period)
+	    }
+
+	    switchToTimeShareForDate(dateYYYYMMDD: number): void {
+	      this.dataManager.setTimeShareQueryDate(dateYYYYMMDD)
+	      this.setActiveMode(this._timeShareMode)
+	      this.dataManager.setCurrentPeriod('timeshare')
+	    }
+
+	    applyCustomData(source: CustomDataSource): void {
+        this.dataManager.applyCustomData(source)
+    }
+
     // ---------- Theme ----------
 
     /**
@@ -841,6 +994,7 @@ export class Chart {
      * 计算并应用新的 render state，更新 viewport signal
      */
     zoomToLevel(level: number, anchorX?: number): void {
+        if (!this._activeMode.allowZoom) return
         this.zoomController.zoomToLevel(level, anchorX)
     }
 
@@ -848,6 +1002,7 @@ export class Chart {
      * 放大（高层 API）
      */
     zoomIn(anchorX?: number): void {
+        if (!this._activeMode.allowZoom) return
         this.zoomController.zoomIn(anchorX)
     }
 
@@ -855,6 +1010,7 @@ export class Chart {
      * 缩小（高层 API）
      */
     zoomOut(anchorX?: number): void {
+        if (!this._activeMode.allowZoom) return
         this.zoomController.zoomOut(anchorX)
     }
 
@@ -931,6 +1087,7 @@ export class Chart {
      * 使用 computeZoom 计算精确的 scrollLeft，更新 viewport signal
      */
     handleWheelEvent(e: WheelEvent): void {
+        if (!this._activeMode.allowZoom) return
         const rect = this.dom.container.getBoundingClientRect()
         this.zoomController.handleWheel(e.deltaY, e.clientX - rect.left)
     }
@@ -951,6 +1108,7 @@ export class Chart {
      * @param centerClientX 捏合中心在视口中的 X 坐标
      */
     handlePinchZoom(delta: number, centerClientX: number): void {
+        if (!this._activeMode.allowZoom) return
         this.zoomController.handlePinch(delta, centerClientX)
     }
 

package/src/engine/chartTypes.ts

@@ -5,6 +5,7 @@ export type ChartDom = {
   scrollContent?: HTMLDivElement
   canvasLayer: HTMLDivElement
   rightAxisLayer: HTMLDivElement
+  leftAxisLayer?: HTMLDivElement
   xAxisCanvas: HTMLCanvasElement
 }
 
@@ -21,6 +22,7 @@ export type PaneRendererDom = {
   mainCanvas: HTMLCanvasElement
   overlayCanvas: HTMLCanvasElement
   yAxisCanvas: HTMLCanvasElement
+  leftYAxisCanvas?: HTMLCanvasElement
 }
 
 export type ChartOptions = {
@@ -28,6 +30,7 @@ export type ChartOptions = {
   kGap?: number
   yPaddingPx: number
   rightAxisWidth: number
+  leftAxisWidth: number
   bottomAxisHeight: number
   minKWidth: number
   maxKWidth: number

package/src/engine/controller/__tests__/interaction.dpr.test.ts

@@ -95,6 +95,8 @@ function createChartStub(args: {
     getMarkerManager: () => markerManager,
     getPaneRenderers: () => paneRenderers,
     getData: () => data,
+    getRenderData: () => data,
+    currentPeriod: 'daily',
     translatePrice: () => undefined,
     scheduleDraw: () => undefined,
     zoomAt: () => undefined,