fix(core angular): IE11 Support

IE11 Support
carbon-design-system · Aug 31, 2018 · b0dd2b5 · b0dd2b5
1 parent f984d0e
commit b0dd2b5
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -5,6 +5,14 @@
 	<h3 align="center">Carbon Charts</h3>
 	<p align="center">
 		A reusable framework-agnostic D3 charting library.
+		<br /><br />
+		<a href="https://travis-ci.org/IBM/carbon-charts/">
+			<img src="https://api.travis-ci.org/IBM/carbon-charts.svg?branch=master" />
+		</a>
+		<a href="https://www.npmjs.com/package/@carbon/charts">
+			<img src="https://img.shields.io/npm/v/@carbon/charts.svg" />
+		</a>
+		<img src="https://img.shields.io/badge/comp-IE11%2B-blue.svg" />
 	</p>
 	<p align="center">
 		:bar_chart: :chart_with_upwards_trend: :rocket:

diff --git a/packages/angular/src/charts.module.ts b/packages/angular/src/charts.module.ts
@@ -7,7 +7,9 @@ import { BarChartComponent } from "./bar-chart.component";
 import { LineChartComponent } from "./line-chart.component";
 
 @NgModule({
-	imports: [CommonModule],
+	imports: [
+		CommonModule
+	],
 	declarations: [
 		DonutChartComponent,
 		PieChartComponent,

diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,6 +29,7 @@
     "@types/d3": "4.11.0",
     "@types/jasmine": "2.8.7",
     "@types/node": "10.0.8",
+    "babel-polyfill": "^6.26.0",
     "css-loader": "0.28.7",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",

diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
@@ -95,7 +95,7 @@ export class BarChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the load event
-		this.events.dispatchEvent(new Event("load"));
+		this.dispatchEvent("load");
 	}
 
 	interpolateValues(newData: any) {
@@ -173,7 +173,7 @@ export class BarChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the update event
-		this.events.dispatchEvent(new Event("update"));
+		this.dispatchEvent("update");
 	}
 
 	updateElements(animate: boolean, rect?: any, g?: any) {

diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
@@ -153,7 +153,7 @@ export class BaseAxisChart extends BaseChart {
 			this.repositionXAxisTitle();
 		}
 
-		this.events.dispatchEvent(new Event("resize"));
+		this.dispatchEvent("resize");
 	}
 
 	/**************************************

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -56,7 +56,13 @@ export class BaseChart {
 			this.setData(configs.data);
 		}
 	}
+
+	dispatchEvent(eventType: string) {
+		const event = document.createEvent("Event");
+		event.initEvent(eventType, false, true); 
 
+		this.events.dispatchEvent(event);
+	}
 
 	setData(data: any) {
 		const { selectors } = Configuration;
@@ -65,7 +71,7 @@ export class BaseChart {
 		const newDataIsAPromise = Promise.resolve(data) === data;
 
 		// Dispatch the update event
-		this.events.dispatchEvent(new Event("data-change"));
+		this.dispatchEvent("data-change");
 
 		if (initialDraw || newDataIsAPromise) {
 			this.updateOverlay().show();
@@ -78,7 +84,7 @@ export class BaseChart {
 
 		Promise.resolve(data).then(value => {
 			// Dispatch the update event
-			this.events.dispatchEvent(new Event("data-load"));
+			this.dispatchEvent("data-load");
 
 			// Process data
 			// this.data = this.dataProcessor(Tools.clone(value));

diff --git a/packages/core/src/line-chart.ts b/packages/core/src/line-chart.ts
@@ -80,7 +80,7 @@ export class LineChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the load event
-		this.events.dispatchEvent(new Event("load"));
+		this.dispatchEvent("load");
 	}
 
 	interpolateValues(newData: any) {
@@ -136,7 +136,7 @@ export class LineChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the update event
-		this.events.dispatchEvent(new Event("update"));
+		this.dispatchEvent("update");
 	}
 
 	updateElements(animate: boolean, gLines?: any) {

diff --git a/packages/core/src/stacked-bar-chart.ts b/packages/core/src/stacked-bar-chart.ts
@@ -100,7 +100,7 @@ export class StackedBarChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the load event
-		this.events.dispatchEvent(new Event("load"));
+		this.dispatchEvent("load");
 	}
 
 	interpolateValues(newData: any) {
@@ -159,7 +159,7 @@ export class StackedBarChart extends BaseAxisChart {
 		this.updateOverlay().hide();
 
 		// Dispatch the update event
-		this.events.dispatchEvent(new Event("update"));
+		this.dispatchEvent("update");
 	}
 
 	resizeChart() {

diff --git a/packages/core/webpack.build.js b/packages/core/webpack.build.js
@@ -17,7 +17,10 @@ function rxjsExternal(context, request, cb) {
 module.exports = [{
 	devtool: "source-map",
 	entry: {
-		charts: "./src/index.ts"
+		charts: [
+			"babel-polyfill",
+			"./src/index.ts"
+		]
 	},
 	output: {
 		path: __dirname + '/dist/bundle',

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -2,7 +2,10 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
 	devtool: "sourcemap",
-	entry: "./demo/index.ts",
+	entry: [
+		"babel-polyfill",
+		"./demo/index.ts"
+	],
 	output: {
 		path: __dirname + '/demo/bundle',
 		filename: "bundle.js",