#29 add show/hide plugin

ui/app.html

@@ -11,6 +11,7 @@
   <script type="text/javascript" src="lib/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="lib/bower_components/flot/jquery.flot.js"></script>
   <script type="text/javascript" src="lib/bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
+  <script type="text/javascript" src="lib/markrcote/jquery.flot.hiddengraphs.js"></script>
   <script type="text/javascript" src="lib/oughton/jquery.flot.xgap.js"></script>
   <script type="text/javascript" src="lib/bower_components/angular/angular.min.js"></script>
   <script type="text/javascript" src="lib/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

ui/board.controller.js

@@ -131,7 +131,8 @@
               hoverable: true
             },
             legend: {
-              show: true
+              show: true,
+              hideable: true
             },
             xaxis: {
               insertGaps: true,

ui/lib/markrcote/jquery.flot.hiddengraphs.js

@@ -0,0 +1,229 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+ * Plugin to hide series in flot graphs.
+ *
+ * To activate, set legend.hideable to true in the flot options object.
+ * To hide one or more series by default, set legend.hidden to an array of
+ * label strings.
+ *
+ * At the moment, this only works with line and point graphs.
+ *
+ * Example:
+ *
+ *     var plotdata = [
+ *         {
+ *             data: [[1, 1], [2, 1], [3, 3], [4, 2], [5, 5]],
+ *             label: "graph 1"
+ *         },
+ *         {
+ *             data: [[1, 0], [2, 1], [3, 0], [4, 4], [5, 3]],
+ *             label: "graph 2"
+ *         }
+ *     ];
+ *
+ *     plot = $.plot($("#placeholder"), plotdata, {
+ *        series: {
+ *             points: { show: true },
+ *             lines: { show: true }
+ *         },
+ *         legend: {
+ *             hideable: true,
+ *             hidden: ["graph 1", "graph 2"]
+ *         }
+ *     });
+ *
+ */
+(function ($) {
+  var options = { };
+
+  function init(plot) {
+    var drawnOnce = false;
+
+    function findPlotSeries(label) {
+      var plotdata = plot.getData();
+      for (var i = 0; i < plotdata.length; i++) {
+        if (plotdata[i].label == label) {
+          return plotdata[i];
+        }
+      }
+      return null;
+    }
+
+    function plotLabelClicked(label, mouseOut) {
+      var series = findPlotSeries(label);
+      if (!series) {
+        return;
+      }
+
+      var options = plot.getOptions();
+      var switchedOff = false;
+
+      if (typeof series.points.oldShow === "undefined") {
+        series.points.oldShow = false;
+      }
+      if (typeof series.lines.oldShow === "undefined") {
+        series.lines.oldShow = false;
+      }
+
+      if (series.points.show && !series.points.oldShow) {
+        series.points.show = false;
+        series.points.oldShow = true;
+        switchedOff = true;
+      }
+      if (series.lines.show && !series.lines.oldShow) {
+        series.lines.show = false;
+        series.lines.oldShow = true;
+        switchedOff = true;
+      }
+
+      if (switchedOff) {
+        series.oldColor = series.color;
+        series.color = "#fff";
+        setHidden(options, label, true);
+      } else {
+        var switchedOn = false;
+
+        if (!series.points.show && series.points.oldShow) {
+          series.points.show = true;
+          series.points.oldShow = false;
+          switchedOn = true;
+        }
+        if (!series.lines.show && series.lines.oldShow) {
+          series.lines.show = true;
+          series.lines.oldShow = false;
+          switchedOn = true;
+        }
+
+        if (switchedOn) {
+          series.color = series.oldColor;
+          setHidden(options, label, false);
+        }
+      }
+    }
+
+    function setSetupRedraw () {
+      // HACK: Reset the data, triggering recalculation of graph bounds
+      plot.setData(plot.getData());
+
+      plot.setupGrid();
+      plot.draw();
+    }
+
+    function setHidden(options, label, hide) {
+      // Record state to a new variable in the legend option object.
+      if (!options.legend.hidden) {
+        options.legend.hidden = [];
+      }
+
+      var pos = options.legend.hidden.indexOf(label);
+
+      if (hide) {
+        if (pos < 0) {
+          options.legend.hidden.push(label);
+        }
+      } else {
+        if (pos > -1) {
+          options.legend.hidden.splice(pos, 1);
+        }
+      }
+    }
+
+    function setHideAction(elem) {
+      elem.mouseenter(function() { $(this).css("cursor", "pointer"); })
+          .mouseleave(function() { $(this).css("cursor", "default"); })
+          .unbind("click").click(function() {
+            if ($(this).is(".legendColorBox")) {
+              plotLabelClicked($(this).next('.legendLabel').text());
+            } else {
+              plotLabelClicked($(this).parent().text());
+            }
+            setSetupRedraw();
+          });
+    }
+
+    function plotLabelHandlers(plot) {
+      var options = plot.getOptions();
+
+      if (!options.legend.hideable) {
+        return;
+      }
+
+      var p = plot.getPlaceholder();
+
+      setHideAction(p.find(".graphlabel"));
+      setHideAction(p.find(".legendColorBox"));
+
+      if (!drawnOnce) {
+        drawnOnce = true;
+        if (options.legend.hidden) {
+          for (var i = 0; i < options.legend.hidden.length; i++) {
+            plotLabelClicked(options.legend.hidden[i], true);
+          }
+          setSetupRedraw();
+        }
+      }
+    }
+
+    function checkOptions(plot, options) {
+      if (!options.legend.hideable) {
+        return;
+      }
+
+      options.legend.labelFormatter = function(label, series) {
+        return '<span class="graphlabel">' + label + '</span>';
+      };
+    }
+
+    function hideDatapointsIfNecessary(plot, s, datapoints) {
+      var options = plot.getOptions();
+
+      if (!options.legend.hideable) {
+        return;
+      }
+
+      if (options.legend.hidden &&
+          options.legend.hidden.indexOf(s.label) > -1) {
+        var off = false;
+
+        if (s.points.show) {
+          s.points.show = false;
+          s.points.oldShow = true;
+          off = true;
+        }
+        if (s.lines.show) {
+          s.lines.show = false;
+          s.lines.oldShow = true;
+          off = true;
+        }
+
+        if (off) {
+          s.oldColor = s.color;
+          s.color = "#fff";
+        }
+      }
+
+      if (!s.points.show && !s.lines.show) {
+        s.datapoints.format = [ null, null ];
+      }
+    }
+
+    plot.hooks.processOptions.push(checkOptions);
+
+    plot.hooks.draw.push(function (plot, ctx) {
+      plotLabelHandlers(plot);
+    });
+
+    plot.hooks.processDatapoints.push(hideDatapointsIfNecessary);
+  }
+
+  $.plot.plugins.push({
+    init: init,
+    options: options,
+    name: 'hiddenGraphs',
+    version: '1.1'
+  });
+
+})(jQuery);