@363045841yyt/klinechart-core 0.8.1-alpha.3 → 0.8.1

package/src/controllers/createChartController.ts

@@ -31,16 +31,15 @@ import type {
     DataFetcher,
 } from './types'
 import type { CustomMarkerEntity } from '../engine/marker/registry'
-import {
-    Chart,
-    type ChartOptions,
-    type ViewportState as LegacyViewportState,
-    type IndicatorInstance as LegacyIndicatorInstance,
-    type SubPaneInfo as LegacySubPaneInfo,
-    type DrawingObject as LegacyDrawingObject,
-    type DrawingToolType as LegacyDrawingToolType,
-    type InteractionSnapshot as LegacyInteractionSnapshot,
-} from '../engine/chart'
+import { Chart, type InteractionSnapshot as LegacyInteractionSnapshot } from '../engine/chart'
+import type {
+    ChartOptions,
+    ViewportState as LegacyViewportState,
+    IndicatorInstance as LegacyIndicatorInstance,
+    SubPaneInfo as LegacySubPaneInfo,
+    DrawingObject as LegacyDrawingObject,
+    DrawingToolType as LegacyDrawingToolType,
+} from '../engine/chartTypes'
 import { zoomLevelToKWidth, kGapFromKWidth } from '../engine/utils/zoom'
 
 // Plugin-backed drawings expose `kind` instead of legacy `type`.
@@ -115,6 +114,7 @@ const DEFAULT_INDICATOR_CATALOG: ReadonlyArray<IndicatorDefinition> = [
 
 interface MountedDom {
     container: HTMLDivElement
+    scrollContent?: HTMLDivElement
     canvasLayer: HTMLDivElement
     rightAxisLayer: HTMLDivElement
     xAxisCanvas: HTMLCanvasElement
@@ -129,7 +129,6 @@ function mapViewportState(vp: LegacyViewportState): ChartViewport {
         dpr: vp.dpr,
         visibleFrom: vp.visibleFrom,
         visibleTo: vp.visibleTo,
-        desiredScrollLeft: vp.desiredScrollLeft,
         kWidth: vp.kWidth,
         kGap: vp.kGap,
     }
@@ -247,6 +246,7 @@ function buildDom(container: HTMLElement): MountedDom {
     canvasLayer.style.position = 'sticky'
     canvasLayer.style.top = '0'
     canvasLayer.style.left = '0'
+    canvasLayer.style.zIndex = '1'
 
     const xAxisCanvas = ownerDoc.createElement('canvas')
     xAxisCanvas.className = 'klc-x-axis-canvas'
@@ -274,7 +274,7 @@ function buildDom(container: HTMLElement): MountedDom {
         }
     }
 
-    return { container: chartContainer, canvasLayer, rightAxisLayer, xAxisCanvas, cleanup }
+    return { container: chartContainer, scrollContent, canvasLayer, rightAxisLayer, xAxisCanvas, cleanup }
 }
 
 // ---------------------------------------------------------------------------
@@ -319,6 +319,7 @@ export function createChartController(opts: ChartMountOptions): ChartController
     const chart = new Chart(
         {
             container: mounted.container,
+            scrollContent: mounted.scrollContent,
             canvasLayer: mounted.canvasLayer,
             rightAxisLayer: mounted.rightAxisLayer,
             xAxisCanvas: mounted.xAxisCanvas,
@@ -348,7 +349,6 @@ export function createChartController(opts: ChartMountOptions): ChartController
         dpr: currentDpr,
         visibleFrom: 0,
         visibleTo: 0,
-        desiredScrollLeft: undefined,
         kWidth: currentKWidth,
         kGap: currentKGap,
     })
@@ -370,6 +370,8 @@ export function createChartController(opts: ChartMountOptions): ChartController
         Readonly<Record<string, number>>
     >({})
     const interactionState: Signal<InteractionSnapshot> = createSignal(INITIAL_INTERACTION)
+    const comparisonColors: Signal<ReadonlyMap<string, string>> = createSignal<ReadonlyMap<string, string>>(new Map())
+    const comparisonLoading: Signal<boolean> = createSignal(false)
 
     // -------------------------------------------------------------------
     // Apply initial render state + seed data
@@ -476,6 +478,20 @@ export function createChartController(opts: ChartMountOptions): ChartController
         ),
     )
 
