waveform-analysis 0.1.65 → 0.1.66

package/src/components/core/yAxisTitleLayout.ts

@@ -0,0 +1,78 @@
+import { formatYAxisTickLabel } from './layout'
+import type { TrackLayout, WaveformYAxisLayout } from './types'
+import {
+  Y_AXIS_CHARACTER_WIDTH,
+  Y_AXIS_LABEL_BAND_WIDTH,
+  Y_AXIS_TICK_PADDING,
+} from './yAxisConstants'
+
+// Match the existing 14px channel names and 11px ticks in WaveformTrack.css.
+const TITLE_FONT_SIZE = 14
+const TICK_FONT_SIZE = 11
+const TEXT_GAP = 2
+
+function estimateTitleWidth(title: string): number {
+  return Array.from(title).reduce((width, character) => {
+    // Latin labels average well below one em; full-width characters occupy one em.
+    const em = /[\u2e80-\u9fff\uf900-\ufaff\uff01-\uff60]/u.test(character)
+      ? 1
+      : /[MW@%]/u.test(character)
+        ? 0.95
+        : /[ilI1., :;|'!]/u.test(character)
+          ? 0.4
+          : 0.65
+    return width + em * TITLE_FONT_SIZE
+  }, 0)
+}
+
+type TitleTrack = Pick<TrackLayout, 'height' | 'column' | 'yAxes'>
+
+function titleDistance(track: TitleTrack, axis: WaveformYAxisLayout, yLabel?: string): number {
+  const series = axis.seriesList[0]
+  const title = series?.name.trim() || yLabel || ''
+  const halfTitleHeight = estimateTitleWidth(title) / 2
+  const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
+  const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
+  const lowestTick = Math.min(...axis.tickValues)
+  const tickWidths = axis.tickValues.flatMap((value) => {
+    // D3 places ticks at scale(value) + 0.5. The lowest label is bottom-aligned;
+    // all other labels are vertically centered using dy="0.32em".
+    const y = axis.scale(value) + 0.5
+    const top = y - (value === lowestTick ? TICK_FONT_SIZE : TICK_FONT_SIZE / 2)
+    const bottom = value === lowestTick ? y : y + TICK_FONT_SIZE / 2
+    if (bottom < titleTop || top > titleBottom) return []
+    return [
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        series?.unit,
+      ).length * Y_AXIS_CHARACTER_WIDTH,
+    ]
+  })
+  // The 20px title band already leaves 3px beside a 14px glyph.
+  return (
+    Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
+    Y_AXIS_TICK_PADDING +
+    Y_AXIS_LABEL_BAND_WIDTH / 2
+  )
+}
+
+export function alignLeftYAxisTitles(layouts: TitleTrack[], yLabel?: string): void {
+  const distances = new Map<string, number>()
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      const key = `${track.column}:${leftIndex++}`
+      distances.set(key, Math.max(distances.get(key) ?? 0, titleDistance(track, axis, yLabel)))
+    }
+  }
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      axis.labelX = axis.x - distances.get(`${track.column}:${leftIndex++}`)!
+    }
+  }
+}

package/src/components/interaction/integerZoom.ts

@@ -0,0 +1,64 @@
+import { scaleLinear } from 'd3'
+
+export interface IntegerZoomOptions {
+  integerZoom?: boolean
+  timeUnit?: 's' | 'ms'
+}
+
+export function integerZoomTicks(
+  domain: [number, number],
+  count: number,
+  options: IntegerZoomOptions,
+) {
+  if (!options.integerZoom) return scaleLinear().domain(domain).ticks(count)
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return scaleLinear()
+    .domain(domain.map((value) => value * factor))
+    .ticks(count)
+    .filter(Number.isInteger)
+    .map((value) => value / factor)
+}
+
+export function formatIntegerZoomLabel(value: number): string {
+  return String(Math.round(value))
+}
+
+function stableInteger(value: number): number {
+  const rounded = Math.round(value)
+  return Math.abs(value - rounded) <= Number.EPSILON * Math.max(1, Math.abs(value)) * 16
+    ? rounded
+    : value
+}
+
+/** Align outwards in display units; all returned coordinates remain in seconds. */
+export function alignIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  const start = stableInteger(Math.min(domain[0], domain[1]) * factor)
+  const end = stableInteger(Math.max(domain[0], domain[1]) * factor)
+  if (!Number.isSafeInteger(Math.floor(start)) || !Number.isSafeInteger(Math.ceil(end)))
+    return domain
+  const left = Math.floor(start)
+  return [left / factor, Math.max(left + 1, Math.ceil(end)) / factor]
+}
+
+/** Recover aligned endpoints after a D3 transform, tolerating floating-point round-off. */
+export function normalizeIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  return alignIntegerZoomDomain(domain, options)
+}
+
+/** Translation snaps to the nearest unit so panning preserves the visible span. */
+export function alignIntegerPanDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return [Math.round(domain[0] * factor) / factor, Math.round(domain[1] * factor) / factor]
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -8,7 +8,8 @@ import type { WaveformChartEmit } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
 import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
