graph: refactor

public/app/plugins/panel/graph/graph.ts

@@ -59,6 +59,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
           return;
         }
         annotations = ctrl.annotations || [];
+        buildFlotPairs(data);
         render_panel();
       });
 
@@ -230,7 +231,6 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
       // Function for rendering panel
       function render_panel() {
         panelWidth =  elem.width();
-
         if (shouldAbortRender()) {
           return;
         }
@@ -241,67 +241,26 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
         // un-check dashes if lines are unchecked
         panel.dashes = panel.lines ? panel.dashes : false;
 
-        var stack = panel.stack ? true : null;
-
         // Populate element
-        var options: any = {
-          hooks: {
-            draw: [drawHook],
-            processOffset: [processOffsetHook],
-          },
-          legend: { show: false },
-          series: {
-            stackpercent: panel.stack ? panel.percentage : false,
-            stack: panel.percentage ? null : stack,
-            lines:  {
-              show: panel.lines,
-              zero: false,
-              fill: translateFillOption(panel.fill),
-              lineWidth: panel.dashes ? 0 : panel.linewidth,
-              steps: panel.steppedLine
-            },
-            dashes: {
-              show: panel.dashes,
-              lineWidth: panel.linewidth,
-              dashLength: [panel.dashLength, panel.spaceLength]
-            },
-            bars: {
-              show: panel.bars,
-              fill: 1,
-              barWidth: 1,
-              zero: false,
-              lineWidth: 0
-            },
-            points: {
-              show: panel.points,
-              fill: 1,
-              fillColor: false,
-              radius: panel.points ? panel.pointradius : 2
-            },
-            shadowSize: 0
-          },
-          yaxes: [],
-          xaxis: {},
-          grid: {
-            minBorderMargin: 0,
-            markings: [],
-            backgroundColor: null,
-            borderWidth: 0,
-            hoverable: true,
-            clickable: true,
-            color: '#c8c8c8',
-            margin: { left: 0, right: 0 },
-            labelMarginX: 0,
-          },
-          selection: {
-            mode: "x",
-            color: '#666'
-          },
-          crosshair: {
-            mode: 'x'
-          }
-        };
+        let options: any = buildFlotOptions(panel);
+        prepareXAxis(options, panel);
+        configureYAxisOptions(data, options);
+        thresholdManager.addFlotOptions(options, panel);
+        eventManager.addFlotEvents(annotations, options);
 
+        sortedSeries = sortSeries(data, panel);
+
+        if (shouldDelayDraw(panel)) {
+          // temp fix for legends on the side, need to render twice to get dimensions right
+          callPlot(options, false);
+          setTimeout(function() { callPlot(options, true); }, 50);
+          legendSideLastValue = panel.legend.rightSide;
+        } else {
+          callPlot(options, true);
+        }
+      }
+
+      function buildFlotPairs(data) {
         for (let i = 0; i < data.length; i++) {
           let series = data[i];
           series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode);
@@ -312,7 +271,9 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
             series.stack = false;
           }
         }
+      }
 
+      function prepareXAxis(options, panel) {
         switch (panel.xaxis.mode) {
           case 'series': {
             options.series.bars.barWidth = 0.7;
@@ -357,42 +318,89 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
             break;
           }
         }
+      }
 
-        thresholdManager.addFlotOptions(options, panel);
-        eventManager.addFlotEvents(annotations, options);
-        configureAxisOptions(data, options);
-
-        sortedSeries = sortSeries(data, ctrl.panel);
-
-        function callPlot(incrementRenderCounter) {
-          try {
-            plot = $.plot(elem, sortedSeries, options);
-            if (ctrl.renderError) {
-              delete ctrl.error;
-              delete ctrl.inspector;
-            }
-          } catch (e) {
-            console.log('flotcharts error', e);
-            ctrl.error = e.message || "Render Error";
-            ctrl.renderError = true;
-            ctrl.inspector = {error: e};
-          }
-
-          if (incrementRenderCounter) {
-            ctrl.renderingCompleted();
+      function callPlot(options, incrementRenderCounter) {
+        try {
+          plot = $.plot(elem, sortedSeries, options);
+          if (ctrl.renderError) {
+            delete ctrl.error;
+            delete ctrl.inspector;
           }
+        } catch (e) {
+          console.log('flotcharts error', e);
+          ctrl.error = e.message || "Render Error";
+          ctrl.renderError = true;
+          ctrl.inspector = {error: e};
         }
 
-        if (shouldDelayDraw(panel)) {
-          // temp fix for legends on the side, need to render twice to get dimensions right
-          callPlot(false);
-          setTimeout(function() { callPlot(true); }, 50);
-          legendSideLastValue = panel.legend.rightSide;
-        } else {
-          callPlot(true);
+        if (incrementRenderCounter) {
+          ctrl.renderingCompleted();
         }
       }
 
+      function buildFlotOptions(panel) {
+        const stack = panel.stack ? true : null;
+        let options = {
+          hooks: {
+            draw: [drawHook],
+            processOffset: [processOffsetHook],
+          },
+          legend: { show: false },
+          series: {
+            stackpercent: panel.stack ? panel.percentage : false,
+            stack: panel.percentage ? null : stack,
+            lines:  {
+              show: panel.lines,
+              zero: false,
+              fill: translateFillOption(panel.fill),
+              lineWidth: panel.dashes ? 0 : panel.linewidth,
+              steps: panel.steppedLine
+            },
+            dashes: {
+              show: panel.dashes,
+              lineWidth: panel.linewidth,
+              dashLength: [panel.dashLength, panel.spaceLength]
+            },
+            bars: {
+              show: panel.bars,
+              fill: 1,
+              barWidth: 1,
+              zero: false,
+              lineWidth: 0
+            },
+            points: {
+              show: panel.points,
+              fill: 1,
+              fillColor: false,
+              radius: panel.points ? panel.pointradius : 2
+            },
+            shadowSize: 0
+          },
+          yaxes: [],
+          xaxis: {},
+          grid: {
+            minBorderMargin: 0,
+            markings: [],
+            backgroundColor: null,
+            borderWidth: 0,
+            hoverable: true,
+            clickable: true,
+            color: '#c8c8c8',
+            margin: { left: 0, right: 0 },
+            labelMarginX: 0,
+          },
+          selection: {
+            mode: "x",
+            color: '#666'
+          },
+          crosshair: {
+            mode: 'x'
+          }
+        };
+        return options;
+      }
+
       function sortSeries(series, panel) {
         var sortBy = panel.legend.sort;
         var sortOrder = panel.legend.sortDesc;
@@ -542,7 +550,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
         };
       }
 
-      function configureAxisOptions(data, options) {
+      function configureYAxisOptions(data, options) {
         var defaults = {
           position: 'left',
           show: panel.yaxes[0].show,