From d80dafd6f730feedcf940db4624506d4d21d8d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A1s=20T=C3=B3th?= <andras.toth93@gmail.com>
Date: Wed, 21 Apr 2021 15:08:03 +0200
Subject: [PATCH] fix(axis): time series rendering (#1408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: András Tóth <andrast@cisco.com>
---
 packages/axes/src/components/Axis.js | 7 ++-----
 packages/axes/src/compute.js         | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/axes/src/components/Axis.js b/packages/axes/src/components/Axis.js
index 321c70bdeb..e2b4b8a2ed 100644
--- a/packages/axes/src/components/Axis.js
+++ b/packages/axes/src/components/Axis.js
@@ -14,8 +14,6 @@ import { computeCartesianTicks, getFormatter } from '../compute'
 import { axisPropTypes } from '../props'
 import AxisTick from './AxisTick'
 
-const defaultTickRenderer = props => <AxisTick {...props} />
-
 const Axis = ({
     axis,
     scale,
@@ -146,7 +144,6 @@ const Axis = ({
                     animatedProps: transitionProps,
                     ...tick,
                     ...(onClick ? { onClick } : {}),
-                    key: tick.key,
                 })
             })}
             <animated.line
@@ -173,7 +170,7 @@ Axis.propTypes = {
     tickPadding: PropTypes.number.isRequired,
     tickRotation: PropTypes.number.isRequired,
     format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    renderTick: PropTypes.func.isRequired,
+    renderTick: PropTypes.elementType,
     legend: PropTypes.node,
     legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
     legendOffset: PropTypes.number.isRequired,
@@ -186,7 +183,7 @@ Axis.defaultProps = {
     tickSize: 5,
     tickPadding: 5,
     tickRotation: 0,
-    renderTick: defaultTickRenderer,
+    renderTick: AxisTick,
     legendPosition: 'end',
     legendOffset: 0,
 }
diff --git a/packages/axes/src/compute.js b/packages/axes/src/compute.js
index e19c121915..0a96ffad63 100644
--- a/packages/axes/src/compute.js
+++ b/packages/axes/src/compute.js
@@ -184,7 +184,7 @@ export const computeCartesianTicks = ({
     }
 
     const ticks = values.map(value => ({
-        key: value,
+        key: typeof value === 'number' || typeof value === 'string' ? value : `${value}`,
         value,
         ...translate(value),
         ...line,