@363045841yyt/klinechart-core 0.7.12 → 0.7.13

package/src/engine/indicators/indicatorDefinitionRegistry.ts

@@ -6,15 +6,18 @@ import type {
     ScaleRendererFactory,
     IndicatorConfigUpdater,
     IndicatorRuntimeDescriptor,
+    GetTitleInfoFn,
 } from './indicatorMetadata'
 import type { PluginHost } from '../../plugin'
+import { createIndicatorStateKey } from '../../plugin/stateKeys'
+import { resolveStateKey } from './indicatorMetadata'
 
 export type IndicatorDefinitionConfig<T = unknown> = {
     name: string
     aliases?: readonly string[]
     displayName: string
     category: IndicatorCategory
-    stateKey: StateKey
+    stateKey?: StateKey
     defaultPaneId: string
     paneIdField?: string
     allowMainPane?: boolean
@@ -26,6 +29,7 @@ export type IndicatorDefinitionConfig<T = unknown> = {
     visibleState?: IndicatorMetadata['visibleState']
     runtime?: IndicatorRuntimeDescriptor
     semantic?: IndicatorMetadata<T>['semantic']
+    getTitleInfo?: GetTitleInfoFn
 }
 
 type IndicatorDefinitionClass = {
@@ -75,12 +79,41 @@ export function Indicator(config: IndicatorDefinitionConfig) {
             const normalizedName = normalizeIndicatorId(config.name)
             removeAliasesFor(normalizedName)
 
+            // 自动生成 stateKey
+            const stateKey: StateKey = config.stateKey ?? (
+                config.category === 'main'
+                    ? createIndicatorStateKey(config.name, 'main')
+                    : (paneId: string) => createIndicatorStateKey(config.name, paneId)
+            )
+
+            // runtime.configKey 默认等于 name
+            const runtime = config.runtime && {
+                ...config.runtime,
+                configKey: config.runtime.configKey ?? config.name,
+            }
+
+            // 有 runtime 时自动生成 updateConfig / applyResult
+            const updateConfig = runtime
+                ? (config.updateConfig ?? ((scheduler: any, params: any, paneId?: string) => {
+                    scheduler.updateIndicatorConfig(config.name, params, paneId)
+                }))
+                : config.updateConfig
+
+            const applyResult = runtime
+                ? (config.applyResult ?? ((host: any, state: any, paneId: string) => {
+                    host.setSharedState(resolveStateKey(stateKey, paneId), state as any, 'indicator_scheduler')
+                }))
+                : config.applyResult
+
             indicatorDefinitions.set(normalizedName, {
                 ...config,
+                stateKey,
+                runtime,
+                updateConfig,
+                applyResult,
                 rendererFactory,
                 paneIdField: config.paneIdField,
                 allowMainPane: config.allowMainPane,
-                applyResult: config.applyResult,
             })
             indexAlias(config.name, normalizedName)
             indexAlias(config.displayName, normalizedName)

package/src/engine/indicators/indicatorMetadata.ts

@@ -86,6 +86,35 @@ export type IndicatorVisibleStateComposer = (
     context: IndicatorVisibleStateComposeContext,
 ) => unknown
 
+/**
+ * 标题值项：颜色 + 数值 + 标签
+ */
+export interface TitleValueItem {
+    label: string
+    value: number
+    color: string
+}
+
+/**
+ * 标题信息：指标名称 + 参数 + 各线实时值
+ */
+export interface TitleInfo {
+    name: string
+    params?: number[]
+    values?: TitleValueItem[]
+}
+
+/**
+ * 获取标题信息的回调类型
+ */
+export type GetTitleInfoFn = (
+    data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+) => TitleInfo | null
+
 /**
  * 指标计算描述符
  * 描述每个指标的计算逻辑，供 IndicatorRuntime 驱动
@@ -95,8 +124,8 @@ export type IndicatorVisibleStateComposer = (
  * - 自定义运行时指标：无 computeKey，仅主线程 inline 运行
  */
 export interface IndicatorRuntimeDescriptor<C = any> {
-    /** configSnapshot 中的 key，通常等于 name（如 'macd'） */
-    configKey: string
+    /** configSnapshot 中的 key，默认等于 name（如 'macd'） */
+    configKey?: string
     /** paneId 在 configSnapshot 中的 key（如 'macdPaneId'），可省略 */
     paneIdKey?: string
     /** 默认配置值 */
@@ -224,6 +253,14 @@ export interface IndicatorMetadata<T = unknown> {
     semantic?: {
         apply?: (chart: IndicatorSemanticChartAdapter, indicator: T) => void
     }
+
+    /**
+     * 标题信息获取回调（决定 pane 标题栏显示内容）
+     * - 副图指标：由 paneTitle 渲染器调用
+     * - 主图指标：由 mainIndicatorLegend 渲染器调用
+     * 未提供时 fallback 到 displayName
+     */
+    getTitleInfo?: GetTitleInfoFn
 }
 
 /**

package/src/engine/indicators/indicatorRuntime.ts

@@ -124,13 +124,14 @@ export class IndicatorRuntime {
     }
 
     addDescriptor(d: IndicatorRuntimeDescriptor): void {
-        if (this.descriptorMap.has(d.configKey as string)) return
-        this.descriptorMap.set(d.configKey as string, d)
+        const configKey = d.configKey ?? 'unknown'
+        if (this.descriptorMap.has(configKey)) return
+        this.descriptorMap.set(configKey, d)
         const def = typeof d.defaultConfig === 'function'
             ? (d.defaultConfig as () => any)()
             : d.defaultConfig
-        this.configMap.set(d.configKey as string, { ...def })
-        this.dirtyFlags.set(d.configKey as string, true)
+        this.configMap.set(configKey, { ...def })
+        this.dirtyFlags.set(configKey, true)
     }
 
     setData(data: KLineData[], version: number): void {

package/src/engine/indicators/scheduler.ts

@@ -109,7 +109,7 @@ export type {
 export class IndicatorScheduler {
     private pluginHost: PluginHost | null = null
     private visibleRange: VisibleRange = { start: 0, end: 0 }
-    private activeMainIndicators: Set<string> = new Set()
+    private activeMainIndicators = new Map<string, Record<string, number | boolean | string>>()
 
     // 版本控制
     private dataVersion = 0
@@ -172,7 +172,7 @@ export class IndicatorScheduler {
             this.worker.postMessage({
                 type: 'addDescriptor',
                 descriptor: {
-                    configKey: rt.configKey,
+                    configKey: rt.configKey ?? meta.name,
                     paneIdKey: rt.paneIdKey,
                     defaultConfig: typeof rt.defaultConfig === 'function' ? (rt.defaultConfig as () => any)() : rt.defaultConfig,
                     computeKey: rt.computeKey,
@@ -468,7 +468,7 @@ export class IndicatorScheduler {
                     this.worker!.postMessage({
                         type: 'addDescriptor',
                         descriptor: {
-                            configKey: rt.configKey,
+                            configKey: rt.configKey ?? meta.name,
                             paneIdKey: rt.paneIdKey,
                             defaultConfig: typeof rt.defaultConfig === 'function' ? (rt.defaultConfig as () => any)() : rt.defaultConfig,
                             computeKey: rt.computeKey,
@@ -703,13 +703,14 @@ export class IndicatorScheduler {
             return
         }
         const rt = meta.runtime
+        const configKey = rt.configKey ?? indicatorId
         // Update paneId if provided
         if (paneId !== undefined) {
             this.paneIdOverrides.set(indicatorId, paneId)
         }
         // Merge config
-        ;(this.configSnapshot as any)[rt.configKey] = {
-            ...((this.configSnapshot as any)[rt.configKey] ?? {}),
+        ;(this.configSnapshot as any)[configKey] = {
+            ...((this.configSnapshot as any)[configKey] ?? {}),
             ...config,
         }
         this.configVersion++
@@ -719,8 +720,10 @@ export class IndicatorScheduler {
     /**
      * 设置当前激活的主图指标
      */
-    setActiveMainIndicators(indicators: string[]): void {
-        this.activeMainIndicators = new Set(indicators.map(i => i.toLowerCase()))
+    setActiveMainIndicators(indicators: Array<{ id: string; params: Record<string, number | boolean | string> }>): void {
+        this.activeMainIndicators = new Map(
+            indicators.map(i => [i.id.toLowerCase(), i.params])
+        )
     }
 
     /**
@@ -731,12 +734,33 @@ export class IndicatorScheduler {
         const result = computeMainIndicatorPriceRange(
             this.latestResult,
             this.visibleRange,
-            this.activeMainIndicators,
+            new Set(this.activeMainIndicators.keys()),
             (indicatorId) => this.registry.get(indicatorId),
         )
         return result
     }
 
+    /**
+     * 获取所有已注册的主图指标
+     */
+    getMainIndicators(): readonly IndicatorMetadata[] {
+        return this.registry.getMainIndicators()
+    }
+
+    /**
+     * 检查主图指标是否激活
+     */
+    isMainIndicatorActive(indicatorId: string): boolean {
+        return this.activeMainIndicators.has(indicatorId.toLowerCase())
+    }
+
+    /**
+     * 获取主图指标当前参数
+     */
+    getMainIndicatorParams(indicatorId: string): Record<string, number | boolean | string> {
+        return this.activeMainIndicators.get(indicatorId.toLowerCase()) ?? {}
+    }
+
     /**
      * 强制全部重算
      */

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

@@ -10,6 +10,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, ATRSchedulerConfig } from '../../indicators/scheduler'
 import { createAtrScaleRendererPlugin } from './scale/atr_scale'
 import { calcATRData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -209,11 +210,14 @@ function drawWithCanvas2D(
  * 获取 ATR 标题信息（供 paneTitle 使用）
  */
 export function getATRTitleInfo(
-    index: number,
-    period: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_ATR',
+    paneId: string,
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
+    if (index === null) return null
+    const period = (params.period as number) ?? 14
     const state = pluginHost.getSharedState<ATRRenderState>(createATRStateKey(paneId))
     if (!state) return null
 
@@ -233,18 +237,11 @@ export function getATRTitleInfo(
     name: 'atr',
     displayName: 'ATR',
     category: 'oscillator',
-    stateKey: createATRStateKey,
     defaultPaneId: 'sub_ATR',
     scaleRendererFactory: createAtrScaleRendererPlugin,
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateIndicatorConfig('atr', params, paneId)
-  },
     visibleState: { compose: createNonNegativeSparseVisibleStateComposer('atr', EMPTY_ATR_STATE) },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createATRStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getATRTitleInfo,
     runtime: {
-        configKey: 'atr',
         defaultConfig: { period: 14, showATR: true },
         computeKey: 'calcATRData',
         compute: (data, c) => calcATRData(data, c.period),

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

@@ -6,7 +6,7 @@ import { resolveThemeColors } from '../../../tokens'
 import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer } from '../../indicators/indicatorMetadata'
+import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer, GetTitleInfoFn, TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'
 import type { BOLLSchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 import { calcBOLLData } from '../../indicators/calculators'
 
@@ -110,7 +110,7 @@ function buildPriceCacheKey(
     return `${range.start}|${range.end}|${dataLength}|${lastTimestamp}|${period}`
 }
 
-function getBOLLStateKey(host: PluginHost | null): string | null {
+export function getBOLLStateKey(host: PluginHost | null): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
     if (!scheduler) {
         console.warn('[BOLLRenderer] Scheduler not available via service locator')
@@ -155,11 +155,37 @@ const composeBOLLRenderState: IndicatorRenderStateComposer = (bundle, range, tim
     }
 }
 
+export const getBOLLTitleInfo: GetTitleInfoFn = (
+    _data: KLineData[],
+    index: number | null,
+    _params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    _paneId: string,
+): TitleInfo | null => {
+    if (index === null) return null
+
+    const stateKey = getBOLLStateKey(pluginHost)
+    if (!stateKey) return null
+
+    const state = pluginHost?.getSharedState<BOLLRenderState>(stateKey)
+    if (!state || state.visibleMin > state.visibleMax) return null
+
+    const bollPoint = state.series[index]
+    if (!bollPoint) return null
+
+    const values: TitleValueItem[] = [
+        { label: 'UP', value: bollPoint.upper, color: '#C83C3C' },
+        { label: 'MID', value: bollPoint.middle, color: '#5A8CFF' },
+        { label: 'DN', value: bollPoint.lower, color: '#32AA3C' },
+    ]
+
+    return { name: 'BOLL', params: [state.params.period, state.params.multiplier], values }
+}
+
 @Indicator({
     name: 'boll',
     displayName: 'BOLL',
     category: 'main',
-    stateKey: BOLL_STATE_KEY,
     defaultPaneId: 'main',
     mainPane: {
         rendererName: 'boll',
@@ -169,9 +195,6 @@ const composeBOLLRenderState: IndicatorRenderStateComposer = (bundle, range, tim
         computePriceRange: computeBOLLPriceRange,
         composeRenderState: composeBOLLRenderState,
     },
-    updateConfig: (scheduler, params) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('boll', params)
-    },
     semantic: {
         apply: (chart, indicator) => {
             const params = (indicator as { params?: { period?: number; multiplier?: number } }).params
@@ -181,10 +204,8 @@ const composeBOLLRenderState: IndicatorRenderStateComposer = (bundle, range, tim
             })
         },
     },
-    applyResult: (host, state, _paneId) => {
-        host.setSharedState(BOLL_STATE_KEY, state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'boll', defaultConfig:{period:20,multiplier:2,showUpper:true,showMiddle:true,showLower:true,showBand:true}, computeKey:'calcBOLLData', compute:(data,c)=>calcBOLLData(data,c.period,c.multiplier) },
+    runtime: { defaultConfig:{period:20,multiplier:2,showUpper:true,showMiddle:true,showLower:true,showBand:true}, computeKey:'calcBOLLData', compute:(data,c)=>calcBOLLData(data,c.period,c.multiplier) },
+    getTitleInfo: getBOLLTitleInfo,
 })
 class BOLLDefinition {
     static rendererFactory = createBOLLRendererPlugin

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

@@ -9,6 +9,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, CCISchedulerConfig } from '../../indicators/scheduler'
 import { createCciScaleRendererPlugin } from './scale/cci_scale'
 import { calcCCIData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -240,14 +241,15 @@ function drawCCILineWithCanvas2D(
  * 获取 CCI 标题信息（供 paneTitle 使用）
  */
 export function getCCITitleInfo(
-    index: number,
-    period: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_CCI',
-    theme: 'light' | 'dark' = 'light',
-    isAsiaMarket?: boolean
+    paneId: string,
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    const colors = resolveThemeColors(theme, isAsiaMarket)
+    if (index === null) return null
+    const period = (params.period as number) ?? 14
+    const colors = resolveThemeColors('light')
     const state = pluginHost.getSharedState<CCIRenderState>(createCCIStateKey(paneId))
     if (!state) return null
 
@@ -267,18 +269,11 @@ export function getCCITitleInfo(
     name: 'cci',
     displayName: 'CCI',
     category: 'oscillator',
-    stateKey: createCCIStateKey,
     defaultPaneId: 'sub_CCI',
     scaleRendererFactory: createCciScaleRendererPlugin,
     visibleState: { compose: createCCIVisibleStateComposer('cci', EMPTY_CCI_STATE) },
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateIndicatorConfig('cci', params, paneId)
-  },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createCCIStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getCCITitleInfo,
     runtime: {
-        configKey: 'cci',
         defaultConfig: { period: 14, showCCI: true },
         computeKey: 'calcCCIData',
         compute: (data, c) => calcCCIData(data, c.period),

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

@@ -2,6 +2,8 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { ChaikinVolRenderState } from '../../indicators/chaikinVolState'
 import { createChaikinVolStateKey, EMPTY_CHAIKIN_VOL_STATE } from '../../indicators/chaikinVolState'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -124,22 +126,36 @@ export function createChaikinVolRendererPlugin(options: { paneId?: string } = {}
     }
 }
 
+export function getChaikinVolTitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+    const emaPeriod = (params.emaPeriod as number) ?? 10
+    const rocPeriod = (params.rocPeriod as number) ?? 10
+    const state = host.getSharedState<ChaikinVolRenderState>(createChaikinVolStateKey(paneId))
+    const value = state?.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'ChaikinVol',
+        params: [emaPeriod, rocPeriod],
+        values: [{ label: 'ChaikinVol', value, color: CHAIKIN_VOL_COLOR }],
+    }
+}
+
 @Indicator({
     name: 'chaikinVol',
     displayName: 'ChaikinVol',
     category: 'oscillator',
-    stateKey: createChaikinVolStateKey,
     defaultPaneId: 'sub_ChaikinVol',
     visibleState: { compose: createSparseVisibleStateComposer('chaikinVol', EMPTY_CHAIKIN_VOL_STATE) },
     scale: { indicatorKey: 'chaikinVol', label: 'ChaikinVol', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('chaikinVol', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createChaikinVolStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getChaikinVolTitleInfo,
     runtime: {
-        configKey: 'chaikinVol',
         defaultConfig: { emaPeriod: 10, rocPeriod: 10, showChaikinVol: true },
         computeKey: 'calcChaikinVolData',
         compute: (data, c) => calcChaikinVolData(data, c.emaPeriod, c.rocPeriod),

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

@@ -2,6 +2,8 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { CMFRenderState } from '../../indicators/cmfState'
 import { createCMFStateKey, EMPTY_CMF_STATE } from '../../indicators/cmfState'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -123,22 +125,35 @@ export function createCMFRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
+export function getCMFTitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+    const period = (params.period as number) ?? 20
+    const state = host.getSharedState<CMFRenderState>(createCMFStateKey(paneId))
+    const value = state?.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'CMF',
+        params: [period],
+        values: [{ label: 'CMF', value, color: CMF_COLOR }],
+    }
+}
+
 @Indicator({
     name: 'cmf',
     displayName: 'CMF',
     category: 'volume',
-    stateKey: createCMFStateKey,
     defaultPaneId: 'sub_CMF',
     visibleState: { compose: createFixedRangeSparseVisibleStateComposer('cmf', EMPTY_CMF_STATE) },
     scale: { indicatorKey: 'cmf', label: 'CMF', decimals: 4 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('cmf', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createCMFStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getCMFTitleInfo,
     runtime: {
-        configKey: 'cmf',
         defaultConfig: { period: 20, showCMF: true },
         computeKey: 'calcCMFData',
         compute: (data, c) => calcCMFData(data, c.period),

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

@@ -1,9 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { DEMARenderState } from '../../indicators/demaState'
 import { createDEMAStateKey, EMPTY_DEMA_STATE } from '../../indicators/demaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, DEMASchedulerConfig } from '../../indicators/scheduler'
 import { calcDEMAData } from '../../indicators/calculators'
@@ -121,23 +122,40 @@ export function createDEMARendererPlugin(options: DEMARendererOptions = {}): Ren
     }
 }
 
+export const getDEMATitleInfo: GetTitleInfoFn = (
+    _data: KLineData[],
+    index: number | null,
+    _params: Record<string, number | boolean | string>,
+    pluginHost: PluginHost,
+    paneId: string,
+): TitleInfo | null => {
+    if (index === null) return null
+
+    const stateKey = createDEMAStateKey(paneId)
+    const state = pluginHost?.getSharedState<DEMARenderState>(stateKey)
+    if (!state || state.visibleMin > state.visibleMax) return null
+
+    const value = state.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'DEMA',
+        params: [state.params.period],
+        values: [{ label: 'DEMA', value, color: '#6366f1' }],
+    }
+}
+
 @Indicator({
     name: 'dema',
     displayName: 'DEMA',
+    getTitleInfo: getDEMATitleInfo,
     category: 'main',
-    stateKey: createDEMAStateKey,
     defaultPaneId: 'main',
     allowMainPane: true,
     mainPane: { rendererName: 'dema_main', toActiveConfig: (params, active) => ({ ...params, showDEMA: active }) },
     visibleState: { compose: createSparseVisibleStateComposer('dema', EMPTY_DEMA_STATE) },
     scale: { indicatorKey: 'dema', label: 'DEMA', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('dema', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createDEMAStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'dema', defaultConfig:{period:14,showDEMA:true}, computeKey:'calcDEMAData', compute:(data,c)=>calcDEMAData(data,c.period) },
+    runtime: { defaultConfig:{period:14,showDEMA:true}, computeKey:'calcDEMAData', compute:(data,c)=>calcDEMAData(data,c.period) },
 })
 class DEMADefinition {
     static rendererFactory = createDEMARendererPlugin

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

@@ -1,9 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
 import type { DonchianRenderState } from '../../indicators/donchianState'
 import { createDonchianStateKey, EMPTY_DONCHIAN_STATE } from '../../indicators/donchianState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, DonchianSchedulerConfig } from '../../indicators/scheduler'
 import { calcDonchianData } from '../../indicators/calculators'
 import { createBandVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -123,23 +124,40 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
+export function getDonchianTitleInfo(
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
+    host: PluginHost,
+    paneId: string,
+): TitleInfo | null {
+    if (index === null) return null
+    const state = host.getSharedState<DonchianRenderState>(createDonchianStateKey(paneId))
+    const p = state?.series[index]
+    if (!p) return null
+
+    return {
+        name: 'Donchian',
+        params: [(params.period as number) ?? 20],
+        values: [
+            { label: 'Upper', value: p.upper, color: '#0891b2' },
+            { label: 'Mid', value: p.middle, color: '#94a3b8' },
+            { label: 'Lower', value: p.lower, color: '#0891b2' },
+        ],
+    }
+}
+
 @Indicator({
     name: 'donchian',
     displayName: 'Donchian',
+    getTitleInfo: getDonchianTitleInfo,
     category: 'main',
-    stateKey: createDonchianStateKey,
     defaultPaneId: 'main',
     allowMainPane: true,
     mainPane: { rendererName: 'donchian_main', toActiveConfig: (params, active) => ({ ...params, showUpper: active, showMiddle: active, showLower: active }) },
     scale: { indicatorKey: 'donchian', label: 'Donchian', decimals: 2 },
     visibleState: { compose: createBandVisibleStateComposer('donchian', EMPTY_DONCHIAN_STATE, 'lower', 'upper') },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('donchian', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createDonchianStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'donchian', defaultConfig:{period:20,showUpper:true,showMiddle:true,showLower:true}, computeKey:'calcDonchianData', compute:(data,c)=>calcDonchianData(data,c.period) },
+    runtime: { defaultConfig:{period:20,showUpper:true,showMiddle:true,showLower:true}, computeKey:'calcDonchianData', compute:(data,c)=>calcDonchianData(data,c.period) },
 })
 class DonchianDefinition {
     static rendererFactory = createDonchianRendererPlugin