@363045841yyt/klinechart-core 0.8.5 → 0.8.7

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

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import type { KLineData, TimeShareData } from '../../../types/price'
 import { resolveThemeColors } from '../../../tokens'
 import { getFont, setCanvasFont } from '../../theme/fonts'
 import type { IndicatorScheduler } from '../../indicators/scheduler'
@@ -81,6 +81,221 @@ export function createMainIndicatorLegendRendererPlugin(options: {
       const targetIndex = crosshairIndex ?? Math.min(range.end - 1, klineData.length - 1)
       const rows: Array<{ draw: (rowIndex: number) => void }> = []
 
+      // ── Timeshare legend ──
+      if (context.period === 'timeshare') {
+        const tsData = data as TimeShareData[]
+        const preClose = (context.settings?.preClose as number) ?? tsData[0]?.price ?? 0
+        const item = tsData[targetIndex]
+        if (item) {
+          const changeAmount = item.price - preClose
+          const changePercent = preClose !== 0 ? (changeAmount / preClose) * 100 : 0
+          const changeColor = changeAmount >= 0 ? colors.candleUpBody : colors.candleDownBody
+
+          if (context.paneWidth >= 400) {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('现价 ', x, y)
+                x += measureTextWidth(overlayCtx, '现价 ')
+                overlayCtx.fillStyle = changeColor
+                overlayCtx.fillText(item.price.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('均价 ', x, y)
+                x += measureTextWidth(overlayCtx, '均价 ')
+                overlayCtx.fillText(item.average.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨跌 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨跌 ')
+                overlayCtx.fillStyle = changeColor
+                const sign = changeAmount > 0 ? '+' : ''
+                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y)
+                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨幅 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨幅 ')
+                overlayCtx.fillStyle = changeColor
+                const pctSign = changePercent > 0 ? '+' : ''
+                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y)
+                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap
+
+                const volText = formatVolumeShort(item.volume)
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交量 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交量 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(volText, x, y)
+                x += measureTextWidth(overlayCtx, volText) + gap
+
+                const amtText = formatAmountShort(item.amount)
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交额 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交额 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(amtText, x, y)
+              },
+            })
+          } else {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('现价 ', x, y)
+                x += measureTextWidth(overlayCtx, '现价 ')
+                overlayCtx.fillStyle = changeColor
+                overlayCtx.fillText(item.price.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('均价 ', x, y)
+                x += measureTextWidth(overlayCtx, '均价 ')
+                overlayCtx.fillText(item.average.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交量 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交量 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(formatVolumeShort(item.volume), x, y)
+              },
+            })
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨跌 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨跌 ')
+                overlayCtx.fillStyle = changeColor
+                const sign = changeAmount > 0 ? '+' : ''
+                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y)
+                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨幅 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨幅 ')
+                overlayCtx.fillStyle = changeColor
+                const pctSign = changePercent > 0 ? '+' : ''
+                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y)
+                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap
+
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交额 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交额 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(formatAmountShort(item.amount), x, y)
+              },
+            })
+          }
+        }
+      }
+
+      if (typeof crosshairIndex === 'number') {
+        const k = klineData[targetIndex]
+        if (k && typeof k.close === 'number') {
+          const isUp = k.close >= k.open
+          const volText = typeof k.volume === 'number' ? formatVolumeShort(k.volume) : null
+          const upColor = isUp ? colors.candleUpBody : colors.candleDownBody
+
+          if (context.paneWidth >= 400) {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('O ', x, y)
+                x += measureTextWidth(overlayCtx, 'O ')
+                overlayCtx.fillStyle = upColor
+                overlayCtx.fillText(k.open.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('H ', x, y)
+                x += measureTextWidth(overlayCtx, 'H ')
+                overlayCtx.fillText(k.high.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap
+
+                overlayCtx.fillText('L ', x, y)
+                x += measureTextWidth(overlayCtx, 'L ')
+                overlayCtx.fillText(k.low.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.low.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('C ', x, y)
+                x += measureTextWidth(overlayCtx, 'C ')
+                overlayCtx.fillStyle = upColor
+                overlayCtx.fillText(k.close.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap
+
+                if (volText) {
+                  overlayCtx.fillStyle = colors.text.tertiary
+                  overlayCtx.fillText('Vol ', x, y)
+                  x += measureTextWidth(overlayCtx, 'Vol ')
+                  overlayCtx.fillStyle = colors.text.primary
+                  overlayCtx.fillText(volText, x, y)
+                }
+              },
+            })
+          } else {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('O ', x, y)
+                x += measureTextWidth(overlayCtx, 'O ')
+                overlayCtx.fillStyle = upColor
+                overlayCtx.fillText(k.open.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('H ', x, y)
+                x += measureTextWidth(overlayCtx, 'H ')
+                overlayCtx.fillText(k.high.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap
+
+                overlayCtx.fillText('L ', x, y)
+                x += measureTextWidth(overlayCtx, 'L ')
+                overlayCtx.fillText(k.low.toFixed(2), x, y)
+              },
+            })
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('C ', x, y)
+                x += measureTextWidth(overlayCtx, 'C ')
+                overlayCtx.fillStyle = upColor
+                overlayCtx.fillText(k.close.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap
+
+                if (volText) {
+                  overlayCtx.fillStyle = colors.text.tertiary
+                  overlayCtx.fillText('Vol ', x, y)
+                  x += measureTextWidth(overlayCtx, 'Vol ')
+                  overlayCtx.fillStyle = colors.text.primary
+                  overlayCtx.fillText(volText, x, y)
+                }
+              },
+            })
+          }
+        }
+      }
+
       const scheduler = pluginHost && typeof pluginHost.getService === 'function'
         ? pluginHost.getService<IndicatorScheduler>('indicatorScheduler')
         : undefined
