@363045841yyt/klinechart-core 0.7.13 → 0.8.1-alpha.2

package/src/controllers/types.ts

@@ -76,6 +76,31 @@ export interface KLineData {
 
 export type { PaneSpec }
 
+// ---------------------------------------------------------------------------
+// Symbol specification & DataFetcher adapter
+// ---------------------------------------------------------------------------
+
+export interface SymbolSpec {
+    symbol: string
+    exchange?: string
+    period?: string
+    adjust?: string
+    source?: string
+    startDate?: string
+    endDate?: string
+}
+
+export type DataFetcher = (
+    source: string,
+    config: {
+        symbol: string
+        startDate: string
+        endDate: string
+        period: string
+        adjust: string
+    },
+) => Promise<ReadonlyArray<KLineData>>
+
 // ---------------------------------------------------------------------------
 // Indicator metadata
 // ---------------------------------------------------------------------------
@@ -183,6 +208,8 @@ export interface DrawingControllerCallbacks {
 export interface ChartMountOptions {
     container: HTMLElement
     data: ReadonlyArray<KLineData>
+    symbols?: ReadonlyArray<SymbolSpec>
+    dataFetcher?: DataFetcher
     initialZoomLevel?: number
     zoomLevels?: number
     theme?: 'light' | 'dark'
@@ -205,6 +232,8 @@ export interface ChartController extends DrawingChartAdapter {
     // ---- Signals ----
     readonly viewport: Signal<ChartViewport>
     readonly data: Signal<ReadonlyArray<KLineData>>
+    readonly dataLoading: Signal<boolean>
+    readonly symbols: Signal<ReadonlyArray<SymbolSpec>>
     readonly theme: Signal<'light' | 'dark'>
     readonly indicators: Signal<ReadonlyArray<IndicatorInstance>>
     readonly subPanes: Signal<ReadonlyArray<SubPaneInfo>>
@@ -218,6 +247,8 @@ export interface ChartController extends DrawingChartAdapter {
     readonly catalog: ReadonlyArray<IndicatorDefinition>
 
     // ---- Data ----
+    setSymbols(next: ReadonlyArray<SymbolSpec>): void
+    setDataFetcher(fetcher: DataFetcher | null): void
     setData(next: ReadonlyArray<KLineData>): void
     appendData(next: ReadonlyArray<KLineData>): void
     updateData(next: ReadonlyArray<KLineData>): void

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

@@ -0,0 +1,287 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { DataBuffer } from '../dataBuffer'
+import type { DataFetcher, KLineData, SymbolSpec } from '../../controllers/types'
+
+function makeKLine(ts: number): KLineData {
+    return {
+        timestamp: ts,
+        open: 100,
+        high: 110,
+        low: 90,
+        close: 105,
+        volume: 1000,
+    }
+}
+
+const MS_PER_DAY = 86_400_000
+
+const defaultSpec: SymbolSpec = {
+    symbol: 'sh.600000',
+    period: 'daily',
+    adjust: 'none',
+    source: 'mock',
+}
+
+function makeMockFetcher(responses: Map<string, KLineData[]>): DataFetcher {
+    return async (source, config) => {
+        const key = `${config.symbol}_${config.startDate}_${config.endDate}`
+        return responses.get(key) ?? []
+    }
+}
+
+describe('DataBuffer', () => {
+    let buffer: DataBuffer
+
+    beforeEach(() => {
+        buffer = new DataBuffer()
+    })
+
+    it('initial state: empty data, not loading', () => {
+        expect(buffer.data()).toEqual([])
+        expect(buffer.loading()).toBe(false)
+        expect(buffer.loadedWindow).toBeNull()
+    })
+
+    it('setSymbol triggers initial load (now - 1 year)', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+        const fetchedData = [makeKLine(oneYearAgo + 86400000), makeKLine(now)]
+
+        let capturedConfig: { startDate: string; endDate: string } | null = null
+        const fetcher: DataFetcher = async (_source, config) => {
+            capturedConfig = config
+            return fetchedData
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        expect(buffer.loading()).toBe(true)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(buffer.data()).toHaveLength(2)
+        expect(buffer.loadedWindow).not.toBeNull()
+        expect(buffer.loadedWindow!.earliestTs).toBe(fetchedData[0]!.timestamp)
+        expect(buffer.loadedWindow!.latestTs).toBe(fetchedData[1]!.timestamp)
+
+        expect(capturedConfig).not.toBeNull()
+        const startDate = new Date(capturedConfig!.startDate).getTime()
+        const endDate = new Date(capturedConfig!.endDate).getTime()
+        expect(endDate - startDate).toBeGreaterThan(364 * MS_PER_DAY)
+        expect(endDate - startDate).toBeLessThanOrEqual(366 * MS_PER_DAY)
+    })
+
+    it('ensureRange triggers incremental load when visible range is before loaded window', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+
+        const initialData = [makeKLine(oneYearAgo + MS_PER_DAY), makeKLine(now)]
+
+        let fetchCount = 0
+        const fetcher: DataFetcher = async () => {
+            fetchCount++
+            if (fetchCount === 1) return initialData
+            return [makeKLine(oneYearAgo - 90 * MS_PER_DAY), makeKLine(oneYearAgo)]
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(1)
+
+        const requestTs = oneYearAgo - 30 * MS_PER_DAY
+        buffer.ensureRange(requestTs, oneYearAgo)
+
+        expect(buffer.loading()).toBe(true)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(2)
+        expect(buffer.data()).toHaveLength(4)
+        expect(buffer.loadedWindow!.earliestTs).toBe(oneYearAgo - 90 * MS_PER_DAY)
+    })
+
+    it('ensureRange does nothing when visible range is within loaded window', 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++
+            return initialData
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBe(1)
+
+        buffer.ensureRange(oneYearAgo + 100 * MS_PER_DAY, now)
+
+        expect(fetchCount).toBe(1)
+    })
+
+    it('merges data and deduplicates by timestamp', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+        const sharedTs = oneYearAgo + 100 * MS_PER_DAY
+
+        const initialData = [makeKLine(oneYearAgo), makeKLine(sharedTs), makeKLine(now)]
+        const incrementalData = [makeKLine(oneYearAgo - 90 * MS_PER_DAY), makeKLine(sharedTs)]
+
+        let fetchCount = 0
+        const fetcher: DataFetcher = async () => {
+            fetchCount++
+            if (fetchCount === 1) return initialData
+            return incrementalData
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        buffer.ensureRange(oneYearAgo - 30 * MS_PER_DAY, oneYearAgo)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        const timestamps = buffer.data().map((d) => d.timestamp)
+        const uniqueTimestamps = new Set(timestamps)
+        expect(timestamps.length).toBe(uniqueTimestamps.size)
+        expect(timestamps).toEqual([...timestamps].sort((a, b) => a - b))
+    })
+
+    it('queues concurrent ensureRange calls', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+
+        const initialData = [makeKLine(oneYearAgo + MS_PER_DAY), makeKLine(now)]
+        let fetchCount = 0
+        const fetcher: DataFetcher = async () => {
+            fetchCount++
+            await new Promise((r) => setTimeout(r, 10))
+            if (fetchCount === 1) return initialData
+            return [makeKLine(oneYearAgo - 90 * MS_PER_DAY)]
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        buffer.ensureRange(oneYearAgo - 30 * MS_PER_DAY, oneYearAgo)
+        buffer.ensureRange(oneYearAgo - 60 * MS_PER_DAY, oneYearAgo)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(fetchCount).toBeGreaterThanOrEqual(2)
+    })
+
+    it('dispose prevents further fetches', async () => {
+        const fetcher: DataFetcher = async () => {
+            return [makeKLine(Date.now())]
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.dispose()
+
+        expect(buffer.data()).toEqual([])
+    })
+
+    it('setSymbol resets data before loading', async () => {
+        const now = Date.now()
+        const fetcher: DataFetcher = async () => [makeKLine(now)]
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(buffer.data()).toHaveLength(1)
+
+        buffer.setSymbol({ ...defaultSpec, symbol: 'sz.000001' })
+
+        expect(buffer.data()).toEqual([])
+        expect(buffer.loadedWindow).toBeNull()
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(buffer.data()).toHaveLength(1)
+    })
+
+    it('onPrepend is called when data is prepended (earlier timestamps)', 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 [makeKLine(oneYearAgo - 90 * MS_PER_DAY), makeKLine(oneYearAgo - 45 * MS_PER_DAY)]
+        }
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        const prependCalls: number[] = []
+        buffer.onPrepend = (count) => prependCalls.push(count)
+
+        buffer.ensureRange(oneYearAgo - 30 * MS_PER_DAY, oneYearAgo)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(prependCalls).toHaveLength(1)
+        expect(prependCalls[0]).toBe(2)
+    })
+
+    it('onPrepend is not called for initial load', async () => {
+        const now = Date.now()
+        const oneYearAgo = now - 365 * MS_PER_DAY
+        const fetcher: DataFetcher = async () => [makeKLine(oneYearAgo), makeKLine(now)]
+
+        const prependCalls: number[] = []
+        buffer.onPrepend = (count) => prependCalls.push(count)
+
+        buffer.setFetcher(fetcher)
+        buffer.setSymbol(defaultSpec)
+
+        await vi.waitFor(() => {
+            expect(buffer.loading()).toBe(false)
+        })
+
+        expect(prependCalls).toHaveLength(0)
+    })
+})

package/src/data-fetchers/baostock.ts

@@ -0,0 +1,34 @@
+import type { DataFetcher, KLineData } from '../controllers/types'
+
+export const baostockDataFetcher: DataFetcher = async (source, config) => {
+  console.log(`[baostock] fetching ${config.symbol} ${config.period} ${config.startDate}~${config.endDate}`)
+  const baseUrl = source === 'baostock' ? 'http://localhost:8000' : ''
+  const adjustMap: Record<string, string> = { qfq: '2', hfq: '1', none: '3' }
+const periodMap: Record<string, string> = { daily: 'd', weekly: 'w', monthly: 'm', '5min': '5', '15min': '15', '30min': '30', '60min': '60' }
+  const adjustflag = adjustMap[config.adjust] ?? '3'
+  const url = `${baseUrl}/api/stock/kdata?stock_code=${config.symbol}&start_date=${config.startDate}&end_date=${config.endDate}&frequency=${periodMap[config.period] ?? 'd'}&adjustflag=${adjustflag}`
+  try {
+    const res = await fetch(url)
+    console.log(res)
+    if (!res.ok) {
+      console.warn(`[baostock] fetch failed: ${res.status} ${res.statusText}`)
+      return []
+    }
+    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(),
+      open: Number(item.open),
+      high: Number(item.high),
+      low: Number(item.low),
+      close: Number(item.close),
+      volume: Number(item.volume),
+      turnover: Number(item.amount ?? 0),
+      turnoverRate: item.turn === '' ? 0 : Number(item.turn),
+      stockCode: String(item.code ?? config.symbol),
+    })) as KLineData[]
+  } catch (err) {
+    console.warn('[baostock] network error:', err)
+    return []
+  }
+}

