@363045841yyt/klinechart-core 0.7.12 → 0.7.13

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

@@ -7,6 +7,8 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, OBVSchedulerConfig } from '../../indicators/scheduler'
 import { calcOBVData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 
 const OBV_COLOR = '#16a34a'
 
@@ -109,22 +111,34 @@ export function createOBVRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
+export function getOBVTitleInfo(
+  _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<OBVRenderState>(createOBVStateKey(paneId))
+  const value = state?.series[index]
+  if (value === undefined) return null
+
+  return {
+    name: 'OBV',
+    params: [],
+    values: [{ label: 'OBV', value, color: OBV_COLOR }],
+  }
+}
+
 @Indicator({
     name: 'obv',
     displayName: 'OBV',
     category: 'volume',
-    stateKey: createOBVStateKey,
     defaultPaneId: 'sub_OBV',
     visibleState: { compose: createSparseVisibleStateComposer('obv', EMPTY_OBV_STATE) },
     scale: { indicatorKey: 'obv', label: 'OBV', decimals: 0 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('obv', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createOBVStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getOBVTitleInfo,
     runtime: {
-        configKey: 'obv',
         defaultConfig: { showOBV: true },
         computeKey: 'calcOBVData',
         compute: (data, c) => calcOBVData(data),

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

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { ParkinsonRenderState } from '../../indicators/parkinsonState'
 import { createParkinsonStateKey } from '../../indicators/parkinsonState'
 import { EMPTY_PARKINSON_STATE } from '../../indicators/parkinsonState'
@@ -8,6 +9,8 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, ParkinsonSchedulerConfig } from '../../indicators/scheduler'
 import { calcParkinsonData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 
 const PARKINSON_COLOR = '#0891b2'
 
@@ -111,21 +114,36 @@ export function createParkinsonRendererPlugin(options: { paneId?: string } = {})
     }
 }
 
+export function getParkinsonTitleInfo(
+  _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 annualizationFactor = (params.annualizationFactor as number) ?? 252
+  const state = host.getSharedState<ParkinsonRenderState>(createParkinsonStateKey(paneId))
+  const value = state?.series[index]
+  if (value === undefined) return null
+
+  return {
+    name: 'Parkinson',
+    params: [period, annualizationFactor],
+    values: [{ label: 'Parkinson', value, color: PARKINSON_COLOR }],
+  }
+}
+
 @Indicator({
     name: 'parkinson',
     displayName: 'Parkinson',
     category: 'oscillator',
-    stateKey: createParkinsonStateKey,
     defaultPaneId: 'sub_Parkinson',
     scale: { indicatorKey: 'parkinson', label: 'Parkinson', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('parkinson', params, paneId)
-    },
+    getTitleInfo: getParkinsonTitleInfo,
     visibleState: { compose: createNonNegativeSparseVisibleStateComposer('parkinson', EMPTY_PARKINSON_STATE) },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createParkinsonStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'parkinson', defaultConfig:{period:20,annualizationFactor:252,showParkinson:true}, computeKey:'calcParkinsonData', compute:(data,c)=>calcParkinsonData(data,c.period,c.annualizationFactor) },
+    runtime: { defaultConfig:{period:20,annualizationFactor:252,showParkinson:true}, computeKey:'calcParkinsonData', compute:(data,c)=>calcParkinsonData(data,c.period,c.annualizationFactor) },
 })
 class ParkinsonIndicatorDefinition {
     static rendererFactory = createParkinsonRendererPlugin

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

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { PivotRenderState } from '../../indicators/pivotState'
 import { createPivotStateKey, EMPTY_PIVOT_STATE } from '../../indicators/pivotState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, PivotSchedulerConfig } from '../../indicators/scheduler'
 import { createExactRangePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { calcPivotData } from '../../indicators/calculators'
@@ -116,23 +116,60 @@ function drawStep(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
+export const getPivotTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+    if (index === null || index < 0) return null
+
+    const stateKey = createPivotStateKey(paneId)
+    const state = host?.getSharedState<PivotRenderState>(stateKey)
+    if (!state) return null
+
+    const p = state.series[index]
+    if (!p) return null
+
+    const values: TitleValueItem[] = []
+
+    if (state.params.showPP) {
+        values.push({ label: 'PP', value: p.pp, color: PP_COLOR })
+    }
+    if (state.params.showR1) {
+        values.push({ label: 'R1', value: p.r1, color: R_COLOR })
+    }
+    if (state.params.showR2) {
+        values.push({ label: 'R2', value: p.r2, color: R_COLOR })
+    }
+    if (state.params.showR3) {
+        values.push({ label: 'R3', value: p.r3, color: R_COLOR })
+    }
+    if (state.params.showS1) {
+        values.push({ label: 'S1', value: p.s1, color: S_COLOR })
+    }
+    if (state.params.showS2) {
+        values.push({ label: 'S2', value: p.s2, color: S_COLOR })
+    }
+    if (state.params.showS3) {
+        values.push({ label: 'S3', value: p.s3, color: S_COLOR })
+    }
+
+    if (values.length === 0) return null
+
+    return {
+        name: 'Pivot',
+        params: [],
+        values,
+    }
+}
+
 @Indicator({
     name: 'pivot',
     displayName: 'Pivot',
+    getTitleInfo: getPivotTitleInfo,
     category: 'main',
-    stateKey: createPivotStateKey,
     defaultPaneId: 'main',
     allowMainPane: true,
     mainPane: { rendererName: 'pivot_main', toActiveConfig: (params, active) => ({ ...params, showPP: active, showR1: active, showR2: active, showR3: active, showS1: active, showS2: active, showS3: active }) },
     scale: { indicatorKey: 'pivot', label: 'Pivot', decimals: 2 },
     visibleState: { compose: createExactRangePointVisibleStateComposer('pivot', EMPTY_PIVOT_STATE, ['pp', 'r1', 'r2', 'r3', 's1', 's2', 's3']) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('pivot', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createPivotStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'pivot', defaultConfig:{showPP:true,showR1:true,showR2:true,showR3:true,showS1:true,showS2:true,showS3:true}, computeKey:'calcPivotData', compute:(data,c)=>calcPivotData(data) },
+    runtime: { defaultConfig:{showPP:true,showR1:true,showR2:true,showR3:true,showS1:true,showS2:true,showS3:true}, computeKey:'calcPivotData', compute:(data,c)=>calcPivotData(data) },
 })
 class PivotDefinition {
     static rendererFactory = createPivotRendererPlugin

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

@@ -7,6 +7,8 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, PVTSchedulerConfig } from '../../indicators/scheduler'
 import { calcPVTData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 
 const PVT_COLOR = '#a855f7'
 
@@ -109,22 +111,34 @@ export function createPVTRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
+export function getPVTTitleInfo(
+  _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<PVTRenderState>(createPVTStateKey(paneId))
+  const value = state?.series[index]
+  if (value === undefined) return null
+
+  return {
+    name: 'PVT',
+    params: [],
+    values: [{ label: 'PVT', value, color: PVT_COLOR }],
+  }
+}
+
 @Indicator({
     name: 'pvt',
     displayName: 'PVT',
     category: 'volume',
-    stateKey: createPVTStateKey,
     defaultPaneId: 'sub_PVT',
     visibleState: { compose: createSparseVisibleStateComposer('pvt', EMPTY_PVT_STATE) },
     scale: { indicatorKey: 'pvt', label: 'PVT', decimals: 0 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('pvt', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createPVTStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getPVTTitleInfo,
     runtime: {
-        configKey: 'pvt',
         defaultConfig: { showPVT: true },
         computeKey: 'calcPVTData',
         compute: (data, c) => calcPVTData(data),

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

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { ROCRenderState } from '../../indicators/rocState'
 import { createROCStateKey, EMPTY_ROC_STATE } from '../../indicators/rocState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -7,6 +8,8 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, ROCSchedulerConfig } from '../../indicators/scheduler'
 import { calcROCData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
 
 const ROC_COLOR = '#0ea5e9'
 
@@ -129,22 +132,35 @@ export function createROCRendererPlugin(options: ROCRendererOptions = {}): Rende
     }
 }
 
+export function getROCTitleInfo(
+  _data: KLineData[],
+  index: number | null,
+  params: Record<string, number | boolean | string>,
+  pluginHost: PluginHost,
+  paneId: string,
+): TitleInfo | null {
+  if (index === null) return null
+  const period = (params.period as number) ?? 12
+  const state = pluginHost.getSharedState<ROCRenderState>(createROCStateKey(paneId))
+  const value = state?.series[index]
+  if (value === undefined) return null
+
+  return {
+    name: 'ROC',
+    params: [period],
+    values: [{ label: 'ROC', value, color: ROC_COLOR }],
+  }
+}
+
 @Indicator({
     name: 'roc',
     displayName: 'ROC',
     category: 'oscillator',
-    stateKey: createROCStateKey,
     defaultPaneId: 'sub_ROC',
     visibleState: { compose: createSparseVisibleStateComposer('roc', EMPTY_ROC_STATE) },
     scale: { indicatorKey: 'roc', label: 'ROC', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateIndicatorConfig('roc', params, paneId)
-  },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createROCStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getROCTitleInfo,
     runtime: {
-        configKey: 'roc',
         defaultConfig: { period: 12, showROC: true },
         computeKey: 'calcROCData',
         compute: (data, c) => calcROCData(data, c.period),

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

@@ -10,6 +10,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, RSISchedulerConfig } from '../../indicators/scheduler'
 import { createRsiScaleRendererPlugin } from './scale/rsi_scale'
 import { calcRSIData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -351,16 +352,17 @@ export function drawRSILinesWithCanvas2D(
 }
 
 export function getRSITitleInfo(
-    index: number,
-    period1: number,
-    period2: number,
-    period3: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_RSI',
-    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 period1 = (params.period1 as number) ?? 6
+    const period2 = (params.period2 as number) ?? 12
+    const period3 = (params.period3 as number) ?? 24
+    const colors = resolveThemeColors('light')
     const stateKey = createRSIStateKey(paneId)
     const state = pluginHost.getSharedState<RSIRenderState>(stateKey)
 
@@ -388,17 +390,11 @@ export function getRSITitleInfo(
     name: 'rsi',
     displayName: 'RSI',
     category: 'oscillator',
-    stateKey: createRSIStateKey,
     defaultPaneId: 'sub_RSI',
     visibleState: { compose: createFixedRangeRecordVisibleStateComposer('rsi', EMPTY_RSI_STATE) },
     scaleRendererFactory: createRsiScaleRendererPlugin,
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('rsi', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createRSIStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'rsi', defaultConfig:{period1:6,period2:12,period3:24,showRSI1:true,showRSI2:true,showRSI3:true}, computeKey:'calcRSIData', compute:(data,c)=>{const p=[c.period1,c.period2,c.period3];const s=[c.showRSI1,c.showRSI2,c.showRSI3];const r:Record<number,(number|undefined)[]>={};for(let i=0;i<3;i++){if(s[i])r[p[i]]=calcRSIData(data,p[i])}return r} },
+    getTitleInfo: getRSITitleInfo,
+    runtime: { defaultConfig:{period1:6,period2:12,period3:24,showRSI1:true,showRSI2:true,showRSI3:true}, computeKey:'calcRSIData', compute:(data,c)=>{const p=[c.period1,c.period2,c.period3];const s=[c.showRSI1,c.showRSI2,c.showRSI3];const r:Record<number,(number|undefined)[]>={};for(let i=0;i<3;i++){if(s[i])r[p[i]]=calcRSIData(data,p[i])}return r} },
 })
 class RSIIndicatorDefinition {
     static rendererFactory = createRSIRendererPlugin

package/src/engine/renderers/Indicator/sar.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 { SARRenderState } from '../../indicators/sarState'
 import { createSARStateKey, EMPTY_SAR_STATE } from '../../indicators/sarState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, SARSchedulerConfig } from '../../indicators/scheduler'
 import { calcSARData } from '../../indicators/calculators'
 import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -98,23 +99,38 @@ export function createSARRendererPlugin(options: SARRendererOptions = {}): Rende
     }
 }
 
+export function getSARTitleInfo(
+    _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<SARRenderState>(createSARStateKey(paneId))
+    const p = state?.series[index]
+    if (!p) return null
+
+    return {
+        name: 'SAR',
+        params: [(params.step as number) ?? 0.02, (params.maxStep as number) ?? 0.2],
+        values: [
+            { label: 'SAR', value: p.value, color: p.trend === 'up' ? '#22c55e' : '#ef4444' },
+        ],
+    }
+}
+
 @Indicator({
     name: 'sar',
     displayName: 'SAR',
+    getTitleInfo: getSARTitleInfo,
     category: 'main',
-    stateKey: createSARStateKey,
     defaultPaneId: 'main',
     allowMainPane: true,
     mainPane: { rendererName: 'sar_main', toActiveConfig: (params, active) => ({ ...params, showSAR: active }) },
     scale: { indicatorKey: 'sar', label: 'SAR', decimals: 4 },
     visibleState: { compose: createValuePointVisibleStateComposer('sar', EMPTY_SAR_STATE, ['value']) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('sar', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createSARStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'sar', defaultConfig:{step:0.02,maxStep:0.2,showSAR:true}, computeKey:'calcSARData', compute:(data,c)=>calcSARData(data,c.step,c.maxStep) },
+    runtime: { defaultConfig:{step:0.02,maxStep:0.2,showSAR:true}, computeKey:'calcSARData', compute:(data,c)=>calcSARData(data,c.step,c.maxStep) },
 })
 class SARDefinition {
     static rendererFactory = createSARRendererPlugin

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

@@ -10,6 +10,7 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, STOCHSchedulerConfig } from '../../indicators/scheduler'
 import { createStochScaleRendererPlugin } from './scale/stoch_scale'
 import { calcSTOCHData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -319,15 +320,16 @@ function drawSTOCHLinesWithCanvas2D(
  * 获取 STOCH 标题信息（供 paneTitle 使用）
  */
 export function getSTOCHTitleInfo(
-    index: number,
-    n: number,
-    m: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_STOCH',
-    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 n = (params.n as number) ?? 9
+    const m = (params.m as number) ?? 3
+    const colors = resolveThemeColors('light')
     const state = pluginHost.getSharedState<STOCHRenderState>(createSTOCHStateKey(paneId))
     if (!state) return null
 
@@ -351,17 +353,11 @@ export function getSTOCHTitleInfo(
     name: 'stoch',
     displayName: 'STOCH',
     category: 'oscillator',
-    stateKey: createSTOCHStateKey,
     defaultPaneId: 'sub_STOCH',
     visibleState: { compose: createFixedRangePointVisibleStateComposer('stoch', EMPTY_STOCH_STATE, ['k', 'd'] as const) },
     scaleRendererFactory: createStochScaleRendererPlugin,
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateIndicatorConfig('stoch', params, paneId)
-  },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createSTOCHStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'stoch', defaultConfig:{n:9,m:3,showK:true,showD:true}, computeKey:'calcSTOCHData', compute:(data,c)=>calcSTOCHData(data,c.n,c.m) },
+    getTitleInfo: getSTOCHTitleInfo,
+    runtime: { defaultConfig:{n:9,m:3,showK:true,showD:true}, computeKey:'calcSTOCHData', compute:(data,c)=>calcSTOCHData(data,c.n,c.m) },
 })
 class STOCHIndicatorDefinition {
     static rendererFactory = createSTOCHRendererPlugin

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

@@ -8,6 +8,8 @@ import { createFixedUnitVisibleStateComposer } from '../../indicators/visibleSta
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, StructureSchedulerConfig } from '../../indicators/scheduler'
 import { calcStructureData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 
 const LABEL_FONT = '11px sans-serif'
 
@@ -111,23 +113,43 @@ export function createStructureRendererPlugin(options: { paneId?: string } = {})
     }
 }
 
+export function getStructureTitleInfo(
+  _data: KLineData[],
+  index: number | null,
+  params: Record<string, number | boolean | string>,
+  host: PluginHost,
+  paneId: string,
+): TitleInfo | null {
+  if (index === null) return null
+  const leftWindow = (params.leftWindow as number) ?? 5
+  const rightWindow = (params.rightWindow as number) ?? 2
+  const colors = resolveThemeColors('light')
+  const state = host.getSharedState<StructureRenderState>(createStructureStateKey(paneId))
+
+  const values: Array<{ label: string; value: number; color: string }> = []
+  if (state && state.series.swings.length > 0) {
+    values.push({ label: 'Swings', value: state.series.swings.length, color: colors.structure.hh })
+    values.push({ label: 'Events', value: state.series.events.length, color: colors.structure.choch })
+  }
+
+  return {
+    name: 'Structure',
+    params: [leftWindow, rightWindow],
+    values,
+  }
+}
+
 @Indicator({
     name: 'structure',
     displayName: 'Structure',
     category: 'sub',
-    stateKey: createStructureStateKey,
     defaultPaneId: 'sub_Structure',
     allowMainPane: true,
     mainPane: { rendererName: 'structure_main', toActiveConfig: (params, active) => ({ ...params, showSwingLabels: active, showBOS: active, showCHOCH: active }) },
     scale: { indicatorKey: 'structure', label: 'Structure', decimals: 2 },
+    getTitleInfo: getStructureTitleInfo,
     visibleState: { compose: createFixedUnitVisibleStateComposer('structure', EMPTY_STRUCTURE_STATE) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('structure', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createStructureStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'structure', defaultConfig:{leftWindow:5,rightWindow:2,breakoutSource:'close',showSwingLabels:true,showBOS:true,showCHOCH:true,showProvisional:true}, computeKey:'calcStructureData', compute:(data,c)=>calcStructureData(data,c.leftWindow,c.rightWindow,c.breakoutSource) },
+    runtime: { defaultConfig:{leftWindow:5,rightWindow:2,breakoutSource:'close',showSwingLabels:true,showBOS:true,showCHOCH:true,showProvisional:true}, computeKey:'calcStructureData', compute:(data,c)=>calcStructureData(data,c.leftWindow,c.rightWindow,c.breakoutSource) },
 })
 class StructureIndicatorDefinition {
     static rendererFactory = createStructureRendererPlugin

package/src/engine/renderers/Indicator/supertrend.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 { SuperTrendRenderState } from '../../indicators/supertrendState'
 import { createSuperTrendStateKey, EMPTY_SUPERTREND_STATE } from '../../indicators/supertrendState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, SuperTrendSchedulerConfig } from '../../indicators/scheduler'
 import { calcSuperTrendData } from '../../indicators/calculators'
 import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -100,23 +101,38 @@ export function createSuperTrendRendererPlugin(options: SuperTrendRendererOption
     }
 }
 
+export function getSuperTrendTitleInfo(
+    _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<SuperTrendRenderState>(createSuperTrendStateKey(paneId))
+    const p = state?.series[index]
+    if (!p) return null
+
+    return {
+        name: 'SuperTrend',
+        params: [(params.atrPeriod as number) ?? 10, (params.multiplier as number) ?? 3],
+        values: [
+            { label: p.trend === 'up' ? 'Up' : 'Down', value: p.value, color: p.trend === 'up' ? '#22c55e' : '#ef4444' },
+        ],
+    }
+}
+
 @Indicator({
     name: 'supertrend',
     displayName: 'SuperTrend',
+    getTitleInfo: getSuperTrendTitleInfo,
     category: 'oscillator',
-    stateKey: createSuperTrendStateKey,
     defaultPaneId: 'sub_SuperTrend',
     allowMainPane: true,
     mainPane: { rendererName: 'supertrend_main', toActiveConfig: (params, active) => ({ ...params, showSuperTrend: active }) },
     scale: { indicatorKey: 'supertrend', label: 'SuperTrend', decimals: 2 },
     visibleState: { compose: createValuePointVisibleStateComposer('supertrend', EMPTY_SUPERTREND_STATE, ['value']) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('supertrend', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createSuperTrendStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'supertrend', defaultConfig:{atrPeriod:10,multiplier:3,showSuperTrend:true}, computeKey:'calcSuperTrendData', compute:(data,c)=>calcSuperTrendData(data,c.atrPeriod,c.multiplier) },
+    runtime: { defaultConfig:{atrPeriod:10,multiplier:3,showSuperTrend:true}, computeKey:'calcSuperTrendData', compute:(data,c)=>calcSuperTrendData(data,c.atrPeriod,c.multiplier) },
 })
 class SuperTrendIndicatorDefinition {
     static rendererFactory = createSuperTrendRendererPlugin

package/src/engine/renderers/Indicator/tema.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 { TEMARenderState } from '../../indicators/temaState'
 import { createTEMAStateKey, EMPTY_TEMA_STATE } from '../../indicators/temaState'
 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, TEMASchedulerConfig } from '../../indicators/scheduler'
 import { calcTEMAData } from '../../indicators/calculators'
@@ -121,23 +122,40 @@ export function createTEMARendererPlugin(options: TEMARendererOptions = {}): Ren
     }
 }
 
+export const getTEMATitleInfo: 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 = createTEMAStateKey(paneId)
+    const state = pluginHost?.getSharedState<TEMARenderState>(stateKey)
+    if (!state || state.visibleMin > state.visibleMax) return null
+
+    const value = state.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'TEMA',
+        params: [state.params.period],
+        values: [{ label: 'TEMA', value, color: '#d946ef' }],
+    }
+}
+
 @Indicator({
     name: 'tema',
     displayName: 'TEMA',
+    getTitleInfo: getTEMATitleInfo,
     category: 'main',
-    stateKey: createTEMAStateKey,
     defaultPaneId: 'main',
     allowMainPane: true,
     mainPane: { rendererName: 'tema_main', toActiveConfig: (params, active) => ({ ...params, showTEMA: active }) },
     visibleState: { compose: createSparseVisibleStateComposer('tema', EMPTY_TEMA_STATE) },
     scale: { indicatorKey: 'tema', label: 'TEMA', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateIndicatorConfig('tema', params, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createTEMAStateKey(paneId), state as any, 'indicator_scheduler')
-    },
-    runtime: { configKey:'tema', defaultConfig:{period:14,showTEMA:true}, computeKey:'calcTEMAData', compute:(data,c)=>calcTEMAData(data,c.period) },
+    runtime: { defaultConfig:{period:14,showTEMA:true}, computeKey:'calcTEMAData', compute:(data,c)=>calcTEMAData(data,c.period) },
 })
 class TEMADefinition {
     static rendererFactory = createTEMARendererPlugin