├── .configs
    └── .mocharc.js
├── .github
    └── workflows
    │   ├── build.yaml
    │   ├── publish-to-npm.yaml
    │   └── test.yaml
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── dist
    ├── favicon.ico
    ├── zingchartVue3.cjs.min.js
    └── zingchartVue3.umd.min.js
├── index.html
├── package-lock.json
├── package.json
├── public
    └── favicon.ico
├── src
    ├── App.vue
    ├── ZingChart.vue
    ├── main.js
    └── views
    │   ├── Dynamic.vue
    │   ├── Events.vue
    │   ├── License.vue
    │   ├── Methods.vue
    │   ├── Modules.vue
    │   └── Simple.vue
├── test
    ├── build.spec.js
    └── utils.js
└── vite.config.js


/.configs/.mocharc.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Here's a JavaScript-based config file.
 4 | // If you need conditional logic, you might want to use this type of config.
 5 | // Otherwise, JSON or YAML is recommended.
 6 | 
 7 | module.exports = {
 8 |   diff: true,
 9 |   extension: ['spec'],
10 |   opts: false,
11 |   exit: true, // end bash script when done
12 |   slow: 75,
13 |   timeout: 5000,
14 |   ui: 'bdd',
15 |   spec: ['test/*.spec.js'],
16 |   color: true,
17 |   output: 'test/test.js'
18 | };


--------------------------------------------------------------------------------
/.github/workflows/build.yaml:
--------------------------------------------------------------------------------
 1 | # Name is optional and if present must be used
 2 | # in the url path for badges
 3 | name: Build
 4 | 
 5 | # Run on a dev branch
 6 | on:
 7 |   push:
 8 |     branches: 
 9 |       - '**'
10 |   pull_request:
11 |     branches:
12 |       - master
13 | 
14 | jobs:
15 |   Build:
16 |     name: Build
17 |     runs-on: ubuntu-latest
18 |     strategy:
19 |       matrix:
20 |         node-version: [16.20.0]
21 | 
22 |     steps:
23 |       - name: Checkout Repository
24 |         uses: actions/checkout@v3
25 |       - name: Use Node.js ${{ matrix.node-version }}
26 |         uses: actions/setup-node@v3
27 |         with:
28 |           node-version: ${{ matrix.node-version }}
29 |       # npm ci REQUIRES a package-lock.json file
30 |       - name: Install Fresh Dependencies
31 |         run: |
32 |           rm package-lock.json
33 |           npm install
34 |       - name: Build library
35 |         run: npm run build
36 |       - name: Log build output
37 |         run: |
38 |           ls -alt dist/
39 | 


--------------------------------------------------------------------------------
/.github/workflows/publish-to-npm.yaml:
--------------------------------------------------------------------------------
 1 | 
 2 | # Name is optional and if present must be used
 3 | # in the url path for badges
 4 | name: Publish to NPM
 5 | 
 6 | # only run when a release has been "published"
 7 | on:
 8 |   release:
 9 |     types: [published]
10 | 
11 | jobs:
12 | 
13 |   # publish to npm on release
14 |   publish:
15 |     name: NPM Publish
16 |     runs-on: ubuntu-latest
17 |     strategy:
18 |       matrix:
19 |         node-version: [16.20.0]
20 | 
21 |     steps:
22 |       - uses: actions/checkout@v3
23 |       - name: Use Node.js ${{ matrix.node-version }}
24 |         uses: actions/setup-node@v3
25 |         with:
26 |           node-version: ${{ matrix.node-version }}
27 |           registry-url: https://registry.npmjs.org/
28 |       - run: npm install
29 |       - run: npm run build
30 |       - run: npm publish --access public
31 |         env:
32 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}


--------------------------------------------------------------------------------
/.github/workflows/test.yaml:
--------------------------------------------------------------------------------
 1 | # Name is optional and if present must be used
 2 | # in the url path for badges
 3 | name: Test
 4 | 
 5 | # Run on a dev branch
 6 | on: 
 7 |   push:
 8 |     branches: 
 9 |       - '**'
