Nivo and React Grid Layout

[talanw]

Hi,

I am trying to get Nivo charts to load in React Grid Layout containers. The charts work fine when loaded normally in react but as soon as they're added to a React Grid Layout container they fail. I have a variety of charts that I use from Nivo: Bar, Line, Geo, Pie, Treemap all of which fail when attempting to load.

The error is as follows when loading the Treemap: import node_links from "./links.js"; 12 | 13 | export default function hierarchy(data, children) {

14 | var root = new Node(data), 15 | valued = +data.value && (root.value = data.value), 16 | node, 17 | nodes = [root],

When loading any of the other charts here is what I get:

TypeError: Cannot read property 'legends' of undefined LegendSvgItem 137 | })} 138 | <text 139 | textAnchor={labelAnchor}

140 | style={{ | ^ 141 | ...theme.legends.text, 142 | fill: style.itemTextColor || theme.legends.text.fill || textColor, 143 | dominantBaseline: labelAlignment,

Any help regarding this would be appreciated. I am assuming this is because RGL uses some animate functions which Nivo uses. The package versions I am using are as follows:

"@nivo/bar": "^0.63.0", "@nivo/core": "^0.63.0", "@nivo/geo": "^0.63.0", "@nivo/line": "^0.63.0", "@nivo/pie": "^0.63.0", "@nivo/tooltip": "^0.63.0", "@nivo/treemap": "^0.63.0", "react-grid-layout": "^1.1.1",

I will try and get this loaded into codesandbox and replicated for troubleshooting.

Thanks, Talan

[talanw]

Hi All,

I've got to the bottom on this. The errors were mainly because I had used npm audit fix which seemed to screw up some of the functions that Nivo relies on. Uninstalling and re-installing the nivo packages resolved most of the issues. The final issue was with the treemap which seems to have a bug in version 0.63.0 pulling the root data into the d3 package. Reverting this back to 0.62.0 resolved the issue.

Thanks, Talan

[wyze]

The final issue was with the treemap which seems to have a bug in version 0.63.0 pulling the root data into the d3 package.

@talanw What do you mean by that? If it is an issue, I'd like to get it fixed.

[talanw]

Hi Wyze,

Please see here: https://codesandbox.io/s/nivotreemap-label-glitch-forked-wtix2?file=/src/index.js

Kind Regards, Talan

[talanw]

if you change the version to 0.62.0 it does render but in 0.63.0 it doesn't

[talanw]

it might be the version of React and React-Dom that I am using but it's obviously worth noting for you guys, so you can work on getting it fixed.

Thanks, Talan

[wyze]

@talanw I see. The property root was renamed to data in the latest version. I'm not 100% sure the reason but it is good to be consistent with the rest of the charts.

[talanw]

@wyze good to know and makes sense to match with all of the other charts. I can see the documentation has been updated too. Stupid mistake. Thanks for taking a look and advising.