@363045841yyt/klinechart-core 0.7.12-alpha.1 → 0.7.13

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

@@ -1,10 +1,12 @@
 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'
 
 const ST_UP_COLOR = '#22c55e'
@@ -99,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',
-    paneIdField: 'supertrendPaneId',
     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).updateSuperTrendConfig(params as Partial<SuperTrendSchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createSuperTrendStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    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,11 +1,13 @@
 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'
 
 const TEMA_COLOR = '#d946ef'
 
@@ -120,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',
-    paneIdField: 'temaPaneId',
     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).updateTEMAConfig(params as Partial<TEMASchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createTEMAStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    runtime: { defaultConfig:{period:14,showTEMA:true}, computeKey:'calcTEMAData', compute:(data,c)=>calcTEMAData(data,c.period) },
 })
 class TEMADefinition {
     static rendererFactory = createTEMARendererPlugin

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

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { TRIXRenderState } from '../../indicators/trixState'
 import { createTRIXStateKey } from '../../indicators/trixState'
 import { EMPTY_TRIX_STATE } from '../../indicators/trixState'
@@ -7,6 +8,9 @@ import { createDualSparseVisibleStateComposer } from '../../indicators/visibleSt
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, TRIXSchedulerConfig } from '../../indicators/scheduler'
+import { calcTRIXData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
 
 const TRIX_COLOR = '#e11d48'
 const SIGNAL_COLOR = '#f59e0b'
@@ -144,21 +148,48 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
+export function getTRIXTitleInfo(
+  _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) ?? 15
+  const signalPeriod = (params.signalPeriod as number) ?? 9
+  const state = pluginHost.getSharedState<TRIXRenderState>(createTRIXStateKey(paneId))
+  if (!state) return null
+
+  const values: Array<{ label: string; value: number; color: string }> = []
+
+  if (state.params.showTRIX) {
+    const v = state.series[index]
+    if (v !== undefined) values.push({ label: 'TRIX', value: v, color: TRIX_COLOR })
+  }
+  if (state.params.showSignal) {
+    const v = state.signalSeries[index]
+    if (v !== undefined) values.push({ label: 'Signal', value: v, color: SIGNAL_COLOR })
+  }
+
+  if (values.length === 0) return null
+
+  return {
+    name: 'TRIX',
+    params: [period, signalPeriod],
+    values,
+  }
+}
+
 @Indicator({
     name: 'trix',
     displayName: 'TRIX',
     category: 'oscillator',
-    stateKey: createTRIXStateKey,
     defaultPaneId: 'sub_TRIX',
-    paneIdField: 'trixPaneId',
     scale: { indicatorKey: 'trix', label: 'TRIX', decimals: 6 },
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateTRIXConfig(params as Partial<TRIXSchedulerConfig>, paneId)
-  },
     visibleState: { compose: createDualSparseVisibleStateComposer('trix', EMPTY_TRIX_STATE) },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createTRIXStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    getTitleInfo: getTRIXTitleInfo,
+    runtime: { defaultConfig:{period:15,signalPeriod:9,showTRIX:true,showSignal:true}, computeKey:'calcTRIXData', compute:(data,c)=>calcTRIXData(data,c.period,c.signalPeriod) },
 })
 class TRIXIndicatorDefinition {
     static rendererFactory = createTRIXRendererPlugin

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

@@ -3,10 +3,13 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import type { VMARenderState } from '../../indicators/vmaState'
 import { createVMAStateKey } from '../../indicators/vmaState'
 import { EMPTY_VMA_STATE } from '../../indicators/vmaState'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, VMASchedulerConfig } from '../../indicators/scheduler'
+import { calcVMAData } from '../../indicators/calculators'
 
 const VMA_COLOR = '#0ea5e9'
 
