@363045841yyt/klinechart-core 0.8.6 → 0.8.8

package/src/engine/renderers/__tests__/yAxis.renderer.test.ts

@@ -1,23 +1,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createYAxisRendererPlugin } from '@/core/renderers/yAxis'
-import type { RenderContext, PaneInfo } from '@/plugin'
-
-vi.mock('@/core/renderers/Indicator/scale/indicator_scale', async () => {
-  const actual = await vi.importActual<typeof import('@/core/renderers/Indicator/scale/indicator_scale')>(
-    '@/core/renderers/Indicator/scale/indicator_scale',
-  )
-  return {
-    ...actual,
-    drawScaleTicks: vi.fn(),
-  }
-})
+import type { RenderContext, PaneInfo, YAxisTick } from '@/plugin'
 
 vi.mock('@/utils/kLineDraw/axis', () => ({
   drawCrosshairPriceLabel: vi.fn(),
   drawAxisPriceLabel: vi.fn(),
 }))
 
-import { drawScaleTicks } from '@/core/renderers/Indicator/scale/indicator_scale'
 import { drawCrosshairPriceLabel, drawAxisPriceLabel } from '@/utils/kLineDraw/axis'
 
 function createPane(overrides: Partial<PaneInfo> = {}): PaneInfo {
@@ -53,12 +42,27 @@ function createPane(overrides: Partial<PaneInfo> = {}): PaneInfo {
   }
 }
 
