waveform-analysis 0.1.54 → 0.1.57

package/src/components/core/yAxisSlotLayout.test.ts

@@ -0,0 +1,129 @@
+import { zoomIdentity } from 'd3'
+import { describe, expect, it } from 'vitest'
+
+import { DEFAULT_WAVEFORM_RENDERING_OPTIONS } from '../../core'
+import { buildTrackLayouts, buildYAxisSlots } from './layout'
+import type { DisplaySeries, DisplayTrack } from './types'
+import { Y_AXIS_RIGHT_LABEL_OFFSET } from './yAxisConstants'
+
+function series(id: string, minimum: number, maximum: number): DisplaySeries {
+  return {
+    id,
+    name: id,
+    color: '#1677ff',
+    lineType: 'linear',
+    lineStyle: 'solid',
+    pointType: 'none',
+    errorBar: { visible: false, width: 1.5, capWidth: 8 },
+    points: [
+      { x: 0, y: minimum },
+      { x: 1, y: maximum },
+    ],
+    xDomain: [0, 1],
+    yDomain: [minimum, maximum],
+    hasErrorPoints: false,
+  }
+}
+
+function track(seriesList: DisplaySeries[]): DisplayTrack {
+  return {
+    id: seriesList[0]!.id,
+    series: seriesList,
+    visibleSeries: seriesList,
+    xDomain: [0, 1],
+    yDomain: [0, 1],
+  }
+}
+
+describe('Y-axis slots', () => {
+  it('aligns matching slots across single and multi-axis tracks', () => {
+    const tracks = [
+      track([series('single', -1e120, 1e120)]),
+      track([series('left', 0, 1), series('right', 1000, 3000)]),
+      track([series('left-two', 0, 1), series('right-two', 1000, 3000)]),
+    ]
+    const yAxisSlots = buildYAxisSlots(tracks, 'multi-axis')
+    const layouts = buildTrackLayouts({
+      cells: tracks.map((series, index) => ({
+        slotIndex: index,
+        row: index,
+        column: 0,
+        left: 0,
+        top: index * 100,
+        width: 600,
+        height: 100,
+        plotHeight: 100,
+        cellHeight: 130,
+        xAxisBand: 30,
+        series,
+      })),
+      grid: {
+        rowCount: 3,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
+      displayMode: 'independent',
+      overlayMode: 'multi-axis',
+      independentTransforms: [zoomIdentity, zoomIdentity, zoomIdentity],
+      sharedZoomDomain: [0, 1],
+      timeUnit: 'ms',
+      rendering: DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      hideSecondaryLabels: false,
+      yAxisLabelX: yAxisSlots.slots.find((slot) => slot.side === 'left')!.labelOffset,
+      yAxisSlots: yAxisSlots.slots,
+      showCompactEmptyTracks: false,
+    })
+
+    expect(layouts.map((layout) => layout.yAxes[0]?.labelX)).toEqual([
+      layouts[0]?.yAxes[0]?.labelX,
+      layouts[0]?.yAxes[0]?.labelX,
+      layouts[0]?.yAxes[0]?.labelX,
+    ])
+    expect(layouts[1]?.yAxes[1]?.labelX).toBe(layouts[2]?.yAxes[1]?.labelX)
+    expect(layouts[1]?.yAxes[1]?.labelX).toBe(
+      600 +
+        yAxisSlots.slots.find((slot) => slot.side === 'right')!.labelOffset -
+        Y_AXIS_RIGHT_LABEL_OFFSET,
+    )
+    expect(yAxisSlots.slots).toMatchObject([
+      { side: 'left', sideIndex: 0, axisOffset: 0 },
+      { side: 'right', sideIndex: 0, axisOffset: 0 },
+    ])
+    expect(yAxisSlots.clearance.left).toBeGreaterThan(yAxisSlots.clearance.right)
+  })
+
+  it('reserves outward second slots for three and four value axes', () => {
+    const threeAxisSlots = buildYAxisSlots(
+      [track([series('left', 0, 1), series('right-one', 10, 20), series('right-two', 30, 40)])],
+      'multi-axis',
+    )
+    const fourAxisSlots = buildYAxisSlots(
+      [
+        track([
+          series('left-one', 0, 1),
+          series('left-two', 10, 20),
+          series('right-one', 30, 40),
+          series('right-two', 50, 60),
+        ]),
+      ],
+      'multi-axis',
+    )
+
+    expect(threeAxisSlots.slots).toMatchObject([
+      { side: 'left', sideIndex: 0, axisOffset: 0 },
+      { side: 'right', sideIndex: 0, axisOffset: 0 },
+      { side: 'right', sideIndex: 1 },
+    ])
+    expect(threeAxisSlots.slots[2]!.axisOffset).toBeGreaterThan(0)
+    expect(fourAxisSlots.slots).toMatchObject([
+      { side: 'left', sideIndex: 0, axisOffset: 0 },
+      { side: 'left', sideIndex: 1 },
+      { side: 'right', sideIndex: 0, axisOffset: 0 },
+      { side: 'right', sideIndex: 1 },
+    ])
+    expect(fourAxisSlots.slots[1]!.axisOffset).toBeLessThan(0)
+    expect(fourAxisSlots.slots[3]!.axisOffset).toBeGreaterThan(0)
+  })
+})

package/src/components/interaction/useWaveformHover.ts

@@ -62,12 +62,14 @@ export function useWaveformHover(context: HoverContext) {
     nextPoints: HoveredSeriesPoint[],
     trackIndex: number | null,
     queryX: number,
+    crosshairXByTrack: Record<number, number>,
     position: { x: number; y: number },
   ) => {
     if (isPresentationMode.value) return
     if (!hoveredPointsMatch(nextPoints)) hoverState.points = nextPoints
     hoverState.trackIndex = trackIndex
     hoverState.queryX = queryX
+    hoverState.crosshairXByTrack = crosshairXByTrack
     hoverState.position = position
     emit('point-hover', hoverState.points.find((point) => point.point)?.point ?? null)
   }
@@ -76,6 +78,7 @@ export function useWaveformHover(context: HoverContext) {
     hoverState.points = []
     hoverState.trackIndex = null
     hoverState.queryX = null
+    hoverState.crosshairXByTrack = {}
     emit('point-hover', null)
   }
   const handlePointerLeave = () => {
@@ -112,9 +115,30 @@ export function useWaveformHover(context: HoverContext) {
     const source = series.source ?? pointSourceFromPoints(series.points)
     const first = source.pointAt(0)
     const last = source.pointAt(source.length - 1)
-    if (!first || !last || xValue < first.x || xValue > last.x) return undefined
+    if (!first || !last) return undefined
+    if (xValue <= first.x) return first
+    if (xValue >= last.x) return last
     return source.nearestPoint(xValue)
   }
+  const crosshairXForTrack = (track: TrackLayout, xValue: number): number | undefined => {
+    let longestRange: [number, number] | undefined
+    let longestSpan = -Infinity
+
+    track.seriesList.forEach((series) => {
+      const source = series.source ?? pointSourceFromPoints(series.points)
+      const first = source.pointAt(0)
+      const last = source.pointAt(source.length - 1)
+      if (!first || !last) return
+      const span = last.x - first.x
+      if (span > longestSpan) {
+        longestSpan = span
+        longestRange = [first.x, last.x]
+      }
+    })
+
+    if (!longestRange) return undefined
+    return Math.max(longestRange[0], Math.min(longestRange[1], xValue))
+  }
 
   const handleIndependentPointerMove = (event: PointerEvent, trackIndex: number) => {
     if (isPresentationMode.value) return
@@ -135,10 +159,17 @@ export function useWaveformHover(context: HoverContext) {
       const nextPoints = track.seriesList.map((series) =>
         createHoveredSeriesPoint(series, trackIndex, nearestPoint(series, xValue) ?? null),
       )
-      commitHover(nextPoints, trackIndex, xValue, {
-        x: resolvedChartLeftMargin.value + track.left + pointerX,
-        y: titleAreaHeight.value + chartTopMargin.value + track.top + pointerY,
-      })
+      const crosshairX = crosshairXForTrack(track, xValue)
+      commitHover(
+        nextPoints,
+        trackIndex,
+        xValue,
+        crosshairX === undefined ? {} : { [trackIndex]: crosshairX },
+        {
+          x: resolvedChartLeftMargin.value + track.left + pointerX,
+          y: titleAreaHeight.value + chartTopMargin.value + track.top + pointerY,
+        },
+      )
     })
   }
   const handleSharedPointerMove = (event: PointerEvent) => {
@@ -166,7 +197,13 @@ export function useWaveformHover(context: HoverContext) {
           createHoveredSeriesPoint(series, track.index, nearestPoint(series, xValue) ?? null),
         ),
       )
-      commitHover(nextPoints, null, xValue, {
+      const crosshairXByTrack = Object.fromEntries(
+        trackLayouts.value.flatMap((track) => {
+          const crosshairX = crosshairXForTrack(track, xValue)
+          return crosshairX === undefined ? [] : [[track.index, crosshairX]]
+        }),
+      )
+      commitHover(nextPoints, null, xValue, crosshairXByTrack, {
         x: resolvedChartLeftMargin.value + pointerX,
         y: titleAreaHeight.value + chartTopMargin.value + pointerY,
       })

package/src/components/rendering/WaveformHoverLayer.vue

@@ -20,8 +20,9 @@ const crosshairs = computed<Crosshair[]>(() => {
 
   return props.tracks.flatMap((track) => {
     const trackIsActive = props.state.trackIndex === null || props.state.trackIndex === track.index
-    return trackIsActive && !track.isEmpty && track.hasVisibleSeries
-      ? [{ track, x: track.xScale(props.state.queryX!) }]
+    const crosshairX = props.state.crosshairXByTrack[track.index]
+    return trackIsActive && !track.isEmpty && track.hasVisibleSeries && crosshairX !== undefined
+      ? [{ track, x: track.xScale(crosshairX) }]
       : []
   })
 })

package/src/components/waveformChartCases/incompleteDataHover.test.ts

@@ -5,63 +5,151 @@ import { flushAnimationFrames } from '../../test/setup'
 import { mountSizedChart } from '../../test/waveformChart'
 
 describe('WaveformChart incomplete data hover', () => {
-  it('keeps the shared crosshair at the query time and marks out-of-range series unavailable', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: [
-          {
-            name: '完整数据',
-            data: {
-              kind: 'points',
-              points: [
-                { x: -1, y: 1 },
-                { x: -0.5, y: 2 },
-                { x: 1, y: 3 },
-              ],
+  it.each(['separated', 'compact'] as const)(
+    'clamps each track crosshair and tooltip values to data endpoints in %s mode',
+    async (displayMode) => {
+      const wrapper = await mountSizedChart(
+        {
+          kind: 'series',
+          series: [
+            {
+              name: '完整数据',
+              data: {
+                kind: 'points',
+                points: [
+                  { x: -1, y: 1 },
+                  { x: -0.5, y: 2 },
+                  { x: 1, y: 3 },
+                ],
+              },
             },
-          },
-          {
-            name: '从零开始',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 10 },
-                { x: 1, y: 20 },
-              ],
+            {
+              name: '从零开始',
+              data: {
+                kind: 'points',
+                points: [
+                  { x: 0, y: 10 },
+                  { x: 1, y: 20 },
+                ],
+              },
             },
-          },
-        ],
-      },
-      { displayMode: 'separated' },
-    )
-    const overlay = wrapper.get('.waveform-chart__overlay--shared')
-    const overlayWidth = Number(overlay.attributes('width'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
-    })
+          ],
+        },
+        { displayMode },
+      )
+      const overlay = wrapper.get('.waveform-chart__overlay--shared')
+      const overlayWidth = Number(overlay.attributes('width'))
+      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+      })
 
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', {
-        clientX: overlayWidth / 4,
-        clientY: 120,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
+      overlay.element.dispatchEvent(
+        new MouseEvent('pointermove', {
+          clientX: overlayWidth / 4,
+          clientY: 120,
+          bubbles: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
 
-    const crosshairPositions = wrapper
-      .findAll('.waveform-chart__crosshair line')
-      .map((line) => Number(line.attributes('x1')))
-    expect(crosshairPositions).toHaveLength(2)
-    expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
-    expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 4)
-    const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
-    expect(tooltipRows).toHaveLength(2)
-    expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
-    expect(tooltipRows[1].text()).toContain('无数据')
-    expect(tooltipRows[1].text()).not.toContain('x:')
-    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
-  })
+      const crosshairPositions = wrapper
+        .findAll('.waveform-chart__crosshair line')
+        .map((line) => Number(line.attributes('x1')))
+      expect(crosshairPositions).toHaveLength(2)
+      expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
+      expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
+      const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
+      expect(tooltipRows).toHaveLength(2)
+      expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
+      expect(tooltipRows[1].text()).toContain('(x:0 y:10)')
+      expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
+    },
+  )
+
+  it.each(['separated', 'compact'] as const)(
+    'uses the longest series for a shared track crosshair while clamping each tooltip row in %s mode',
+    async (displayMode) => {
+      const wrapper = await mountSizedChart(
+        {
+          kind: 'series',
+          series: [
+            {
+              name: '范围参考',
+              data: {
+                kind: 'points',
+                points: [
+                  { x: -2, y: 1 },
+                  { x: 2, y: 2 },
+                ],
+              },
+            },
+            {
+              name: '最长曲线',
+              trackId: 'same-track',
+              data: {
+                kind: 'points',
+                points: [
+                  { x: 0, y: 10 },
+                  { x: 1, y: 20 },
+                ],
+              },
+            },
+            {
+              name: '较短曲线',
+              trackId: 'same-track',
+              data: {
+                kind: 'points',
+                points: [
+                  { x: 0.25, y: 30 },
+                  { x: 0.5, y: 40 },
+                ],
+              },
+            },
+          ],
+        },
+        { displayMode },
+      )
+      const overlay = wrapper.get('.waveform-chart__overlay--shared')
+      const overlayWidth = Number(overlay.attributes('width'))
+      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+      })
+
+      overlay.element.dispatchEvent(
+        new MouseEvent('pointermove', {
+          clientX: overlayWidth / 8,
+          clientY: 120,
+          bubbles: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+
+      let crosshairPositions = wrapper
+        .findAll('.waveform-chart__crosshair line')
+        .map((line) => Number(line.attributes('x1')))
+      expect(crosshairPositions).toHaveLength(2)
+      expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
+      expect(wrapper.text()).toContain('最长曲线(x:0 y:10)')
+      expect(wrapper.text()).toContain('较短曲线(x:250 y:30)')
+
+      overlay.element.dispatchEvent(
+        new MouseEvent('pointermove', {
+          clientX: (overlayWidth * 7) / 8,
+          clientY: 120,
+          bubbles: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+
+      crosshairPositions = wrapper
+        .findAll('.waveform-chart__crosshair line')
+        .map((line) => Number(line.attributes('x1')))
+      expect(crosshairPositions[1]).toBeCloseTo((overlayWidth * 3) / 4)
+      expect(wrapper.text()).toContain('最长曲线(x:1,000 y:20)')
+      expect(wrapper.text()).toContain('较短曲线(x:500 y:40)')
+    },
+  )
 })

package/src/components/waveformChartCases/layoutAndDomains.test.ts

@@ -86,7 +86,7 @@ describe('WaveformChart', () => {
     expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(60)
   })
 
-  it('keeps the Y-axis label gutter stable while paging between value ranges', async () => {
+  it('updates the Y-axis label position while preserving the chart gutter between pages', async () => {
     const wrapper = await mountSizedChart(
       {
         kind: 'series',
@@ -118,14 +118,12 @@ describe('WaveformChart', () => {
       { grid: { rowCount: 1, columnCount: 1 } },
     )
     const initialMargin = wrapper.attributes('data-chart-left-margin')
-    const initialLabelX = wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-34')
 
     await wrapper.get('.ant-pagination-next button').trigger('click')
 
     expect(wrapper.attributes('data-chart-left-margin')).toBe(initialMargin)
-    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe(
-      initialLabelX,
-    )
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-62')
   })
 
   it('hides only secondary-column Y-axis labels when the grid is too narrow', async () => {

package/src/components/waveformChartCases/multiAxisLabelAlignment.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart multi-axis labels', () => {
+  it('aligns single-axis and multi-axis Y-axis titles in one column', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'single',
+            trackId: 'single-track',
+            name: '单轴',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: -1e120 },
+                { x: 1, y: 1e120 },
+              ],
+            },
+          },
+          {
+            id: 'left',
+            trackId: 'multi-track',
+            name: '左轴',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 0 },
+                { x: 1, y: 1 },
+              ],
+            },
+          },
+          {
+            id: 'right',
+            trackId: 'multi-track',
+            name: '右轴',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 1000 },
+                { x: 1, y: 3000 },
+              ],
+            },
+          },
+        ],
+      },
+      { overlayMode: 'multi-axis', grid: { rowCount: 2, columnCount: 1 } },
+    )
+    const tracks = wrapper.findAll('.waveform-chart__track')
+    const titleX = (transform: string | undefined) =>
+      Number(transform?.match(/translate\(([^,]+)/)?.[1])
+
+    expect(titleX(tracks[0]!.get('.waveform-chart__y-axis-label').attributes('transform'))).toBe(
+      titleX(
+        tracks[1]!.findAll('.waveform-track__multi-axis-title text')[0]!.attributes('transform'),
+      ),
+    )
+  })
+})

