From 5cb9dc99caa3e3a9a0339bf9f34099c7cd3aee43 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 4 Oct 2018 16:56:54 +0200
Subject: [PATCH 1/2] Explore: resize graph on window resize

---
 public/app/features/explore/Graph.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index 8a9390a0b6b..c72190f9a68 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import _ from 'lodash';
 import React, { Component } from 'react';
 import moment from 'moment';
 
@@ -68,7 +69,7 @@ const FLOT_OPTIONS = {
   // },
 };
 
-class Graph extends Component<any, any> {
+class Graph extends Component<any, { showAllTimeSeries: boolean }> {
   state = {
     showAllTimeSeries: false,
   };
@@ -81,6 +82,7 @@ class Graph extends Component<any, any> {
 
   componentDidMount() {
     this.draw();
+    window.addEventListener('resize', this.debouncedDraw);
   }
 
   componentDidUpdate(prevProps) {
@@ -94,6 +96,10 @@ class Graph extends Component<any, any> {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.debouncedDraw);
+  }
+
   onShowAllTimeSeries = () => {
     this.setState(
       {
@@ -103,6 +109,8 @@ class Graph extends Component<any, any> {
     );
   };
 
+  debouncedDraw = _.debounce(() => this.draw(), 100);
+
   draw() {
     const { options: userOptions } = this.props;
     const data = this.getGraphData();

From 64af0942043fcbd9e3c8f4ff5a78fb49d39d7731 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 5 Oct 2018 11:39:00 +0200
Subject: [PATCH 2/2] Use size-me to resize explore Graph, added types

---
 public/app/features/explore/Graph.test.tsx    |  2 +-
 public/app/features/explore/Graph.tsx         | 42 +++++++++++--------
 .../explore/__snapshots__/Graph.test.tsx.snap |  6 ++-
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/public/app/features/explore/Graph.test.tsx b/public/app/features/explore/Graph.test.tsx
index eb9cb8a7f0d..043b843f0a5 100644
--- a/public/app/features/explore/Graph.test.tsx
+++ b/public/app/features/explore/Graph.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Graph from './Graph';
+import { Graph } from './Graph';
 import { mockData } from './__mocks__/mockData';
 
 const setup = (propOverrides?: object) => {
diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index c72190f9a68..cb5def07fab 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import _ from 'lodash';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import moment from 'moment';
+import { withSize } from 'react-sizeme';
 
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
@@ -69,7 +69,21 @@ const FLOT_OPTIONS = {
   // },
 };
 
-class Graph extends Component<any, { showAllTimeSeries: boolean }> {
+interface GraphProps {
+  data: any[];
+  height?: string; // e.g., '200px'
+  id?: string;
+  loading?: boolean;
+  options: any;
+  split?: boolean;
+  size?: { width: number; height: number };
+}
+
+interface GraphState {
+  showAllTimeSeries: boolean;
+}
+
+export class Graph extends PureComponent<GraphProps, GraphState> {
   state = {
     showAllTimeSeries: false,
   };
@@ -82,24 +96,20 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
 
   componentDidMount() {
     this.draw();
-    window.addEventListener('resize', this.debouncedDraw);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: GraphProps) {
     if (
       prevProps.data !== this.props.data ||
       prevProps.options !== this.props.options ||
       prevProps.split !== this.props.split ||
-      prevProps.height !== this.props.height
+      prevProps.height !== this.props.height ||
+      (prevProps.size && prevProps.size.width !== this.props.size.width)
     ) {
       this.draw();
     }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.debouncedDraw);
-  }
-
   onShowAllTimeSeries = () => {
     this.setState(
       {
@@ -109,10 +119,8 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
     );
   };
 
-  debouncedDraw = _.debounce(() => this.draw(), 100);
-
   draw() {
-    const { options: userOptions } = this.props;
+    const { options: userOptions, size } = this.props;
     const data = this.getGraphData();
 
     const $el = $(`#${this.props.id}`);
@@ -126,7 +134,7 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
       data: ts.getFlotPairs('null'),
     }));
 
-    const ticks = $el.width() / 100;
+    const ticks = (size.width || 0) / 100;
     let { from, to } = userOptions.range;
     if (!moment.isMoment(from)) {
       from = dateMath.parse(from, false);
@@ -155,7 +163,7 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
   }
 
   render() {
-    const { height, loading } = this.props;
+    const { height = '100px', id = 'graph', loading = false } = this.props;
     const data = this.getGraphData();
 
     if (!loading && data.length === 0) {
@@ -178,7 +186,7 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
             </div>
           )}
         <div className="panel-container">
-          <div id={this.props.id} className="explore-graph" style={{ height }} />
+          <div id={id} className="explore-graph" style={{ height }} />
           <Legend data={data} />
         </div>
       </div>
@@ -186,4 +194,4 @@ class Graph extends Component<any, { showAllTimeSeries: boolean }> {
   }
 }
 
-export default Graph;
+export default withSize()(Graph);
diff --git a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
index a1e80defe92..d6760dff59c 100644
--- a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
@@ -7,9 +7,10 @@ exports[`Render should render component 1`] = `
   >
     <div
       className="explore-graph"
+      id="graph"
       style={
         Object {
-          "height": undefined,
+          "height": "100px",
         }
       }
     />
@@ -481,9 +482,10 @@ exports[`Render should render component with disclaimer 1`] = `
   >
     <div
       className="explore-graph"
+      id="graph"
       style={
         Object {
-          "height": undefined,
+          "height": "100px",
         }
       }
     />