10 |   pull_request:
11 |     branches:
12 |       - master
13 |       - dev
14 | 
15 | jobs:
16 |   Test:
17 |     name: Test
18 |     runs-on: ubuntu-latest
19 |     strategy:
20 |       matrix:
21 |         node-version: [16.20.0]
22 | 
23 |     steps:
24 |       - name: Checkout Repository
25 |         uses: actions/checkout@v3
26 |       - name: Use Node.js ${{ matrix.node-version }}
27 |         uses: actions/setup-node@v3
28 |         with:
29 |           node-version: ${{ matrix.node-version }}
30 |       # npm ci REQUIRES a package-lock.json file
31 |       - name: Install Fresh Dependencies
32 |         run: |
33 |           rm package-lock.json
34 |           npm install
35 |       - name: Build library
36 |         run: npm run build
37 |       - name: Run Unit Tests
38 |         run: npm run test
39 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | ._*
4 | bower_components/
5 | dist/demo.html
6 | CHANGELOG.md


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v10.13.0


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://img.shields.io/npm/v/zingchart-vue)
  2 | ![](https://img.shields.io/npm/l/zingchart-vue)
  3 | ![](https://img.shields.io/npm/dw/zingchart-vue)
  4 | 
  5 | 
  6 | ![](https://github.com/zingchart/zingchart-vue/workflows/Build/badge.svg?branch=master)
  7 | ![](https://github.com/zingchart/zingchart-vue/workflows/Test/badge.svg?branch=master)
  8 | 
  9 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 10 | 
 11 | ![](https://d2ddoduugvun08.cloudfront.net/items/2u3R031j3O3M2A3c3V0w/Screen%20Recording%202020-06-04%20at%2002.24%20PM.gif?X-CloudApp-Visitor-Id=3179966)
 12 | 
 13 | 
 14 | ## Quickstart guide
 15 | 
 16 | Quickly add charts to your Vue application with our ZingChart component.
 17 | 
 18 | This guide assumes some basic working knowledge of Vue.
 19 | 
 20 | ## 1. Install
 21 | 
 22 | 
 23 | Install the `zingchart` package via npm:
 24 | ```
 25 | npm install zingchart
 26 | ```
 27 | 
 28 | Install the `zingchart-vue` package via npm:
 29 | ```
 30 | npm install zingchart-vue
 31 | ```
 32 | 
 33 | ## 2. Include the `zingchart` package in your project
 34 | 
 35 | The `zingchart` package is a **DIRECT** dependency of `zingchart-vue` but you can also update this package outside of this component. Meaning the wrapper is no longer tied to a ZingChart library version, but just the component itself.
 36 | 
 37 | You can import the library like so:
 38 | 
 39 | ```javascript
 40 | // import the es6 version
 41 | import 'zingchart/es6';
 42 | ```
 43 | 
 44 | ## 3. Include the component in your project 
 45 | 
 46 | You can either include the `zingchart-vue` component to your project globally or locally per component. **Import the component AFTER ZingChart since it is a DIRECT dependency.**
 47 | 
 48 | ```js
 49 | // import the es6 version
 50 | import 'zingchart/es6';
 51 | // import the component AFTER ZingChart since it is a DIRECT dependency
 52 | import ZingChartVue from 'zingchart-vue';
 53 | ```
 54 | 
 55 | ### Globally
 56 | 
 57 | In your main app file, add the following lines of code:
 58 | 
 59 | ```js
 60 | import { createApp } from 'vue';
 61 | import App from './App.vue';
 62 | import ZingChartVue from './ZingChart.vue';
 63 | 
 64 | const app = createApp(App);
 65 | app.component('ZingChartVue', ZingChartVue);
 66 | app.mount('#app');
 67 | ```
 68 | 
 69 | This will register the zingchart component globally throughout your application. While the easiest installation option, this will load ZingChart immediately on your user's first load of the application - regardless if a chart is on the first page or not. We recommend this approach if ZingChart is used heavily across multiple pages.
 70 | 
 71 | 
 72 | 
 73 | ### Globally and locally
 74 | 
 75 | You can also register the `ZingChartVue` component globally and then import just `zingchart/es6` locally per each component that uses charts. 
 76 | 
 77 | ```js
 78 | import { createApp } from 'vue';
 79 | import App from './App.vue';
 80 | import ZingChartVue from './ZingChart.vue';
 81 | 
 82 | const app = createApp(App);
 83 | // install globally to app
 84 | app.component('ZingChartVue', ZingChartVue);
 85 | app.mount('#app');
 86 | ```
 87 | 
 88 | Then inside the component you import the `zingchart/zingchart-es6` library.
 89 | 
 90 | ```js
 91 | import 'zingchart/es6';
 92 | ```
 93 | 
 94 | ### Locally per component
 95 | 
 96 | In each component where ZingChart is being used, include the following in your component's configuration:
 97 | 
 98 | ```js
 99 | import 'zingchart/es6';
100 | import ZingChartVue from 'zingchart-vue';
101 | ```
102 | 
103 | **Note:** We recommend this approach if ZingChart is only included in a few, un-related pages across your application. 
104 | 
105 | ## ZingChart Modules
106 | 
107 | ZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.
108 | 
109 | For example, adding a depth chart to your vue component will require an additional import. Note, you must import from the `modules-es6` directory in the zingchart package.
110 | 
111 | ```js
112 | // explicitly import the module
113 | import 'zingchart/modules-es6/zingchart-depth.min.js';
114 | 
115 | ```
116 | 
117 | Here is a full .vue example for loading a map:
118 | 
119 | ```
120 | <script setup>
121 |     // import library
122 |     import 'zingchart/es6';
123 |     import ZingChartVue from 'zingchart-vue';
124 | 
125 |     // import chart modules used on that page
126 |     import 'zingchart/modules-es6/zingchart-maps.min.js';
127 |     import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
128 | </script>
129 | 
130 | <template>
131 |     <ZingChartVue
132 |         ref="myChart"
133 |         :data="{
134 |             shapes: [
135 |             {
136 |                 type: 'zingchart.maps',
137 |                 options: {
138 |                     name: 'usa',
139 |                     ignore: ['AK','HI']
140 |                 }
141 |             }
142 |         ]
143 |     }" />
144 | </template>
145 | ```
146 | 
147 | 
148 | ### `zingchart` Global Objects
149 | 
150 | If you need access to the `zingchart` objects for licensing or development flags.
151 | 
152 | ```javascript
153 | import ZingChartVue from 'zingchart-vue';
154 | 
155 | // zingchart object for performance flags
156 | zingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package
157 | zingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package 
158 | 
159 | // ZC object for license key
160 | zingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];
161 | ```
162 | 
163 | 
164 | ## Usage
165 | 
166 | The `zingchart-vue` component can be included into template as an element. Below is a simple example of a line chart:
167 | 
168 | ```html
169 | <ZingChartVue :data="chartData" />
170 | ```
171 | 
172 | ```js
173 | <script setup>
174 |     import ZingChartVue from 'zingchart-vue';
175 |     
176 |     const chartData = {
177 |         type: "line",
178 |             series: [
179 |             {
180 |                 values: [6,4,3,4,6,6,4]
181 |             }
182 |         ]
183 |     };
184 | </script>
185 | ```
186 | 
187 | ## Parameters
188 | 
189 | The properties, or parameters, you can pass to the `<ZingChartVue>` tag itself.
190 | 
191 | ### `data` [object]
192 | 
193 | The configuration object to pass to the chart. This can be a `graphset` object (multi-chart shared configuration) or a standard single chart configuration.
194 | 
195 | ```html
196 | <ZingChartVue :data="myData" :series="mySeries" />
197 | ```
198 | 
199 | ```js
200 | <script setup>
201 |     import ZingChartVue from '../ZingChart.vue';
202 | 
203 |     const myData = {
204 |         type: 'line',
205 |         title: {
206 |             text: 'Hello World',
207 |         },
208 |     };
209 |     
210 |     const mySeries = [
211 |         { values: [1,2,4,5,6] }
212 |     ];
213 | }
214 | </script>
215 | ```
216 | 
217 | ### `series` [array] (optional)
218 | 
219 | 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.
220 | 
221 | ### `id` [string] (optional)
222 | 
223 | The id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-auto-#.
224 | 
225 | ### `output` [string] (optional)
226 | 
227 | The render type of the chart. **The default is `svg`** but you can also pass the string `canvas` to render the charts in canvas. 
228 | 
229 | ### `width` [string or number] (optional)
230 | 
231 | The width of the chart. Defaults to 100%.
232 | 
233 | ### `height` [string or number] (optional)
234 | 
235 | The height of the chart. Defaults to 480px.
236 | 
237 | ### `theme` [object] (optional)
238 | 
239 | The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes
240 | 
241 | ### `modules` [string or array] (optional)
242 | An option to add the name of modules being loaded, into ZingChart's render object. Necessary for certain modules including the 'scalableYAxis'.
243 | 
244 | ### `forceRender` [string] (optional)
245 | The addition of this property will force ZingChart to re-render on all configuration changes. This isn't optimally performant, but some ZingChart features will require a full re-render of the chart, rather than an internal data update change. Only use this option when necessary.
246 | 
247 | 
248 | ## Events
249 | 
250 | 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:
251 | 
252 | ```html
253 |     <ZingChartVue :data="myData" @complete="chartCompleted" />
254 | ```
255 | 
256 | ```js
257 | function chartCompleted(result) {
258 |     console.log(`The chart ${result.id} finished rendering`);
259 | }
260 | ```
261 | 
262 | For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/api/events.
263 | 
264 | Note that the event names are translated to camel-case:
265 | - complete => @complete
266 | - node_mouseover => @nodeMouseover
267 | - legend_marker_click => @legendMarkerClick
268 | 
269 | 
270 | ### Methods
271 | 
272 | All zingchart methods are readily available on the component's instance to call. For example, to add a new plot node to the chart:
273 | 
274 | ```html
275 |     <ZingChartVue ref="chart" :data="myData" />
276 | ```
277 | 
278 | ```js
279 | const chart = ref();
280 | 
281 | function myCustomAddNode() {
282 |     chart.value.addnode({
283 |         value: 55,
284 |     });
285 | }
286 | 
287 | function myCustomMapZoom() {
288 |     // Example of usage when method name contains member (.) operator
289 |     chart.value['zingchart.maps.viewAll']({
290 |         value: 55,
291 |     });
292 | }
293 | ```
294 | 
295 | 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/api/methods
296 | 
297 | 
298 | ## Working Example
299 | 
300 | This repository contains a sample Vue application to give you an easy way to see the component in action
301 | 
302 | ```
303 | npm run dev 
304 | ```
305 | 


--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/zingchart-vue/c7c2b0e32cfa0bed8ba64e65652bc70ef29e6e82/dist/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
 7 |     <title>ZingChart 2 Vue 3 Wrapper Demo</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zingchart-vue",
 3 |   "version": "3.0.1",
 4 |   "description": "ZingChart Vue Component wrapper to allow native vue syntax for javascript charts, chart events, chart methods and chart styling.",
 5 |   "author": "ZingSoft Inc",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "commit": "git-cz",
11 |     "test": "mocha --config=./.configs/.mocharc.js",
12 |     "release-notes": "conventional-changelog -p angular -o CHANGELOG.md",
13 |     "release-notes-all": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
14 |   },
15 |   "main": "dist/zingchartVue3.cjs.min.js",
16 |   "engines": {
17 |     "node": ">=16",
18 |     "npm": ">=8"
19 |   },
20 |   "keywords": [
21 |     "vue charts",
22 |     "zingchart",
23 |     "charts",
24 |     "vue chart",
25 |     "vue"
26 |   ],
27 |   "dependencies": {
28 |     "vue": "3.3.2",
29 |     "zingchart": "latest",
30 |     "zingchart-constants": "github:zingchart/zingchart-constants#master"
31 |   },
32 |   "devDependencies": {
33 |     "@vitejs/plugin-vue": "^4.2.3",
34 |     "@vue/cli-service": "^3.12.1",
35 |     "chai": "^4.2.0",
36 |     "chai-fs": "^2.0.0",
37 |     "commitizen": "^4.1.2",
38 |     "cz-conventional-changelog": "^3.2.0",
39 |     "mocha": "^7.2.0",
40 |     "prettier": "^1.19.1",
41 |     "vite": "^4.3.5"
42 |   },
43 |   "files": [
44 |     "dist"
45 |   ],
46 |   "license": "MIT",
47 |   "config": {
48 |     "commitizen": {
49 |       "path": "./node_modules/cz-conventional-changelog"
50 |     }
51 |   },
52 |   "eslintConfig": {
53 |     "rules": {
54 |       "no-console": "off"
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/zingchart-vue/c7c2b0e32cfa0bed8ba64e65652bc70ef29e6e82/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 |   import {ref} from 'vue';
 3 | 
 4 |   import MethodsView from './views/Methods.vue';
 5 |   import EventsView from './views/Events.vue';
 6 |   import DynamicView from './views/Dynamic.vue';
 7 |   import SimpleView from './views/Simple.vue';
 8 |   import LicenseView from './views/License.vue';
 9 |   import ModulesView from './views/Modules.vue';
10 | 
11 |   let activeDemo = ref('simple');
12 | </script>
13 | 
14 | <template>
15 |   <div>
16 |     <h1>zingchart-vue playground</h1>
17 |     <p>A simple example of binding data, mutations with methods, and listening to events</p>
18 |     <header>
19 |       <a href="#" class="button" @click="activeDemo = 'simple'">Simple</a>
20 |       <a href="#" class="button" @click="activeDemo = 'dynamic'">Dynamic Config</a>
21 |       <a href="#" class="button" @click="activeDemo = 'methods'">Methods</a>
22 |       <a href="#" class="button" @click="activeDemo = 'events'">Events</a>
23 |       <a href="#" class="button" @click="activeDemo = 'license'">License</a>
24 |       <a href="#" class="button" @click="activeDemo = 'modules'">Modules</a>
25 |     </header>
26 |     <SimpleView v-show="activeDemo === 'simple'" />
27 |     <DynamicView v-show="activeDemo === 'dynamic'" />
28 |     <MethodsView v-show="activeDemo === 'methods'" />
29 |     <EventsView v-show="activeDemo === 'events'" />
30 |     <LicenseView v-show="activeDemo === 'license'" />
31 |     <ModulesView v-show="activeDemo === 'modules'" />
32 |   </div>
33 | </template>


--------------------------------------------------------------------------------
/src/ZingChart.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 |   import { computed, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';
  3 |   // import constants that define methods, events and default rendering parameters
  4 |   import constants from 'zingchart-constants';
  5 |   import zingchart from 'zingchart';
  6 | 
  7 |   // One time setup globally to handle all zingchart-vue objects in the app space.
  8 |   if (!window.ZCVUE) {
  9 |     window.ZCVUE = {
 10 |       instances: {},
 11 |       count: 0
 12 |     };
 13 |   }
 14 | 
 15 |   // PROPS
 16 |   const props = defineProps({
 17 |     data: {
 18 |       type: Object,
 19 |       required: true,
 20 |     },
 21 |     forceRender: {
 22 |       type: String,
 23 |     },
 24 |     height: {
 25 |       type: [String, Number],
 26 |       default: constants.DEFAULT_HEIGHT,
 27 |     },
 28 |     id: {
 29 |       type: [String],
 30 |       required: false,
 31 |     },
 32 |     modules: {
 33 |       type: [String, Array],
 34 |       required: false
 35 |     },
 36 |     output: {
 37 |       type: String,
 38 |       default: constants.DEFAULT_OUTPUT,
 39 |     },
 40 |     series: {
 41 |       type: Array,
 42 |       required: false,
 43 |     },
 44 |     theme: {
 45 |       type: Object,
 46 |       required: false,
 47 |     },
 48 |     width: {
 49 |       type: [String, Number],
 50 |       default: constants.DEFAULT_WIDTH,
 51 |     }
 52 |   });
 53 | 
 54 |   // DATA
 55 |   const chart = ref();
 56 |   let chartId = null;
 57 |   let forceRenderOnChange = null;
 58 |   let renderObject = null;
 59 | 
 60 |   // Set the id for zingchart to render to
 61 |   if (props.id) {
 62 |     chartId = props.id;
 63 |   } else {
 64 |     chartId = 'zingchart-vue-' + window.ZCVUE.count++;
 65 |   }
 66 | 
 67 |   // COMPUTED
 68 |   const chartData = computed(() => {
 69 |     const data = props.data;
 70 |     if (props.series) {
 71 |       data['series'] = props.series;
 72 |     }
 73 |     return data;
 74 |   });
 75 |   // WATCHERS
 76 |   watch(() => props.data, () => {
 77 |     if (forceRenderOnChange) {
 78 |       renderObject.data = chartData.value;
 79 |       zingchart.render(renderObject);
 80 |     } else {
 81 |       zingchart.exec(chartId, 'setdata', {
 82 |         data: chartData.value,
 83 |       });
 84 |     }
 85 |   });
 86 |   watch(() => props.height, () => {
 87 |     resize();
 88 |   });
 89 |   watch(() => props.series, () => {
 90 |     zingchart.exec(chartId, 'setseriesdata', {
 91 |       data: chartData.series,
 92 |     });
 93 |   });
 94 |   watch(() => props.width, () => {
 95 |     resize();
 96 |   });
 97 | 
 98 |   // METHODS
 99 |   function render() {
100 |     forceRenderOnChange = typeof props.forceRender !== 'undefined';
101 |     chart.value.style.width = props.width;
102 |     chart.value.style.height = props.height;
103 | 
104 |     chart.value.setAttribute('id', chartId);
105 | 
106 |     renderObject = {
107 |       id: chartId,
108 |       data: chartData.value,
109 |       height: props.height,
110 |       width: props.width,
111 |       output: props.output,
112 |     };
113 |     if (props.modules) {
114 |       renderObject.modules = typeof props.modules === 'string' ? props.modules : props.modules.toString();
115 |     }
116 | 
117 |     if (props.theme) {
118 |       renderObject.defaults = props.theme;
119 |     }
120 | 
121 |     // Render the chart
122 |     zingchart.render(renderObject);
123 |   }
124 | 
125 |   function resize() {
126 |     chart.value.style.width = props.width;
127 |     chart.value.style.height = props.height;
128 |     zingchart.exec(chartId, 'resize', {
129 |       height: props.height,
130 |       width: props.width,
131 |     });
132 |   }
133 | 
134 |   // LIFECYCLE HOOKS
135 |   onMounted(() => {
136 |     render();
137 |   });
138 |   onUnmounted(() => {
139 |     delete window.ZCVUE.instances[chartId];
140 |     zingchart.exec(chartId, 'destroy');
141 |   });
142 | 
143 |   // EXPOSE
144 |   const toExpose = {};
145 |   // Apply all of ZingChart's methods directly to the Vue instance
146 |   constants.METHOD_NAMES.forEach(name => {
147 |     if (name.includes('zingchart.')) {
148 |       // Remove `zingchart.` from name
149 |       let members = name.split('.');
150 |       // Methods executed directly on zingchart object
151 |       if (members.length === 2) {
152 |         toExpose[`${members[1]}`] = () => {
153 |           return zingchart[members[1]]();
154 |         };
155 |       } else {
156 |         toExpose[`${members[1]}.${members[2]}`] = args => {
157 |           if (members[1] === 'maps') {
158 |             // Does not require chart id
159 |             return zingchart[members[1]][members[2]](args);
160 |           } else {
161 |             // Requires chart id in first arg
162 |             return zingchart[members[1]][members[2]](chartId, args);
163 |           }
164 |         };
165 |       }
166 |     } else {
167 |       toExpose[name] = args => {
168 |         // Methods executed through `zingchart.exec()`
169 |         return zingchart.exec(chartId, name, args);
170 |       };
171 |     }
172 |   });
173 |   // Pipe zingchart specific event listeners
174 |   const attrs = useAttrs();
175 |   Object.keys(attrs).forEach(attr => {
176 |     let eventName = attr.slice(2).replace(/(?:^|\.?)([A-Z])/g, function (x,y){return '_' + y.toLowerCase()}).replace(/^_/, '');
177 |     if (constants.EVENT_NAMES.includes(eventName)) {
178 |       // Filter through the provided events list, then register it to zingchart.
179 |       zingchart.bind(chartId, eventName, result => {
180 |         attrs[attr](result);
181 |       });
182 |     }
183 |   });
184 |   defineExpose(toExpose);
185 | </script>
186 | 
187 | <template>
188 |   <div ref='chart' :data="chartData"></div>
189 | </template>
190 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | 
4 | createApp(App).mount('#app');


--------------------------------------------------------------------------------
/src/views/Dynamic.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 |   import { onMounted, ref } from 'vue';
 3 |   import ZingChartVue from '../ZingChart.vue';
 4 | 
 5 |   // Random numbers from 0-100
 6 |   function randomData(count) {
 7 |     return Array.from(new Array(count)).map(() => {
 8 |       return Math.floor(Math.random() * 10);
 9 |     });
10 |   }
11 | 
12 |   function randomColor() {
13 |     const PLOT_COLORS = ['#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50', '#ffeb3b', '#ff9800', '#607d8b'];
14 |     return PLOT_COLORS[Math.floor(Math.random() * PLOT_COLORS.length)]
15 |   }
16 | 
17 |   let chartData = ref(update());
18 | 
19 |   function update() {
20 |     return {
21 |       type: 'bar',
22 |       series: [
23 |         {
24 |           values: randomData(10),
25 |           backgroundColor: randomColor(),
26 |         }
27 |       ]
28 |     };
29 |   };
30 | 
31 |   onMounted(() => {
32 |     setInterval( () => {
33 |       chartData.value = update();
34 |     }, 2000);
35 |   });
36 | </script>
37 | 
38 | <template>
39 |   <div>
40 |     <h3>Dynamic config</h3>
41 |     <p>Everytime the configuration object changes, the component automatically re-renders. Below is an example of the dataset and color changing every 2 seconds without any additional code to re-render the chart. </p>
42 |     <ZingChartVue ref="chart" :data="chartData" />
43 |     <pre>
44 |       &lt;ZingChartVue ref="chart" :data="chartData"/&gt;
45 |     </pre>
46 |     <pre>
47 |       let chartData = ref(update());
48 | 
49 |       function update() {
50 |         return {
51 |           type: 'bar',
52 |           series: [
53 |             {
54 |               values: randomData(10),
55 |               backgroundColor: randomColor(),
56 |             }
57 |           ]
58 |         };
59 |       };
60 | 
61 |       onMounted(() => {
62 |         setInterval( () => {
63 |           chartData.value = update();
64 |         }, 2000);
65 |       });
66 |     </pre>
67 |   </div>
68 | </template>


--------------------------------------------------------------------------------
/src/views/Events.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script setup>
 3 |   import { onMounted, ref } from 'vue';
 4 |   import ZingChartVue from '../ZingChart.vue';
 5 | 
 6 |   const chart = ref();
 7 |   const output = ref(null);
 8 |   const listOfEventListeners = ref([]);
 9 |   const chartData = ref({
10 |     type: "line",
11 |     series: [
12 |       {
13 |         values: randomData(10)
14 |       }
15 |     ]
16 |   });
17 | 
18 |   function chartDone() {
19 |     output.value.innerHTML = `Event "Complete" - The chart is rendered\n`;
20 |   };
21 |   
22 |   function nodeInfo(result) {
23 |     delete result.ev;
24 |     output.value.innerHTML = `Node Info \n` + JSON.stringify(result) + "\n";
25 |   };
26 | 
27 |   // Random numbers from 0-100
28 |   function randomData(count) {
29 |     return Array.from(new Array(count)).map(() => {
30 |       return Math.floor(Math.random() * 10);
31 |     });
32 |   };
33 | 
34 |   onMounted(() => {
35 |     listOfEventListeners.value = Object.keys(chart.value.$attrs);
36 |   });
37 | </script>
38 | 
39 | <template>
40 |   <div>
41 |     <h3>Listening to the chart with ZingChart events</h3>
42 |     <p>Every event available to ZingChart is available on the component's instance.</p>
43 |     <ZingChartVue 
44 |       ref="chart" 
45 |       :data="chartData" 
46 |       @complete="chartDone" 
47 |       @nodeMouseover="nodeInfo" />
48 | 
49 |     <pre>&lt;ZingChartVue ref="chart" :data="chartData" @complete="chartDone" @nodeMouseover="nodeInfo" /&gt;</pre>
50 | 
51 |     <h2>Output from events</h2>
52 |     <h3>Events bound:</h3>
53 |     <ul>
54 |       <li v-for="(item, index) in listOfEventListeners" :key="index">{{item}}</li>
55 |     </ul>
56 |     <textarea ref="output" cols="50" rows="10"></textarea>
57 |   </div>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/src/views/License.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script setup>
 3 |   import { ref } from 'vue';
 4 |   import ZingChartVue from '../ZingChart.vue';
 5 | 
 6 |   // zingchart object for performance flags
 7 |   zingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package
 8 |   zingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package 
 9 | 
10 |   // ZC object for license key
11 |   zingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];
12 | 
13 |   const chartData = ref({
14 |     /* Graphset array */
15 |     graphset: [
16 |       { /* Object containing chart data */
17 |         type: 'line',
18 |         /* Size your chart using height/width attributes */
19 |         height: '200px',
20 |         width: '85%',
21 |         /* Position your chart using x/y attributes */
22 |         x: '5%',
23 |         y: '5%',
24 |         series:[
25 |           {
26 |             values:[76,23,15,85,13]
27 |           },
28 |           {
29 |             values:[36,53,65,25,45]
30 |           }
31 |         ]
32 |       },
33 |       { /* Object containing chart data */
34 |         type: 'funnel',
35 |         height: '55%',
36 |         width: '50%',
37 |         x: '5%',
38 |         y: '200px',
39 |         series:[
40 |           {values:[30]},
41 |           {values:[15]},
42 |           {values:[5]},
43 |           {values:[3]}
44 |         ]
45 |       },
46 |       {
47 |         type: 'pie',
48 |         height: '55%',
49 |         width: '50%',
50 |         x: '50%',
51 |         y: '200px',
52 |         series:[
53 |           {values:[15]},
54 |           {values:[30]},
55 |           {values:[34]}
56 |         ]
57 |       }
58 |     ]
59 |   });
60 | </script>
61 | 
62 | <template>
63 |   <div>
64 |     <h3>A graphset example with ZC and zingchart objects.</h3>
65 |     <ZingChartVue ref="chart" :data="chartData" />
66 |     <pre>
67 |       &lt;ZingChartVue ref="chart" :data="chartData"/&gt;
68 |     </pre>
69 |     <pre>
70 |       zingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];
71 |     </pre>
72 |   </div>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/src/views/Methods.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script setup>
 3 |   import { ref } from 'vue';
 4 |   import ZingChartVue from '../ZingChart.vue';
 5 | 
 6 |   const chart = ref();
 7 |   const chartData = ref({
 8 |     type: "line",
 9 |     series: [
10 |       {
11 |         values: randomData(10)
12 |       }
13 |     ]
14 |   });
15 | 
16 |   // Random numbers from 0-100
17 |   function randomData(count) {
18 |     return Array.from(new Array(count)).map(() => {
19 |       return Math.floor(Math.random() * 10);
20 |     });
21 |   };
22 | 
23 |   function addPlot() {
24 |     chart.value.addplot({
25 |       data: {
26 |         values: randomData(10),
27 |         text: "My new plot"
28 |       }
29 |     });
30 |   };
31 | </script>
32 | 
33 | <template>
34 |   <div>
35 |     <h3>Modifying the chart with ZingChart methods</h3>
36 |     <p>Every method available to ZingChart is available on the component's instance.</p>
37 |     <ZingChartVue ref="chart" :data="chartData" />
38 | 
39 |     <h4>addPlot()</h4>
40 |     <p>Adding a plot</p>
41 |     <pre>
42 |       &lt;ZingChartVue ref="chart" :data="chartData" /&gt;
43 |     </pre>
44 |     <pre>
45 |       const chart = ref();
46 | 
47 |       // 'addplot' is a ZingChart method
48 |       chart.value.addplot({
49 |         data: {
50 |           values: randomData(10),
51 |           text: "My new plot"
52 |         }
53 |       });
54 |     </pre>
55 |     <button class="primary" @click="addPlot">Add a plot</button>
56 |   </div>
57 | </template>
58 | 


--------------------------------------------------------------------------------
/src/views/Modules.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <script setup>
 3 |   import { ref } from 'vue';
 4 |   import 'zingchart/es6';
 5 |   import ZingChartVue from '../ZingChart.vue';
 6 |   // import chart modules used on that page
 7 |   import 'zingchart/modules-es6/zingchart-maps.min.js';
 8 |   import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
 9 | 
10 |   const chartData = ref({
11 |     shapes: [
12 |       {
13 |         type: 'zingchart.maps',
14 |         options: {
15 |           name: 'usa',
16 |           ignore: ['AK','HI']
17 |         }
18 |       }
19 |     ]
20 |   });
21 | </script>
22 | 
23 | <template>
24 |   <div>
25 |     <h3>A maps module demo.</h3>
26 |      <ZingChartVue ref="chart" :data="chartData" height="700px" />
27 |      <pre>
28 |       &lt;ZingChartVue ref="chart" :data="chartData"/&gt;
29 |     </pre>
30 |     <pre>
31 |       // import chart modules used on that page
32 |       import 'zingchart/modules-es6/zingchart-maps.min.js';
33 |       import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
34 | 
35 |       const chartData = ref({
36 |         shapes: [
37 |           {
38 |             type: 'zingchart.maps',
39 |             options: {
40 |               name: 'usa',
41 |               ignore: ['AK','HI']
42 |             }
43 |           }
44 |         ]
45 |       });
46 |     </pre>
47 |   </div>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/src/views/Simple.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 |   import { ref } from 'vue';
 3 |   import ZingChartVue from '../ZingChart.vue';
 4 |   
 5 |   const chartData = {
 6 |     type: "line",
 7 |     series: [
 8 |       {
 9 |         values: [6,4,3,4,6,6,4]
10 |       }
11 |     ]
12 |   };
13 | </script>
14 | 
15 | <template>
16 |   <div>
17 |     <h3>A simple example with a line chart config</h3>
18 |     <ZingChartVue ref="chart" :data="chartData" />
19 |     <pre>
20 |       &lt;ZingChartVue ref="chart" :data="chartData"/&gt;
21 |     </pre>
22 |     <pre>
23 |       const chartData = {
24 |         type: "line",
25 |         series: [
26 |           {
27 |             values: [6,4,3,4,6,6,4]
28 |           }
29 |         ]
30 |       };
31 |     </pre>
32 |   </div>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/test/build.spec.js:
--------------------------------------------------------------------------------
 1 | const utils = require('./utils.js');
 2 | const chai = require('chai');
 3 | chai.use(require('chai-fs'));
 4 | 
 5 | // server/controllers/api/card.js
 6 | describe('Build', function() {
 7 | 
 8 |   describe('dist/ files exist', function() {
 9 |     // verify the ZingChart object exists
10 |     it(`zingchartVue.cjs.js file should exist`, async function() {
11 |       let vueDistFilePath = 'dist/zingchartVue3.cjs.min.js';
12 |       expect(vueDistFilePath).to.be.a.path();
13 |     });
14 |     it(`zingchartVue.umd.js file should exist`, async function() {
15 |       let vueDistFilePath = 'dist/zingchartVue3.umd.min.js';
16 |       expect(vueDistFilePath).to.be.a.path();
17 |     });
18 |   });
19 | });
20 | 


--------------------------------------------------------------------------------
/test/utils.js:
--------------------------------------------------------------------------------
 1 | // SETUP & INITIALIZE
 2 | // ---------------------------------
 3 | 
 4 | global.Logger = console;
 5 | 
 6 | // Chai
 7 | global.expect = require('chai').expect;
 8 | 
 9 | 
10 | // CONSTS & HELPER FUNCTIONS
11 | // ---------------------------------
12 | let utils = {
13 |   // Helper Functions
14 | };
15 | 
16 | module.exports = {
17 |   utils,
18 | };
19 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import path from 'path';
 5 | import vue from '@vitejs/plugin-vue'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   build: {
10 |     lib: {
11 |       entry: path.resolve(__dirname, 'src/ZingChart.vue'),
12 |       name: 'ZingChart',
13 |       fileName: (format) => `zingchartVue3.${format}.min.js`,
14 |     },
15 |     rollupOptions: {
16 |       external: ['vue'],
17 |       output: [
18 |         {
19 |           format: 'cjs',
20 |         },
21 |         {
22 |           format: 'umd',
23 |           name: 'zingchartVue3',
24 |         },
25 |       ]
26 |     },
27 |   },
28 |   plugins: [vue()],
29 | });


--------------------------------------------------------------------------------