From 352166a25975756774f2265c35a49ca0a3311bfa Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Fri, 30 Nov 2018 13:56:48 -0500 Subject: [PATCH] fix(angular): Bundle angular wrapper components using angular package format --- packages/angular/index.js | 7 +-- packages/angular/package.json | 29 ++++++++--- packages/angular/src/bar-chart.component.ts | 9 +--- packages/angular/src/base-chart.component.ts | 50 ++++++++++++------- packages/angular/src/charts.module.ts | 2 + packages/angular/src/donut-chart.component.ts | 7 --- packages/angular/src/line-chart.component.ts | 7 --- packages/angular/src/pie-chart.component.ts | 7 --- scripts/build-packages-and-demos.sh | 7 ++- 9 files changed, 64 insertions(+), 61 deletions(-) diff --git a/packages/angular/index.js b/packages/angular/index.js index 7bbe30212a..cae3953d4b 100644 --- a/packages/angular/index.js +++ b/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"; \ No newline at end of file diff --git a/packages/angular/package.json b/packages/angular/package.json index a85f597933..3c990980cd 100644 --- a/packages/angular/package.json +++ b/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" }, diff --git a/packages/angular/src/bar-chart.component.ts b/packages/angular/src/bar-chart.component.ts index 45c5c3b790..e2b58f8418 100644 --- a/packages/angular/src/bar-chart.component.ts +++ b/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, { diff --git a/packages/angular/src/base-chart.component.ts b/packages/angular/src/base-chart.component.ts index 4ead35c80a..bf716c75dd 100644 --- a/packages/angular/src/base-chart.component.ts +++ b/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 { ` }) -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"); diff --git a/packages/angular/src/charts.module.ts b/packages/angular/src/charts.module.ts index d7ceaee356..36157c28a4 100644 --- a/packages/angular/src/charts.module.ts +++ b/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, diff --git a/packages/angular/src/donut-chart.component.ts b/packages/angular/src/donut-chart.component.ts index 187650c4a2..8e47f51abe 100644 --- a/packages/angular/src/donut-chart.component.ts +++ b/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( diff --git a/packages/angular/src/line-chart.component.ts b/packages/angular/src/line-chart.component.ts index be5ed85525..166e756c10 100644 --- a/packages/angular/src/line-chart.component.ts +++ b/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( diff --git a/packages/angular/src/pie-chart.component.ts b/packages/angular/src/pie-chart.component.ts index b335e92b10..9ab17c72ed 100644 --- a/packages/angular/src/pie-chart.component.ts +++ b/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( diff --git a/scripts/build-packages-and-demos.sh b/scripts/build-packages-and-demos.sh index c3fa33f2a5..7222c1ded2 100755 --- a/scripts/build-packages-and-demos.sh +++ b/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 ..