+    // comparisonColors
+    unsubs.push(
+        chart.comparisonColors.subscribe(() =>
+            comparisonColors.set(new Map(chart.comparisonColors.peek())),
+        ),
+    )
+
+    // comparisonLoading
+    unsubs.push(
+        chart.comparisonLoading.subscribe(() =>
+            comparisonLoading.set(chart.comparisonLoading.peek()),
+        ),
+    )
+
     // -------------------------------------------------------------------
     // Lifecycle guard
     // -------------------------------------------------------------------
@@ -500,6 +516,16 @@ export function createChartController(opts: ChartMountOptions): ChartController
         chart.setSymbols(next)
     }
 
+    function addComparisonSymbol(spec: SymbolSpec): void {
+        if (disposed) return
+        chart.addComparisonSymbol(spec)
+    }
+
+    function removeComparisonSymbol(symbol: string): void {
+        if (disposed) return
+        chart.removeComparisonSymbol(symbol)
+    }
+
     function setDataFetcher(fetcher: DataFetcher | null): void {
         if (disposed) return
         chart.setDataFetcher(fetcher)
@@ -607,6 +633,11 @@ export function createChartController(opts: ChartMountOptions): ChartController
         return chart.getContentWidth()
     }
 
+    function scrollToRight(): void {
+        if (disposed) return
+        chart.scrollToRight()
+    }
+
     function getIndicatorTitle(instanceId: string): string | undefined {
         if (disposed) return undefined
         const instances = chart.indicators.peek()
@@ -777,8 +808,12 @@ export function createChartController(opts: ChartMountOptions): ChartController
         paneRatios,
         paneLayout,
         interactionState,
+        comparisonColors,
+        comparisonLoading,
         catalog: DEFAULT_INDICATOR_CATALOG,
         setSymbols,
+        addComparisonSymbol,
+        removeComparisonSymbol,
         setDataFetcher,
         setData,
         appendData,
@@ -801,6 +836,7 @@ export function createChartController(opts: ChartMountOptions): ChartController
         setTooltipAnchorPositioning,
         getIndicatorTitle,
         getContentWidth,
+        scrollToRight,
         setDrawingTool,
         clearDrawings,
         removeDrawing,

package/src/controllers/types.ts

@@ -10,7 +10,7 @@
 
 import type { Signal } from '../reactivity'
 import type { CustomMarkerEntity, MarkerEntity } from '../engine/marker/registry'
-import type { PaneSpec } from '../engine/chart'
+import type { PaneSpec } from '../engine/chartTypes'
 
 // Controller-owned public surface. Legacy engine types may mirror these
 // shapes internally, but adapters depend only on core-defined contracts.
@@ -21,7 +21,6 @@ export interface ChartViewport {
     dpr: number
     visibleFrom: number
     visibleTo: number
-    desiredScrollLeft: number | undefined
     kWidth: number
     kGap: number
 }
@@ -72,6 +71,7 @@ export interface KLineData {
     changePercent?: number
     changeAmount?: number
     turnoverRate?: number
+    date?: string
 }
 
 export type { PaneSpec }
@@ -98,6 +98,7 @@ export type DataFetcher = (
         endDate: string
         period: string
         adjust: string
+        exchange?: string
     },
 ) => Promise<ReadonlyArray<KLineData>>
 
