diff --git a/CHANGELOG.md b/CHANGELOG.md
index 284f23e7..bd7161c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
-## [Unreleased]
+## 2.0.3 - 2019-03-16
#### Added
@@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
+* [#118](https://github.com/shlinkio/shlink-web-client/issues/118) Fixed chart crashing when trying to render lots of bars by adding pagination.
## 2.0.2 - 2019-03-04
diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js
index 0b2c5c0b..253f4011 100644
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -11,7 +11,6 @@ const propTypes = {
isBarChart: PropTypes.bool,
stats: PropTypes.object,
max: PropTypes.number,
- redraw: PropTypes.bool,
};
const generateGraphData = (title, isBarChart, labels, data) => ({
@@ -37,19 +36,19 @@ const generateGraphData = (title, isBarChart, labels, data) => ({
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
-const renderGraph = (title, isBarChart, stats, max, redraw) => {
+const renderGraph = (title, isBarChart, stats, max) => {
const Component = isBarChart ? HorizontalBar : Doughnut;
const labels = keys(stats).map(dropLabelIfHidden);
const data = values(stats);
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
- scales: isBarChart ? {
+ scales: isBarChart && {
xAxes: [
{
ticks: { beginAtZero: true, max },
},
],
- } : null,
+ },
tooltips: {
intersect: !isBarChart,
@@ -58,15 +57,16 @@ const renderGraph = (title, isBarChart, stats, max, redraw) => {
},
};
const graphData = generateGraphData(title, isBarChart, labels, data);
- const height = labels.length < 20 ? null : labels.length * 8;
+ const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
- return ;
+ // Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
+ return ;
};
-const GraphCard = ({ title, footer, isBarChart, stats, max, redraw = false }) => (
+const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
{typeof title === 'function' ? title() : title}
- {renderGraph(title, isBarChart, stats, max, redraw)}
+ {renderGraph(title, isBarChart, stats, max)}
{footer && {footer}}
);
diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js
index 2d3c6146..c51245f0 100644
--- a/src/visits/SortableBarGraph.js
+++ b/src/visits/SortableBarGraph.js
@@ -26,15 +26,6 @@ export default class SortableBarGraph extends React.Component {
currentPage: 1,
itemsPerPage: Infinity,
};
- redrawChart = false;
-
- doRedrawChart() {
- const prev = this.redrawChart;
-
- this.redrawChart = false;
-
- return prev;
- }
determineStats(stats, sortingItems) {
const pairs = toPairs(stats);
@@ -116,10 +107,7 @@ export default class SortableBarGraph extends React.Component {
toggleClassName="btn-sm paddingless mr-3"
ranges={[ 50, 100, 200, 500 ]}
value={this.state.itemsPerPage}
- setValue={(itemsPerPage) => {
- this.redrawChart = true;
- this.setState({ itemsPerPage, currentPage: 1 });
- }}
+ setValue={(itemsPerPage) => this.setState({ itemsPerPage, currentPage: 1 })}
/>
)}
@@ -131,15 +119,6 @@ export default class SortableBarGraph extends React.Component {
);
- return (
-
- );
+ return ;
}
}
diff --git a/test/visits/GraphCard.test.js b/test/visits/GraphCard.test.js
index d6820008..2b7d2645 100644
--- a/test/visits/GraphCard.test.js
+++ b/test/visits/GraphCard.test.js
@@ -39,7 +39,7 @@ describe('', () => {
]);
expect(borderColor).toEqual('white');
expect(legend).toEqual({ position: 'right' });
- expect(scales).toBeNull();
+ expect(scales).toBeUndefined();
});
it('renders HorizontalBar when is not a bar chart', () => {