+const mockYAxisTicks: YAxisTick[] = [
+  { y: 10, value: 120 },
+  { y: 55, value: 110 },
+  { y: 100, value: 100 },
+  { y: 145, value: 90 },
+  { y: 190, value: 80 },
+]
+
+function createCtx() {
+  return {
+    canvas: { width: 80, height: 200 },
+    clearRect: vi.fn(),
+    fillText: vi.fn(),
+    measureText: vi.fn(() => ({ width: 10 })),
+    save: vi.fn(),
+    restore: vi.fn(),
+  } as unknown as CanvasRenderingContext2D
+}
+
 function createContext(overrides: Partial<RenderContext> = {}): RenderContext {
-  const ctx = {} as CanvasRenderingContext2D
-  Object.defineProperty(ctx, 'canvas', {
-    value: { width: 80, height: 200 },
-    configurable: true,
-  })
+  const ctx = createCtx()
 
   return {
     ctx,
@@ -78,6 +82,7 @@ function createContext(overrides: Partial<RenderContext> = {}): RenderContext {
     xAxisLabels: [],
     period: 'daily',
     theme: 'light',
+    yAxisTicks: mockYAxisTicks,
     ...overrides,
   }
 }
@@ -93,7 +98,9 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledTimes(1)
+    const targetCtx = context.yAxisCtx!
+    expect(targetCtx.clearRect).toHaveBeenCalled()
+    expect(targetCtx.fillText).toHaveBeenCalled()
   })
 
   it('does not draw ticks when pane capability showPriceAxisTicks is false', () => {
@@ -111,21 +118,19 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledTimes(0)
+    const targetCtx = context.yAxisCtx!
+    expect(targetCtx.fillText).toHaveBeenCalledTimes(0)
   })
 
   it('uses ctx when yAxisCtx is not provided', () => {
     const plugin = createYAxisRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
-    const fallbackCtx = {} as CanvasRenderingContext2D
+    const fallbackCtx = createCtx()
     const context = createContext({ ctx: fallbackCtx, yAxisCtx: undefined })
 
     plugin.draw(context)
 
-    expect(drawScaleTicks).toHaveBeenCalledWith(
-      expect.objectContaining({
-        ctx: fallbackCtx,
-      }),
-    )
+    expect(fallbackCtx.clearRect).toHaveBeenCalled()
+    expect(fallbackCtx.fillText).toHaveBeenCalled()
   })
 
   it('draws last price label via drawAxisPriceLabel for main pane when yAxisLabels contains lastPrice', () => {
@@ -162,7 +167,6 @@ describe('yAxis renderer', () => {
 
     plugin.draw(context)
 
-    // Last price now flows through drawAxisPriceLabel; only the crosshair label uses drawCrosshairPriceLabel
     expect(drawCrosshairPriceLabel).toHaveBeenCalledTimes(1)
   })
 

package/src/engine/renderers/candle.ts

@@ -342,7 +342,7 @@ function drawVolumePriceMarkers(
 * @param gap - 三角形与K线的间距，默认为4
 * @param dpr - 设备像素比
 */
-export function drawVolumePriceMarker(
+function drawVolumePriceMarker(
     ctx: CanvasRenderingContext2D,
     x: number,
     y: number,

package/src/engine/renderers/comparisonLine.ts

@@ -14,6 +14,7 @@ export function createComparisonLineRenderer(): RendererPlugin {
         priority: RENDERER_PRIORITY.MAIN + 2,
 
         draw(context: RenderContext) {
+            if (context.period === 'timeshare') return
             const mainData = context.data as KLineData[]
             const comparisonData = context.comparisonData
             const comparisonSymbols = context.comparisonSymbols ?? []

package/src/engine/renderers/extremaMarkers.ts

@@ -108,6 +108,7 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
         priority: RENDERER_PRIORITY.OVERLAY,
 
         draw(context: RenderContext) {
+            if (context.period === 'timeshare') return
             const { ctx, pane, data, range, scrollLeft, dpr, paneWidth, kLineCenters } = context
             const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const klineData = data as KLineData[]

package/src/engine/renderers/gridLines.ts

@@ -4,7 +4,7 @@ import type { KLineData } from '../../types/price'
 import { createHorizontalLineRect, createVerticalLineRect } from '../draw/pixelAlign'
 import { findMonthBoundaries } from '../../utils/dateFormat'
 import { resolveThemeColors } from '../../tokens'
-import { calculateTickPositions, calculateValueTickPositions, type ScaleType } from '../utils/tickPosition'
+
 
 /**
  * 创建网格线渲染器插件
@@ -34,41 +34,12 @@ export function createGridLinesRendererPlugin(): RendererPlugin {
             const plotWidth = ctx.canvas.width / dpr
             const startX = scrollLeft
             const endX = scrollLeft + plotWidth
-            const pt = pane.yAxis.getPaddingTop()
-            const pb = pane.yAxis.getPaddingBottom()
-
-            // 水平网格线：与 Y 轴刻度对齐
-            const scaleType = pane.yAxis.getScaleType()
-            let yPositions: number[]
-
-            if ((scaleType === 'log' || scaleType === 'percent') && pane.role === 'price') {
-                const displayRange = pane.yAxis.getDisplayRange(pane.priceRange)
-                const valueMin = scaleType === 'percent' ? pane.yAxis.getDisplayPercentRange().minPct : displayRange.minPrice
-                const valueMax = scaleType === 'percent' ? pane.yAxis.getDisplayPercentRange().maxPct : displayRange.maxPrice
-                const tickValues = calculateValueTickPositions({
-                    height: pane.height,
-                    paddingTop: pt,
-                    paddingBottom: pb,
-                    isMain: true,
-                    valueMin,
-                    valueMax,
-                    scaleType,
-                })
-                yPositions = tickValues.map(t => t.y)
-            } else {
-                // 线性模式：均匀分布
-                const tickPositions = calculateTickPositions({
-                    height: pane.height,
-                    paddingTop: pt,
-                    paddingBottom: pb,
-                    isMain: pane.role === 'price',
-                })
-                yPositions = tickPositions.map(t => t.y)
-            }
-
-            for (const y of yPositions) {
-                const h = createHorizontalLineRect(startX, endX, y, dpr)
-                if (h) ctx.fillRect(h.x, h.y, h.width, h.height)
+            // 水平网格线：从预计算的 yAxisTicks 取 Y 位置，确保与轴刻度对齐
+            if (context.yAxisTicks) {
+                for (const tick of context.yAxisTicks) {
+                    const h = createHorizontalLineRect(startX, endX, tick.y, dpr)
+                    if (h) ctx.fillRect(h.x, h.y, h.width, h.height)
+                }
             }
 
             const boundaries = findMonthBoundaries(klineData)

package/src/engine/renderers/lastPrice.ts

@@ -35,6 +35,7 @@ export function createLastPriceLabelRegistrarPlugin(): RendererPlugin {
         priority: RENDERER_PRIORITY.LAST_PRICE_LABEL,
 
         draw(context: RenderContext) {
+            if (context.period === 'timeshare') return
             const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const info = getLastPriceInfo(context)
             if (!info) return
@@ -68,7 +69,8 @@ export function createLastPriceLineRendererPlugin(): RendererPlugin {
         priority: RENDERER_PRIORITY.LAST_PRICE_LABEL,
 
         draw(context: RenderContext) {
-            const { ctx, scrollLeft, dpr, kLinePositions, paneWidth } = context
+            if (context.period === 'timeshare') return
+            const { ctx, scrollLeft, dpr, paneWidth } = context
             const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const info = getLastPriceInfo(context)
             if (!info) return
@@ -78,7 +80,8 @@ export function createLastPriceLineRendererPlugin(): RendererPlugin {
             ctx.save()
             ctx.translate(-scrollLeft, 0)
 
-            const startX = kLinePositions[0] ?? 0
+            // 最新价水平线横贯整个视口（从左边缘到右边缘）
+            const startX = scrollLeft
             const endX = paneWidth + scrollLeft
 
             ctx.strokeStyle = colors.price.lastPrice

package/src/engine/renderers/leftYAxis.ts

@@ -0,0 +1,93 @@
+import type { RendererPlugin, RenderContext } from '../../plugin'
+import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
+import { drawCrosshairPriceLabel } from '../../utils/kLineDraw/axis'
+import { resolveThemeColors } from '../../tokens'
+import { getFont, setCanvasFont } from '../theme/fonts'
+import { roundToPhysicalPixel } from '../draw/pixelAlign'
+import { priceAtYForScaleType, type ScaleType } from '../utils/tickPosition'
+
+export function createLeftYAxisRendererPlugin(options: {
+  axisWidth: number
+  yPaddingPx: number
+  getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
+}): RendererPlugin {
+  return {
+    name: 'leftYAxis',
+    version: '1.0.0',
+    description: '左侧Y轴价格刻度渲染器',
+    debugName: '左侧Y轴',
+    paneId: GLOBAL_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
+
+    draw(context: RenderContext) {
+      const { leftAxisCtx, pane, dpr, period } = context
+      if (!leftAxisCtx) return
+
+      const axisWidth = leftAxisCtx.canvas ? (leftAxisCtx.canvas.width / dpr) : 0
+      if (axisWidth <= 0) return
+
+      // 分时模式始终显示左轴（线性），不受设置约束
+      if (period !== 'timeshare') {
+        const leftType = context.settings?.leftAxisType as string | undefined
+        if (!leftType || leftType === 'none') return
+      }
+
+      const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+
+      if (!pane.capabilities.showPriceAxisTicks) return
+
+      const scaleType: ScaleType = period === 'timeshare' ? 'linear' : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
+      const paneScaleType = pane.yAxis.getScaleType()
+
+      if (!context.yAxisTicks) return
+
+      leftAxisCtx.clearRect(0, 0, axisWidth, pane.height)
+
+      const font = getFont(12)
+      setCanvasFont(leftAxisCtx, font)
+      leftAxisCtx.textBaseline = 'middle'
+      leftAxisCtx.textAlign = 'center'
+      leftAxisCtx.fillStyle = tokenColors.text.secondary
+
+      const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
+
+      const needsOwnValues = scaleType !== paneScaleType
+      const crosshairPriceRange = pane.yAxis.getDisplayRange()
+
+      for (const tick of context.yAxisTicks) {
+        let displayValue: number
+        if (needsOwnValues) {
+          if (scaleType === 'percent') {
+            displayValue = pane.yAxis.toPercent(tick.value)
+          } else {
+            const { minPrice, maxPrice } = crosshairPriceRange
+            displayValue = priceAtYForScaleType(
+              tick.y, minPrice, maxPrice, scaleType,
+              pane.height, pane.yAxis.getPaddingTop(), pane.yAxis.getPaddingBottom(),
+            )
+          }
+        } else {
+          displayValue = tick.value
+        }
+        leftAxisCtx.fillText(displayValue.toFixed(2), textX, tick.y)
+      }
+
+      const crosshair = options.getCrosshair?.()
+      if (!crosshair || crosshair.activePaneId !== pane.id || crosshair.price === null) return
+
+      drawCrosshairPriceLabel(leftAxisCtx, {
+        x: 0,
+        y: pane.top,
+        width: axisWidth,
+        height: pane.height,
+        crosshairY: crosshair.y,
+        priceRange: crosshairPriceRange,
+        yPaddingPx: options.yPaddingPx,
+        dpr,
+        fontSize: 12,
+        priceOffset: 0,
+        price: crosshair.price,
+      }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
+    },
+  }
+}

package/src/engine/renderers/subVolume.ts

@@ -8,12 +8,12 @@ import { resolveStateKey } from '../indicators/indicatorMetadata'
 import type { IndicatorScheduler } from '../indicators/scheduler'
 import { createVolumeScaleRendererPlugin } from './Indicator/scale/volume_scale'
 
-export interface VolumeRendererOptions {
+interface VolumeRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
 
-export interface VolumeRenderState extends BaseIndicatorState {
+interface VolumeRenderState extends BaseIndicatorState {
     valueMin: number
     valueMax: number
 }
@@ -35,7 +35,7 @@ function getVolumeStateKey(host: PluginHost | null, paneId: string): string | nu
 /**
  * 创建副图成交量渲染器插件
  */
-export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}): RendererPluginWithHost {
+function createVolumeRendererPlugin(options: VolumeRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 

package/src/engine/renderers/timeAxis.ts

@@ -5,7 +5,7 @@ import type { KLineData } from '../../types/price'
 import { drawTimeAxis, drawCrosshairTimeLabel, drawAxisTimeLabel } from '../../utils/kLineDraw/axis'
 
 /** 时间轴面板 ID（特殊标识，用于单独渲染） */
-export const TIME_AXIS_PANE_ID = Symbol('time-axis')
+const TIME_AXIS_PANE_ID = Symbol('time-axis')
 
 /**
  * 创建时间轴渲染器插件
@@ -52,6 +52,8 @@ export function createTimeAxisRendererPlugin(options: {
         startIndex: range.start,
         endIndex: range.end,
         dpr,
+        kLineCenters: context.kLineCenters,
+        visibleRange: range,
         textColor: colors.text.secondary,
         lineColor: colors.border.dark,
         drawTopBorder: false,
@@ -79,18 +81,19 @@ export function createTimeAxisRendererPlugin(options: {
       if (crosshair && typeof crosshair.index === 'number') {
         const k = klineData[crosshair.index]
         if (k) {
-          drawCrosshairTimeLabel(targetCtx, {
-            x: 0,
-            y: 0,
-            width: w,
-            height: h,
-            crosshairX: crosshair.x,
-            timestamp: k.timestamp,
-            dpr,
-            fontSize: 12,
-            bgColor: colors.crosshairLabelBg,
-            textColor: colors.crosshairLabelText,
-          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            drawCrosshairTimeLabel(targetCtx, {
+                x: 0,
+                y: 0,
+                width: w,
+                height: h,
+                crosshairX: crosshair.x,
+                timestamp: k.timestamp,
+                dpr,
+                fontSize: 12,
+                bgColor: colors.crosshairLabelBg,
+                textColor: colors.crosshairLabelText,
+                period: context.period,
+            }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         }
       }
 

package/src/engine/renderers/timeShare.ts

@@ -0,0 +1,271 @@
+import type { RendererPlugin, RenderContext, RendererPluginWithHost, PluginHost } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import type { TimeShareData } from '../../types/price'
+import { resolveThemeColors } from '../../tokens'
+import { Indicator } from '../indicators/indicatorDefinitionRegistry'
+
+/** 成交量区域占 pane 高度的比例（底部） */
+const VOLUME_RATIO = 0.25
+
+export function createTimeShareRendererPlugin(): RendererPluginWithHost {
+  return {
+    name: 'timeShare',
+    version: '1.0.0',
+    description: '股票分时图渲染器',
+    debugName: '分时图',
+    paneId: 'main',
+    priority: RENDERER_PRIORITY.MAIN,
+
+    onInstall(_host: PluginHost) {
+    },
+
+    draw(context: RenderContext) {
+      const { ctx, pane, data, range, dpr, kLineCenters, scrollLeft, settings, kBarRects } = context
+      if (context.period !== 'timeshare') return
+      const tsData = data as TimeShareData[]
+      if (!tsData.length) return
+
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+      const preClose = (settings?.preClose as number) ?? tsData[0]?.price ?? 0
+      if (preClose === 0) return
+
+      const paneHeight = pane.height
+      const volumeAreaHeight = Math.round(paneHeight * VOLUME_RATIO * dpr) / dpr
+      const priceAreaHeight = paneHeight - volumeAreaHeight
+
+      const { start, end } = range
+      const visibleCount = Math.min(end - start, tsData.length - start)
+      const itemCount = Math.min(end, tsData.length) - start
+
+      const xPositions: number[] = []
+      const yPrices: number[] = []
+      const yAvgs: number[] = []
+      const volumes: number[] = []
+      let maxVolume = 0
+
+      for (let i = start; i < start + itemCount; i++) {
+        const item = tsData[i]
+        if (!item) continue
+        const x = kLineCenters[i - start]
+        if (x === undefined) continue
+        xPositions.push(x)
+        yPrices.push(pane.yAxis.priceToY(item.price))
+        yAvgs.push(pane.yAxis.priceToY(item.average))
+        volumes.push(item.volume)
+        maxVolume = Math.max(maxVolume, item.volume)
+      }
+
+      if (xPositions.length < 2) return
+
+      ctx.save()
+      ctx.translate(-scrollLeft, 0)
+
+      const preCloseY = pane.yAxis.priceToY(preClose)
+
+      drawPreCloseLine(ctx, xPositions, preCloseY, dpr, colors.timeSharePreClose)
+
+      drawAreaFill(ctx, xPositions, yPrices, preCloseY, dpr,
+        colors.timeShareAreaUp, colors.timeShareAreaDown)
+
+      drawSegmentLine(ctx, xPositions, yPrices, dpr, colors.timeSharePriceLine, 2)
+
+      drawSegmentLine(ctx, xPositions, yAvgs, dpr, colors.timeShareAvgLine, 1.5)
+
+      drawVolumeBars(ctx, kBarRects, volumes, maxVolume, volumeAreaHeight, paneHeight, preClose, dpr, colors.volumeUp, colors.volumeDown, colors.volumeNeutral, tsData, start)
+
+      ctx.restore()
+    },
+  }
+}
+
+function drawPreCloseLine(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  y: number,
+  dpr: number,
+  color: string,
+): void {
+  if (xPositions.length < 2) return
+  const firstX = xPositions[0]
+  const lastX = xPositions[xPositions.length - 1]
+
+  ctx.save()
+  ctx.strokeStyle = color
+  ctx.lineWidth = 1
+  ctx.setLineDash([4, 4])
+  ctx.beginPath()
+  ctx.moveTo(firstX, y)
+  ctx.lineTo(lastX, y)
+  ctx.stroke()
+  ctx.setLineDash([])
+  ctx.restore()
+}
+
+function drawAreaFill(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  yPrices: number[],
+  baselineY: number,
+  dpr: number,
+  upColor: string,
+  downColor: string,
+): void {
+  if (xPositions.length < 2) return
+
+  const n = xPositions.length
+
+  function buildPolygon(isAbove: boolean): Array<{ x: number; y: number }> {
+    const pts: Array<{ x: number; y: number }> = [{ x: xPositions[0]!, y: baselineY }]
+    const firstOnOurSide = isAbove
+      ? yPrices[0]! <= baselineY
+      : yPrices[0]! >= baselineY
+    if (firstOnOurSide) {
+      pts.push({ x: xPositions[0]!, y: yPrices[0]! })
+    }
+
+    for (let i = 0; i < n - 1; i++) {
+      const x1 = xPositions[i]!, y1 = yPrices[i]!
+      const x2 = xPositions[i + 1]!, y2 = yPrices[i + 1]!
+
+      const y1OnOurSide = isAbove ? y1 <= baselineY : y1 >= baselineY
+      const y2OnOurSide = isAbove ? y2 <= baselineY : y2 >= baselineY
+
+      if (y1OnOurSide !== y2OnOurSide) {
+        const t = (baselineY - y1) / (y2 - y1)
+        const cx = x1 + t * (x2 - x1)
+        pts.push({ x: cx, y: baselineY })
+      }
+      if (y2OnOurSide) {
+        pts.push({ x: x2, y: y2 })
+      }
+    }
+
+    pts.push({ x: xPositions[n - 1]!, y: baselineY })
+    return pts
+  }
+
+  const abovePts = buildPolygon(true)
+  if (abovePts.length >= 3) {
+    const topY = Math.min(...abovePts.map((p) => p.y))
+    ctx.save()
+    const grad = ctx.createLinearGradient(0, topY, 0, baselineY)
+    grad.addColorStop(0, upColor)
+    grad.addColorStop(1, 'rgba(0,0,0,0)')
+    ctx.beginPath()
+    ctx.moveTo(abovePts[0]!.x, abovePts[0]!.y)
+    for (let i = 1; i < abovePts.length; i++) {
+      ctx.lineTo(abovePts[i]!.x, abovePts[i]!.y)
+    }
+    ctx.closePath()
+    ctx.fillStyle = grad
+    ctx.fill()
+    ctx.restore()
+  }
+
+  const belowPts = buildPolygon(false)
+  if (belowPts.length >= 3) {
+    const botY = Math.max(...belowPts.map((p) => p.y))
+    ctx.save()
+    const grad = ctx.createLinearGradient(0, baselineY, 0, botY)
+    grad.addColorStop(0, 'rgba(0,0,0,0)')
+    grad.addColorStop(1, downColor)
+    ctx.beginPath()
+    ctx.moveTo(belowPts[0]!.x, belowPts[0]!.y)
+    for (let i = 1; i < belowPts.length; i++) {
+      ctx.lineTo(belowPts[i]!.x, belowPts[i]!.y)
+    }
+    ctx.closePath()
+    ctx.fillStyle = grad
+    ctx.fill()
+    ctx.restore()
+  }
+}
+
+function drawSegmentLine(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  yPositions: number[],
+  _dpr: number,
+  color: string,
+  lineWidth: number,
+): void {
+  if (xPositions.length < 2) return
+
+  ctx.save()
+  ctx.strokeStyle = color
+  ctx.lineWidth = lineWidth
+  ctx.lineJoin = 'round'
+  ctx.lineCap = 'round'
+
+  ctx.beginPath()
+  ctx.moveTo(xPositions[0], yPositions[0])
+
+  for (let i = 1; i < xPositions.length; i++) {
+    ctx.lineTo(xPositions[i], yPositions[i])
+  }
+
+  ctx.stroke()
+  ctx.restore()
+}
+
+function drawVolumeBars(
+  ctx: CanvasRenderingContext2D,
+  barRects: Array<{ x: number; width: number }>,
+  volumes: number[],
+  maxVolume: number,
+  volumeAreaHeight: number,
+  paneHeight: number,
+  preClose: number,
+  dpr: number,
+  upColor: string,
+  downColor: string,
+  neutralColor: string,
+  data: TimeShareData[],
+  startIdx: number,
+): void {
+  if (!barRects.length || maxVolume <= 0) return
+
+  const snappedBottom = Math.round(paneHeight * dpr) / dpr
+
+  for (let i = 0; i < barRects.length; i++) {
+    const volume = volumes[i]
+    if (volume <= 0) continue
+
+    const barHeight = (volume / maxVolume) * volumeAreaHeight
+    const snappedH = Math.round(barHeight * dpr) / dpr
+    const snappedY = snappedBottom - snappedH
+    const { x, width } = barRects[i]!
+    const idx = startIdx + i
+
+    let barColor: string
+    if (i > 0) {
+      const price = data[idx].price
+      const prevPrice = data[idx - 1].price
+      if (price > prevPrice) barColor = upColor
+      else if (price < prevPrice) barColor = downColor
+      else barColor = neutralColor
+    } else {
+      if (data[idx].price > preClose) barColor = upColor
+      else if (data[idx].price < preClose) barColor = downColor
+      else barColor = neutralColor
+    }
+
+    const minSize = 1 / dpr
+    const finalW = width > 0 ? Math.max(width, minSize) : 0
+    const finalH = snappedH > 0 ? Math.max(snappedH, minSize) : 0
+
+    ctx.fillStyle = barColor
+    ctx.fillRect(x, snappedY, finalW, finalH)
+  }
+}
+
+@Indicator({
+  name: 'timeShare',
+  displayName: '分时',
+  category: 'main',
+  defaultPaneId: 'main',
+  mainPane: { rendererName: 'timeShare' },
+})
+class TimeShareIndicatorDefinition {
+  static rendererFactory = createTimeShareRendererPlugin
+}