@363045841yyt/klinechart-core 0.8.6 → 0.8.8

package/src/engine/render/chartRenderer.ts

@@ -2,7 +2,8 @@ import type { KLineData } from '../../types/price'
 import type { ChartSettings } from '../../config/chartSettings'
 import type { SymbolSpec } from '../../controllers/types'
 import { getVisibleRange } from '../viewport/viewport'
-import type { RendererPlugin, RendererPluginWithHost, PluginHostImpl, RenderContext, YAxisLabel, XAxisLabel, YAxisRange, XAxisRange } from '../../plugin'
+import type { RendererPlugin, RendererPluginWithHost, PluginHostImpl, RenderContext, YAxisLabel, XAxisLabel, YAxisRange, XAxisRange, YAxisTick } from '../../plugin'
+import { calculateTickCount } from '../utils/tickCount'
 import { RendererPluginManager, wrapPaneInfo } from '../../plugin'
 import type { ChartDom, PaneSpec, ChartOptions, KLinePositions, Viewport, ViewportState } from '../chartTypes'
 import { PaneRenderer } from '../paneRenderer'
@@ -16,6 +17,7 @@ import { InteractionController } from '../controller/interaction'
 import { UpdateLevel } from '../layout/pane'
 import type { VisibleRange } from '../layout/pane'
 import { DrawingStore } from '../drawing'
+import type { ChartModeHandler } from '../modes/types'
 import { createMainIndicatorLegendRendererPlugin } from '../renderers/Indicator/mainIndicatorLegend'
 import { createDrawingRendererPlugin, createDrawingLabelOverlayPlugin } from '../drawing/plugin'
 import { createGridLinesRendererPlugin } from '../renderers/gridLines'
@@ -25,6 +27,7 @@ import { createLastPriceLineRendererPlugin, createLastPriceLabelRegistrarPlugin
 import { createCustomMarkersRenderer } from '../renderers/customMarkers'
 import { createExtremaMarkersRendererPlugin } from '../renderers/extremaMarkers'
 import { createYAxisRendererPlugin } from '../renderers/yAxis'
+import { createLeftYAxisRendererPlugin } from '../renderers/leftYAxis'
 import { createCrosshairRendererPlugin } from '../renderers/crosshair'
 import { createTimeAxisRendererPlugin } from '../renderers/timeAxis'
 
@@ -33,7 +36,7 @@ type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'> & {
   kGap: number
 }
 
-export type FrameContext = {
+type FrameContext = {
   vp: Viewport
   range: VisibleRange
   kLinePositions: KLinePositions
@@ -62,6 +65,7 @@ export interface RendererDependencies {
   getViewportManager: () => ChartViewportManager
   getDataManager: () => ChartDataManager
   getIndicatorManager: () => ChartIndicatorManager
+  getActiveMode: () => ChartModeHandler
 }
 
 export class ChartRenderer {
@@ -127,6 +131,19 @@ export class ChartRenderer {
         price: interaction.crosshairPrice,
       }),
     }))
