Detect correct level color for gauge with more than one data value pe…

…r series (#2750) (#2755)

spec/arc-spec.js

@@ -435,6 +435,43 @@ describe('c3 chart arc', function () {
                 });
             });
         });
+
+        describe('with more than one data value ', function () {
+            beforeAll(function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['padded1', 40, 60],
+                            ['padded2', 100, -10],
+                            ['padded3', 0, 50],
+                            ['padded4', 20, 0]
+                        ],
+                        type: 'gauge'
+                    },
+                    color: {
+                        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+                        threshold: {
+                            values: [30, 80, 95]
+                        }
+                    }
+                };
+            });
+            var arcColor = ['rgb(96, 176, 68)', 'rgb(246, 198, 0)', 'rgb(249, 118, 0)', 'rgb(255, 0, 0)'];
+
+            describe('should contain arcs ', function () {
+                it('each data_column should have one arc', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
+                        expect(d3.select(this).classed('c3-arc-' + args.data.columns[i][0])).toBeTruthy();
+                    });
+                });
+
+                it('each arc should have the color from color_pattern if color_treshold is given ', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
+                        expect(d3.select(this).style('fill')).toBe(arcColor[i]);
+                    });
+                });
+            });
+        });
     });
 
 });

spec/legend-spec.js

@@ -340,6 +340,40 @@ describe('c3 chart legend', function () {
         });
     });
 
+    describe('legend item tile coloring with color_treshold (more than one data value)', function () {
+        beforeAll(function () {
+            args = {
+                data: {
+                    columns: [
+                        ['padded1', 40, 60],
+                        ['padded2', 100, -10],
+                        ['padded3', 0, 50],
+                        ['padded4', 20, 0]
+                    ]
+                },
+                type: 'gauge',
+                color: {
+                    pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+                    threshold: {
+                        values: [30, 80, 95]
+                    }
+                }
+            };
+        });
+
+        // espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc
+        it('selects the color from color_pattern if color_treshold is given', function () {
+            var tileColor = [];
+            d3.selectAll('.c3-legend-item-tile').each(function () {
+                tileColor.push(d3.select(this).style('stroke'));
+            });
+            expect(tileColor[0]).toBe('rgb(96, 176, 68)');
+            expect(tileColor[1]).toBe('rgb(246, 198, 0)');
+            expect(tileColor[2]).toBe('rgb(249, 118, 0)');
+            expect(tileColor[3]).toBe('rgb(255, 0, 0)');
+        });
+    });
+
     describe('legend item tile coloring without color_treshold', function () {
         beforeAll(function () {
             args = {

src/arc.js

@@ -354,7 +354,9 @@ ChartInternal.prototype.redrawArc = function (duration, durationForExit, withTra
         }
         else {
             mainArcLabelLine
-                .style("fill", function (d) { return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data); })
+                .style("fill", function (d) {
+                    return $$.levelColor ? $$.levelColor(d.data.values.reduce(function (total, item) { return total + item.value; }, 0)) : $$.color(d.data);
+                })
                 .style("display", config.gauge_labelLine_show ? "" : "none")
                 .each(function (d) {
                     var lineLength = 0, lineThickness = 2, x = 0, y = 0, transform = "";
@@ -463,7 +465,7 @@ ChartInternal.prototype.redrawArc = function (duration, durationForExit, withTra
         })
         .attr("transform", withTransform ? "scale(1)" : "")
         .style("fill", function (d) {
-            return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data.id);
+            return $$.levelColor ? $$.levelColor(d.data.values.reduce(function (total, item) { return total + item.value; }, 0)) : $$.color(d.data.id);
         }) // Where gauge reading color would receive customization.
         .call($$.endall, function () {
             $$.transiting = false;

src/legend.js

@@ -312,7 +312,7 @@ ChartInternal.prototype.updateLegend = function (targetIds, options, transitions
             .data(targetIds);
         (withTransition ? tiles.transition() : tiles)
             .style('stroke', $$.levelColor ? function(id) {
-                return $$.levelColor($$.cache[id].values[0].value);
+                return $$.levelColor($$.cache[id].values.reduce(function (total, item) { return total + item.value; }, 0));
             } : $$.color)
             .attr('x1', x1ForLegendTile)
             .attr('y1', yForLegendTile)