@@ -242,12 +243,16 @@ export interface ChartController extends DrawingChartAdapter {
     readonly paneRatios: Signal<Readonly<Record<string, number>>>
     readonly paneLayout: Signal<ReadonlyArray<PaneSpec>>
     readonly interactionState: Signal<InteractionSnapshot>
+    readonly comparisonColors: Signal<ReadonlyMap<string, string>>
+    readonly comparisonLoading: Signal<boolean>
 
     // indicator catalog (static — adapters use for picker UI)
     readonly catalog: ReadonlyArray<IndicatorDefinition>
 
     // ---- Data ----
     setSymbols(next: ReadonlyArray<SymbolSpec>): void
+    addComparisonSymbol(spec: SymbolSpec): void
+    removeComparisonSymbol(symbol: string): void
     setDataFetcher(fetcher: DataFetcher | null): void
     setData(next: ReadonlyArray<KLineData>): void
     appendData(next: ReadonlyArray<KLineData>): void
@@ -303,6 +308,8 @@ export interface ChartController extends DrawingChartAdapter {
     getIndicatorTitle(instanceId: string): string | undefined
     /** total scrollable content width (replaces direct computeContentWidth imports) */
     getContentWidth(): number
+    /** scroll to the rightmost position (latest data) */
+    scrollToRight(): void
 
     // ---- Settings ----
     updateSettingsFacade(settings: Record<string, unknown>): void

package/src/data-fetchers/__tests__/dataBuffer.test.ts

@@ -284,4 +284,81 @@ describe('DataBuffer', () => {
 
         expect(prependCalls).toHaveLength(0)
     })
+
+    it('ensureRange skips when same boundary was already attempted (empty fetch)', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+        const initialData = [makeKLine(oneYearAgo), makeKLine(now)]
+
+        let fetchCount = 0
+        const fetcher: DataFetcher = async () => {
+            fetchCount++
+            if (fetchCount === 1) return initialData
+            return []
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(1)
+
+        buffer.ensureRange(oneYearAgo - 30 * MS_PER_DAY, oneYearAgo)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(2)
+
+        buffer.ensureRange(oneYearAgo - 60 * MS_PER_DAY, oneYearAgo)
+
+        await new Promise((r) => setTimeout(r, 50))
+
+        expect(fetchCount).toBe(2)
+    })
+
+    it('ensureRange allows retry when earliestTs moves after successful load', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+        const initialData = [makeKLine(oneYearAgo), makeKLine(now)]
+
+        let fetchCount = 0
+        const fetcher: DataFetcher = async () => {
+            fetchCount++
+            if (fetchCount === 1) return initialData
+            if (fetchCount === 2) return [makeKLine(oneYearAgo - 90 * MS_PER_DAY)]
+            return []
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(1)
+
+        buffer.ensureRange(oneYearAgo - 30 * MS_PER_DAY, oneYearAgo)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(2)
+        expect(buffer.loadedWindow!.earliestTs).toBe(oneYearAgo - 90 * MS_PER_DAY)
+
+        const newEarliest = oneYearAgo - 90 * MS_PER_DAY
+        buffer.ensureRange(newEarliest - 30 * MS_PER_DAY, newEarliest)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(3)
+    })
 })

package/src/data-fetchers/baostock.ts

@@ -11,13 +11,13 @@ const periodMap: Record<string, string> = { daily: 'd', weekly: 'w', monthly: 'm
     const res = await fetch(url)
     console.log(res)
     if (!res.ok) {
-      console.warn(`[baostock] fetch failed: ${res.status} ${res.statusText}`)
-      return []
+      throw new Error(`[baostock] fetch failed: ${res.status} ${res.statusText}`)
     }
     const json = await res.json()
     console.log(json)
     return (json.data ?? json).map((item: Record<string, unknown>) => ({
       timestamp: new Date(item.date as string).getTime(),
+      date: item.date as string,
       open: Number(item.open),
       high: Number(item.high),
       low: Number(item.low),
@@ -29,6 +29,6 @@ const periodMap: Record<string, string> = { daily: 'd', weekly: 'w', monthly: 'm
     })) as KLineData[]
   } catch (err) {
     console.warn('[baostock] network error:', err)
-    return []
+    throw err
   }
 }

package/src/data-fetchers/dataBuffer.ts

