@363045841yyt/klinechart-core 0.7.3

package/src/engine/renderers/Indicator/sar.ts

@@ -0,0 +1,113 @@
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import { RENDERER_PRIORITY } from '../../../plugin'
+import type { SARRenderState } from '../../indicators/sarState'
+import { createSARStateKey } from '../../indicators/sarState'
+import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+const SAR_UP_COLOR = '#22c55e'
+const SAR_DOWN_COLOR = '#ef4444'
+const DOT_RADIUS = 1.5
+const TAU = Math.PI * 2
+
+export interface SARRendererOptions {
+    paneId?: string
+}
+
+function getSARStateKey(host: PluginHost | null, paneId: string): string | null {
+    const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
+    if (!scheduler) {
+        console.warn('[SARRenderer] Scheduler not available via service locator')
+        return null
+    }
+    const meta = scheduler.getIndicatorMetadata('sar')
+    if (!meta) {
+        console.warn('[SARRenderer] Indicator metadata for \'sar\' not found, skip rendering')
+        return null
+    }
+    return resolveStateKey(meta.stateKey, paneId)
+}
+
+export function createSARRendererPlugin(options: SARRendererOptions = {}): RendererPluginWithHost {
+    const { paneId = 'main' } = options
+    let pluginHost: PluginHost | null = null
+
+    function resolveKey(): string | null {
+        return getSARStateKey(pluginHost, paneId)
+    }
+
+    return {
+        name: `sar_${paneId}`,
+        version: '1.0.0',
+        description: 'Parabolic SAR 渲染器（绿色 = 多头止损 / 红色 = 空头止损）',
+        debugName: 'SAR',
+        paneId,
+        priority: RENDERER_PRIORITY.MAIN,
+
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
+        getDeclaredNamespaces() {
+            const key = resolveKey()
+            return key ? [key] : []
+        },
+
+        draw(context: RenderContext) {
+            const { ctx, pane, range, scrollLeft, kLineCenters } = context
+
+            const stateKey = resolveKey()
+            if (!stateKey) return
+            const state = pluginHost?.getSharedState<SARRenderState>(stateKey)
+            if (!state || !state.params.showSAR || state.visibleMin > state.visibleMax) return
+
+            const { series } = state
+
+            ctx.save()
+            ctx.translate(-scrollLeft, 0)
+
+            const drawEnd = Math.min(range.end, series.length)
+            for (let i = range.start; i < drawEnd; i++) {
+                const point = series[i]
+                if (point === undefined) continue
+                const centerX = kLineCenters[i - range.start]
+                if (centerX === undefined) continue
+                const y = pane.yAxis.priceToY(point.value)
+                ctx.fillStyle = point.trend === 'up' ? SAR_UP_COLOR : SAR_DOWN_COLOR
+                ctx.beginPath()
+                ctx.arc(centerX, y, DOT_RADIUS, 0, TAU)
+                ctx.fill()
+            }
+
+            ctx.restore()
+        },
+
+        getConfig() {
+            const stateKey = resolveKey()
+            if (!stateKey) return {}
+            const state = pluginHost?.getSharedState<SARRenderState>(stateKey)
+            return state?.params ?? {}
+        },
+
+        setConfig() {
+            // no-op
+        },
+    }
+}
+
+@Indicator({
+    name: 'sar',
+    displayName: 'SAR',
+    category: 'main',
+    stateKey: createSARStateKey,
+    defaultPaneId: 'main',
+    paneIdField: 'sarPaneId',
+    allowMainPane: true,
+    applyResult: (host, state, paneId) => {
+        host.setSharedState(createSARStateKey(paneId), state as any, 'indicator_scheduler')
+    },
+})
+class SARDefinition {
+    static rendererFactory = createSARRendererPlugin
+}

package/src/engine/renderers/Indicator/scale/atr_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createAtrScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'atr',
+        label: 'ATR',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/cci_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createCciScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'cci',
+        label: 'CCI',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/fastk_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createFastkScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'fastk',
+        label: 'FASTK',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/indicator_scale.ts

