fix(core): Use a minimum size for all charts, and use resizeObserver rather than requestAnimationFra

Author: theiliad

Diff for: packages/core/package.json

@@ -27,6 +27,9 @@
   ],
   "author": "IBM",
   "license": "Apache-2.0",
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.0"
+  },
   "peerDependencies": {
     "d3": ">=4.11.0 <=5.7.0"
   },

Diff for: packages/core/src/base-axis-chart.ts

@@ -165,7 +165,10 @@ export class BaseAxisChart extends BaseChart {
 			width: (container.node().clientWidth - marginsToExclude) * ratio
 		};
 
-		return computedChartSize;
+		return {
+			height: Math.max(computedChartSize.height, Configuration.charts.axisCharts.minHeight),
+			width: Math.max(computedChartSize.width, Configuration.charts.axisCharts.minWidth)
+		};
 	}
 
 	resizeChart() {

Diff for: packages/core/src/base-chart.ts

@@ -8,10 +8,14 @@ import {
 import { scaleOrdinal } from "d3-scale";
 import { transition, Transition } from "d3-transition";
 
+// Internal Imports
 import * as Configuration from "./configuration";
 import { Tools } from "./tools";
 import PatternsService from "./services/patterns";
 
+// Misc
+import ResizeObserver from "resize-observer-polyfill";
+
 export class BaseChart {
 	static chartCount = 1;
 
@@ -210,8 +214,6 @@ export class BaseChart {
 
 	// TODO - Refactor
 	getChartSize(container = this.container) {
-		const noAxis = this.options.type === "pie" || this.options.type === "donut";
-
 		let ratio, marginForLegendTop;
 		if (container.node().clientWidth > Configuration.charts.widthBreak) {
 			ratio = Configuration.charts.magicRatio;
@@ -222,24 +224,20 @@ export class BaseChart {
 		}
 
 		// Store computed actual size, to be considered for change if chart does not support axis
-		const marginsToExclude = noAxis ? 0 : (Configuration.charts.margin.left + Configuration.charts.margin.right);
+		const marginsToExclude = 0;
 		const computedChartSize = {
 			height: container.node().clientHeight - marginForLegendTop,
 			width: (container.node().clientWidth - marginsToExclude) * ratio
 		};
 
 		// If chart is of type pie or donut, width and height should equal to the min of the width and height computed
-		if (noAxis) {
-			let maxSizePossible = Math.min(computedChartSize.height, computedChartSize.width);
-			maxSizePossible = Math.max(maxSizePossible, Configuration.pie.minWidth);
-
-			return {
-				height: maxSizePossible,
-				width: maxSizePossible
-			};
-		}
+		let maxSizePossible = Math.min(computedChartSize.height, computedChartSize.width);
+		maxSizePossible = Math.max(maxSizePossible, Configuration.charts.minWidth);
 
-		return computedChartSize;
+		return {
+			height: maxSizePossible,
+			width: maxSizePossible
+		};
 	}
 
 	/*
@@ -299,21 +297,23 @@ export class BaseChart {
 	resizeWhenContainerChange() {
 		let containerWidth = this.holder.clientWidth;
 		let containerHeight = this.holder.clientHeight;
-		const frame = () => {
-			if (Math.abs(containerWidth - this.holder.clientWidth) > 1
-				|| Math.abs(containerHeight - this.holder.clientHeight) > 1) {
-				containerWidth = this.holder.clientWidth;
-				containerHeight = this.holder.clientHeight;
 
-				selectAll(".legend-tooltip").style("display", "none");
+		const resizeObserver = new ResizeObserver((entries, observer) => {
+			for (const entry of entries) {
+				if (Math.abs(containerWidth - this.holder.clientWidth) > 1
+					|| Math.abs(containerHeight - this.holder.clientHeight) > 1) {
+					containerWidth = this.holder.clientWidth;
+					containerHeight = this.holder.clientHeight;
 
-				this.hideTooltip();
-				this.resizeChart();
-			}
+					selectAll(".legend-tooltip").style("display", "none");
 
-			requestAnimationFrame(frame);
-		};
-		requestAnimationFrame(frame);
+					this.hideTooltip();
+					this.resizeChart();
+				}
+			}
+		});
+		 
+		resizeObserver.observe(this.holder);
 	}
 
 	setClickableLegend() {

Diff for: packages/core/src/configuration.ts

@@ -88,10 +88,15 @@ export const charts = {
 		width: 20,
 		height: 20
 	},
+	minWidth: 150,
 	widthBreak: 600,
 	marginForLegendTop: 40,
 	magicRatio: 0.7,
-	magicMoreForY2Axis: 70
+	magicMoreForY2Axis: 70,
+	axisCharts: {
+		minWidth: 100,
+		minHeight: 200
+	}
 };
 
 export const scales = {
@@ -176,7 +181,6 @@ export const lines = {
 };
 
 export const pie = {
-	minWidth: 100,
 	maxWidth: 516.6,
 	mouseover: {
 		strokeWidth: 6,