[Fix] recreate timeline chart on resize #429

Author: edwinmp

package-lock.json

@@ -71,6 +71,7 @@
     "react-dom": "^16.6.3",
     "react-intersection-observer": "3.0.3",
     "react-redux": "5.0.7",
+    "react-resize-detector": "^3.4.0",
     "redux": "3.7.2",
     "semantic-ui-react": "^0.84.0"
   },
@@ -88,6 +89,7 @@
     "@types/react": "^16.4.11",
     "@types/react-beautiful-dnd": "6.0.1",
     "@types/react-redux": "^6.0.11",
+    "@types/react-resize-detector": "^3.1.0",
     "@types/storybook__react": "^3.0.9",
     "@zeit/next-typescript": "0.1.1",
     "apollo-codegen": "^0.20.2",

package.json

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactResizeDetector from 'react-resize-detector';
 import { draw } from '@devinit/charts';
 
 export interface Props {
@@ -15,16 +16,20 @@ class Timeline extends React.Component<Props> {
   public props: Props;
   public element: HTMLDivElement | null;
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
+
+    this.onResize = this.onResize.bind(this);
   }
 
   public render() {
     return (
       <div
         ref={ element => { this.element = element; } }
         style={ { width: this.props.width || '100%', height: this.props.height } }
-      />
+      >
+        <ReactResizeDetector handleWidth onResize={ this.onResize }/>
+      </div>
     );
   }
 
@@ -57,6 +62,12 @@ class Timeline extends React.Component<Props> {
       xchart.onAnchorMoved(props.onYearChanged);
     });
   }
+
+  private onResize() {
+    this.chart.destroy();
+    this.chart = undefined;
+    this.renderChart(this.props);
+  }
 }
 
 export default Timeline;

src/components/atoms/Timeline/index.tsx

@@ -107,7 +107,7 @@ export default class LinePartition extends React.Component<Props, State> {
       <Container>
         { this.renderLinePartitionHeader(!this.props.inverted || !tree.length) }
         <Grid style={ { paddingBottom: '40px' } }>
-          <Grid.Column mobile={ 16 } computer={ 5 } width={ 5 } style={ { padding: 0 } }>
+          <Grid.Column mobile={ 16 } computer={ 5 } style={ { padding: 0 } }>
             <Intro step={ 2 } intro={ howTo.countryProfile.governmentFinance.timeline }>
               <CardContainer>
                 <Timeline
@@ -130,7 +130,7 @@ export default class LinePartition extends React.Component<Props, State> {
             </Intro>
           </Grid.Column>
 
-          <Grid.Column mobile={ 16 } computer={ 11 } width={ 11 } style={ { padding: 0 } }>
+          <Grid.Column mobile={ 16 } computer={ 11 } style={ { padding: 0 } }>
             { this.renderTreeChart(tree, showLegend) }
           </Grid.Column>
         </Grid>

src/components/molecules/LinePartition/index.tsx

@@ -193,8 +193,9 @@ export default class MultiLinePartition extends React.Component<Props> {
   }
 
   public static createInitialState(props: Props) {
-    const everything = Array.prototype.concat.apply([], props.items.map(item => item.data));
-    const currencyOptions = createCurrencyOptions(props.currencyCode, props.currencyUSD, props.supportLocalCurrencyOnly);
+    const { currencyCode, currencyUSD, items, supportLocalCurrencyOnly } = props;
+    const everything = Array.prototype.concat.apply([], items.map(item => item.data));
+    const currencyOptions = createCurrencyOptions(currencyCode, currencyUSD, supportLocalCurrencyOnly);
     const budgetTypeOptions = MultiLinePartition.createBudgetTypeOptions(everything);
     const { lowestYear, highestYear } = MultiLinePartition.createTimeLimits(everything);
     const possibleStartYear = props.year || props.startYear;