Merge remote-tracking branch 'upstream/master' into feature/heatmap-c…

…ustomize-month-names

.eslintrc.json

@@ -30,4 +30,4 @@
     "globals": {
         "ENV": true
     }
-}
+}

.github/ISSUE_TEMPLATE.md

@@ -5,6 +5,8 @@
 #### Steps to Reproduce:
 *
 
+
 NOTE: Add a GIF/Screenshot if required.
 
 Frappé Charts version:
+Codepen / Codesandbox:

.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: npm build
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}

.gitignore

@@ -60,4 +60,8 @@ typings/
 # next.js build output
 .next
 
+# npm build output
+dist
+docs/assets/
+
 .DS_Store

README.md

@@ -1,25 +1,25 @@
 <div align="center">
-    <img src="https://github.com/frappe/design/blob/master/logos/charts-logo.svg" height="128">
+    <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128">
     <a href="https://frappe.github.io/charts">
         <h2>Frappe Charts</h2>
     </a>
     <p align="center">
         <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
-        <a href="https://frappe.github.io/charts">
-            <b>Explore Demos »</b>
+        <a href="https://frappe.io/charts">
+            <b>Explore Demos » </b>
+        </a>
+        <a href="https://codesandbox.io/s/frappe-charts-demo-viqud">
+            <b> Edit at CodeSandbox »</b>
+        </a>
+        <a href="https://frappe.io/charts/docs">
+            <b>Documentation » </b>
         </a>
     </p>
 </div>
 
 <p align="center">
-    <a href="https://travis-ci.org/frappe/charts">
-        <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
-    </a>
-    <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
-        <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
-    </a>
-    <a href="https://travis-ci.org/frappe/charts">
-        <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
+    <a href="https://bundlephobia.com/result?p=frappe-charts">
+        <img src="https://img.shields.io/bundlephobia/minzip/frappe-charts">
     </a>
 </p>
 
@@ -32,28 +32,37 @@
 ### Contents
 * [Installation](#installation)
 * [Usage](#usage)
-* [Updates](#updates)
+* [Contribute](https://frappe.io/charts/docs/contributing)
 * [License](#license)
 
 #### Installation
-* Install via [`npm`](https://www.npmjs.com/get-npm):
 
-  ```console
-  $ npm install frappe-charts
-  ```
+##### Via NPM
+Install via [`npm`](https://www.npmjs.com/get-npm):
 
-  and include in your project:
-  ```js
-  import Chart from "frappe-charts"
-  ```
+```sh
+$ npm install frappe-charts
+```
 
-* ...or include within your HTML
+and include in your project:
+```js
+import { Chart } from "frappe-charts"
+```
 
-  ```html
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.iife.js"></script>
-    <!-- or -->
-    <script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.iife.js"></script>
-  ```
+Or include following for es-modules(eg:vuejs):
+```js
+import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
+// import css
+import 'frappe-charts/dist/frappe-charts.min.css'
+```
+
+##### or include within your HTML
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.umd.js"></script>
+<!-- or -->
+<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>
+```
 
 #### Usage
 ```js
@@ -63,17 +72,31 @@ const data = {
     ],
     datasets: [
         {
-            name: "Some Data", type: "bar",
+            name: "Some Data", chartType: "bar",
             values: [25, 40, 30, 35, 8, 52, 17, -4]
         },
         {
-            name: "Another Set", type: "line",
+            name: "Another Set", chartType: "line",
             values: [25, 50, -10, 15, 18, 32, 27, 14]
         }
     ]
 }
 
-const chart = new Chart("#chart", { // or a DOM element
+const chart = new frappe.Chart("#chart", {  // or a DOM element,
+                                            // new Chart() in case of ES6 module with above usage
+    title: "My Awesome Chart",
+    data: data,
+    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
+    height: 250,
+    colors: ['#7cd6fd', '#743ee2']
+})
+```
+
+Or for es-modules (replace `new frappe.Chart()` with `new Chart()`):
+```diff
+- const chart = new frappe.Chart("#chart", {
++ const chart = new Chart("#chart", {  // or a DOM element,
+                                    // new Chart() in case of ES6 module with above usage
     title: "My Awesome Chart",
     data: data,
     type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
@@ -82,51 +105,17 @@ const chart = new Chart("#chart", { // or a DOM element
 })
 ```
 
+
 If you want to contribute:
 
 1. Clone this repo.
 2. `cd` into project directory
 3. `npm install`
 4. `npm run dev`
 
-#### Updates
-
-##### v1.0.0
-- Major rewrite out. Some new features include:
-    - Mixed type axis datasets
-    - Stacked bar charts
-    - Value over data points
-    - Y Markers and regions
-    - Dot size, Bar space size, and other options
-    - Legend for axis charts
-- We would be looking to incorporate existing PRs and issues in the meantime.
-
-##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
-
-##### v0.0.7
-- [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset.
-- [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
-
-##### v0.0.5
-- More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
-- Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
-- Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
-
-##### v0.0.4
-- Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
-
-##### v0.0.2
-- We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
-- [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :)
-- A new logo.
-
-##### v0.0.1
-- The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
-
 #### License
 This repository has been released under the [MIT License](LICENSE)
 
 ------------------
 Project maintained by [Frappe](https://frappe.io).
 Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).
-