package/src/data/simulatedWaveforms.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createSimulatedWaveformData } from './simulatedWaveforms'
 
 describe('simulated waveform data', () => {
-  it('creates deterministic, finite seven-channel data with a two-series second frame', () => {
+  it('creates deterministic, finite eight-channel data with a three-series second frame', () => {
     const first = createSimulatedWaveformData()
     const second = createSimulatedWaveformData()
 
@@ -11,12 +11,12 @@ describe('simulated waveform data', () => {
     expect(first.kind).toBe('series')
     if (first.kind !== 'series') return
 
-    expect(first.series).toHaveLength(7)
-    expect(new Set(first.series.map((series) => series.id)).size).toBe(7)
+    expect(first.series).toHaveLength(8)
+    expect(new Set(first.series.map((series) => series.id)).size).toBe(8)
     const secondFrame = first.series.filter(
       (series) => series.trackId === 'simulated-harmonic-frame',
     )
-    expect(secondFrame).toHaveLength(2)
+    expect(secondFrame).toHaveLength(3)
     expect(new Set(first.series.map((series) => series.shotNo))).toEqual(new Set(['13300']))
     const firstSeries = first.series[0]
     expect(firstSeries).toMatchObject({

package/src/data/simulatedWaveforms.ts

@@ -84,6 +84,18 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     signal: (time) =>
       0.62 * Math.sin(TWO_PI * 0.55 * time + 0.55) + 0.18 * Math.sin(TWO_PI * 2.2 * time - 0.2),
   },
+  {
+    id: 'simulated-harmonic-correction',
+    trackId: 'simulated-harmonic-frame',
+    shotNo: '13300',
+    name: '谐波校正',
+    unit: 'V',
+    color: '#722ed1',
+    lineType: 'linear',
+    pointType: 'none',
+    signal: (time) =>
+      0.48 * Math.sin(TWO_PI * 0.55 * time - 0.35) + 0.12 * Math.sin(TWO_PI * 2.2 * time + 0.7),
+  },
   {
     id: 'simulated-damped',
     shotNo: '13300',