@@ -0,0 +1,204 @@
+import type { RendererPluginWithHost, PluginHost, RenderContext, BaseIndicatorState } from '../../../../plugin'
+import { RENDERER_PRIORITY } from '../../../../plugin'
+import { createIndicatorStateKey } from '../../../../plugin/stateKeys'
+import { getColors, type ThemeColors } from '../../../theme/colors'
+import { getFont, setCanvasFont } from '../../../theme/fonts'
+import { calculateValueTickPositions, type ScaleType } from '../../../utils/tickPosition'
+import { drawCrosshairPriceLabel } from '../../../../utils/kLineDraw/axis'
+import { roundToPhysicalPixel, alignToPhysicalPixelCenter } from '../../../draw/pixelAlign'
+
+interface IndicatorScaleRenderState extends BaseIndicatorState {
+    valueMin: number
+    valueMax: number
+}
+
+// Canvas 状态缓存，避免读取 ctx 属性（读取会触发颜色序列化，很慢）
+interface CanvasState {
+    font?: string
+    fillStyle?: string
+    textAlign?: string
+    textBaseline?: string
+}
+const ctxState = new WeakMap<CanvasRenderingContext2D, CanvasState>()
+
+function getCanvasState(ctx: CanvasRenderingContext2D): CanvasState {
+    let s = ctxState.get(ctx)
+    if (!s) {
+        s = {}
+        ctxState.set(ctx, s)
+    }
+    return s
+}
+
+export interface IndicatorScaleRendererOptions {
+    axisWidth: number
+    paneId: string
+    indicatorKey: string
+    label: string
+    decimals?: number
+    yPaddingPx?: number
+    scaleType?: ScaleType
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+    formatTickLabel?: (value: number) => string
+    formatCrosshairLabel?: (value: number) => string
+}
+
+export interface DrawScaleTicksOptions {
+    ctx: CanvasRenderingContext2D
+    dpr: number
+    axisWidth: number
+    height: number
+    paddingTop: number
+    paddingBottom: number
+    valueMin: number
+    valueMax: number
+    isMain: boolean
+    decimals?: number
+    hideEdgeTicks?: boolean
+    scaleType?: ScaleType
+    formatLabel?: (value: number) => string
+}
+
+const BASELINE_MIDDLE = 'middle' as const
+const ALIGN_CENTER = 'center' as const
+
+export function drawScaleTicks(options: DrawScaleTicksOptions & { colors: ThemeColors }): void {
+    const {
+        ctx,
+        dpr,
+        axisWidth,
+        height,
+        paddingTop,
+        paddingBottom,
+        valueMin,
+        valueMax,
+        isMain,
+        decimals = 2,
+        hideEdgeTicks = true,
+        scaleType = 'linear',
+        formatLabel,
+    } = options
+
+    ctx.clearRect(0, 0, axisWidth, height)
+
+    const font = getFont(12)
+    setCanvasFont(ctx, font)
+    ctx.textBaseline = BASELINE_MIDDLE
+    ctx.textAlign = ALIGN_CENTER
+    ctx.fillStyle = options.colors.TEXT.SECONDARY
+
+    const centerX = axisWidth / 2
+    const centerXPx = roundToPhysicalPixel(centerX, dpr)
+
+    const positions = calculateValueTickPositions({
+        height,
+        paddingTop,
+        paddingBottom,
+        isMain,
+        hideEdgeTicks,
+        valueMin,
+        valueMax,
+        scaleType,
+    })
+
+    // 提前提取 format 函数，避免循环内重复判断
+    const format = formatLabel ?? ((v: number) => v.toFixed(decimals))
+
+    for (let i = 0; i < positions.length; i++) {
+        const { y, value } = positions[i]!
+        ctx.fillText(format(value), centerXPx, alignToPhysicalPixelCenter(y, dpr))
+    }
+}
+
+export function createIndicatorScaleRendererPlugin(options: IndicatorScaleRendererOptions): RendererPluginWithHost {
+    const {
+        axisWidth,
+        paneId,
+        indicatorKey,
+        label,
+        decimals = 2,
+        yPaddingPx = 0,
+        scaleType = 'linear',
+        getCrosshair,
+        formatTickLabel,
+        formatCrosshairLabel,
+    } = options
+    const stateKey = createIndicatorStateKey(indicatorKey, paneId)
+    let pluginHost: PluginHost | null = null
+
+    return {
+        name: `${indicatorKey}Scale_${paneId}`,
+        version: '1.0.0',
+        description: `${label} 刻度渲染器`,
+        debugName: `${label}刻度`,
+        paneId,
+        priority: RENDERER_PRIORITY.INDICATOR_SCALE,
+        layer: 'overlay',
+
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
+        draw(context: RenderContext) {
+            const { yAxisCtx, pane, dpr } = context
+            if (!yAxisCtx || !pluginHost) return
+
+            const state = pluginHost.getSharedState<IndicatorScaleRenderState>(stateKey)
+            if (!state) return
+
+            const effectiveScaleType: ScaleType = pane.yAxis.getScaleType() ?? scaleType
+            const effectiveAxisWidth = yAxisCtx.canvas ? (yAxisCtx.canvas.width / dpr) : axisWidth
+            const colors = getColors(context.theme)
+
+            const displayRange = pane.yAxis.getDisplayRange({
+                minPrice: state.valueMin,
+                maxPrice: state.valueMax,
+            })
+
+            drawScaleTicks({
+                colors,
+                ctx: yAxisCtx,
+                dpr,
+                axisWidth: effectiveAxisWidth,
+                height: pane.height,
+                paddingTop: pane.yAxis.getPaddingTop(),
+                paddingBottom: pane.yAxis.getPaddingBottom(),
+                valueMin: displayRange.minPrice,
+                valueMax: displayRange.maxPrice,
+                isMain: false,
+                decimals,
+                hideEdgeTicks: false,
+                scaleType: effectiveScaleType,
+                formatLabel: formatTickLabel,
+            })
+
+            const crosshair = getCrosshair?.()
+            if (!crosshair || crosshair.activePaneId !== pane.id) return
+
+            const localY = crosshair.y - pane.top
+            const paddingTop = pane.yAxis.getPaddingTop()
+            const paddingBottom = pane.yAxis.getPaddingBottom()
+            const yStart = paddingTop
+            const yEnd = Math.max(paddingTop, pane.height - paddingBottom)
+            const viewH = Math.max(1, yEnd - yStart)
+            const clampedY = Math.min(Math.max(localY, yStart), yEnd)
+            const t = (clampedY - yStart) / viewH
+            const displayPrice = displayRange.maxPrice - t * (displayRange.maxPrice - displayRange.minPrice)
+
+            drawCrosshairPriceLabel(yAxisCtx, {
+                x: 0,
+                y: 0,
+                width: effectiveAxisWidth,
+                height: pane.height,
+                crosshairY: localY,
+                priceRange: displayRange,
+                yPaddingPx,
+                dpr,
+                fontSize: 12,
+                priceOffset: 0,
+                price: displayPrice,
+                formatPrice: formatCrosshairLabel,
+            })
+        },
+    }
+}

