fix(angular): Bundle angular wrapper components using angular package…

… format

packages/angular/index.js

@@ -1,8 +1,3 @@
 // export all modules from an entrypoint
 // To be used with ts-loader & angular loaders in projects
-export * from "./src/charts.module.ts";
-
-export { DonutChartComponent } from "./src/donut-chart.component";
-export { PieChartComponent } from "./src/pie-chart.component";
-export { BarChartComponent } from "./src/bar-chart.component";
-export { LineChartComponent } from "./src/line-chart.component";
+export * from "./dist/bundles/carbon-charts-angular.umd.min.js";

packages/angular/package.json

@@ -1,8 +1,18 @@
 {
+	"$schema": "./node_modules/ng-packagr/package.schema.json",
 	"name": "@carbon/charts-angular",
 	"version": "0.7.9",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
+	"files": [
+		"dist",
+		"index.js",
+		"CHANGELOG.md",
+		"README.md"
+	],
+	"scripts": {
+		"build": "ng-packagr -p package.json"
+	},
 	"repository": {
 		"type": "git",
 		"url": "git@github.com:IBM/carbon-charts.git"
@@ -18,14 +28,12 @@
 		"@angular/http": "^6.0.0",
 		"@angular/platform-browser": "^6.0.0",
 		"@angular/platform-browser-dynamic": "^6.0.0",
+		"@carbon/charts": "^0.7.9",
 		"@ngx-translate/core": "9.0.2",
 		"core-js": "2.5.3",
 		"rxjs": "5.5.5",
 		"zone.js": "0.8.18"
 	},
-	"dependencies": {
-		"@carbon/charts": "^0.7.9"
-	},
 	"devDependencies": {
 		"@angular/animations": "6.0.0",
 		"@angular/common": "6.0.0",
@@ -38,7 +46,8 @@
 		"@angular/platform-browser-dynamic": "6.0.0",
 		"@angular/platform-server": "6.0.0",
 		"@angular/router": "6.0.0",
-		"@compodoc/compodoc": "1.0.4",
+		"@carbon/charts": "0.7.9",
+		"@compodoc/compodoc": "1.1.7",
 		"@ngx-translate/core": "9.0.2",
 		"@types/d3": "4.12.0",
 		"@types/jasmine": "2.8.6",
@@ -51,14 +60,14 @@
 		"event-stream": "3.3.4",
 		"extract-text-webpack-plugin": "3.0.2",
 		"file-loader": "1.1.11",
-		"gulp": "3.9.1",
+		"gulp": "4.0.0",
 		"gulp-concat": "2.6.1",
 		"gulp-tap": "1.0.1",
 		"html-loader": "0.5.5",
 		"html-webpack-plugin": "3.2.0",
 		"husky": "0.14.3",
 		"jasmine-core": "3.1.0",
-		"karma": "2.0.2",
+		"karma": "3.1.1",
 		"karma-chrome-launcher": "2.2.0",
 		"karma-cli": "1.0.1",
 		"karma-firefox-launcher": "1.1.0",
@@ -68,6 +77,7 @@
 		"karma-sourcemap-loader": "0.3.7",
 		"karma-spec-reporter": "0.0.32",
 		"karma-webpack": "3.0.0",
+		"ng-packagr": "4.4.0",
 		"node-sass": "4.10.0",
 		"postcss-loader": "2.1.4",
 		"raw-loader": "0.5.1",
@@ -86,11 +96,16 @@
 		"wait-on": "2.1.0",
 		"webpack": "4.7.0",
 		"webpack-cli": "2.1.2",
-		"webpack-dev-server": "3.1.4",
+		"webpack-dev-server": "3.1.10",
 		"webpack-node-externals": "1.6.0",
 		"whatwg-fetch": "2.0.3",
 		"zone.js": "0.8.21"
 	},
+	"ngPackage": {
+		"lib": {
+			"entryFile": "src/charts.module.ts"
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},

packages/angular/src/bar-chart.component.ts

@@ -10,11 +10,6 @@ import { BarChart } from "@carbon/charts";
  * Wrapper around `BarChart` in carbon charts library
  *
  * Most functions just call their equivalent from the chart library.
- *
- * @export
- * @class BarChart
- * @extends {BaseChart}
- * @implements {AfterViewInit}
  */
 @Component({
 	selector: "n-bar-chart",
@@ -26,10 +21,10 @@ import { BarChart } from "@carbon/charts";
 export class BarChartComponent extends BaseChart implements AfterViewInit {
 	/**
 	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
-	 *
-	 * @memberof BarChart
 	 */
 	ngAfterViewInit() {
+		console.log(this.options);
+
 		this.chart = new BarChart(
 			this.chartRef.nativeElement,
 			{

packages/angular/src/base-chart.component.ts

@@ -1,18 +1,15 @@
 import {
 	Component,
 	Input,
-	AfterViewInit,
-	ViewChild
+	ViewChild,
+	OnInit,
+	AfterViewInit
 } from "@angular/core";
 
 /**
  * Wrapper around `BaseChart` in carbon charts library
  *
  * Most functions just call their equivalent from the chart library.
- *
- * @export
- * @class BaseChart
- * @implements {AfterViewInit}
  */
 @Component({
 	selector: "n-base-chart",
@@ -21,12 +18,9 @@ import {
 		</div>
 	`
 })
-export class BaseChart implements AfterViewInit {
+export class BaseChart implements AfterViewInit, OnInit {
 	/**
 	 * Data passed to charts library for displaying
-	 *
-	 * @type {*}
-	 * @memberof BaseChart
 	 */
 	@Input() set data(newData) {
 		// If data already exists, that means the chart has been initialized
@@ -45,15 +39,21 @@ export class BaseChart implements AfterViewInit {
 
 	/**
 	 * Options passed to charts library
-	 *
-	 * @type {*}
-	 * @memberof BaseChart
 	 */
 	@Input() options: any;
+
+	/**
+	 * Chart width
+	 */
+	@Input() width: any;
+
+	/**
+	 * Chart height
+	 */
+	@Input() height: any;
+
 	/**
 	 * Chart container element ref
-	 *
-	 * @memberof BaseChart
 	 */
 	@ViewChild("nChart") chartRef;
 
@@ -62,17 +62,29 @@ export class BaseChart implements AfterViewInit {
 	 *
 	 * You can use this to do whatever you would normally do with a chart if you used
 	 * charts library directly.
-	 *
-	 * @memberof BaseChart
 	 */
 	chart;
 
 	private _data: any;
 
+	ngOnInit() {
+		// Width prop is mandatory for the wrappers
+		if (this.width) {
+			this.options.width = this.width;
+		} else if (!this.options.width) {
+			console.error("Missing `width` prop!");
+		}
+
+		// Height prop is mandatory for the wrappers
+		if (this.height) {
+			this.options.height = this.height;
+		} else if (!this.options.height) {
+			console.error("Missing `height` prop!");
+		}
+	}
+
 	/**
 	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
-	 *
-	 * @memberof BaseChart
 	 */
 	ngAfterViewInit() {
 		console.log("You need to implement your own `ngAfterViewInit()` function");

packages/angular/src/charts.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
+import { BaseChart } from "./base-chart.component";
 import { DonutChartComponent } from "./donut-chart.component";
 import { PieChartComponent } from "./pie-chart.component";
 import { BarChartComponent } from "./bar-chart.component";
@@ -11,6 +12,7 @@ import { LineChartComponent } from "./line-chart.component";
 		CommonModule
 	],
 	declarations: [
+		BaseChart,
 		DonutChartComponent,
 		PieChartComponent,
 		BarChartComponent,

packages/angular/src/donut-chart.component.ts

@@ -11,11 +11,6 @@ import { DonutChart } from "@carbon/charts";
  * Wrapper around `DonutChart` in carbon charts library
  *
  * Most functions just call their equivalent from the chart library.
- *
- * @export
- * @class DonutChart
- * @extends {BaseChart}
- * @implements {AfterViewInit}
  */
 @Component({
 	selector: "n-donut-chart",
@@ -27,8 +22,6 @@ import { DonutChart } from "@carbon/charts";
 export class DonutChartComponent extends BaseChart implements AfterViewInit {
 	/**
 	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
-	 *
-	 * @memberof DonutChart
 	 */
 	ngAfterViewInit() {
 		this.chart = new DonutChart(

packages/angular/src/line-chart.component.ts

@@ -10,11 +10,6 @@ import { LineChart } from "@carbon/charts";
  * Wrapper around `LineChart` in carbon charts library
  *
  * Most functions just call their equivalent from the chart library.
- *
- * @export
- * @class LineChart
- * @extends {BaseChart}
- * @implements {AfterViewInit}
  */
 @Component({
 	selector: "n-line-chart",
@@ -26,8 +21,6 @@ import { LineChart } from "@carbon/charts";
 export class LineChartComponent extends BaseChart implements AfterViewInit {
 	/**
 	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
-	 *
-	 * @memberof LineChart
 	 */
 	ngAfterViewInit() {
 		this.chart = new LineChart(

packages/angular/src/pie-chart.component.ts

@@ -11,11 +11,6 @@ import { PieChart } from "@carbon/charts";
  * Wrapper around `PieChart` in carbon charts library
  *
  * Most functions just call their equivalent from the chart library.
- *
- * @export
- * @class PieChart
- * @extends {BaseChart}
- * @implements {AfterViewInit}
  */
 @Component({
 	selector: "n-pie-chart",
@@ -27,8 +22,6 @@ import { PieChart } from "@carbon/charts";
 export class PieChartComponent extends BaseChart implements AfterViewInit {
 	/**
 	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
-	 *
-	 * @memberof PieChart
 	 */
 	ngAfterViewInit() {
 		this.chart = new PieChart(

scripts/build-packages-and-demos.sh

@@ -12,7 +12,12 @@ typedoc --out ./demo/bundle/documentation ./src/index.ts
 cp -a demo/bundle/. ../../pages
 
 # Build Angular demos and copy to `pages` directory
-cd ../angular/demo
+cd ../angular
+npm run build
+# Automatically generated by ng-packagr, but not useful
+rm -rf dist/package.json
+
+cd demo
 npm run build-storybook
 cp -a storybook-dist/. ../../../pages/angular
 cd ..