Victory: Random crash in Voronoi

[JarLowrey]

Bugs and Questions

Checklist

• [x ] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x ] I have read through the FAQ and Guides before asking a question

• [x ] I am using the latest version of Victory

• [x ] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

If I have a Chart with >3 Line's wrapped in a VictoryVoronoiContainer it will randomly crash as I drag the mouse over the chart. It seems to be more likely to happen the more lines there are. A long list of errors are shown:

Warning: Failed prop type: Invalid prop `className` of type `object` supplied to `VictoryVoronoiContainer`, expected `string`.
...
Warning: Failed prop type: `height` in `VictoryVoronoiContainer` must be a non-negative number.
...
Warning: Failed prop type: Invalid prop `polar` of type `object` supplied to `VictoryVoronoiContainer`, expected `boolean`.
...
Warning: Failed prop type: Invalid prop `portalComponent` of type `object` supplied to `VictoryVoronoiContainer`, expected a single ReactElement.
...
Warning: Failed prop type: `portalZIndex` in `VictoryVoronoiContainer` must be an integer.
...
Warning: Failed prop type: Invalid prop `responsive` of type `object` supplied to `VictoryVoronoiContainer`, expected `boolean`.
...
Warning: Failed prop type: `width` in `VictoryVoronoiContainer` must be a non-negative number.
...
Warning: Failed prop type: Invalid prop `activateData` of type `object` supplied to `VictoryVoronoiContainer`, expected `boolean`.
...
Warning: Failed prop type: Invalid prop `activateLabels` of type `object` supplied to `VictoryVoronoiContainer`, expected `boolean`.
...
Warning: Failed prop type: Invalid prop `labelComponent` of type `object` supplied to `VictoryVoronoiContainer`, expected a single ReactElement.
...
Warning: Failed prop type: Invalid prop `labels` of type `object` supplied to `VictoryVoronoiContainer`, expected `function`.
...
Warning: Failed prop type: Invalid prop `radius` of type `object` supplied to `VictoryVoronoiContainer`, expected `number`.
...
Warning: Failed prop type: Invalid prop `voronoiBlacklist` of type `object` supplied to `VictoryVoronoiContainer`, expected an array.
...
Warning: Failed prop type: Invalid prop `voronoiPadding` of type `object` supplied to `VictoryVoronoiContainer`, expected `number`.
...
Uncaught TypeError: scale.x is not a function
    at Object.scalePoint (helpers.js:88)
    at VictoryVoronoiContainer.getLabelPosition (victory-voronoi-container.js:117)
    at VictoryVoronoiContainer.getLabelProps (victory-voronoi-container.js:220)
    at VictoryVoronoiContainer.getTooltip (victory-voronoi-container.js:234)
    at VictoryVoronoiContainer.getChildren (victory-voronoi-container.js:246)
    at VictoryVoronoiContainer.renderContainer (victory-container.js:103)
    at VictoryVoronoiContainer.render (victory-container.js:152)
    at finishClassComponent (react-dom.development.js:13194)
    at updateClassComponent (react-dom.development.js:13156)
    at beginWork (react-dom.development.js:13825)
    at performUnitOfWork (react-dom.development.js:15864)
    at workLoop (react-dom.development.js:15903)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15311)
    at renderRoot (react-dom.development.js:15963)
    at performWorkOnRoot (react-dom.development.js:16561)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at batchedUpdates$1 (react-dom.development.js:16664)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4556)

The above error occurred in the <VictoryVoronoiContainer> component:
    in VictoryVoronoiContainer (at nutrientGraph.jsx:135)
    in VictorySharedEvents (created by VictoryChart)
    in VictoryChart (at nutrientGraph.jsx:130)
    in div (created by styled.div)
    in styled.div (at nutrientGraph.jsx:129)
    in NutrientGraph (at display.jsx:274)
    in div (at display.jsx:260)
    in div (at display.jsx:257)
    in div (at display.jsx:382)
    in Food (created by Route)
    in Route (created by withRouter(Food))
    in withRouter(Food) (created by Connect(withRouter(Food)))
    in Connect(withRouter(Food)) (at food.jsx:15)
    in div (at LinkableTabs.jsx:54)
    in LinkableTabs (created by Route)
    in Route (created by withRouter(LinkableTabs))
    in withRouter(LinkableTabs) (at food.jsx:23)
    in div (created by styled.div)
    in styled.div (at food.jsx:22)
    in Food (created by Route)
    in Route (at App.jsx:87)
    in Switch (at App.jsx:84)
    in div (created by styled.div)
    in styled.div (at App.jsx:83)
    in div (created by styled.div)
    in styled.div (at App.jsx:81)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:80)
    in Provider (at App.jsx:79)
    in MuiThemeProvider (at App.jsx:78)
    in App (at index.js:7)