@@ -237,3 +452,15 @@ function findBaselineByTimestamp(data: ReadonlyArray<KLineData>, timestamp: numb
   }
   return null
 }
+
+function formatVolumeShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}
+
+function formatAmountShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}

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

@@ -2,8 +2,7 @@ import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { MFIRenderState } from '../../indicators/mfiState'
 import { createMFIStateKey, EMPTY_MFI_STATE } from '../../indicators/mfiState'
-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 getMFIStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createMFIRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createMFIRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_MFI' } = options
     let pluginHost: PluginHost | null = null
 
@@ -130,25 +129,7 @@ export function createMFIRendererPlugin(options: { paneId?: string } = {}): Rend
     }
 }
 
-export function getMFITitleInfo(
-    _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) ?? 14
-    const state = host.getSharedState<MFIRenderState>(createMFIStateKey(paneId))
-    const value = state?.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'MFI',
-        params: [period],
-        values: [{ label: 'MFI', value, color: MFI_COLOR }],
-    }
-}
+const getMFITitleInfo = createSingleLineTitleInfo({ createStateKey: createMFIStateKey, name: 'MFI', defaultPeriod: 14, color: MFI_COLOR })
 
 @Indicator({
     name: 'mfi',

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

@@ -11,11 +11,11 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, MOMSchedulerConfig } from '../../indicators/scheduler'
 import { createMomScaleRendererPlugin } from './scale/mom_scale'
 import { calcMOMData } from '../../indicators/calculators'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
-export interface MOMRendererOptions {
+interface MOMRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -37,7 +37,7 @@ function getMOMStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 MOM 渲染器插件
  */
-export function createMOMRendererPlugin(options: MOMRendererOptions = {}): RendererPluginWithHost {
+function createMOMRendererPlugin(options: MOMRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -274,33 +274,12 @@ function drawMOMLineWithCanvas2D(
     ctx.restore()
 }
 
-/**
- * 获取 MOM 标题信息（供 paneTitle 使用）
- */
-export function getMOMTitleInfo(
-    _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) ?? 10
-    const colors = resolveThemeColors('light')
-    const state = pluginHost.getSharedState<MOMRenderState>(createMOMStateKey(paneId))
-    if (!state) return null
-
-    const mom = state.series[index]
-    if (mom === undefined) return null
-
-    return {
-        name: 'MOM',
-        params: [period],
-        values: [
-            { label: 'MOM', value: mom, color: colors.mom.mom },
-        ],
-    }
-}
+const getMOMTitleInfo = createSingleLineTitleInfo({
+    createStateKey: createMOMStateKey,
+    name: 'MOM',
+    defaultPeriod: 10,
+    getColor: (colors) => colors.mom.mom,
+})
 
 @Indicator({
     name: 'mom',

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

@@ -7,8 +7,7 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const OBV_COLOR = '#16a34a'
 
@@ -28,7 +27,7 @@ function getOBVStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createOBVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createOBVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_OBV' } = options
     let pluginHost: PluginHost | null = null
 
@@ -111,24 +110,7 @@ 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 }],
-  }
-}
+const getOBVTitleInfo = createSingleLineTitleInfo({ createStateKey: createOBVStateKey, name: 'OBV', color: OBV_COLOR })
 
 @Indicator({
     name: 'obv',

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

@@ -9,8 +9,7 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const PARKINSON_COLOR = '#0891b2'
 
@@ -30,7 +29,7 @@ function getParkinsonStateKey(host: PluginHost | null, paneId: string): string |
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createParkinsonRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createParkinsonRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_Parkinson' } = options
     let pluginHost: PluginHost | null = null
 
@@ -114,26 +113,7 @@ 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 }],
-  }
-}
+const getParkinsonTitleInfo = createSingleLineTitleInfo({ createStateKey: createParkinsonStateKey, name: 'Parkinson', getParams: (p) => [(p.period as number) ?? 20, (p.annualizationFactor as number) ?? 252], color: PARKINSON_COLOR })
 
 @Indicator({
     name: 'parkinson',

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

@@ -28,7 +28,7 @@ function getPivotStateKey(host: PluginHost | null, paneId: string): string | nul
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createPivotRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createPivotRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -116,7 +116,7 @@ function drawStep(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export const getPivotTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+const getPivotTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
     if (index === null || index < 0) return null
 
     const stateKey = createPivotStateKey(paneId)

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

@@ -7,8 +7,7 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const PVT_COLOR = '#a855f7'
 
@@ -28,7 +27,7 @@ function getPVTStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createPVTRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createPVTRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_PVT' } = options
     let pluginHost: PluginHost | null = null
 
@@ -111,24 +110,7 @@ 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 }],
-  }
-}
+const getPVTTitleInfo = createSingleLineTitleInfo({ createStateKey: createPVTStateKey, name: 'PVT', color: PVT_COLOR })
 
 @Indicator({
     name: 'pvt',

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

@@ -8,14 +8,13 @@ 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'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const ROC_COLOR = '#0ea5e9'
 
 type LinePoint = { x: number; y: number }
 
-export interface ROCRendererOptions { paneId?: string }
+interface ROCRendererOptions { paneId?: string }
 
 function getROCStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -31,7 +30,7 @@ function getROCStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createROCRendererPlugin(options: ROCRendererOptions = {}): RendererPluginWithHost {
+function createROCRendererPlugin(options: ROCRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub_ROC' } = options
     let pluginHost: PluginHost | null = null
 
@@ -132,25 +131,7 @@ 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 }],
-  }
-}
+const getROCTitleInfo = createSingleLineTitleInfo({ createStateKey: createROCStateKey, name: 'ROC', defaultPeriod: 12, color: ROC_COLOR })
 
 @Indicator({
     name: 'roc',

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

@@ -14,7 +14,7 @@ import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
-export interface RSIRendererOptions {
+interface RSIRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getRSIStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 RSI 渲染器插件
  */
-export function createRSIRendererPlugin(options: RSIRendererOptions = {}): RendererPluginWithHost {
+function createRSIRendererPlugin(options: RSIRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -298,7 +298,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
  * 获取 RSI 标题信息（供 paneTitle 使用）
  * 从 StateStore 读取已计算的 RSI 数据
  */
-export function drawRSILinesWithCanvas2D(
+function drawRSILinesWithCanvas2D(
     ctx: CanvasRenderingContext2D,
     scrollLeft: number,
     rsi1Points: LinePoint[],
@@ -351,7 +351,7 @@ export function drawRSILinesWithCanvas2D(
     ctx.restore()
 }
 
-export function getRSITitleInfo(
+function getRSITitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

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

@@ -13,7 +13,7 @@ import { createValuePointVisibleStateComposer } from '../../indicators/visibleSt
 const DOT_RADIUS = 1.5
 const TAU = Math.PI * 2
 
-export interface SARRendererOptions {
+interface SARRendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getSARStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createSARRendererPlugin(options: SARRendererOptions = {}): RendererPluginWithHost {
+function createSARRendererPlugin(options: SARRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -99,7 +99,7 @@ export function createSARRendererPlugin(options: SARRendererOptions = {}): Rende
     }
 }
 
-export function getSARTitleInfo(
+function getSARTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/scale/indicator_scale.ts

@@ -57,6 +57,8 @@ export interface DrawScaleTicksOptions {
     hideEdgeTicks?: boolean
     scaleType?: ScaleType
     formatLabel?: (value: number) => string
+    /** 文字对齐方式，默认 'center'。左侧轴应使用 'right' */
+    textAlign?: CanvasTextAlign
 }
 
 const BASELINE_MIDDLE = 'middle' as const
@@ -77,6 +79,7 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
         hideEdgeTicks = true,
         scaleType = 'linear',
         formatLabel,
+        textAlign = 'center',
     } = options
 
     ctx.clearRect(0, 0, axisWidth, height)
@@ -84,11 +87,15 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
     const font = getFont(12)
     setCanvasFont(ctx, font)
     ctx.textBaseline = BASELINE_MIDDLE
-    ctx.textAlign = ALIGN_CENTER
+    ctx.textAlign = textAlign as CanvasTextAlign
     ctx.fillStyle = options.tickColor
 
-    const centerX = axisWidth / 2
-    const centerXPx = roundToPhysicalPixel(centerX, dpr)
+    const alignTo = textAlign === 'center'
+      ? roundToPhysicalPixel(axisWidth / 2, dpr)
+      : textAlign === 'right'
+        ? roundToPhysicalPixel(axisWidth - 4, dpr)
+        : roundToPhysicalPixel(4, dpr)
+    const textX = alignTo
 
     const positions = calculateValueTickPositions({
         height,
@@ -106,7 +113,7 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: str
 
     for (let i = 0; i < positions.length; i++) {
         const { y, value } = positions[i]!
-        ctx.fillText(format(value), centerXPx, alignToPhysicalPixelCenter(y, dpr))
+        ctx.fillText(format(value), textX, y)
     }
 }