package/src/data-fetchers/dataBuffer.ts

@@ -0,0 +1,176 @@
+import { createSignal, type Signal } from '../reactivity/signal'
+import type { DataFetcher, KLineData, SymbolSpec } from '../controllers/types'
+
+export interface DataWindow {
+    earliestTs: number
+    latestTs: number
+}
+
+const MS_PER_DAY = 86_400_000
+const INITIAL_LOAD_DAYS = 365
+const INCREMENTAL_LOAD_DAYS = 90
+
+function formatDate(ts: number): string {
+    const d = new Date(ts)
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+}
+
+function mergeSortedData(
+    existing: KLineData[],
+    incoming: KLineData[],
+): KLineData[] {
+    if (existing.length === 0) return [...incoming]
+    if (incoming.length === 0) return [...existing]
+
+    const tsSet = new Set<number>(existing.map((d) => d.timestamp))
+    const unique = incoming.filter((d) => !tsSet.has(d.timestamp))
+    if (unique.length === 0) return existing
+
+    const merged = [...existing, ...unique]
+    merged.sort((a, b) => a.timestamp - b.timestamp)
+    return merged
+}
+
+export class DataBuffer {
+    private _data: KLineData[] = []
+    private _dataSignal: Signal<ReadonlyArray<KLineData>>
+    private _loadingSignal: Signal<boolean>
+    private _fetcher: DataFetcher | null = null
+    private _currentSpec: SymbolSpec | null = null
+    private _loadedWindow: DataWindow | null = null
+    private _pendingFetch: Promise<void> | null = null
+    private _disposed = false
+
+    onPrepend: ((count: number) => void) | null = null
+
+    constructor() {
+        this._dataSignal = createSignal<ReadonlyArray<KLineData>>([])
+        this._loadingSignal = createSignal<boolean>(false)
+    }
+
+    get data(): Signal<ReadonlyArray<KLineData>> {
+        return this._dataSignal
+    }
+
+    get loading(): Signal<boolean> {
+        return this._loadingSignal
+    }
+
+    get loadedWindow(): DataWindow | null {
+        return this._loadedWindow
+    }
+
+    setFetcher(fetcher: DataFetcher | null): void {
+        this._fetcher = fetcher
+    }
+
+    setSymbol(spec: SymbolSpec): void {
+        this._currentSpec = spec
+        this._data = []
+        this._loadedWindow = null
+        this._dataSignal.set([])
+        this.loadInitial()
+    }
+
+    ensureRange(requestStartTs: number, _requestEndTs: number): void {
+        if (this._disposed || !this._fetcher || !this._currentSpec) return
+        if (!this._loadedWindow) return
+
+        if (requestStartTs >= this._loadedWindow.earliestTs) return
+
+        const incrementalStart = requestStartTs - INCREMENTAL_LOAD_DAYS * MS_PER_DAY
+        const incrementalEnd = this._loadedWindow.earliestTs
+
+        if (incrementalEnd <= incrementalStart) return
+
+        this.fetchRange(incrementalStart, incrementalEnd)
+    }
+
+    private loadInitial(): void {
+        if (!this._fetcher || !this._currentSpec || this._disposed) return
+
+        const now = Date.now()
+        const startDate = now - INITIAL_LOAD_DAYS * MS_PER_DAY
+        const endDate = now
+
+        this.fetchRange(startDate, endDate)
+    }
+
+    private fetchRange(startTs: number, endTs: number): void {
+        if (!this._fetcher || !this._currentSpec || this._disposed) return
+
+        if (this._pendingFetch) {
+            this._pendingFetch = this._pendingFetch.then(() => {
+                if (this._disposed) return
+                this.fetchRange(startTs, endTs)
+            })
+            return
+        }
+
+        const spec = this._currentSpec
+        const fetcher = this._fetcher
+
+        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) => {
+                if (this._disposed) return
+
+                const oldLength = this._data.length
+                const oldEarliestTs = oldLength > 0 ? this._data[0]!.timestamp : null
+                const merged = mergeSortedData(this._data, [...incoming])
+
+                if (oldLength > 0 && merged.length > oldLength && oldEarliestTs !== null) {
+                    const newEarliestTs = merged[0]!.timestamp
+                    if (newEarliestTs < oldEarliestTs) {
+                        const prependCount = merged.findIndex((d) => d.timestamp === oldEarliestTs)
+                        if (prependCount > 0) {
+                            this.onPrepend?.(prependCount)
+                        }
+                    }
+                }
+
+                this._data = merged
+                this._dataSignal.set([...merged])
+
+                if (merged.length > 0) {
+                    const newEarliest = merged[0]!.timestamp
+                    const newLatest = merged[merged.length - 1]!.timestamp
+                    if (!this._loadedWindow) {
+                        this._loadedWindow = { earliestTs: newEarliest, latestTs: newLatest }
+                    } else {
+                        this._loadedWindow = {
+                            earliestTs: Math.min(this._loadedWindow.earliestTs, newEarliest),
+                            latestTs: Math.max(this._loadedWindow.latestTs, newLatest),
+                        }
+                    }
+                }
+            })
+            .catch((err) => {
+                if (this._disposed) return
+                console.error('[DataBuffer] fetch failed:', err)
+            })
+            .finally(() => {
+                this._pendingFetch = null
+                if (!this._disposed) {
+                    this._loadingSignal.set(false)
+                }
+            })
+    }
+
+    dispose(): void {
+        this._disposed = true
+        this._pendingFetch = null
+        this._data = []
+        this._loadedWindow = null
+    }
+}