+    this.useDrawingPlugin(createLeftYAxisRendererPlugin({
+      axisWidth: opt.leftAxisWidth,
+      yPaddingPx: opt.yPaddingPx,
+      getCrosshair: () => {
+        const pos = interaction.crosshairPos
+        const price = interaction.crosshairPrice
+        const activePaneId = interaction.activePaneId
+        if (pos && price !== null) {
+          return { y: pos.y, price, activePaneId }
+        }
+        return null
+      },
+    }))
     this.useDrawingPlugin(createTimeAxisRendererPlugin({
       height: opt.bottomAxisHeight,
       getCrosshair: () => {
@@ -191,8 +208,15 @@ export class ChartRenderer {
       const levelToDraw = this.pendingUpdateLevel
       this.pendingUpdateLevel = UpdateLevel.All
       this.draw(levelToDraw)
-      const c = this.deps.getDom().container
+      const dom = this.deps.getDom()
+      const c = dom.container
       if (c) {
+        const scrollContent = dom.scrollContent
+        if (scrollContent) {
+          const dataManager = this.deps.getDataManager()
+          const w = Math.max(dataManager.getContentWidth(), dataManager.getLeftLoadBufferWidth()) + 'px'
+          if (scrollContent.style.width !== w) scrollContent.style.width = w
+        }
         this.deps.getViewportManager().applyPendingScrollLeft(c)
       }
     })
@@ -203,19 +227,24 @@ export class ChartRenderer {
 
     const frame = this.prepareFrameData(level)
     if (!frame) {
-      if (this.deps.getDataManager().getInternalData().length === 0) this.clearAllCanvases()
+      const dataManager = this.deps.getDataManager()
+      if (dataManager.getInternalData().length === 0 && dataManager.getTimeShareData().length === 0) this.clearAllCanvases()
       return
     }
 
     const { vp, range, kLinePositions, kLineCenters, kBarRects, kWidthPx, useCachedFrame } = frame
 
-    this.deps.getInteraction().setKLinePositions(kLinePositions, range, kWidthPx)
+    this.deps.getInteraction().setKLinePositions(kLinePositions, range, kWidthPx, kLineCenters)
 
-    const indicatorManager = this.deps.getIndicatorManager()
-    indicatorManager.indicatorSchedulerAccessor.setActiveMainIndicators(
-      [...indicatorManager.mainIndicatorsSignalPeek.entries()].map(([id, entry]) => ({ id, params: entry.params })),
-    )
-    const mainIndicatorRange = useCachedFrame ? null : indicatorManager.indicatorSchedulerAccessor.getMainIndicatorPriceRange()
+    const dataManager = this.deps.getDataManager()
+    const mode = this.deps.getActiveMode()
+    if (mode.useIndicatorScheduler) {
+      const indicatorManager = this.deps.getIndicatorManager()
+      indicatorManager.indicatorSchedulerAccessor.setActiveMainIndicators(
+        [...indicatorManager.mainIndicatorsSignalPeek.entries()].map(([id, entry]) => ({ id, params: entry.params })),
+      )
+    }
+    const mainIndicatorRange = useCachedFrame ? null : this.deps.getIndicatorManager().indicatorSchedulerAccessor.getMainIndicatorPriceRange()
     const hasCrosshair = this.deps.getInteraction().getCrosshairIndex() !== null
 
     const { sharedXAxisLabels, sharedXAxisRanges } = this.renderPanes(
@@ -233,7 +262,7 @@ export class ChartRenderer {
     const vp = useCachedFrame ? this.cachedDrawFrame!.viewport : this.deps.getViewportManager().computeViewport()
     if (!vp) return null
 
-    const internalData = this.deps.getDataManager().getInternalData()
+    const internalData = this.deps.getDataManager().getRenderData() as KLineData[]
     if (internalData.length === 0) return null
 
     const opt = this.deps.getOption()
@@ -253,13 +282,16 @@ export class ChartRenderer {
     const range = { start: Math.max(0, rawRange.start), end: rawRange.end }
 
     const dataManager = this.deps.getDataManager()
+    const mode = this.deps.getActiveMode()
     if (!useCachedFrame && (
       range.start !== dataManager.lastVisibleRange.start
       || range.end !== dataManager.lastVisibleRange.end
       || rawRange.start !== dataManager.lastRawVisibleRange.start
       || rawRange.end !== dataManager.lastRawVisibleRange.end
     )) {
-      this.deps.getIndicatorManager().indicatorSchedulerAccessor.updateVisibleRange(range)
+      if (mode.useIndicatorScheduler) {
+        this.deps.getIndicatorManager().indicatorSchedulerAccessor.updateVisibleRange(range)
+      }
       dataManager.lastVisibleRange = range
       dataManager.lastRawVisibleRange = rawRange
       this.checkVisibleRangeGapWhenIdle()
@@ -295,7 +327,34 @@ export class ChartRenderer {
         kBarRects[i] = { x: barLeftPx / vp.dpr, width: barWidthPx / vp.dpr }
       }
 
-      kWidthPx = getPhysicalKLineConfig(opt.kWidth, opt.kGap, vp.dpr).kWidthPx
+      if (mode.debugName === 'TimeShare') {
+        const totalWidth = vp.plotWidth
+        const count = kLineCenters.length
+        if (count > 0) {
+          const dpr = vp.dpr
+          const step = totalWidth / count
+          for (let i = 0; i < count; i++) {
+            kLineCenters[i] = Math.round((i + 0.5) * step * dpr) / dpr
+            kLinePositions[i] = Math.round(i * step * dpr) / dpr
+          }
+          kWidthPx = Math.round(totalWidth * dpr / count)
+
+          const logicalBarWidth = Math.max(1, step * 0.6)
+          const barWidthPx = Math.round(logicalBarWidth * dpr)
+          const halfBarPx = Math.floor(barWidthPx / 2)
+          for (let i = 0; i < count; i++) {
+            const centerPx = Math.round(kLineCenters[i] * dpr)
+            kBarRects[i] = {
+              x: (centerPx - halfBarPx) / dpr,
+              width: barWidthPx / dpr,
+            }
+          }
+        } else {
+          kWidthPx = getPhysicalKLineConfig(opt.kWidth, opt.kGap, vp.dpr).kWidthPx
+        }
+      } else {
+        kWidthPx = getPhysicalKLineConfig(opt.kWidth, opt.kGap, vp.dpr).kWidthPx
+      }
       this.cachedDrawFrame = {
         viewport: { ...vp },
         range: { ...range },
@@ -316,15 +375,28 @@ export class ChartRenderer {
     }
   }
 
+  private clearAxisCtx(ctx: CanvasRenderingContext2D, dpr: number, width: number, height: number): void {
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.scale(dpr, dpr)
+    ctx.clearRect(0, 0, width, height + 2 / dpr)
+  }
+
   clearAllCanvases(): void {
     const vp = this.deps.getViewportManager().computeViewport()
     if (!vp) return
     for (const r of this.deps.getPaneRenderers()) {
-      const { mainCtx, overlayCtx, yAxisCtx } = r.getContexts()
+      const { mainCtx, overlayCtx, yAxisCtx, leftAxisCtx } = r.getContexts()
       const pane = r.getPane()
       mainCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
       overlayCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
       yAxisCtx?.clearRect(0, 0, vp.plotWidth + 1, pane.height + 2 / vp.dpr)
+      if (leftAxisCtx) {
+        const leftCanvas = leftAxisCtx.canvas
+        if (leftCanvas) {
+          const laW = leftCanvas.width / vp.dpr
+          leftAxisCtx.clearRect(0, 0, laW, pane.height + 2 / vp.dpr)
+        }
+      }
     }
     const xCtx = this.xAxisCtx
     if (xCtx) {
@@ -354,17 +426,18 @@ export class ChartRenderer {
     const dataManager = this.deps.getDataManager()
     const rendererPluginManager = this.deps.getRendererPluginManager()
     const pluginHost = this.deps.getPluginHost()
+    const mode = this.deps.getActiveMode()
 
     for (const renderer of this.deps.getPaneRenderers()) {
       const pane = renderer.getPane()
-      const { mainCtx, overlayCtx, yAxisCtx } = renderer.getContexts()
+      const { mainCtx, overlayCtx, yAxisCtx, leftAxisCtx } = renderer.getContexts()
       const { candleSurface, lineSurface } = renderer.getWebGL()
 
       if (!useCachedFrame) {
-        const indicatorRange = pane.role === 'price' ? mainIndicatorRange : null
+        const indicatorRange = pane.role === 'price' && mode.useIndicatorScheduler ? mainIndicatorRange : null
         const comparisonRange = pane.id === 'main' ? dataManager.getComparisonEquivalentPriceRange(range) : null
         const mergedRange = this.mergeNumericRanges(indicatorRange, comparisonRange)
-        pane.updateRange(dataManager.getInternalData(), range, mergedRange)
+        mode.updatePaneRange(pane as any, range, dataManager, mergedRange)
         if (pane.id === 'main' && this.settings.disableMainPaneVerticalScroll) {
           pane.yAxis.resetTransform()
         }
@@ -390,9 +463,11 @@ export class ChartRenderer {
 
       if (yAxisCtx && !useCachedFrame) {
         const yAxisWidth = yAxisCtx.canvas.width / vp.dpr
-        yAxisCtx.setTransform(1, 0, 0, 1, 0, 0)
-        yAxisCtx.scale(vp.dpr, vp.dpr)
-        yAxisCtx.clearRect(0, 0, yAxisWidth, pane.height + 2 / vp.dpr)
+        this.clearAxisCtx(yAxisCtx, vp.dpr, yAxisWidth, pane.height)
+      }
+      if (leftAxisCtx && !useCachedFrame) {
+        const leftAxisWidth = leftAxisCtx.canvas.width / vp.dpr
+        this.clearAxisCtx(leftAxisCtx, vp.dpr, leftAxisWidth, pane.height)
       }
 
       const opt = this.deps.getOption()
@@ -400,7 +475,7 @@ export class ChartRenderer {
         ctx: mainCtx!,
         overlayCtx: overlayCtx ?? undefined,
         pane: wrapPaneInfo(pane),
-        data: dataManager.getInternalData(),
+        data: dataManager.getRenderData(),
         period: dataManager.currentPeriod,
         comparisonData: dataManager.getComparisonData(),
         comparisonSymbols: dataManager.getComparisonSpecs(),
@@ -417,6 +492,7 @@ export class ChartRenderer {
         markerManager: this.markerManager,
         crosshairIndex: this.deps.getInteraction().getCrosshairIndex(),
         yAxisCtx: yAxisCtx ?? undefined,
+        leftAxisCtx: leftAxisCtx ?? undefined,
         candleWebGLSurface: candleSurface ?? undefined,
         lineWebGLSurface: lineSurface ?? undefined,
         zoomLevel: this.deps.getCurrentZoomLevel(),
@@ -436,6 +512,23 @@ export class ChartRenderer {
         colorPresetSettings: this.settings.colorPresetSettings,
       }
 
+      {
+        const pt = pane.yAxis.getPaddingTop()
+        const pb = pane.yAxis.getPaddingBottom()
+        const yStart = pt
+        const yEnd = Math.max(pt, pane.height - pb)
+        const viewH = Math.max(0, yEnd - yStart)
+        const tickCount = Math.max(2, calculateTickCount(pane.height, pane.role === 'price'))
+        const yAxisTicks: YAxisTick[] = []
+        for (let i = 0; i < tickCount; i++) {
+          const t = tickCount <= 1 ? 0 : i / (tickCount - 1)
+          const y = yStart + t * viewH
+          const value = pane.yAxis.yToPrice(y)
+          yAxisTicks.push({ y, value })
+        }
+        context.yAxisTicks = yAxisTicks
+      }
+
       if (shouldUpdateMain || shouldUpdateOverlay) {
         const errors = rendererPluginManager.render(pane.id, context, level)
         if (errors.length > 0) {
@@ -446,6 +539,11 @@ export class ChartRenderer {
         if (yAxisErrors.length > 0) {
           pluginHost.events.emit('renderer:error', { paneId: pane.id, errors: yAxisErrors })
         }
+
+        const leftAxisErrors = rendererPluginManager.renderPlugin('leftYAxis', context)
+        if (leftAxisErrors.length > 0) {
+          pluginHost.events.emit('renderer:error', { paneId: pane.id, errors: leftAxisErrors })
+        }
       }
     }
 
@@ -498,7 +596,7 @@ export class ChartRenderer {
           priceRange: { maxPrice: 0, minPrice: 0 },
         },
         period: this.deps.getDataManager().currentPeriod,
-        data: this.deps.getDataManager().getInternalData(),
+        data: this.deps.getDataManager().getRenderData(),
         range,
         scrollLeft: vp.scrollLeft,
         kWidth: opt.kWidth,

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

@@ -10,13 +10,13 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
 const ATR_COLOR = '#d97706'
 
-export interface ATRRendererOptions {
+interface ATRRendererOptions {
     paneId?: string
 }
 
@@ -34,7 +34,7 @@ function getATRStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createATRRendererPlugin(options: ATRRendererOptions = {}): RendererPluginWithHost {
+function createATRRendererPlugin(options: ATRRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub_ATR' } = options
     let pluginHost: PluginHost | null = null
 
@@ -206,32 +206,7 @@ function drawWithCanvas2D(
     ctx.restore()
 }
 
-/**
- * 获取 ATR 标题信息（供 paneTitle 使用）
- */
-export function getATRTitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    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
-
-    const atr = state.series[index]
-    if (atr === undefined) return null
-
-    return {
-        name: 'ATR',
-        params: [period],
-        values: [
-            { label: 'ATR', value: atr, color: ATR_COLOR },
-        ],
-    }
-}
+const getATRTitleInfo = createSingleLineTitleInfo({ createStateKey: createATRStateKey, name: 'ATR', defaultPeriod: 14, color: ATR_COLOR })
 
 @Indicator({
     name: 'atr',

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

@@ -9,6 +9,7 @@ import { resolveStateKey } 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'
+import { getRgbaAlpha, toOpaqueRgba, compositeLineSurface } from './shared/webglBand'
 
 type LinePoint = { x: number; y: number }
 
@@ -20,28 +21,6 @@ interface PriceData {
     lower: number
 }
 
-function getRgbaAlpha(color: string): number {
-    const match = color.match(/^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)$/i)
-    if (!match) return 1
-    const alpha = Number(match[1])
-    return Number.isFinite(alpha) ? alpha : 1
-}
-
-function toOpaqueRgba(color: string): string {
-    return color.replace(/,\s*[\d.]+\s*\)$/i, ', 1)')
-}
-
-function compositeLineSurface(
-    context: RenderContext,
-    surface: NonNullable<RenderContext['lineWebGLSurface']>,
-    alpha = 1
-): void {
-    surface.compositeTo(context.ctx, {
-        alpha,
-        imageSmoothingEnabled: false,
-    })
-}
-
 function drawBOLLWithWebGL(
     context: RenderContext,
     data: {
@@ -110,7 +89,7 @@ function buildPriceCacheKey(
     return `${range.start}|${range.end}|${dataLength}|${lastTimestamp}|${period}`
 }
 
-export function getBOLLStateKey(host: PluginHost | null): string | null {
+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,7 +134,7 @@ const composeBOLLRenderState: IndicatorRenderStateComposer = (bundle, range, tim
     }
 }
 
-export const getBOLLTitleInfo: GetTitleInfoFn = (
+const getBOLLTitleInfo: GetTitleInfoFn = (
     _data: KLineData[],
     index: number | null,
     _params: Record<string, number | boolean | string>,

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

@@ -9,11 +9,11 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
-export interface CCIRendererOptions {
+interface CCIRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -35,7 +35,7 @@ function getCCIStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 CCI 渲染器插件
  */
-export function createCCIRendererPlugin(options: CCIRendererOptions = {}): RendererPluginWithHost {
+function createCCIRendererPlugin(options: CCIRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -240,30 +240,12 @@ function drawCCILineWithCanvas2D(
 /**
  * 获取 CCI 标题信息（供 paneTitle 使用）
  */
-export function getCCITitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    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 colors = resolveThemeColors('light')
-    const state = pluginHost.getSharedState<CCIRenderState>(createCCIStateKey(paneId))
-    if (!state) return null
-
-    const cci = state.series[index]
-    if (cci === undefined) return null
-
-    return {
-        name: 'CCI',
-        params: [period],
-        values: [
-            { label: 'CCI', value: cci, color: colors.cci.cci },
-        ],
-    }
-}
+const getCCITitleInfo = createSingleLineTitleInfo({
+    createStateKey: createCCIStateKey,
+    name: 'CCI',
+    defaultPeriod: 14,
+    getColor: (colors) => colors.cci.cci,
+})
 
 @Indicator({
     name: 'cci',

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

@@ -2,8 +2,7 @@ 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 { createSingleLineTitleInfo } from './shared/titleInfo'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
@@ -28,7 +27,7 @@ function getChaikinVolStateKey(host: PluginHost | null, paneId: string): string
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createChaikinVolRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createChaikinVolRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_ChaikinVol' } = options
     let pluginHost: PluginHost | null = null
 
@@ -126,26 +125,7 @@ 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 }],
-    }
-}
+const getChaikinVolTitleInfo = createSingleLineTitleInfo({ createStateKey: createChaikinVolStateKey, name: 'ChaikinVol', getParams: (p) => [(p.emaPeriod as number) ?? 10, (p.rocPeriod as number) ?? 10], color: CHAIKIN_VOL_COLOR })
 
 @Indicator({
     name: 'chaikinVol',

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

@@ -2,8 +2,7 @@ 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 { createSingleLineTitleInfo } from './shared/titleInfo'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -28,7 +27,7 @@ function getCMFStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createCMFRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createCMFRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_CMF' } = options
     let pluginHost: PluginHost | null = null
 
@@ -125,25 +124,7 @@ 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 }],
-    }
-}
+const getCMFTitleInfo = createSingleLineTitleInfo({ createStateKey: createCMFStateKey, name: 'CMF', defaultPeriod: 20, color: CMF_COLOR })
 
 @Indicator({
     name: 'cmf',

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

@@ -1,10 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 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, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, DEMASchedulerConfig } from '../../indicators/scheduler'
 import { calcDEMAData } from '../../indicators/calculators'
@@ -13,7 +13,7 @@ const DEMA_COLOR = '#6366f1'
 
 type Point = { x: number; y: number }
 
-export interface DEMARendererOptions {
+interface DEMARendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getDEMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createDEMARendererPlugin(options: DEMARendererOptions = {}): RendererPluginWithHost {
+function createDEMARendererPlugin(options: DEMARendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -122,28 +122,7 @@ 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' }],
-    }
-}
+const getDEMATitleInfo = createSingleLineTitleInfo({ createStateKey: createDEMAStateKey, name: 'DEMA', getParams: (p) => [p.period as number], color: DEMA_COLOR })
 
 @Indicator({
     name: 'dema',

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

@@ -15,7 +15,7 @@ const DONCHIAN_LOWER_COLOR = '#0891b2'
 
 type Point = { x: number; y: number }
 
-export interface DonchianRendererOptions { paneId?: string }
+interface DonchianRendererOptions { paneId?: string }
 
 function getDonchianStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -31,7 +31,7 @@ function getDonchianStateKey(host: PluginHost | null, paneId: string): string |
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createDonchianRendererPlugin(options: DonchianRendererOptions = {}): RendererPluginWithHost {
+function createDonchianRendererPlugin(options: DonchianRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -124,7 +124,7 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export function getDonchianTitleInfo(
+function getDonchianTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,