fix(core, react): fix react SSR & legend sizing issues

carbon-design-system · Sep 6, 2019 · abedba0 · abedba0
1 parent 13193e8
commit abedba0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 35 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,7 +2,7 @@
   "name": "@carbon/charts",
   "version": "0.16.1",
   "description": "Carbon charting components",
-  "main": "./index.umd.js",
+  "main": "./index.js",
   "scripts": {
     "demo:server": "webpack-dev-server --config webpack.config.js --watch",
     "demo:build": "webpack --config webpack.config.js && typedoc --out ./demo/bundle/documentation ./src/index.ts",

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -595,10 +595,7 @@ export class BaseChart {
 		if (this.isLegendOnRight()) {
 			this.container.selectAll(".expand-btn").remove();
 			this.container.select(".legend-wrapper").style("height", 0);
-			const containerWidth = this.container.node().clientWidth;
-			const legendWidth = containerWidth - svgWidth;
-			this.container.select(".legend").classed("right-legend", true)
-				.style("width", legendWidth + "px");
+			this.container.select(".legend").classed("right-legend", true);
 		} else {
 			this.container.select(".legend-wrapper").style("height", Configuration.legend.wrapperHeight);
 		}
@@ -618,6 +615,8 @@ export class BaseChart {
 			if (this.container.select(".expand-btn").nodes().length === 0) {
 				this.addTooltipOpenButtonToLegend();
 			}
+		} else {
+			this.container.selectAll(".legend-btn").style("display", null);
 		}
 	}
 
@@ -649,21 +648,13 @@ export class BaseChart {
 	}
 
 	hasLegendExpandBtn() {
-		return (
-			this.container.node().clientWidth < Configuration.charts.widthBreak ||
-				this.container.node().clientHeight < this.container.select("ul.legend").node().clientHeight
-
-			// && this.getLegendItems().length > Configuration.legend.countBreak
-		);
+		return this.container.node().clientWidth < Configuration.charts.widthBreak ||
+			this.container.node().clientHeight < this.container.select("ul.legend").node().clientHeight;
 	}
 
 	isLegendOnRight() {
-		return (
-			this.container.node().clientWidth > Configuration.charts.widthBreak &&
-				this.container.node().clientHeight > this.container.select("ul.legend").node().clientHeight
-
-			// && this.getLegendItems().length > Configuration.legend.countBreak
-		);
+		return this.container.node().clientWidth >= Configuration.charts.widthBreak &&
+			this.container.node().clientHeight >= this.container.select("ul.legend").node().clientHeight;
 	}
 
 	/**

diff --git a/packages/core/src/polyfills.ts b/packages/core/src/polyfills.ts
@@ -1,24 +1,26 @@
-(function() {
-	if (typeof window["CustomEvent"] === "function") { return false; }
+if (typeof window !== "undefined") {
+	(function() {
+		if (typeof window["CustomEvent"] === "function") { return false; }
 
-	function CustomEvent(event, params) {
-		params = params || { bubbles: false, cancelable: false, detail: undefined };
-		const evt = document.createEvent("CustomEvent");
-		evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-		return evt;
-	}
+		function CustomEvent(event, params) {
+			params = params || { bubbles: false, cancelable: false, detail: undefined };
+			const evt = document.createEvent("CustomEvent");
+			evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+			return evt;
+		}
+
+		CustomEvent.prototype = window["Event"].prototype;
+		window["CustomEvent"] = CustomEvent;
+	})();
 
-	CustomEvent.prototype = window["Event"].prototype;
-	window["CustomEvent"] = CustomEvent;
-})();
+	// Avoid multiple instances of babel-polyfill
+	function idempotentBabelPolyfill() {
+		if (!global["_babelPolyfill"] && (typeof window === "undefined" || !window["_babelPolyfill"])) {
+			return require("babel-polyfill");
+		}
 
-// Avoid multiple instances of babel-polyfill
-function idempotentBabelPolyfill() {
-	if (!global["_babelPolyfill"] && (typeof window === "undefined" || !window["_babelPolyfill"])) {
-		return require("babel-polyfill");
+		return null;
 	}
 
-	return null;
+	idempotentBabelPolyfill();
 }
-
-idempotentBabelPolyfill();
diff --git a/packages/core/src/styles/style.scss b/packages/core/src/styles/style.scss
@@ -195,6 +195,7 @@ div.chart-holder {
 	.legend-tooltip {
 		padding: 0;
 		border: none;
+		pointer-events: auto;
 
 		.legend-tooltip-header {
 			color: white;