From 6a12a6074d1e747e9bc58d025db2a8bea3b8b064 Mon Sep 17 00:00:00 2001
From: Natasha DeCoste <natasha.decoste@gmail.com>
Date: Tue, 6 Aug 2019 13:36:21 -0400
Subject: [PATCH] fix(core): fix for better backdrop resizing on axis grids

---
 packages/core/src/base-axis-chart.ts | 45 ++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
index 5a52204530..b8dcde64db 100644
--- a/packages/core/src/base-axis-chart.ts
+++ b/packages/core/src/base-axis-chart.ts
@@ -1,7 +1,7 @@
 // D3 Imports
 import { select } from "d3-selection";
 import { scaleBand, scaleLinear, ScaleBand, ScaleLinear } from "d3-scale";
-import { axisBottom, axisLeft, axisRight, AxisScale, AxisDomain } from "d3-axis";
+import { axisBottom, axisLeft, axisRight } from "d3-axis";
 import { min, max } from "d3-array";
 
 import { BaseChart } from "./base-chart";
@@ -10,6 +10,9 @@ import * as Configuration from "./configuration";
 import { ChartConfig, AxisChartOptions } from "./configuration";
 import { Tools } from "./tools";
 
+// Misc
+import ResizeObserver from "resize-observer-polyfill";
+
 export class BaseAxisChart extends BaseChart {
 	x: ScaleBand<any>;
 	y: ScaleLinear<any, any>;
@@ -75,6 +78,7 @@ export class BaseAxisChart extends BaseChart {
 		this.draw();
 
 		this.addDataPointEventListener();
+		this.gridResizeObserver();
 	}
 
 	update() {
@@ -177,6 +181,22 @@ export class BaseAxisChart extends BaseChart {
 		};
 	}
 
+	/**
+	 * Adds a resize observer to the x and y grid and resizes the backdrop on change
+	 */
+	gridResizeObserver() {
+		const gridWidth = this.holder.querySelector(".y.grid");
+		const gridHeight = this.holder.querySelector(".x.grid");
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			this.drawBackdrop();
+		});
+
+		// watch resizing of both grids
+		resizeObserver.observe(gridWidth);
+		resizeObserver.observe(gridHeight);
+	}
+
 	resizeChart() {
 		// Reposition the legend
 		this.positionLegend();
@@ -189,7 +209,6 @@ export class BaseAxisChart extends BaseChart {
 			this.repositionYAxisTitle();
 		}
 
-		this.drawBackdrop();
 		this.dispatchEvent("resize");
 	}
 
@@ -487,17 +506,17 @@ export class BaseAxisChart extends BaseChart {
 	 * Draws the background for the chart grid
 	 */
 	drawBackdrop() {
-		// Get height from the grid
-		const xGridHeight = this.innerWrap.select(".x.grid").node().getBBox().height;
-		const yGridBBox = this.innerWrap.select(".y.grid").node().getBBox();
-		const backdrop = Tools.appendOrSelect(this.innerWrap, "rect.chart-grid-backdrop");
-
-		backdrop
-			.attr("x", yGridBBox.x)
-			.attr("y", yGridBBox.y)
-			.attr("width", yGridBBox.width)
-			.attr("height", xGridHeight)
-			.lower();
+			// Get height from the grid
+			const xGridHeight = this.innerWrap.select(".x.grid").node().getBBox().height;
+			const yGridBBox = this.innerWrap.select(".y.grid").node().getBBox();
+			const backdrop = Tools.appendOrSelect(this.innerWrap, "rect.chart-grid-backdrop");
+
+			backdrop
+				.attr("x", yGridBBox.x)
+				.attr("y", yGridBBox.y)
+				.attr("width", yGridBBox.width)
+				.attr("height", xGridHeight)
+				.lower();
 	}
 
 	addOrUpdateThresholds(yGrid, animate?) {