diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 9c5fe76..628866f 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -6,7 +6,6 @@ name: Build
on:
push:
branches:
- - master
- dev
pull_request:
branches:
diff --git a/.github/workflows/publish-rc-to-npm.yaml b/.github/workflows/publish-rc-to-npm.yaml
new file mode 100644
index 0000000..06425d1
--- /dev/null
+++ b/.github/workflows/publish-rc-to-npm.yaml
@@ -0,0 +1,32 @@
+
+# Name is optional and if present must be used
+# in the url path for badges
+name: Publish RC to NPM
+
+# only run when a release has been "published"
+on:
+ release:
+ types: [prereleased]
+
+jobs:
+
+ # publish to npm on release
+ publish:
+ name: NPM Publish
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node-version: [12]
+
+ steps:
+ - uses: actions/checkout@v1
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v1
+ with:
+ node-version: ${{ matrix.node-version }}
+ registry-url: https://registry.npmjs.org/
+ - run: npm install
+ - run: npm run build
+ - run: npm run publish:tag
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
\ No newline at end of file
diff --git a/.github/workflows/publish-to-npm.yaml b/.github/workflows/publish-to-npm.yaml
index 14020b0..533d7cf 100644
--- a/.github/workflows/publish-to-npm.yaml
+++ b/.github/workflows/publish-to-npm.yaml
@@ -27,6 +27,6 @@ jobs:
registry-url: https://registry.npmjs.org/
- run: npm install
- run: npm run build
- - run: cd dist/zingchart-angular && npm publish --access public
+ - run: npm run publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
\ No newline at end of file
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 408950a..0dba2cf 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -6,7 +6,6 @@ name: Test
on:
push:
branches:
- - master
- dev
pull_request:
branches:
diff --git a/README.md b/README.md
index bdde2a7..5709b10 100644
--- a/README.md
+++ b/README.md
@@ -8,20 +8,26 @@
+## Quickstart Guide
+
Quickly add charts to your Angular application with our ZingChart component
-# 1. Install
-Install the zingchart-angular package via npm
+This guide assumes some basic working knowledge of Angular and its Object Oriented interface.
+
+## 1. Install
-$ npm install zingchart-angular
+Install the `zingchart-angular` package via npm
-# 2. Include the component in your project
+`npm install zingchart-angular`
-Include the module in your module declaration file.
+## 2. Include the `zingchartAngular` module in your project
+
+You can import the module in your module declaration file. This is typically `app.module.ts` for many hello world examples.
-`import { ZingchartAngularModule } from 'zingchart-angular';`
```
+import { ZingchartAngularModule } from 'zingchart-angular';
+
@NgModule({
imports: [
...
@@ -30,26 +36,106 @@ Include the module in your module declaration file.
})
```
-# 3. Define your chart configuration in your component.
+## 3. Define ZingChart in your component
+The `zingchart/es6` library is a direct dependency of the `ZingchartAngularModule` and you **do not** have to explicitly import the ZingChart library.
+
+### Default Use Case
+
+The simple use case is defining a config (`zingchart.graphset`) object in your `.component.ts` file:
+
+
```
-config:zingchart.graphset = {
- type: 'line',
- series: [{
- values: [3,6,4,6,4,6,4,6]
- }],
-};
+import { Component } from '@angular/core';
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ type: 'line',
+ series: [{
+ values: [3,6,4,6,4,6,4,6]
+ }],
+ };
+}
```
-# 4. Add your component to the markup.
+Then add the `zingchart-angular` tag in your `.component.html` file to tie it all together!
```
```
+### Import ZingChart Modules
+
+You must **EXPLICITLY IMPORT MODULE CHARTS**. There is **NO** default
+export objects so just import them.
+
+```js
+import { Component } from '@angular/core';
+// EXPLICITLY IMPORT MODULE from node_modules
+import "zingchart/modules-es6/zingchart-maps.min.js";
+import "zingchart/modules-es6/zingchart-maps-usa.min.js";
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ shapes: [
+ {
+ type: "zingchart.maps",
+ options: {
+ name: "usa",
+ ignore: ["AK", "HI"]
+ }
+ }
+ ]
+ };
+}
+```
+
+### `zingchart` Global Objects
+
+If you need access to the `window.zingchart` objects for licensing or development flags.
+
+```javascript
+import { Component } from '@angular/core';
+import zingchart from 'zingchart/es6';
+
+// zingchart object for performance flags
+zingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package
+zingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package
+
+// ZC object for license key
+zingchart.LICENSE = ['your_zingchart_license_key'];
+// for enterprise licensing
+zingchart.BUILDCODE = ['your_zingchart_license_buildcode'];
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ type: 'line',
+ series: [{
+ values: [3,6,4,6,4,6,4,6]
+ }],
+ };
+}
+```
+
## Parameters
### config [object]
+
The chart configuration (graphset)
```
@@ -69,7 +155,7 @@ The id for the DOM element for ZingChart to attach to. If no id is specified, th
### series [array] (optional)
-Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.
+Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varies by chart type used - **Refer to the [ZingChart documentation](https://zingchart.com/docs) for more details.**
```
series:zingchart.series = {
@@ -77,7 +163,6 @@ Accepts an array of series objects, and overrides a series if it was supplied in
}
config:zingchart.graphset = {
type: 'line',
- series: [this.series]
};
```
@@ -96,33 +181,58 @@ The render type of the chart. **The default is `svg`** but you can also pass the
The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes
## Events
-All zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:
+All [zingchart events](https://www.zingchart.com/docs/api/events) are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:
+
+`.component.html` file:
+
+```
+
```
-
+`.component.ts` file:
+
+```
export class AppComponent {
- ...
- onComplete(ev) {
- console.log('on complete!');
+ ...
+ nodeClick(event) {
+ console.log('zingchart node clicked!', event);
}
}
```
+For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/events
+
## Methods
-All zingchart methods are readily available on the component's instance to call. For example, to retrieve data from the chart,
+All [zingchart methods](https://www.zingchart.com/docs/api/methods) are readily available on the component's instance to call. For example, to retrieve data from the chart:
+
+`.component.html` file:
```
-
+
+
+```
- export class AppComponent {
- ...
+`.component.ts` file:
+```
- obtainData() {
- return this.chart.getdata();
+ export class AppComponent {
+ ...
+ getData() {
+ console.log('Fetching zingchart config object', this.chart.getdata());
}
-
}
+```
+
+For a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/methods
+
+## Working Example
+This repository contains a "Hello world" example to give you an easy way to see the component in action.
+
+To start the sample application:
+
+```
+npm run build && npm run start
```
diff --git a/package.json b/package.json
index 5c8685e..426d9a0 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,10 @@
"start": "ng serve",
"build": "ng build zingchart-angular",
"test": "ng test zingchart-angular",
+ "$0": "The publish command is just here as documentation and SHOULD NOT BE USED",
+ "publish": "cd dist/zingchart-angular && npm publish",
+ "publish:tag": "cd dist/zingchart-angular && npm publish --tag beta",
+ "publish:test": "cd dist/zingchart-angular && npm publish --dry-run",
"lint": "ng lint",
"e2e": "ng e2e"
},
diff --git a/projects/zingchart-angular/README.md b/projects/zingchart-angular/README.md
index 14e11e4..5709b10 100644
--- a/projects/zingchart-angular/README.md
+++ b/projects/zingchart-angular/README.md
@@ -1,19 +1,33 @@
-# zingchart-angular
+
+
+
+
+
+
+
+
+
+
+## Quickstart Guide
Quickly add charts to your Angular application with our ZingChart component
-# 1. Install
-Install the zingchart-angular package via npm
+This guide assumes some basic working knowledge of Angular and its Object Oriented interface.
+
+## 1. Install
+
+Install the `zingchart-angular` package via npm
-$ npm install zingchart-angular
+`npm install zingchart-angular`
-# 2. Include the component in your project
+## 2. Include the `zingchartAngular` module in your project
-Include the module in your module declaration file.
+You can import the module in your module declaration file. This is typically `app.module.ts` for many hello world examples.
-`import { ZingchartAngularModule } from 'zingchart-angular';`
```
+import { ZingchartAngularModule } from 'zingchart-angular';
+
@NgModule({
imports: [
...
@@ -22,26 +36,106 @@ Include the module in your module declaration file.
})
```
-# 3. Define your chart configuration in your component.
+## 3. Define ZingChart in your component
+
+The `zingchart/es6` library is a direct dependency of the `ZingchartAngularModule` and you **do not** have to explicitly import the ZingChart library.
+
+### Default Use Case
+
+The simple use case is defining a config (`zingchart.graphset`) object in your `.component.ts` file:
+
```
-config:zingchart.graphset = {
- type: 'line',
- series: [{
- values: [3,6,4,6,4,6,4,6]
- }],
-};
+import { Component } from '@angular/core';
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ type: 'line',
+ series: [{
+ values: [3,6,4,6,4,6,4,6]
+ }],
+ };
+}
```
-# 4. Add your component to the markup.
+Then add the `zingchart-angular` tag in your `.component.html` file to tie it all together!
```
```
+### Import ZingChart Modules
+
+You must **EXPLICITLY IMPORT MODULE CHARTS**. There is **NO** default
+export objects so just import them.
+
+```js
+import { Component } from '@angular/core';
+// EXPLICITLY IMPORT MODULE from node_modules
+import "zingchart/modules-es6/zingchart-maps.min.js";
+import "zingchart/modules-es6/zingchart-maps-usa.min.js";
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ shapes: [
+ {
+ type: "zingchart.maps",
+ options: {
+ name: "usa",
+ ignore: ["AK", "HI"]
+ }
+ }
+ ]
+ };
+}
+```
+
+### `zingchart` Global Objects
+
+If you need access to the `window.zingchart` objects for licensing or development flags.
+
+```javascript
+import { Component } from '@angular/core';
+import zingchart from 'zingchart/es6';
+
+// zingchart object for performance flags
+zingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package
+zingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package
+
+// ZC object for license key
+zingchart.LICENSE = ['your_zingchart_license_key'];
+// for enterprise licensing
+zingchart.BUILDCODE = ['your_zingchart_license_buildcode'];
+
+@Component({
+ templateUrl: '...',
+ styleUrls: ['...']
+})
+
+export class AppComponent {
+ config:zingchart.graphset = {
+ type: 'line',
+ series: [{
+ values: [3,6,4,6,4,6,4,6]
+ }],
+ };
+}
+```
+
## Parameters
### config [object]
+
The chart configuration (graphset)
```
@@ -61,7 +155,7 @@ The id for the DOM element for ZingChart to attach to. If no id is specified, th
### series [array] (optional)
-Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.
+Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varies by chart type used - **Refer to the [ZingChart documentation](https://zingchart.com/docs) for more details.**
```
series:zingchart.series = {
@@ -69,7 +163,6 @@ Accepts an array of series objects, and overrides a series if it was supplied in
}
config:zingchart.graphset = {
type: 'line',
- series: [this.series]
};
```
@@ -80,38 +173,66 @@ The width of the chart. Defaults to 100%
### height [string or number] (optional)
The height of the chart. Defaults to 480px.
+### output [string] (optional)
+
+The render type of the chart. **The default is `svg`** but you can also pass the string `canvas` to render the charts in canvas.
+
### theme [object] (optional)
The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes
## Events
-All zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:
+
+All [zingchart events](https://www.zingchart.com/docs/api/events) are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:
+
+`.component.html` file:
```
-
+
+```
+
+`.component.ts` file:
+```
export class AppComponent {
- ...
- onComplete(ev) {
- console.log('on complete!');
+ ...
+ nodeClick(event) {
+ console.log('zingchart node clicked!', event);
}
}
```
+For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/events
+
## Methods
-All zingchart methods are readily available on the component's instance to call. For example, to retrieve data from the chart,
+All [zingchart methods](https://www.zingchart.com/docs/api/methods) are readily available on the component's instance to call. For example, to retrieve data from the chart:
+
+`.component.html` file:
```
-
+
+
+```
- export class AppComponent {
- ...
+`.component.ts` file:
+```
- obtainData() {
- return this.chart.getdata();
+ export class AppComponent {
+ ...
+ getData() {
+ console.log('Fetching zingchart config object', this.chart.getdata());
}
-
}
-
```
+For a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/methods
+
+## Working Example
+
+This repository contains a "Hello world" example to give you an easy way to see the component in action.
+
+To start the sample application:
+
+```
+npm run build && npm run start
+```
diff --git a/projects/zingchart-angular/ng-package.json b/projects/zingchart-angular/ng-package.json
index eb93697..baa85a1 100644
--- a/projects/zingchart-angular/ng-package.json
+++ b/projects/zingchart-angular/ng-package.json
@@ -3,5 +3,10 @@
"dest": "../../dist/zingchart-angular",
"lib": {
"entryFile": "src/projects.ts"
- }
+ },
+ "whitelistedNonPeerDependencies": [
+ "zingchart",
+ "zingchart-constants"
+ ]
+
}
\ No newline at end of file
diff --git a/projects/zingchart-angular/package.json b/projects/zingchart-angular/package.json
index 6905b82..8b7d3cb 100644
--- a/projects/zingchart-angular/package.json
+++ b/projects/zingchart-angular/package.json
@@ -1,11 +1,24 @@
{
"name": "zingchart-angular",
- "version": "0.0.7",
+ "version": "0.0.9-beta.2",
+ "description": "ZingChart Angular Component wrapper to allow native Angular syntax for javascript charts, chart events, chart methods and chart styling.",
+ "author": "ZingSoft Inc.",
+ "license": "MIT",
+ "repository": "zingchart/zingchart-angular",
+ "keywords": [
+ "angular charts",
+ "zingchart",
+ "data visualization",
+ "charts",
+ "dataviz",
+ "angular"
+ ],
"peerDependencies": {
"@angular/common": "^8.2.14",
- "@angular/core": "^8.2.14",
- "zingchart": "^2.8.8"
+ "@angular/core": "^8.2.14"
},
"dependencies": {
+ "zingchart": "latest",
+ "zingchart-constants": "github:zingchart/zingchart-constants#master"
}
}
diff --git a/projects/zingchart-angular/src/lib/zingchart-angular.component.ts b/projects/zingchart-angular/src/lib/zingchart-angular.component.ts
index a5fe70d..b04ee2e 100644
--- a/projects/zingchart-angular/src/lib/zingchart-angular.component.ts
+++ b/projects/zingchart-angular/src/lib/zingchart-angular.component.ts
@@ -157,11 +157,13 @@ export class ZingchartAngularComponent implements AfterViewInit, OnDestroy, OnCh
}
this.chartWidth = this.width || DEFAULT_WIDTH;
this.chartHeight = this.height || DEFAULT_HEIGHT;
+ this.output = this.output || DEFAULT_OUTPUT;
this.renderObject = {
id: this.chartId,
data: data,
width: this.chartWidth,
height: this.chartHeight,
+ output: this.output,
}
if(this.theme) {
this.renderObject['defaults'] = this.theme;
@@ -190,8 +192,9 @@ export class ZingchartAngularComponent implements AfterViewInit, OnDestroy, OnCh
});
} else if(changes.series) {
this.config.series = changes.series.currentValue;
- zingchart.exec(this.chartId, 'setdata', {
- data: this.config,
+ zingchart.exec(this.chartId, 'setseriesdata', {
+ graphid: 0,
+ data: this.config.series,
});
} else if(changes.width || changes.height) {
const width = (changes.width && changes.width.currentValue) || this.width;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 77c0a2b..e179e1e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,15 @@