waveform-analysis 0.1.24 → 0.1.26

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+
+import type { DisplayTrack } from './types'
+import { hasFixedYDomainForTrack, mergeYDomains, normalizeYDomain } from './yDomain'
+
+const track: DisplayTrack = {
+  id: 'shared-track',
+  series: [],
+  visibleSeries: [
+    {
+      id: 'channel-a',
+      name: 'A',
+      color: '#1677ff',
+      lineType: 'linear',
+      lineStyle: 'solid',
+      pointType: 'none',
+      errorBar: { visible: false, width: 1.5, capWidth: 8 },
+      points: [],
+      xDomain: [0, 1],
+      yDomain: [0, 1],
+      hasErrorPoints: false,
+    },
+  ],
+  xDomain: [0, 1],
+  yDomain: [0, 1],
+}
+
+describe('fixed Y domains', () => {
+  it('normalizes valid reversed domains', () => {
+    expect(normalizeYDomain([97, 3])).toEqual([3, 97])
+    expect(normalizeYDomain([-10, 10])).toEqual([-10, 10])
+  })
+
+  it.each([undefined, [1, 1], [Number.NaN, 1], [0, Number.POSITIVE_INFINITY]])(
+    'rejects an invalid domain: %j',
+    (domain) => {
+      expect(normalizeYDomain(domain as [number, number] | undefined)).toBeUndefined()
+    },
+  )
+
+  it('detects valid track, series, and global configuration only', () => {
+    expect(hasFixedYDomainForTrack(track, [-1, 1])).toBe(true)
+    expect(hasFixedYDomainForTrack(track, undefined, { 'shared-track': [-2, 2] })).toBe(true)
+    expect(hasFixedYDomainForTrack(track, undefined, { 'channel-a': [-3, 3] })).toBe(true)
+    expect(hasFixedYDomainForTrack(track, [0, 0], { 'channel-a': [1, 1] })).toBe(false)
+  })
+
+  it('merges configured and automatic series domains without padding', () => {
+    expect(
+      mergeYDomains([
+        [3, 97],
+        [-20, 40],
+      ]),
+    ).toEqual([-20, 97])
+  })
+})

package/src/components/core/yDomain.ts

