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
plouc · Feb 18, 2022 · b372ec9 · b372ec9
1 parent d4daf2c
commit b372ec9
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 28 deletions.
diff --git a/packages/axes/src/compute.ts b/packages/axes/src/compute.ts
@@ -79,8 +79,8 @@ export const computeCartesianTicks = <Value extends ScaleValue>({
  }
  }
 
- const ticks = values.map(value => ({
- key: typeof value === 'number' || typeof value === 'string' ? value : `${value}`,
+ const ticks = values.map((value: Value) => ({
+ key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
  value,
  ...translate(value),
  ...line,
@@ -128,15 +128,15 @@ export const computeGridLines = <Value extends ScaleValue>({
 
  const lines: Line[] =
  axis === 'x'
- ? values.map(value => ({
- key: `${value}`,
+ ? values.map((value: Value) => ({
+ key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
  x1: position(value) ?? 0,
  x2: position(value) ?? 0,
  y1: 0,
  y2: height,
  }))
- : values.map(value => ({
- key: `${value}`,
+ : values.map((value: Value) => ({
+ key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
  x1: 0,
  x2: width,
  y1: position(value) ?? 0,

diff --git a/packages/axes/tests/__snapshots__/compute.test.tsx.snap b/packages/axes/tests/__snapshots__/compute.test.tsx.snap
@@ -104,7 +104,7 @@ Object {
  "textBaseline": "alphabetic",
  "ticks": Array [
  Object {
- "key": 0,
+ "key": "0",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -114,7 +114,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 50,
+ "key": "50",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -124,7 +124,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 100,
+ "key": "100",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -134,7 +134,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 150,
+ "key": "150",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -144,7 +144,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 200,
+ "key": "200",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -154,7 +154,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 250,
+ "key": "250",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -164,7 +164,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 300,
+ "key": "300",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -174,7 +174,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 350,
+ "key": "350",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -184,7 +184,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 400,
+ "key": "400",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -194,7 +194,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 450,
+ "key": "450",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -204,7 +204,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 500,
+ "key": "500",
  "lineX": 0,
  "lineY": NaN,
  "textX": 0,
@@ -223,7 +223,7 @@ Object {
  "textBaseline": "central",
  "ticks": Array [
  Object {
- "key": 0,
+ "key": "0",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -233,7 +233,7 @@ Object {
  "y": 0,
  },
  Object {
- "key": 50,
+ "key": "50",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -243,7 +243,7 @@ Object {
  "y": 10,
  },
  Object {
- "key": 100,
+ "key": "100",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -253,7 +253,7 @@ Object {
  "y": 20,
  },
  Object {
- "key": 150,
+ "key": "150",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -263,7 +263,7 @@ Object {
  "y": 30,
  },
  Object {
- "key": 200,
+ "key": "200",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -273,7 +273,7 @@ Object {
  "y": 40,
  },
  Object {
- "key": 250,
+ "key": "250",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -283,7 +283,7 @@ Object {
  "y": 50,
  },
  Object {
- "key": 300,
+ "key": "300",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -293,7 +293,7 @@ Object {
  "y": 60,
  },
  Object {
- "key": 350,
+ "key": "350",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -303,7 +303,7 @@ Object {
  "y": 70,
  },
  Object {
- "key": 400,
+ "key": "400",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -313,7 +313,7 @@ Object {
  "y": 80,
  },
  Object {
- "key": 450,
+ "key": "450",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,
@@ -323,7 +323,7 @@ Object {
  "y": 90,
  },
  Object {
- "key": 500,
+ "key": "500",
  "lineX": NaN,
  "lineY": 0,
  "textX": NaN,

diff --git a/packages/line/stories/line.stories.js b/packages/line/stories/line.stories.js
@@ -184,6 +184,72 @@ stories.add('time scale', () => (
  />
 ))
 
+stories.add('time scale milliseconds precision', () => (
+ <Line
+ {...commonProperties}
+ data={[
+ {
+ id: 'signal A',
+ data: [
+ { x: '2018-01-01 12:00:01.100', y: 7 },
+ { x: '2018-01-01 12:00:01.110', y: 5 },
+ { x: '2018-01-01 12:00:01.120', y: 11 },
+ { x: '2018-01-01 12:00:01.130', y: 9 },
+ { x: '2018-01-01 12:00:01.140', y: 12 },
+ { x: '2018-01-01 12:00:01.150', y: 16 },
+ { x: '2018-01-01 12:00:01.160', y: 13 },
+ { x: '2018-01-01 12:00:01.170', y: 13 },
+ ],
+ },
+ {
+ id: 'signal B',
+ data: [
+ { x: '2018-01-01 12:00:01.100', y: 14 },
+ { x: '2018-01-01 12:00:01.110', y: 14 },
+ { x: '2018-01-01 12:00:01.120', y: 15 },
+ { x: '2018-01-01 12:00:01.130', y: 11 },
+ { x: '2018-01-01 12:00:01.140', y: 10 },
+ { x: '2018-01-01 12:00:01.150', y: 12 },
+ { x: '2018-01-01 12:00:01.160', y: 9 },
+ { x: '2018-01-01 12:00:01.170', y: 7 },
+ ],
+ },
+ ]}
+ xScale={{
+ type: 'time',
+ format: '%Y-%m-%d %H:%M:%S.%L',
+ useUTC: false,
+ precision: 'millisecond',
+ }}
+ xFormat="time:%Y-%m-%d %H:%M:%S.%L"
+ yScale={{
+ type: 'linear',
+ stacked: boolean('stacked', false),
+ }}
+ axisLeft={{
+ legend: 'linear scale',
+ legendOffset: 12,
+ }}
+ axisBottom={{
+ format: '.%L',
+ tickValues: 'every 10 milliseconds',
+ legend: 'time scale',
+ legendOffset: -12,
+ }}
+ curve={select('curve', curveOptions, 'monotoneX')}
+ enablePointLabel={true}
+ pointSymbol={CustomSymbol}
+ pointSize={16}
+ pointBorderWidth={1}
+ pointBorderColor={{
+ from: 'color',
+ modifiers: [['darker', 0.3]],
+ }}
+ useMesh={true}
+ enableSlices={false}
+ />
+))
+
 stories.add('logarithmic scale', () => (
  <Line
  {...commonProperties}