-import { createViewportDomainSetter } from './viewportDomain'
+import { clampViewportDomain as clampDomain, createViewportDomainSetter } from './viewportDomain'
+import { alignIntegerPanDomain } from './integerZoom'
 import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
 interface ViewportContext {
@@ -92,14 +93,6 @@ export function useWaveformViewport(context: ViewportContext) {
       height: Math.abs(active.currentY - active.startY),
     }
   })
-  const clampDomain = (domain: [number, number], boundary: [number, number]): [number, number] => {
-    const span = domain[1] - domain[0]
-    const boundarySpan = boundary[1] - boundary[0]
-    if (span >= boundarySpan) return [...boundary]
-    if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
-    if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
-    return domain
-  }
   const currentYDomains = (): Record<string, [number, number]> =>
     Object.fromEntries(
       trackLayouts.value
@@ -157,9 +150,12 @@ export function useWaveformViewport(context: ViewportContext) {
     const sourceXDomain = active.independent
       ? resolveInitialTrackDomain(track)
       : initialXDomain.value
-    const nextX = clampDomain(
-      [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
-      sourceXDomain,
+    const nextX = alignIntegerPanDomain(
+      clampDomain(
+        [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
+        sourceXDomain,
+      ),
+      props,
     )
     if (active.independent) {
       const nextTransforms = [...independentTransforms.value]

package/src/components/interaction/useWaveformZoom.ts

@@ -15,6 +15,7 @@ import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
+import { normalizeIntegerZoomDomain } from './integerZoom'
 import {
   constrainZoomDomain,
   resolveMinimumZoomSpan,
@@ -90,7 +91,8 @@ export function useWaveformZoom(context: ZoomContext) {
     const domain = event.transform
       .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
       .domain()
-    emit('zoom-intent', { start: domain[0], end: domain[1], gesture: 'wheel' })
+    const [start, end] = normalizeIntegerZoomDomain(domain as [number, number], props)
+    emit('zoom-intent', { start, end, gesture: 'wheel' })
     scheduleZoomCommit()
   }
   const handleIndependentZoom = (
@@ -108,8 +110,8 @@ export function useWaveformZoom(context: ZoomContext) {
         .rescaleX(scaleLinear(resolveInitialTrackDomain(track), [0, track.width]))
         .domain()
       emit('zoom-intent', {
-        start: domain[0],
-        end: domain[1],
+        start: normalizeIntegerZoomDomain(domain as [number, number], props)[0],
+        end: normalizeIntegerZoomDomain(domain as [number, number], props)[1],
         trackIndex,
         seriesIds: track.seriesList.map((series) => series.id),
         gesture: 'wheel',
@@ -131,7 +133,7 @@ export function useWaveformZoom(context: ZoomContext) {
       const domain = transform
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain()
-      emit('zoom-change', [domain[0], domain[1]])
+      emit('zoom-change', normalizeIntegerZoomDomain([domain[0], domain[1]], props))
     }
     if (!pendingIndependentZoomTransforms.size) return
     const nextTransforms = [...independentTransforms.value]

package/src/components/interaction/viewportDomain.ts

@@ -21,6 +21,18 @@ interface ViewportDomainContext {
   configureZoom: () => void
 }
 
+export function clampViewportDomain(
+  domain: [number, number],
+  boundary: [number, number],
+): [number, number] {
+  const span = domain[1] - domain[0]
+  const boundarySpan = boundary[1] - boundary[0]
+  if (span >= boundarySpan) return [...boundary]
+  if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
+  if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
+  return domain
+}
+
 export function createViewportDomainSetter(context: ViewportDomainContext) {
   return (domain: [number, number], trackIndex?: number) => {
     if (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) || domain[0] === domain[1])

package/src/components/interaction/zoomConstraints.ts

@@ -3,6 +3,7 @@ import { scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
 import type { WaveformPoint } from '../../types'
 import { pointSourceFromPoints, type WaveformPointSource } from '../../core/waveformPointSource'
 import { ZOOM_CONSTRAINTS } from '../core/constants'
+import { alignIntegerZoomDomain, type IntegerZoomOptions } from './integerZoom'
 
 interface PointSeriesSource {
   points: WaveformPoint[]
@@ -11,7 +12,7 @@ interface PointSeriesSource {
 
 export type ZoomSeriesGroup = readonly PointSeriesSource[]
 
-interface ZoomConstraintOptions {
+interface ZoomConstraintOptions extends IntegerZoomOptions {
   minZoomSpan?: number
   minVisiblePoints?: number
   maxZoomScale?: number | null
@@ -72,7 +73,7 @@ export function resolveMinimumZoomSpan(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): number {
-  const normalized = normalizedBoundary(boundary)
+  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
   const configuredSpan =
@@ -88,7 +89,8 @@ export function resolveMinimumZoomSpan(
       : options.maxZoomScale !== null && configuredSpan === 0 && required === 0
         ? boundarySpan / ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
         : 0
-  return Math.max(configuredSpan, pointSpan, scaleSpan)
+  const integerSpan = options.integerZoom ? (options.timeUnit === 's' ? 1 : 0.001) : 0
+  return Math.max(configuredSpan, pointSpan, scaleSpan, integerSpan)
 }
 
 function expandToMinimumPoints(
@@ -139,7 +141,7 @@ export function constrainZoomDomain(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): [number, number] {
-  const normalized = normalizedBoundary(boundary)
+  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalized
   if (Math.abs(domain[1] - domain[0]) >= boundarySpan * (1 - 1e-12)) return normalized
@@ -157,7 +159,7 @@ export function constrainZoomDomain(
   const span = Math.max(minimumSpan, Math.min(boundarySpan, expanded[1] - expanded[0]))
   const center = (expanded[0] + expanded[1]) / 2
   const start = Math.max(normalized[0], Math.min(center - span / 2, normalized[1] - span))
-  return [start, start + span]
+  return alignIntegerZoomDomain([start, start + span], options)
 }
 
 export function transformForDomain(

package/src/components/rendering/WaveformTrack.vue

@@ -6,6 +6,7 @@ import type { WaveformAxesOptions, WaveformFrameStyle, WaveformZeroLineOptions }
 import type { TrackLayout } from '../core/types'
 import type { WaveformDisplayMode, WaveformInteractionMode } from '../data/types'
 import WaveformSeriesLayer from './WaveformSeriesLayer.vue'
+import WaveformZeroLines from './WaveformZeroLines.vue'
 import WaveformTrackAxes from './WaveformTrackAxes.vue'
 import WaveformTrackBackdrop from './WaveformTrackBackdrop.vue'
 
@@ -23,9 +24,7 @@ interface Props {
   timeUnit: 's' | 'ms'
   yLabel?: string
   cleanView?: boolean
-  zeroLine?: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
-    visible: boolean
-  }
+  zeroLine?: Required<WaveformZeroLineOptions>
 }
 
 interface Emits {
@@ -47,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
     color: ZERO_LINE_DEFAULTS.COLOR,
     width: ZERO_LINE_DEFAULTS.WIDTH,
     dash: ZERO_LINE_DEFAULTS.DASH,
+    opacity: ZERO_LINE_DEFAULTS.OPACITY,
+    boundaryThreshold: ZERO_LINE_DEFAULTS.BOUNDARY_THRESHOLD,
   }),
 })
 const emit = defineEmits<Emits>()
@@ -89,7 +90,6 @@ const resolvedFrameStyle = computed(() => {
       :clean-view="cleanView"
       :frame-number="frameNumber"
       :frame-style="resolvedFrameStyle"
-      :zero-line="zeroLine"
     />
     <WaveformTrackAxes
       :track="track"
@@ -120,6 +120,13 @@ const resolvedFrameStyle = computed(() => {
     />
 
     <WaveformSeriesLayer :track="track" :clip-path-id="clipPathId" />
+    <WaveformZeroLines
+      :track="track"
+      :clip-path-id="clipPathId"
+      :inner-width="innerWidth"
+      :clean-view="cleanView"
+      :zero-line="zeroLine"
+    />
 
     <rect
       v-if="!track.isEmpty && track.hasVisibleSeries && displayMode === 'independent'"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -83,7 +83,7 @@ function renderAxes() {
           props.track.xScale.domain() as [number, number],
           props.timeUnit,
           'tick',
-          props.axes?.x?.labelFormatter,
+          props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
         ),
       )
       .tickSize(-4)

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { WaveformZeroLineOptions } from '../../types'
-import type { TrackLayout, WaveformYAxisLayout } from '../core/types'
+import type { TrackLayout } from '../core/types'
 
 interface Props {
   track: TrackLayout
@@ -11,18 +10,9 @@ interface Props {
   frameStyle: {
     backgroundColor: string
   }
-  zeroLine: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
-    visible: boolean
-  }
 }
 
-const props = defineProps<Props>()
-
-function zeroLineY(axis: WaveformYAxisLayout): number | null {
-  const [minimum, maximum] = axis.scale.domain()
-  if (!props.zeroLine.visible || minimum > 0 || maximum < 0) return null
-  return axis.scale(0)
-}
+defineProps<Props>()
 </script>
 
 <template>
@@ -98,28 +88,6 @@ function zeroLineY(axis: WaveformYAxisLayout): number | null {
     </g>
   </g>
 
-  <g
-    v-if="!track.isEmpty && track.hasVisibleSeries && zeroLine.visible && !cleanView"
-    class="waveform-track__zero-lines waveform-chart__zero-lines"
-    :clip-path="`url(#${clipPathId}-${track.index})`"
-    aria-hidden="true"
-  >
-    <template v-for="axis in track.yAxes" :key="`zero-line-${track.index}-${axis.index}`">
-      <line
-        v-if="zeroLineY(axis) !== null"
-        class="waveform-track__zero-line waveform-chart__zero-line"
-        :data-y-axis-index="axis.index"
-        x1="0"
-        :x2="track.width ?? innerWidth"
-        :y1="zeroLineY(axis) ?? 0"
-        :y2="zeroLineY(axis) ?? 0"
-        :stroke="zeroLine.color"
-        :stroke-width="zeroLine.width"
-        :stroke-dasharray="zeroLine.dash || undefined"
-      />
-    </template>
-  </g>
-
   <text
     v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined && !cleanView"
     class="waveform-track__watermark waveform-chart__watermark"

package/src/components/rendering/WaveformZeroLines.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { WaveformZeroLineOptions } from '../../types'
+import type { TrackLayout, WaveformYAxisLayout } from '../core/types'
+
+const props = defineProps<{
+  track: TrackLayout
+  clipPathId: string
+  innerWidth: number
+  cleanView: boolean
+  zeroLine: Required<WaveformZeroLineOptions>
+}>()
+
+function zeroLineY(axis: WaveformYAxisLayout): number | null {
+  const [minimum, maximum] = axis.scale.domain()
+  const tickInterval = Math.abs(axis.tickValues[1] - axis.tickValues[0])
+  const margin = tickInterval * props.zeroLine.boundaryThreshold
+  if (
+    !props.zeroLine.visible ||
+    minimum >= 0 ||
+    maximum <= 0 ||
+    -minimum < margin ||
+    maximum < margin
+  )
+    return null
+  return axis.scale(0)
+}
+</script>
+
+<template>
+  <g
+    v-if="!track.isEmpty && track.hasVisibleSeries && zeroLine.visible && !cleanView"
+    class="waveform-track__zero-lines waveform-chart__zero-lines"
+    :clip-path="`url(#${clipPathId}-${track.index})`"
+    aria-hidden="true"
+    pointer-events="none"
+  >
+    <template v-for="axis in track.yAxes" :key="`zero-line-${track.index}-${axis.index}`">
+      <line
+        v-if="zeroLineY(axis) !== null"
+        class="waveform-track__zero-line waveform-chart__zero-line"
+        :data-y-axis-index="axis.index"
+        x1="0"
+        :x2="track.width ?? innerWidth"
+        :y1="zeroLineY(axis) ?? 0"
+        :y2="zeroLineY(axis) ?? 0"
+        :stroke="zeroLine.color"
+        :stroke-opacity="zeroLine.opacity"
+        :stroke-width="zeroLine.width"
+        :stroke-dasharray="zeroLine.dash || undefined"
+      />
+    </template>
+  </g>
+</template>

package/src/demo/DemoChartHost.vue

@@ -23,6 +23,7 @@ defineExpose({ resetViewport })
       v-model:hidden-series-ids="model.hiddenSeriesIds"
       :data="model.data"
       :min-visible-points="2"
+      :integer-zoom="model.integerZoom"
       :initial-x-domain="model.initialXDomain"
       :x-domain-strategy="{ type: 'integer-ms', includeExplicit: true }"
       :display-mode="model.displayMode"

package/src/demo/DemoGridFrameControls.vue

@@ -66,6 +66,18 @@ const model = defineModel<DemoControlPanelModel>('model', { required: true })
           aria-label="零值参考线线宽"
         />
       </label>
+      <label class="frame-style-control">
+        <span>透明度</span>
+        <InputNumber
+          v-model:value="model.zeroLineOpacity"
+          :min="0"
+          :max="1"
+          :step="0.05"
+          :precision="2"
+          size="small"
+          aria-label="零值参考线透明度"
+        />
+      </label>
       <label class="frame-style-control">
         <span>线型</span>
         <Select

package/src/demo/DemoViewControls.vue

@@ -38,6 +38,10 @@ const model = defineModel<DemoControlPanelModel>('model', { required: true })
     <h2>视图</h2>
     <Button block aria-label="重置波形视图" @click="model.resetWaveformViewport"> 重置视图 </Button>
     <div class="auxiliary-style-controls" style="margin-top: 10px">
+      <label class="frame-style-control frame-style-control--switch">
+        <span>整数缩放</span>
+        <Switch v-model:checked="model.integerZoom" size="small" aria-label="整数缩放" />
+      </label>
       <label class="frame-style-control frame-style-control--switch">
         <span>数值 Tooltip</span>
         <Switch v-model:checked="model.showTooltip" size="small" aria-label="显示数值 Tooltip" />

package/src/demo/types.ts

@@ -27,6 +27,7 @@ export interface DemoControlPanelModel {
   displayMode: WaveformDisplayMode
   overlayMode: WaveformOverlayMode
   showTooltip: boolean
+  integerZoom: boolean
   plotMarginTop: number
   plotMarginBottom: number
   cleanView: boolean
@@ -38,6 +39,7 @@ export interface DemoControlPanelModel {
   zeroLineVisible: boolean
   zeroLineColor: string
   zeroLineWidth: number
+  zeroLineOpacity: number
   zeroLineDash: string
   zeroLineDashOptions: Array<SelectOption<string>>
   rowCount: number
@@ -101,6 +103,7 @@ export interface DemoChartModel {
   cleanView: boolean
   presentationMode: boolean
   showTooltip: boolean
+  integerZoom: boolean
   plotMargin: WaveformPlotMargin
   zeroLine: WaveformZeroLineOptions
   frameWatermarkVisible: boolean

package/src/index.ts

@@ -5,6 +5,7 @@
 
 // Vue 组件
 export { default as WaveformChart } from './components/WaveformChart.vue'
+export type { WaveformChartProps } from './components/core/waveformChartTypes'
 
 // 类型定义
 export type {

package/src/styles.css

@@ -329,7 +329,7 @@ body {
 
   .mobile-control-toggle {
     position: fixed;
-    top: 10px;
+    top: 58px;
     left: 10px;
     z-index: 20;
     display: inline-flex;
@@ -339,7 +339,7 @@ body {
   .control-backdrop {
     position: fixed;
     inset: 0 0 0 min(300px, calc(100vw - 48px));
-    z-index: 24;
+    z-index: 44;
     display: block;
     width: auto;
     height: 100%;
@@ -351,7 +351,7 @@ body {
   .control-panel {
     position: fixed;
     inset: 0 auto 0 0;
-    z-index: 30;
+    z-index: 50;
     width: min(300px, calc(100vw - 48px));
     visibility: hidden;
     border-radius: 0 6px 6px 0;

package/src/types/chart.ts

@@ -266,4 +266,8 @@ export interface WaveformZeroLineOptions {
   width?: number
   /** SVG stroke-dasharray. Defaults to '6 4'; use '' for a solid line. */
   dash?: string
+  /** Stroke opacity from 0 to 1. Defaults to 0.5; multiplies the color's alpha. */
+  opacity?: number
+  /** Hide within this fraction of a Y-axis tick interval from either boundary. Defaults to 0.02. */
+  boundaryThreshold?: number
 }