@@ -110,20 +113,38 @@ export function createVMARendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
+export function getVMATitleInfo(
+    _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) ?? 5
+    const state = host.getSharedState<VMARenderState>(createVMAStateKey(paneId))
+    const value = state?.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'VMA',
+        params: [period],
+        values: [{ label: 'VMA', value, color: VMA_COLOR }],
+    }
+}
+
 @Indicator({
     name: 'vma',
     displayName: 'VMA',
     category: 'volume',
-    stateKey: createVMAStateKey,
     defaultPaneId: 'sub_VMA',
-    paneIdField: 'vmaPaneId',
     scale: { indicatorKey: 'vma', label: 'VMA', decimals: 0 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateVMAConfig(params as Partial<VMASchedulerConfig>, paneId)
-    },
+    getTitleInfo: getVMATitleInfo,
     visibleState: { compose: createNonNegativeSparseVisibleStateComposer('vma', EMPTY_VMA_STATE) },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createVMAStateKey(paneId), state as any, 'indicator_scheduler')
+    runtime: {
+        defaultConfig: { period: 5, showVMA: true },
+        computeKey: 'calcVMAData',
+        compute: (data, c) => calcVMAData(data, c.period),
     },
 })
 class VMAIndicatorDefinition {

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

@@ -6,6 +6,10 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createVolumeProfileVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, VolumeProfileSchedulerConfig } from '../../indicators/scheduler'
+import { calcVolumeProfileData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
+import { resolveThemeColors } from '../../../tokens'
 
 const BAR_FILL = 'rgba(99, 102, 241, 0.35)'
 const POC_COLOR = '#f59e0b'
@@ -110,21 +114,49 @@ export function createVolumeProfileRendererPlugin(options: { paneId?: string } =
     }
 }
 
+const VP_POC_COLOR = '#8b5cf6'
+const VP_VAH_COLOR = '#6366f1'
+const VP_VAL_COLOR = '#818cf8'
+
+export function getVolumeProfileTitleInfo(
+  _data: KLineData[],
+  index: number | null,
+  params: Record<string, number | boolean | string>,
+  host: PluginHost,
+  paneId: string,
+): TitleInfo | null {
+  if (index === null) return null
+  const bins = (params.bins as number) ?? 24
+  const state = host.getSharedState<VolumeProfileRenderState>(createVolumeProfileStateKey(paneId))
+  const vp = state?.series
+
+  const values: Array<{ label: string; value: number; color: string }> = []
+  if (vp && vp.bins.length > 0) {
+    if (state.params.showPOC) {
+      values.push({ label: 'POC', value: vp.poc, color: VP_POC_COLOR })
+    }
+    if (state.params.showValueArea) {
+      values.push({ label: 'VAH', value: vp.vah, color: VP_VAH_COLOR })
+      values.push({ label: 'VAL', value: vp.val, color: VP_VAL_COLOR })
+    }
+  }
+
+  return {
+    name: 'VP',
+    params: [bins],
+    values,
+  }
+}
+
 @Indicator({
     name: 'volumeProfile',
     displayName: 'VP',
     category: 'volume',
-    stateKey: createVolumeProfileStateKey,
     defaultPaneId: 'sub_VolumeProfile',
-    paneIdField: 'volumeProfilePaneId',
     scale: { indicatorKey: 'volumeProfile', label: 'VP', decimals: 0 },
+    getTitleInfo: getVolumeProfileTitleInfo,
     visibleState: { compose: createVolumeProfileVisibleStateComposer('volumeProfile', EMPTY_VOLUME_PROFILE_STATE) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateVolumeProfileConfig(params as Partial<VolumeProfileSchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createVolumeProfileStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    runtime: { defaultConfig:{bins:24,lookback:100,valueAreaPercent:70,showPOC:true,showValueArea:true}, computeKey:'calcVolumeProfileData', compute:(data,c)=>calcVolumeProfileData(data,c.bins,c.lookback,c.valueAreaPercent) },
 })
 class VolumeProfileIndicatorDefinition {
     static rendererFactory = createVolumeProfileRendererPlugin

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

@@ -6,6 +6,9 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, VWAPSchedulerConfig } from '../../indicators/scheduler'
+import { calcVWAPData } from '../../indicators/calculators'
+import type { TitleInfo } from '../../indicators/indicatorMetadata'
+import type { KLineData } from '../../../types/price'
 
 const VWAP_COLOR = '#ec4899'
 
@@ -108,20 +111,37 @@ export function createVWAPRendererPlugin(options: { paneId?: string } = {}): Ren
     }
 }
 
