X Axis jumps when there's a lot of data points with long labels
Closed this issue · 3 comments
Bug summary
When there's a lot of datapoints and enough horizontal room to try to display the labels, the X Axis will continually jump as it seems to recalculate how to display them.
Expected behavior
The X axis remains stable, even if truncated.
Actual behavior
See behavior in GIF:
This seems to only affect the bar chart when it has showLegend={false} too.
Steps to reproduce the problem
- Create a bar chart with a lot of data points (approximately 30)
- Make sure the data points have semi-long names (e.g., date string 2022-08-09)
- Make sure the bar chart is hiding the legend
showLegend={false}. - Expand the space for the chart to be wide enough to cause the issue. On smaller previews the labels simply hide.
This appears to be a render loop in a useEffect in the XAxis component based on this console warning:
react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
at XAxis
Reduced test case
You may need to expand the preview space large enough to see.
Specifications
- Polaris-Viz version number: 6.6.0
- Browser: Chrome
- Device: MacBook Pro
- Operating System: macOS Monterey
@mbaumbach The codesandbox link is broken, are you able to update to a new one?
@envex Interesting, it loads for me and a few other colleagues and it's set to public. In any case, this is the code that you need to add to index.tsx if you start with the Polaris Viz sandbox suggested in the GitHub issue:
import * as React from "react";
import { render } from "react-dom";
import { PolarisVizProvider, BarChart } from "@shopify/polaris-viz";
import "@shopify/polaris-viz/build/esm/styles.css";
import "./styles.css";
class Playground extends React.Component {
render() {
return (
<PolarisVizProvider>
<BarChart
data={[
{
name: "Sales",
data: [
{
key: "2022-07-10",
value: 0
},
{
key: "2022-07-11",
value: 0
},
{
key: "2022-07-12",
value: 0
},
{
key: "2022-07-13",
value: 0
},
{
key: "2022-07-14",
value: 0
},
{
key: "2022-07-15",
value: 0
},
{
key: "2022-07-16",
value: 0
},
{
key: "2022-07-17",
value: 0
},
{
key: "2022-07-18",
value: 0
},
{
key: "2022-07-19",
value: 0
},
{
key: "2022-07-20",
value: 0
},
{
key: "2022-07-21",
value: 0
},
{
key: "2022-07-22",
value: 0
},
{
key: "2022-07-23",
value: 0
},
{
key: "2022-07-24",
value: 0
},
{
key: "2022-07-25",
value: 0
},
{
key: "2022-07-26",
value: 0
},
{
key: "2022-07-27",
value: 0
},
{
key: "2022-07-28",
value: 0
},
{
key: "2022-07-29",
value: 0
},
{
key: "2022-07-30",
value: 0
},
{
key: "2022-07-31",
value: 0
},
{
key: "2022-08-01",
value: 0
},
{
key: "2022-08-02",
value: 0
},
{
key: "2022-08-03",
value: 0
},
{
key: "2022-08-04",
value: 0
},
{
key: "2022-08-05",
value: 0
},
{
key: "2022-08-06",
value: 0
},
{
key: "2022-08-07",
value: 0
},
{
key: "2022-08-08",
value: 0
}
]
}
]}
showLegend={false}
/>
<BarChart
data={[
{
name: "Sales",
data: [
{
key: "2022-07-10",
value: 0
},
{
key: "2022-07-11",
value: 0
},
{
key: "2022-07-12",
value: 0
},
{
key: "2022-07-13",
value: 0
},
{
key: "2022-07-14",
value: 0
},
{
key: "2022-07-15",
value: 0
},
{
key: "2022-07-16",
value: 0
},
{
key: "2022-07-17",
value: 0
},
{
key: "2022-07-18",
value: 0
},
{
key: "2022-07-19",
value: 0
},
{
key: "2022-07-20",
value: 0
},
{
key: "2022-07-21",
value: 0
},
{
key: "2022-07-22",
value: 0
},
{
key: "2022-07-23",
value: 0
},
{
key: "2022-07-24",
value: 0
},
{
key: "2022-07-25",
value: 0
},
{
key: "2022-07-26",
value: 0
},
{
key: "2022-07-27",
value: 0
},
{
key: "2022-07-28",
value: 0
},
{
key: "2022-07-29",
value: 0
},
{
key: "2022-07-30",
value: 0
},
{
key: "2022-07-31",
value: 0
},
{
key: "2022-08-01",
value: 0
},
{
key: "2022-08-02",
value: 0
},
{
key: "2022-08-03",
value: 0
},
{
key: "2022-08-04",
value: 0
},
{
key: "2022-08-05",
value: 0
},
{
key: "2022-08-06",
value: 0
},
{
key: "2022-08-07",
value: 0
},
{
key: "2022-08-08",
value: 0
}
]
}
]}
showLegend
/>
</PolarisVizProvider>
);
}
}
render(<Playground />, document.getElementById("root"));@mbaumbach Thanks! It loaded for me this morning as well. Last night it was redirecting to the homepage.
I'll take a peek at this this morning!