From b372ec9580f5e41ffc8a2c1ac60a4f180116fffd Mon Sep 17 00:00:00 2001
From: protyze <jan.azzati@gmail.com>
Date: Sat, 19 Feb 2022 01:29:07 +0400
Subject: [PATCH] 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
---
 packages/axes/src/compute.ts                  | 12 ++--
 .../tests/__snapshots__/compute.test.tsx.snap | 44 ++++++-------
 packages/line/stories/line.stories.js         | 66 +++++++++++++++++++
 3 files changed, 94 insertions(+), 28 deletions(-)

diff --git a/packages/axes/src/compute.ts b/packages/axes/src/compute.ts
index a60d317728..04a48b79c0 100644
--- 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
index 3d41204b9d..a5ce7c4c94 100644
--- 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
index 9368c0f0e1..b0104b9196 100644
--- 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}