fix(area-range): Fixed data parsing (#485)

Area-range types have different data format than others, and updated to handle to maintain compatibility with others Fix #481 Close #485
naver · Jul 13, 2018 · 4b78de5 · 4b78de5
1 parent 92b6a87
commit 4b78de5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 18 deletions.
diff --git a/spec/shape/shape.line-spec.js b/spec/shape/shape.line-spec.js
@@ -235,49 +235,71 @@ describe("SHAPE LINE", () => {
 	});
 
 	describe("area-range type generation", () => {
-		before(() => {
-			skipEach = true;
+		const min = 120;
+		const max = 500
 
+		before(() => {
 			args = {
 				data: {
 					x: "timestamps",
 					columns: [
-						['timestamps', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
-						['data1', [150, 140, 110], [155, 130, 115], [160, 135, 120], [135, 120, 110], [180, 150, 130], [199, 160, 125]],
-						['data2', {high: 155, low: 145, mid: 150},
+						["timestamps", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
+						["data1",
+							[150, 140, 110],
+							[155, 130, 115],
+							[160, 135, 120],
+							[135, min, 110],
+							[180, 150, 130],
+							[199, 160, 125]
+						],
+						["data2",
+							{high: 155, low: 145, mid: 150},
 							{high: 200, mid: 190, low: 150},
-							{high: 230, mid: 215, low: 200},
+							{high: 230, mid: max, low: 200},
 							{high: 210, mid: 200, low: 180},
 							{high: 220, mid: 210, low: 190},
-							{high: 200, mid: 180, low: 160}],
+							{high: 200, mid: 180, low: 160}
+						],
+						["data3", 130, 340, 200, 500, 250, 350]
 					],
 					type: "area-spline-range",
+					types: {
+						data3: "bubble"
+					}
 				},
+				axis: {
+					x: {
+						type: "timeseries"
+					}
+				}
 			};
 		});
 
-		after(() => { skipEach = false; });
-
 		it("Should render the lines correctly when array data supplied", () => {
 			const target = chart.internal.main.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
-			const commands = parseSvgPath(target.select(`.${CLASS.line}-data1`).attr("d"));
+			const commands = target.select(`.${CLASS.line}-data1`).attr("d").split("C");
+			const dataLen = chart.data.values("data1").length;
 
-			expect(commands.length).to.be.equal(6);
+			expect(commands.length).to.be.equal(dataLen);
 		});
 
 		it("Should render the lines correctly when array data supplied", () => {
 			const target = chart.internal.main.select(`.${CLASS.chartLine}.${CLASS.target}-data2`);
-			const commands = parseSvgPath(target.select(`.${CLASS.line}-data2`).attr("d"));
+			const commands = target.select(`.${CLASS.line}-data2`).attr("d").split("C");
+			const dataLen = chart.data.values("data2").length;
 
-			expect(commands.length).to.be.equal(6);
+			expect(commands.length).to.be.equal(dataLen);
 		});
 
 		it("should use cardinal interpolation by default", () => {
 			expect(chart.internal.config.spline_interpolation_type).to.be.equal("cardinal");
 		});
 
-		it("set options data.type='area-line-range chart'", () => {
-			args.data.type = "area-line-range chart";
+		it("should return correct min/max data", () => {
+			const minMax = chart.internal.getMinMaxValue();
+
+			expect(minMax.min).to.be.equal(min);
+			expect(minMax.max).to.be.equal(max);
 		});
 	});
 

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -813,6 +813,7 @@ export default class Options {
 
 			/**
 			 * Set a callback for minimum data
+			 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
 			 * @name data․onmin
 			 * @memberOf Options
 			 * @type {Function}
@@ -827,6 +828,7 @@ export default class Options {
 
 			/**
 			 * Set a callback for maximum data
+			 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
 			 * @name data․onmax
 			 * @memberOf Options
 			 * @type {Function}

diff --git a/src/data/data.js b/src/data/data.js
@@ -18,6 +18,7 @@ import {
 	isBoolean,
 	isDefined,
 	isFunction,
+	isObject,
 	isObjectType,
 	isString,
 	isUndefined,
@@ -199,20 +200,40 @@ extend(ChartInternal.prototype, {
 		return isDefined(x) ? x : null;
 	},
 
+	/**
+	 * Get base value isAreaRangeType
+	 * @param data
+	 * @return {*}
+	 * @private
+	 */
+	getBaseValue(data) {
+		const $$ = this;
+		let value = data.value;
+
+		// In case of area-range, data is given as: [low, mid, high] or {low, mid, high}
+		// will take the 'mid' as the base value
+		if ($$.isAreaRangeType(data)) {
+			value = isArray(value) ? value[1] : (isObject(value) ? value.mid : 0);
+		}
+
+		return value;
+	},
+
 	/**
 	 * Get min/max value from the data
 	 * @private
 	 * @param {Array} data array data to be evaluated
 	 * @return {{min: {Number}, max: {Number}}}
 	 */
 	getMinMaxValue(data) {
+		const getBaseValue = this.getBaseValue.bind(this);
 		let min;
 		let max;
 
 		(data || this.data.targets.map(t => t.values))
 			.forEach(v => {
-				min = d3Min([min, d3Min(v, t => t.value)]);
-				max = d3Max([max, d3Max(v, t => t.value)]);
+				min = d3Min([min, d3Min(v, getBaseValue)]);
+				max = d3Max([max, d3Max(v, getBaseValue)]);
 			});
 
 		return {min, max};
@@ -287,7 +308,7 @@ extend(ChartInternal.prototype, {
 	 * @private
 	 */
 	getFilteredDataByValue(data, value) {
-		return data.filter(t => t.value === value);
+		return data.filter(t => this.getBaseValue(t) === value);
 	},
 
 	/**