@@ -0,0 +1,50 @@
+import type { DisplaySeries, DisplayTrack } from './types'
+
+export type WaveformYDomain = [number, number]
+
+export function normalizeYDomain(
+  domain: readonly [number, number] | undefined,
+): WaveformYDomain | undefined {
+  if (
+    !domain ||
+    !Number.isFinite(domain[0]) ||
+    !Number.isFinite(domain[1]) ||
+    domain[0] === domain[1]
+  ) {
+    return undefined
+  }
+  return domain[0] < domain[1] ? [domain[0], domain[1]] : [domain[1], domain[0]]
+}
+
+export function resolveTrackFixedYDomain(
+  track: Pick<DisplayTrack, 'id'>,
+  yDomains?: Record<string, WaveformYDomain>,
+): WaveformYDomain | undefined {
+  return normalizeYDomain(yDomains?.[track.id])
+}
+
+export function resolveSeriesFixedYDomain(
+  series: Pick<DisplaySeries, 'id'>,
+  yDomain?: WaveformYDomain,
+  yDomains?: Record<string, WaveformYDomain>,
+): WaveformYDomain | undefined {
+  return normalizeYDomain(yDomains?.[series.id]) ?? normalizeYDomain(yDomain)
+}
+
+export function hasFixedYDomainForTrack(
+  track: Pick<DisplayTrack, 'id' | 'visibleSeries'>,
+  yDomain?: WaveformYDomain,
+  yDomains?: Record<string, WaveformYDomain>,
+): boolean {
+  return Boolean(
+    resolveTrackFixedYDomain(track, yDomains) ||
+    track.visibleSeries.some((series) => resolveSeriesFixedYDomain(series, yDomain, yDomains)),
+  )
+}
+
+export function mergeYDomains(domains: readonly WaveformYDomain[]): WaveformYDomain {
+  return [
+    Math.min(...domains.map((domain) => domain[0])),
+    Math.max(...domains.map((domain) => domain[1])),
+  ]
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -3,6 +3,7 @@ import { computed, nextTick, type ComputedRef, type Ref, type ShallowRef } from
 
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
+import { hasFixedYDomainForTrack } from '../core/yDomain'
 import type {
   ResolvedWaveformChartProps,
   ViewportSelectionState,
@@ -190,9 +191,13 @@ export function useWaveformViewport(context: ViewportContext) {
     const nextIndependentDomains = { ...independentYDomains.value }
     const nextSharedDomains = { ...sharedYDomains.value }
     targets.forEach((target) => {
+      const chartTrack = chartTracks.value.find((item) => item.id === target.id)
+      if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
+        return
+      }
       const key = target.series.trackId ?? target.series.id
       const source = active.yDomains[key] ?? (target.yScale.domain() as [number, number])
-      const boundary = chartTracks.value.find((item) => item.id === key)?.yDomain ?? source
+      const boundary = chartTrack?.yDomain ?? source
       const ySpan = source[1] - source[0]
       const nextY = clampDomain(
         [source[0] + (dy / height) * ySpan, source[1] + (dy / height) * ySpan],

package/src/components/rendering/WaveformTrack.vue

@@ -94,7 +94,7 @@ const resolvedFrameStyle = computed(() => {
     />
 
     <rect
-      v-if="!track.isEmpty && !cleanView"
+      v-if="!track.isEmpty"
       class="waveform-track__plot-frame waveform-chart__plot-frame"
       :width="track.width ?? innerWidth"
       :height="track.height"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -103,14 +103,14 @@ watch(
 
 <template>
   <g
-    v-if="track.showXAxis && !cleanView"
+    v-if="track.showXAxis"
     ref="xAxisElement"
     class="waveform-track__axis waveform-track__axis--x waveform-chart__axis waveform-chart__axis--x"
     :class="{ 'waveform-track__axis--line-hidden': axes?.x?.lineVisible === false }"
     :transform="`translate(0, ${track.height})`"
   />
   <g
-    v-if="track.showXAxis && !cleanView"
+    v-if="track.showXAxis"
     class="waveform-track__axis-endpoints waveform-chart__axis-endpoints"
     :transform="`translate(0, ${track.height})`"
     font-family="sans-serif"
@@ -137,7 +137,7 @@ watch(
     </text>
   </g>
   <text
-    v-if="track.showXAxis && track.xAxisExponent && !cleanView"
+    v-if="track.showXAxis && track.xAxisExponent"
     class="waveform-track__axis-exponent waveform-track__axis-exponent--x waveform-chart__axis-exponent waveform-chart__axis-exponent--x"
     :x="track.width ?? innerWidth"
     :y="track.height + 27"
@@ -148,7 +148,7 @@ watch(
   </text>
 
   <g
-    v-for="axis in track.isEmpty || cleanView ? [] : track.yAxes"
+    v-for="axis in track.isEmpty ? [] : track.yAxes"
     :key="`y-axis-${track.index}-${axis.index}`"
     :ref="(element) => setYAxisElement(element, axis.index)"
     class="waveform-track__axis waveform-track__axis--y waveform-chart__axis waveform-chart__axis--y"
@@ -161,9 +161,7 @@ watch(
     :transform="`translate(${axis.x}, 0)`"
   />
   <text
-    v-for="axis in track.isEmpty || cleanView
-      ? []
-      : track.yAxes.filter((item) => item.exponentLabel)"
+    v-for="axis in track.isEmpty ? [] : track.yAxes.filter((item) => item.exponentLabel)"
     :key="`y-axis-exponent-${track.index}-${axis.index}`"
     class="waveform-track__axis-exponent waveform-track__axis-exponent--y waveform-chart__axis-exponent waveform-chart__axis-exponent--y"
     :data-y-axis-index="axis.index"

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

@@ -294,6 +294,31 @@ describe('WaveformChart', () => {
     expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('1.00')
   })
 
+  it('reacts to exact fixed Y-domain props and returns to automatic bounds', async () => {
+    const wrapper = await mountSizedChart({
+      kind: 'points',
+      points: [
+        { x: 0, y: 0 },
+        { x: 1, y: 100 },
+      ],
+    })
+    const yTickLabels = () =>
+      wrapper
+        .get('.waveform-chart__axis--y')
+        .findAll('.tick text')
+        .map((tick) => tick.text())
+
+    await wrapper.setProps({ yDomain: [3, 97] })
+    await flushPromises()
+    expect(yTickLabels()).toContain('3.00')
+    expect(yTickLabels()).toContain('97.00')
+
+    await wrapper.setProps({ yDomain: undefined })
+    await flushPromises()
+    expect(yTickLabels()).not.toContain('3.00')
+    expect(yTickLabels()).not.toContain('97.00')
+  })
+
   it('keeps annotations bound to their channel while paging', async () => {
     const wrapper = await mountSizedChart(gridSeries(3), {
       grid: { rowCount: 1, columnCount: 1 },

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

@@ -146,7 +146,7 @@ describe('WaveformChart', () => {
             kind: 'points',
             points: [
               { x: 0, y: -1 },
-              { x: 1, y: 1 },
+              { x: 10_000, y: 1 },
             ],
           },
         },
@@ -227,8 +227,8 @@ describe('WaveformChart', () => {
           data: {
             kind: 'points',
             points: [
-              { x: 0, y: 1 },
-              { x: 1, y: 2 },
+              { x: 0, y: 10_000 },
+              { x: 10_000, y: 20_000 },
             ],
           },
         },
@@ -239,7 +239,7 @@ describe('WaveformChart', () => {
             kind: 'points',
             points: [
               { x: 0, y: 2 },
-              { x: 1, y: 3 },
+              { x: 10_000, y: 3 },
             ],
           },
         },
@@ -252,6 +252,8 @@ describe('WaveformChart', () => {
       annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
       zeroLine: { visible: true },
       title: { text: 'hidden title' },
+      axes: { x: { lineVisible: false }, y: { lineVisible: false } },
+      frameStyle: { borderColor: '#dc2626', borderWidth: 2, borderStyle: 'dashed' as const },
     }
     const regularWrapper = await mountSizedChart(data, sharedProps)
     const wrapper = await mountSizedChart(data, {
@@ -285,13 +287,31 @@ describe('WaveformChart', () => {
     expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
     expect(wrapper.get('.waveform-chart__title-area').attributes('aria-hidden')).toBe('true')
     expect(wrapper.find('.waveform-chart__title-visual').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__axis').exists()).toBe(false)
+    const xAxis = wrapper.get('.waveform-chart__axis--x')
+    const yAxes = wrapper.findAll('.waveform-chart__axis--y')
+    expect(yAxes).toHaveLength(2)
+    expect(xAxis.findAll('.tick line').length).toBeGreaterThan(0)
+    expect(xAxis.findAll('.tick text').length).toBeGreaterThan(0)
+    yAxes.forEach((axis) => {
+      expect(axis.findAll('.tick line').length).toBeGreaterThan(0)
+      expect(axis.findAll('.tick text').length).toBeGreaterThan(0)
+      expect(axis.get('path.domain').attributes('display')).toBe('none')
+    })
+    expect(xAxis.get('path.domain').attributes('display')).toBe('none')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint')).toHaveLength(2)
+    expect(wrapper.get('.waveform-chart__axis-exponent--x').text()).not.toBe('')
+    expect(wrapper.get('.waveform-chart__axis-exponent--y').text()).not.toBe('')
     expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(false)
+    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
+      stroke: '#dc2626',
+      'stroke-width': '2',
+      'stroke-dasharray': '6 4',
+    })
     expect(wrapper.find('.waveform-chart__plot-background').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__watermark').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__legend-layer').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__label').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__y-axis-label').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
     expect(wrapper.find('.waveform-annotation-layer').exists()).toBe(false)
     expect(wrapper.find('.ant-pagination').exists()).toBe(false)

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

@@ -224,6 +224,56 @@ describe('WaveformChart', () => {
     window.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space' }))
   })
 
+  it('keeps a fixed Y domain through panning and viewport reset', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 100 },
+        ],
+      },
+      { pannable: true, yDomain: [3, 97] },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    const yTickLabels = () =>
+      wrapper
+        .get('.waveform-chart__axis--y')
+        .findAll('.tick text')
+        .map((tick) => tick.text())
+    const initialLabels = yTickLabels()
+
+    await wrapper.trigger('pointerenter')
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space', cancelable: true }))
+    const down = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(down, 'pointerId', { value: 34 })
+    overlay.element.dispatchEvent(down)
+    const move = new MouseEvent('pointermove', {
+      clientX: width / 2 + 20,
+      clientY: height / 2 + 40,
+      bubbles: true,
+    })
+    Object.defineProperty(move, 'pointerId', { value: 34 })
+    overlay.element.dispatchEvent(move)
+    await flushPromises()
+
+    expect(yTickLabels()).toEqual(initialLabels)
+    ;(wrapper.vm as unknown as { resetViewport: () => void }).resetViewport()
+    await flushPromises()
+    expect(yTickLabels()).toEqual(initialLabels)
+    window.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space' }))
+  })
+
   it('does not activate pannable on a chart that the pointer is outside', async () => {
     const data: WaveformData = {
       kind: 'points',

package/src/demoRoutes.css

@@ -0,0 +1,197 @@
+.demo-shell {
+  display: grid;
+  grid-template-rows: 48px minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.demo-shell__header {
+  z-index: 40;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  min-width: 0;
+  padding: 0 16px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ec;
+}
+
+.demo-shell__brand {
+  flex: 0 0 auto;
+  color: #101828;
+  font-size: 14px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.demo-shell__nav {
+  display: flex;
+  align-self: stretch;
+  min-width: 0;
+}
+
+.demo-shell__nav a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 14px;
+  color: #475467;
+  font-size: 13px;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+}
+
+.demo-shell__nav a:hover,
+.demo-shell__nav a:focus-visible,
+.demo-shell__nav a.router-link-exact-active {
+  color: #0958d9;
+}
+
+.demo-shell__nav a.router-link-exact-active {
+  background: #f0f7ff;
+  border-bottom-color: #1677ff;
+}
+
+.demo-shell__content {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fixed-domain-demo {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.fixed-domain-demo__toolbar {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.fixed-domain-demo__toolbar h1 {
+  margin: 0;
+  color: #101828;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.fixed-domain-demo__toolbar p {
+  margin: 4px 0 0;
+  color: #667085;
+  font-size: 12px;
+}
+
+.fixed-domain-demo__range-controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  min-height: 48px;
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid #e4e7ec;
+  border-radius: 6px;
+}
+
+.fixed-domain-demo__range-controls label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: #475467;
+  font-size: 12px;
+}
+
+.fixed-domain-demo__range-controls .ant-input-number {
+  width: 112px;
+}
+
+.fixed-domain-demo__range-controls strong {
+  color: #344054;
+  font-size: 12px;
+}
+
+.fixed-domain-demo__range-controls strong:not(:first-child) {
+  padding-left: 16px;
+  border-left: 1px solid #e4e7ec;
+}
+
+.fixed-domain-demo__auto-state {
+  color: #667085;
+  font-size: 12px;
+}
+
+.fixed-domain-demo__chart {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.fixed-domain-demo__chart > .waveform-chart {
+  min-height: 0;
+}
+
+@media (max-width: 900px) {
+  .demo-shell {
+    grid-template-rows: 44px minmax(0, 1fr);
+  }
+
+  .demo-shell__header {
+    gap: 8px;
+    padding: 0 8px;
+  }
+
+  .demo-shell__brand {
+    display: none;
+  }
+
+  .demo-shell__nav {
+    width: 100%;
+  }
+
+  .demo-shell__nav a {
+    flex: 1 1 0;
+    justify-content: center;
+    padding: 0 6px;
+  }
+
+  .fixed-domain-demo {
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .fixed-domain-demo__toolbar {
+    display: grid;
+    gap: 8px;
+  }
+
+  .fixed-domain-demo__toolbar .ant-radio-group {
+    display: flex;
+    width: 100%;
+  }
+
+  .fixed-domain-demo__toolbar .ant-radio-button-wrapper {
+    flex: 1 1 0;
+    padding-inline: 6px;
+    text-align: center;
+  }
+
+  .fixed-domain-demo__range-controls {
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+
+  .fixed-domain-demo__range-controls strong:not(:first-child) {
+    width: 100%;
+    padding: 8px 0 0;
+    border-top: 1px solid #e4e7ec;
+    border-left: 0;
+  }
+}

package/src/main.ts

@@ -1,7 +1,9 @@
 import { createApp } from 'vue'
 import 'ant-design-vue/dist/antd.css'
 
-import App from './App.vue'
+import DemoRouterApp from './DemoRouterApp.vue'
+import { router } from './router'
+import './demoRoutes.css'
 import './styles.css'
 
-createApp(App).mount('#app')
+createApp(DemoRouterApp).use(router).mount('#app')

package/src/router.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'
+
+import App from './App.vue'
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'workspace',
+    component: App,
+  },
+  {
+    path: '/fixed-y-domain',
+    name: 'fixed-y-domain',
+    component: () => import('./views/FixedYDomainDemo.vue'),
+  },
+]
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})

package/src/styles.css

@@ -35,8 +35,7 @@ body {
   grid-template-columns: 280px minmax(0, 1fr);
   gap: 12px;
   width: 100%;
-  height: 100vh;
-  height: 100dvh;
+  height: 100%;
   padding: 12px;
   overflow: hidden;
 }

package/src/views/FixedYDomainDemo.test.ts

@@ -0,0 +1,44 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { WaveformChart } from '../components'
+import { routes } from '../router'
+import FixedYDomainDemo from './FixedYDomainDemo.vue'
+
+describe('fixed Y-domain demo route', () => {
+  it('registers the example route', () => {
+    expect(routes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: '/fixed-y-domain',
+          name: 'fixed-y-domain',
+        }),
+      ]),
+    )
+  })
+
+  it('switches between global, automatic, and per-channel ranges', async () => {
+    const wrapper = mount(FixedYDomainDemo)
+    await flushPromises()
+    const chart = () => wrapper.getComponent(WaveformChart)
+    const modeInputs = wrapper.get('[aria-label="Y 轴范围模式"]').findAll('input[type="radio"]')
+
+    expect(chart().props('yDomain')).toEqual([-80, 80])
+    expect(chart().props('yDomains')).toBeUndefined()
+
+    await modeInputs[0]?.setValue(true)
+    await flushPromises()
+    expect(chart().props('yDomain')).toBeUndefined()
+    expect(chart().props('yDomains')).toBeUndefined()
+
+    await modeInputs[2]?.setValue(true)
+    await flushPromises()
+    expect(chart().props('yDomain')).toBeUndefined()
+    expect(chart().props('yDomains')).toEqual({
+      voltage: [-65, 65],
+      current: [-260, 260],
+    })
+
+    wrapper.unmount()
+  })
+})