+export function getVWAPTitleInfo(
+  _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<VWAPRenderState>(createVWAPStateKey(paneId))
+  const value = state?.series[index]
+  if (value === undefined) return null
+
+  return {
+    name: 'VWAP',
+    params: [],
+    values: [{ label: 'VWAP', value, color: VWAP_COLOR }],
+  }
+}
+
 @Indicator({
     name: 'vwap',
     displayName: 'VWAP',
     category: 'volume',
-    stateKey: createVWAPStateKey,
     defaultPaneId: 'sub_VWAP',
-    paneIdField: 'vwapPaneId',
     visibleState: { compose: createSparseVisibleStateComposer('vwap', EMPTY_VWAP_STATE) },
     scale: { indicatorKey: 'vwap', label: 'VWAP', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateVWAPConfig(params as Partial<VWAPSchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createVWAPStateKey(paneId), state as any, 'indicator_scheduler')
+    getTitleInfo: getVWAPTitleInfo,
+    runtime: {
+        defaultConfig: { sessionResetGapMs: 0, showVWAP: true },
+        computeKey: 'calcVWAPData',
+        compute: (data, c) => calcVWAPData(data, c.sessionResetGapMs),
     },
 })
 class VWAPIndicatorDefinition {

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

@@ -1,11 +1,13 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
+import type { KLineData } from '../../../types/price'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { WMARenderState } from '../../indicators/wmaState'
 import { createWMAStateKey, EMPTY_WMA_STATE } from '../../indicators/wmaState'
 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, WMASchedulerConfig } from '../../indicators/scheduler'
+import { calcWMAData } from '../../indicators/calculators'
 
 const WMA_COLOR = '#10b981'
 
@@ -120,23 +122,40 @@ export function createWMARendererPlugin(options: WMARendererOptions = {}): Rende
     }
 }
 
+export const getWMATitleInfo: 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 = createWMAStateKey(paneId)
+    const state = pluginHost?.getSharedState<WMARenderState>(stateKey)
+    if (!state || state.visibleMin > state.visibleMax) return null
+
+    const value = state.series[index]
+    if (value === undefined) return null
+
+    return {
+        name: 'WMA',
+        params: [state.params.period],
+        values: [{ label: 'WMA', value, color: '#10b981' }],
+    }
+}
+
 @Indicator({
     name: 'wma',
     displayName: 'WMA',
+    getTitleInfo: getWMATitleInfo,
     category: 'main',
-    stateKey: createWMAStateKey,
     defaultPaneId: 'main',
-    paneIdField: 'wmaPaneId',
     allowMainPane: true,
     mainPane: { rendererName: 'wma_main', toActiveConfig: (params, active) => ({ ...params, showWMA: active }) },
     visibleState: { compose: createSparseVisibleStateComposer('wma', EMPTY_WMA_STATE) },
     scale: { indicatorKey: 'wma', label: 'WMA', decimals: 2 },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateWMAConfig(params as Partial<WMASchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createWMAStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    runtime: { defaultConfig:{period:10,showWMA:true}, computeKey:'calcWMAData', compute:(data,c)=>calcWMAData(data,c.period) },
 })
 class WMADefinition {
     static rendererFactory = createWMARendererPlugin

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

@@ -9,6 +9,8 @@ import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/vis
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, WMSRSchedulerConfig } from '../../indicators/scheduler'
 import { createWmsrScaleRendererPlugin } from './scale/wmsr_scale'
+import { calcWMSRData } from '../../indicators/calculators'
+import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
@@ -255,7 +257,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
         },
 
         setConfig() {
-            // no-op: 配置通过 scheduler.updateWMSRConfig() 更新
+            // no-op: 配置通过 scheduler.updateIndicatorConfig() 更新
         },
     }
 }