Uncaught TypeError: scale.x is not a function
    at Object.scalePoint (helpers.js:88)
    at VictoryVoronoiContainer.getLabelPosition (victory-voronoi-container.js:117)
    at VictoryVoronoiContainer.getLabelProps (victory-voronoi-container.js:220)
    at VictoryVoronoiContainer.getTooltip (victory-voronoi-container.js:234)
    at VictoryVoronoiContainer.getChildren (victory-voronoi-container.js:246)
    at VictoryVoronoiContainer.renderContainer (victory-container.js:103)
    at VictoryVoronoiContainer.render (victory-container.js:152)
    at finishClassComponent (react-dom.development.js:13194)
    at updateClassComponent (react-dom.development.js:13156)
    at beginWork (react-dom.development.js:13825)
    at performUnitOfWork (react-dom.development.js:15864)
    at workLoop (react-dom.development.js:15903)
    at renderRoot (react-dom.development.js:15943)
    at performWorkOnRoot (react-dom.development.js:16561)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at batchedUpdates$1 (react-dom.development.js:16664)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4556)
scalePoint @ helpers.js:88
getLabelPosition @ victory-voronoi-container.js:117
getLabelProps @ victory-voronoi-container.js:220
getTooltip @ victory-voronoi-container.js:234
getChildren @ victory-voronoi-container.js:246
renderContainer @ victory-container.js:103
render @ victory-container.js:152
finishClassComponent @ react-dom.development.js:13194
updateClassComponent @ react-dom.development.js:13156
beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903
renderRoot @ react-dom.development.js:15943
performWorkOnRoot @ react-dom.development.js:16561
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
batchedUpdates$1 @ react-dom.development.js:16664
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4556

My x is categorical strings. The error goes away if I remove the containerComponent, or if I comment out either the Scatter's or the Line's

Reproduction

I have not been able to fully replicate this error - https://codesandbox.io/s/8nl70z070 - however my example is throwing a ton of Encountered two children with the same key warnings when the Tooltip is ignored for the Scatter plot - which might be related

[binbingol]

Any update regarding this bug?

Just like above, it occurs randomly.

[kaitmore]

Also experiencing this on [email protected]

[JarLowrey]

Has anybody that has experienced this error noticed any more debugging information that may help the Victory devs?

[boygirl]

Hi folks,

I haven't been able to reproduce this one. @kaitmore are you seeing this issue in ^30.0.0 as well?

@JarLowrey I'll look into the Encountered two children with the same key error you're seeing.

[JarLowrey]

It doesn't seem to be happening in 30.* for me. Been a long-standing issue for multiple versions, would be awesome if it's actually gone. There are still lots of warnings being shown though.

[kaitmore]

@boygirl I don't see this in ^30.0.0. My project was using 0.26.1 for other reasons, so it seems like I'll just have to upgrade. Thanks for looking into this!

[boygirl]

I'm going to close this issue since it's not appearing in ^30.0.0.

[JarLowrey]

Should we make a new issue for the duplicate key warnings? It really clutters up the console.

[JonnyLinja]

I replicated this consistently in my development environment. The following crashes.

import React, {Component} from 'react';
import {
    VictoryVoronoiContainer,

    VictoryGroup,
    VictoryChart,
    VictoryAxis,
    VictoryLine,
} from 'victory';

class View extends Component {

    render() {
        var models = [{
            date: new Date(),
            value: 9001,
            label: 'foobar',
        }, {
            date: new Date(),
            value: 1234,
            label: 'foobar',
        }];

        return (
            <VictoryGroup containerComponent={<VictoryVoronoiContainer/>}>
                <VictoryChart>
                    <VictoryAxis/>
                    <VictoryAxis
                        dependentAxis/>
                    <VictoryLine
                        data={models}
                        x="date"
                        y="value"/>
                    <VictoryLine
                        data={models}
                        x="date"
                        y="value"/>
                </VictoryChart>
            </VictoryGroup>
        );
    }
}

export default View;

I resolved the crash by moving the two VictoryAxis components AFTER the two VictoryLine components. In other words, <VictoryLine /> <VictoryLine /> <VictoryAxis /> <VictoryAxis /> does not crash.

Removing the VictoryGroup resolves the crash as well, but I needed VictoryGroup there for linear gradient and VictoryArea purposes in the non stripped down version.

I am on ^31.1.0 if that makes any difference.

Hope that helps.

[boygirl]

@JonnyLinja I'm confused by your use of VictoryGroup. It is not intended to nest VictoryChart or axis components within it. You should be able to use VictoryChart as your top level component and supply it with arbitrary svg children.

[JonnyLinja]

That would explain it then. I think I was following some example that had Chart nested within a Group. That or I'm an idiot. Updating my code accordingly.