Merge pull request #4 from zingchart/dev

Ci Updates

.github/workflows/build.yaml

@@ -6,7 +6,6 @@ name: Build
 on: 
   push:
     branches:
-      - master
       - dev
   pull_request:
     branches:

.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}}

.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}}

.github/workflows/test.yaml

@@ -6,7 +6,6 @@ name: Test
 on: 
   push:
     branches:
-      - master
       - dev
   pull_request:
     branches:

README.md

@@ -8,20 +8,26 @@
 ![](https://img.shields.io/david/dev/zingchart/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
 
-$ 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!
 
 ```
   <zingchart-angular [config]="config" [height]="500"></zingchart-angular>
 ```
 
+### 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,15 +155,14 @@ 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 = {
     values: [3,6,4,6,4,6,4,6]
   }
   config:zingchart.graphset = {
     type: 'line',
-    series: [this.series]
   };
     <zingchart-angular [config]="config" [height]="500" [series] = "[series]"></zingchart-angular>
 ```
@@ -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:
+
+```
+<zingchart-angular[config]="config" [height]="300" (node_click)="nodeClick($event)"></zingchart-angular>
 ```
-  <zingchart-angular[config]="config" [height]="300" (complete)="onComplete($event)"></zingchart-angular>
 
+`.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:
 
 ```
-  <zingchart-angular #chart1 [config]="config"></zingchart-angular>
+<zingchart-angular #chart1 [config]="config"></zingchart-angular></zingchart-angular>
+<button "chart1.getdata()">Fetch Data</button>
+```
 
-    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
 ```

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"
   },