@@ -292,14 +294,15 @@ function drawWMSRLineWithCanvas2D(
  * 获取 WMSR 标题信息（供 paneTitle 使用）
  */
 export function getWMSRTitleInfo(
-    index: number,
-    period: number,
+    _data: KLineData[],
+    index: number | null,
+    params: Record<string, number | boolean | string>,
     pluginHost: PluginHost,
-    paneId: string = 'sub_WMSR',
-    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<WMSRRenderState>(createWMSRStateKey(paneId))
     if (!state) return null
 
@@ -319,16 +322,14 @@ export function getWMSRTitleInfo(
     name: 'wmsr',
     displayName: 'WMSR',
     category: 'oscillator',
-    stateKey: createWMSRStateKey,
     defaultPaneId: 'sub_WMSR',
-    paneIdField: 'wmsrPaneId',
     visibleState: { compose: createFixedRangeSparseVisibleStateComposer('wmsr', EMPTY_WMSR_STATE) },
     scaleRendererFactory: createWmsrScaleRendererPlugin,
-    updateConfig: (scheduler, params, paneId) => {
-    (scheduler as IndicatorScheduler).updateWMSRConfig(params as Partial<WMSRSchedulerConfig>, paneId)
-  },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createWMSRStateKey(paneId), state as any, 'indicator_scheduler')
+    getTitleInfo: getWMSRTitleInfo,
+    runtime: {
+        defaultConfig: { period: 14, showWMSR: true },
+        computeKey: 'calcWMSRData',
+        compute: (data, c) => calcWMSRData(data, c.period),
     },
 })
 class WMSRIndicatorDefinition {

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

@@ -5,8 +5,9 @@ import type { ZonesRenderState } from '../../indicators/zonesState'
 import { createZonesStateKey, EMPTY_ZONES_STATE } from '../../indicators/zonesState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedUnitVisibleStateComposer } from '../../indicators/visibleStateComposers'
-import { resolveStateKey } from '../../indicators/indicatorMetadata'
+import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, ZonesSchedulerConfig } from '../../indicators/scheduler'
+import { calcZonesData } from '../../indicators/calculators'
 
 function getZonesStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -89,23 +90,42 @@ export function createZonesRendererPlugin(options: { paneId?: string } = {}): Re
     }
 }
 
+export const getZonesTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+    if (index === null) return null
+
+    const stateKey = createZonesStateKey(paneId)
+    const state = host?.getSharedState<ZonesRenderState>(stateKey)
+    if (!state) return null
+
+    const activeZones = state.series.filter(
+        z => z.startIndex <= index && (z.endIndex === undefined || z.endIndex >= index)
+    )
+    if (activeZones.length === 0) return null
+
+    const values: TitleValueItem[] = activeZones.slice(0, 5).map(z => ({
+        label: z.kind,
+        value: z.high,
+        color: z.kind.includes('Bull') ? '#22c55e' : '#ef4444',
+    }))
+
+    return {
+        name: 'Zones',
+        params: [activeZones.length],
+        values,
+    }
+}
+
 @Indicator({
     name: 'zones',
     displayName: 'Zones',
+    getTitleInfo: getZonesTitleInfo,
     category: 'main',
-    stateKey: createZonesStateKey,
     defaultPaneId: 'main',
-    paneIdField: 'zonesPaneId',
     allowMainPane: true,
     mainPane: { rendererName: 'zones_main', toActiveConfig: (params, active) => ({ ...params, showFVG: active, showOB: active, showFilledZones: active }) },
     scale: { indicatorKey: 'zones', label: 'Zones', decimals: 2 },
     visibleState: { compose: createFixedUnitVisibleStateComposer('zones', EMPTY_ZONES_STATE) },
-    updateConfig: (scheduler, params, paneId) => {
-        (scheduler as IndicatorScheduler).updateZonesConfig(params as Partial<ZonesSchedulerConfig>, paneId)
-    },
-    applyResult: (host, state, paneId) => {
-        host.setSharedState(createZonesStateKey(paneId), state as any, 'indicator_scheduler')
-    },
+    runtime: { defaultConfig:{showFVG:true,showOB:true,showFilledZones:true,obLookback:20}, computeKey:'calcZonesData', compute:(data,c)=>calcZonesData(data,c.obLookback,5,2,'close') },
 })
 class ZonesDefinition {
     static rendererFactory = createZonesRendererPlugin