Ensured bar charts are regenerated when their height changes

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

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 <Component data={graphData} options={options} height={height} redraw={redraw} />;
+  // Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
+  return <Component key={height} data={graphData} options={options} height={height} />;
 };
 
-const GraphCard = ({ title, footer, isBarChart, stats, max, redraw = false }) => (
+const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
   <Card className="mt-4">
     <CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
-    <CardBody>{renderGraph(title, isBarChart, stats, max, redraw)}</CardBody>
+    <CardBody>{renderGraph(title, isBarChart, stats, max)}</CardBody>
     {footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
   </Card>
 );

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 })}
             />
           </div>
         )}
@@ -131,15 +119,6 @@ export default class SortableBarGraph extends React.Component {
       </React.Fragment>
     );
 
-    return (
-      <GraphCard
-        isBarChart
-        title={computeTitle}
-        stats={currentPageStats}
-        footer={pagination}
-        max={max}
-        redraw={this.doRedrawChart()}
-      />
-    );
+    return <GraphCard isBarChart title={computeTitle} stats={currentPageStats} footer={pagination} max={max} />;
   }
 }

test/visits/GraphCard.test.js

@@ -39,7 +39,7 @@ describe('<GraphCard />', () => {
     ]);
     expect(borderColor).toEqual('white');
     expect(legend).toEqual({ position: 'right' });
-    expect(scales).toBeNull();
+    expect(scales).toBeUndefined();
   });
 
   it('renders HorizontalBar when is not a bar chart', () => {