@363045841yyt/klinechart-core 0.7.9 → 0.7.10

package/src/engine/renderers/Indicator/__tests__/createSubIndicatorRenderer.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { RendererPluginWithHost } from '../../../../plugin'
+import { IndicatorRegistry } from '../../../indicators/indicatorRegistry'
+import { getBuiltinIndicatorDefinitions } from '../../../indicators/registerBuiltins'
+import type { IndicatorMetadata } from '../../../indicators/indicatorMetadata'
+import { createSubIndicatorRenderer } from '../index'
+
+function createRenderer(name: string): RendererPluginWithHost {
+  return {
+    name,
+    version: '1.0.0',
+    description: 'test renderer',
+    paneId: 'test',
+    draw: vi.fn(),
+  }
+}
+
+describe('createSubIndicatorRenderer', () => {
+  it('creates renderers through registered indicator metadata', () => {
+    const rendererFactory = vi.fn(() => createRenderer('custom_renderer'))
+    const definition: IndicatorMetadata = {
+      name: 'customIndicator',
+      displayName: 'CUSTOM',
+      category: 'sub',
+      stateKey: (paneId: string) => `indicator:custom:${paneId}`,
+      defaultPaneId: 'sub_CUSTOM',
+      rendererFactory,
+    }
+
+    const renderer = createSubIndicatorRenderer({
+      indicatorId: 'CUSTOM',
+      paneId: 'sub_CUSTOM',
+      definition,
+      params: { period: 12 },
+    })
+
+    expect(renderer.name).toBe('custom_renderer')
+    expect(rendererFactory).toHaveBeenCalledWith({
+      indicatorId: 'CUSTOM',
+      paneId: 'sub_CUSTOM',
+      params: { period: 12 },
+    })
+  })
+
+  it('supports legacy uppercase ids through registry normalization', () => {
+    const registry = new IndicatorRegistry()
+    for (const definition of getBuiltinIndicatorDefinitions()) {
+      registry.register(definition)
+    }
+
+    const definition = registry.getRequired('VOLUME_PROFILE')
+    const renderer = createSubIndicatorRenderer({
+      indicatorId: 'VOLUME_PROFILE',
+      paneId: 'VOLUME_PROFILE_0',
+      definition,
+    })
+
+    expect(definition.name).toBe('volumeProfile')
+    expect(renderer.name).toBe('volumeProfile_VOLUME_PROFILE_0')
+  })
+})

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

@@ -3,9 +3,12 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import type { ATRRenderState } from '../../indicators/atrState'
 import { createATRStateKey } from '../../indicators/atrState'
+import { EMPTY_ATR_STATE } from '../../indicators/atrState'
+import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, ATRSchedulerConfig } from '../../indicators/scheduler'
+import { createAtrScaleRendererPlugin } from './scale/atr_scale'
 
 type LinePoint = { x: number; y: number }
 