package/src/engine/renderers/Indicator/scale/kst_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createKstScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'kst',
+        label: 'KST',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/macd_scale.ts

@@ -0,0 +1,22 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+/**
+ * 创建 MACD 刻度渲染器插件
+ */
+export function createMacdScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'macd',
+        label: 'MACD',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/mom_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createMomScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'mom',
+        label: 'MOM',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/rsi_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createRsiScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'rsi',
+        label: 'RSI',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/stoch_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createStochScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'stoch',
+        label: 'STOCH',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}

package/src/engine/renderers/Indicator/scale/volume_scale.ts

@@ -0,0 +1,26 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+const YI = 1e8
+
+/**
+ * 创建成交量刻度渲染器插件
+ */
+export function createVolumeScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'volume',
+        label: 'VOL',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+        formatTickLabel: (value) => `${(value / YI).toFixed(2)}B`,
+        formatCrosshairLabel: (value) => `${(value / YI).toFixed(2)}B`,
+    })
+}

package/src/engine/renderers/Indicator/scale/wmsr_scale.ts

@@ -0,0 +1,19 @@
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { createIndicatorScaleRendererPlugin } from './indicator_scale'
+
+export function createWmsrScaleRendererPlugin(options: {
+    axisWidth: number
+    paneId: string
+    yPaddingPx?: number
+    getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPluginWithHost {
+    return createIndicatorScaleRendererPlugin({
+        axisWidth: options.axisWidth,
+        paneId: options.paneId,
+        indicatorKey: 'wmsr',
+        label: 'WMSR',
+        decimals: 2,
+        yPaddingPx: options.yPaddingPx,
+        getCrosshair: options.getCrosshair,
+    })
+}