package/src/data-fetchers/hundred-mock.ts

@@ -0,0 +1,31 @@
+import type { DataFetcher, KLineData } from '../controllers/types'
+
+export const hundredMockDataFetcher: DataFetcher = async (_source, config) => {
+  console.log(`[hundred-mock] generating ${config.symbol} ${config.period}`)
+  const start = new Date(config.startDate).getTime()
+  const end = new Date(config.endDate).getTime()
+  const dayMs = 86400000
+  const totalDays = Math.floor((end - start) / dayMs) + 1
+  const data: KLineData[] = []
+  let price = 10 + Math.random() * 5
+  for (let i = 0; i < totalDays; i++) {
+    const ts = start + i * dayMs
+    const change = (Math.random() - 0.48) * price * 0.06
+    const open = price
+    const close = Math.round((open + change) * 100) / 100
+    const high = Math.round(Math.max(open, close) * (1 + Math.random() * 0.03) * 100) / 100
+    const low = Math.round(Math.min(open, close) * (1 - Math.random() * 0.03) * 100) / 100
+    const volume = Math.round(Math.random() * 10000000 + 1000000)
+    data.push({
+      timestamp: ts,
+      open,
+      high,
+      low,
+      close,
+      volume,
+      turnover: Math.round((volume * (open + close)) / 2),
+    })
+    price = close
+  }
+  return data
+}

