fix(color): Fix on color.threshold.values handling

- Fix erroneous loop condition to determine color value
- Make threshold values to be alined as the max ( n < n1 ==> n <= n1)

Fix #950

spec/internals/color-spec.js

@@ -133,8 +133,6 @@ describe("COLOR", () => {
 				.each(function(v, i) {
 					const stroke = d3.select(this).style("stroke").replace(/\"/g, "");
 
-					console.log(this, stroke, colors, i)
-
 					expect(stroke).to.be.equal(colors[i]);
 			});
 		});
@@ -348,4 +346,42 @@ describe("COLOR", () => {
 			}, 1000);
 		});
 	});
+
+	describe("color.threshold", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data", 0]
+					],
+					type: "gauge"
+				},
+				color: {
+					pattern: ["rgb(255, 0, 0)", "rgb(255, 165, 0)", "rgb(255, 255, 0)", "rgb(0, 128, 0)", "rgb(0, 0, 255)"],
+					threshold: {
+						values: [0, 20, 40, 60, 80]
+					}
+				}
+			}
+		});
+
+		it("check for color update", done => {
+			const path = chart.$.arc.select(`path.${CLASS.arc}-data`);
+			let i = 0;
+
+			expect(path.style("fill")).to.be.equal(args.color.pattern[i++]);
+
+			chart.load({columns: [["data", 19]]});
+
+			setTimeout(() => {
+				expect(path.style("fill")).to.be.equal(args.color.pattern[i++]);
+				chart.load({columns: [["data", 40]]});
+			}, 500);
+
+			setTimeout(() => {
+				expect(path.style("fill")).to.be.equal(args.color.pattern[i++]);
+				done();
+			}, 1000);
+		});
+	});
 });

src/config/Options.js

@@ -1221,7 +1221,7 @@ export default class Options {
 			 * @property {Object} [color.threshold] color threshold for gauge and tooltip color
 			 * @property {String} [color.threshold.unit] If set to `value`, the threshold will be based on the data value. Otherwise it'll be based on equation of the `threshold.max` option value.
 			 * @property {Array} [color.threshold.values] Threshold values for each steps
-			 * @property {Array} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.
+			 * @property {Number} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.
 			 * @example
 			 *  color: {
 			 *      pattern: ["#1f77b4", "#aec7e8", ...],
@@ -1254,8 +1254,14 @@ export default class Options {
 			 *      pattern: ["grey", "green", "yellow", "orange", "red"],
 			 *      threshold: {
 			 *          unit: "value",
-			 *          values: [10, 20, 30, 40, 50],  // when the value is 20, 'green' will be set and the value is 40, 'orange' will be set.
-			 *          max: 30  // the equation for max is: value*100/30
+			 *
+			 *          // when value is 20 => 'green', value is 40 => 'orange' will be set.
+			 *          values: [10, 20, 30, 40, 50],
+			 *
+			 *          // the equation for max:
+			 *          // - unit == 'value': max => 30
+			 *          // - unit != 'value': max => value*100/30
+			 *          max: 30
 			 *      },
 			 *
 			 *      // set all data to 'red'

src/internals/color.js

@@ -137,19 +137,17 @@ extend(ChartInternal.prototype, {
 		const config = $$.config;
 		const colors = config.color_pattern;
 		const threshold = config.color_threshold;
-
 		const asValue = threshold.unit === "value";
 		const max = threshold.max || 100;
 		const values = threshold.values &&
 			threshold.values.length ? threshold.values : [];
 
 		return notEmpty(threshold) ? function(value) {
+			const v = asValue ? value : (value * 100 / max);
 			let color = colors[colors.length - 1];
 
-			for (let i = 0, v, val; (val = values[i]); i++) {
-				v = asValue ? value : (value * 100 / max);
-
-				if (v < val) {
+			for (let i = 0, l = values.length; i < l; i++) {
+				if (v <= values[i]) {
 					color = colors[i];
 					break;
 				}