@@ -9,6 +9,7 @@ export interface DataWindow {
 const MS_PER_DAY = 86_400_000
 const INITIAL_LOAD_DAYS = 365
 const INCREMENTAL_LOAD_DAYS = 90
+const FETCH_MAX_RETRIES = 2
 
 function formatDate(ts: number): string {
     const d = new Date(ts)
@@ -39,10 +40,12 @@ export class DataBuffer {
     private _dataSignal: Signal<ReadonlyArray<KLineData>>
     private _loadingSignal: Signal<boolean>
     private _fetcher: DataFetcher | null = null
+    private _requestFetch: ((spec: SymbolSpec, startTs: number, endTs: number) => Promise<ReadonlyArray<KLineData>>) | null = null
     private _currentSpec: SymbolSpec | null = null
     private _loadedWindow: DataWindow | null = null
     private _pendingFetch: Promise<void> | null = null
     private _disposed = false
+    private _attemptedBoundaries: Set<number> = new Set()
 
     onPrepend: ((count: number) => void) | null = null
 
@@ -59,6 +62,10 @@ export class DataBuffer {
         return this._loadingSignal
     }
 
+    get currentSpec(): SymbolSpec | null {
+        return this._currentSpec
+    }
+
     get loadedWindow(): DataWindow | null {
         return this._loadedWindow
     }
@@ -67,16 +74,25 @@ export class DataBuffer {
         this._fetcher = fetcher
     }
 
-    setSymbol(spec: SymbolSpec): void {
+    setRequestFetch(fn: ((spec: SymbolSpec, startTs: number, endTs: number) => Promise<ReadonlyArray<KLineData>>) | null): void {
+        this._requestFetch = fn
+    }
+
+    setSymbol(spec: SymbolSpec, initialStartTs?: number): void {
         this._currentSpec = spec
         this._data = []
         this._loadedWindow = null
+        this._attemptedBoundaries.clear()
         this._dataSignal.set([])
-        this.loadInitial()
+        if (initialStartTs !== undefined) {
+            this.loadInitialRange(initialStartTs, Date.now())
+        } else {
+            this.loadInitial()
+        }
     }
 
     ensureRange(requestStartTs: number, _requestEndTs: number): void {
-        if (this._disposed || !this._fetcher || !this._currentSpec) return
+        if (this._disposed || (!this._requestFetch && !this._fetcher) || !this._currentSpec) return
         if (!this._loadedWindow) return
 
         if (requestStartTs >= this._loadedWindow.earliestTs) return
@@ -86,11 +102,14 @@ export class DataBuffer {
 
         if (incrementalEnd <= incrementalStart) return
 
+        if (this._attemptedBoundaries.has(incrementalEnd)) return
+
+        this._attemptedBoundaries.add(incrementalEnd)
         this.fetchRange(incrementalStart, incrementalEnd)
     }
 
     private loadInitial(): void {
-        if (!this._fetcher || !this._currentSpec || this._disposed) return
+        if ((!this._requestFetch && !this._fetcher) || !this._currentSpec || this._disposed) return
 
         const now = Date.now()
         const startDate = now - INITIAL_LOAD_DAYS * MS_PER_DAY
@@ -99,13 +118,18 @@ export class DataBuffer {
         this.fetchRange(startDate, endDate)
     }
 
-    private fetchRange(startTs: number, endTs: number): void {
-        if (!this._fetcher || !this._currentSpec || this._disposed) return
+    private loadInitialRange(startTs: number, endTs: number): void {
+        if ((!this._requestFetch && !this._fetcher) || !this._currentSpec || this._disposed) return
+        this.fetchRange(startTs, endTs)
+    }
+
+    private fetchRange(startTs: number, endTs: number, retryCount = 0): void {
+        if ((!this._requestFetch && !this._fetcher) || !this._currentSpec || this._disposed) return
 
         if (this._pendingFetch) {
             this._pendingFetch = this._pendingFetch.then(() => {
                 if (this._disposed) return
-                this.fetchRange(startTs, endTs)
+                return this.fetchRange(startTs, endTs, retryCount)
             })
             return
         }
@@ -115,14 +139,18 @@ export class DataBuffer {
 
         this._loadingSignal.set(true)
 
-        this._pendingFetch = fetcher(spec.source ?? 'baostock', {
-            symbol: spec.symbol,
-            startDate: formatDate(startTs),
-            endDate: formatDate(endTs),
-            period: spec.period ?? 'daily',
-            adjust: spec.adjust ?? 'none',
-        })
-            .then((incoming) => {
+        const doFetch = (): Promise<void> => {
+            const fetchPromise = this._requestFetch
+                ? this._requestFetch(spec, startTs, endTs)
+                : (fetcher as NonNullable<DataFetcher>)(spec.source ?? 'baostock', {
+                    symbol: spec.symbol,
+                    startDate: formatDate(startTs),
+                    endDate: formatDate(endTs),
+                    period: spec.period ?? 'daily',
+                    adjust: spec.adjust ?? 'none',
+                    exchange: spec.exchange,
+                })
+            return fetchPromise.then((incoming) => {
                 if (this._disposed) return
 
                 const oldLength = this._data.length
@@ -155,16 +183,35 @@ export class DataBuffer {
                     }
                 }
             })
-            .catch((err) => {
+        }
+
+        const attempt = (count: number): Promise<void> => {
+            return doFetch().catch((err) => {
                 if (this._disposed) return
-                console.error('[DataBuffer] fetch failed:', err)
-            })
-            .finally(() => {
-                this._pendingFetch = null
-                if (!this._disposed) {
-                    this._loadingSignal.set(false)
+
+                if (count < FETCH_MAX_RETRIES) {
+                    const delay = Math.pow(2, count) * 1000
+                    console.warn(
+                        `[DataBuffer] fetch failed, retry ${count + 1}/${FETCH_MAX_RETRIES} in ${delay}ms:`,
+                        err,
+                    )
+                    return new Promise<void>((resolve) => setTimeout(resolve, delay)).then(() => {
+                        if (this._disposed) return
+                        return attempt(count + 1)
+                    })
                 }
+
+                console.error(`[DataBuffer] fetch failed after ${FETCH_MAX_RETRIES + 1} attempts:`, err)
+                this._attemptedBoundaries.delete(endTs)
             })
+        }
+
+        this._pendingFetch = attempt(retryCount).finally(() => {
+            this._pendingFetch = null
+            if (!this._disposed) {
+                this._loadingSignal.set(false)
+            }
+        })
     }
 
     dispose(): void {
@@ -172,5 +219,6 @@ export class DataBuffer {
         this._pendingFetch = null
         this._data = []
         this._loadedWindow = null
+        this._attemptedBoundaries.clear()
     }
 }

package/src/data-fetchers/index.ts

@@ -1,6 +1,7 @@
 export { thousandMockDataFetcher } from './thousand-mock'
 export { hundredMockDataFetcher } from './hundred-mock'
 export { baostockDataFetcher } from './baostock'
+export { tradingviewDataFetcher } from './tradingview'
 export { routerDataFetcher } from './router'
 export { DataBuffer } from './dataBuffer'
 export type { DataWindow } from './dataBuffer'

package/src/data-fetchers/router.ts

@@ -2,11 +2,14 @@ import type { DataFetcher } from '../controllers/types'
 import { baostockDataFetcher } from './baostock'
 import { hundredMockDataFetcher } from './hundred-mock'
 import { thousandMockDataFetcher } from './thousand-mock'
+import { tradingviewDataFetcher } from './tradingview'
 
 export const routerDataFetcher: DataFetcher = (source, config) => {
   switch (source) {
     case 'baostock':
       return baostockDataFetcher(source, config)
+    case 'tradingview':
+      return tradingviewDataFetcher(source, config)
     case 'mock-100':
       return hundredMockDataFetcher(source, config)
     case 'mock-10000':

package/src/data-fetchers/tradingview.ts

@@ -0,0 +1,48 @@
+import type { DataFetcher, KLineData } from '../controllers/types'
+
+const PERIOD_TO_TIMEFRAME: Record<string, string> = {
+  daily: '1d',
+  weekly: '1w',
+  monthly: '1M',
+  '5min': '5m',
+  '15min': '15m',
+  '30min': '30m',
+  '60min': '60m',
+}
+
+export const tradingviewDataFetcher: DataFetcher = async (source, config) => {
+  const baseUrl = source === 'tradingview' ? 'http://localhost:8000' : ''
+  const timeframe = PERIOD_TO_TIMEFRAME[config.period] ?? '1d'
+  const startDate = config.startDate.split('T')[0]
+  const endDate = config.endDate.split('T')[0]
+
+  const exchangeQ = config.exchange ? `&exchange=${config.exchange}` : ''
+  const url = `${baseUrl}/api/tradingview/kdata?symbol=${config.symbol}&timeframe=${timeframe}&start_date=${startDate}&end_date=${endDate}${exchangeQ}`
+  try {
+    const res = await fetch(url)
+    if (!res.ok) {
+      throw new Error(`[tradingview] fetch failed: ${res.status} ${res.statusText}`)
+    }
+    const json = await res.json()
+    if (!json.success) {
+      throw new Error(`[tradingview] API error: ${json.error_msg}`)
+    }
+    if (json.warning) {
+      console.warn(`[tradingview] ${json.warning}`)
+    }
+
+    return (json.data ?? []).map((item: Record<string, unknown>) => ({
+      timestamp: item.ts_open as number,
+      date: item.date as string,
+      open: item.open as number,
+      high: item.high as number,
+      low: item.low as number,
+      close: item.close as number,
+      volume: (item.volume as number) ?? 0,
+      stockCode: config.symbol,
+    })) as KLineData[]
+  } catch (err) {
+    console.warn('[tradingview] network error:', err)
+    throw err
+  }
+}