feat(data): Intent to ship data.labels.colors

Implementation of data.labels.colors option

Fix #871

demo/demo.js

@@ -1724,6 +1724,38 @@ var demos = {
 				}
 			}
 		},
+		DataLabelColors: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, -200, -100, 400, 150, 250],
+							["data2", -50, 150, -150, 150, -50, -150],
+						],
+						type: "bar",
+						labels: {
+							colors: "red"
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, -200, -100, 400, 150, 250],
+							["data2", -50, 150, -150, 150, -50, -150],
+						],
+						labels: {
+							colors: {
+								data1: "fuchsia",
+								data2: "blue"
+							}
+						}
+					}
+				}
+			}
+		],
 		DataLabelFormat: {
 			options: {
 				data: {
@@ -1740,7 +1772,7 @@ var demos = {
 						// format: function(v, id, i, j) { return "Default Format"; },
 						format: {
 							data1: function(x) {
-								return d3.format('$')(x)
+						     return d3.format('$')(x);
 							}
 							// data1: function(v, id, i, j) { return "Format for data1"; },
 						}

spec/internals/data-spec.js

@@ -560,6 +560,35 @@ describe("DATA", () => {
 				});
 			});
 
+			it("set options data.labels.colors", () => {
+				args.data.labels = {
+					colors: "red"
+				};
+			});
+
+			it("check for all data label texts colors to have same color", () => {
+				chart.$.text.texts.each(function() {
+					expect(this.style.fill).to.be.equal(args.data.labels.colors);
+				});
+			});
+
+			it("set options data.labels.colors", () => {
+				args.data.labels = {
+					colors: {
+						data1: "red",
+						data2: "green",
+						data3: "yellow",
+						data4: "cyan"
+					}
+				};
+			});
+
+			it("check for all data label texts colors to have different color", () => {
+				chart.$.text.texts.each(function(d) {
+					expect(this.style.fill).to.be.equal(args.data.labels.colors[d.id]);
+				});
+			});
+
 			it("text property shouldn't be empty", () => {
 				const texts = chart.$.text.texts;
 

src/config/Options.js

@@ -567,14 +567,16 @@ export default class Options {
 			 *  - `i` is the index of the data point where the label is shown.
 			 *  - `j` is the sub index of the data point where the label is shown.<br><br>
 			 * Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
+ 			 * @property {String|Object} [data.labels.colors] Set label text colors.
 			 * @property {Number} [data.labels.position.x=0] x coordinate position, relative the original.
 			 * @property {NUmber} [data.labels.position.y=0] y coordinate position, relative the original.
 			 * @memberof Options
 			 * @type {Object}
 			 * @default {}
 			 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataLabel)
-			 * @see [Demo: labels format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat)
-			 * @see [Demo: labels position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition)
+			 * @see [Demo: label colors](https://naver.github.io/billboard.js/demo/#Data.DataLabelColors)
+			 * @see [Demo: label format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat)
+			 * @see [Demo: label position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition)
 			 * @example
 			 * data: {
 			 *   labels: true,
@@ -588,6 +590,18 @@ export default class Options {
 			 *         data1: function(v, id, i, j) { ... },
 			 *         ...
 			 *     },
+			 *
+			 *     // apply for all label texts
+			 *     colors: "red",
+			 *
+			 *     // or set different colors per dataset
+			 *     // for not specified dataset, will have the default color value
+			 *     colors: {
+			 *        data1: "yellow",
+			 *        data3: "green"
+			 *     },
+			 *
+			 *     // set x, y coordinate position
 			 *     position: {
 			 *        x: -10,
 			 *        y: 10
@@ -596,6 +610,7 @@ export default class Options {
 			 * }
 			 */
 			data_labels: {},
+			data_labels_colors: undefined,
 			data_labels_position: {},
 
 			/**

src/internals/text.js

@@ -8,7 +8,7 @@ import {
 } from "d3-selection";
 import ChartInternal from "./ChartInternal";
 import CLASS from "../config/classes";
-import {extend, getRandom, isNumber, capitalize} from "./util";
+import {capitalize, extend, getRandom, isNumber, isObject, isString} from "./util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -72,12 +72,25 @@ extend(ChartInternal.prototype, {
 			.merge($$.mainText)
 			.attr("class", classText)
 			.attr("text-anchor", d => (config.axis_rotated ? (d.value < 0 ? "end" : "start") : "middle"))
-			.style("stroke", "none")
-			.style("fill", d => $$.color(d))
+			.style("fill", $$.updateTextColor.bind($$))
 			.style("fill-opacity", "0")
 			.text((d, i, j) => $$.dataLabelFormat(d.id)(d.value, d.id, i, j));
 	},
 
+	updateTextColor(d) {
+		const $$ = this;
+		const labelColors = $$.config.data_labels_colors;
+		let color;
+
+		if (isString(labelColors)) {
+			color = labelColors;
+		} else if (isObject(labelColors)) {
+			color = labelColors[d.id];
+		}
+
+		return color || $$.color(d);
+	},
+
 	/**
 	 * Redraw chartText
 	 * @private
@@ -100,7 +113,7 @@ extend(ChartInternal.prototype, {
 				(withTransition && text.attr("x") ? text.transition(t) : text)
 					.attr("x", xForText)
 					.attr("y", yForText)
-					.style("fill", $$.color)
+					.style("fill", $$.updateTextColor.bind($$))
 					.style("fill-opacity", opacityForText);
 			})
 		];

types/chart.d.ts

@@ -305,7 +305,7 @@ export interface Chart {
 
 	/**
 	 * Flow data to the chart. By this API, you can append new data points to the chart.
-	 * 
+	 *
 	 * The args object can consist with following members:
 	 *    | Key | Type | Description |
 	 *    | --- | --- | --- |

types/options.d.ts

@@ -387,7 +387,6 @@ export interface ChartOptions {
 		 */
 		innerRadius?: number | {
 			[key: string]: number
-
 		};
 
 		/**
@@ -1173,16 +1172,29 @@ export interface Data {
 	 * - id is the id of the data where the label is shown.
 	 * - i is the index of the data point where the label is shown.
 	 * - j is the sub index of the data point where the label is shown.
-	 * Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (e.g. d3.format('$'))
 	 */
-	labels?: boolean
-		| { format: FormatFunction }
-		| { format: { [key: string]: FormatFunction } }
-		| {
-			position: {
+	labels?: boolean | {
+			/**
+			 * Set label text colors.
+			 */
+			colors?: string | { [key: string]: string };
+
+			/**
+			 * Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (e.g. d3.format('$'))
+			 */
+			format?: FormatFunction | { [key: string]: FormatFunction };
+
+			position?: {
+				/**
+				 * x coordinate position, relative the original.
+				 */
 				x?: number;
+
+				/**
+				 * y coordinate position, relative the original.
+				 */
 				y?: number;
-			}
+			};
 		};
 
 	/**

types/tsconfig.json

@@ -8,11 +8,14 @@
         "baseUrl": "../",
         "lib": [
             "es6", "dom"
+        ],
+        "typeRoots": [
+            "./node_modules/@types"
         ]
     },
     "include": [
         "./*.ts"
     ],
     "noEmit": true,
     "forceConsistentCasingInFileNames": true
-}
+}