waveform-analysis 0.1.64 → 0.1.66

package/src/components/rendering/WaveformTrack.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { ZERO_LINE_DEFAULTS } from '../core/constants'
 import type { WaveformAxesOptions, WaveformFrameStyle, WaveformZeroLineOptions } from '../../types'
 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'
 
@@ -22,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 {
@@ -41,7 +41,14 @@ const props = withDefaults(defineProps<Props>(), {
   interactionMode: 'zoom',
   interactive: true,
   cleanView: false,
-  zeroLine: () => ({ visible: false, color: '#98a2b3', width: 1, dash: '6 4' }),
+  zeroLine: () => ({
+    visible: true,
+    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>()
 
@@ -83,7 +90,6 @@ const resolvedFrameStyle = computed(() => {
       :clean-view="cleanView"
       :frame-number="frameNumber"
       :frame-style="resolvedFrameStyle"
-      :zero-line="zeroLine"
     />
     <WaveformTrackAxes
       :track="track"
@@ -114,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

@@ -61,6 +61,12 @@ function renderAxes() {
 
     const selection = select(element)
     selection.call(yAxis)
+    const lowestTick = Math.min(...axis.tickValues)
+    selection
+      .selectAll<SVGTextElement, number>('.tick text')
+      .attr('y', null)
+      .attr('dy', (value) => (value === lowestTick ? '0' : '0.32em'))
+      .attr('dominant-baseline', (value) => (value === lowestTick ? 'text-after-edge' : null))
     selection
       .selectAll('path.domain')
       .attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
@@ -77,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)
@@ -175,7 +181,7 @@ watch(
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="track.yAxisLabelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
+      :x="track.yAxes[0].labelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
       :y="track.height / 2 - 40"
       :width="Y_AXIS_LABEL_BAND_WIDTH"
       height="80"
@@ -184,7 +190,7 @@ watch(
     <text
       class="waveform-track__y-axis-label waveform-chart__y-axis-label"
       :fill="track.series?.color"
-      :transform="`translate(${track.yAxisLabelX}, ${track.height / 2}) rotate(-90)`"
+      :transform="`translate(${track.yAxes[0].labelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"
     >

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

@@ -258,8 +258,16 @@ export interface WaveformAxesOptions {
 
 /** Styling and visibility options for the horizontal zero-value reference line. */
 export interface WaveformZeroLineOptions {
+  /** Defaults to true. Set false to hide the reference line. */
   visible?: boolean
+  /** Defaults to red (#ff0000). */
   color?: string
+  /** Positive stroke width in pixels. Defaults to 1. */
   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
 }