Mapped colors for line and area graph type visualization

elastic · Jul 15, 2015 · 3820832 · 3820832
1 parent c1efcc7
commit 3820832
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/kibana/components/vislib/components/color/color.js b/src/kibana/components/vislib/components/color/color.js
@@ -29,8 +29,9 @@ define(function (require) {
       var colorObj = _.zipObject(arrayOfStringsOrNumbers, uniqueColors);
 
       return function (value) {
-        if (!mappedColors.get(value))
+        if (!mappedColors.get(value)) {
           mappedColors.add(value, colorObj[value]);
+        }
         return mappedColors.get(value);
       };
     };

diff --git a/src/kibana/components/vislib/visualizations/area_chart.js b/src/kibana/components/vislib/visualizations/area_chart.js
@@ -96,7 +96,11 @@ define(function (require) {
       var path = layer.append('path')
       .call(this._addIdentifier)
       .style('fill', function (d) {
-        return color(d[0].label);
+        var label = d[0].label;
+        if (!label) {
+          label = this.getAttribute('data-label');
+        }
+        return color(label);
       })
       .classed('overlap_area', function () {
         return isOverlapping;
@@ -179,7 +183,11 @@ define(function (require) {
       .append('circle')
       .call(this._addIdentifier)
       .attr('stroke', function strokeColor(d) {
-        return color(d.label);
+        var label = d.label;
+        if (!label) {
+          label = this.getAttribute('data-label');
+        }
+        return color(label);
       })
       .attr('fill', 'transparent')
       .attr('stroke-width', circleStrokeWidth);

diff --git a/src/kibana/components/vislib/visualizations/column_chart.js b/src/kibana/components/vislib/visualizations/column_chart.js
@@ -74,8 +74,9 @@ define(function (require) {
       .call(this._addIdentifier)
       .attr('fill', function (d) {
         var label = d.label ;
-        if (!label)
+        if (!label) {
           label = this.getAttribute('data-label');
+        }
         return color(label);
       });
 

diff --git a/src/kibana/components/vislib/visualizations/line_chart.js b/src/kibana/components/vislib/visualizations/line_chart.js
@@ -113,7 +113,15 @@ define(function (require) {
       }
 
       function cColor(d) {
-        return color(d.label);
+        getColor(d, this);
+      }
+
+      function getColor(d, circleElement) {
+        var label = d.label;
+        if (!label) {
+          label = circleElement.getAttribute('data-label');
+        }
+        return color(label);
       }
 
       function colorCircle(d) {
@@ -123,7 +131,7 @@ define(function (require) {
 
         // If only 1 point exists, show circle
         if (!showCircles && !isVisible) return 'none';
-        return cColor(d);
+        return getColor(d, this);
       }
       function getCircleRadiusFn(modifier) {
         return function getCircleRadius(d) {
@@ -144,9 +152,9 @@ define(function (require) {
         .attr('fill-opacity', (this._attr.drawLinesBetweenPoints ? 1 : 0.7))
         .attr('cx', cx)
         .attr('cy', cy)
-        .attr('fill', colorCircle)
         .attr('class', 'circle-decoration')
-        .call(this._addIdentifier);
+        .call(this._addIdentifier)
+        .attr('fill', colorCircle);
 
       circles
       .enter()
@@ -210,7 +218,11 @@ define(function (require) {
       })
       .attr('fill', 'none')
       .attr('stroke', function lineStroke(d) {
-        return color(d.label);
+        var label = d.label;
+        if (!label) {
+          label = this.getAttribute('data-label');
+        }
+        return color(label);
       })
       .attr('stroke-width', 2);