Describe/explain the bug
We're using Nivo/Line (responsive) to render some line graphs. The data we use is nondeterministic, so we validate the data before we send it to the graph. Based on the documentation (here: https://nivo.rocks/line/), we use the following type for line graph data:
interface line {
id: string | number;
data: {
x: number | string | Date
y: number | string | Date
}[]
}[]
However, we've recently noticed that if we have the x axis as a number and the y axis as a string, with useMesh enabled, it throws a client side exception.
To Reproduce
Render a Nivo/Line Graph with useMesh enabled, with data containing x axis as a number, and y axis as a string. EG:
Expected behaviour
Should not cause a client side error.
Screenshots
Chrome:
FireFox:
Desktop (please complete the following information - Not sure if this at all relevant, but okay):
OS: MacOS 14.5
Browser: Chrome v127.0.6533.73
Browser: FireFox v115.13.0esr (64-bit)
Additional context
We've disabled line-graphs on the website for now, as the data we receive is nondeterministic.
The error text in chrome is as follows:
nivo-line.es.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at nivo-line.es.js:1:1
at renderWithHooks (react-dom.development.js:11121:1)
at updateFunctionComponent (react-dom.development.js:16290:1)
at beginWork$1 (react-dom.development.js:18472:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:20565:1)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:1)
at invokeGuardedCallback (react-dom.development.js:20689:1)
at beginWork (react-dom.development.js:26949:1)
at performUnitOfWork (react-dom.development.js:25748:1)
at workLoopSync (react-dom.development.js:25464:1)
Describe/explain the bug We're using Nivo/Line (responsive) to render some line graphs. The data we use is nondeterministic, so we validate the data before we send it to the graph. Based on the documentation (here: https://nivo.rocks/line/), we use the following type for line graph data:
However, we've recently noticed that if we have the
x
axis as anumber
and they
axis as astring
, withuseMesh
enabled, it throws a client side exception.To Reproduce Render a Nivo/Line Graph with
useMesh
enabled, with data containingx
axis as a number, andy
axis as a string. EG:Steps to reproduce the behaviour:
Expected behaviour Should not cause a client side error.
Screenshots Chrome: FireFox:
Desktop (please complete the following information - Not sure if this at all relevant, but okay):
Additional context