Tweaks, demo site, readme..

Author: Alan Smith

.eslintignore

@@ -1,2 +1,4 @@
-dist
-node_modules
+node_modules
+public
+bin
+build

.gitignore

@@ -6,7 +6,7 @@ dist/vue3-highcharts.umd.js
 dist/vue3-highcharts.umd.js.map
 dist/vue3-highcharts.umd.min.js
 dist/vue3-highcharts.umd.min.js.map
-
+demo/node_modules
 
 # local env files
 .env.local

LICENCE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Alan Smith
+Copyright (c) 2020 - Present Alan Smith
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,3 +1,134 @@
 # Vue 3 - Highcharts JS
 
-A simple Vue 3 component for rendering Highcharts.js Charts.
+A simple, fast, Vue 3 component for rendering Highcharts.js Charts written using the composition API.
+
+## Minimum Requirements 
+
+[email protected]
+[email protected] ( older versions may work but not tested )
+
+Vue and Highcharts are not bundled with the module and need to be included in your projects dependencies.
+
+## Usage
+You can register the component in 2 ways. 
+
+### Register as a global component.
+```js
+import { createApp } from 'vue';
+import VueHighcharts from 'vue3-highcharts';
+
+const app = createApp(..options);
+app.use(VueHighcharts);
+```
+
+### Register as a local component
+```js
+import VueHighcharts from 'vue3-highcharts';
+
+export default {
+  name: 'MyChart',
+  components: {
+    VueHighcharts,
+  },
+};
+```
+
+### Props
+The following props can be passed to the component. Options is the only required one.
+
+| Name | Type | Required | Default | Notes |
+|---------|-------|------| ------- | ----- |
+| type | String | no | 'chart' | This should be the constructor type you'd use with highcharts. If you import the stock chat, you can pass 'stockChart' as this option for example.
+options | Object | yes | - |This should be a [Highcharts chart options](https://api.highcharts.com/highcharts/) object
+redrawOnUpdate | Boolean | no | true | If the chart should be redrawn when options update.
+oneToOneUpdate | Boolean | no | false| If the certain collections should be updated one to one. See [here](https://api.highcharts.com/class-reference/Highcharts.Chart#update).
+animateOnUpdate | Boolean | no | true | If the redraw should be animated.
+
+---
+
+### Events
+The following events are emitted from the component. No data is provided with any event.
+| Name | Notes |
+| ---- | ----- |
+| rendered | Emitted when the chart has been rendered on the dom |
+| updated  | Emitted when the chart options have been updated and the chart has been updated |
+| destroyed | Emitted when the Highcharts chart instance has been destroyed ( happens when the component unmounts )
+
+
+---
+---
+The Highcharts chart object is also exposed on the component instance as `chart`
+
+A wrapper div is also created with a `.vue-highcharts` class around the actual chart.
+
+### Simple Example
+
+```html
+<template>
+  <vue-highcharts
+    type="chart"
+    :options="chartOptions"
+    :redrawOnUpdate="true"
+    :oneToOneUpdate="false"
+    :animateOnUpdate="true"
+    @rendered="onRender"
+    @update="onUpdate"
+    @destroy="onDestroy"/>
+<template>
+```
+```js
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'chart'
+  setup() {
+    const data = ref([1, 2, 3])
+    const chartData = computed(() =>{
+      return {
+        series: [{
+          name: 'Test Series',
+          data: data.value,
+        }],
+      }
+    });
+
+    const onRender = () => {
+      console.log('Chart rendered');
+    };
+
+    const onUpdate = () => {
+      console.log('Chart updated');
+    };
+
+    const onDestroy = () => {
+      console.log('Chart destroyed');
+    };
+
+    return {
+      chartData,
+      onRender,
+      onUpdate,
+      onDestroy,
+    };
+  }
+}
+</script>
+```
+```css
+<style>
+.vue-highcharts {
+  width: 100%;
+}
+</style>
+```
+
+### Using Stock/Map charts
+To use the stock map charts, you need to import and register them. For example, to use the map chart
+
+```
+import HighCharts from 'highcharts';
+import useMapCharts from 'highcharts/modules/map';
+
+useMapCharts(HighCharts);
+```

demo/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

demo/.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

demo/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/airbnb',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'object-curly-newline': 0,
+  },
+};

demo/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

demo/LICENSE.MD

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 - Present Alan Smith
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

demo/README.md

@@ -0,0 +1 @@
+# vue-highcharts-demo