feat(text,Options): Add new data.labels.position option

spec/data-spec.js

@@ -459,13 +459,11 @@ describe("DATA", () => {
 				});
 			});
 
-			it("should update args to be stacked", () => {
+			it("set options data.groups to be stacked", () => {
 				args.data.groups = [
 					["data1", "data2"],
 					["data3", "data4"]
 				];
-
-				expect(true).to.be.ok;
 			});
 
 			it("should locate data labels in correct position", () => {
@@ -491,6 +489,39 @@ describe("DATA", () => {
 					});
 				});
 			});
+
+			it("set options data.labels.position", () => {
+				args.data.labels = {
+					position: {
+						x: 20,
+						y: -20
+					}
+				};
+			});
+
+			it("should locate data labels in correct position", () => {
+				const expectedTextY = {
+					data1: [120, 40, 75],
+					data2: [161, 127, 159],
+					data3: [272.5, 307, 274.5],
+					data4: [313, 394, 358]
+				};
+				const expectedTextX = {
+					data1: [6, 296, 583],
+					data2: [6, 296, 583],
+					data3: [6, 296, 583],
+					data4: [6, 296, 583]
+				};
+
+				Object.keys(expectedTextY).forEach(key => {
+					chart.internal.main.selectAll(`.bb-texts-${key} text.bb-text`).each(function(d, i) {
+						const text = d3.select(this);
+
+						expect(+text.attr("y")).to.be.closeTo(expectedTextY[key][i] - 20, 3);
+						expect(+text.attr("x")).to.be.closeTo(expectedTextX[key][i] + 20, 3);
+					});
+				});
+			});
 		});
 
 		describe("on area chart", () => {
@@ -536,13 +567,11 @@ describe("DATA", () => {
 				});
 			});
 
-			it("should update args to be stacked", () => {
+			it("set options data.groups to be stacked", () => {
 				args.data.groups = [
 					["data1", "data2"],
 					["data3", "data4"]
 				];
-
-				expect(true).to.be.ok;
 			});
 
 			it("should locate data labels in correct position", () => {
@@ -613,13 +642,11 @@ describe("DATA", () => {
 				});
 			});
 
-			it("should update args to be stacked", () => {
+			it("set options data.groups to be stacked", () => {
 				args.data.groups = [
 					["data1", "data2"],
 					["data3", "data4"]
 				];
-
-				expect(true).to.be.ok;
 			});
 
 			it("should locate data labels in correct position", () => {
@@ -809,10 +836,8 @@ describe("DATA", () => {
 					});
 				});
 
-				it("should update args", () => {
+				it("set options data.type=line", () => {
 					args.data.type = "line";
-
-					expect(true).to.be.ok;
 				});
 
 				it("should have y domain with proper padding #2", () => {

src/config/Options.js

@@ -440,41 +440,44 @@ export default class Options {
 			data_types: {},
 
 			/**
-			 * Show labels on each data points.
+			 * Set labels options
 			 * @name data:labels
 			 * @memberof Options
-			 * @type {Boolean}
-			 * @default false
-			 * @example
-			 * data: {
-			 *   labels: true
-			 * }
-			 */
-			/**
-			 * Set formatter function for data labels.<br>
+			 * @type {Object}
+			 * @property {Boolean} [donut.labels=false] Show or hide labels on each data points
+			 * @property {Function} [donut.labels.format={}] Set formatter function for data labels.<br>
 			 * The formatter function receives 4 arguments such as v, id, i, j and it must return a string that will be shown as the label. The arguments are:<br>
 			 *  - `v` is the value of the data point where the label is shown.
 			 *  - `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.<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('$'))
-			 * @name data:labels:format
+			 * @property {Number} [donut.labels.position.x=0] x coordinate position, relative the original.
+			 * @property {NUmber} [donut.labels.position.y=0] y coordinate position, relative the original.
 			 * @memberof Options
 			 * @type {Object}
 			 * @default {}
 			 * @example
 			 * data: {
+			 *   labels: true,
+			 *
+			 *   // or set specific options
 			 *   labels: {
-			 *     format: function(v, id, i, j) { ... }
+			 *     format: function(v, id, i, j) { ... },
 			 *     // it's possible to set for each data
 			 *     //format: {
 			 *     //    data1: function(v, id, i, j) { ... },
 			 *     //    ...
-			 *     //}
+			 *     //},
+			 *     position: {
+			 *        x: -10,
+			 *        y: 10
+			 *     }
 			 *   }
 			 * }
 			 */
 			data_labels: {},
+			data_labels_position: {},
 
 			/**
 			 *  This option changes the order of stacking the data and pieces of pie/donut. If `null` specified, it will be the order the data loaded. If function specified, it will be used to sort the data and it will recieve the data as argument.<br><br>

src/internals/text.js

@@ -149,9 +149,10 @@ extend(ChartInternal.prototype, {
 		const getter = forX ? $$.getXForText : $$.getYForText;
 
 		return function(d, i) {
-			let getPoints = $$.isBarType(d) ? getBarPoints : getLinePoints;
+			const getPoints = ($$.isAreaType(d) && getAreaPoints) ||
+				($$.isBarType(d) && getBarPoints) ||
+				getLinePoints;
 
-			getPoints = $$.isAreaType(d) ? getAreaPoints : getPoints;
 			return getter.call($$, getPoints(d, i), d, this);
 		};
 	},
@@ -166,10 +167,11 @@ extend(ChartInternal.prototype, {
 	 */
 	getXForText(points, d, textElement) {
 		const $$ = this;
+		const config = $$.config;
 		let xPos;
 		let padding;
 
-		if ($$.config.axis_rotated) {
+		if (config.axis_rotated) {
 			padding = $$.isBarType(d) ? 4 : 6;
 			xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1);
 		} else {
@@ -183,7 +185,8 @@ extend(ChartInternal.prototype, {
 				xPos = 4;
 			}
 		}
-		return xPos;
+
+		return xPos + (config.data_labels_position.x || 0);
 	},
 
 	/**
@@ -196,9 +199,10 @@ extend(ChartInternal.prototype, {
 	 */
 	getYForText(points, d, textElement) {
 		const $$ = this;
+		const config = $$.config;
 		let yPos;
 
-		if ($$.config.axis_rotated) {
+		if (config.axis_rotated) {
 			yPos = (points[0][0] + points[2][0] + textElement.getBoundingClientRect().height * 0.6) / 2;
 		} else {
 			yPos = points[2][1];
@@ -214,7 +218,7 @@ extend(ChartInternal.prototype, {
 			}
 		}
 		// show labels regardless of the domain if value is null
-		if (d.value === null && !$$.config.axis_rotated) {
+		if (d.value === null && !config.axis_rotated) {
 			const boxHeight = textElement.getBoundingClientRect().height;
 
 			if (yPos < boxHeight) {
@@ -223,6 +227,7 @@ extend(ChartInternal.prototype, {
 				yPos = this.height - 4;
 			}
 		}
-		return yPos;
+
+		return yPos + (config.data_labels_position.y || 0);
 	},
 });