waveform-analysis 0.1.53 → 0.1.55

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/core/workerSampling/repositorySampling.test.ts

@@ -49,4 +49,58 @@ describe('WorkerSamplingRepository sampling targets', () => {
     if (response.type !== 'sample-viewport-response') return
     expect(response.results[0]?.diagnostics.renderedPointCount).toBeLessThanOrEqual(4)
   })
+
+  it.each(['lttb', 'average', 'sum'] as const)(
+    'returns exactly the fixed target for %s when enough points are visible',
+    (strategy) => {
+      const source = Array.from({ length: 100_000 }, (_, index) => ({
+        x: index,
+        y: Math.sin(index / 10),
+      }))
+      const repository = new WorkerSamplingRepository()
+      repository.handle({
+        type: 'register-dataset',
+        requestId: 1,
+        datasetId: strategy,
+        revision: 0,
+        points: source,
+      })
+      const response = repository.handle({
+        type: 'sample-viewport',
+        requestId: 2,
+        series: [
+          {
+            ...sampleSeries(strategy),
+            xDomain: [0, 99_999],
+            strategy,
+            maxPointCount: 1_000,
+          },
+        ],
+      })
+
+      expect(response).toMatchObject({
+        results: [{ diagnostics: { visiblePointCount: 100_000, renderedPointCount: 1_000 } }],
+      })
+    },
+  )
+
+  it('does not add points when the visible source has fewer than the fixed target', () => {
+    const repository = new WorkerSamplingRepository()
+    register(repository, 'small-target')
+    const response = repository.handle({
+      type: 'sample-viewport',
+      requestId: 3,
+      series: [
+        {
+          ...sampleSeries('small-target'),
+          strategy: 'lttb',
+          maxPointCount: 100,
+        },
+      ],
+    })
+
+    expect(response).toMatchObject({
+      results: [{ diagnostics: { visiblePointCount: 12, renderedPointCount: 12 } }],
+    })
+  })
 })

package/src/views/WasmSamplingDemo.vue

@@ -11,6 +11,11 @@ import type {
   WaveformSamplingMode,
   WaveformSamplingStrategy,
 } from '../types'
+import {
+  samplingSizeOptions,
+  showsSamplingSize,
+  usesFixedPointCount,
+} from './wasmSamplingDemoSampling'
 
 const SERIES_COUNT = 10
 const POINTS_PER_SERIES = 100_000
@@ -68,6 +73,7 @@ const data = createDenseData()
 const mode = ref<WaveformSamplingMode>('auto')
 const strategy = ref<WaveformSamplingStrategy>('peak')
 const autoThreshold = ref(1_000)
+const maxPointsPerPixel = ref(3)
 const maxPointCount = ref(1_000)
 const minVisiblePoints = ref(2)
 const annotations = ref<WaveformAnnotation[]>([])
@@ -78,7 +84,7 @@ const rendering = computed<WaveformRenderingOptions>(() => ({
     mode: mode.value,
     strategy: strategy.value,
     autoThreshold: autoThreshold.value,
-    maxPointCount: maxPointCount.value,
+    ...samplingSizeOptions(strategy.value, maxPointsPerPixel.value, maxPointCount.value),
     rawPointLimit: 100_000,
     wasmFailureFallback: 'javascript',
   },
@@ -128,8 +134,8 @@ function pointCount(value: number | undefined) {
           size="small"
         />
       </label>
-      <label>
-        <span>最多渲染点</span>
+      <label v-if="usesFixedPointCount(strategy)">
+        <span>目标渲染点数</span>
         <InputNumber
           v-model:value="maxPointCount"
           :min="1"
@@ -138,6 +144,17 @@ function pointCount(value: number | undefined) {
           size="small"
         />
       </label>
+      <label v-else-if="showsSamplingSize(strategy)">
+        <span>每像素点数</span>
+        <InputNumber
+          v-model:value="maxPointsPerPixel"
+          :min="0.1"
+          :max="10"
+          :step="0.1"
+          size="small"
+        />
+      </label>
+      <span v-else class="sampling-demo__sampling-disabled">当前策略不执行降采样</span>
       <label>
         <span>最少可见点</span>
         <InputNumber v-model:value="minVisiblePoints" :min="2" :max="1000" :step="1" size="small" />

package/src/views/wasmSamplingDemoSampling.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  samplingSizeOptions,
+  showsSamplingSize,
+  usesFixedPointCount,
+} from './wasmSamplingDemoSampling'
+
+describe('WASM sampling demo sizing', () => {
+  it('uses pixel density for peak-oriented and extrema strategies', () => {
+    expect(samplingSizeOptions('auto', 3, 1_000)).toEqual({ maxPointsPerPixel: 3 })
+    expect(samplingSizeOptions('peak', 3, 1_000)).toEqual({ maxPointsPerPixel: 3 })
+    expect(samplingSizeOptions('minmax', 3, 1_000)).toEqual({ maxPointsPerPixel: 3 })
+  })
+
+  it('uses a fixed point count for LTTB and aggregate strategies', () => {
+    for (const strategy of ['lttb', 'average', 'sum'] as const) {
+      expect(usesFixedPointCount(strategy)).toBe(true)
+      expect(samplingSizeOptions(strategy, 3, 1_000)).toEqual({ maxPointCount: 1_000 })
+    }
+  })
+
+  it('does not show a sampling-size control or pass a size for none', () => {
+    expect(showsSamplingSize('none')).toBe(false)
+    expect(samplingSizeOptions('none', 3, 1_000)).toEqual({})
+  })
+})

package/src/views/wasmSamplingDemoSampling.ts

@@ -0,0 +1,23 @@
+import type { WaveformSamplingOptions, WaveformSamplingStrategy } from '../types'
+
+type SamplingSizeOptions = Pick<WaveformSamplingOptions, 'maxPointCount' | 'maxPointsPerPixel'>
+
+const fixedPointCountStrategies: readonly WaveformSamplingStrategy[] = ['lttb', 'average', 'sum']
+
+export function usesFixedPointCount(strategy: WaveformSamplingStrategy) {
+  return fixedPointCountStrategies.includes(strategy)
+}
+
+export function showsSamplingSize(strategy: WaveformSamplingStrategy) {
+  return strategy !== 'none'
+}
+
+export function samplingSizeOptions(
+  strategy: WaveformSamplingStrategy,
+  maxPointsPerPixel: number,
+  maxPointCount: number,
+): SamplingSizeOptions {
+  if (usesFixedPointCount(strategy)) return { maxPointCount }
+  if (!showsSamplingSize(strategy)) return {}
+  return { maxPointsPerPixel }
+}