From d79ef2b7f7da9a5e3f6ff7fa02fc51528490fe74 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Fri, 15 Feb 2019 14:26:24 +0100
Subject: [PATCH] Changes

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 src/Graph.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/Graph.tsx b/src/Graph.tsx
index 0f657a268f..69745c79cd 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -8,6 +8,7 @@ require('flot/source/jquery.flot.crosshair');
 require('flot/source/jquery.flot.legend');
 require('flot/source/jquery.flot.time');
 require('flot/source/jquery.flot.hover');
+require('flot/source/jquery.flot.resize');
 require('jquery.flot.tooltip');
 
 import metricToSeriesName from './MetricFomat';
@@ -111,13 +112,15 @@ class Graph extends PureComponent<GraphProps> {
         mouseActiveRadius: 100,
       },
       legend: {
-        container: $(this.legendRef.current as any),
-        labelFormatter: (s: string) => {return '&nbsp;&nbsp;' + s}
+        //show: true,
+        labelFormatter: (s: string) => {return '&nbsp;&nbsp;' + s},
+        container: this.legendRef.current!,
       },
       xaxis: {
         mode: 'time',
         showTicks: true,
         showMinorTicks: true,
+        timeBase: 'milliseconds',
       },
       yaxis: {
         tickFormatter: this.formatValue,
@@ -157,7 +160,6 @@ class Graph extends PureComponent<GraphProps> {
       let data = [];
       let pos = 0;
       const params = this.props.queryParams!;
-      console.log(this.props.queryParams);
       for (let t = params.startTime; t <= params.endTime; t += params.resolution) {
         // Allow for floating point inaccuracy.
         if (ts.values.length > pos && ts.values[pos][0] < t + params.resolution / 100) {
@@ -194,11 +196,24 @@ class Graph extends PureComponent<GraphProps> {
     this.plot();
   }
 
+  componentWillUnmount() {
+    this.destroyPlot();
+  }
+
   plot() {
+    this.destroyPlot();
     if (this.chartRef.current === null || this.legendRef.current === null) {
       return;
     }
     $.plot($(this.chartRef.current!), this.getData(), this.getOptions());
+    //window.addEventListener('resize', () => this.plot());
+  }
+
+  destroyPlot() {
+    const chart = $(this.chartRef.current!).data('plot');
+    if (chart !== undefined) {
+      chart.destroy();
+    }
   }
 
   render() {