Skip to content

Commit b372ec9

Browse files
author
protyze
authoredFeb 18, 2022
fix(axes): Avoid duplicate key error with time scales at millisecond precision (#1756)
* Use timestamp as key for grid lines and axis ticks to support millisecond scales * Explicitly use valueOf() as axis tick / grid line element keys for time scales * Convert key values always to string and update test snapshot accordingly * Add time scale with milliseconds precision story to storybook
·
v0.88.0v0.80.0
1 parent d4daf2c commit b372ec9

File tree

3 files changed

+94
-28
lines changed

3 files changed

+94
-28
lines changed
 

‎packages/axes/src/compute.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ export const computeCartesianTicks = <Value extends ScaleValue>({
7979
}
8080
}
8181

82-
const ticks = values.map(value => ({
83-
key: typeof value === 'number' || typeof value === 'string' ? value : `${value}`,
82+
const ticks = values.map((value: Value) => ({
83+
key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
8484
value,
8585
...translate(value),
8686
...line,
@@ -128,15 +128,15 @@ export const computeGridLines = <Value extends ScaleValue>({
128128

129129
const lines: Line[] =
130130
axis === 'x'
131-
? values.map(value => ({
132-
key: `${value}`,
131+
? values.map((value: Value) => ({
132+
key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
133133
x1: position(value) ?? 0,
134134
x2: position(value) ?? 0,
135135
y1: 0,
136136
y2: height,
137137
}))
138-
: values.map(value => ({
139-
key: `${value}`,
138+
: values.map((value: Value) => ({
139+
key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
140140
x1: 0,
141141
x2: width,
142142
y1: position(value) ?? 0,

‎packages/axes/tests/__snapshots__/compute.test.tsx.snap

+22-22
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ Object {
104104
"textBaseline": "alphabetic",
105105
"ticks": Array [
106106
Object {
107-
"key": 0,
107+
"key": "0",
108108
"lineX": 0,
109109
"lineY": NaN,
110110
"textX": 0,
@@ -114,7 +114,7 @@ Object {
114114
"y": 0,
115115
},
116116
Object {
117-
"key": 50,
117+
"key": "50",
118118
"lineX": 0,
119119
"lineY": NaN,
120120
"textX": 0,
@@ -124,7 +124,7 @@ Object {
124124
"y": 0,
125125
},
126126
Object {
127-
"key": 100,
127+
"key": "100",
128128
"lineX": 0,
129129
"lineY": NaN,
130130
"textX": 0,
@@ -134,7 +134,7 @@ Object {
134134
"y": 0,
135135
},
136136
Object {
137-
"key": 150,
137+
"key": "150",
138138
"lineX": 0,
139139
"lineY": NaN,
140140
"textX": 0,
@@ -144,7 +144,7 @@ Object {
144144
"y": 0,
145145
},
146146
Object {
147-
"key": 200,
147+
"key": "200",
148148
"lineX": 0,
149149
"lineY": NaN,
150150
"textX": 0,
@@ -154,7 +154,7 @@ Object {
154154
"y": 0,
155155
},
156156
Object {
157-
"key": 250,
157+
"key": "250",
158158
"lineX": 0,
159159
"lineY": NaN,
160160
"textX": 0,
@@ -164,7 +164,7 @@ Object {
164164
"y": 0,
165165
},
166166
Object {
167-
"key": 300,
167+
"key": "300",
168168
"lineX": 0,
169169
"lineY": NaN,
170170
"textX": 0,
@@ -174,7 +174,7 @@ Object {
174174
"y": 0,
175175
},
176176
Object {
177-
"key": 350,
177+
"key": "350",
178178
"lineX": 0,
179179
"lineY": NaN,
180180
"textX": 0,
@@ -184,7 +184,7 @@ Object {
184184
"y": 0,
185185
},
186186
Object {
187-
"key": 400,
187+
"key": "400",
188188
"lineX": 0,
189189
"lineY": NaN,
190190
"textX": 0,
@@ -194,7 +194,7 @@ Object {
194194
"y": 0,
195195
},
196196
Object {
197-
"key": 450,
197+
"key": "450",
198198
"lineX": 0,
199199
"lineY": NaN,
200200
"textX": 0,
@@ -204,7 +204,7 @@ Object {
204204
"y": 0,
205205
},
206206
Object {
207-
"key": 500,
207+
"key": "500",
208208
"lineX": 0,
209209
"lineY": NaN,
210210
"textX": 0,
@@ -223,7 +223,7 @@ Object {
223223
"textBaseline": "central",
224224
"ticks": Array [
225225
Object {
226-
"key": 0,
226+
"key": "0",
227227
"lineX": NaN,
228228
"lineY": 0,
229229
"textX": NaN,
@@ -233,7 +233,7 @@ Object {
233233
"y": 0,
234234
},
235235
Object {
236-
"key": 50,
236+
"key": "50",
237237
"lineX": NaN,
238238
"lineY": 0,
239239
"textX": NaN,
@@ -243,7 +243,7 @@ Object {
243243
"y": 10,
244244
},
245245
Object {
246-
"key": 100,
246+
"key": "100",
247247
"lineX": NaN,
248248
"lineY": 0,
249249
"textX": NaN,
@@ -253,7 +253,7 @@ Object {
253253
"y": 20,
254254
},
255255
Object {
256-
"key": 150,
256+
"key": "150",
257257
"lineX": NaN,
258258
"lineY": 0,
259259
"textX": NaN,
@@ -263,7 +263,7 @@ Object {
263263
"y": 30,
264264
},
265265
Object {
266-
"key": 200,
266+
"key": "200",
267267
"lineX": NaN,
268268
"lineY": 0,
269269
"textX": NaN,
@@ -273,7 +273,7 @@ Object {
273273
"y": 40,
274274
},
275275
Object {
276-
"key": 250,
276+
"key": "250",
277277
"lineX": NaN,
278278
"lineY": 0,
279279
"textX": NaN,
@@ -283,7 +283,7 @@ Object {
283283
"y": 50,
284284
},
285285
Object {
286-
"key": 300,
286+
"key": "300",
287287
"lineX": NaN,
288288
"lineY": 0,
289289
"textX": NaN,
@@ -293,7 +293,7 @@ Object {
293293
"y": 60,
294294
},
295295
Object {
296-
"key": 350,
296+
"key": "350",
297297
"lineX": NaN,
298298
"lineY": 0,
299299
"textX": NaN,
@@ -303,7 +303,7 @@ Object {
303303
"y": 70,
304304
},
305305
Object {
306-
"key": 400,
306+
"key": "400",
307307
"lineX": NaN,
308308
"lineY": 0,
309309
"textX": NaN,
@@ -313,7 +313,7 @@ Object {
313313
"y": 80,
314314
},
315315
Object {
316-
"key": 450,
316+
"key": "450",
317317
"lineX": NaN,
318318
"lineY": 0,
319319
"textX": NaN,
@@ -323,7 +323,7 @@ Object {
323323
"y": 90,
324324
},
325325
Object {
326-
"key": 500,
326+
"key": "500",
327327
"lineX": NaN,
328328
"lineY": 0,
329329
"textX": NaN,

‎packages/line/stories/line.stories.js

+66
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,72 @@ stories.add('time scale', () => (
184184
/>
185185
))
186186

187+
stories.add('time scale milliseconds precision', () => (
188+
<Line
189+
{...commonProperties}
190+
data={[
191+
{
192+
id: 'signal A',
193+
data: [
194+
{ x: '2018-01-01 12:00:01.100', y: 7 },
195+
{ x: '2018-01-01 12:00:01.110', y: 5 },
196+
{ x: '2018-01-01 12:00:01.120', y: 11 },
197+
{ x: '2018-01-01 12:00:01.130', y: 9 },
198+
{ x: '2018-01-01 12:00:01.140', y: 12 },
199+
{ x: '2018-01-01 12:00:01.150', y: 16 },
200+
{ x: '2018-01-01 12:00:01.160', y: 13 },
201+
{ x: '2018-01-01 12:00:01.170', y: 13 },
202+
],
203+
},
204+
{
205+
id: 'signal B',
206+
data: [
207+
{ x: '2018-01-01 12:00:01.100', y: 14 },
208+
{ x: '2018-01-01 12:00:01.110', y: 14 },
209+
{ x: '2018-01-01 12:00:01.120', y: 15 },
210+
{ x: '2018-01-01 12:00:01.130', y: 11 },
211+
{ x: '2018-01-01 12:00:01.140', y: 10 },
212+
{ x: '2018-01-01 12:00:01.150', y: 12 },
213+
{ x: '2018-01-01 12:00:01.160', y: 9 },
214+
{ x: '2018-01-01 12:00:01.170', y: 7 },
215+
],
216+
},
217+
]}
218+
xScale={{
219+
type: 'time',
220+
format: '%Y-%m-%d %H:%M:%S.%L',
221+
useUTC: false,
222+
precision: 'millisecond',
223+
}}
224+
xFormat="time:%Y-%m-%d %H:%M:%S.%L"
225+
yScale={{
226+
type: 'linear',
227+
stacked: boolean('stacked', false),
228+
}}
229+
axisLeft={{
230+
legend: 'linear scale',
231+
legendOffset: 12,
232+
}}
233+
axisBottom={{
234+
format: '.%L',
235+
tickValues: 'every 10 milliseconds',
236+
legend: 'time scale',
237+
legendOffset: -12,
238+
}}
239+
curve={select('curve', curveOptions, 'monotoneX')}
240+
enablePointLabel={true}
241+
pointSymbol={CustomSymbol}
242+
pointSize={16}
243+
pointBorderWidth={1}
244+
pointBorderColor={{
245+
from: 'color',
246+
modifiers: [['darker', 0.3]],
247+
}}
248+
useMesh={true}
249+
enableSlices={false}
250+
/>
251+
))
252+
187253
stories.add('logarithmic scale', () => (
188254
<Line
189255
{...commonProperties}

0 commit comments

Comments
 (0)
Please sign in to comment.