fix(core): Resize thresholds, and update threshold theme colors

packages/core/demo/index.scss

@@ -5,6 +5,8 @@ $default_transition: all .1s ease-out;
 }
 
 body {
+	margin: 0;
+	background-color: #fbfbfb;
 	font-family: "IBM Plex Sans", Arial, sans-serif;
 }
 
@@ -47,12 +49,6 @@ $due_blue: #0063ff;
 	outline: none;
 }
 
-html,
-body {
-	margin: 0;
-	background: #f4f7fa;
-}
-
 header.m-demo-header {
 	margin-bottom: 20px;
 	padding: 50px 0;
@@ -114,7 +110,8 @@ header.m-demo-header {
 	margin-top: 20px;
 }
 .chart-holder {
-	border: 1px solid rgba(24, 62, 117, 0.2);
+	background-color: #fff;
+	// border: 1px solid rgba(24, 62, 117, 0.2);
 	box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
 	margin: 0 auto 60px auto;
 	display: block;

packages/core/src/base-axis-chart.ts

@@ -413,8 +413,9 @@ export class BaseAxisChart extends BaseChart {
 				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
+
+			// TickValues seem to ignore the first element of the array
+			// This workaround is a temporary solution
 			thresholdTickValues.unshift(0);
 			yGrid.tickValues(thresholdTickValues);
 		}
@@ -428,14 +429,14 @@ export class BaseAxisChart extends BaseChart {
 		this.cleanGrid(g);
 
 		if (thresholds && thresholds.length > 0) {
-			this.fillTickThresholds(g);
+			this.addOrUpdateThresholds(g);
 		}
 	}
 
-	fillTickThresholds(yGrid) {
+	addOrUpdateThresholds(yGrid, animate?) {
 		const { thresholds } = this.options.scales.y;
 		const thresholdDimensions = [];
-		const width = yGrid.node().getBBox().width;
+		const width = this.getChartSize().width;
 
 		let prevBase = this.y(0);
 		let gThresholdContainer = (yGrid.select("g.threshold-container").nodes().length > 0)
@@ -468,8 +469,7 @@ export class BaseAxisChart extends BaseChart {
 
 		// update
 		gThresholdContainer
-			.transition()
-			.duration(500)
+			.transition(animate === false ? this.getInstantTransition() : this.getDefaultTransition())
 			.attr("height", d => d.height)
 			.attr("width", d => d.width)
 			.attr("y", d => d.y )
@@ -478,21 +478,18 @@ export class BaseAxisChart extends BaseChart {
 		// enter
 		gThresholdContainer
 			.enter()
-			.append("rect")
-			.attr("height", d => d.height)
-			.attr("width", d => d.width)
-			.attr("y", d => d.y )
-			.style("fill", d => Configuration.scales.y.thresholds.colors[d.theme])
-			.transition()
-			.duration(3000);
+				.append("rect")
+				.attr("height", d => d.height)
+				.attr("width", d => d.width)
+				.attr("y", d => d.y )
+				.style("fill", d => Configuration.scales.y.thresholds.colors[d.theme]);
 
 		// exit
 		gThresholdContainer
 			.exit()
-			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
-			.duration(300)
-			.remove();
+				.transition(this.getDefaultTransition())
+				.style("opacity", 0)
+				.remove();
 	}
 
 	updateXandYGrid(noAnimation?: boolean) {
@@ -543,13 +540,12 @@ export class BaseAxisChart extends BaseChart {
 			this.cleanGrid(g_yGrid);
 
 			if (thresholds && thresholds.length > 0) {
-				this.fillTickThresholds(g_yGrid);
+				this.addOrUpdateThresholds(g_yGrid, !noAnimation);
 			}
-
 		}, 0);
 	}
 
-	cleanGrid (g) {
+	cleanGrid(g) {
 		g.selectAll("line")
 			.attr("stroke", Configuration.grid.strokeColor);
 		g.selectAll("text").style("display", "none").remove();

packages/core/src/configuration.ts

@@ -121,9 +121,9 @@ export const scales = {
 		numberOfTicks: 5,
 		thresholds: {
 			colors: {
-				"danger": "#fdf4f4",
-				"success": "#f3f9f6",
-				"warning": "#fffbeb"
+				"danger": "rgba(230, 35, 37, 0.15)",
+				"success": "rgba(254, 213, 0, 0.15)",
+				"warning": "rgba(0, 136, 75, 0.15)"
 
 			}
 		}