package/src/data-fetchers/index.ts

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

package/src/data-fetchers/router.ts

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

package/src/data-fetchers/thousand-mock.ts

@@ -0,0 +1,30 @@
+import type { DataFetcher, KLineData } from '../controllers/types'
+
+export const thousandMockDataFetcher: DataFetcher = async (_source, _config) => {
+  console.log('[thousand-mock] generating 10k K-lines')
+  const data: KLineData[] = []
+  const startTime = new Date('2020-01-01').getTime()
+  const dayMs = 24 * 60 * 60 * 1000
+  let lastClose = 3000
+  for (let i = 0; i < 10000; i++) {
+    const timestamp = startTime + i * dayMs
+    const volatility = 0.02
+    const trend = 0.0001
+    const change = (Math.random() - 0.5) * 2 * volatility + trend
+    const open = lastClose
+    const close = open * (1 + change)
+    const high = Math.max(open, close) * (1 + Math.random() * 0.01)
+    const low = Math.min(open, close) * (1 - Math.random() * 0.01)
+    const volume = Math.floor(1000000 + Math.random() * 5000000)
+    data.push({
+      timestamp,
+      open: parseFloat(open.toFixed(2)),
+      high: parseFloat(high.toFixed(2)),
+      low: parseFloat(low.toFixed(2)),
+      close: parseFloat(close.toFixed(2)),
+      volume,
+    })
+    lastClose = close
+  }
+  return data
+}