Add the hierarchy to legends

src/kibana/components/vislib/components/color/color.js

@@ -9,9 +9,10 @@ define(function (require) {
      * a lookup table that associates the values (key) with a hex color (value).
      * Returns a function that accepts a value (i.e. a string or number)
      * and returns a hex color associated with that value.
+     * Allows an empty value to match to the first color.
      */
 
-    return function (arrayOfStringsOrNumbers) {
+    return function (arrayOfStringsOrNumbers, matchEmptyToFirst) {
       if (!_.isArray(arrayOfStringsOrNumbers)) {
         throw new Error('ColorUtil expects an array');
       }
@@ -26,8 +27,11 @@ define(function (require) {
       var colorObj = _.zipObject(arrayOfStringsOrNumbers, createColorPalette(arrayLength));
 
       return function (value) {
+        if (matchEmptyToFirst && value === '') {
+          value = _.first(arrayOfStringsOrNumbers);
+        }
         return colorObj[value];
       };
     };
   };
-});
+});

src/kibana/components/vislib/lib/data.js

@@ -39,19 +39,24 @@ define(function (require) {
       this.type = this.getDataType();
 
       this.labels;
+      this.color;
 
       if (this.type === 'series') {
-        if (getLabels(data).length === 1 && getLabels(data)[0] === '') {
+        var labels = getLabels(data);
+        var matchEmptyToFirst = false;
+        if (labels.length === 1 && labels[0] === '') {
           this.labels = [(this.get('yAxisLabel'))];
+          matchEmptyToFirst = true;
         } else {
-          this.labels = getLabels(data);
+          this.labels = labels;
         }
+        this.color = this.labels ? color(this.labels, matchEmptyToFirst) : undefined;
       } else if (this.type === 'slices') {
-        this.labels = this.pieNames();
+        var flatAndNested = this.pieNames();
+        this.labels = flatAndNested.nestedNames;
+        this.color = color(flatAndNested.flatNames);
       }
 
-      this.color = this.labels ? color(this.labels) : undefined;
-
       this._normalizeOrdered();
 
       this._attr = _.defaults(attr || {}, {
@@ -456,58 +461,48 @@ define(function (require) {
 
     /**
      * Helper function for getNames
-     * Returns an array of objects with a name (key) value and an index value.
-     * The index value allows us to sort the names in the correct nested order.
+     * Returns a nested set of objects that contain the hierarchical relationship. Each object contains
+     * the name, the children, and a data object that has the size and depth for sorting
+     * purposes.
      *
      * @method returnNames
      * @param array {Array} Array of data objects
      * @param index {Number} Number of times the object is nested
-     * @param columns {Object} Contains name formatter information
-     * @returns {Array} Array of labels (strings)
+     * @returns {Object} Nested set of objects
      */
-    Data.prototype.returnNames = function (array, index, columns) {
-      var names = [];
+    Data.prototype.returnNames = function (array, index) {
+      var names = {};
       var self = this;
 
       _.forEach(array, function (obj) {
         var fieldFormatter = obj.aggConfig ? obj.aggConfig.fieldFormatter() : String;
-        names.push({ key: fieldFormatter(obj.name), index: index });
+        var name = fieldFormatter(obj.name);
+        names[name] = {name: name, data: {name: name, amount: obj.size, depth: index}, children: {}};
 
         if (obj.children) {
           var plusIndex = index + 1;
 
-          _.forEach(self.returnNames(obj.children, plusIndex, columns), function (namedObj) {
-            names.push(namedObj);
-          });
+          names[name].children = self.returnNames(obj.children, plusIndex);
         }
       });
 
       return names;
     };
 
     /**
-     * Flattens hierarchical data into an array of objects with a name and index value.
-     * The indexed value determines the order of nesting in the data.
-     * Returns an array with names sorted by the index value.
+     * Returns a nested set of objects that contain the hierarchical relationship. Each object contains
+     * the name, the children, and a data object that has the size and depth for sorting
+     * purposes.
      *
      * @method getNames
      * @param data {Object} Chart data object
-     * @param columns {Object} Contains formatter information
-     * @returns {Array} Array of names (strings)
+     * @returns {Object} Nested set of objects
      */
-    Data.prototype.getNames = function (data, columns) {
+    Data.prototype.getNames = function (data) {
       var slices = data.slices;
 
       if (slices.children) {
-        var namedObj = this.returnNames(slices.children, 0, columns);
-
-        return _(namedObj)
-        .sortBy(function (obj) {
-          return obj.index;
-        })
-        .pluck('key')
-        .unique()
-        .value();
+        return this.returnNames(slices.children, 0);
       }
     };
 
@@ -539,27 +534,51 @@ define(function (require) {
     };
 
     /**
-     * Returns an array of names ordered by appearance in the nested array
-     * of objects
+     * Returns an array of names and an object hierarchy of names ordered by size
      *
      * @method pieNames
-     * @returns {Array} Array of unique names (strings)
+     * @returns {Object} Object that contains array of names and hierarchy of names
      */
     Data.prototype.pieNames = function () {
       var self = this;
-      var names = [];
+      var hierarchy = {};
+      var nestedNames = {};
+      var flatNames = [];
 
       this._validatePieData();
 
       _.forEach(this.getVisData(), function (obj) {
-        var columns = obj.raw ? obj.raw.columns : undefined;
-
-        _.forEach(self.getNames(obj, columns), function (name) {
-          names.push(name);
+        var namedObj = [];
+        _.merge(hierarchy, self.getNames(obj), function (resultValue, sourceValue) {
+          // current version of lodash doesn't pass in the key name so use duck-typing to determine
+          // if this is the correct valur
+          if (_.isPlainObject(sourceValue) && _.has(sourceValue, 'amount')) {
+            namedObj.push({name: sourceValue.name, depth: sourceValue.depth});
+            if (_.has(resultValue, 'amount')) {
+              resultValue.amount += sourceValue.amount;
+              return resultValue;
+            } else {
+              return sourceValue;
+            }
+          }
         });
+        flatNames.push(_(namedObj)
+        .sortBy(function (obj) {
+            return obj.depth;
+          })
+        .pluck('name')
+        .unique()
+        .value());
       });
+      var recursiveSort = function (obj) {
+        obj.children = _.sortBy(obj.children, function (child) {
+          return recursiveSort(child);
+        });
+        return -1 * obj.data.amount;
+      };
+      nestedNames = _.sortBy(hierarchy, recursiveSort);
 
-      return _.uniq(names);
+      return {flatNames: _(flatNames).flatten().unique().value(), nestedNames: nestedNames};
     };
 
     /**
@@ -582,38 +601,6 @@ define(function (require) {
       return orderKeys(this.data);
     };
 
-    /**
-     * Return an array of unique labels
-     * Curently, only used for vertical bar and line charts,
-     * or any data object with series values
-     *
-     * @method getLabels
-     * @returns {Array} Array of labels (strings)
-     */
-    Data.prototype.getLabels = function () {
-      return getLabels(this.data);
-    };
-
-    /**
-     * Returns a function that does color lookup on labels
-     *
-     * @method getColorFunc
-     * @returns {Function} Performs lookup on string and returns hex color
-     */
-    Data.prototype.getColorFunc = function () {
-      return color(this.getLabels());
-    };
-
-    /**
-     * Returns a function that does color lookup on names for pie charts
-     *
-     * @method getPieColorFunc
-     * @returns {Function} Performs lookup on string and returns hex color
-     */
-    Data.prototype.getPieColorFunc = function () {
-      return color(this.pieNames());
-    };
-
     /**
      * ensure that the datas ordered property has a min and max
      * if the data represents an ordered date range.

src/kibana/components/vislib/lib/dispatch.js

@@ -233,7 +233,7 @@ define(function (require) {
 
       d3.select(element)
         .select('.legend-ul')
-        .selectAll('li.color')
+        .selectAll('li span.color')
         .filter(function (d, i) {
           return this.getAttribute('data-label') !== label;
         })
@@ -249,7 +249,7 @@ define(function (require) {
     Dispatch.prototype.unHighlightLegend = function (element) {
       d3.select(element)
         .select('.legend-ul')
-        .selectAll('li.color')
+        .selectAll('li span.color.blur_shape')
         .classed('blur_shape', false);
     };
 

src/kibana/components/vislib/lib/handler/types/pie.js

@@ -13,7 +13,7 @@ define(function (require) {
       var data = new Data(vis.data, vis._attr);
 
       return new Handler(vis, {
-        legend: new Legend(vis, vis.el, data.pieNames(), data.getPieColorFunc(), vis._attr),
+        legend: new Legend(vis, vis.el, data.labels, data.color, vis._attr),
         chartTitle: new ChartTitle(vis.el)
       });
     };

src/kibana/components/vislib/lib/legend.js

@@ -25,6 +25,11 @@ define(function (require) {
       this.vis = vis;
       this.el = el;
       this.labels = labels;
+      if (!_.isPlainObject(_.first(this.labels))) {
+        this.labels = _.map(this.labels, function (label) {
+          return {name: label, children: []};
+        });
+      }
       this.color = color;
       this._attr = _.defaults(_attr || {}, {
         'legendClass' : 'legend-col-wrapper',
@@ -66,6 +71,41 @@ define(function (require) {
     Legend.prototype.list = function (el, arrOfLabels, args) {
       var self = this;
 
+      function recurseLabels(li) {
+        li.attr('class', 'color');
+        var label = li.append('span')
+          .attr('class', 'color')
+          .each(self._addIdentifier);
+
+        label.append('i')
+          .attr('class', 'fa fa-circle dots')
+          .attr('style', function (d) {
+            return 'color:' + args.color(d.name);
+          });
+
+        label.append('span')
+        .text(function (d) {
+          return d.name;
+        });
+
+        var hasChildSelection = li.filter(function (d) {
+          return d.children.length > 0;
+        });
+        if (hasChildSelection.empty()) {
+          return;
+        }
+
+        // add children
+        hasChildSelection.append('ul')
+        .selectAll('li')
+        .data(function (d) {
+          return d.children;
+        })
+        .enter()
+          .append('li')
+          .call(recurseLabels);
+      }
+
       return el.append('ul')
       .attr('class', function () {
         if (args._attr.isOpen) {
@@ -77,11 +117,7 @@ define(function (require) {
       .data(arrOfLabels)
       .enter()
         .append('li')
-        .attr('class', 'color')
-        .each(self._addIdentifier)
-        .html(function (d) {
-          return '<i class="fa fa-circle dots" style="color:' + args.color(d) + '"></i>' + d;
-        });
+        .call(recurseLabels);
     };
 
     /**
@@ -91,7 +127,7 @@ define(function (require) {
      * @param label {string} label to use
      */
     Legend.prototype._addIdentifier = function (label) {
-      dataLabel(this, label);
+      dataLabel(this, label.name);
     };
 
 
@@ -131,12 +167,14 @@ define(function (require) {
         }
       });
 
-      legendDiv.select('.legend-ul').selectAll('li')
-      .on('mouseover', function (label) {
+      legendDiv.select('.legend-ul').selectAll('li > span')
+      .on('mouseover', function (d) {
+        // data-label's are strings so make sure the label is a string
+        var label = '' + d.name;
         var charts = visEl.selectAll('.chart');
 
         // legend
-        legendDiv.selectAll('li')
+        legendDiv.selectAll('li span.color')
         .filter(function (d) {
           return this.getAttribute('data-label') !== label;
         })
@@ -162,11 +200,11 @@ define(function (require) {
         var charts = visEl.selectAll('.chart');
 
         // legend
-        legendDiv.selectAll('li')
+        legendDiv.selectAll('li span.blur_shape')
         .classed('blur_shape', false);
 
-        // all data-label attribute
-        charts.selectAll('[data-label]')
+        // all blur'ed elements with data-label attribute
+        charts.selectAll('.blur_shape[data-label]')
         .classed('blur_shape', false);
 
         var eventEl =  d3.select(this);

src/kibana/components/vislib/styles/_legend.less

@@ -54,6 +54,9 @@
         padding-right: 5px;
       }
     }
+    ul {
+      padding-left: 15px;
+    }
   }
 
   .legend-ul.hidden {

src/kibana/components/vislib/visualizations/area_chart.js

@@ -55,7 +55,7 @@ define(function (require) {
       var ordered = this.handler.data.get('ordered');
       var isTimeSeries = (ordered && ordered.date);
       var isOverlapping = this.isOverlapping;
-      var color = this.handler.data.getColorFunc();
+      var color = this.handler.data.color;
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.yAxis.yScale;
       var interpolate = (this._attr.smoothLines) ? 'cardinal' : this._attr.interpolate;
@@ -142,7 +142,7 @@ define(function (require) {
      */
     AreaChart.prototype.addCircles = function (svg, data) {
       var self = this;
-      var color = this.handler.data.getColorFunc();
+      var color = this.handler.data.color;
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.yAxis.yScale;
       var ordered = this.handler.data.get('ordered');