Merge branch 'master' of https://github.com/carbon-design-system/carb…

…on-charts into feat-axis-smallscale

.nvmrc

@@ -0,0 +1 @@
+11

.travis.yml

@@ -1,22 +1,22 @@
 dist: trusty
 language: node_js
 node_js:
-  - '8'
+  - '11'
 env:
   - MOZ_HEADLESS=1
 addons:
   chrome: stable
   firefox: latest
 if: (tag AND tag =~ ^v) OR (commit_message =~ ^Merge\spull\srequest\s#) OR (type = pull_request)
 before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.6.0
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1
   - export PATH="$HOME/.yarn/bin:$PATH"
   - .travis/before_install.sh
   - "google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &"
 install: yarn --offline
 script:
-  - lerna run lint
-  - lerna run test
+  - yarn run lint
+  - yarn run test
   - yarn run build-all
 sudo: false
 deploy:

.travis/before_install.sh

@@ -1,5 +1,3 @@
 #!/usr/bin/env bash
 
 set -e
-
-yarn global add lerna@3.13.4

CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12)
+
+
+### Bug Fixes
+
+* **charts-angular:** update build toolchain ([aa63925](https://github.com/IBM/carbon-charts/commit/aa63925))
+
+
+
+
+
+# [0.22.0](https://github.com/IBM/carbon-charts/compare/v0.21.0...v0.22.0) (2019-12-09)
+
+
+### Features
+
+* **core, angular, react, vue:** Update chart width & height through options ([f050c35](https://github.com/IBM/carbon-charts/commit/f050c35))
+
+
+
+
+
+# [0.21.0](https://github.com/IBM/carbon-charts/compare/v0.20.1...v0.21.0) (2019-12-09)
+
+
+### Features
+
+* **core, angular, react, vue:** allow customizations to pie labels & the donut center number ([#427](https://github.com/IBM/carbon-charts/issues/427)) ([0446045](https://github.com/IBM/carbon-charts/commit/0446045))
+
+
+
+
+
 ## [0.20.1](https://github.com/IBM/carbon-charts/compare/v0.20.0...v0.20.1) (2019-12-04)
 
 

README.md

@@ -17,71 +17,11 @@
 	</p>
 </p>
 
-## Table of contents
-
-- [Installation](#installation)
-- [Demo & Docs](#demo-and-documentation)
-- [Run Charts locally](#run-charts-locally)
-- [Component status](#component-status)
-- [Bugs and feature requests](#bugs-and-feature-requests)
-- [Contributing](#contributing)
-
-## Getting started
-
-### Installation
-
-Run:
-```bash
-yarn global add @storybook/cli
-
-yarn add @carbon/charts
-```
-
-Or if you use NPM:
-```bash
-npm i -g @storybook/cli
-
-npm install @carbon/charts --save
-```
-
-## Demo and documentation
-**Charts demos:**
-- [Vanilla JS](https://carbon-design-system.github.io/carbon-charts/)
-- [Angular](https://carbon-design-system.github.io/carbon-charts/angular)
-- [React](https://carbon-design-system.github.io/carbon-charts/react)
-- [Vue](https://carbon-design-system.github.io/carbon-charts/vue)
-
-**Docs:** <https://carbon-design-system.github.io/carbon-charts/documentation/>
-
-### Code Samples
-<p align="center">
-	<img src="assets/demo-stacked-bar.png" alt="Stacked Bar Chart" width="600" />
-</p>
-
-<p align="center">
-	<a href="https://codesandbox.io/s/149vrzo62l">
-		<img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Carbon Charts - Vanilla" />
-	</a>
-</p>
-
-- [Vanilla JS](https://codesandbox.io/s/149vrzo62l)
-- [Angular](https://codesandbox.io/s/k32kjy5qnr)
-- [React](https://codesandbox.io/s/pppmo3ollx)
-- [Vue](https://codesandbox.io/s/040w2rqrxp)
-
-### Run Charts locally
-1. Fork the project and clone your fork:
-
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone git@github.com:<your-username>/carbon-charts.git
-   # Navigate to the newly cloned directory
-   cd carbon-charts
-   ```
-
-2. Run `yarn` to install Node.js dependencies.
-3. Run `yarn run demo:server` to serve up the demo locally.
-4. Finally, open <http://localhost:9001/> in your browser. SPOILER ALERT: There's no "Hello, World!"
+## Packages
+- [Vanilla](./packages/core)
+- [Angular](./packages/angular)
+- [React](./packages/react)
+- [Vue](./packages/vue)
 
 ## Component status
 :white_check_mark: Stable :hourglass_flowing_sand: In progress

lerna.json

@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.20.1"
+	"version": "0.22.1"
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12)
+
+
+### Bug Fixes
+
+* **charts-angular:** update build toolchain ([aa63925](https://github.com/IBM/carbon-charts/commit/aa63925))
+
+
+
+
+
+# [0.22.0](https://github.com/IBM/carbon-charts/compare/v0.21.0...v0.22.0) (2019-12-09)
+
+
+### Features
+
+* **core, angular, react, vue:** Update chart width & height through options ([f050c35](https://github.com/IBM/carbon-charts/commit/f050c35))
+
+
+
+
+
+# [0.21.0](https://github.com/IBM/carbon-charts/compare/v0.20.1...v0.21.0) (2019-12-09)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.20.1](https://github.com/IBM/carbon-charts/compare/v0.20.0...v0.20.1) (2019-12-04)
 
 **Note:** Version bump only for package @carbon/charts-angular

packages/angular/README.md

@@ -4,20 +4,29 @@
 
 **[Storybook Demos](https://carbon-design-system.github.io/carbon-charts/angular)**
 
+**[Storybook Demo Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories)**
+
 ## Getting Started
 
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @carbon/charts-angular
+npm install -S @carbon/charts @carbon/charts-angular d3
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
 instead:
 
 ```bash
-yarn add @carbon/charts-angular
+yarn add @carbon/charts @carbon/charts-angular d3
 ```
 
-## Sample Project
-[Edit on Stackblitz](https://stackblitz.com/edit/carbon-charts-angular-vznxot)
+## Step-by-step Instructions
+[Read on carbondesignsystem.com](https://www.carbondesignsystem.com/data-visualization/getting-started/angular)
+
+## Charting Data & Options
+Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components, .
+
+For instance, in the case of pie and donut charts, you would only provide one data set. In the case of donut charts, you can pass in an additional field called `center` in your options configuring the donut center.
+
+There are also additional options available depending on the chart type being used, [for more examples please see here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data).

packages/angular/angular.json

@@ -0,0 +1,77 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"charts-angular": {
+			"root": "",
+			"sourceRoot": "src",
+			"projectType": "library",
+			"prefix": "sc",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-ng-packagr:build",
+					"options": {
+						"tsConfig": "./tsconfig.json",
+						"project": "./ng-package.json"
+					}
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"main": "src/test.ts",
+						"karmaConfig": "./karma.conf.js",
+						"tsConfig": "./tsconfig.spec.json"
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": [
+							"./tsconfig.json",
+							"./tsconfig.spec.json"
+						],
+						"exclude": [
+							"**/node_modules/**"
+						]
+					}
+				}
+			}
+		},
+		"charts-angular-e2e": {
+			"root": "e2e",
+			"sourceRoot": "e2e",
+			"projectType": "application",
+			"architect": {
+				"e2e": {
+					"builder": "@angular-devkit/build-angular:protractor",
+					"options": {
+						"protractorConfig": "./protractor.conf.js",
+						"devServerTarget": "charts-angular:serve"
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": [
+							"e2e/tsconfig.e2e.json"
+						],
+						"exclude": [
+							"**/node_modules/**/*"
+						]
+					}
+				}
+			}
+		}
+	},
+	"defaultProject": "charts-angular",
+	"schematics": {
+		"@schematics/angular:component": {
+			"prefix": "ibm",
+			"styleext": "css"
+		},
+		"@schematics/angular:directive": {
+			"prefix": "ibm"
+		}
+	}
+}

packages/angular/ng-package.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "./dist",
+	"lib": {
+		"entryFile": "src/index.ts"
+	},
+	"whitelistedNonPeerDependencies": [
+		"@carbon/charts"
+	]
+}

packages/angular/package.json

@@ -1,11 +1,10 @@
 {
-	"$schema": "../../node_modules/ng-packagr/package.schema.json",
 	"name": "@carbon/charts-angular",
-	"version": "0.20.1",
+	"version": "0.22.1",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
-		"build": "ng-packagr -p package.json",
+		"build": "ng build",
 		"storybook": "start-storybook -p 9005 -c .storybook -s ./.storybook/assets",
 		"demo:build": "build-storybook -o demo/bundle --quiet",
 		"clean": "rm -rf dist demo/bundle"
@@ -40,7 +39,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.20.1"
+		"@carbon/charts": "^0.22.1"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0",
@@ -50,9 +49,11 @@
 		"zone.js": "^0.8.29 || ^0.9.0"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "0.8.9",
-		"@angular-devkit/core": "0.8.9",
+		"@angular-devkit/build-angular": "0.13.0",
+		"@angular-devkit/build-ng-packagr": "0.13.0",
+		"@angular-devkit/core": "8.2.2",
 		"@angular/animations": "7.2.15",
+		"@angular/cli": "~7.3.9",
 		"@angular/common": "7.2.15",
 		"@angular/compiler": "7.2.15",
 		"@angular/compiler-cli": "7.2.15",
@@ -69,18 +70,12 @@
 		"d3": "4.11.0",
 		"ng-packagr": "5.7.1",
 		"rxjs": "6.3.3",
-		"tslint": "5.14.0",
+		"tsickle": "0.37.1",
+		"tslib": "1.10.0",
+		"tslint": "5.20.1",
 		"typescript": "3.2.2",
 		"zone.js": "0.8.29"
 	},
-	"ngPackage": {
-		"lib": {
-			"entryFile": "src/charts.module.ts"
-		},
-		"whitelistedNonPeerDependencies": [
-			"@carbon/charts"
-		]
-	},
 	"publishConfig": {
 		"access": "public"
 	},

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

@@ -14,18 +14,15 @@ import { GroupedBarChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-grouped-bar-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class GroupedBarChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new GroupedBarChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options