Merge pull request #13529 from grafana/davkal/13517-resize-graph

Explore: resize graph on window resize

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) => {

public/app/features/explore/Graph.tsx

@@ -1,6 +1,7 @@
 import $ from 'jquery';
-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';
@@ -68,7 +69,21 @@ const FLOT_OPTIONS = {
   // },
 };
 
-class Graph extends Component<any, any> {
+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,
   };
@@ -83,12 +98,13 @@ class Graph extends Component<any, any> {
     this.draw();
   }
 
-  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();
     }
@@ -104,7 +120,7 @@ class Graph extends Component<any, any> {
   };
 
   draw() {
-    const { options: userOptions } = this.props;
+    const { options: userOptions, size } = this.props;
     const data = this.getGraphData();
 
     const $el = $(`#${this.props.id}`);
@@ -118,7 +134,7 @@ class Graph extends Component<any, any> {
       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);
@@ -147,7 +163,7 @@ class Graph extends Component<any, any> {
   }
 
   render() {
-    const { height, loading } = this.props;
+    const { height = '100px', id = 'graph', loading = false } = this.props;
     const data = this.getGraphData();
 
     if (!loading && data.length === 0) {
@@ -170,7 +186,7 @@ class Graph extends Component<any, any> {
             </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>
@@ -178,4 +194,4 @@ class Graph extends Component<any, any> {
   }
 }
 
-export default Graph;
+export default withSize()(Graph);

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",
         }
       }
     />