@@ -232,6 +235,11 @@ export function getATRTitleInfo(
     stateKey: createATRStateKey,
     defaultPaneId: 'sub_ATR',
     paneIdField: 'atrPaneId',
+    scaleRendererFactory: createAtrScaleRendererPlugin,
+    updateConfig: (scheduler, params, paneId) => {
+    (scheduler as IndicatorScheduler).updateATRConfig(params as Partial<ATRSchedulerConfig>, paneId)
+  },
+    visibleState: { compose: createNonNegativeSparseVisibleStateComposer('atr', EMPTY_ATR_STATE) },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createATRStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -6,7 +6,8 @@ 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 { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer } from '../../indicators/indicatorMetadata'
+import type { BOLLSchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 
 type LinePoint = { x: number; y: number }
 
@@ -122,12 +123,63 @@ function getBOLLStateKey(host: PluginHost | null): string | null {
     return resolveStateKey(meta.stateKey)
 }
 
+const computeBOLLPriceRange: IndicatorPriceRangeComputer = (bundle, range) => {
+    const series = bundle.boll.series
+    if (series.length === 0 || range.start >= series.length) {
+        return null
+    }
+
+    let min = Infinity
+    let max = -Infinity
+    const end = Math.min(range.end, series.length)
+    for (let i = range.start; i < end; i++) {
+        const p = series[i]
+        if (p) {
+            min = Math.min(min, p.upper, p.middle, p.lower)
+            max = Math.max(max, p.upper, p.middle, p.lower)
+        }
+    }
+
+    return Number.isFinite(min) && Number.isFinite(max) ? { min, max } : null
+}
+
+const composeBOLLRenderState: IndicatorRenderStateComposer = (bundle, range, timestamp): BOLLRenderState => {
+    const priceRange = computeBOLLPriceRange(bundle, range) ?? { min: Infinity, max: -Infinity }
+    return {
+        timestamp,
+        series: bundle.boll.series,
+        params: bundle.boll.params,
+        visibleMin: priceRange.min,
+        visibleMax: priceRange.max,
+    }
+}
+
 @Indicator({
     name: 'boll',
     displayName: 'BOLL',
     category: 'main',
     stateKey: BOLL_STATE_KEY,
     defaultPaneId: 'main',
+    mainPane: {
+        rendererName: 'boll',
+        toActiveConfig: (params, active) => active
+            ? params
+            : { ...params, showUpper: false, showMiddle: false, showLower: false, showBand: false },
+        computePriceRange: computeBOLLPriceRange,
+        composeRenderState: composeBOLLRenderState,
+    },
+    updateConfig: (scheduler, params) => {
+        (scheduler as IndicatorScheduler).updateBOLLConfig(params as Partial<BOLLSchedulerConfig>)
+    },
+    semantic: {
+        apply: (chart, indicator) => {
+            const params = (indicator as { params?: { period?: number; multiplier?: number } }).params
+            chart.updateRendererConfig('boll', {
+                period: params?.period || 20,
+                multiplier: params?.multiplier || 2,
+            })
+        },
+    },
     applyResult: (host, state, _paneId) => {
         host.setSharedState(BOLL_STATE_KEY, state as any, 'indicator_scheduler')
     },

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

@@ -2,10 +2,12 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import type { CCIRenderState } from '../../indicators/cciState'
-import { createCCIStateKey } from '../../indicators/cciState'
+import { createCCIStateKey, EMPTY_CCI_STATE } from '../../indicators/cciState'
+import { createCCIVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, CCISchedulerConfig } from '../../indicators/scheduler'
+import { createCciScaleRendererPlugin } from './scale/cci_scale'
 
 type LinePoint = { x: number; y: number }
 
@@ -267,6 +269,11 @@ export function getCCITitleInfo(
     stateKey: createCCIStateKey,
     defaultPaneId: 'sub_CCI',
     paneIdField: 'cciPaneId',
+    scaleRendererFactory: createCciScaleRendererPlugin,
+    visibleState: { compose: createCCIVisibleStateComposer('cci', EMPTY_CCI_STATE) },
+    updateConfig: (scheduler, params, paneId) => {
+    (scheduler as IndicatorScheduler).updateCCIConfig(params as Partial<CCISchedulerConfig>, paneId)
+  },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createCCIStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { ChaikinVolRenderState } from '../../indicators/chaikinVolState'
-import { createChaikinVolStateKey } from '../../indicators/chaikinVolState'
+import { createChaikinVolStateKey, EMPTY_CHAIKIN_VOL_STATE } from '../../indicators/chaikinVolState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import type { IndicatorScheduler, ChaikinVolSchedulerConfig } from '../../indicators/scheduler'
 
 const CHAIKIN_VOL_COLOR = '#f59e0b'
 
@@ -129,6 +130,11 @@ export function createChaikinVolRendererPlugin(options: { paneId?: string } = {}
     stateKey: createChaikinVolStateKey,
     defaultPaneId: 'sub_ChaikinVol',
     paneIdField: 'chaikinVolPaneId',
+    visibleState: { compose: createSparseVisibleStateComposer('chaikinVol', EMPTY_CHAIKIN_VOL_STATE) },
+    scale: { indicatorKey: 'chaikinVol', label: 'ChaikinVol', decimals: 2 },
+    updateConfig: (scheduler, params, paneId) => {
+        (scheduler as IndicatorScheduler).updateChaikinVolConfig(params as Partial<ChaikinVolSchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createChaikinVolStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { CMFRenderState } from '../../indicators/cmfState'
-import { createCMFStateKey } from '../../indicators/cmfState'
+import { createCMFStateKey, EMPTY_CMF_STATE } from '../../indicators/cmfState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, CMFSchedulerConfig } from '../../indicators/scheduler'
 
 const CMF_COLOR = '#06b6d4'
 
@@ -128,6 +129,11 @@ export function createCMFRendererPlugin(options: { paneId?: string } = {}): Rend
     stateKey: createCMFStateKey,
     defaultPaneId: 'sub_CMF',
     paneIdField: 'cmfPaneId',
+    visibleState: { compose: createFixedRangeSparseVisibleStateComposer('cmf', EMPTY_CMF_STATE) },
+    scale: { indicatorKey: 'cmf', label: 'CMF', decimals: 4 },
+    updateConfig: (scheduler, params, paneId) => {
+        (scheduler as IndicatorScheduler).updateCMFConfig(params as Partial<CMFSchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createCMFStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { DEMARenderState } from '../../indicators/demaState'
-import { createDEMAStateKey } from '../../indicators/demaState'
+import { createDEMAStateKey, EMPTY_DEMA_STATE } from '../../indicators/demaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import type { IndicatorScheduler, DEMASchedulerConfig } from '../../indicators/scheduler'
 
 const DEMA_COLOR = '#6366f1'
 
@@ -127,6 +128,12 @@ export function createDEMARendererPlugin(options: DEMARendererOptions = {}): Ren
     defaultPaneId: 'main',
     paneIdField: 'demaPaneId',
     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).updateDEMAConfig(params as Partial<DEMASchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createDEMAStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { DonchianRenderState } from '../../indicators/donchianState'
-import { createDonchianStateKey } from '../../indicators/donchianState'
+import { createDonchianStateKey, EMPTY_DONCHIAN_STATE } from '../../indicators/donchianState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, DonchianSchedulerConfig } from '../../indicators/scheduler'
+import { createBandVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
 const DONCHIAN_UPPER_COLOR = '#0891b2'
 const DONCHIAN_MIDDLE_COLOR = '#94a3b8'
@@ -129,6 +130,12 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     defaultPaneId: 'main',
     paneIdField: 'donchianPaneId',
     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).updateDonchianConfig(params as Partial<DonchianSchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createDonchianStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -6,7 +6,8 @@ import { resolveThemeColors } from '../../../tokens'
 import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer } from '../../indicators/indicatorMetadata'
+import type { ENESchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 
 type LinePoint = { x: number; y: number }
 
@@ -106,6 +107,37 @@ function getENEStateKey(host: PluginHost | null): string | null {
     return resolveStateKey(meta.stateKey)
 }
 
+const computeENEPriceRange: IndicatorPriceRangeComputer = (bundle, range) => {
+    const series = bundle.ene.series
+    if (series.length === 0 || range.start >= series.length) {
+        return null
+    }
+
+    let min = Infinity
+    let max = -Infinity
+    const end = Math.min(range.end, series.length)
+    for (let i = range.start; i < end; i++) {
+        const p = series[i]
+        if (p) {
+            min = Math.min(min, p.upper, p.middle, p.lower)
+            max = Math.max(max, p.upper, p.middle, p.lower)
+        }
+    }
+
+    return Number.isFinite(min) && Number.isFinite(max) ? { min, max } : null
+}
+
+const composeENERenderState: IndicatorRenderStateComposer = (bundle, range, timestamp): ENERenderState => {
+    const priceRange = computeENEPriceRange(bundle, range) ?? { min: Infinity, max: -Infinity }
+    return {
+        timestamp,
+        series: bundle.ene.series,
+        params: bundle.ene.params,
+        visibleMin: priceRange.min,
+        visibleMax: priceRange.max,
+    }
+}
+
 export function createENERendererPlugin(): RendererPluginWithHost {
     let pluginHost: PluginHost | null = null
 
@@ -262,6 +294,24 @@ export function createENERendererPlugin(): RendererPluginWithHost {
     category: 'main',
     stateKey: ENE_STATE_KEY,
     defaultPaneId: 'main',
+    mainPane: {
+        rendererName: 'ene',
+        toActiveConfig: (params, active) => active ? params : null,
+        computePriceRange: computeENEPriceRange,
+        composeRenderState: composeENERenderState,
+    },
+    updateConfig: (scheduler, params) => {
+        (scheduler as IndicatorScheduler).updateENEConfig(params as Partial<ENESchedulerConfig>)
+    },
+    semantic: {
+        apply: (chart, indicator) => {
+            const params = (indicator as { params?: { period?: number; deviation?: number } }).params
+            chart.updateRendererConfig('ene', {
+                period: params?.period || 10,
+                deviation: params?.deviation || 11,
+            })
+        },
+    },
     applyResult: (host, state, _paneId) => {
         host.setSharedState(ENE_STATE_KEY, state as any, 'indicator_scheduler')
     },

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

@@ -6,7 +6,8 @@ import { resolveThemeColors } from '../../../tokens'
 import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorPriceRangeComputer, IndicatorRenderStateComposer } from '../../indicators/indicatorMetadata'
+import type { EXPMASchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 
 type LinePoint = { x: number; y: number }
 
@@ -46,6 +47,37 @@ function getEXPMAStateKey(host: PluginHost | null): string | null {
     return resolveStateKey(meta.stateKey)
 }
 
+const computeEXPMAPriceRange: IndicatorPriceRangeComputer = (bundle, range) => {
+    const series = bundle.expma.series
+    if (series.length === 0 || range.start >= series.length) {
+        return null
+    }
+
+    let min = Infinity
+    let max = -Infinity
+    const end = Math.min(range.end, series.length)
+    for (let i = range.start; i < end; i++) {
+        const p = series[i]
+        if (p) {
+            min = Math.min(min, p.fast, p.slow)
+            max = Math.max(max, p.fast, p.slow)
+        }
+    }
+
+    return Number.isFinite(min) && Number.isFinite(max) ? { min, max } : null
+}
+
+const composeEXPMARenderState: IndicatorRenderStateComposer = (bundle, range, timestamp): EXPMARenderState => {
+    const priceRange = computeEXPMAPriceRange(bundle, range) ?? { min: Infinity, max: -Infinity }
+    return {
+        timestamp,
+        series: bundle.expma.series,
+        params: bundle.expma.params,
+        visibleMin: priceRange.min,
+        visibleMax: priceRange.max,
+    }
+}
+
 export function createEXPMARendererPlugin(): RendererPluginWithHost {
     let pluginHost: PluginHost | null = null
     let cachedKey = ''
@@ -188,6 +220,24 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
     category: 'main',
     stateKey: EXPMA_STATE_KEY,
     defaultPaneId: 'main',
+    mainPane: {
+        rendererName: 'expma',
+        toActiveConfig: (params, active) => active ? params : null,
+        computePriceRange: computeEXPMAPriceRange,
+        composeRenderState: composeEXPMARenderState,
+    },
+    updateConfig: (scheduler, params) => {
+        (scheduler as IndicatorScheduler).updateEXPMAConfig(params as Partial<EXPMASchedulerConfig>)
+    },
+    semantic: {
+        apply: (chart, indicator) => {
+            const params = (indicator as { params?: { fastPeriod?: number; slowPeriod?: number } }).params
+            chart.updateRendererConfig('expma', {
+                fastPeriod: params?.fastPeriod || 12,
+                slowPeriod: params?.slowPeriod || 50,
+            })
+        },
+    },
     applyResult: (host, state, _paneId) => {
         host.setSharedState(EXPMA_STATE_KEY, state as any, 'indicator_scheduler')
     },

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

@@ -3,10 +3,12 @@ import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import type { FASTKRenderState } from '../../indicators/fastkState'
-import { createFASTKStateKey } from '../../indicators/fastkState'
+import { createFASTKStateKey, EMPTY_FASTK_STATE } from '../../indicators/fastkState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
+import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, FASTKSchedulerConfig } from '../../indicators/scheduler'
+import { createFastkScaleRendererPlugin } from './scale/fastk_scale'
 
 type LinePoint = { x: number; y: number }
 
@@ -308,6 +310,11 @@ export function getFASTKTitleInfo(
     stateKey: createFASTKStateKey,
     defaultPaneId: 'sub_FASTK',
     paneIdField: 'fastkPaneId',
+    visibleState: { compose: createFixedRangeSparseVisibleStateComposer('fastk', EMPTY_FASTK_STATE) },
+    scaleRendererFactory: createFastkScaleRendererPlugin,
+    updateConfig: (scheduler, params, paneId) => {
+    (scheduler as IndicatorScheduler).updateFASTKConfig(params as Partial<FASTKSchedulerConfig>, paneId)
+  },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createFASTKStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { FibRenderState } from '../../indicators/fibState'
-import { createFibStateKey } from '../../indicators/fibState'
+import { createFibStateKey, EMPTY_FIB_STATE } from '../../indicators/fibState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, FibSchedulerConfig } from '../../indicators/scheduler'
+import { createExactRangePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
 const FIB_COLORS = {
     high: '#94a3b8',
@@ -132,6 +133,12 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     defaultPaneId: 'main',
     paneIdField: 'fibPaneId',
     allowMainPane: true,
+    mainPane: { rendererName: 'fib_main', toActiveConfig: (params, active) => ({ ...params, showLevels: active }) },
+    scale: { indicatorKey: 'fib', label: 'Fib', decimals: 4 },
+    visibleState: { compose: createExactRangePointVisibleStateComposer('fib', EMPTY_FIB_STATE, ['low', 'high']) },
+    updateConfig: (scheduler, params, paneId) => {
+        (scheduler as IndicatorScheduler).updateFibConfig(params as Partial<FibSchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createFibStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { HMARenderState } from '../../indicators/hmaState'
-import { createHMAStateKey } from '../../indicators/hmaState'
+import { createHMAStateKey, EMPTY_HMA_STATE } from '../../indicators/hmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import type { IndicatorScheduler, HMASchedulerConfig } from '../../indicators/scheduler'
 
 const HMA_COLOR = '#f43f5e'
 
@@ -127,6 +128,12 @@ export function createHMARendererPlugin(options: HMARendererOptions = {}): Rende
     defaultPaneId: 'main',
     paneIdField: 'hmaPaneId',
     allowMainPane: true,
+    mainPane: { rendererName: 'hma_main', toActiveConfig: (params, active) => ({ ...params, showHMA: active }) },
+    visibleState: { compose: createSparseVisibleStateComposer('hma', EMPTY_HMA_STATE) },
+    scale: { indicatorKey: 'hma', label: 'HMA', decimals: 2 },
+    updateConfig: (scheduler, params, paneId) => {
+        (scheduler as IndicatorScheduler).updateHMAConfig(params as Partial<HMASchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createHMAStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -2,9 +2,11 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { HVRenderState } from '../../indicators/hvState'
 import { createHVStateKey } from '../../indicators/hvState'
+import { EMPTY_HV_STATE } from '../../indicators/hvState'
+import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, HVSchedulerConfig } from '../../indicators/scheduler'
 
 const HV_COLOR = '#7c3aed'
 
@@ -115,6 +117,11 @@ export function createHVRendererPlugin(options: { paneId?: string } = {}): Rende
     stateKey: createHVStateKey,
     defaultPaneId: 'sub_HV',
     paneIdField: 'hvPaneId',
+    scale: { indicatorKey: 'hv', label: 'HV', decimals: 2 },
+    updateConfig: (scheduler, params, paneId) => {
+    (scheduler as IndicatorScheduler).updateHVConfig(params as Partial<HVSchedulerConfig>, paneId)
+  },
+    visibleState: { compose: createNonNegativeSparseVisibleStateComposer('hv', EMPTY_HV_STATE) },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createHVStateKey(paneId), state as any, 'indicator_scheduler')
     },

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

@@ -1,10 +1,11 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { IchimokuRenderState } from '../../indicators/ichimokuState'
-import { createIchimokuStateKey } from '../../indicators/ichimokuState'
+import { createIchimokuStateKey, EMPTY_ICHIMOKU_STATE } from '../../indicators/ichimokuState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
-import type { IndicatorScheduler } from '../../indicators/scheduler'
+import type { IndicatorScheduler, IchimokuSchedulerConfig } from '../../indicators/scheduler'
+import { createValuePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
 
 const TENKAN_COLOR = '#dc2626'
 const KIJUN_COLOR = '#2563eb'
@@ -173,6 +174,12 @@ function fillCloud(
     defaultPaneId: 'main',
     paneIdField: 'ichimokuPaneId',
     allowMainPane: true,
+    mainPane: { rendererName: 'ichimoku_main', toActiveConfig: (params, active) => ({ ...params, showTenkan: active, showKijun: active, showSpanA: active, showSpanB: active, showChikou: active, showCloud: active }) },
+    scale: { indicatorKey: 'ichimoku', label: 'Ichimoku', decimals: 2 },
+    visibleState: { compose: createValuePointVisibleStateComposer('ichimoku', EMPTY_ICHIMOKU_STATE, ['tenkan', 'kijun', 'spanA', 'spanB', 'chikou']) },
+    updateConfig: (scheduler, params, paneId) => {
+        (scheduler as IndicatorScheduler).updateIchimokuConfig(params as Partial<IchimokuSchedulerConfig>, paneId)
+    },
     applyResult: (host, state, paneId) => {
         host.setSharedState(createIchimokuStateKey(paneId), state as any, 'indicator_scheduler')
     },