waveform-analysis 0.1.70 → 0.1.72

package/src/core/rendering.ts

@@ -1,3 +1,5 @@
+import { pointSourceFromPoints, type WaveformPointSource } from './waveformPointSource'
+import { withLineBoundaries } from './lineBoundary'
 import { bisector } from 'd3'
 
 import type { WaveformPoint } from '../types'
@@ -20,6 +22,7 @@ const acceptAllPoints = () => true
 
 interface PointSeriesSource {
   points: WaveformPoint[]
+  source?: WaveformPointSource
 }
 
 interface SeriesRenderSelectionOptions {
@@ -58,9 +61,10 @@ export function hasMinimumVisibleXValues(
   const required = Math.ceil(minimum)
   const xValues = new Set<number>()
   for (const series of seriesList) {
-    const range = resolveVisiblePointRange(series.points, domain)
+    const source = series.source ?? pointSourceFromPoints(series.points)
+    const range = source.visibleRange(domain)
     for (let index = range.start; index < range.end; index += 1) {
-      xValues.add(series.points[index].x)
+      xValues.add(source.pointAt(index)!.x)
       if (xValues.size >= required) return true
     }
   }
@@ -68,18 +72,20 @@ export function hasMinimumVisibleXValues(
 }
 
 function selectRenderablePointsInRange(
-  points: WaveformPoint[],
+  points: WaveformPointSource,
   range: VisiblePointRange,
   domain: [number, number],
   width: number,
   options: ResolvedWaveformRenderingOptions,
 ): WaveformPoint[] {
+  if (range.start === range.end && (range.start === 0 || range.end === points.length)) return []
   const start = Math.max(0, range.start - 1)
   const end = Math.min(points.length, range.end + 1)
   const visibleCount = end - start
   if (visibleCount <= 0) return []
   return resolveRenderablePointSelectionStrategy({ visibleCount, width, options })({
-    points,
+    points: [],
+    source: points,
     range,
     domain,
     width,
@@ -96,25 +102,25 @@ function shouldDeferLineSampling(
 }
 
 function selectSamplingPlaceholderPoints(
-  points: WaveformPoint[],
+  points: WaveformPointSource,
   range: VisiblePointRange,
   width: number,
   options: ResolvedWaveformRenderingOptions,
 ): WaveformPoint[] {
-  const start = Math.max(0, range.start - 1)
-  const end = Math.min(points.length, range.end + 1)
+  const { start, end } = range
   const count = end - start
-  if (count <= 0) return []
-  if (options.sampling.strategy === 'none') return points.slice(start, end)
   const target =
     options.sampling.maxPointCount ??
     Math.max(1, Math.floor(width * options.sampling.maxPointsPerPixel))
-  if (count <= target) return points.slice(start, end)
-  if (target === 1) return [points[start]!]
-  return Array.from({ length: target }, (_, index) => {
-    const offset = Math.round((index * (count - 1)) / (target - 1))
-    return points[start + offset]!
-  })
+  const interior =
+    count <= target || options.sampling.strategy === 'none'
+      ? points.pointsInRange(start, end)
+      : Array.from({ length: target }, (_, index) =>
+          points.pointAt(
+            start + (target === 1 ? 0 : Math.round((index * (count - 1)) / (target - 1))),
+          )!,
+        )
+  return withLineBoundaries(interior, range, points.length, (index) => points.pointAt(index)!)
 }
 
 /**
@@ -129,7 +135,7 @@ export function selectRenderablePoints(
 ): WaveformPoint[] {
   if (!points.length || width <= 0) return []
   return selectRenderablePointsInRange(
-    points,
+    pointSourceFromPoints(points),
     resolveVisiblePointRange(points, domain),
     domain,
     width,
@@ -138,7 +144,7 @@ export function selectRenderablePoints(
 }
 
 function selectDecorationPointsInRange(
-  points: WaveformPoint[],
+  points: WaveformPointSource,
   range: VisiblePointRange,
   domain: [number, number],
   width: number,
@@ -148,10 +154,10 @@ function selectDecorationPointsInRange(
   priorityPredicate?: (point: WaveformPoint) => boolean,
 ): WaveformPoint[] {
   if (!downsample || minSpacing === 0) {
-    if (predicate === acceptAllPoints) return points.slice(range.start, range.end)
+    if (predicate === acceptAllPoints) return points.pointsInRange(range.start, range.end)
     const visiblePoints: WaveformPoint[] = []
     for (let index = range.start; index < range.end; index += 1) {
-      if (predicate(points[index])) visiblePoints.push(points[index])
+      if (predicate(points.pointAt(index)!)) visiblePoints.push(points.pointAt(index)!)
     }
     return visiblePoints
   }
@@ -161,7 +167,7 @@ function selectDecorationPointsInRange(
   const span = domainEnd - domainStart
   if (span <= 0) {
     for (let index = range.start; index < range.end; index += 1) {
-      if (predicate(points[index])) return [points[index]]
+      if (predicate(points.pointAt(index)!)) return [points.pointAt(index)!]
     }
     return []
   }
@@ -208,7 +214,7 @@ function selectDecorationPointsInRange(
   }
 
   for (let index = range.start; index < range.end; index += 1) {
-    const point = points[index]
+    const point = points.pointAt(index)!
     if (!predicate(point)) continue
     first ??= point
     last = point
@@ -252,7 +258,7 @@ export function selectDecorationPoints(
 ): WaveformPoint[] {
   if (!points.length || width <= 0) return []
   return selectDecorationPointsInRange(
-    points,
+    pointSourceFromPoints(points),
     resolveVisiblePointRange(points, domain),
     domain,
     width,
@@ -268,8 +274,8 @@ function hasPointError(point: WaveformPoint): boolean {
   return lower !== 0 || upper !== 0
 }
 
-export function selectSeriesRenderPoints(
-  points: WaveformPoint[],
+export function selectSeriesRenderSourcePoints(
+  points: WaveformPointSource,
   domain: [number, number],
   width: number,
   rendering: ResolvedWaveformRenderingOptions,
@@ -278,7 +284,7 @@ export function selectSeriesRenderPoints(
   if (!points.length || width <= 0) {
     return { linePoints: [], pointRenderPoints: [], errorBarRenderPoints: [] }
   }
-  const range = resolveVisiblePointRange(points, domain)
+  const range = points.visibleRange(domain)
   const linePoints = selection.lineVisible
     ? (selection.linePointOverride ??
       (shouldDeferLineSampling(range.end - range.start, rendering)
@@ -329,3 +335,20 @@ export function selectSeriesRenderPoints(
       : [],
   }
 }
+
+/** Public array adapter; internal layout passes its normalized source directly. */
+export function selectSeriesRenderPoints(
+  points: WaveformPoint[],
+  domain: [number, number],
+  width: number,
+  rendering: ResolvedWaveformRenderingOptions,
+  selection: SeriesRenderSelectionOptions,
+): SeriesRenderPointSelection {
+  return selectSeriesRenderSourcePoints(
+    pointSourceFromPoints(points),
+    domain,
+    width,
+    rendering,
+    selection,
+  )
+}

package/src/core/renderingStrategies.ts

@@ -1,3 +1,4 @@
+import { pointSourceFromPoints, type WaveformPointSource } from './waveformPointSource'
 import type { WaveformPoint } from '../types'
 import type { ResolvedWaveformRenderingOptions } from './renderingOptions'
 
@@ -7,6 +8,7 @@ export interface VisiblePointRange {
 }
 
 export interface RenderablePointSelectionContext {
+  source?: WaveformPointSource
   points: WaveformPoint[]
   range: VisiblePointRange
   domain: [number, number]
@@ -25,17 +27,15 @@ function selectionBounds(range: VisiblePointRange, pointCount: number) {
   }
 }
 
-function pushUniquePoint(target: WaveformPoint[], point: WaveformPoint | undefined) {
-  if (point && target[target.length - 1] !== point) target.push(point)
-}
-
 export const completePointSelectionStrategy: RenderablePointSelectionStrategy = (context) => {
-  const { start, end } = selectionBounds(context.range, context.points.length)
-  return context.points.slice(start, end)
+  const source = context.source ?? pointSourceFromPoints(context.points)
+  const { start, end } = selectionBounds(context.range, source.length)
+  return source.pointsInRange(start, end)
 }
 
 export const peakPreservingPointSelectionStrategy: RenderablePointSelectionStrategy = (context) => {
-  const { points, range, domain, width, options } = context
+  const { range, domain, width, options } = context
+  const points = context.source ?? pointSourceFromPoints(context.points)
   const { start, end } = selectionBounds(range, points.length)
   const visibleCount = end - start
   if (visibleCount <= 0) return []
@@ -48,6 +48,12 @@ export const peakPreservingPointSelectionStrategy: RenderablePointSelectionStrat
   )
   const bucketCount = Math.max(1, Math.floor(maximumPointCount / 4))
   const result: WaveformPoint[] = []
+  let lastSelectedIndex = -1
+  const pushIndex = (index: number) => {
+    if (index < 0 || index >= points.length || index === lastSelectedIndex) return
+    result.push(points.pointAt(index)!)
+    lastSelectedIndex = index
+  }
   const span = domainEnd - domainStart || 1
   const bucketIndexes = Array.from({ length: 4 }, () => -1)
   let activeBucket = -1
@@ -82,13 +88,13 @@ export const peakPreservingPointSelectionStrategy: RenderablePointSelectionStrat
       bucketIndexes[position + 1] = value
     }
     for (let index = 0; index < count; index += 1) {
-      pushUniquePoint(result, points[bucketIndexes[index]])
+      pushIndex(bucketIndexes[index])
     }
   }
 
-  pushUniquePoint(result, points[start])
+  pushIndex(start)
   for (let index = range.start; index < range.end; index += 1) {
-    const point = points[index]
+    const point = points.pointAt(index)!
     const bucket = Math.min(
       bucketCount - 1,
       Math.max(0, Math.floor(((point.x - domainStart) / span) * bucketCount)),
@@ -103,11 +109,11 @@ export const peakPreservingPointSelectionStrategy: RenderablePointSelectionStrat
       continue
     }
     lastIndex = index
-    if (point.y < points[minimumIndex].y) minimumIndex = index
-    if (point.y > points[maximumIndex].y) maximumIndex = index
+    if (point.y < points.pointAt(minimumIndex)!.y) minimumIndex = index
+    if (point.y > points.pointAt(maximumIndex)!.y) maximumIndex = index
   }
   flushBucket()
-  pushUniquePoint(result, points[end - 1])
+  pushIndex(end - 1)
   return result
 }
 

package/src/core/waveformPointSource.ts

@@ -288,6 +288,26 @@ function compactSamples(data: Extract<SingleWaveformData, { kind: 'typed-samples
 function compactPoints(data: Extract<SingleWaveformData, { kind: 'typed-points' }>) {
   if (!typedPointsAreValid(data))
     return new CompactWaveformPointSource(new Float64Array(), new Float64Array())
+  // Validate once before the common dense/sorted path; always take private copies.
+  let denseOrdered = true
+  for (let index = 0; index < data.x.length; index += 1) {
+    if (
+      !Number.isFinite(data.x[index]) ||
+      !Number.isFinite(data.y[index]) ||
+      (index > 0 && data.x[index]! < data.x[index - 1]!)
+    ) {
+      denseOrdered = false
+      break
+    }
+  }
+  if (denseOrdered)
+    return new CompactWaveformPointSource(
+      data.x.slice(),
+      data.y.slice(),
+      data.error?.slice(),
+      data.lowerError?.slice(),
+      data.upperError?.slice(),
+    )
   const indexes: number[] = []
   let ordered = true
   let previousX = Number.NEGATIVE_INFINITY
@@ -356,11 +376,13 @@ export function lazyPointArray(source: WaveformPointSource): WaveformPoint[] {
     }
     return point
   }
-  return new Proxy(Array.from<WaveformPoint>({ length: source.length }), {
+  // Keep the compatibility facade sparse: no point-sized backing array is allocated for compact data.
+  return new Proxy<WaveformPoint[]>([], {
     get(target, property, receiver) {
       if (typeof property === 'string' && /^(0|[1-9]\d*)$/.test(property)) {
         return valueAt(Number(property))
       }
+      if (property === 'length') return source.length
       return Reflect.get(target, property, receiver)
     },
     has(target, property) {

package/src/core/workerSampling/outputBoundaries.ts

@@ -0,0 +1,32 @@
+import type { WaveformPointRange } from '../waveformPointSource'
+import type { WorkerSamplingOutput } from './protocol'
+import { datasetLength, datasetXAt, type StoredDataset } from './repositoryDataset'
+
+export function addOutputBoundaries(
+  output: WorkerSamplingOutput,
+  range: WaveformPointRange,
+  dataset: StoredDataset,
+): WorkerSamplingOutput {
+  const length = datasetLength(dataset)
+  if (range.start === range.end && (range.start === 0 || range.end === length)) return output
+  const prefix = range.start > 0 ? [range.start - 1] : []
+  const suffix = range.end < length ? [range.end] : []
+  if (output.kind === 'source-indexes') {
+    const values = Array.from(output.sourceIndexes)
+    return {
+      kind: 'source-indexes',
+      sourceIndexes: Uint32Array.from([...prefix, ...values, ...suffix]),
+    }
+  }
+  const x = Array.from(output.x)
+  const y = Array.from(output.y)
+  if (prefix.length) {
+    x.unshift(datasetXAt(dataset, prefix[0]!))
+    y.unshift(dataset.y[prefix[0]!]!)
+  }
+  if (suffix.length) {
+    x.push(datasetXAt(dataset, suffix[0]!))
+    y.push(dataset.y[suffix[0]!]!)
+  }
+  return { kind: 'aggregates', x: Float64Array.from(x), y: Float64Array.from(y) }
+}

package/src/core/workerSampling/repository.ts

@@ -1,3 +1,4 @@
+import { addOutputBoundaries } from './outputBoundaries'
 import type { WaveformPoint } from '../../types'
 import type { WorkerSamplingDataset } from '../waveformPointSource'
 import { javascriptSamplingBackend } from './javascriptBackend'
@@ -194,13 +195,17 @@ export class WorkerSamplingRepository {
         requestId,
         request,
         'ok',
-        {
-          kind: 'source-indexes',
-          sourceIndexes: Uint32Array.from(
-            { length: visiblePointCount },
-            (_, index) => range.start + index,
-          ),
-        },
+        addOutputBoundaries(
+          {
+            kind: 'source-indexes',
+            sourceIndexes: Uint32Array.from(
+              { length: visiblePointCount },
+              (_, index) => range.start + index,
+            ),
+          },
+          range,
+          dataset,
+        ),
         'raw',
         'raw',
         visiblePointCount,
@@ -256,18 +261,21 @@ export class WorkerSamplingRepository {
             )
           : undefined
         : dataset.index?.sample(range.start, range.end, strategy, target)
-    const output =
+    const output = addOutputBoundaries(
       indexed ??
-      outputWithGlobalIndexes(
-        backend.sample({
-          x: datasetXRange(dataset, range.start, range.end),
-          y: dataset.y.subarray(range.start, range.end),
-          points: dataset.points?.slice(range.start, range.end) ?? [],
-          strategy,
-          targetPointCount: target,
-        }),
-        range.start,
-      )
+        outputWithGlobalIndexes(
+          backend.sample({
+            x: datasetXRange(dataset, range.start, range.end),
+            y: dataset.y.subarray(range.start, range.end),
+            points: dataset.points?.slice(range.start, range.end) ?? [],
+            strategy,
+            targetPointCount: target,
+          }),
+          range.start,
+        ),
+      range,
+      dataset,
+    )
     this.cache.set(key, output)
     if (dataset.wasmDatasetHandle !== undefined && isWasmDatasetBackend(backend)) {
       dataset.wasmIndexBytes = backend.datasetIndexBytes(dataset.wasmDatasetHandle)

package/src/core/workerSampling/repositoryDataset.ts

@@ -69,8 +69,16 @@ export function isWasmDatasetBackend(
 }
 
 function copyFiniteNumericValues(sourceX: Float64Array, sourceY: Float32Array | Float64Array) {
-  const indexes: number[] = []
   const length = Math.min(sourceX.length, sourceY.length)
+  let denseOrdered = sourceX.length === sourceY.length
+  for (let index = 0; index < length && denseOrdered; index += 1) {
+    denseOrdered =
+      Number.isFinite(sourceX[index]) &&
+      Number.isFinite(sourceY[index]) &&
+      (index === 0 || sourceX[index]! >= sourceX[index - 1]!)
+  }
+  if (denseOrdered) return { x: sourceX.slice(), y: Float64Array.from(sourceY) }
+  const indexes: number[] = []
   for (let index = 0; index < length; index += 1) {
     if (Number.isFinite(sourceX[index]) && Number.isFinite(sourceY[index])) indexes.push(index)
   }
@@ -120,6 +128,30 @@ export function createStoredDataset(
         },
       }
     }
+    // Compact, already-valid sample messages need neither an index array nor a sort.
+    if (!numeric.sourceIndexes && numeric.values.every(Number.isFinite)) {
+      const y = Float64Array.from(numeric.values)
+      let min = Infinity
+      let max = -Infinity
+      for (const value of y) {
+        min = Math.min(min, value)
+        max = Math.max(max, value)
+      }
+      return {
+        y,
+        sampleStartTime: numeric.startTime,
+        sampleRate: numeric.sampleRate,
+        revision,
+        metrics: {
+          inputPointCount: y.length,
+          validPointCount: y.length,
+          xDomain: y.length
+            ? [numeric.startTime, numeric.startTime + (y.length - 1) / numeric.sampleRate]
+            : null,
+          yDomain: y.length ? [min, max] : null,
+        },
+      }
+    }
     const indexes = Array.from({ length: numeric.values.length }, (_, index) => index).filter(
       (index) => Number.isFinite(numeric.values[index]),
     )

package/src/core/workerSampling/workerRuntime.ts

@@ -31,10 +31,20 @@ function addWasmError(response: WorkerSamplingResponse): WorkerSamplingResponse
 
 const workerScope = globalThis as typeof globalThis & {
   onmessage: ((event: MessageEvent<WorkerSamplingRequest>) => void) | null
-  postMessage: (message: WorkerSamplingResponse) => void
+  postMessage: (
+    message: WorkerSamplingResponse | { type: 'request-error'; requestId: number; message: string },
+  ) => void
 }
 
 workerScope.onmessage = async (event: MessageEvent<WorkerSamplingRequest>) => {
-  if (requiresWasm(event.data)) await initializeWasmBackend()
-  workerScope.postMessage(addWasmError(repository.handle(event.data)))
+  try {
+    if (requiresWasm(event.data)) await initializeWasmBackend()
+    workerScope.postMessage(addWasmError(repository.handle(event.data)))
+  } catch (error) {
+    workerScope.postMessage({
+      type: 'request-error',
+      requestId: event.data.requestId,
+      message: error instanceof Error ? error.message : String(error),
+    })
+  }
 }

package/src/data/simulatedWaveforms.ts

@@ -140,14 +140,69 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     signal: (time, noise) => 0.7 * Math.sin(TWO_PI * 0.45 * time) + noise * 0.36,
     errors: () => ({ error: 0.12 }),
   },
+  {
+    id: 'simulated-mega-voltage',
+    shotNo: '13300',
+    name: '百万量级电压',
+    unit: 'V',
+    lineType: 'linear',
+    pointType: 'none',
+    signal: (time) => 2.4e6 * Math.sin(TWO_PI * 0.6 * time),
+  },
+  {
+    id: 'simulated-micro-current',
+    shotNo: '13300',
+    name: '微量级电流',
+    unit: 'A',
+    lineType: 'linear',
+    pointType: 'none',
+    signal: (time, noise) => 3.2e-6 * Math.sin(TWO_PI * 0.45 * time) + noise * 2e-7,
+  },
+  {
+    id: 'simulated-giga-pressure',
+    shotNo: '13300',
+    name: '十亿量级压力脉冲',
+    unit: 'Pa',
+    lineType: 'linear',
+    pointType: 'none',
+    signal: (time) => 1.8e9 + 4e8 * Math.exp(-((time - 0.75) ** 2) / 0.4),
+  },
+  {
+    id: 'simulated-nano-displacement',
+    shotNo: '13300',
+    name: '纳量级阻尼位移',
+    unit: 'm',
+    lineType: 'linear',
+    pointType: 'none',
+    signal: (time) => 6e-9 * Math.exp(-(time + 5) * 0.2) * Math.cos(TWO_PI * 0.8 * time),
+  },
 ]
 
-export function createSimulatedWaveformData(): WaveformData {
+export function createSimulatedWaveformData(trackCount?: number): WaveformData {
   const noise = createSeededNoise(0x5eed1234)
   const errorNoise = createSeededNoise(0xe220a11)
+  const definitions = [...seriesDefinitions]
+  const existingTrackCount = new Set(definitions.map((series) => series.trackId ?? series.id)).size
+  const extraTrackCount =
+    trackCount !== undefined && Number.isFinite(trackCount)
+      ? Math.max(0, Math.min(100, Math.floor(trackCount)) - existingTrackCount)
+      : 0
+  for (let index = 0; index < extraTrackCount; index += 1) {
+    const channel = existingTrackCount + index + 1
+    definitions.push({
+      id: `simulated-extra-${channel}`,
+      name: `模拟通道 ${channel}`,
+      unit: 'V',
+      lineType: 'linear',
+      pointType: 'none',
+      signal: (time) =>
+        (1 + index * 0.3) * Math.sin(TWO_PI * (0.2 + index * 0.15) * time + index) +
+        0.2 * Math.cos(TWO_PI * 1.4 * time),
+    })
+  }
   return {
     kind: 'series',
-    series: seriesDefinitions.map(({ signal, errors, minimumX, ...series }) => {
+    series: definitions.map(({ signal, errors, minimumX, ...series }) => {
       const points = createPoints(signal, noise, errors, errorNoise)
       return {
         ...series,

package/src/demo/DemoChartHost.vue

@@ -19,6 +19,8 @@ defineExpose({ resetViewport })
   <section class="chart-panel">
     <WaveformChart
       ref="waveformChartRef"
+      layout-preset="edge-compact"
+      unit-display-mode="channel-label"
       v-model:annotations="model.annotations"
       v-model:hidden-series-ids="model.hiddenSeriesIds"
       :data="model.data"
@@ -50,7 +52,9 @@ defineExpose({ resetViewport })
       :zero-line="model.zeroLine"
       :frame-number="model.frameWatermarkVisible ? 1 : undefined"
       :annotations-visible="model.annotationsVisible"
-      :interaction-mode="model.interactionMode"
+      v-model:interaction-mode="model.interactionMode"
+      :toolbar="model.toolbarVisible"
+      pannable
       @zoom-end="model.handleZoomEnd"
       @zoom-reset="model.resetWaveformViewport"
     />

package/src/demo/DemoGridFrameControls.vue

@@ -2,12 +2,14 @@
 import { InputNumber, Select, Switch } from 'ant-design-vue'
 import { ColorPicker } from 'vue3-colorpicker'
 
+import DemoYAxisPaddingControls from './DemoYAxisPaddingControls.vue'
 import type { DemoControlPanelModel } from './types'
 
 const model = defineModel<DemoControlPanelModel>('model', { required: true })
 </script>
 
 <template>
+  <DemoYAxisPaddingControls v-model:model="model" />
   <section class="control-section">
     <h2>绘图区边距</h2>
     <div class="plot-margin-controls">

package/src/demo/DemoViewControls.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button, InputNumber, Radio, Select, Switch } from 'ant-design-vue'
+import { InputNumber, Radio, Select, Switch } from 'ant-design-vue'
 
 import type { DemoControlPanelModel } from './types'
 
@@ -36,7 +36,10 @@ const model = defineModel<DemoControlPanelModel>('model', { required: true })
   </section>
   <section class="control-section">
     <h2>视图</h2>
-    <Button block aria-label="重置波形视图" @click="model.resetWaveformViewport"> 重置视图 </Button>
+    <label class="frame-style-control frame-style-control--switch">
+      <span>内置工具栏</span>
+      <Switch v-model:checked="model.toolbarVisible" size="small" aria-label="显示内置工具栏" />
+    </label>
     <div class="auxiliary-style-controls" style="margin-top: 10px">
       <label class="frame-style-control frame-style-control--switch">
         <span>整数缩放</span>

package/src/demo/DemoYAxisPaddingControls.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { InputNumber, Switch } from 'ant-design-vue'
+import type { DemoControlPanelModel } from './types'
+const model = defineModel<DemoControlPanelModel>('model', { required: true })
+</script>
+
+<template>
+  <section class="control-section">
+    <h2>Y 轴留白</h2>
+    <div v-for="side in ['upper', 'lower'] as const" :key="side" class="y-axis-padding-control">
+      <span>{{ side === 'upper' ? '上方留白' : '下方留白' }}</span>
+      <Switch
+        v-model:checked="model[`${side}PaddingEnabled`]"
+        size="small"
+        :aria-label="side === 'upper' ? '上方留白' : '下方留白'"
+      />
+      <InputNumber
+        v-model:value="model[`${side}PaddingPercent`]"
+        :min="0"
+        :step="1"
+        :disabled="!model[`${side}PaddingEnabled`]"
+        addon-after="%"
+        size="small"
+        :aria-label="side === 'upper' ? '上方留白比例' : '下方留白比例'"
+      />
+    </div>
+    <small>仅作用于自动 Y 范围；刻度取整可能增加实际留白。</small>
+  </section>
+</template>
+
+<style scoped>
+.y-axis-padding-control {
+  display: grid;
+  grid-template-columns: 60px 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+.y-axis-padding-control :deep(.ant-switch) {
+  justify-self: start;
+}
+.y-axis-padding-control :deep(.ant-input-number) {
+  width: 100%;
+}
+</style>