waveform-analysis 0.1.26 → 0.1.28

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

@@ -162,35 +162,42 @@ describe('WaveformChart', () => {
     expect(wrapper.get('.waveform-chart__axis-endpoint--end').attributes('x')).toBe(
       String(trackWidth),
     )
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('4.99')
-    expect(wrapper.get('.waveform-chart__axis-exponent--x').text()).toBe('E+03')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('4990')
+    expect(wrapper.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
   })
 
   it('uses one shared scientific exponent only for large and tiny Y-axis domains', async () => {
     const cases = [
-      { values: [0, 50], exponent: null },
-      { values: [0, 254], exponent: 'E+02' },
-      { values: [0, 0.0002], exponent: 'E-04' },
+      { values: [0, 50], yDomain: [0, 50] as [number, number], exponent: null },
+      { values: [1000, 3000], yDomain: [1000, 3000] as [number, number], exponent: 'E+03' },
+      {
+        values: [0.0001, 0.0003],
+        yDomain: [0.0001, 0.0003] as [number, number],
+        exponent: 'E-04',
+      },
     ]
 
-    for (const { values, exponent } of cases) {
-      const wrapper = await mountSizedChart({
-        kind: 'points',
+    for (const { values, yDomain, exponent } of cases) {
+      const data = {
+        kind: 'points' as const,
         points: values.map((y, x) => ({ x, y })),
-      })
+      }
+      const originalValues = data.points.map((point) => point.y)
+      const wrapper = await mountSizedChart(data, { yDomain })
       const labels = wrapper
         .get('.waveform-chart__axis--y')
         .findAll('.tick text')
         .map((tick) => tick.text())
-      const exponentLabel = wrapper.find('.waveform-chart__axis-exponent--y')
+      const exponentLabels = labels.filter((label) => label.startsWith('E'))
 
       if (exponent === null) {
-        expect(exponentLabel.exists()).toBe(false)
+        expect(exponentLabels).toHaveLength(0)
       } else {
-        expect(exponentLabel.text()).toBe(exponent)
-        expect(labels.every((label) => !label.startsWith('E'))).toBe(true)
-        expect(labels.every((label) => /^-?\d+\.\d{2}$/.test(label))).toBe(true)
+        expect(exponentLabels).toHaveLength(1)
+        expect(exponentLabels[0]).toMatch(new RegExp(`^${exponent.replace('+', '\\+')} `))
       }
+      expect(wrapper.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
+      expect(data.points.map((point) => point.y)).toEqual(originalValues)
 
       wrapper.unmount()
     }
@@ -212,13 +219,13 @@ describe('WaveformChart', () => {
 
     expect(millisecondsChart.text()).toContain('时间（ms）')
     expect(millisecondTicks.length).toBeGreaterThan(0)
-    expect(millisecondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1.00')
-    expect(millisecondsChart.get('.waveform-chart__axis-exponent--x').text()).toBe('E+03')
+    expect(millisecondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1000')
+    expect(millisecondsChart.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
     expect(millisecondsChart.find('.waveform-chart__watermark').exists()).toBe(false)
 
     const secondsChart = await mountSizedChart(data, { timeUnit: 's', xLabel: 'Elapsed time' })
     expect(secondsChart.text()).toContain('Elapsed time')
-    expect(secondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1.00')
+    expect(secondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1')
     expect(secondsChart.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
   })
 
@@ -237,15 +244,15 @@ describe('WaveformChart', () => {
 
     expect(start.attributes('x')).toBe('0')
     expect(start.attributes('text-anchor')).toBe('start')
-    expect(start.text()).toBe('0.00')
+    expect(start.text()).toBe('0')
     expect(end.attributes('x')).toBe(
       wrapper.get('.waveform-chart__track').attributes('data-track-width'),
     )
     expect(end.attributes('text-anchor')).toBe('end')
-    expect(end.text()).toBe('2.00')
+    expect(end.text()).toBe('1999')
     expect(middleTickLabels.length).toBeGreaterThan(0)
-    expect(middleTickLabels).not.toContain('0.00')
-    expect(wrapper.get('.waveform-chart__axis-exponent--x').text()).toBe('E+03')
+    expect(middleTickLabels).not.toContain('0')
+    expect(wrapper.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
     expect(wrapper.findAll('.waveform-chart__grid--major line').length).toBeGreaterThan(
       middleTickLabels.length,
     )
@@ -300,6 +307,6 @@ describe('WaveformChart', () => {
     )
     expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe(initialStart)
     expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).not.toBe(initialEnd)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toContain('.')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toMatch(/^-?\d+$/)
   })
 })

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

@@ -59,7 +59,7 @@ describe('WaveformChart', () => {
     await flushPromises()
 
     expect(wrapper.findAll('.waveform-chart__axis--x')).toHaveLength(1)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2.00')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2000')
   })
 
   it('updates rendering props and disables zoom interaction', async () => {

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

@@ -33,10 +33,10 @@ describe('WaveformChart', () => {
       tracks[0].get('.waveform-chart__y-axis-label-bg').attributes('x'),
     )
 
-    expect(labelX).toBe(-103)
+    expect(labelX).toBe(-74)
     expect(labelBackgroundX).toBe(labelX - 12)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(119)
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(119)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(90)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(90)
   })
 
   it('keeps a tick-only gutter when channel labels are empty', async () => {
@@ -62,8 +62,8 @@ describe('WaveformChart', () => {
     const secondLeft = Number(tracks[1].attributes('data-track-left'))
 
     expect(wrapper.findAll('.waveform-chart__y-axis-label')).toHaveLength(0)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(89)
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(89)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(64)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(60)
   })
 
   it('keeps the Y-axis label gutter stable while paging between value ranges', async () => {
@@ -122,7 +122,7 @@ describe('WaveformChart', () => {
     const tracks = wrapper.findAll('.waveform-chart__track')
     const firstWidth = Number(tracks[0].attributes('data-track-width'))
     const secondLeft = Number(tracks[1].attributes('data-track-left'))
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(39)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(32)
   })
 
   it('uses one shared overlay and bottom-row x axes for separated and compact grids', async () => {
@@ -225,7 +225,7 @@ describe('WaveformChart', () => {
     }
   })
 
-  it('uses each track x domain in independent mode instead of the shared initial domain', async () => {
+  it('uses the shared initial x domain for every independent track by default', async () => {
     const wrapper = await mountSizedChart(
       {
         kind: 'series',
@@ -262,8 +262,10 @@ describe('WaveformChart', () => {
     )
 
     const tracks = wrapper.findAll('.waveform-chart__track')
-    expect(tracks[0]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('6.00')
-    expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('5.00')
+    expect(tracks[0]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('-8000')
+    expect(tracks[0]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+    expect(tracks[1]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('-8000')
+    expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
   })
 
   it('uses an explicit initial x domain override for an independent track', async () => {
@@ -291,7 +293,7 @@ describe('WaveformChart', () => {
       },
     )
 
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('1.00')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('1000')
   })
 
   it('reacts to exact fixed Y-domain props and returns to automatic bounds', async () => {
@@ -310,13 +312,13 @@ describe('WaveformChart', () => {
 
     await wrapper.setProps({ yDomain: [3, 97] })
     await flushPromises()
-    expect(yTickLabels()).toContain('3.00')
-    expect(yTickLabels()).toContain('97.00')
+    expect(yTickLabels()).toContain('3')
+    expect(yTickLabels()).toContain('97')
 
     await wrapper.setProps({ yDomain: undefined })
     await flushPromises()
-    expect(yTickLabels()).not.toContain('3.00')
-    expect(yTickLabels()).not.toContain('97.00')
+    expect(yTickLabels()).not.toContain('3')
+    expect(yTickLabels()).not.toContain('97')
   })
 
   it('keeps annotations bound to their channel while paging', async () => {

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

@@ -30,7 +30,7 @@ describe('WaveformChart', () => {
               kind: 'points',
               points: [
                 { x: 0, y: 0 },
-                { x: 1, y: 254 },
+                { x: 1, y: 2540 },
               ],
             },
           },
@@ -51,13 +51,13 @@ describe('WaveformChart', () => {
     )
 
     expect(
-      wrapper
-        .findAll('.waveform-chart__axis-exponent--y')
-        .map((label) => [label.attributes('data-y-axis-index'), label.text()]),
-    ).toEqual([
-      ['1', 'E+02'],
-      ['2', 'E-04'],
-    ])
+      wrapper.findAll('.waveform-chart__axis--y').map((axis) =>
+        axis
+          .findAll('.tick text')
+          .map((label) => label.text())
+          .filter((label) => label.startsWith('E')),
+      ),
+    ).toEqual([[], [expect.stringMatching(/^E\+03 /)], [expect.stringMatching(/^E-04 /)]])
   })
 
   it('reprojects annotations with the Y axis assigned to their series', async () => {

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

@@ -54,8 +54,9 @@ describe('WaveformChart', () => {
       ],
     })
 
-    expect(first.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
-    expect(second.get('.waveform-chart__axis-exponent--y').text()).toBe('E+04')
+    expect(first.get('.waveform-chart__axis--y').text()).not.toContain('E')
+    expect(second.get('.waveform-chart__axis--y').text()).toContain('E+04 ')
+    expect(second.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
   })
 
   it('renders a configurable zero line only when the Y domain contains zero', async () => {
@@ -299,8 +300,9 @@ describe('WaveformChart', () => {
     })
     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__axis-exponent--x').exists()).toBe(false)
+    expect(yAxes.some((axis) => axis.text().includes('E+04 '))).toBe(true)
+    expect(wrapper.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
     expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
       stroke: '#dc2626',

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

@@ -241,7 +241,7 @@ describe('WaveformChart presentation mode', () => {
     await flushPromises()
     overlay.element.dispatchEvent(
       new WheelEvent('wheel', {
-        deltaY: -200,
+        deltaY: 200,
         clientX: width / 2,
         clientY: height / 2,
         bubbles: true,

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

@@ -38,6 +38,21 @@ describe('WaveformChart', () => {
     expect(domain[1]).toBeLessThanOrEqual(1)
     expect(endpoints()[0]).not.toBe(initialEndpoints[0])
     expect(endpoints()[1]).toBe(initialEndpoints[1])
+
+    overlays[0].element.dispatchEvent(
+      new WheelEvent('wheel', {
+        deltaY: 4_000,
+        clientX: firstWidth - 1,
+        clientY: 130,
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    expect(endpoints()[0]).toBe(initialEndpoints[0])
+    expect(endpoints()[1]).toBe(initialEndpoints[1])
   })
 
   it('emits one zoom-end payload after a shared zoom gesture completes', async () => {

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

@@ -79,8 +79,8 @@ describe('WaveformChart', () => {
 
     expect(wrapper.emitted('zoom-change')).toBeUndefined()
     expect(wrapper.emitted('zoom-end')).toBeUndefined()
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0.00')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2.00')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2000')
   })
 
   it('ignores independent viewport dragging', async () => {
@@ -207,7 +207,7 @@ describe('WaveformChart', () => {
     expect(secondDomain[1] - secondDomain[0]).toBeCloseTo(10)
   })
 
-  it('keeps one global domain while loading narrower and wider windows', async () => {
+  it('zooms a shared viewport back out after loading a narrower data window', async () => {
     const wrapper = await mountSizedChart(
       {
         kind: 'points',
@@ -256,9 +256,57 @@ describe('WaveformChart', () => {
 
     const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
     await dispatchWheel(4000)
-    const currentDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    const zoomedOutDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount + 1)
+    expect(zoomedOutDomain[1] - zoomedOutDomain[0]).toBeCloseTo(100)
+
+    const fullDomainEventCount = wrapper.emitted('zoom-change')?.length ?? 0
+    await dispatchWheel(4000)
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(fullDomainEventCount)
+  })
+
+  it('allows zooming out when the minimum visible point count blocks zooming in', async () => {
+    const wrapper = await mountSizedChart({
+      kind: 'points',
+      points: [
+        { x: 0, y: 0 },
+        { x: 1, y: 10 },
+        { x: 2, y: 20 },
+      ],
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const width = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height: 290 }),
+    })
+    const dispatchWheel = async (deltaY: number) => {
+      overlay.element.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY,
+          clientX: width / 2,
+          clientY: 145,
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+    }
+
+    await dispatchWheel(-4000)
+    const zoomedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(zoomedDomain[1] - zoomedDomain[0]).toBeCloseTo(0.05)
+
+    await wrapper.setProps({ minVisiblePoints: 10 })
+    await flushPromises()
+    const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
+    await dispatchWheel(-1000)
     expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount)
-    expect(currentDomain[1] - currentDomain[0]).toBeCloseTo(2.5)
+
+    await dispatchWheel(4000)
+    const zoomedOutDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount + 1)
+    expect(zoomedOutDomain).toEqual([0, 2])
   })
 
   it('resets a shared viewport on double-click and emits zoom-reset', async () => {
@@ -285,14 +333,14 @@ describe('WaveformChart', () => {
     )
     flushAnimationFrames()
     await flushPromises()
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe('0.00')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe('0')
 
     overlay.element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))
     await flushPromises()
 
     expect(wrapper.emitted('zoom-reset')).toHaveLength(1)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0.00')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2.00')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2000')
   })
 
   it('exposes resetViewport for independent tracks', async () => {
@@ -316,13 +364,13 @@ describe('WaveformChart', () => {
     )
     flushAnimationFrames()
     await flushPromises()
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).not.toBe('0.00')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).not.toBe('0')
 
     const chart = wrapper.vm as unknown as { resetViewport: () => void }
     chart.resetViewport()
     await flushPromises()
 
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).toBe('0.00')
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--end')[0].text()).toBe('1.00')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).toBe('0')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--end')[0].text()).toBe('1000')
   })
 })

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

@@ -0,0 +1,114 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart wheel zoom out', () => {
+  it('restores an independent initial domain after replacing data with a narrow window', async () => {
+    const createData = (start: number, end: number) => ({
+      kind: 'series' as const,
+      series: [
+        {
+          id: 'channel-a',
+          name: '通道 A',
+          data: {
+            kind: 'points' as const,
+            points: [
+              { x: start, y: 0 },
+              { x: end, y: 1 },
+            ],
+          },
+        },
+      ],
+    })
+    const wrapper = await mountSizedChart(createData(-5, 5), {
+      displayMode: 'independent',
+      initialXDomain: [-5, 5],
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const overlayWidth = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+    })
+    const dispatchWheel = async (deltaY: number) => {
+      overlay.element.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY,
+          clientX: overlayWidth / 2,
+          clientY: 145,
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+    }
+    const endpoints = () => ({
+      start: wrapper.get('.waveform-chart__axis-endpoint--start').text(),
+      end: wrapper.get('.waveform-chart__axis-endpoint--end').text(),
+    })
+
+    expect(endpoints()).toEqual({ start: '-5000', end: '5000' })
+    await dispatchWheel(-4000)
+    expect(endpoints()).not.toEqual({ start: '-5000', end: '5000' })
+
+    await wrapper.setProps({ data: createData(-0.125, 0.125) })
+    await flushPromises()
+    await dispatchWheel(4000)
+
+    expect(endpoints()).toEqual({ start: '-5000', end: '5000' })
+  })
+
+  it('emits one zoom-end payload after zooming a shared viewport out', async () => {
+    vi.useFakeTimers()
+    try {
+      const wrapper = await mountSizedChart({
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 2, y: 1 },
+        ],
+      })
+      const overlay = wrapper.get('.waveform-chart__overlay')
+      const overlayWidth = Number(overlay.attributes('width'))
+      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+      })
+      const dispatchWheel = (deltaY: number) =>
+        overlay.element.dispatchEvent(
+          new WheelEvent('wheel', {
+            deltaY,
+            clientX: overlayWidth / 2,
+            clientY: 145,
+            bubbles: true,
+            cancelable: true,
+          }),
+        )
+
+      dispatchWheel(-4000)
+      flushAnimationFrames()
+      await vi.advanceTimersByTimeAsync(200)
+      await flushPromises()
+      const zoomedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+      const zoomedSpan = zoomedDomain[1] - zoomedDomain[0]
+
+      dispatchWheel(1000)
+      flushAnimationFrames()
+      expect(wrapper.emitted('zoom-end')).toHaveLength(1)
+      await vi.advanceTimersByTimeAsync(200)
+      await flushPromises()
+
+      const zoomedOutPayload = wrapper.emitted('zoom-end')?.at(-1)?.[0] as {
+        start: number
+        end: number
+        gesture: string
+      }
+      expect(wrapper.emitted('zoom-end')).toHaveLength(2)
+      expect(zoomedOutPayload.end - zoomedOutPayload.start).toBeGreaterThan(zoomedSpan)
+      expect(zoomedOutPayload.gesture).toBe('wheel')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

package/src/utils/formatters.test.ts

@@ -3,69 +3,78 @@ import { describe, expect, it } from 'vitest'
 import {
   formatAnnotationTime,
   formatAxisTime,
-  formatAxisTimeExponent,
   formatEndpointTime,
   formatPlainNumber,
   formatScientificAxisExponent,
   formatScientificAxisLabel,
   formatTooltipNumber,
+  formatTooltipTime,
+  resolveScientificAxisExponent,
   shouldUseScientificAxisLabel,
 } from './formatters'
 
 describe('waveform number formatters', () => {
   it('uses the reference Y-axis scientific notation boundaries', () => {
     expect(shouldUseScientificAxisLabel(0)).toBe(false)
-    expect(shouldUseScientificAxisLabel(0.009)).toBe(true)
-    expect(shouldUseScientificAxisLabel(0.01)).toBe(false)
-    expect(shouldUseScientificAxisLabel(99.99)).toBe(false)
-    expect(shouldUseScientificAxisLabel(100)).toBe(true)
+    expect(shouldUseScientificAxisLabel(0.000999)).toBe(true)
+    expect(shouldUseScientificAxisLabel(0.001)).toBe(false)
+    expect(shouldUseScientificAxisLabel(999.999)).toBe(false)
+    expect(shouldUseScientificAxisLabel(1000)).toBe(true)
   })
 
-  it('shares one separate exponent across an axis', () => {
-    const positiveAxis = { axisMin: 0, axisMax: 254 }
-    expect(formatScientificAxisLabel(127, positiveAxis)).toBe('1.27')
-    expect(formatScientificAxisLabel(254, positiveAxis)).toBe('2.54')
-    expect(formatScientificAxisExponent(0, 254)).toBe('E+02')
+  it('prefixes one shared exponent to the largest visible tick', () => {
+    const positiveAxis = { axisMin: 1000, axisMax: 3000 }
+    expect(formatScientificAxisLabel(1000, positiveAxis)).toBe('1')
+    expect(formatScientificAxisLabel(2000, positiveAxis)).toBe('2')
+    expect(formatScientificAxisLabel(3000, positiveAxis)).toBe('E+03 3')
+    expect(formatScientificAxisLabel(2000, { ...positiveAxis, topTickValue: 2000 })).toBe('E+03 2')
+    expect(formatScientificAxisExponent(1000, 3000)).toBe('E+03')
     expect(formatScientificAxisExponent(0, 1e120)).toBe('E+120')
 
-    const tinyAxis = { axisMin: 0, axisMax: 0.0002 }
-    expect(formatScientificAxisLabel(0.0001, tinyAxis)).toBe('1.00')
-    expect(formatScientificAxisLabel(0.0002, tinyAxis)).toBe('2.00')
-    expect(formatScientificAxisExponent(0, 0.0002)).toBe('E-04')
+    const tinyAxis = { axisMin: 0.0001, axisMax: 0.0003 }
+    expect(formatScientificAxisLabel(0.0001, tinyAxis)).toBe('1')
+    expect(formatScientificAxisLabel(0.0002, tinyAxis)).toBe('2')
+    expect(formatScientificAxisLabel(0.0003, tinyAxis)).toBe('E-04 3')
+    expect(formatScientificAxisExponent(0.0001, 0.0003)).toBe('E-04')
+  })
 
-    const negativeAxis = { axisMin: -254, axisMax: 0 }
-    expect(formatScientificAxisLabel(-254, negativeAxis)).toBe('-2.54')
-    expect(formatScientificAxisLabel(0, negativeAxis)).toBe('0.00')
-    expect(formatScientificAxisExponent(-254, 0)).toBe('E+02')
+  it('derives the exponent from Math.max(axisMin, axisMax)', () => {
+    expect(resolveScientificAxisExponent(-9000, -1000)).toBe(3)
+    expect(resolveScientificAxisExponent(-10_000, 3000)).toBe(3)
+    expect(resolveScientificAxisExponent(-1000, 0)).toBeNull()
+    expect(resolveScientificAxisExponent(0, 0)).toBeNull()
   })
 
-  it('keeps plain axes at two decimals and removes negative zero', () => {
-    expect(formatScientificAxisLabel(99.99, { axisMin: 0, axisMax: 99.99 })).toBe('99.99')
-    expect(formatScientificAxisLabel(0.01, { axisMin: 0, axisMax: 0.01 })).toBe('0.01')
-    expect(formatScientificAxisLabel(-0.001, { axisMin: -1, axisMax: 1 })).toBe('0.00')
+  it('keeps five significant digits, removes trailing zeroes, and limits decimals to four', () => {
+    expect(formatScientificAxisLabel(123.456, { axisMin: 0, axisMax: 999 })).toBe('123.46')
+    expect(formatScientificAxisLabel(1234.56, { axisMin: 0, axisMax: 9999 })).toBe('1.2346')
+    expect(formatScientificAxisLabel(3000, { axisMin: 1000, axisMax: 3000 })).toBe('E+03 3')
+    expect(formatScientificAxisLabel(-0, { axisMin: -1, axisMax: 1 })).toBe('0')
     expect(formatScientificAxisLabel(Number.NaN)).toBe('NaN')
     expect(formatScientificAxisLabel(Number.POSITIVE_INFINITY)).toBe('Infinity')
     expect(formatScientificAxisExponent(0, 0)).toBeNull()
   })
 
-  it('formats X-axis ticks and endpoints from the selected display unit', () => {
+  it('formats X-axis ticks and endpoints as plain integers in the selected display unit', () => {
     const domain: [number, number] = [0, 1]
-    expect(formatAxisTime(0.5, 'ms', domain)).toBe('0.50')
-    expect(formatEndpointTime(1, domain, 'ms')).toBe('1.00')
-    expect(formatAxisTimeExponent(domain, 'ms')).toBe('E+03')
-    expect(formatAxisTime(0.5, 's', domain)).toBe('0.50')
-    expect(formatEndpointTime(1, domain, 's')).toBe('1.00')
-    expect(formatAxisTimeExponent(domain, 's')).toBeNull()
+    expect(formatAxisTime(0.5004, 'ms', domain)).toBe('500')
+    expect(formatEndpointTime(1, domain, 'ms')).toBe('1000')
+    expect(formatAxisTime(0.5, 's', domain)).toBe('1')
+    expect(formatEndpointTime(1, domain, 's')).toBe('1')
 
     const tinyDomain: [number, number] = [0, 0.000001]
-    expect(formatEndpointTime(0.000001, tinyDomain, 's')).toBe('1.00')
-    expect(formatAxisTimeExponent(tinyDomain, 's')).toBe('E-06')
+    expect(formatEndpointTime(0.000001, tinyDomain, 's')).toBe('0')
+    expect(formatAxisTime(-0.000001, 's', tinyDomain)).toBe('0')
+    expect(formatAxisTime(1e21, 's')).toBe('1000000000000000000000')
+    expect(formatAxisTime(Number.POSITIVE_INFINITY, 's')).toBe('Infinity')
   })
 
   it('formats tooltip and raw values for their display contexts', () => {
     expect(formatTooltipNumber(12345.67891)).toBe('12,345.6789')
     expect(formatTooltipNumber(-0)).toBe('0')
     expect(formatTooltipNumber(Number.POSITIVE_INFINITY)).toBe('Infinity')
+    expect(formatTooltipTime(1.234567, 's')).toBe('1.2346')
+    expect(formatTooltipTime(1, 'ms')).toBe('1,000')
     expect(formatPlainNumber(0.0000001)).toBe('0.0000001')
     expect(formatPlainNumber(1e21)).toBe('1000000000000000000000')
     expect(formatPlainNumber(-0)).toBe('0')