From 0535e73921929168818b5c6ff86bc9e6fe075723 Mon Sep 17 00:00:00 2001
From: JohnPeng47 <johnpeng47@gmail.com>
Date: Sat, 20 Oct 2018 12:19:32 -0400
Subject: [PATCH] refactor(core): changed threshold config format, refactored
 code

---
 packages/core/demo/demo-data/line.ts | 32 ++++++++++++++--------------
 packages/core/src/base-axis-chart.ts | 29 +++++++++++--------------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts
index 901db7f449..fd0d9874d8 100644
--- a/packages/core/demo/demo-data/line.ts
+++ b/packages/core/demo/demo-data/line.ts
@@ -107,23 +107,23 @@ export const lineOptions = {
 			title: "2018 Annual Sales Figures",
 		},
 		y: {
-			formatter: axisValue => `${axisValue / 1000}k`
+			formatter: axisValue => `${axisValue / 1000}k`,
+			thresholds: [
+				{
+					value : 10000,
+					theme: "success"
+				},
+				{
+					value : 40000,
+					theme: "danger"
+				},
+				{
+					value: 50000,
+					theme: "warning"
+				}
+			]
 		}
 	},
 	legendClickable: true,
-	containerResizable: true,
-	thresholds: [
-		{
-			value : 30000,
-			color: "success"
-		},
-		{
-			value : 40000,
-			color: "danger"
-		},
-		{
-			value: 50000,
-			color: "warning"
-		}
-	],
+	containerResizable: true
 };
diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
index 55cb9fd533..b2f16e7bd5 100644
--- a/packages/core/src/base-axis-chart.ts
+++ b/packages/core/src/base-axis-chart.ts
@@ -400,26 +400,22 @@ export class BaseAxisChart extends BaseChart {
 
 	drawYGrid() {
 		const { scales } = this.options;
-		const { thresholds } = this.options;
+		const { thresholds } = this.options.scales.y;
 		const yHeight = this.getChartSize().height - this.getBBox(".x.axis").height;
 
 		const yGrid = axisLeft(this.y)
 			.tickSizeInner(-this.getChartSize().width)
 			.tickSizeOuter(0);
 
-		if (thresholds) {
-			const thresValues = (typeof thresholds[0] === "object") ? (function() {
-				const retarr =  [];
-				thresholds.forEach( e => {
-					retarr.push(e.value);
-				});
-				return retarr;
-			}()) : thresholds;
-
+		if (thresholds && thresholds.length > 0) {
+			const thresholdTickValues = thresholds.map(e => {
+				if (e.value) return e.value;
+				console.error("Missing threshold value: ", e); 
+			});
 			// for some reason tickValues ignore the first element of the array
 			// passed to it so this workaround
-			thresValues.unshift(0);
-			yGrid.tickValues(thresValues);
+			thresholdTickValues.unshift(0);
+			yGrid.tickValues(thresholdTickValues);
 		}
 
 		yGrid.ticks(scales.y.numberOfTicks || Configuration.scales.y.numberOfTicks);
@@ -430,13 +426,13 @@ export class BaseAxisChart extends BaseChart {
 
 		this.cleanGrid(g);
 
-		if (this.options.thresholds) {
+		if (thresholds && thresholds.length > 0) {
 			this.fillTickThresholds(g);
 		}
 	}
 
 	fillTickThresholds(yGrid) {
-		const { thresholds } = this.options;
+		const { thresholds } = this.options.scales.y;
 
 		const width = yGrid.node().getBBox().width;
 		let prevBase = this.innerWrap.select(".y.axis line.domain").attr("y2");
@@ -447,14 +443,15 @@ export class BaseAxisChart extends BaseChart {
 					.replace(")", "")
 					.split(",")[1]
 				);
+				// draw rectangle between previous tick and the current tick
 				const height = prevBase - y;
-				const color = thresholds[i].color;
+				const theme = thresholds[i].theme;
 				// draw rectangles
 				yGrid.append("rect")
 					.attr("height", height)
 					.attr("width", width)
 					.attr("y", prevBase - height)
-					.style("fill", Configuration.scales.y.thresholds.colors[color]);
+					.style("fill", Configuration.scales.y.thresholds.colors[theme]);
 
 				prevBase = y;
 			});