Fixing resizing for charts on dashboard (#10706)

elastic · Mar 4, 2017 · 08b9535 · 08b9535
1 parent 82b37aa
commit 08b9535
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -183,7 +183,6 @@
     "rjs-repack-loader": "1.0.6",
     "script-loader": "0.6.1",
     "semver": "5.1.0",
-    "simianhacker-react-resize-aware": "1.0.11",
     "style-loader": "0.12.3",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",

diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -3,12 +3,17 @@ import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from '../lib/flot';
 import eventBus from '../lib/events';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import calculateBarWidth from '../lib/calculate_bar_width';
 import colors from '../lib/colors';
 
 class FlotChart extends Component {
 
+  constructor(props) {
+    super(props);
+    this.handleResize = this.handleResize.bind(this);
+  }
+
   shouldComponentUpdate(props, state) {
     if (!this.plot) return true;
     if (props.reversed !== this.props.reversed) {
@@ -42,7 +47,6 @@ class FlotChart extends Component {
       eventBus.off('thorPlotover', this.handleThorPlotover);
       eventBus.off('thorPlotleave', this.handleThorPlotleave);
     }
-    findDOMNode(this.resize).removeEventListener('resize', this.handleResize);
   }
 
   componentWillUnmount() {
@@ -148,6 +152,17 @@ class FlotChart extends Component {
     return _.assign(opts, this.props.options);
   }
 
+  handleResize() {
+    const resize = findDOMNode(this.resize);
+    if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
+      if (!this.plot) return;
+      this.plot.resize();
+      this.plot.setupGrid();
+      this.plot.draw();
+      this.handleDraw(this.plot);
+    }
+  }
+
   renderChart() {
     const resize = findDOMNode(this.resize);
 
@@ -159,19 +174,7 @@ class FlotChart extends Component {
       this.plot = $.plot(this.target, data, this.getOptions());
       this.handleDraw(this.plot);
 
-      this.handleResize = (e) => {
-        const resize = findDOMNode(this.resize);
-        if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
-          if (!this.plot) return;
-          this.plot.resize();
-          this.plot.setupGrid();
-          this.plot.draw();
-          this.handleDraw(this.plot);
-        }
-      };
-
       _.defer(() => this.handleResize());
-      findDOMNode(this.resize).addEventListener('resize', this.handleResize);
 
 
       this.handleMouseOver = (...args) => {
@@ -235,9 +238,12 @@ class FlotChart extends Component {
       flex: '1 0 auto',
     };
     return (
-      <ResizeAware ref={(el) => this.resize = el} style={style}>
+      <Resize
+        onResize={this.handleResize}
+        ref={(el) => this.resize = el}
+        style={style}>
         <div ref={(el) => this.target = el} style={style}/>
-      </ResizeAware>);
+      </Resize>);
   }
 
 }

diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -4,7 +4,7 @@ import React, { Component, PropTypes } from 'react';
 import $ from '../lib/flot';
 import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import GaugeVis from './gauge_vis';
 import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
@@ -63,18 +63,9 @@ class Gauge extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   // When the component updates it might need to be resized so we need to
   // recalculate the corrdinates and only update if things changed a little. THis
   // happens when the number is too wide or you add a new series.
@@ -168,10 +159,13 @@ class Gauge extends Component {
     if (this.props.reversed) className = `reversed ${className}`;
     return (
       <div className={className}>
-        <ResizeAware className={`${className}__resize`} ref={(el) => this.resize = el}>
+        <Resize
+          onResize={this.handleResize}
+          className={`${className}__resize`}
+          ref={(el) => this.resize = el}>
           { metrics }
           <GaugeVis {...gaugeProps}/>
-        </ResizeAware>
+        </Resize>
       </div>
     );
   }

diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import $ from '../lib/flot';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import _ from 'lodash';
 import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
@@ -56,18 +56,9 @@ class GaugeVis extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   // When the component updates it might need to be resized so we need to
   // recalculate the corrdinates and only update if things changed a little. THis
   // happens when the number is too wide or you add a new series.
@@ -162,11 +153,14 @@ class GaugeVis extends Component {
       );
     }
     return (
-      <ResizeAware ref={(el) => this.resize = el} style={styles.resize}>
+      <Resize
+        onResize={this.handleResize}
+        ref={(el) => this.resize = el}
+        style={styles.resize}>
         <div style={styles.svg} ref={(el) => this.inner = el}>
           {svg}
         </div>
-      </ResizeAware>
+      </Resize>
     );
   }
 

diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import _ from 'lodash';
 import { findDOMNode } from 'react-dom';
-import ResizeAware from 'simianhacker-react-resize-aware';
 import getLastValue from '../lib/get_last_value';
+import Resize from './resize';
 import reactcss from 'reactcss';
 
 class Metric extends Component {
@@ -20,18 +20,9 @@ class Metric extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   calculateCorrdinates() {
     const inner = findDOMNode(this.inner);
     const resize = findDOMNode(this.resize);
@@ -161,15 +152,18 @@ class Metric extends Component {
 
     return (
       <div className="rhythm_metric" style={styles.container}>
-        <ResizeAware ref={(el) => this.resize = el} className="rhythm_metric__resize">
+        <Resize
+          onResize={this.handleResize}
+          ref={(el) => this.resize = el}
+          className="rhythm_metric__resize">
           <div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
             <div className="rhythm_metric__primary">
               { primaryLabel }
               <div style={styles.primary_value} className="rhythm_metric__primary-value">{ primaryValue }</div>
             </div>
             { secondarySnippet }
           </div>
-        </ResizeAware>
+        </Resize>
       </div>
     );
   }

diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js
@@ -0,0 +1,66 @@
+import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
+class Resize extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  checkSize() {
+    const el = findDOMNode(this.el);
+    this.timeout = setTimeout(() => {
+      const { currentHeight, currentWidth } = this.state;
+      if (currentHeight !== el.clientHeight || currentWidth !== el.clientWidth) {
+        this.setState({
+          currentWidth: el.parentNode.clientWidth,
+          currentHeight: el.parentNode.clientHeight
+        });
+        this.handleResize();
+      }
+      this.checkSize();
+    }, this.props.frequency);
+  }
+
+  componentDidMount() {
+    const el = findDOMNode(this.el);
+    const currentWidth = el.parentNode.clientWidth;
+    const currentHeight = el.parentNode.clientHeight;
+    this.setState({ currentHeight, currentWidth });
+    this.checkSize();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleResize() {
+    if (this.props.onResize) this.props.onResize();
+  }
+
+  render() {
+    const style = this.props.style || {};
+    const className = this.props.className || '';
+    return(
+      <div
+        style={style}
+        className={className}
+        ref={(el) => this.el = el} >
+        {this.props.children}
+      </div>
+    );
+  }
+
+}
+
+Resize.defaultProps = {
+  frequency: 500
+};
+
+Resize.propTypes = {
+  frequency: PropTypes.number,
+  onResize: PropTypes.func
+};
+
+export default Resize;
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
@@ -1,4 +1,5 @@
 .rhythm_metric {
+  font-size: 100%;
   position: relative;
   display: flex;
   flex-direction: column;