waveform-analysis 0.1.54 → 0.1.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +2 -2
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.js +28 -13
  4. package/dist/style.css +1 -1
  5. package/dist/types/components/core/types.d.ts +2 -0
  6. package/package.json +1 -1
  7. package/src/components/core/types.ts +2 -0
  8. package/src/components/core/useWaveformChartController.ts +1 -0
  9. package/src/components/interaction/useWaveformHover.ts +43 -6
  10. package/src/components/rendering/WaveformHoverLayer.vue +3 -2
  11. package/src/components/waveformChartCases/incompleteDataHover.test.ts +143 -55
package/src/components/waveformChartCases/incompleteDataHover.test.ts CHANGED
@@ -5,63 +5,151 @@ import { flushAnimationFrames } from '../../test/setup'
5
5
  import { mountSizedChart } from '../../test/waveformChart'
6
6
 
7
7
  describe('WaveformChart incomplete data hover', () => {
8
- it('keeps the shared crosshair at the query time and marks out-of-range series unavailable', async () => {
9
- const wrapper = await mountSizedChart(
10
- {
11
- kind: 'series',
12
- series: [
13
- {
14
- name: '完整数据',
15
- data: {
16
- kind: 'points',
17
- points: [
18
- { x: -1, y: 1 },
19
- { x: -0.5, y: 2 },
20
- { x: 1, y: 3 },
21
- ],
8
+ it.each(['separated', 'compact'] as const)(
9
+ 'clamps each track crosshair and tooltip values to data endpoints in %s mode',
10
+ async (displayMode) => {
11
+ const wrapper = await mountSizedChart(
12
+ {
13
+ kind: 'series',
14
+ series: [
15
+ {
16
+ name: '完整数据',
17
+ data: {
18
+ kind: 'points',
19
+ points: [
20
+ { x: -1, y: 1 },
21
+ { x: -0.5, y: 2 },
22
+ { x: 1, y: 3 },
23
+ ],
24
+ },
22
25
  },
23
- },
24
- {
25
- name: '从零开始',
26
- data: {
27
- kind: 'points',
28
- points: [
29
- { x: 0, y: 10 },
30
- { x: 1, y: 20 },
31
- ],
26
+ {
27
+ name: '从零开始',
28
+ data: {
29
+ kind: 'points',
30
+ points: [
31
+ { x: 0, y: 10 },
32
+ { x: 1, y: 20 },
33
+ ],
34
+ },
32
35
  },
33
- },
34
- ],
35
- },
36
- { displayMode: 'separated' },
37
- )
38
- const overlay = wrapper.get('.waveform-chart__overlay--shared')
39
- const overlayWidth = Number(overlay.attributes('width'))
40
- Object.defineProperty(overlay.element, 'getBoundingClientRect', {
41
- value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
42
- })
36
+ ],
37
+ },
38
+ { displayMode },
39
+ )
40
+ const overlay = wrapper.get('.waveform-chart__overlay--shared')
41
+ const overlayWidth = Number(overlay.attributes('width'))
42
+ Object.defineProperty(overlay.element, 'getBoundingClientRect', {
43
+ value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
44
+ })
43
45
 
44
- overlay.element.dispatchEvent(
45
- new MouseEvent('pointermove', {
46
- clientX: overlayWidth / 4,
47
- clientY: 120,
48
- bubbles: true,
49
- }),
50
- )
51
- flushAnimationFrames()
52
- await flushPromises()
46
+ overlay.element.dispatchEvent(
47
+ new MouseEvent('pointermove', {
48
+ clientX: overlayWidth / 4,
49
+ clientY: 120,
50
+ bubbles: true,
51
+ }),
52
+ )
53
+ flushAnimationFrames()
54
+ await flushPromises()
53
55
 
54
- const crosshairPositions = wrapper
55
- .findAll('.waveform-chart__crosshair line')
56
- .map((line) => Number(line.attributes('x1')))
57
- expect(crosshairPositions).toHaveLength(2)
58
- expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
59
- expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 4)
60
- const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
61
- expect(tooltipRows).toHaveLength(2)
62
- expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
63
- expect(tooltipRows[1].text()).toContain('无数据')
64
- expect(tooltipRows[1].text()).not.toContain('x:')
65
- expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
66
- })
56
+ const crosshairPositions = wrapper
57
+ .findAll('.waveform-chart__crosshair line')
58
+ .map((line) => Number(line.attributes('x1')))
59
+ expect(crosshairPositions).toHaveLength(2)
60
+ expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
61
+ expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
62
+ const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
63
+ expect(tooltipRows).toHaveLength(2)
64
+ expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
65
+ expect(tooltipRows[1].text()).toContain('(x:0 y:10)')
66
+ expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
67
+ },
68
+ )
69
+
70
+ it.each(['separated', 'compact'] as const)(
71
+ 'uses the longest series for a shared track crosshair while clamping each tooltip row in %s mode',
72
+ async (displayMode) => {
73
+ const wrapper = await mountSizedChart(
74
+ {
75
+ kind: 'series',
76
+ series: [
77
+ {
78
+ name: '范围参考',
79
+ data: {
80
+ kind: 'points',
81
+ points: [
82
+ { x: -2, y: 1 },
83
+ { x: 2, y: 2 },
84
+ ],
85
+ },
86
+ },
87
+ {
88
+ name: '最长曲线',
89
+ trackId: 'same-track',
90
+ data: {
91
+ kind: 'points',
92
+ points: [
93
+ { x: 0, y: 10 },
94
+ { x: 1, y: 20 },
95
+ ],
96
+ },
97
+ },
98
+ {
99
+ name: '较短曲线',
100
+ trackId: 'same-track',
101
+ data: {
102
+ kind: 'points',
103
+ points: [
104
+ { x: 0.25, y: 30 },
105
+ { x: 0.5, y: 40 },
106
+ ],
107
+ },
108
+ },
109
+ ],
110
+ },
111
+ { displayMode },
112
+ )
113
+ const overlay = wrapper.get('.waveform-chart__overlay--shared')
114
+ const overlayWidth = Number(overlay.attributes('width'))
115
+ Object.defineProperty(overlay.element, 'getBoundingClientRect', {
116
+ value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
117
+ })
118
+
119
+ overlay.element.dispatchEvent(
120
+ new MouseEvent('pointermove', {
121
+ clientX: overlayWidth / 8,
122
+ clientY: 120,
123
+ bubbles: true,
124
+ }),
125
+ )
126
+ flushAnimationFrames()
127
+ await flushPromises()
128
+
129
+ let crosshairPositions = wrapper
130
+ .findAll('.waveform-chart__crosshair line')
131
+ .map((line) => Number(line.attributes('x1')))
132
+ expect(crosshairPositions).toHaveLength(2)
133
+ expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
134
+ expect(wrapper.text()).toContain('最长曲线(x:0 y:10)')
135
+ expect(wrapper.text()).toContain('较短曲线(x:250 y:30)')
136
+
137
+ overlay.element.dispatchEvent(
138
+ new MouseEvent('pointermove', {
139
+ clientX: (overlayWidth * 7) / 8,
140
+ clientY: 120,
141
+ bubbles: true,
142
+ }),
143
+ )
144
+ flushAnimationFrames()
145
+ await flushPromises()
146
+
147
+ crosshairPositions = wrapper
148
+ .findAll('.waveform-chart__crosshair line')
149
+ .map((line) => Number(line.attributes('x1')))
150
+ expect(crosshairPositions[1]).toBeCloseTo((overlayWidth * 3) / 4)
151
+ expect(wrapper.text()).toContain('最长曲线(x:1,000 y:20)')
152
+ expect(wrapper.text()).toContain('较短曲线(x:500 y:40)')
153
+ },
154
+ )
67
155
  })