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] 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();