@363045841yyt/klinechart 0.8.3 → 0.8.5

package/src/composables/chart/useRangeSelection.ts

@@ -0,0 +1,417 @@
+import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
+import { formatTimestamp } from '@363045841yyt/klinechart-core'
+import type { KLineData, ChartController, DataFetcher } from '@363045841yyt/klinechart-core/controllers'
+import { calcRangeOverlayPixel } from '../../tools/calcRangeOverlayPixel'
+import type { Bounds } from '../../tools/calcRangeOverlayPixel'
+import {
+  getKLineIndexByTimestamp,
+  findNearestKLineIndex,
+} from '../../tools/getKLineIndexByTimestamp'
+
+interface RangeSelectionState {
+  startTimestamp: number | null
+  endTimestamp: number | null
+  isDragging: boolean
+}
+
+function fmtDate(item: KLineData | undefined): string {
+  if (!item) return '?'
+  if (item.date) return item.date
+  return new Date(item.timestamp).toISOString().slice(0, 10)
+}
+
+function toYYYYMMDD(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 normalizeDateInput(input: string): string | null {
+  const parts = input.trim().split(/[-/]/)
+  if (parts.length !== 3) return null
+  const y = parts[0]!.padStart(4, '0')
+  const m = parts[1]!.padStart(2, '0')
+  const d = parts[2]!.padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+function toCsvCell(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  const text = String(value)
+  return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+function parseDateToTimestamp(input: string): number | null {
+  const normalized = normalizeDateInput(input)
+  if (!normalized) return null
+  const d = new Date(normalized)
+  return isNaN(d.getTime()) ? null : d.getTime()
+}
+
+export function useRangeSelection(options: {
+  controller: Ref<ChartController | null>
+  activeToolId: Ref<string>
+  containerRef: Ref<HTMLElement | null>
+  dataVersion: Ref<number>
+  viewportVersion: Ref<number>
+  dataFetcher: Ref<DataFetcher | null>
+  batchStockCodes: Ref<string[]>
+}) {
+  const { controller, activeToolId, containerRef, dataVersion, viewportVersion, dataFetcher, batchStockCodes } = options
+
+  const containerScrollLeft = ref(0)
+  const customStartDate = ref('')
+  const customEndDate = ref('')
+  const resizeSide = ref<'left' | 'right' | null>(null)
+  const exportingProgress = ref<{ current: number; total: number; label: string } | null>(null)
+
+  const rangeSelection = ref<RangeSelectionState>({
+    startTimestamp: null,
+    endTimestamp: null,
+    isDragging: false,
+  })
+
+  const isRangeSelectActive = computed(() => activeToolId.value === 'range-select')
+
+  const rangeSelectionReady = computed(
+    () =>
+      rangeSelection.value.startTimestamp !== null &&
+      rangeSelection.value.endTimestamp !== null,
+  )
+
+  const rangeSelectionBounds: ComputedRef<Bounds | null> = computed(() => {
+    void dataVersion.value
+    const data = controller.value?.getData() ?? []
+    const { startTimestamp, endTimestamp } = rangeSelection.value
+    if (startTimestamp === null || endTimestamp === null || data.length === 0) return null
+
+    const rawStart = findNearestKLineIndex(data, startTimestamp, 'left')
+    const rawEnd = findNearestKLineIndex(data, endTimestamp, 'right')
+    if (rawStart === null || rawEnd === null) return null
+
+    return { start: Math.min(rawStart, rawEnd), end: Math.max(rawStart, rawEnd) }
+  })
+
+  const rangeSelectionStartLabel: ComputedRef<string> = computed(() => {
+    const bounds = rangeSelectionBounds.value
+    const data = controller.value?.getData() ?? []
+    if (!bounds || data.length === 0) return ''
+    return fmtDate(data[bounds.start])
+  })
+
+  const rangeSelectionEndLabel: ComputedRef<string> = computed(() => {
+    const bounds = rangeSelectionBounds.value
+    const data = controller.value?.getData() ?? []
+    if (!bounds || data.length === 0) return ''
+    return fmtDate(data[bounds.end])
+  })
+
+  const rangeSelectionOverlayStyle = computed(() => {
+    const bounds = rangeSelectionBounds.value
+    if (!bounds) return null
+
+    void containerScrollLeft.value
+    void viewportVersion.value
+
+    const ctrl = controller.value
+    const viewport = ctrl?.getViewport()
+    const container = containerRef.value
+    if (!ctrl || !viewport || !container) return null
+
+    const px = calcRangeOverlayPixel(bounds, ctrl, container, viewport)
+    return {
+      left: `${px.left}px`,
+      width: `${px.width}px`,
+      height: `${px.height}px`,
+    }
+  })
+
+  function clearRangeSelection() {
+    rangeSelection.value = { startTimestamp: null, endTimestamp: null, isDragging: false }
+    customStartDate.value = ''
+    customEndDate.value = ''
+  }
+
+  watch(customStartDate, (val) => {
+    const data = controller.value?.getData() ?? []
+    const targetTs = parseDateToTimestamp(val)
+    if (targetTs === null || data.length === 0) return
+    rangeSelection.value = { ...rangeSelection.value, startTimestamp: targetTs, isDragging: false }
+    if (targetTs < data[0]!.timestamp) {
+      controller.value?.ensureDataRange(targetTs)
+    }
+  })
+
+  watch(customEndDate, (val) => {
+    const data = controller.value?.getData() ?? []
+    const targetTs = parseDateToTimestamp(val)
+    if (targetTs === null || data.length === 0) return
+    rangeSelection.value = { ...rangeSelection.value, endTimestamp: targetTs, isDragging: false }
+    if (targetTs < data[0]!.timestamp) {
+      controller.value?.ensureDataRange(targetTs)
+    }
+  })
+
+  function getRangeSelectionIndex(e: PointerEvent, container: HTMLElement): number | null {
+    const data = controller.value?.getData() ?? []
+    if (data.length === 0) return null
+
+    const rect = container.getBoundingClientRect()
+    const rawIndex = controller.value?.getLogicalIndexAtX(e.clientX - rect.left)
+    if (rawIndex === null || rawIndex === undefined) return null
+    return Math.max(0, Math.min(rawIndex, data.length - 1))
+  }
+
+  function handleRangePointerDown(e: PointerEvent, container: HTMLElement): boolean {
+    if (!isRangeSelectActive.value) return false
+    if (
+      rangeSelection.value.startTimestamp !== null &&
+      rangeSelection.value.endTimestamp !== null &&
+      !rangeSelection.value.isDragging
+    ) {
+      return false
+    }
+    const index = getRangeSelectionIndex(e, container)
+    if (index === null) return true
+
+    const data = controller.value?.getData() ?? []
+    const ts = data[index]?.timestamp
+    if (ts === undefined) return true
+
+    rangeSelection.value = { startTimestamp: ts, endTimestamp: ts, isDragging: true }
+    customStartDate.value = ''
+    customEndDate.value = ''
+    container.setPointerCapture?.(e.pointerId)
+    e.preventDefault()
+    return true
+  }
+
+  function handleRangePointerMove(e: PointerEvent, container: HTMLElement): boolean {
+    if (!isRangeSelectActive.value || !rangeSelection.value.isDragging) return false
+    const index = getRangeSelectionIndex(e, container)
+    if (index !== null) {
+      const data = controller.value?.getData() ?? []
+      const ts = data[index]?.timestamp
+      if (ts !== undefined) {
+        rangeSelection.value = { ...rangeSelection.value, endTimestamp: ts }
+      }
+    }
+    e.preventDefault()
+    return true
+  }
+
+  function handleRangePointerUp(e: PointerEvent, container: HTMLElement): boolean {
+    if (!isRangeSelectActive.value || !rangeSelection.value.isDragging) return false
+    const index = getRangeSelectionIndex(e, container)
+    if (index !== null) {
+      const data = controller.value?.getData() ?? []
+      const ts = data[index]?.timestamp
+      if (ts !== undefined) {
+        rangeSelection.value = {
+          ...rangeSelection.value,
+          endTimestamp: ts,
+          isDragging: false,
+        }
+      } else {
+        rangeSelection.value = { ...rangeSelection.value, isDragging: false }
+      }
+    } else {
+      rangeSelection.value = { ...rangeSelection.value, isDragging: false }
+    }
+    container.releasePointerCapture?.(e.pointerId)
+    e.preventDefault()
+    return true
+  }
+
+  function onEdgePointerDown(side: 'left' | 'right', e: PointerEvent) {
+    if (!isRangeSelectActive.value) return
+    resizeSide.value = side
+    const el = e.currentTarget as HTMLElement
+    el.setPointerCapture?.(e.pointerId)
+    e.preventDefault()
+  }
+
+  function onEdgePointerMove(e: PointerEvent) {
+    if (
+      !resizeSide.value ||
+      rangeSelection.value.startTimestamp === null ||
+      rangeSelection.value.endTimestamp === null
+    )
+      return
+    const rect = containerRef.value?.getBoundingClientRect()
+    if (!rect) return
+    const data = controller.value?.getData() ?? []
+    if (!data.length) return
+    const rawIndex = controller.value?.getLogicalIndexAtX(e.clientX - rect.left)
+    if (rawIndex === null || rawIndex === undefined) return
+    const index = Math.max(0, Math.min(rawIndex, data.length - 1))
+    const ts = data[index]?.timestamp
+    if (ts === undefined) return
+
+    if (resizeSide.value === 'left') {
+      if (ts > rangeSelection.value.endTimestamp) {
+        rangeSelection.value = {
+          startTimestamp: rangeSelection.value.endTimestamp,
+          endTimestamp: ts,
+          isDragging: false,
+        }
+        resizeSide.value = 'right'
+      } else {
+        rangeSelection.value = { ...rangeSelection.value, startTimestamp: ts }
+      }
+    } else {
+      if (ts < rangeSelection.value.startTimestamp) {
+        rangeSelection.value = {
+          startTimestamp: ts,
+          endTimestamp: rangeSelection.value.startTimestamp,
+          isDragging: false,
+        }
+        resizeSide.value = 'left'
+      } else {
+        rangeSelection.value = { ...rangeSelection.value, endTimestamp: ts }
+      }
+    }
+  }
+
+  function onEdgePointerUp(e: PointerEvent) {
+    if (!resizeSide.value) return
+    const el = e.currentTarget as HTMLElement
+    el.releasePointerCapture?.(e.pointerId)
+    resizeSide.value = null
+  }
+
+  const CSV_FIELDS: Array<keyof KLineData> = [
+    'timestamp',
+    'open',
+    'high',
+    'low',
+    'close',
+    'volume',
+    'turnover',
+    'turnoverRate',
+    'amplitude',
+    'changePercent',
+    'changeAmount',
+  ]
+
+  function downloadCsv(
+    items: ReadonlyArray<KLineData>,
+    prefix: string,
+    startTs: number,
+    endTs: number,
+  ) {
+    const header = `stockCode,time,${CSV_FIELDS.join(',')}`
+    const rows = [
+      header,
+      ...items.map((item) => {
+        const timeStr = toCsvCell(formatTimestamp(item.timestamp, { showTime: true }))
+        const code = toCsvCell(item.stockCode ?? prefix)
+        return `${code},${timeStr},${CSV_FIELDS.map((field) => toCsvCell(item[field])).join(',')}`
+      }),
+    ]
+    const blob = new Blob([`\uFEFF${rows.join('\n')}`], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${prefix}-${toYYYYMMDD(startTs)}-${toYYYYMMDD(endTs)}.csv`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  async function exportRangeToCsv() {
+    const bounds = rangeSelectionBounds.value
+    const data = controller.value?.getData() ?? []
+    if (!bounds || data.length === 0) return
+
+    const startTs = data[bounds.start]!.timestamp
+    const endTs = data[bounds.end]!.timestamp
+    const mainStockCode = controller.value?.symbols.peek()?.[0]?.symbol ?? 'unknown'
+    const batchCodes = batchStockCodes.value
+    const total = 1 + batchCodes.length
+    const prefix = batchCodes.length > 0 ? `batch${total}` : mainStockCode
+
+    const allItems: KLineData[] = []
+
+    exportingProgress.value = { current: 0, total, label: '正在准备主品种数据...' }
+
+    // Main stock
+    for (const item of data.slice(bounds.start, bounds.end + 1)) {
+      allItems.push(item)
+    }
+    exportingProgress.value = { current: 1, total, label: '主品种数据已就绪' }
+
+    // Batch stocks (sequential)
+    const fetchFn = dataFetcher.value
+    if (fetchFn && batchCodes.length > 0) {
+      const spec = controller.value?.symbols.peek()?.[0]
+      const startDate = formatTimestamp(startTs)
+      const endDate = formatTimestamp(endTs)
+      const period = spec?.period ?? 'daily'
+      const adjust = spec?.adjust ?? 'none'
+      const exchange = spec?.exchange
+      const source = spec?.source ?? 'gotdx'
+
+      for (let i = 0; i < batchCodes.length; i++) {
+        const code = batchCodes[i]!
+        exportingProgress.value = { current: 1 + i, total, label: `正在获取 ${code}...` }
+        try {
+          const items = await fetchFn(source, {
+            symbol: code,
+            startDate,
+            endDate,
+            period,
+            adjust,
+            exchange,
+          })
+          for (const item of items) {
+            allItems.push(item)
+          }
+        } catch {
+          continue
+        }
+      }
+    }
+
+    exportingProgress.value = { current: total, total, label: '正在生成文件...' }
+    downloadCsv(allItems, prefix, startTs, endTs)
+    exportingProgress.value = { current: total, total, label: '导出完成' }
+  }
+
+    function onScroll() {
+    const cont = containerRef.value
+    if (cont) containerScrollLeft.value = cont.scrollLeft
+  }
+
+  function syncScrollLeft() {
+    const cont = containerRef.value
+    if (cont) containerScrollLeft.value = cont.scrollLeft
+  }
+
+  return {
+    rangeSelection,
+    customStartDate,
+    customEndDate,
+    containerScrollLeft,
+    isRangeSelectActive,
+    rangeSelectionReady,
+    rangeSelectionBounds,
+    rangeSelectionStartLabel,
+    rangeSelectionEndLabel,
+    rangeSelectionOverlayStyle,
+    clearRangeSelection,
+    handleRangePointerDown,
+    handleRangePointerMove,
+    handleRangePointerUp,
+    exportRangeToCsv,
+    exportingProgress,
+    onEdgePointerDown,
+    onEdgePointerMove,
+    onEdgePointerUp,
+    onScroll,
+    syncScrollLeft,
+  }
+}

package/src/composables/useTeleportedPopup.ts

@@ -0,0 +1,33 @@
+import { ref, type Ref } from 'vue'
+
+export function useTeleportedPopup(
+  triggerRef: Ref<HTMLElement | null>,
+  popupRef: Ref<HTMLElement | null>,
+  gap = 4,
+) {
+  const popupStyle = ref<Record<string, string>>({})
+
+  function updatePosition() {
+    const trigger = triggerRef.value
+    if (!trigger) return
+    const rect = trigger.getBoundingClientRect()
+    popupStyle.value = {
+      position: 'fixed',
+      top: `${rect.bottom + gap}px`,
+      left: `${rect.left}px`,
+    }
+  }
+
+  function startPositionSync() {
+    updatePosition()
+    document.addEventListener('scroll', updatePosition, { capture: true, passive: true })
+    window.addEventListener('resize', updatePosition, { passive: true })
+  }
+
+  function stopPositionSync() {
+    document.removeEventListener('scroll', updatePosition, { capture: true })
+    window.removeEventListener('resize', updatePosition)
+  }
+
+  return { popupStyle, updatePosition, startPositionSync, stopPositionSync }
+}

package/src/index.ts

@@ -88,7 +88,7 @@ export function __setControllerFactory(
  *
  * Throws if container is null/undefined (SSR-safe guard).
  */
-export function createChart(opts: ChartMountOptions): ChartController {
+export function createChart(opts: ChartMountOptions): ChartController | Promise<ChartController> {
     if (opts.container == null) {
         throw new Error(
             '[@363045841yyt/klinechart] createChart: `container` is required and must be a non-null HTMLElement',
@@ -147,10 +147,24 @@ export function useChart(
     opts: Omit<ChartMountOptions, 'container'>,
 ): { chart: Ref<ChartController | null> } {
     const chart = shallowRef<ChartController | null>(null)
+    let disposed = false
 
     const mountIfReady = (el: HTMLElement | null): void => {
         if (el == null || chart.value != null) return
-        chart.value = createChart({ ...opts, container: el })
+        const created = createChart({ ...opts, container: el })
+        const applyController = (ctrl: ChartController): void => {
+            if (disposed) {
+                ctrl.dispose()
+                return
+            }
+            chart.value = ctrl
+        }
+
+        if (typeof (created as Promise<ChartController>).then === 'function') {
+            ;(created as Promise<ChartController>).then(applyController)
+        } else {
+            applyController(created as ChartController)
+        }
     }
 
     // Mount synchronously if the ref is already populated (e.g. SFC where the
@@ -167,6 +181,7 @@ export function useChart(
     )
 
     const dispose = (): void => {
+        disposed = true
         stopWatch()
         const ctrl = chart.value
         if (ctrl != null) {
@@ -359,29 +374,40 @@ export const KLineChart = defineComponent({
         const scope = effectScope()
 
         const chart = shallowRef<ChartController | null>(null)
+        let mounted = true
+
+        const applyController = (ctrl: ChartController): void => {
+            if (!mounted) {
+                ctrl.dispose()
+                return
+            }
+            chart.value = ctrl
+            emit('ready', ctrl)
+            // Bridge viewport changes back out as zoomLevelChange.
+            const emitViewport = (): void => {
+                const vp = ctrl.viewport.peek()
+                emit('zoomLevelChange', vp.zoomLevel, vp.kWidth)
+            }
+            emitViewport()
+            const unsub = ctrl.viewport.subscribe(emitViewport)
+            onScopeDispose(unsub)
+        }
 
         onMounted(() => {
             const el = containerRef.value
             if (el == null) return
             scope.run(() => {
-                chart.value = createChart({
+                const created = createChart({
                     container: el,
                     data: props.data,
                     initialZoomLevel: props.initialZoomLevel,
                     zoomLevels: props.zoomLevels,
                     theme: props.theme,
                 })
-                if (chart.value != null) {
-                    emit('ready', chart.value)
-                    // Bridge viewport changes back out as zoomLevelChange.
-                    const ctrl = chart.value
-                    const emitViewport = (): void => {
-                        const vp = ctrl.viewport.peek()
-                        emit('zoomLevelChange', vp.zoomLevel, vp.kWidth)
-                    }
-                    emitViewport()
-                    const unsub = ctrl.viewport.subscribe(emitViewport)
-                    onScopeDispose(unsub)
+                if (typeof (created as Promise<ChartController>).then === 'function') {
+                    ;(created as Promise<ChartController>).then(applyController)
+                } else {
+                    applyController(created as ChartController)
                 }
             })
 
@@ -401,6 +427,7 @@ export const KLineChart = defineComponent({
         })
 
         onUnmounted(() => {
+            mounted = false
             chart.value?.dispose()
             chart.value = null
             scope.stop()

package/src/tools/calcRangeOverlayPixel.ts

@@ -0,0 +1,28 @@
+import type { ChartController } from '@363045841yyt/klinechart-core/controllers'
+
+export interface Bounds {
+  start: number
+  end: number
+}
+
+export function calcRangeOverlayPixel(
+  bounds: Bounds,
+  controller: ChartController,
+  container: HTMLElement,
+  viewport: { scrollLeft: number; plotWidth: number; plotHeight: number },
+): { left: number; width: number; height: number } {
+  const { kWidth: currentKWidth, kGap: currentKGap } = controller.getKWidthKGap()
+  const dpr = controller.getCurrentDpr()
+  const kWidthPx = Math.max(
+    1,
+    Math.round(currentKWidth * dpr) + (Math.round(currentKWidth * dpr) % 2 === 0 ? 1 : 0),
+  )
+  const kGapPx = Math.round(currentKGap * dpr)
+  const unitPx = kWidthPx + kGapPx
+  const startXPx = kGapPx
+
+  const leftBuffer = container.scrollLeft - viewport.scrollLeft
+  const left = leftBuffer + (startXPx + bounds.start * unitPx) / dpr
+  const right = leftBuffer + (startXPx + bounds.end * unitPx + kWidthPx) / dpr
+  return { left, width: right - left, height: viewport.plotHeight }
+}

package/src/tools/getKLineIndexByTimestamp.ts

@@ -0,0 +1,40 @@
+import type { KLineData } from '@363045841yyt/klinechart-core/controllers'
+
+function binarySearch(
+  data: ReadonlyArray<KLineData>,
+  timestamp: number,
+): { low: number; high: number } {
+  let low = 0
+  let high = data.length - 1
+  while (low <= high) {
+    const mid = (low + high) >>> 1
+    const ts = data[mid]!.timestamp
+    if (ts === timestamp) return { low: mid, high: mid }
+    if (ts < timestamp) low = mid + 1
+    else high = mid - 1
+  }
+  return { low, high }
+}
+
+export function getKLineIndexByTimestamp(
+  data: ReadonlyArray<KLineData>,
+  timestamp: number,
+): number | null {
+  if (data.length === 0) return null
+  const { low, high } = binarySearch(data, timestamp)
+  return low === high ? low : null
+}
+
+export function findNearestKLineIndex(
+  data: ReadonlyArray<KLineData>,
+  timestamp: number,
+  direction: 'left' | 'right',
+): number | null {
+  if (data.length === 0) return null
+  const { low, high } = binarySearch(data, timestamp)
+  if (low === high) return low
+  if (direction === 'left') {
+    return high >= 0 ? high : (low < data.length ? low : null)
+  }
+  return low < data.length ? low : high
+}