├── .gitignore
├── .npmignore
├── .prettierrc.js
├── .travis.yml
├── CHANGELOG.md
├── README-vue3.md
├── README.md
├── babel.config.js
├── examples-vue3
    ├── .gitignore
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── jsc-vue-logo.svg
    │   └── resources
    │   │   ├── access-to-drinking-water-by-country.csv
    │   │   ├── laborForceUs.csv
    │   │   └── stepData17-18.csv
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── calendarHeatmap.vue
    │   │   ├── chartDash.vue
    │   │   ├── chartDataGrid.vue
    │   │   ├── circularColorBar.vue
    │   │   ├── circularGauge.vue
    │   │   ├── dataGrid.vue
    │   │   ├── interactiveLine.vue
    │   │   ├── liveData.vue
    │   │   ├── mapChoropleth.vue
    │   │   ├── masterDetail.vue
    │   │   ├── methodUpdate.vue
    │   │   ├── microchartFast.vue
    │   │   └── simpleLine.vue
    │   ├── main.ts
    │   └── shims-vue.d.ts
    ├── tsconfig.json
    └── vue.config.js
├── examples
    ├── .gitignore
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── jsc-vue-logo.svg
    │   └── resources
    │   │   ├── access-to-drinking-water-by-country.csv
    │   │   ├── laborForceUs.csv
    │   │   └── stepData17-18.csv
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── calendarHeatmap.vue
    │   │   ├── chartDash.vue
    │   │   ├── chartDataGrid.vue
    │   │   ├── circularColorBar.vue
    │   │   ├── circularGauge.vue
    │   │   ├── dataGrid.vue
    │   │   ├── interactiveLine.vue
    │   │   ├── liveData.vue
    │   │   ├── mapChoropleth.vue
    │   │   ├── masterDetail.vue
    │   │   ├── methodUpdate.vue
    │   │   ├── microchartFast.vue
    │   │   └── simpleLine.vue
    │   └── main.js
    └── vue.config.js
├── package-lock.json
├── package.json
├── scripts
    └── postinstall.js
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── jscgrid.vue
    │   ├── jscharting.vue
    │   └── jsclabel.vue
    └── main.js
├── tests
    ├── jscgrid.test.js
    ├── jscharting.test.js
    └── jsclabel.test.js
├── types
    └── jscharting-vue.d.ts
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /storage
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /node_modules/**
2 | /examples/**
3 | /examples-vue3/**
4 | /tests/
5 | /.idea/*
6 | /tests/**
7 | /storage/**


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	trailingComma: "none",
3 | 	useTabs: true,
4 | 	semi: true,
5 | 	singleQuote: true
6 | };


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: node


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## [2.4.0] - 2023-3-1
 4 | 
 5 | - Update JSCharting version to [v3.4.0](https://github.com/jscharting/jscharting-dist/blob/master/CHANGELOG.md#340---2023-2-14)
 6 | 
 7 | ## [2.3.1] - 2022-4-28
 8 | 
 9 | - Update JSCharting version to [v3.3.1](https://github.com/jscharting/jscharting-dist/blob/master/CHANGELOG.md#331---2022-4-28)
10 | 
11 | ## [2.3.0] - 2022-4-6
12 | 
13 | - Update JSCharting version to v3.3.0
14 | 
15 | ## [2.2.0] - 2021-11-24
16 | 
17 | - Update JSCharting version to v3.2.0
18 | 
19 | ## [2.1.0] - 2021-08-27
20 | 
21 | - Update JSCharting version to v3.1.0
22 | 
23 | ## [2.0.0-beta.2] - 2021-05-07
24 | 
25 | ### Changed
26 | - Adjusted grid and label props definitions
27 | - Sync definitions in jscharting-vue.d.ts
28 | - Tweak readme
29 | 
30 | ### Added
31 | - Tests
32 | 
33 | ## [2.0.0-beta] - 2021-04-13
34 | 
35 | ### Breaking Change
36 | - The `callback` prop was removed and is now the `@rendered` event
37 | 
38 | ### Changed
39 | - Revised Readme.md documentation
40 | - npm `start` script renamed to `serve` in examples
41 | - Update JSCharting version to v3.0.3
42 | - Revised all examples
43 | 
44 | ### Added
45 | - Component Typings
46 | - @rendered event
47 | - Vue3 Support
48 | - Vue3 Examples 
49 | - Vue3 Documentation
50 | - New Examples
51 | 
52 | ## [1.2.2] - 2021-01-27
53 | 
54 | ### Changed
55 | - Update JSCharting version to v3.0.2
56 | 
57 | ## [1.2.1] - 2020-10-27
58 | 
59 | ### Changed
60 | - Update JSCharting version to v3.0.1
61 | 
62 | ## [1.2.0] - 2020-10-26
63 | 
64 | ### Changed
65 | - Test against built files
66 | - Update JSCharting version to v3.0.0 
67 | 
68 | ## [1.1.0] - 2020-02-19
69 | 
70 | ### Added 
71 | - Initial plugin release.
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/README-vue3.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <p align="center">
  3 |     <br />
  4 |     <br />
  5 |    <a href="https://jscharting.com"><img src="https://jscharting.com/images/jsc-vue-logo.svg" width="400" alt="JSCharting for Vue.js"/></a><br />
  6 |    JavaScript data visualization for Vue.js 
  7 | </p>
  8 | 
  9 | <p align="center">
 10 | <a href="https://travis-ci.com/jscharting/jscharting-vue"><img src="https://img.shields.io/travis/com/jscharting/jscharting-vue.svg?branch=master" alt="Builds"></a>
 11 | <a href="https://david-dm.org/jscharting/jscharting-vue"><img alt="David" src="https://img.shields.io/david/jscharting/jscharting-vue"></a>
 12 | <a href="https://www.npmjs.com/package/jscharting-vue"><img alt="npm version" src="https://img.shields.io/npm/v/jscharting-vue.svg"></a>
 13 | <img alt="code style" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg">
 14 | <a href="https://twitter.com/jscharting/"><img alt="Twitter" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Fjscharting%2F"></a> <br />
 15 | </p>
 16 | 
 17 | <br />
 18 | 
 19 | **JSCharting** is a JavaScript data visualization library offering seamless usage with Vue across all devices and platforms. Every JSCharting license includes a full suite of 150+ chart types including standards such as pie charts, line charts, donut and bar charts. In addition, advanced chart types including Gantt charts, JavaScript Org Charts, interactive charts for stock and finance, seamless grid and calendar charts, JavaScript maps, sparklines, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.
 20 | 
 21 | Example Charts:
 22 | [Chart Types](https://jscharting.com/examples/chart-types/)
 23 | | [Feature Examples](https://jscharting.com/examples/chart-features/)
 24 | 
 25 | # Official JSCharting plugin for Vue.js 
 26 | A Vue2 and Vue3 wrapper to use [JSCharting](https://jscharting.com/) charting library as a Vue component.
 27 | 
 28 | ### This documentation is for Vue3. For Vue2, [click here](README.md).
 29 | 
 30 | ## Table of Contents 
 31 | 
 32 | 1. [Install](#install)
 33 |     1. [Run Examples](#run-examples)
 34 | 2. [Usage](#usage)
 35 |     1. [Simple Example](#simple-example)
 36 |     2. [JSCharting Component Options](#jscharting-component-options)
 37 |     3. [Updating Charts](#updating-charts)
 38 | 3. [Chart resources](#chart-resources)
 39 | 4. [Getting a chart reference](#getting-a-chart-reference)
 40 | 5. [JSCLabel Component](#jsclabel-component)
 41 | 6. [JSCGrid Component](#jscgrid-component)
 42 | 
 43 | 
 44 | 
 45 | ### Install
 46 | 
 47 | Install the jscharting-vue chart component.
 48 | 
 49 | ```console
 50 | npm i -D jscharting-vue
 51 | ```
 52 | 
 53 | or
 54 | 
 55 | ```console
 56 | yarn add jscharting-vue
 57 | ```
 58 | 
 59 | 
 60 | #### Run Examples
 61 | Clone the [Github repo](https://github.com/jscharting/jscharting-vue)  locally. Example charts are located in the `/examples-vue3` folder.
 62 | 
 63 | To view the examples you can run the webpack dev server: localhost:3333
 64 | 
 65 | ```console
 66 | npm run serve-examples-vue3
 67 | ```
 68 | 
 69 | Or build the project manually.
 70 | 
 71 | ```console
 72 | npm run build-examples-vue3
 73 | ```
 74 | 
 75 | 
 76 | ### Usage
 77 | 
 78 | #### Simple example
 79 | This example shows how you can use the `JSCharting` component of the `jscharting-vue` module to make a column chart.
 80 | 
 81 | 
 82 | ```html
 83 | <template>
 84 |     <JSCharting :options="chartOptions" ></JSCharting>
 85 | </template>
 86 | 
 87 | <script lang="ts">
 88 | import { defineComponent, reactive } from 'vue'
 89 | import JSCharting, { JSC } from 'jscharting-vue';
 90 | 
 91 | export default defineComponent({
 92 |    name: 'columnChart',
 93 |    setup() {
 94 |       const chartOptions = reactive({
 95 |          type: 'horizontal column',
 96 |          series: [
 97 |             {
 98 |                points: [
 99 |                   { x: 'A', y: 50 },
100 |                   { x: 'B', y: 30 },
101 |                   { x: 'C', y: 50 }
102 |                   ]
103 |               }
104 |           ]
105 |         } as JSC.JSCChartConfig);
106 |       return { chartOptions }; 
107 |     },
108 |     components: {
109 |         JSCharting
110 |     }
111 | });
112 | </script>
113 | ```
114 | 
115 | Notice that you can use `JSCChartConfig` type definitions for chart configuration properties.
116 | ```typescript
117 | import { JSCChartConfig } from 'jscharting'; // -> JSCChartConfig
118 | // OR
119 | import JSCharting, { JSC } from 'jscharting-vue'; // -> JSC.JSCChartConfig
120 | ```
121 | 
122 | 
123 | #### JSCharting Component Options
124 | These customizable options are available with the `JSCharting` component.
125 | 
126 | | Parameter | Type |  Description |
127 | | --------- | :----: | ----------- |
128 | | `:options` | object | JSCharting chart configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Chart). |
129 | | `:mutable` | boolean | (Optional) True by default. When set to `false`, a new instance of the chart is created when chart options change. Otherwise, updated options are passed to the existing chart instance `chart.options()` function. 
130 | | `:ignoreStateUpdate` | boolean | (Optional) `false` by default. When `true`, the chart will ignore updates applied when reactive property is changed. This is useful when you want to update the chart directly. |
131 | | `@rendered` | event | (Optional) Event triggered when the chart is finished rendering. The first argument of the event handler is a reference to the created chart.|
132 | 
133 | 
134 | #### Updating charts
135 | 
136 | There are a couple ways to update live charts.
137 | 
138 | ##### Using reactive properties
139 | 
140 | Updating reactive chart options properties affects the chart in two ways, depending on the option `mutable`. 
141 | When the component option `mutable` is true, options are passed to the chart using chart.options(). 
142 | When `mutable` is false, changing options will reset the chart with a new instance.
143 | 
144 | Charts with `mutable == true` option perform better and allow charts to animate changes. Only new options that are changing
145 | need to be passed to the chart. You can animate chart updates using this more.
146 | 
147 | Using `mutable == false` is sometimes useful when a chart must be drastically modified. In this mode, all options should be
148 |  available for a new chart instance to use.
149 | 
150 | See [animating series and points](https://jscharting.com/tutorials/types/js-series-point-animation-chart/) for more 
151 | information.
152 | 
153 | ```html
154 | <template>
155 |    <div>
156 |       <JSCharting :options="chartOptions"></JSCharting>
157 |       <button v-on:click="updateChartOptions">Update Chart Options Data</button>
158 |    </div>
159 | </template>
160 | 
161 | <script lang="ts">
162 |    import { defineComponent, reactive } from 'vue';
163 |    import { JSCChartConfig } from 'jscharting';
164 |    import JSCharting from 'jscharting-vue';
165 | 
166 |    export default defineComponent({
167 |       name: 'methodUpdate',
168 |       setup() {
169 |       	
170 |          const randomPoints = () => {
171 |             let points = [];
172 |             for (let i = 1; i < 12; i++) {
173 |                points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });
174 |             }
175 |             return points;
176 |          }
177 |       	
178 |          const chartOptions = reactive({
179 |             type: 'line',
180 |             title: { label: { text: 'Series updates' } },
181 |             legend: {
182 |                position: 'inside bottom right'
183 |             },
184 |             xAxis: { scale: { type: 'time' } },
185 |             series: [
186 |                {
187 |                   name: 'Purchases',
188 |                   points: randomPoints()
189 |                }
190 |             ]
191 |          } as JSCChartConfig);
192 | 
193 |          function updateChartOptions() {
194 |             chartOptions.series = [
195 |                {
196 |                   name: 'Purchases',
197 |                   points: randomPoints()
198 |                }
199 |             ];
200 |          }
201 |          return {
202 |             chartOptions,
203 |             updateChartOptions
204 |          };
205 |       },
206 |       components: {
207 |          JSCharting
208 |       }
209 |    });
210 | 
211 | </script>
212 | ```
213 | 
214 | ##### Updating chart directly
215 | 
216 | JSCharting has a rich API for direct interaction with chart elements programmatically. This approach is more 
217 | flexible and can update the chart more efficiently when performance is a priority. Charts can also 
218 | be decoupled from `data` updates and managed independently.
219 | 
220 | Set the `ignoreStateUpdate` option to true to prevent reactive chart properties from affecting the chart itself.
221 | 
222 | See [getting a chart reference](#getting-a-chart-reference). Code to get the chart instance inside the `setup()` function
223 | will look something like this.
224 | 
225 | ```js
226 | const chart = this.myChart.value?.instance as JSC.Chart;
227 | ```
228 | 
229 | Once a `chart` instance reference is available, you can update chart options as needed with code such as:
230 | 
231 | ```js
232 | chart.series().points(p => p.y > 50).options({ color: "red" });
233 | ```
234 | 
235 | This line will make all points on a chart with y values greater than 50 red. Another example:
236 | 
237 | ```js
238 | chart.series(0).points(0).options({ y: 100 });
239 | ```
240 | 
241 | This example updates the "Purchases" series with new random point values.
242 | 
243 | 
244 | ```vue
245 | <template>
246 |     <div>
247 |         <JSCharting :options="chartOptions" ref="myChart"></JSCharting>
248 |         <button v-on:click="updateData">Update Chart Options Data</button>
249 |     </div>
250 | </template>
251 | 
252 | <script lang="ts">
253 |    import { defineComponent, reactive, ref } from 'vue';
254 |    import JSCharting, { JSC } from 'jscharting-vue';
255 | 
256 |    export default defineComponent({
257 |       name: 'methodUpdate2',
258 |       setup() {
259 |          const randomPoints = () => {
260 |             let points = [];
261 |             for (let i = 1; i < 12; i++) {
262 |                points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });
263 |             }
264 |             return points;
265 |          }
266 |             const myChart = ref({} as JSCharting);
267 |             const chartOptions = reactive({
268 |                type: 'line',
269 |                title: { label: { text: 'Series updates' } },
270 |                legend: {
271 |                   position: 'inside bottom right'
272 |                },
273 |                xAxis: { scale: { type: 'time' } },
274 |                series: [
275 |                   {
276 |                      name: 'Purchases',
277 |                      points: randomPoints()
278 |                   }
279 |                ]
280 |             } as JSC.JSCChartConfig);
281 |             
282 |             const updateData = ()=>{
283 |                const chart = myChart.value?.instance as JSC.Chart;
284 |                if (chart) {
285 |                   chart.series('Purchases').options({ points: randomPoints() });
286 |                }
287 |             }
288 |             
289 |             return {
290 |                chartOptions,
291 |                myChart,
292 |                updateData
293 |             };
294 |         },
295 |         components: {
296 |            JSCharting
297 |         }
298 |     });
299 | </script>
300 | ```
301 | 
302 | ### Chart resources
303 | The JSCharting library includes resources (modules, mapping data, polyfills, icons library) that load automatically
304 | when they are needed. The `examples-vue3/` webpack [vue.config.js](examples-vue3/vue.config.js) configuration copies 
305 | these resources to the `./dist/assets/jscharting` folder during built.
306 | 
307 | The `examples-vue3/src/App.vue` file calls the `JSC.defaults()` function to set `baseUrl` option
308 | with this path globally in its constructor. All subsequent charts will be aware of the location of these resources.
309 | 
310 | ```js
311 | import { JSC } from 'jscharting-vue';
312 | JSC.defaults({ baseUrl: 'dist/assets/jscharting', debug:true });
313 | ```
314 | 
315 | **Note:** If the chart does not find the resources path, it will download them from a CDN.
316 | Setting `debug:true` in the `JSC.defaults()` function during development is recommended as it will 
317 | alert you when the CDN fallback is used. It is recommended to use a local copy of resources in production.
318 | 
319 | ### Getting a chart reference
320 | 
321 | You can get a chart instance and use it within the `setup()` function using the `ref` attribute on 
322 | the <JSCharting> tag:
323 | 
324 | ```vue
325 | <template>
326 |     <JSCharting ref="myChart" :options="chartOptions"></JSCharting>
327 | </template>
328 | 
329 | <script lang="ts">
330 | import { defineComponent, reactive, ref } from 'vue';
331 | import JSCharting, { JSC } from 'jscharting-vue';
332 | 
333 | export default defineComponent({
334 |    setup() {
335 |       const randomPoints = () => {
336 |          let points = [];
337 |          for (let i = 1; i < 12; i++) {
338 |             points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });
339 |          }
340 |          return points;
341 |       }
342 |       
343 |       // Define myChart reference
344 |       const myChart = ref({} as JSCharting);
345 |       
346 |       const chartOptions = reactive({
347 |          type: 'line',
348 |          series: [
349 |             {
350 |                name: 'Purchases',
351 |                points: randomPoints()
352 |             }
353 |          ]
354 |       } as JSC.JSCChartConfig);
355 |     
356 |       // Helper function to get a chart reference
357 |       const getChart = () => this.myChart.value?.instance as JSC.Chart;
358 |       
359 |       return {
360 |          chartOptions,
361 |          myChart,
362 |          getChart
363 |       };
364 |     },
365 |     components: {
366 |         JSCharting
367 |     }
368 | });
369 | 
370 | </script>
371 | ```
372 | 
373 | You can also store it when the chart `@rendered` event is executed.
374 | 
375 | ```vue
376 | <template>
377 |     <JSCharting :options="chartOptions" @rendered="chartRendered"></JSCharting>
378 |     <button v-on:click="updateData">Add Series</button>
379 | </template>
380 | 
381 | <script lang="ts">
382 | import { defineComponent, ref } from 'vue';
383 | import JSCharting, {JSC} from 'jscharting-vue';
384 | 
385 | export default defineComponent({
386 |    setup() {
387 |       const myChart = ref({} as JSC.Chart);
388 |       return {
389 |          myChart,
390 |          chartOptions:{
391 |             type:'line'
392 |          },
393 |          chartRendered: (instance: JSC.Chart) => {
394 |             myChart.value = instance;
395 |          },
396 |          updateData: () => {
397 |             myChart.value?.series.add({name: "S1", points: [{x: 5, y: 10}, {x: 8, y: 10}]});
398 |          }
399 |       }
400 |    },
401 |    components: {
402 |       JSCharting
403 |    }
404 | });
405 | </script>
406 | ```
407 | 
408 | ### JSCLabel Component
409 | This plugin also contains an implementation of the `JSCLabel` component for vue.
410 | You can use it to create very efficient micro chart SVG images in your vue projects.
411 | Here's a simple example.
412 | 
413 | ```html
414 | <template>
415 |     <JSCLabel :options="options" />
416 | </template>
417 | 
418 | <script>
419 |    import { JSCLabel } from 'jscharting-vue';
420 |    export default {
421 |       name:'Microchart',
422 |       setup(){
423 |          const data = [5,2,3,5,1];
424 |          return {
425 |             options: `<chart arealine data=${data.join(',')} width=200 height=50>`
426 |          }
427 |       },
428 | 
429 |       components: {
430 |          JSCLabel
431 |       }
432 |    };
433 | </script>
434 | ```
435 | 
436 | The [Microchart Fast](examples-vue3/components/microchartFast.vue) example demonstrates updating a microchart using the 
437 | JSCLabel component quickly.
438 | 
439 | See the [microcharts tutorial](https://jscharting.com/tutorials/types/js-microcharts/) for configuration 
440 | string syntax and more information.
441 | 
442 | ### JSCGrid Component
443 | The `JSCGrid` data grid component is also included. You can use it to create data grids from JSON arrays.
444 | Here's a data grid example.
445 | 
446 | ```html
447 | <template>
448 |     <JSCGrid :options="gridOptions" />
449 | </template>
450 | 
451 | <script>
452 |    import { JSCGrid } from 'jscharting-vue';
453 |    export default {
454 |       name:'Data Grid',
455 |       setup(){
456 |          return {
457 |          	gridOptions: {
458 |          	   data: [
459 |                   ['Art', 5, 10],
460 |                   ['Greg', 3, 6],
461 |                   ['Olivia', 11, 8],
462 |                   ['Steve', 11, 4],
463 |                   ['Anna', 3, 8]
464 |                ],
465 |                columns: [
466 |                   {header: 'Name'},
467 |                   {header: 'Value One'},
468 |                   {header: 'Value Two'},
469 |                   {header: 'Sum', value: '{%1+%2}'}
470 |                ]
471 |             }
472 |          }
473 |       }
474 |       components: {
475 |          JSCGrid
476 |       }
477 |    };
478 | </script>
479 | ```
480 | 
481 | The available options for the data grid component are.
482 | 
483 | | Parameter | Type |  Description |
484 | | --------- | :----: | ----------- |
485 | | `:options` | object | JSCGrid configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Types.grid). |
486 | | `:mutable` | boolean | (Optional) When set to true, `grid.options()` is called with the updated props instead of recreating the grid instance.
487 | | `:className` | string | (Optional) Applies the class name to the grid container div element. It allows controlling grid size and layout with external CSS. |
488 | | `@rendered` | event | Triggered when the grid is finished rendering. The first argument of the event handler is a reference to the created grid.|
489 | 
490 | Similar to the chart, you can import `JSCGridConfig` typings for grid options with
491 | 
492 | ```typescript
493 | import { JSCGridConfig } from 'jscharting'; // -> JSCGridConfig
494 | // OR
495 | import JSCharting, { JSC } from 'jscharting-vue'; // -> JSC.JSCGridConfig
496 | ```
497 | 
498 | See the [data grid tutorial](https://jscharting.com/tutorials/types/js-data-grid/) for configuration 
499 | syntax and more information.
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 
506 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <p align="center">
  3 |     <br />
  4 |     <br />
  5 |    <a href="https://jscharting.com"><img src="https://jscharting.com/images/jsc-vue-logo.svg" width="400" alt="JSCharting for Vue.js"/></a><br />
  6 |    JavaScript data visualization for Vue.js 
  7 | </p>
  8 | 
  9 | <p align="center">
 10 | <a href="https://travis-ci.com/jscharting/jscharting-vue"><img src="https://img.shields.io/travis/com/jscharting/jscharting-vue.svg?branch=master" alt="Builds"></a>
 11 | <a href="https://david-dm.org/jscharting/jscharting-vue"><img alt="David" src="https://img.shields.io/david/jscharting/jscharting-vue"></a>
 12 | <a href="https://www.npmjs.com/package/jscharting-vue"><img alt="npm version" src="https://img.shields.io/npm/v/jscharting-vue.svg"></a>
 13 | <img alt="code style" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg">
 14 | <a href="https://twitter.com/jscharting/"><img alt="Twitter" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Fjscharting%2F"></a> <br />
 15 | </p>
 16 | 
 17 | <br />
 18 | 
 19 | **JSCharting** is a JavaScript data visualization library offering seamless usage with Vue across all devices and platforms. Every JSCharting license includes a full suite of 150+ chart types including standards such as pie charts, line charts, donut and bar charts. In addition, advanced chart types including Gantt charts, JavaScript Org Charts, interactive charts for stock and finance, seamless grid and calendar charts, JavaScript maps, sparklines, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.
 20 | 
 21 | Example Charts:
 22 | [Chart Types](https://jscharting.com/examples/chart-types/)
 23 | | [Feature Examples](https://jscharting.com/examples/chart-features/)
 24 | 
 25 | # Official JSCharting plugin for Vue.js 
 26 | A Vue2 and Vue3 wrapper to use [JSCharting](https://jscharting.com/) charting library as a Vue component.
 27 | 
 28 | ### This documentation is for Vue 2.x and earlier. For Vue3, [click here](README-vue3.md).
 29 | 
 30 | ## Table of Contents 
 31 | 
 32 | 1. [Install](#install)
 33 |     1. [Run Examples](#run-examples)
 34 | 2. [Usage](#usage)
 35 |     1. [Simple Example](#simple-example)
 36 |     2. [JSCharting Component Options](#jscharting-component-options)
 37 |     3. [Typescript Typings](#typescript-typings)
 38 |     4. [Updating Charts](#updating-charts)
 39 | 3. [Chart resources](#chart-resources)
 40 | 4. [Getting a chart reference](#getting-a-chart-reference)
 41 | 5. [JSCLabel Component](#jsclabel-component)
 42 | 6. [JSCGrid Component](#jscgrid-component)
 43 | 
 44 | 
 45 | 
 46 | ### Install
 47 | 
 48 | Install the jscharting-vue chart component.
 49 | 
 50 | ```console
 51 | npm i -D jscharting-vue
 52 | ```
 53 | 
 54 | or
 55 | 
 56 | ```console
 57 | yarn add jscharting-vue
 58 | ```
 59 | 
 60 | 
 61 | #### Run Examples
 62 | Clone the [Github repo](https://github.com/jscharting/jscharting-vue) locally. Example charts are located in the `/examples` folder.
 63 | 
 64 | To view the examples you can run the webpack dev server: localhost:8080
 65 | 
 66 | ```console
 67 | npm run serve-examples
 68 | ```
 69 | 
 70 | Or build the project manually.
 71 | 
 72 | ```console
 73 | npm run build-examples
 74 | ```
 75 | 
 76 | 
 77 | ### Usage
 78 | 
 79 | #### Simple example
 80 | This example shows how you can use the `JSCharting` component of the `jscharting-vue` module to make a column chart.
 81 | 
 82 | ```html
 83 | <template>
 84 |     <JSCharting :options="chartOptions" class="columnChart"></JSCharting>
 85 | </template>
 86 | 
 87 | <script>
 88 | import JSCharting from 'jscharting-vue';
 89 | 
 90 | export default {
 91 |    name: 'columnChart',
 92 |    data() {
 93 |       return {
 94 |          chartOptions: {
 95 |             type: 'horizontal column',
 96 |             series: [
 97 |                {
 98 |                   points: [
 99 |                      { x: 'A', y: 50 },
100 |                      { x: 'B', y: 30 },
101 |                      { x: 'C', y: 50 }
102 |                   ]
103 |                }
104 |             ]
105 |          }
106 |       }
107 |    },
108 |    components: {
109 |       JSCharting
110 |    }
111 | }
112 | </script>
113 | 
114 | <style>
115 | .columnChart {
116 |     height: 300px;
117 | }
118 | </style>
119 | 
120 | ```
121 | 
122 | #### JSCharting Component Options
123 | These customizable options are available with the `JSCharting` component.
124 | 
125 | | Parameter | Type |  Description |
126 | | --------- | :----: | ----------- |
127 | | `:options` | object | JSCharting chart configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Chart). |
128 | | `:mutable` | boolean | (Optional) When set to true, `chart.options()` is called with the updated props instead of recreating the chart object.
129 | | `:ignoreStateUpdate` | boolean | (Optional) `false` by default. When `true`, the chart will ignore updates applied when reactive property is changed. This is useful when you want to update the chart directly. |
130 | | `@rendered` | event | (Optional) Event triggered when the chart is finished rendering. The first argument of the event handler is a reference to the created chart.|
131 | 
132 | #### Typescript Typings
133 | 
134 | You can use type definitions for chart configuration properties when using typescript. Import the types using:
135 | 
136 | ```typescript
137 | import { JSCChartConfig } from 'jscharting'; // -> JSCChartConfig
138 | // OR
139 | import JSCharting, { JSC } from 'jscharting-vue'; // -> JSC.JSCChartConfig
140 | ```
141 | 
142 | Here's an example using types.
143 | 
144 | ```typescript
145 | <template>
146 |   <div>
147 |     <JSCharting :options="options"></JSCharting>
148 |   </div>
149 | </template>
150 | 
151 | <script lang="ts">
152 | import JSCharting, {JSC} from 'jscharting-vue';
153 | 
154 | 
155 | export default {
156 |    name: 'exampleChart',
157 |    data() {
158 |       let options: JSC.JSCChartConfig = {
159 |          type: 'line', 
160 |          title: { label: { text: 'Chart Tytle' } },
161 |          legend: {
162 |             position: 'inside bottom right'
163 |          },
164 |          xAxis: { scale: { type: 'time' } },
165 |          series: [
166 |             {
167 |                name: 'Purchases',
168 |                points: [
169 |                   ['1/1/2020', 29.9],
170 |                   ['1/2/2020', 71.5],
171 |                   ['1/3/2020', 106.4],
172 |                   ['1/6/2020', 129.2],
173 |                   ['1/7/2020', 144.0],
174 |                   ['1/8/2020', 176.0]
175 | 		       ]
176 |             }
177 |          ]
178 |       };
179 |       return { options };
180 |   },
181 |   components: {
182 |      JSCharting
183 |   }
184 | };
185 | </script>
186 | ```
187 | 
188 | #### Updating charts
189 | 
190 | There are a couple ways to update live charts.
191 | 
192 | ##### Using reactive properties
193 | 
194 | Updating reactive `data` properties affects the chart in two ways, depending on the option `mutable`. When the component option `mutable` is true, only new options are passed to the chart using chart.options(). When `mutable` is false, changing data will reset the chart with a new instance.
195 | 
196 | Charts with `mutable == true` option perform better and allow charts to animate changes. Only new options that are changing
197 | need to be passed to the chart. You can animate chart updates using this more.
198 | 
199 | Using `mutable == false` is sometimes useful when a chart must be drastically modified. In this mode, all options should be
200 |  available for a new chart instance to use.
201 | 
202 | See [animating series and points](https://jscharting.com/tutorials/types/js-series-point-animation-chart/) for more information.
203 | 
204 | ```html
205 | <template>
206 |     <div>
207 |         <JSCharting :options="options"></JSCharting>
208 |         <button v-on:click="updateData">Update Data</button>
209 |     </div>
210 | </template>
211 | 
212 | <script>
213 | import JSCharting from 'jscharting-vue';
214 | 
215 | export default {
216 |    name: 'methodUpdate',
217 |    data() {
218 |       return {
219 |          options: {
220 |             series: [
221 |                {
222 |                   name: 'Purchases',
223 |                   points: this.randomPoints()
224 |                }
225 |             ]
226 |          }
227 |       };
228 |    },
229 |    methods:{
230 |       updateData() {
231 |          this.options = {
232 |             series: [
233 |                {
234 |                   name: 'Purchases',
235 |                   points: this.randomPoints()
236 |                }
237 |             ]
238 |          };
239 |       },
240 |       randomPoints: () => {
241 |          let points = [];
242 |          for (let i = 1; i < 12; i++) {
243 |             points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });
244 |          }
245 |          return points;
246 |       }
247 |    },
248 |    components: {
249 |       JSCharting
250 |    }
251 | };
252 | </script>
253 | ```
254 | 
255 | ##### Updating chart directly
256 | 
257 | JSCharting has a rich API for direct interaction with chart elements programmatically. This approach is more flexible and can
258 | update the chart more efficiently when performance is a priority. Charts can also be decoupled from `data` updates
259 | and managed independently.
260 | 
261 | Set the `ignoreStateUpdate` option to true when you want to use reactive properties for other purposes but not affect the chart itself.
262 | 
263 | See [getting a chart reference](#getting-a-chart-reference). Once a chart reference is available, you can update chart options as needed with code such as:
264 | 
265 | ```js
266 | this.$refs.chart.instance.series().points(p => p.y > 50).options({ color: "red" });
267 | ```
268 | 
269 | This line will make all points on a chart with y values greater than 50 red. Another example:
270 | 
271 | ```js
272 | this.$refs.chart.instance.series(0).points(0).options({ y: 100 });
273 | ```
274 | 
275 | This updates the "Purchases" series with new random points.
276 | 
277 | 
278 | ```html
279 | <template>
280 |     <div>
281 |         <JSCharting :options="options" ref="chart"></JSCharting>
282 |         <button v-on:click="updateData">Update Data</button>
283 |     </div>
284 | </template>
285 | 
286 | <script>
287 | import JSCharting from 'jscharting-vue';
288 | 
289 | export default {
290 |    name: 'methodUpdate',
291 |    data() {
292 |       return {
293 |          options: {
294 |             series: [
295 |                {
296 |                   name: 'Purchases',
297 |                   points: this.randomPoints()
298 |                }
299 |             ]
300 |          }
301 |       };
302 |    },
303 |    methods:{
304 |       updateData() {
305 |          const chart = this.$refs.chart.instance;
306 |          if(chart){
307 |             chart.series('Purchases').options({points: this.randomPoints()})
308 |          }
309 |       },
310 |       randomPoints: () => {
311 |          let points = [];
312 |          for (let i = 1; i < 12; i++) {
313 |             points.push({ id: 'p' + i, x: `1/${i * 2}/2020`, y: Math.random() * 10 });
314 |          }
315 |          return points;
316 |       }
317 |    },
318 |    components: {
319 |       JSCharting
320 |    }
321 | };
322 | </script>
323 | ```
324 | 
325 | ### Chart resources
326 | The JSCharting library includes resources (modules, mapping data, polyfills, icons library) that load automatically
327 | when they are needed. The `examples/` webpack [vue.config.js](examples/vue.config.js) configuration copies
328 | these resources to the `./dist/assets/jscharting` folder during built.
329 | 
330 | The `examples/src/App.vue` file calls the `JSC.defaults()` function to set `baseUrl` option
331 | with this path globally in its constructor. All subsequent charts will be aware of the location of these resources.
332 | 
333 | ```js
334 | import { JSC } from 'jscharting-vue';
335 | JSC.defaults({ baseUrl: 'dist/assets/jscharting', debug:true });
336 | ```
337 | 
338 | **Note:** If the chart does not find the resources path, it will download them from a CDN.
339 | Setting `debug:true` in the `JSC.defaults()` function during development is recommended as it will alert you when the
340 | CDN fallback is used. It is recommended to use a local copy of resources in production.
341 | 
342 | ### Getting a chart reference
343 | 
344 | You can get a chart instance using the `ref` attribute:
345 | ```html
346 | <template>
347 |     <JSCharting :options="options" ref="chart"></JSCharting>
348 | </template>
349 | 
350 | <script>
351 | import JSCharting from 'jscharting-vue';
352 | 
353 | export default {
354 |    methods: {
355 |       getChart() {
356 |          return this.$refs.chart.instance;
357 |       }
358 |    },
359 |    components: {
360 |       JSCharting
361 |    }
362 | };
363 | </script>
364 | ```
365 | 
366 | You can also store it when the chart `@rendered` event is executed.
367 | 
368 | ```html
369 | <template>
370 |     <JSCharting :options="options" @rendered="callback"></JSCharting>
371 | </template>
372 | 
373 | <script>
374 | import JSCharting from 'jscharting-vue';
375 | 
376 | export default {
377 |    mounted() {
378 |       // Using the chart reference.
379 |          this.chart && 
380 |             this.chart.series.add({ name: "S1", points: [{ x: 5, y: 10 }, { x: 5, y: 10 }] });
381 |    },
382 |    data() {
383 |       return {
384 |          chart: null
385 |       }
386 |    },
387 |    methods:{
388 |       callback(chart) {
389 |          this.chart = chart;
390 |       }
391 |    },
392 |    components: {
393 |       JSCharting
394 |    }
395 | };
396 | </script>
397 | ```
398 | 
399 | 
400 | ### JSCLabel Component
401 | This plugin also contains an implementation of the `JSCLabel` component for vue.
402 | You can use it to create very efficient micro chart SVG images in your vue projects.
403 | Here's a simple example.
404 | 
405 | ```html
406 | <template>
407 |     <JSCLabel :options="options" />
408 | </template>
409 | 
410 | <script>
411 |    import { JSCLabel } from 'jscharting-vue';
412 | 
413 |    export default {
414 |       name: 'Microchart',
415 |       data() {
416 |          const data = [5,2,3,5,1];
417 |             return {
418 |                options: `<chart arealine data=${data.join(',')} width=200 height=50>`
419 |             };
420 |       },
421 |       components: {
422 |          JSCLabel
423 |       }
424 |    };
425 | </script>
426 | ```
427 | 
428 | The [Microchart Fast](examples/components/microchartFast.vue) example demonstrates updating a microchart using the
429 | JSCLabel component quickly.
430 | 
431 | See the [microcharts tutorial](https://jscharting.com/tutorials/types/js-microcharts/) for configuration
432 | string syntax and more information.
433 | 
434 | ### JSCGrid Component
435 | The `JSCGrid` data grid component is also included. You can use it to create data grids from JSON arrays.
436 | Here's a data grid example.
437 | 
438 | ```html
439 | <template>
440 |     <JSCGrid :options="options" />
441 | </template>
442 | 
443 | <script>
444 |    import { JSCGrid } from 'jscharting-vue';
445 |    export default {
446 |       name: 'Data Grid',
447 |       data() {
448 |          return {
449 |             options: {
450 |                data: [
451 |                   ['Art', 5, 10],
452 |                   ['Greg', 3, 6],
453 |                   ['Olivia', 11, 8],
454 |                   ['Steve', 11, 4],
455 |                   ['Anna', 3, 8]
456 |                ],
457 |                columns: [
458 |                   { header: 'Name' },
459 |                   { header: 'Value One' },
460 |                   { header: 'Value Two' },
461 |                   { header: 'Sum', value: '{%1+%2}' }
462 |                ]
463 |             }
464 |          };
465 |       },
466 |       components: {
467 |          JSCGrid
468 |       }
469 |    };
470 | </script>
471 | ```
472 | 
473 | The available options for the data grid component are.
474 | 
475 | | Parameter | Type |  Description |
476 | | --------- | :----: | ----------- |
477 | | `:options` | object | JSCGrid configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Types.grid). |
478 | | `:mutable` | boolean | (Optional) When set to true, `grid.options()` is called with the updated props instead of recreating the grid instance.
479 | | `@rendered` | event | Triggered when the grid is finished rendering. The first argument of the event handler is a reference to the created grid.|
480 | 
481 | ```typescript
482 | import { JSCGridConfig } from 'jscharting'; // -> JSCGridConfig
483 | // OR
484 | import JSCharting, { JSC } from 'jscharting-vue'; // -> JSC.JSCGridConfig
485 | ```
486 | 
487 | 
488 | See the [data grid tutorial](https://jscharting.com/tutorials/types/js-data-grid/) for configuration
489 | syntax and more information.
490 | 
491 | 
492 | 
493 | 
494 | 
495 | 
496 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	presets: ['@vue/cli-plugin-babel/preset']
3 | };
4 | 


--------------------------------------------------------------------------------
/examples-vue3/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | /public/assets


--------------------------------------------------------------------------------
/examples-vue3/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/examples-vue3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jscharting-vue3-examples",
 3 |   "version": "1.4.0",
 4 |   "private": true,
 5 |   "description": "Examples using the JSCharting plugin for Vue3.",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve --port=3333",
 8 |     "build": "vue-cli-service build"
 9 |   },
10 |   "author": "JSCharting <support@jscharting.com> (https://jscharting.com/support.htm)",
11 |   "bugs": {
12 |     "email": "support@jscharting.com"
13 |   },
14 |   "license": "jscharting.com/store/",
15 |   "dependencies": {
16 |     "core-js": "^3.10.0",
17 |     "jscharting-vue": "2.4.0",
18 |     "vue": ">=3.0.5"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^4.5.12",
22 |     "@vue/cli-plugin-typescript": "^4.5.12",
23 |     "@vue/cli-service": "^4.5.12",
24 |     "@vue/compiler-sfc": "^3.0.11",
25 |     "typescript": "~3.9.3"
26 |   },
27 |   "peerDependencies": {
28 |     "vue": ">=3.0.5"
29 |   },
30 |   "browserslist": [
31 |     "> 1%",
32 |     "last 2 versions"
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/examples-vue3/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jscharting/jscharting-vue/9c1f4a8ba8e0e8d3c15c084bad65900468da87fa/examples-vue3/public/favicon.ico


--------------------------------------------------------------------------------
/examples-vue3/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 | 		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 | 		<title>JavaScript chart plugin for Vue.js | JSCharting</title>
 9 | 	</head>
10 | 	<body>
11 | 		<noscript>
12 | 			<strong
13 | 				>We're sorry but jscharting-vue doesn't work properly without
14 | 				JavaScript enabled. Please enable it to continue.</strong
15 | 			>
16 | 		</noscript>
17 | 		<div id="app"></div>
18 | 		<!-- built files will be auto injected -->
19 | 	</body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/examples-vue3/public/jsc-vue-logo.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 204 56" height="56" viewBox="0 0 204 56" width="204" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#4a4949"/><stop offset="1" stop-color="#666565"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="8.35" x2="8.35" xlink:href="#a" y1="36.6" y2="4.6606"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="27.6" x2="27.6" xlink:href="#a" y1="36.612" y2="4.0193"/><linearGradient id="d"><stop offset="0" stop-color="#0d48a1"/><stop offset="1" stop-color="#20ade2"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="81.5" x2="81.5" xlink:href="#d" y1="35.8367" y2="3.6367"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="54.2632" x2="54.2632" xlink:href="#d" y1="36.6125" y2="10.3345"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="105.95" x2="105.95" xlink:href="#d" y1="36.58" y2="12.1256"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="126.2" x2="126.2" xlink:href="#d" y1="35.8396" y2="12.1456"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="140.55" x2="140.55" xlink:href="#d" y1="35.8367" y2="3.996"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="151.4" x2="151.4" xlink:href="#d" y1="35.8367" y2="12.1957"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="167.4505" x2="167.4505" xlink:href="#d" y1="35.8367" y2="12.1701"/><linearGradient id="l" gradientUnits="userSpaceOnUse" x1="192" x2="192" xlink:href="#d" y1="44.87" y2="12.0738"/><path d="m10.6 28.8s.2 2.1-1.9 2.1c-2.4 0-4.3-2.8-4.3-2.8l-4.4 4s3.7 4.5 8.8 4.5c5.4 0 7.9-3.5 7.9-5.8v-26.1h-6.1z" fill="url(#b)"/><path d="m25.5 13.5c-1.5-1.6 2.1-6.8 7.3-.5l4.2-4s-3.8-5-9.1-5c-6.2 0-10.9 7-7.7 11.3 4.1 5.4 11.3 9.4 11.3 12.2 0 1.6-.9 3.2-3.1 3.2-4.6 0-5.6-4-5.6-4l-5 3s3.4 6.8 9.6 6.8 10-2.9 10-9.6c0-4.7-9.3-10.6-11.9-13.4z" fill="url(#c)"/><path d="m53.1 0c-5.1-.2-11.3 4.7-11.3 4.7l11.8 11.6z" fill="#1faae0"/><path d="m56.3 2.3-.6 16.2 6.8-14.5s-2.1-1.4-6.2-1.7z" fill="#0e4da4"/><path d="m64.4 6-2.7 4.8s3.9 2.5 3.9 2.9 3.9-3.9 3.9-3.9-3.5-3.5-5.1-3.8z" fill="#1d9fd9"/><path d="m83.2 12.2c-3.2 0-6 2.5-6.4 2.8v-11.4h-5.6v32.2h6s0-13.7 0-14.3c.1-2.1 2.1-4.1 4.7-4.1 2.5 0 3.9 2.5 4 4.3v14h5.9v-16s-.2-7.6-8.6-7.5z" fill="url(#e)"/><path d="m52.2 30.5c-11.7-4.5-5.5-16.8-5.5-16.8l-4.3-3.5c-7.5 10.3-1.4 23.4 7.6 25.6 13.4 3.4 19.5-5.4 19.5-5.4l-3.9-3.8c-4.5 3.8-9.1 5.6-13.4 3.9z" fill="url(#f)"/><path d="m111.9 15c0-.6-2.6-2.8-7.8-2.9-3.8-.1-10.1 4.2-10.1 10.8 0 10.7 7 13.6 11.2 13.6s6.7-3.1 6.7-3.1v2.3h6v-23.1h-6zm-6 16.2c-2.8 0-6.8-2-6.5-7.7.2-4.2 3.5-6.2 6.5-6.2 3.6 0 6.6 2.5 6.6 7.1 0 5.7-4.9 6.8-6.6 6.8z" fill="url(#g)"/><path d="m124.9 15.2v-2.5h-4.9v23.1h5.8v-12.3c.1-5.9 2.7-7.2 5-5.9l1.6-5c0 .1-3.7-2.2-7.5 2.6z" fill="url(#h)"/><path d="m143.1 4h-5.9v8.8h-2.8v4.7h2.8v18.3h6v-18.3h3.5v-4.7h-3.5z" fill="url(#i)"/><path d="m148.5 12.2h5.8v23.6h-5.8z" fill="url(#j)"/><path d="m162.9 14.9v-2.4h-5.6v23.2h5.7v-12.7c-.1-7.5 9.5-7.8 9.2-1l-.2 13.7h5.6s0-12.4 0-16.5c.1-6-7.2-10-14.7-4.3z" fill="url(#k)"/><path d="m198.3 12.7v2.7s-2.5-3.3-7.4-3.3c-5.4 0-11.2 4.3-10.7 13.4.4 7.5 11.1 14.6 17.9 7.3 0 0 1.9 7-6.1 7-4.9 0-5.7-2.1-5.7-2.1h-6.2c2 8.1 14.9 8.9 20 5 4.1-3.1 3.6-6.8 3.8-10v-19.9zm-5.9 17.9c-2.5 0-6.5-1.4-6.5-6.6 0-4.9 3.7-6.5 6.2-6.5 3.3 0 6.6 1.7 6.6 6.8-.1 4.6-3.8 6.3-6.3 6.3z" fill="url(#l)"/><g fill="#666565"><path d="m106 45v-4.2h-.8v-1h.8v-.4c0-.6.2-1.1.5-1.4s.8-.5 1.4-.5c.2 0 .4 0 .7.1v1.1c-.1 0-.3 0-.4 0-.5 0-.8.3-.8.8v.4h1v1h-1v4.2z"/><path d="m108.8 42.3c0-.5.1-1 .3-1.4s.5-.7.9-1c.4-.2.8-.3 1.3-.3.7 0 1.3.2 1.7.7.5.4.7 1 .8 1.8v.4c0 .8-.2 1.5-.7 2s-1.1.7-1.8.7-1.4-.2-1.8-.7c-.5-.6-.7-1.3-.7-2.2zm1.4.1c0 .5.1.9.3 1.2s.5.4.8.4.6-.1.8-.4.3-.7.3-1.3c0-.5-.1-.9-.3-1.1-.2-.3-.5-.4-.8-.4s-.6.1-.8.4c-.2.2-.3.7-.3 1.2z"/><path d="m117.4 41.1c-.2 0-.4 0-.5 0-.5 0-.9.2-1.1.5v3.5h-1.4v-5.3h1.3v.6c.3-.5.7-.7 1.2-.7.2 0 .3 0 .4.1z"/><path d="m142.1 49 2.9-9.6h2.9l-4.5 12.8h-2.8l-4.4-12.8h2.9z"/><path d="m153.9 51.2c-.6.8-1.5 1.1-2.6 1.1-1 0-1.8-.3-2.3-.9s-.8-1.4-.8-2.6v-6.2h2.5v6.2c0 1 .5 1.5 1.4 1.5s1.5-.3 1.8-.9v-6.7h2.5v9.5h-2.4z"/><path d="m162.2 52.3c-1.4 0-2.5-.4-3.4-1.3s-1.3-2-1.3-3.4v-.2c0-1 .2-1.8.6-2.6s.9-1.3 1.6-1.7 1.4-.6 2.3-.6c1.3 0 2.3.4 3.1 1.2.7.8 1.1 2 1.1 3.5v1h-6.1c.1.6.3 1.1.7 1.5s.9.6 1.6.6c1 0 1.7-.4 2.3-1.1l1.2 1.4c-.4.5-.9 1-1.5 1.3s-1.4.4-2.2.4zm-.2-7.8c-.5 0-.9.2-1.2.5s-.5.8-.6 1.5h3.5v-.2c0-.6-.2-1-.5-1.3s-.7-.5-1.2-.5z"/><path d="m167.3 50.9c0-.4.1-.7.4-1s.6-.4 1-.4.8.1 1 .4c.3.3.4.6.4 1s-.1.7-.4 1-.6.4-1 .4-.8-.1-1-.4c-.3-.3-.4-.6-.4-1z"/><path d="m174.6 42.6v10c0 1-.3 1.9-.8 2.4-.6.6-1.4.9-2.4.9-.4 0-.9 0-1.3-.1v-2c.3.1.6.1.8.1.8 0 1.2-.4 1.2-1.2v-10h2.5zm-2.7-2.4c0-.4.1-.7.4-.9s.6-.4 1-.4.8.1 1 .4c.3.2.4.6.4.9 0 .4-.1.7-.4.9s-.6.4-1 .4-.8-.1-1-.4-.4-.5-.4-.9z"/><path d="m181.3 49.5c0-.3-.2-.6-.5-.7-.3-.2-.8-.3-1.5-.5-2.3-.5-3.4-1.4-3.4-2.9 0-.8.3-1.5 1.1-2.1.7-.6 1.6-.8 2.7-.8 1.2 0 2.2.3 2.9.9s1.1 1.3 1.1 2.2h-2.5c0-.4-.1-.7-.4-.9-.2-.2-.6-.4-1.1-.4-.4 0-.8.1-1 .3s-.4.4-.4.7.1.5.4.7.7.3 1.3.4 1.2.3 1.6.4c1.3.5 2 1.3 2 2.6 0 .9-.4 1.6-1.1 2.1s-1.7.8-2.9.8c-.8 0-1.5-.1-2.1-.4s-1.1-.7-1.5-1.2-.5-1-.5-1.6h2.4c0 .5.2.8.5 1s.7.4 1.2.4.9-.1 1.1-.3c.5-.1.6-.4.6-.7z"/><path d="m132.1 38.9-.3.5-4.9 8.6-.4.6-.4-.6-4.9-8.6-.3-.5h-3l8.6 15 8.6-15z"/><path d="m122 38.9 4.5 7.9 4.5-7.9h-2.8l-1.7 3.1-1.7-3.1z"/></g></svg>


--------------------------------------------------------------------------------
/examples-vue3/public/resources/access-to-drinking-water-by-country.csv:
--------------------------------------------------------------------------------
  1 | country_name,country_code,value
  2 | Afghanistan,AF,67.06462342
  3 | Albania,AL,91.03922767
  4 | Algeria,DZ,93.55588814
  5 | Andorra,AD,99.99999628
  6 | Angola,AO,55.84290487
  7 | Antigua and Barb.,AG,96.73918628
  8 | Argentina,AR,99.07837465
  9 | Armenia,AM,99.91337654
 10 | Aruba,AW,97.86902338
 11 | Australia,AU,99.9699356
 12 | Austria,AT,100
 13 | Azerbaijan,AZ,91.38573994
 14 | Bahamas,BS,98.8869605
 15 | Bahrain,BH,100
 16 | Bangladesh,BD,97.01600557
 17 | Barbados,BB,98.49444758
 18 | Belarus,BY,96.48397119
 19 | Belgium,BE,100
 20 | Belize,BZ,97.99257979
 21 | Benin,BJ,66.41472534
 22 | Bermuda,BM,99.90314002
 23 | Bhutan,BT,97.23338334
 24 | Bolivia,BO,92.84873518
 25 | Bosnia and Herz.,BA,96.14235609
 26 | Botswana,BW,90.33771336
 27 | Brazil,BR,98.19339267
 28 | British Virgin Is.,VG,99.86438356
 29 | Brunei,BN,99.90000909
 30 | Bulgaria,BG,99.10834282
 31 | Burkina Faso,BF,47.88812734
 32 | Burundi,BI,60.83054892
 33 | Cambodia,KH,78.51065693
 34 | Cameroon,CM,60.38486395
 35 | Canada,CA,99.43624408
 36 | Cape Verde,CV,87.08320801
 37 | Cayman Is.,KY,96.125
 38 | Central African Rep.,CF,46.33375843
 39 | Chad,TD,38.70059943
 40 | Chile,CL,99.8327912
 41 | China,CN,92.84613551
 42 | Colombia,CO,97.30010961
 43 | Comoros,KM,80.16751687
 44 | Congo,CG,73.21776097
 45 | Costa Rica,CR,99.70151391
 46 | Côte d'Ivoire,CI,72.86894644
 47 | Croatia,HR,99.58666656
 48 | Cuba,CU,95.32758231
 49 | Curaçao,CW,99.49775185
 50 | Cyprus,CY,99.61328615
 51 | Czech Rep.,CZ,99.8802588
 52 | Dem. Rep. Congo,CD,43.24332204
 53 | Dem. Rep. Korea,KP,94.51245282
 54 | Denmark,DK,99.99999894
 55 | Djibouti,DJ,75.63230768
 56 | Dominica,DM,96.5
 57 | Dominican Rep.,DO,96.69022475
 58 | Ecuador,EC,93.99453654
 59 | Egypt,EG,99.10573046
 60 | El Salvador,SV,97.38837497
 61 | Eq. Guinea,GQ,64.66581781
 62 | Eritrea,ER,51.84971842
 63 | Estonia,EE,99.71282684
 64 | Ethiopia,ET,41.05995213
 65 | Fiji,FJ,93.79091928
 66 | Finland,FI,100
 67 | France,FR,100
 68 | Gabon,GA,85.77100366
 69 | Gambia,GM,77.99156682
 70 | Georgia,GE,98.39443935
 71 | Germany,DE,100
 72 | Ghana,GH,81.45338968
 73 | Greece,GR,100
 74 | Greenland,GL,99.99999747
 75 | Grenada,GD,95.62865044
 76 | Guam,GU,99.6952
 77 | Guatemala,GT,94.19058074
 78 | Guinea,GN,61.89872308
 79 | Guinea-Bissau,GW,66.63441423
 80 | Guyana,GY,95.53974768
 81 | Haiti,HT,65.46682593
 82 | Honduras,HN,94.82710944
 83 | Hong Kong,HK,100
 84 | Hungary,HU,99.99999749
 85 | Iceland,IS,99.99999943
 86 | India,IN,92.67464257
 87 | Indonesia,ID,89.34401223
 88 | Iran,IR,95.24454488
 89 | Iraq,IQ,96.53347833
 90 | Ireland,IE,97.39454461
 91 | Isle of Man,IM,99.075
 92 | Israel,IL,100
 93 | Italy,IT,99.44273388
 94 | Jamaica,JM,90.64843618
 95 | Japan,JP,99.01020833
 96 | Jordan,JO,98.93722265
 97 | Kazakhstan,KZ,95.62750722
 98 | Kenya,KE,58.91633339
 99 | Korea,KR,99.787655
100 | Kuwait,KW,100
101 | Kyrgyzstan,KG,87.4559029
102 | Lao PDR,LA,82.06189686
103 | Latvia,LV,98.62618237
104 | Lebanon,LB,92.6
105 | Lesotho,LS,68.64993758
106 | Liberia,LR,72.94803095
107 | Libya,LY,98.52894737
108 | Liechtenstein,LI,100
109 | Lithuania,LT,97.5420681
110 | Luxembourg,LU,99.88960319
111 | Macao,MO,100
112 | Macedonia,MK,93.14146285
113 | Madagascar,MG,54.40398164
114 | Malawi,MW,68.83187676
115 | Malaysia,MY,96.69593891
116 | Mali,ML,78.26082958
117 | Malta,MT,100
118 | Mauritania,MR,70.69618765
119 | Mexico,MX,99.31821889
120 | Moldova,MD,89.05565265
121 | Monaco,MC,100
122 | Mongolia,MN,83.31311501
123 | Montenegro,ME,97.04205011
124 | Morocco,MA,86.77851266
125 | Mozambique,MZ,55.69397562
126 | Myanmar,MM,81.77404853
127 | Namibia,NA,82.54109887
128 | Nauru,NR,99.48493442
129 | Nepal,NP,88.81224952
130 | Netherlands,NL,99.99999928
131 | New Caledonia,NC,99.32859759
132 | New Zealand,NZ,100
133 | Nicaragua,NI,81.52476354
134 | Niger,NE,50.27306506
135 | Nigeria,NG,71.3766307
136 | Norway,NO,100
137 | Oman,OM,91.93807842
138 | Pakistan,PK,91.46545073
139 | Panama,PA,96.38241895
140 | Papua New Guinea,PG,41.32704942
141 | Paraguay,PY,99.61019773
142 | Peru,PE,91.12787097
143 | Philippines,PH,93.56837604
144 | Poland,PL,99.72468254
145 | Portugal,PT,99.90766021
146 | Puerto Rico,PR,97.12479066
147 | Qatar,QA,99.56810194
148 | Romania,RO,100
149 | Russia,RU,97.0899112
150 | Rwanda,RW,57.71327853
151 | S. Sudan,SS,40.67601215
152 | Saint Lucia,LC,98.16200142
153 | Samoa,WS,97.38259524
154 | San Marino,SM,100
155 | São Tomé and Principe,ST,84.29015993
156 | Saudi Arabia,SA,100
157 | Senegal,SN,80.67785387
158 | Serbia,RS,85.52211629
159 | Sierra Leone,SL,60.80698694
160 | Singapore,SG,100
161 | Sint Maarten,SX,95.07411955
162 | Slovakia,SK,99.78773411
163 | Slovenia,SI,99.53502551
164 | Solomon Is.,SB,67.77595721
165 | Somalia,SO,52.43618907
166 | South Africa,ZA,92.67870194
167 | Spain,ES,99.92627831
168 | Sri Lanka,LK,89.41629243
169 | St. Vin. and Gren.,VC,95.1452199
170 | Sudan,SD,60.26709116
171 | Suriname,SR,95.42474497
172 | Sweden,SE,100
173 | Switzerland,CH,100
174 | Syria,SY,97.21650621
175 | Tajikistan,TJ,81.1962748
176 | Tanzania,TZ,56.72645032
177 | Thailand,TH,99.93071158
178 | Timor-Leste,TP,78.34386574
179 | Togo,TG,65.12884019
180 | Tonga,TO,99.90682775
181 | Trinidad and Tobago,TT,98.18496206
182 | Tunisia,TN,96.25470364
183 | Turkey,TR,98.87571815
184 | Turkmenistan,TM,98.81432798
185 | Turks and Caicos Is.,TC,94.31818182
186 | U.S. Virgin Is.,VI,98.71826738
187 | Uganda,UG,49.10403239
188 | Ukraine,UA,93.79082011
189 | United Arab Emirates,AE,98.04550656
190 | United Kingdom,GB,100
191 | United States,US,99.26919207
192 | Uruguay,UY,99.4023635
193 | Uzbekistan,UZ,97.83345271
194 | Vanuatu,VU,91.25680395
195 | Venezuela,VE,95.72371132
196 | Vietnam,VN,94.71880561
197 | Yemen,YE,63.47347434
198 | Zambia,ZM,59.96375651
199 | Zimbabwe,ZW,64.0512297


--------------------------------------------------------------------------------
/examples-vue3/public/resources/stepData17-18.csv:
--------------------------------------------------------------------------------
  1 | Date,Actual,Goal
  2 | 1/1/2017,,
  3 | 1/2/2017,,
  4 | 1/3/2017,1500,7500
  5 | 1/4/2017,3850,7125
  6 | 1/5/2017,3540,6768
  7 | 1/6/2017,2712,6429
  8 | 1/7/2017,2511,6429
  9 | 1/8/2017,1262,6107
 10 | 1/9/2017,2099,5801
 11 | 1/10/2017,2579,5510
 12 | 1/11/2017,1572,5234
 13 | 1/12/2017,1488,4972
 14 | 1/13/2017,2677,4947
 15 | 1/14/2017,1057,4922
 16 | 1/15/2017,1552,4897
 17 | 1/16/2017,2249,4872
 18 | 1/17/2017,1180,4847
 19 | 1/18/2017,1790,4822
 20 | 1/19/2017,2156,4797
 21 | 1/20/2017,2128,4773
 22 | 1/21/2017,8531,4749
 23 | 1/22/2017,1333,5033
 24 | 1/23/2017,1580,4848
 25 | 1/24/2017,2283,4823
 26 | 1/25/2017,661,4798
 27 | 1/26/2017,3373,4774
 28 | 1/27/2017,2199,4750
 29 | 1/28/2017,1307,4726
 30 | 1/29/2017,2276,4702
 31 | 1/30/2017,2011,4678
 32 | 1/31/2017,1928,4654
 33 | 2/1/2017,2003,4630
 34 | 2/2/2017,3178,4606
 35 | 2/3/2017,1763,4582
 36 | 2/4/2017,3046,4559
 37 | 2/5/2017,2120,4536
 38 | 2/6/2017,4585,4513
 39 | 2/7/2017,3767,4535
 40 | 2/8/2017,2510,4512
 41 | 2/9/2017,3116,4489
 42 | 2/10/2017,2498,4466
 43 | 2/11/2017,3692,4443
 44 | 2/12/2017,3306,4420
 45 | 2/13/2017,1297,4397
 46 | 2/14/2017,2196,4375
 47 | 2/15/2017,4167,4353
 48 | 2/16/2017,3518,4331
 49 | 2/17/2017,1894,4309
 50 | 2/18/2017,3215,4287
 51 | 2/19/2017,3421,4265
 52 | 2/20/2017,3070,4243
 53 | 2/21/2017,3549,4221
 54 | 2/22/2017,2750,4199
 55 | 2/23/2017,2379,4178
 56 | 2/24/2017,351,4157
 57 | 2/25/2017,9481,4157
 58 | 2/26/2017,4538,4406
 59 | 2/27/2017,2548,4439
 60 | 2/28/2017,3152,4416
 61 | 3/1/2017,2380,4393
 62 | 3/2/2017,2033,4371
 63 | 3/3/2017,1983,4349
 64 | 3/4/2017,13,4327
 65 | 3/5/2017,0,4327
 66 | 3/6/2017,2735,4327
 67 | 3/7/2017,2383,4305
 68 | 3/8/2017,3053,4283
 69 | 3/9/2017,4784,4261
 70 | 3/10/2017,3795,4391
 71 | 3/11/2017,433,4369
 72 | 3/12/2017,469,4369
 73 | 3/13/2017,1623,4347
 74 | 3/14/2017,315,4325
 75 | 3/15/2017,1861,4325
 76 | 3/16/2017,2095,4303
 77 | 3/17/2017,1362,4281
 78 | 3/18/2017,2928,4259
 79 | 3/19/2017,1897,4237
 80 | 3/20/2017,2112,4215
 81 | 3/21/2017,4625,4193
 82 | 3/22/2017,2419,4301
 83 | 3/23/2017,590,4279
 84 | 3/24/2017,1015,4279
 85 | 3/25/2017,2660,4257
 86 | 3/26/2017,3005,4235
 87 | 3/27/2017,3526,4213
 88 | 3/28/2017,3773,4191
 89 | 3/29/2017,2503,4170
 90 | 3/30/2017,3481,4149
 91 | 3/31/2017,2333,4128
 92 | 4/1/2017,50,4107
 93 | 4/2/2017,1240,4107
 94 | 4/3/2017,3503,4086
 95 | 4/4/2017,3663,4065
 96 | 4/5/2017,2750,4044
 97 | 4/6/2017,2803,4023
 98 | 4/7/2017,2535,4002
 99 | 4/8/2017,2493,3981
100 | 4/9/2017,3901,3961
101 | 4/10/2017,973,3941
102 | 4/11/2017,5842,3921
103 | 4/12/2017,2114,4156
104 | 4/13/2017,2219,4135
105 | 4/14/2017,4411,4114
106 | 4/15/2017,2253,4188
107 | 4/16/2017,2388,4167
108 | 4/17/2017,2934,4146
109 | 4/18/2017,4269,4125
110 | 4/19/2017,4081,4161
111 | 4/20/2017,2321,4157
112 | 4/21/2017,2849,4136
113 | 4/22/2017,2074,4115
114 | 4/23/2017,2634,4094
115 | 4/24/2017,4255,4073
116 | 4/25/2017,3343,4118
117 | 4/26/2017,4747,4097
118 | 4/27/2017,2484,4259
119 | 4/28/2017,2680,4237
120 | 4/29/2017,2275,4215
121 | 4/30/2017,2158,4193
122 | 5/1/2017,2023,4172
123 | 5/2/2017,2602,4151
124 | 5/3/2017,6568,4130
125 | 5/4/2017,2366,4377
126 | 5/5/2017,2286,4355
127 | 5/6/2017,1670,4333
128 | 5/7/2017,3172,4311
129 | 5/8/2017,6373,4289
130 | 5/9/2017,1381,4546
131 | 5/10/2017,1861,4523
132 | 5/11/2017,2240,4500
133 | 5/12/2017,2916,4477
134 | 5/13/2017,2263,4454
135 | 5/14/2017,2662,4431
136 | 5/15/2017,1690,4408
137 | 5/16/2017,3090,4385
138 | 5/17/2017,3753,4363
139 | 5/18/2017,2376,4341
140 | 5/19/2017,2955,4319
141 | 5/20/2017,1371,4319
142 | 5/21/2017,1791,4297
143 | 5/22/2017,1830,4275
144 | 5/23/2017,1681,4253
145 | 5/24/2017,3139,4231
146 | 5/25/2017,3110,4209
147 | 5/26/2017,1540,4187
148 | 5/27/2017,3976,4166
149 | 5/28/2017,8090,4145
150 | 5/29/2017,4821,4393
151 | 5/30/2017,5181,4500
152 | 5/31/2017,5745,4670
153 | 6/1/2017,5479,4938
154 | 6/2/2017,5259,5073
155 | 6/3/2017,2749,5119
156 | 6/4/2017,1226,5000
157 | 6/5/2017,9985,5000
158 | 6/6/2017,10535,5299
159 | 6/7/2017,8659,5616
160 | 6/8/2017,9028,5952
161 | 6/9/2017,16761,6309
162 | 6/10/2017,6610,6687
163 | 6/11/2017,2164,6683
164 | 6/12/2017,2289,6348
165 | 6/13/2017,4421,6030
166 | 6/14/2017,4638,5728
167 | 6/15/2017,3290,5441
168 | 6/16/2017,2709,5168
169 | 6/17/2017,2551,4909
170 | 6/18/2017,2308,4884
171 | 6/19/2017,4506,4859
172 | 6/20/2017,3591,4834
173 | 6/21/2017,5648,4809
174 | 6/22/2017,9163,5018
175 | 6/23/2017,6550,5319
176 | 6/24/2017,3950,5626
177 | 6/25/2017,3586,5542
178 | 6/26/2017,5305,5264
179 | 6/27/2017,5390,5290
180 | 6/28/2017,4260,5316
181 | 6/29/2017,8556,5263
182 | 6/30/2017,4439,5578
183 | 7/1/2017,4758,5521
184 | 7/2/2017,8561,5253
185 | 7/3/2017,4736,5568
186 | 7/4/2017,5146,5526
187 | 7/5/2017,2171,5393
188 | 7/6/2017,1878,5393
189 | 7/7/2017,2347,5123
190 | 7/8/2017,6653,4866
191 | 7/9/2017,3692,5157
192 | 7/10/2017,2062,5083
193 | 7/11/2017,4352,4828
194 | 7/12/2017,5514,4803
195 | 7/13/2017,5949,4980
196 | 7/14/2017,7423,5222
197 | 7/15/2017,15394,5535
198 | 7/16/2017,9430,5867
199 | 7/17/2017,4795,6219
200 | 7/18/2017,4802,6147
201 | 7/19/2017,6233,5839
202 | 7/20/2017,1955,5937
203 | 7/21/2017,5597,5737
204 | 7/22/2017,4136,5688
205 | 7/23/2017,2045,5403
206 | 7/24/2017,6030,5132
207 | 7/25/2017,6122,5356
208 | 7/26/2017,5325,5547
209 | 7/27/2017,5777,5535
210 | 7/28/2017,6052,5595
211 | 7/29/2017,5337,5709
212 | 7/30/2017,5166,5690
213 | 7/31/2017,4913,5506
214 | 8/1/2017,6568,5298
215 | 8/2/2017,7344,5615
216 | 8/3/2017,6158,5951
217 | 8/4/2017,3839,6002
218 | 8/5/2017,3928,6002
219 | 8/6/2017,7310,5898
220 | 8/7/2017,4551,6251
221 | 8/8/2017,5809,6166
222 | 8/9/2017,7765,6041
223 | 8/10/2017,6371,6403
224 | 8/11/2017,6650,6401
225 | 8/12/2017,5060,6463
226 | 8/13/2017,11972,6463
227 | 8/14/2017,6251,6850
228 | 8/15/2017,6600,6820
229 | 8/16/2017,1891,6743
230 | 8/17/2017,3229,6405
231 | 8/18/2017,5688,6084
232 | 8/19/2017,3249,5945
233 | 8/20/2017,4364,5647
234 | 8/21/2017,5602,5364
235 | 8/22/2017,5590,5423
236 | 8/23/2017,6094,5464
237 | 8/24/2017,3078,5621
238 | 8/25/2017,5359,5500
239 | 8/26/2017,3170,5450
240 | 8/27/2017,1096,5180
241 | 8/28/2017,6610,4930
242 | 8/29/2017,7558,5230
243 | 8/30/2017,6242,5550
244 | 8/31/2017,6796,5730
245 | 9/1/2017,6701,6000
246 | 9/2/2017,7173,6180
247 | 9/3/2017,13567,6430
248 | 9/4/2017,7074,6820
249 | 9/5/2017,5486,6890
250 | 9/6/2017,6793,6820
251 | 9/7/2017,6598,6810
252 | 9/8/2017,6850,6740
253 | 9/9/2017,2272,6780
254 | 9/10/2017,5876,6560
255 | 9/11/2017,6317,6320
256 | 9/12/2017,5801,6320
257 | 9/13/2017,4603,6140
258 | 9/14/2017,4890,5840
259 | 9/15/2017,5735,5550
260 | 9/16/2017,7111,5600
261 | 9/17/2017,7967,5940
262 | 9/18/2017,5513,6300
263 | 9/19/2017,5225,6260
264 | 9/20/2017,6120,5950
265 | 9/21/2017,5736,6000
266 | 9/22/2017,5912,5990
267 | 9/23/2017,1392,5970
268 | 9/24/2017,4498,5680
269 | 9/25/2017,2265,5400
270 | 9/26/2017,4204,5130
271 | 9/27/2017,5708,4880
272 | 9/28/2017,5150,5090
273 | 9/29/2017,6650,5120
274 | 9/30/2017,7923,5430
275 | 10/1/2017,1684,5760
276 | 10/2/2017,5201,5560
277 | 10/3/2017,5367,5440
278 | 10/4/2017,6734,5420
279 | 10/5/2017,5587,5750
280 | 10/6/2017,2813,5750
281 | 10/7/2017,9899,5470
282 | 10/8/2017,3647,5800
283 | 10/9/2017,6241,5700
284 | 10/10/2017,2789,5840
285 | 10/11/2017,6592,5690
286 | 10/12/2017,10167,5920
287 | 10/13/2017,5816,6280
288 | 10/14/2017,3095,6260
289 | 10/15/2017,7773,5950
290 | 10/16/2017,9873,6310
291 | 10/17/2017,8544,6690
292 | 10/18/2017,7676,7100
293 | 10/19/2017,6595,7250
294 | 10/20/2017,5861,7220
295 | 10/21/2017,1578,7220
296 | 10/22/2017,1866,6860
297 | 10/23/2017,4245,6520
298 | 10/24/2017,3058,6200
299 | 10/25/2017,2320,5890
300 | 10/26/2017,8169,5600
301 | 10/27/2017,5189,5940
302 | 10/28/2017,2614,5910
303 | 10/29/2017,1971,5620
304 | 10/30/2017,7309,5340
305 | 10/31/2017,6420,5660
306 | 11/1/2017,3238,5850
307 | 11/2/2017,5853,5720
308 | 11/3/2017,2825,5760
309 | 11/4/2017,2076,5620
310 | 11/5/2017,2147,5340
311 | 11/6/2017,3062,5080
312 | 11/7/2017,1355,4830
313 | 11/8/2017,886,4810
314 | 11/9/2017,5416,4790
315 | 11/10/2017,1302,4950
316 | 11/11/2017,1421,4930
317 | 11/12/2017,3101,4910
318 | 11/13/2017,1881,4890
319 | 11/14/2017,2115,4870
320 | 11/15/2017,1591,4850
321 | 11/16/2017,590,4830
322 | 11/17/2017,1907,4810
323 | 11/18/2017,7156,4790
324 | 11/19/2017,1313,5080
325 | 11/20/2017,2462,4900
326 | 11/21/2017,1601,4880
327 | 11/22/2017,2540,4860
328 | 11/23/2017,2466,4840
329 | 11/24/2017,202,4820
330 | 11/25/2017,0,4820
331 | 11/26/2017,,
332 | 11/27/2017,3578,4820
333 | 11/28/2017,3370,4800
334 | 11/29/2017,6656,4780
335 | 11/30/2017,1779,5070
336 | 12/1/2017,2482,4910
337 | 12/2/2017,1485,4890
338 | 12/3/2017,1317,4870
339 | 12/4/2017,2741,4850
340 | 12/5/2017,5030,4830
341 | 12/6/2017,3164,4880
342 | 12/7/2017,1503,4860
343 | 12/8/2017,1505,4840
344 | 12/9/2017,4063,4820
345 | 12/10/2017,4865,4800
346 | 12/11/2017,3451,4830
347 | 12/12/2017,1870,4810
348 | 12/13/2017,3623,4790
349 | 12/14/2017,5521,4790
350 | 12/15/2017,6060,4980
351 | 12/16/2017,11539,5250
352 | 12/17/2017,8065,5570
353 | 12/18/2017,8253,5910
354 | 12/19/2017,7496,6270
355 | 12/20/2017,2770,6580
356 | 12/21/2017,5247,6580
357 | 12/22/2017,1213,6520
358 | 12/23/2017,1909,6200
359 | 12/24/2017,2256,5890
360 | 12/25/2017,1988,5600
361 | 12/26/2017,1924,5320
362 | 12/27/2017,1763,5060
363 | 12/28/2017,282,4810
364 | 12/29/2017,1418,4810
365 | 12/30/2017,2838,4790
366 | 12/31/2017,3383,4770
367 | 1/1/2018,2456,4650
368 | 1/2/2018,2200,4220
369 | 1/3/2018,4786,3820
370 | 1/4/2018,3068,4670
371 | 1/5/2018,0,4670
372 | 1/6/2018,3168,4670
373 | 1/7/2018,2478,4650
374 | 1/8/2018,1622,4630
375 | 1/9/2018,3002,4610
376 | 1/10/2018,1776,4590
377 | 1/11/2018,,
378 | 1/12/2018,1605,4570
379 | 1/13/2018,3843,4550
380 | 1/14/2018,1075,4530
381 | 1/15/2018,57,4510
382 | 1/16/2018,1569,4510
383 | 1/17/2018,1887,4490
384 | 1/18/2018,1563,4470
385 | 1/19/2018,1483,4450
386 | 1/20/2018,3091,4430
387 | 1/21/2018,2231,4410
388 | 1/22/2018,2168,4390
389 | 1/23/2018,986,4370
390 | 1/24/2018,2778,4370
391 | 1/25/2018,1444,4350
392 | 1/26/2018,1167,4330
393 | 1/27/2018,1536,4310
394 | 1/28/2018,3690,4290
395 | 1/29/2018,1384,4270
396 | 1/30/2018,2387,4250
397 | 1/31/2018,756,4230
398 | 2/1/2018,1364,4230
399 | 2/2/2018,4270,4210
400 | 2/3/2018,2253,4240
401 | 2/4/2018,2351,4220
402 | 2/5/2018,2037,4200
403 | 2/6/2018,1738,4180
404 | 2/7/2018,1573,4160
405 | 2/8/2018,1008,4140
406 | 2/9/2018,4263,4120
407 | 2/10/2018,5367,4160
408 | 2/11/2018,6840,4410
409 | 2/12/2018,1753,4680
410 | 2/13/2018,1639,4660
411 | 2/14/2018,3396,4640
412 | 2/15/2018,300,4620
413 | 2/16/2018,1670,4620
414 | 2/17/2018,1340,4600
415 | 2/18/2018,2191,4580
416 | 2/19/2018,2728,4560
417 | 2/20/2018,1656,4540
418 | 2/21/2018,1890,4520
419 | 2/22/2018,873,4500
420 | 2/23/2018,1214,4500
421 | 2/24/2018,3394,4480
422 | 2/25/2018,4001,4460
423 | 2/26/2018,1733,4440
424 | 2/27/2018,953,4420
425 | 2/28/2018,1216,4400
426 | 3/1/2018,2724,4380
427 | 3/2/2018,559,4360
428 | 3/3/2018,,
429 | 3/4/2018,,
430 | 3/5/2018,1350,4360
431 | 3/6/2018,1173,4340
432 | 3/7/2018,2040,4320
433 | 3/8/2018,3752,4300
434 | 3/9/2018,1243,4280
435 | 3/10/2018,1925,4260
436 | 3/11/2018,1582,4240
437 | 3/12/2018,1340,4220
438 | 3/13/2018,337,4200
439 | 3/14/2018,1021,4200
440 | 3/15/2018,1726,4180
441 | 3/16/2018,2065,4160
442 | 3/17/2018,4097,4140
443 | 3/18/2018,1636,4130
444 | 3/19/2018,2267,4110
445 | 3/20/2018,1571,4090
446 | 3/21/2018,1336,4070
447 | 3/22/2018,1000,4050
448 | 3/23/2018,2240,4030
449 | 3/24/2018,4384,4010
450 | 3/25/2018,3887,4110
451 | 3/26/2018,1717,4100
452 | 3/27/2018,1276,4080
453 | 3/28/2018,3739,4060
454 | 3/29/2018,1409,4040
455 | 3/30/2018,149,4020
456 | 3/31/2018,3502,4020
457 | 4/1/2018,1936,4000
458 | 4/2/2018,2397,3980
459 | 4/3/2018,2488,3960
460 | 4/4/2018,1577,3940
461 | 4/5/2018,2199,3920
462 | 4/6/2018,1877,3900
463 | 4/7/2018,44,3880
464 | 4/8/2018,0,3880
465 | 4/9/2018,2839,3880
466 | 4/10/2018,2685,3860
467 | 4/11/2018,4828,3840
468 | 4/12/2018,2810,4070
469 | 4/13/2018,1284,4050
470 | 4/14/2018,3191,4030
471 | 4/15/2018,2004,4010
472 | 4/16/2018,1833,3990
473 | 4/17/2018,1720,3970
474 | 4/18/2018,1523,3950
475 | 4/19/2018,3023,3930
476 | 4/20/2018,3012,3910
477 | 4/21/2018,1610,3910
478 | 4/22/2018,1596,3890
479 | 4/23/2018,1952,3870
480 | 4/24/2018,3604,3850
481 | 4/25/2018,4491,3830
482 | 4/26/2018,2421,4000
483 | 4/27/2018,3180,3980
484 | 4/28/2018,2242,3960
485 | 4/29/2018,2215,3940
486 | 4/30/2018,1751,3920
487 | 5/1/2018,3852,3900
488 | 5/2/2018,4452,3890
489 | 5/3/2018,2680,4030
490 | 5/4/2018,3715,4010
491 | 5/5/2018,3930,3990
492 | 5/6/2018,6604,3990
493 | 5/7/2018,2750,4230
494 | 5/8/2018,7044,4210
495 | 5/9/2018,6760,4470
496 | 5/10/2018,9888,4740
497 | 5/11/2018,12647,5030
498 | 5/12/2018,3791,5340
499 | 5/13/2018,4881,5270
500 | 5/14/2018,4536,5270
501 | 5/15/2018,5399,5020
502 | 5/16/2018,3345,5120
503 | 5/17/2018,7400,5040
504 | 5/18/2018,8433,5350
505 | 5/19/2018,2602,5670
506 | 5/20/2018,552,5520
507 | 5/21/2018,2783,5250
508 | 5/22/2018,5568,4990
509 | 5/23/2018,4698,5140
510 | 5/24/2018,11471,5120
511 | 5/25/2018,7121,5430
512 | 5/26/2018,12291,5760
513 | 5/27/2018,5896,6110
514 | 5/28/2018,922,6100
515 | 5/29/2018,6736,5800
516 | 5/30/2018,5105,6040
517 | 5/31/2018,6873,6000
518 | 6/1/2018,6274,6220
519 | 6/2/2018,1987,6260
520 | 6/3/2018,5770,6050
521 | 6/4/2018,4741,4110
522 | 6/5/2018,6483,4180
523 | 6/6/2018,8651,4640
524 | 6/7/2018,6019,5450
525 | 6/8/2018,6301,5570
526 | 6/9/2018,16999,5720
527 | 6/10/2018,1823,7720
528 | 6/11/2018,2113,7130
529 | 6/12/2018,5120,6130
530 | 6/13/2018,5195,5930
531 | 6/14/2018,6483,5790
532 | 6/15/2018,6840,5860
533 | 6/16/2018,5509,6060
534 | 6/17/2018,2942,6010
535 | 6/18/2018,4394,5400
536 | 6/19/2018,5479,5200
537 | 6/20/2018,5277,5230
538 | 6/21/2018,13504,5240
539 | 6/22/2018,11973,6900
540 | 6/23/2018,15426,7920
541 | 6/24/2018,16525,9430
542 | 6/25/2018,3498,10850
543 | 6/26/2018,1913,10120
544 | 6/27/2018,1573,8480
545 | 6/28/2018,1585,7100
546 | 6/29/2018,1706,6000
547 | 6/30/2018,2835,5150
548 | 7/1/2018,1930,4690
549 | 7/2/2018,2317,4140
550 | 7/3/2018,5261,3780
551 | 7/4/2018,5930,3930
552 | 7/5/2018,5287,4330
553 | 7/6/2018,8729,4530
554 | 7/7/2018,1233,5370
555 | 7/8/2018,3412,4960
556 | 7/9/2018,2456,4650
557 | 7/10/2018,2200,4220
558 | 7/11/2018,4786,3820
559 | 


--------------------------------------------------------------------------------
/examples-vue3/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="app">
  3 | 		<div class="examplesHead">
  4 | 			<a href="https://jscharting.com"
  5 | 				><img
  6 | 					src="../public/jsc-vue-logo.svg"
  7 | 					style="width: 200px; margin-top: 2px;"
  8 | 					title="JSCharting"
  9 | 					alt="JSCharting JavaScript Chart Library"
 10 | 			/></a>
 11 | 
 12 | 			<div class="examplesItems">
 13 | 				<button
 14 | 					v-for="item in examples"
 15 | 					v-bind:key="item.file"
 16 | 					v-on:click="selected = item.file"
 17 | 					v-bind:class="{ selected: selected === item.file }"
 18 | 					class="btn"
 19 | 				>
 20 | 					{{ item.name }}
 21 | 				</button>
 22 | 			</div>
 23 | 		</div>
 24 | 		<div class="samples">
 25 | 			<component v-bind:is="selected"></component>
 26 | 		</div>
 27 | 	</div>
 28 | </template>
 29 | 
 30 | <script lang="ts">
 31 | import * as JSC from 'jscharting';
 32 | import { defineComponent } from 'vue';
 33 | 
 34 | import simpleLine from './components/simpleLine.vue';
 35 | import chartDash from './components/chartDash.vue';
 36 | import circularGauge from './components/circularGauge.vue';
 37 | import circularColorBar from './components/circularColorBar.vue';
 38 | import interactiveLine from './components/interactiveLine.vue';
 39 | import calendarHeatmap from './components/calendarHeatmap.vue';
 40 | import dataGrid from './components/dataGrid.vue';
 41 | import mapChoropleth from './components/mapChoropleth.vue';
 42 | import methodUpdate from './components/methodUpdate.vue';
 43 | import liveData from './components/liveData.vue';
 44 | import masterDetail from './components/masterDetail.vue';
 45 | import microchartFast from './components/microchartFast.vue';
 46 | import chartDataGrid from './components/chartDataGrid.vue';
 47 | 
 48 | export default defineComponent({
 49 | 	name: 'App',
 50 | 	data() {
 51 | 		return {
 52 | 			selected: 'simpleLine',
 53 | 			examples: [
 54 | 				{ file: 'simpleLine', name: 'Line' },
 55 | 				{ file: 'chartDash', name: 'Dashboard' },
 56 | 				{ file: 'circularGauge', name: 'Gauge' },
 57 | 				{ file: 'circularColorBar', name: 'Color Bar' },
 58 | 				{ file: 'interactiveLine', name: 'Interactivity' },
 59 | 				{ file: 'mapChoropleth', name: 'Map Choropleth' },
 60 | 				{ file: 'calendarHeatmap', name: 'Calendar Heatmap' },
 61 | 				{ file: 'methodUpdate', name: 'Method Update' },
 62 | 				{ file: 'microchartFast', name: 'Microchart' },
 63 | 				{ file: 'liveData', name: 'Live Data' },
 64 | 				{ file: 'masterDetail', name: 'Master Detail' },
 65 | 				{ file: 'dataGrid', name: 'Data Grid' },
 66 | 				{ file: 'chartDataGrid', name: 'Chart Grid Switch' }
 67 | 			]
 68 | 		};
 69 | 	},
 70 | 	components: {
 71 | 		simpleLine,
 72 | 		chartDash,
 73 | 		circularGauge,
 74 | 		circularColorBar,
 75 | 		interactiveLine,
 76 | 		mapChoropleth,
 77 | 		calendarHeatmap,
 78 | 		methodUpdate,
 79 | 		microchartFast,
 80 | 		liveData,
 81 | 		masterDetail,
 82 | 		dataGrid,
 83 | 		chartDataGrid
 84 | 	},
 85 | 	beforeCreate: function() {
 86 | 		JSC.defaults({ baseUrl: './assets/jscharting/' });
 87 | 	}
 88 | });
 89 | </script>
 90 | 
 91 | <style scoped>
 92 | #app {
 93 | 	-webkit-font-smoothing: antialiased;
 94 | 	-moz-osx-font-smoothing: grayscale;
 95 | }
 96 | 
 97 | .samples {
 98 | 	font-family: sans-serif;
 99 | 	max-width: 800px;
100 | 	margin: 20px auto;
101 | }
102 | 
103 | .examplesHead {
104 | 	background: #e2e7ef;
105 | 	padding: 15px 15px 10px 15px;
106 | 	min-height: 60px;
107 | 	position: relative;
108 | 	display: inline-block;
109 | 	width: 100%;
110 | }
111 | 
112 | .examplesDescription {
113 | 	text-align: center;
114 | 	margin: 15px 0 0 0;
115 | }
116 | 
117 | .examplesItems {
118 | 	float: right;
119 | 	margin: 13px;
120 | }
121 | 
122 | .examplesLabel {
123 | 	font-family: sans-serif;
124 | 	top: 52px;
125 | 	position: absolute;
126 | 	left: 125px;
127 | }
128 | 
129 | .btn {
130 | 	background-color: #0876ff;
131 | 	border-radius: 4px;
132 | 	border-width: 0;
133 | 	color: white;
134 | 	padding: 0.5em;
135 | 	font-family: sans-serif;
136 | 	font-size: 0.9em;
137 | 	margin-right: 10px;
138 | 	margin-top: 5px;
139 | 	min-width: 60px;
140 | }
141 | 
142 | .btn:focus,
143 | .btn:hover,
144 | .btn.selected {
145 | 	background-color: #05418c;
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/examples-vue3/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jscharting/jscharting-vue/9c1f4a8ba8e0e8d3c15c084bad65900468da87fa/examples-vue3/src/assets/logo.png


--------------------------------------------------------------------------------
/examples-vue3/src/components/calendarHeatmap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<JSCharting
 3 | 		:options="chartOptions"
 4 | 		style="height:200px;  max-width:800px;"
 5 | 	></JSCharting>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { defineComponent, reactive } from 'vue';
10 | import JSCharting, { JSC } from 'jscharting-vue';
11 | 
12 | export default defineComponent({
13 | 	name: 'calendarHeatmap',
14 | 	setup() {
15 | 		const chartOptions = reactive({
16 | 			debug: true,
17 | 			type: 'calendar year solid',
18 | 			title: { label: { text: 'Daily Steps 2017' } },
19 | 			data: './resources/stepData17-18.csv',
20 | 			calendar: {
21 | 				range: ['1/1/2017', '12/31/2017'],
22 | 				defaultEdgePoint: {
23 | 					tooltip: '',
24 | 					mouseTracking: false
25 | 				}
26 | 			},
27 | 			legend: { position: 'right' },
28 | 			palette: {
29 | 				colors: [
30 | 					'#f7fcfd',
31 | 					'#e0ecf4',
32 | 					'#bfd3e6',
33 | 					'#9ebcda',
34 | 					'#8c96c6',
35 | 					'#8c6bb1',
36 | 					'#88419d',
37 | 					'#810f7c',
38 | 					'#4d004b'
39 | 				],
40 | 				colorBar: { axis: { scale: { interval: 5000 } } }
41 | 			},
42 | 			defaultPoint: { tooltip: '<b>%name</b><br> %zValue Steps' },
43 | 			toolbar: { visible: false }
44 | 		} as JSC.JSCChartConfig);
45 | 		return {
46 | 			chartOptions
47 | 		};
48 | 	},
49 | 	components: {
50 | 		JSCharting
51 | 	}
52 | });
53 | </script>
54 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/chartDash.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | #mapGridWrapper {
  3 | 	max-width: 740px;
  4 | 	margin: 0px auto;
  5 | }
  6 | #mapGridWrapper a {
  7 | 	text-decoration: none;
  8 | }
  9 | #mapGridWrapper p {
 10 | 	margin-left: 5px;
 11 | 	font-size: 12px;
 12 | 	font-family: tahoma, geneva, sans-serif;
 13 | }
 14 | 
 15 | .jscGrid .col1 {
 16 | 	text-align: left;
 17 | 	padding-left: 15px;
 18 | }
 19 | 
 20 | .jscGrid .dataTable {
 21 | 	font-family: tahoma, geneva, sans-serif;
 22 | }
 23 | .jscGrid .dataTable thead th {
 24 | 	background-color: white;
 25 | 	color: #424242;
 26 | 	text-align: left !important;
 27 | 	font-size: 14px;
 28 | 	font-weight: bold;
 29 | 	border-bottom: 1px solid #f5f5f5;
 30 | }
 31 | .jscGrid .dataTable tr {
 32 | 	background-color: white !important;
 33 | }
 34 | .jscGrid .dataTable td {
 35 | 	font-size: 12px;
 36 | 	border-bottom: 1px solid #f5f5f5;
 37 | 	font-weight: 300;
 38 | }
 39 | </style>
 40 | 
 41 | <template>
 42 | 	<div id="mapGridWrapper">
 43 | 		<JSCharting
 44 | 			ref="myChart"
 45 | 			v-if="dataLoaded"
 46 | 			:options="chartConfig"
 47 | 			style="max-width: 740px;height: 400px;"
 48 | 		/>
 49 | 		<JSCGrid
 50 | 			ref="myGrid"
 51 | 			v-if="dataLoaded"
 52 | 			:options="gridConfig"
 53 | 			style="max-width: 635px;"
 54 | 		/>
 55 | 	</div>
 56 | </template>
 57 | 
 58 | <script lang="ts">
 59 | import { defineComponent, ref, reactive, onMounted } from 'vue';
 60 | 
 61 | import JSCharting, { JSCGrid, JSC } from 'jscharting-vue';
 62 | 
 63 | export default defineComponent({
 64 | 	name: 'chartDash',
 65 | 	props: {
 66 | 		dataLoaded: { type: Boolean, default: false }
 67 | 	},
 68 | 	setup() {
 69 | 		//The series data
 70 | 		const mapPoints: any = ref([]);
 71 | 
 72 | 		let dataLoaded = ref(false);
 73 | 
 74 | 		const paletteColors = [
 75 | 			'#6ef2f0',
 76 | 			'#00d2fa',
 77 | 			'#00aeff',
 78 | 			'#0084ff',
 79 | 			'#4c4bdf'
 80 | 		];
 81 | 
 82 | 		//Util functions
 83 | 		const mapValue = (
 84 | 			toStart: number,
 85 | 			toEnd: number,
 86 | 			fromStart: number,
 87 | 			fromEnd: number,
 88 | 			value: number
 89 | 		) =>
 90 | 			toStart +
 91 | 			((value - fromStart) / (fromEnd - fromStart)) * (toEnd - toStart);
 92 | 		const round = (v: number) => Math.round(v * 10) / 10;
 93 | 
 94 | 		const chartConfig = reactive({
 95 | 			type: 'map',
 96 | 			chartArea: { boxVisible: false, fill: 'none' },
 97 | 			margin: { right: 15 },
 98 | 			title: {
 99 | 				label: {
100 | 					text: 'US Unemployment Rate, 2020',
101 | 					style: { fontSize: '15px' }
102 | 				},
103 | 				position: 'center'
104 | 			},
105 | 			defaultPoint: {
106 | 				tooltip:
107 | 					'%name <b>{%zValue:n1}%</b><br>(<b>{%unemployed:n0}</b> people)'
108 | 			},
109 | 			palette: {
110 | 				pointValue: '{%zValue:n1}%',
111 | 				colors: paletteColors,
112 | 				colorBar: { axis: { defaultTick: { label: { text: '%value%' } } } }
113 | 			},
114 | 			toolbar: {
115 | 				items: {
116 | 					zoom: { visible: false }
117 | 				}
118 | 			}
119 | 		} as JSC.JSCChartConfig);
120 | 
121 | 		const gridConfig = reactive({
122 | 			className: 'dataTable',
123 | 			exportFile: false,
124 | 			columns: [
125 | 				{ header: 'State', value: '%state' },
126 | 				{ header: 'Unemployment Rate 2020', value: '%rate_bar%' },
127 | 				{ header: 'Trends (1976-2020)', value: '%trends_line' },
128 | 				{ header: 'Min Unemployment Rate', value: '%min_rate', align: 'right' },
129 | 				{ header: 'Max Unemployment Rate', value: '%max_rate', align: 'right' }
130 | 			]
131 | 		} as JSC.JSCGridConfig);
132 | 
133 | 		onMounted(async () => {
134 | 			const response = await fetch('./resources/laborForceUs.csv');
135 | 			const text = await response.text();
136 | 			let data = JSC.csv2Json(text, {
137 | 				coerce: function(d: any) {
138 | 					return {
139 | 						state: d.state,
140 | 						year: d.year,
141 | 						unemployment_rate:
142 | 							(parseInt(d.unemployed) * 100) / parseInt(d.labor_force),
143 | 						unemployed: parseInt(d.unemployed)
144 | 					};
145 | 				}
146 | 			});
147 | 			let mapData = data.filter(v => v.year === '2020');
148 | 			mapPoints.value = mapData.map(v => {
149 | 				return {
150 | 					map: 'US.name:' + v.state,
151 | 					z: v.unemployment_rate,
152 | 					attributes_unemployed: v.unemployed
153 | 				};
154 | 			});
155 | 			chartConfig.series = [{ points: mapPoints.value }];
156 | 
157 | 			// Create Grid Data
158 | 			let minRate = JSC.min(mapData, 'unemployment_rate');
159 | 			let maxRate = JSC.max(mapData, 'unemployment_rate');
160 | 
161 | 			gridConfig.data = JSC.nest()
162 | 				.key('state')
163 | 				.pointRollup(function(key, val) {
164 | 					const rateList = val.map(v => v.unemployment_rate);
165 | 					const rates = {
166 | 						last: rateList[rateList.length - 1],
167 | 						min: JSC.min(rateList),
168 | 						max: JSC.max(rateList)
169 | 					};
170 | 					const color =
171 | 						paletteColors[
172 | 							Math.round(mapValue(0, 4, minRate, maxRate, rates.last))
173 | 						];
174 | 					return {
175 | 						state: key,
176 | 						trends_line: `<chart type=sparkline colors="#333F89,,#00aeff" width=130 height=20 margin=3 data="${rateList.join(
177 | 							','
178 | 						)}">`,
179 | 						rate_bar: `<chart type=bar margin_right=5 verticalAlign=middle color="${color}" data=${
180 | 							rates.last
181 | 						} max=13.3>${round(rates.last)}`,
182 | 						min_rate: `${round(rates.min)}% (${1976 +
183 | 							rateList.indexOf(rates.min)})`,
184 | 						max_rate: `<span style="${
185 | 							1976 + rateList.indexOf(rates.max) === 2020
186 | 								? 'font-weight:bold; color:black;'
187 | 								: ''
188 | 						} ">${round(rates.max)} % (${1976 +
189 | 							rateList.indexOf(rates.max)})</span>`
190 | 					};
191 | 				})
192 | 				.points(data);
193 | 
194 | 			dataLoaded.value = true;
195 | 		});
196 | 		return {
197 | 			dataLoaded,
198 | 			chartConfig,
199 | 			gridConfig
200 | 		};
201 | 	},
202 | 	components: {
203 | 		JSCharting,
204 | 		JSCGrid
205 | 	}
206 | });
207 | </script>
208 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/chartDataGrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<p class="examplesDescription">
 3 | 		With one setting, you can provide a datagrid representation of your charts.
 4 | 	</p>
 5 | 	<JSCharting
 6 | 		:options="chartOptions"
 7 | 		style=" height:400px; margin: 20px auto;"
 8 | 	></JSCharting>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { defineComponent, reactive } from 'vue';
13 | import JSCharting, { JSC } from 'jscharting-vue';
14 | 
15 | export default defineComponent({
16 | 	name: 'chartDataGrid',
17 | 	components: { JSCharting },
18 | 	setup() {
19 | 		const chartOptions = reactive({
20 | 			grid: { enabled: true },
21 | 			title: { label: { text: 'Sales by quarter' } },
22 | 			xAxis: { label: { text: 'Quarters' } },
23 | 			yAxis: { formatString: 'c', label: { text: 'USD' } },
24 | 			series: [
25 | 				{
26 | 					name: 'Gross Sales',
27 | 					points: [
28 | 						{ name: 'Q1', y: 50120 },
29 | 						{ name: 'Q2', y: 53465 },
30 | 						{ name: 'Q3', y: 62165 },
31 | 						{ name: 'Q4', y: 52156 }
32 | 					]
33 | 				},
34 | 				{
35 | 					name: 'Net Sales',
36 | 					points: [
37 | 						{ name: 'Q1', y: 32654 },
38 | 						{ name: 'Q2', y: 35645 },
39 | 						{ name: 'Q3', y: 42651 },
40 | 						{ name: 'Q4', y: 30153 }
41 | 					]
42 | 				}
43 | 			]
44 | 		} as JSC.JSCChartConfig);
45 | 		return {
46 | 			chartOptions
47 | 		};
48 | 	}
49 | });
50 | </script>
51 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/circularColorBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<JSCharting
  3 | 		:options="chartOptions"
  4 | 		style="max-width: 800px;height:400px; margin: 0 auto;"
  5 | 	/>
  6 | </template>
  7 | 
  8 | <script lang="ts">
  9 | import { defineComponent, reactive } from 'vue';
 10 | import JSCharting, { JSC } from 'jscharting-vue';
 11 | 
 12 | export default defineComponent({
 13 | 	name: 'circularColorBar',
 14 | 	components: { JSCharting },
 15 | 	setup() {
 16 | 		const chartOptions = reactive({
 17 | 			legend: { visible: false },
 18 | 			defaultTooltip: { enabled: false },
 19 | 			xAxis: { spacingPercentage: 0.4 },
 20 | 			yAxis: [
 21 | 				{
 22 | 					id: 'ax1',
 23 | 					defaultTick: {
 24 | 						padding: 10,
 25 | 						enabled: false
 26 | 					},
 27 | 					customTicks: [350, 600, 700, 800, 850],
 28 | 					line: {
 29 | 						width: 10,
 30 | 
 31 | 						/*Defining the option will enable it.*/
 32 | 						breaks: {},
 33 | 
 34 | 						/*Palette is defined at series level with an ID referenced here.*/
 35 | 						color: 'smartPalette:pal1'
 36 | 					},
 37 | 					scale: { range: [350, 850] }
 38 | 				},
 39 | 				{
 40 | 					id: 'ax2',
 41 | 					scale: { range: [0, 850] },
 42 | 					defaultTick: {
 43 | 						padding: 10,
 44 | 						enabled: false
 45 | 					},
 46 | 					customTicks: [0, 300, 600, 700, 800, 850],
 47 | 					line: {
 48 | 						width: 10,
 49 | 						color: 'smartPalette:pal2'
 50 | 					}
 51 | 				}
 52 | 			],
 53 | 			defaultSeries: {
 54 | 				type: 'gauge column roundcaps',
 55 | 				shape: {
 56 | 					label: {
 57 | 						text: '%max',
 58 | 						align: 'center',
 59 | 						verticalAlign: 'middle'
 60 | 					}
 61 | 				}
 62 | 			},
 63 | 			series: [
 64 | 				{
 65 | 					type: 'column roundcaps',
 66 | 					name: 'Temperatures',
 67 | 					yAxis: 'ax1',
 68 | 					palette: {
 69 | 						id: 'pal1',
 70 | 						pointValue: '%yValue',
 71 | 						ranges: [
 72 | 							{ value: 350, color: '#FF5353' },
 73 | 							{ value: 600, color: '#FFD221' },
 74 | 							{ value: 700, color: '#77E6B4' },
 75 | 							{ value: [800, 850], color: '#21D683' }
 76 | 						]
 77 | 					},
 78 | 					shape: { label: { style: { fontSize: 28 } } },
 79 | 					points: [['x', [350, 680]]]
 80 | 				},
 81 | 				{
 82 | 					yAxis: 'ax2',
 83 | 					name: 'Temperatures',
 84 | 					palette: {
 85 | 						id: 'pal2',
 86 | 						pointValue: '{%yValue/850}',
 87 | 						colors: [
 88 | 							'#ffffd9',
 89 | 							'#edf8b0',
 90 | 							'#c7e9b4',
 91 | 							'#7fcdbb',
 92 | 							'#41b6c3',
 93 | 							'#1d91c0',
 94 | 							'#225ea8',
 95 | 							'#253494',
 96 | 							'#081d58'
 97 | 						]
 98 | 					},
 99 | 					shape: {
100 | 						label: {
101 | 							text: '%value',
102 | 							style: { fontSize: 28 }
103 | 						}
104 | 					},
105 | 					points: [['x', 320]]
106 | 				}
107 | 			]
108 | 		} as JSC.JSCChartConfig);
109 | 		return {
110 | 			chartOptions
111 | 		};
112 | 	}
113 | });
114 | </script>
115 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/circularGauge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<JSCharting
 3 | 		:options="chartOptions"
 4 | 		style="max-width: 400px;height:400px; margin: 0 auto;"
 5 | 	/>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { defineComponent, reactive } from 'vue';
10 | import JSCharting, { JSC } from 'jscharting-vue';
11 | 
12 | export default defineComponent({
13 | 	name: 'circularGauge',
14 | 	components: { JSCharting },
15 | 	setup() {
16 | 		const chartOptions = reactive({
17 | 			type: 'gauge ',
18 | 			legend: { visible: false },
19 | 			chartArea: { boxVisible: false },
20 | 			xAxis: {
21 | 				/*Used to position marker on top of axis line.*/
22 | 				scale: { range: [0, 1], invert: true }
23 | 			},
24 | 			palette: {
25 | 				pointValue: '%yValue',
26 | 				ranges: [
27 | 					{ value: 350, color: '#FF5353' },
28 | 					{ value: 600, color: '#FFD221' },
29 | 					{ value: 700, color: '#77E6B4' },
30 | 					{ value: [800, 850], color: '#21D683' }
31 | 				]
32 | 			},
33 | 			yAxis: {
34 | 				defaultTick: { padding: 13, enabled: false },
35 | 				customTicks: [600, 700, 800],
36 | 				line: {
37 | 					width: 15,
38 | 					breaks: { gap: 0.03 },
39 | 					color: 'smartPalette'
40 | 				},
41 | 				scale: { range: [350, 850] }
42 | 			},
43 | 			defaultSeries: {
44 | 				opacity: 1,
45 | 				shape: {
46 | 					label: {
47 | 						align: 'center',
48 | 						verticalAlign: 'middle'
49 | 					}
50 | 				}
51 | 			},
52 | 			series: [
53 | 				{
54 | 					type: 'marker',
55 | 					name: 'Score',
56 | 					shape: {
57 | 						label: {
58 | 							text: '%value',
59 | 							style: { fontSize: 48 }
60 | 						}
61 | 					},
62 | 					defaultPoint: {
63 | 						tooltip: '%yValue',
64 | 						marker: {
65 | 							outline: {
66 | 								width: 5,
67 | 								color: 'white'
68 | 							},
69 | 							fill: 'currentColor',
70 | 							type: 'circle',
71 | 							visible: true,
72 | 							size: 35
73 | 						}
74 | 					},
75 | 					points: [[1, 720]]
76 | 				}
77 | 			]
78 | 		} as JSC.JSCChartConfig);
79 | 		return {
80 | 			chartOptions
81 | 		};
82 | 	}
83 | });
84 | </script>
85 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/dataGrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<JSCGrid :options="gridOptions" style="	margin: 20px auto;"></JSCGrid>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent, reactive } from 'vue';
 7 | import { JSCGrid, JSC } from 'jscharting-vue';
 8 | 
 9 | export default defineComponent({
10 | 	name: 'dataGrid',
11 | 	components: { JSCGrid },
12 | 	setup() {
13 | 		const gridOptions = reactive({
14 | 			className: 'jscTable',
15 | 			data: [
16 | 				['Art', 5, 10],
17 | 				['Greg', 3, 6],
18 | 				['Olivia', 11, 8],
19 | 				['Steve', 11, 4],
20 | 				['Anna', 3, 8]
21 | 			],
22 | 			columns: [
23 | 				{ header: 'Name' },
24 | 				{ header: 'Value One' },
25 | 				{ header: 'Value Two' },
26 | 				{ header: 'Sum', value: '{%1+%2}' }
27 | 			]
28 | 		} as JSC.JSCGridConfig);
29 | 		return {
30 | 			gridOptions
31 | 		};
32 | 	}
33 | });
34 | </script>
35 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/interactiveLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<p>Two way selection binding. Use dropdown or hover a series line.</p>
  4 | 		<label>
  5 | 			Selected:
  6 | 			<select v-model="selected" @change="selectSeries">
  7 | 				<option v-for="ser in series" :value="ser.name">{{ ser.name }}</option>
  8 | 			</select>
  9 | 		</label>
 10 | 
 11 | 		<JSCharting
 12 | 			ref="myChart"
 13 | 			v-if="dataLoaded"
 14 | 			:options="chartOptions"
 15 | 			@rendered="selectSeries"
 16 |       style="height:400px;"
 17 | 		/>
 18 | 	</div>
 19 | </template>
 20 | 
 21 | <script lang="ts">
 22 | import { defineComponent, ref, reactive, onMounted } from 'vue';
 23 | import JSCharting, { JSC } from 'jscharting-vue';
 24 | 
 25 | export default defineComponent({
 26 | 	name: 'interactiveLine',
 27 | 	props: {
 28 | 		dataLoaded: { type: Boolean, default: false }
 29 | 	},
 30 | 	components: { JSCharting },
 31 | 	setup() {
 32 | 		const myChart = ref({} as JSCharting);
 33 | 		const series: any = ref([]);
 34 | 		let dataLoaded = ref(false);
 35 | 		let selected = ref('Average');
 36 | 
 37 | 		const chartInstance = () => myChart.value?.instance as JSC.Chart;
 38 | 
 39 | 		const chartOptions = reactive({
 40 | 			type: 'spline',
 41 | 			title: { label: { text: 'Average US Unemployment Rate' } },
 42 | 			defaultTooltip: { enabled: false },
 43 | 			yAxis: {
 44 | 				defaultTick: { label: { text: '%value%' } },
 45 | 				scale: { range: [2, 14] }
 46 | 			},
 47 | 			xAxis: {
 48 | 				scale: { type: 'time' },
 49 | 				formatString: 'yyyy'
 50 | 			},
 51 | 			defaultPoint: {
 52 | 				marker: {
 53 | 					visible: false,
 54 | 					size: 12
 55 | 				},
 56 | 				states: {
 57 | 					// Point hover and mute states are not necessary
 58 | 					hover: { enabled: false },
 59 | 					mute: { enabled: false }
 60 | 				},
 61 | 				events: {
 62 | 					mouseOver: function() {
 63 | 						const point = this as JSC.Point;
 64 | 						selected.value = point.series.options('name');
 65 | 						selectSeries();
 66 | 						return false;
 67 | 					}
 68 | 				},
 69 | 				focusGlow: { width: 0 }
 70 | 			},
 71 | 			legend: { visible: false },
 72 | 			defaultSeries: {
 73 | 				// Default line is translucent and desaturated
 74 | 				line: {
 75 | 					opacity: 0.2,
 76 | 					color: 'desaturate',
 77 | 					width: 1
 78 | 				},
 79 | 				states: {
 80 | 					select: {
 81 | 						// Selected line is solid, and thicker.
 82 | 						line: {
 83 | 							opacity: 1,
 84 | 							color: 'currentColor',
 85 | 							width: 3
 86 | 						}
 87 | 					},
 88 | 					// Series hover and mute states are not necessary
 89 | 					hover: { enabled: false },
 90 | 					mute: { enabled: false }
 91 | 				}
 92 | 			}
 93 | 		} as JSC.JSCChartConfig);
 94 | 
 95 | 		onMounted(async () => {
 96 | 			const response = await fetch('./resources/laborForceUs.csv');
 97 | 			const text = await response.text();
 98 | 			series.value = makeSeries(text);
 99 | 			chartOptions.series = series;
100 | 			dataLoaded.value = true;
101 | 		});
102 | 
103 | 		const selectionChanged = () => {
104 | 			selectSeries();
105 | 		};
106 | 
107 | 		// Set the selected series on the chart.
108 | 		function selectSeries(argChart?: JSC.Chart) {
109 | 			const chart = chartInstance() || argChart;
110 | 			chart?.series().each(function(s) {
111 | 				s.options({ selected: selected.value == s.name });
112 | 			});
113 | 		}
114 | 
115 | 		return {
116 | 			chartOptions,
117 | 			myChart,
118 | 			series,
119 | 			selectionChanged,
120 | 			selectSeries,
121 | 			selected,
122 | 			dataLoaded
123 | 		};
124 | 	}
125 | });
126 | 
127 | function ref2Chart(ref: any) {
128 | 	return ref.value?.instance as JSC.Chart;
129 | }
130 | 
131 | // Convert csv text to a chart series
132 | function makeSeries(csvText: string) {
133 | 	// Parse the csv text into JSON.
134 | 	const data = JSC.csv2Json(csvText, {
135 | 		coerce: function(d: any) {
136 | 			return {
137 | 				state: d.state === 'Total' ? 'Average' : d.state,
138 | 				year: d.year,
139 | 				rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
140 | 			};
141 | 		}
142 | 	}).filter(function(x) {
143 | 		return parseInt(x.year) > 1990;
144 | 	});
145 | 
146 | 	// Create a series for the chart.
147 | 	return JSC.nest()
148 | 		.key('state')
149 | 		.key('year')
150 | 		.pointRollup(function(key, val) {
151 | 			const values = val[0];
152 | 			return {
153 | 				x: '1/1/' + values.year,
154 | 				y: values.rate
155 | 			};
156 | 		})
157 | 		.series(data);
158 | }
159 | </script>
160 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/liveData.vue:
--------------------------------------------------------------------------------
  1 | <style scoped>
  2 | .liveData {
  3 | 	height: 400px;
  4 | }
  5 | </style>
  6 | 
  7 | <template>
  8 | 	<JSCharting
  9 | 		:options="chartOptions"
 10 | 		ref="myChart"
 11 | 		class="liveData"
 12 | 		@rendered="start"
 13 | 	>
 14 | 	</JSCharting>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import { defineComponent, reactive, ref } from 'vue';
 19 | import JSCharting, { JSC } from 'jscharting-vue';
 20 | 
 21 | export default defineComponent({
 22 | 	beforeUnmount: function() {
 23 | 		clearInterval(this.INTERVAL_ID);
 24 | 	},
 25 | 	name: 'liveData',
 26 | 	setup() {
 27 | 		const myChart = ref({} as JSCharting);
 28 | 		let date = new Date(2020, 0, 10).getTime();
 29 | 		let INTERVAL_ID = 0;
 30 | 		let useShift = true;
 31 | 
 32 | 		const start = function(chart: JSC.Chart) {
 33 | 			INTERVAL_ID = setInterval(function() {
 34 | 				myChart && addData(chart);
 35 | 			}, 800);
 36 | 		};
 37 | 
 38 | 		const playPause = function(val: boolean) {
 39 | 			if (val) {
 40 | 				clearInterval(INTERVAL_ID);
 41 | 			} else {
 42 | 				start(myChart.value?.instance as JSC.Chart);
 43 | 			}
 44 | 		};
 45 | 		const addData = function(chart: JSC.Chart) {
 46 | 			chart
 47 | 				.series(0)
 48 | 				.points.add(
 49 | 					{ y: Math.random() * 200, x: new Date(date) },
 50 | 					{ shift: useShift }
 51 | 				);
 52 | 			date = date + 24 * 3600000 * 2;
 53 | 		};
 54 | 
 55 | 		const chartOptions = reactive({
 56 | 			debug: true,
 57 | 			legend: { position: 'inside top right' },
 58 | 			yAxis: { formatString: 'c' },
 59 | 			defaultSeries: { type: 'line', opacity: 1 },
 60 | 			title: { label: { text: 'Data Total: %sum Average: %average' } },
 61 | 			defaultPoint: {
 62 | 				label: { text: '%yValue' },
 63 | 				marker: {
 64 | 					type: 'circle',
 65 | 					size: 11,
 66 | 					outline: { color: 'white', width: 2 }
 67 | 				}
 68 | 			},
 69 | 			xAxis: { overflow: 'hidden', scale: { type: 'time' } },
 70 | 			margin: { right: 20 },
 71 | 			animation: { duration: 400 },
 72 | 			toolbar: {
 73 | 				margin: 5,
 74 | 				items: {
 75 | 					'Shift Values': {
 76 | 						type: 'checkbox',
 77 | 						value: true,
 78 | 						tooltip:
 79 | 							'The shift option determines whether the first point in the series is removed when adding a new point.',
 80 | 						events: {
 81 | 							change: function(val: boolean) {
 82 | 								useShift = val;
 83 | 							}
 84 | 						}
 85 | 					},
 86 | 					Stop: {
 87 | 						type: 'option',
 88 | 						icon: { name: 'system/default/pause' },
 89 | 						boxVisible: true,
 90 | 						label: { text: 'Pause' },
 91 | 						events: {
 92 | 							change: function(val: boolean) {
 93 | 								playPause(val);
 94 | 							}
 95 | 						},
 96 | 						states: {
 97 | 							select: {
 98 | 								icon: { name: 'system/default/play' },
 99 | 								label: { text: 'Play' }
100 | 							}
101 | 						}
102 | 					}
103 | 				}
104 | 			},
105 | 			series: [
106 | 				{
107 | 					name: 'Purchases',
108 | 					points: [
109 | 						['1/1/2020', 29.9],
110 | 						['1/2/2020', 71.5],
111 | 						['1/3/2020', 106.4],
112 | 						['1/6/2020', 129.2],
113 | 						['1/7/2020', 144.0],
114 | 						['1/8/2020', 176.0]
115 | 					]
116 | 				}
117 | 			]
118 | 		} as JSC.JSCChartConfig);
119 | 		return {
120 | 			INTERVAL_ID,
121 | 			date,
122 | 			chartOptions,
123 | 			myChart,
124 | 			start
125 | 		};
126 | 	},
127 | 	components: {
128 | 		JSCharting
129 | 	}
130 | });
131 | </script>
132 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/mapChoropleth.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .mapChart {
  3 | 	height: 500px;
  4 | 	max-width: 700px;
  5 | }
  6 | </style>
  7 | 
  8 | <template>
  9 | 	<JSCharting
 10 | 		:options="mapOptions"
 11 | 		v-if="dataLoaded"
 12 | 		class="mapChart"
 13 | 	></JSCharting>
 14 | </template>
 15 | 
 16 | <script lang="ts">
 17 | import { defineComponent, reactive, ref, onMounted } from 'vue';
 18 | import JSCharting, { JSC } from 'jscharting-vue';
 19 | 
 20 | export default defineComponent({
 21 | 	name: 'mapChoropleth',
 22 | 	props: {
 23 | 		dataLoaded: { type: Boolean, default: false }
 24 | 	},
 25 | 	setup() {
 26 | 		const series: any = ref([]);
 27 | 		let dataLoaded = ref(false);
 28 | 		const mapOptions = reactive({
 29 | 			type: 'map solid',
 30 | 			title: {
 31 | 				label: {
 32 | 					text:
 33 | 						'Percentage of population lacking access to basic drinking water',
 34 | 					style: { fontSize: 14 }
 35 | 				},
 36 | 				position: 'center'
 37 | 			},
 38 | 			mapping: {
 39 | 				projection: {
 40 | 					type: 'lambertConformalConic',
 41 | 					parallels: [10, 9]
 42 | 				}
 43 | 			},
 44 | 			defaultPoint: {
 45 | 				tooltip: '%name <b>{%zValue:n1}%</b>',
 46 | 				outline: { color: 'white', width: 0.5 },
 47 | 				states: {
 48 | 					hover: {
 49 | 						outline: { color: '#7a7a7a' }
 50 | 					}
 51 | 				},
 52 | 				focusGlow: { width: 2 }
 53 | 			},
 54 | 			legend: { position: 'bottom' },
 55 | 
 56 | 			palette: {
 57 | 				pointValue: p => p.options('z'),
 58 | 				colors: [
 59 | 					'#ff3d00',
 60 | 					'#ff7213',
 61 | 					'#ffa726',
 62 | 					'#ffc041',
 63 | 					'#ffd85b',
 64 | 					'#fff176',
 65 | 					'#eaee87',
 66 | 					'#d6eb99',
 67 | 					'#c1e8aa',
 68 | 					'#6ec1bb',
 69 | 					'#1b9acb'
 70 | 				].reverse(),
 71 | 				colorBar: {
 72 | 					width: 8,
 73 | 					axis: {
 74 | 						crosshair: {
 75 | 							label: { text: '{%value:n1}%' },
 76 | 							outline: { width: 0 }
 77 | 						},
 78 | 						defaultTick: { label: { text: '%value%' } }
 79 | 					}
 80 | 				}
 81 | 			}
 82 | 		} as JSC.JSCChartConfig);
 83 | 
 84 | 		onMounted(async () => {
 85 | 			const response = await fetch(
 86 | 				'./resources/access-to-drinking-water-by-country.csv'
 87 | 			);
 88 | 			const text = await response.text();
 89 | 
 90 | 			const mapData = JSC.csv2Json(text);
 91 | 
 92 | 			const points = JSC.nest()
 93 | 				.key('country_code')
 94 | 				.pointRollup(function(key, val) {
 95 | 					let values = val[0];
 96 | 					return {
 97 | 						map: values.country_code,
 98 | 						z: 100 - values.value
 99 | 					};
100 | 				})
101 | 				.points(mapData);
102 | 			series.value = [{ points }];
103 | 			mapOptions.series = series;
104 | 			dataLoaded.value = true;
105 | 		});
106 | 
107 | 		return {
108 | 			mapOptions,
109 | 			dataLoaded
110 | 		};
111 | 	},
112 | 	components: {
113 | 		JSCharting
114 | 	}
115 | });
116 | </script>
117 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/masterDetail.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .chartA {
  3 | 	max-width: 700px;
  4 | 	height: 250px;
  5 | 	margin: 0 auto;
  6 | }
  7 | 
  8 | .chartB {
  9 | 	max-width: 700px;
 10 | 	height: 450px;
 11 | 	margin: 0 auto;
 12 | }
 13 | </style>
 14 | 
 15 | <template>
 16 | 	<div>
 17 | 		<JSCharting
 18 | 			ref="chartA"
 19 | 			v-if="dataLoaded"
 20 | 			:options="configA"
 21 | 			class="chartA"
 22 | 		/>
 23 | 		<JSCharting
 24 | 			ref="chartB"
 25 | 			v-if="dataLoaded"
 26 | 			:options="configB"
 27 | 			class="chartB"
 28 | 		/>
 29 | 	</div>
 30 | </template>
 31 | 
 32 | <script lang="ts">
 33 | import { defineComponent, ref, reactive, onMounted } from 'vue';
 34 | import JSCharting, { JSC } from 'jscharting-vue';
 35 | 
 36 | export default defineComponent({
 37 | 	name: 'masterDetail',
 38 | 	props: {
 39 | 		dataLoaded: { type: Boolean, default: false }
 40 | 	},
 41 | 	setup() {
 42 | 		const initialView = [1990, 2015];
 43 | 
 44 | 		//Chart references
 45 | 		const chartA = ref({} as JSCharting);
 46 | 		const chartB = ref({} as JSCharting);
 47 | 
 48 | 		//The series data
 49 | 		const series: any = ref([]);
 50 | 
 51 | 		let dataLoaded = ref(false);
 52 | 
 53 | 		const configA = reactive({
 54 | 			debug: true,
 55 | 			title: { label: { text: 'Births to Unmarried Women by Age Group' } },
 56 | 			animation: false,
 57 | 			legend: {
 58 | 				template: '%icon %name',
 59 | 				position: 'bottom'
 60 | 			},
 61 | 			defaultPoint: { marker: { type: 'none' } },
 62 | 			defaultSeries: { mouseTracking: { enabled: false } },
 63 | 			yAxis: {
 64 | 				alternateGridFill: 'none',
 65 | 				label: { text: 'Number of births' }
 66 | 			},
 67 | 			xAxis: {
 68 | 				formatString: 'd',
 69 | 				label: { text: 'Year' },
 70 | 				markers: [
 71 | 					{
 72 | 						value: initialView,
 73 | 						legendEntry: { visible: false }
 74 | 					}
 75 | 				]
 76 | 			},
 77 | 			toolbar: {
 78 | 				items: {
 79 | 					export: { visible: false },
 80 | 					slider: {
 81 | 						position: 'inside top',
 82 | 						type: 'range',
 83 | 						label: { text: '1940-2015' },
 84 | 						visible: true,
 85 | 						width: 595,
 86 | 						value: initialView,
 87 | 						min: 1940,
 88 | 						max: 2015,
 89 | 						throttle: 6,
 90 | 						events: {
 91 | 							change: function(range: any) {
 92 | 								const chartDetail = chartB.value?.instance as JSC.Chart,
 93 | 									chart = chartA.value?.instance as JSC.Chart;
 94 | 								//Update marker position on main chart.
 95 | 								if (chart && chartDetail) {
 96 | 									chart
 97 | 										.axes('x')
 98 | 										.markers(0)
 99 | 										.options({ value: range });
100 | 									//Update details chart zoom
101 | 									chartDetail.axes('x').zoom(range);
102 | 								}
103 | 							}
104 | 						}
105 | 					}
106 | 				}
107 | 			},
108 | 			series: series.value
109 | 		} as JSC.JSCChartConfig);
110 | 
111 | 		const configB = reactive({
112 | 			title: { label: { text: 'Detail' } },
113 | 			animation: false,
114 | 			debug: true,
115 | 			legend: { visible: false },
116 | 			defaultPoint: {
117 | 				marker: { type: 'none' },
118 | 				tooltip: '%seriesName %icon %yValue'
119 | 			},
120 | 			yAxis: {
121 | 				alternateGridFill: 'none',
122 | 				label: { text: 'Number of births' }
123 | 			},
124 | 			xAxis: {
125 | 				crosshair: { enabled: true },
126 | 				formatString: 'd',
127 | 				label: { text: 'Year' }
128 | 			},
129 | 			series: series.value
130 | 		} as JSC.JSCChartConfig);
131 | 
132 | 		onMounted(async () => {
133 | 			const response = await fetch(
134 | 				'https://data.cdc.gov/resource/fvae-a8ai.csv'
135 | 			);
136 | 			const text = await response.text();
137 | 			series.value = JSC.nest()
138 | 				.key('age_group')
139 | 				.key('year')
140 | 				.rollup('birth_number')
141 | 				.series(JSC.csv2Json(text));
142 | 			configA.series = series;
143 | 			configB.series = series;
144 | 			dataLoaded.value = true;
145 | 		});
146 | 		return {
147 | 			dataLoaded,
148 | 			configA,
149 | 			configB,
150 | 			chartA,
151 | 			chartB
152 | 		};
153 | 	},
154 | 	methods: {},
155 | 	components: {
156 | 		JSCharting
157 | 	}
158 | });
159 | </script>
160 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/methodUpdate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<JSCharting :options="chartOptions" style="height:400px;"></JSCharting>
 4 | 		<button v-on:click="updateChartOptions">Update Chart Options Data</button>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { defineComponent, reactive } from 'vue';
10 | import JSCharting, { JSC } from 'jscharting-vue';
11 | 
12 | export default defineComponent({
13 | 	name: 'methodUpdate',
14 | 	setup() {
15 | 		const randomPoints = () => {
16 | 			let points = [];
17 | 			for (let i = 1; i < 12; i++) {
18 | 				points.push({
19 | 					id: 'p' + i,
20 | 					x: `1/${i * 2}/2020`,
21 | 					y: Math.random() * 10
22 | 				});
23 | 			}
24 | 			return points;
25 | 		};
26 | 
27 | 		const chartOptions = reactive({
28 | 			type: 'line spline',
29 | 			title: { label: { text: 'Series updates' } },
30 | 			legend: {
31 | 				position: 'inside top right'
32 | 			},
33 | 			xAxis: { scale: { type: 'time' } },
34 | 			defaultPoint: {
35 | 				marker: {
36 | 					outline: {
37 | 						width: 2,
38 | 						color: 'currentColor'
39 | 					},
40 | 					fill: 'white'
41 | 				}
42 | 			},
43 | 			series: [
44 | 				{
45 | 					name: 'Purchases',
46 | 					points: randomPoints()
47 | 				}
48 | 			]
49 | 		} as JSC.JSCChartConfig);
50 | 
51 | 		function updateChartOptions() {
52 | 			chartOptions.series = [
53 | 				{
54 | 					name: 'Purchases',
55 | 					points: randomPoints()
56 | 				}
57 | 			];
58 | 		}
59 | 		return {
60 | 			chartOptions,
61 | 			updateChartOptions
62 | 		};
63 | 	},
64 | 	components: {
65 | 		JSCharting
66 | 	}
67 | });
68 | </script>
69 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/microchartFast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<p>
 3 | 		The JSCLabel chart is a simple string based generator that creates simple
 4 | 		SVG charts very quickly.
 5 | 	</p>
 6 | 	<p>
 7 | 		This chart is created with the string
 8 | 		<i>&lt;chart type="column" data=12,23,... width=800 height=300&gt;</i>
 9 | 	</p>
10 | 	<p>
11 | 		Microchart string reference:
12 | 		<a href="https://jscharting.com/tutorials/types/js-microcharts/"
13 | 			>MicroCharts</a
14 | 		>
15 | 	</p>
16 | 	<JSCLabel :options="labelConfig"></JSCLabel>
17 | </template>
18 | 
19 | <script lang="ts">
20 | import { defineComponent, ref } from 'vue';
21 | 
22 | import { JSCLabel } from 'jscharting-vue';
23 | 
24 | export default defineComponent({
25 | 	name: 'microchartFast',
26 | 	beforeUnmount: function() {
27 | 		clearInterval(this.INTERVAL_ID);
28 | 	},
29 | 	setup() {
30 | 		let INTERVAL_ID = 0;
31 | 		let mySeed = 0;
32 | 		const makeYData = (seed: number, len = 100) => {
33 | 			let list = [];
34 | 			for (let i = 0, iLen = len; i < iLen; i++) {
35 | 				list.push(Math.sin(seed + i * 0.1));
36 | 			}
37 | 			return list.join(',');
38 | 		};
39 | 
40 | 		let labelConfig = ref(``);
41 | 
42 | 		const updateChart = () => {
43 | 			labelConfig.value = `<chart type="column" data=${makeYData(
44 | 				mySeed
45 | 			)} width=800 height=300>`;
46 | 			mySeed += 0.1;
47 | 		};
48 | 
49 | 		INTERVAL_ID = setInterval(updateChart, 10);
50 | 
51 | 		return {
52 | 			labelConfig,
53 | 			INTERVAL_ID
54 | 		};
55 | 	},
56 | 	components: {
57 | 		JSCLabel
58 | 	}
59 | });
60 | </script>
61 | 


--------------------------------------------------------------------------------
/examples-vue3/src/components/simpleLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<JSCharting :options="chartOptions" style="max-width: 800px;height:400px;" />
  3 | </template>
  4 | 
  5 | <script lang="ts">
  6 | import { defineComponent, reactive } from 'vue';
  7 | import JSCharting, { JSC } from 'jscharting-vue';
  8 | 
  9 | export default defineComponent({
 10 | 	name: 'simpleLine',
 11 | 	components: { JSCharting },
 12 | 	setup() {
 13 | 		const chartOptions = reactive({
 14 | 			legend: { visible: false },
 15 | 			title: { label: { text: 'Cost over time' } },
 16 | 			yAxis: [
 17 | 				/* Main axis is defined first. */
 18 | 				{ formatString: 'c' },
 19 | 				/* Secondary axis will sync with main axis by default. */
 20 | 				{
 21 | 					id: 'secondY',
 22 | 					orientation: 'opposite',
 23 | 					line: { color: '#e2e2e2' },
 24 | 					defaultTick: {
 25 | 						enabled: false,
 26 | 						gridLine: { visible: false }
 27 | 					}
 28 | 				}
 29 | 			],
 30 | 			xAxis: {
 31 | 				crosshair: { enabled: true },
 32 | 				scale: { type: 'time' }
 33 | 			},
 34 | 			defaultSeries: {
 35 | 				type: 'line',
 36 | 				defaultPoint: { marker: { visible: false } },
 37 | 				lastPoint: {
 38 | 					label: { text: '<b>%seriesName</b>' },
 39 | 					yAxisTick: {
 40 | 						axisId: 'secondY',
 41 | 						label: { text: '%yValue' }
 42 | 					}
 43 | 				}
 44 | 			},
 45 | 			series: [
 46 | 				{
 47 | 					name: 'Purchases',
 48 | 					points: [
 49 | 						['1/1/2020', 29.9],
 50 | 						['2/1/2020', 97.5],
 51 | 						['3/1/2020', 110.4],
 52 | 						['4/1/2020', 129.2],
 53 | 						['5/1/2020', 144.0],
 54 | 						['6/1/2020', 176.0],
 55 | 						['7/1/2020', 182.0],
 56 | 						['8/1/2020', 186.0],
 57 | 						['9/1/2020', 181.0],
 58 | 						['10/1/2020', 178.0],
 59 | 						['11/1/2020', 184.0],
 60 | 						['12/1/2020', 176.0]
 61 | 					]
 62 | 				},
 63 | 				{
 64 | 					name: 'Taxes',
 65 | 					points: [
 66 | 						['1/1/2020', 86.9],
 67 | 						['2/1/2020', 79.5],
 68 | 						['3/1/2020', 95.4],
 69 | 						['4/1/2020', 97.2],
 70 | 						['5/1/2020', 123.0],
 71 | 						['6/1/2020', 111.0],
 72 | 						['7/1/2020', 122.0],
 73 | 						['8/1/2020', 135.0],
 74 | 						['9/1/2020', 140.0],
 75 | 						['10/1/2020', 139.0],
 76 | 						['11/1/2020', 135.0],
 77 | 						['12/1/2020', 132.0]
 78 | 					]
 79 | 				},
 80 | 				{
 81 | 					name: 'Supplies',
 82 | 					points: [
 83 | 						['1/1/2020', 129.9],
 84 | 						['2/1/2020', 111.5],
 85 | 						['3/1/2020', 66.4],
 86 | 						['4/1/2020', 29.2],
 87 | 						['5/1/2020', 88.0],
 88 | 						['6/1/2020', 102.0],
 89 | 						['7/1/2020', 82.0],
 90 | 						['8/1/2020', 75.0],
 91 | 						['9/1/2020', 162.0],
 92 | 						['10/1/2020', 110.0],
 93 | 						['11/1/2020', 90.0],
 94 | 						['12/1/2020', 85.0]
 95 | 					]
 96 | 				},
 97 | 				{
 98 | 					name: 'Rent',
 99 | 					points: [
100 | 						['1/1/2020', 56.9],
101 | 						['2/1/2020', 56.5],
102 | 						['3/1/2020', 56.4],
103 | 						['4/1/2020', 56.2],
104 | 						['5/1/2020', 75.0],
105 | 						['6/1/2020', 56.0],
106 | 						['7/1/2020', 56.0],
107 | 						['8/1/2020', 56.0],
108 | 						['9/1/2020', 56.0],
109 | 						['10/1/2020', 67.0],
110 | 						['11/1/2020', 67.0],
111 | 						['12/1/2020', 67.0]
112 | 					]
113 | 				}
114 | 			]
115 | 		} as JSC.JSCChartConfig);
116 | 		return {
117 | 			chartOptions
118 | 		};
119 | 	}
120 | });
121 | </script>
122 | 


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


--------------------------------------------------------------------------------
/examples-vue3/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/examples-vue3/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/examples-vue3/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 2 | const path = require('path');
 3 | 
 4 | module.exports = {
 5 | 	publicPath: process.env.NODE_ENV === 'production'
 6 | 		? '/jscharting-vue-examples/'
 7 | 		: '/',
 8 | 	configureWebpack: {
 9 | 		plugins: [
10 | 			new CopyWebpackPlugin([
11 | 				{
12 | 					from: path.join(__dirname, 'node_modules/jscharting/dist/'),
13 | 					to: path.join(__dirname, 'dist/assets/jscharting/'),
14 | 					ignore: ['jscharting.*']
15 | 				}
16 | 			])
17 | 		]
18 | 	}
19 | };
20 | 


--------------------------------------------------------------------------------
/examples/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | /public/assets


--------------------------------------------------------------------------------
/examples/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	presets: ['@vue/cli-plugin-babel/preset']
3 | };
4 | 


--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "jscharting-vue-examples",
 3 | 	"version": "1.4.0",
 4 | 	"description": "Examples using the JSCharting plugin for Vue.js.",
 5 | 	"private": true,
 6 | 	"scripts": {
 7 | 		"start": "vue-cli-service serve",
 8 | 		"serve": "vue-cli-service serve",
 9 | 		"build": "vue-cli-service build"
10 | 	},
11 | 	"author": "JSCharting <support@jscharting.com> (https://jscharting.com/support.htm)",
12 | 	"bugs": {
13 | 		"email": "support@jscharting.com"
14 | 	},
15 | 	"license": "jscharting.com/store/",
16 | 	"dependencies": {
17 | 		"core-js": "^3.8.3",
18 | 		"jscharting-vue": "^2.4.0",
19 | 		"vue": "^2.6.10"
20 | 	},
21 | 	"devDependencies": {
22 | 		"@vue/cli-plugin-babel": "^4.5.11",
23 | 		"@vue/cli-service": "^4.5.11",
24 | 		"copy-webpack-plugin": "^5.1.2",
25 | 		"vue-template-compiler": "^2.6.12"
26 | 	},
27 | 	"peerDependencies": {
28 | 		"vue": "^2.6.10"
29 | 	},
30 | 	"browserslist": [
31 | 		"> 1%",
32 | 		"last 2 versions"
33 | 	]
34 | }
35 | 


--------------------------------------------------------------------------------
/examples/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jscharting/jscharting-vue/9c1f4a8ba8e0e8d3c15c084bad65900468da87fa/examples/public/favicon.ico


--------------------------------------------------------------------------------
/examples/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 | 		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 | 		<title>JavaScript chart plugin for Vue.js | JSCharting</title>
 9 | 	</head>
10 | 	<body>
11 | 		<noscript>
12 | 			<strong
13 | 				>We're sorry but jscharting-vue doesn't work properly without
14 | 				JavaScript enabled. Please enable it to continue.</strong
15 | 			>
16 | 		</noscript>
17 | 		<div id="app"></div>
18 | 		<!-- built files will be auto injected -->
19 | 	</body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/examples/public/jsc-vue-logo.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 204 56" height="56" viewBox="0 0 204 56" width="204" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#4a4949"/><stop offset="1" stop-color="#666565"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="8.35" x2="8.35" xlink:href="#a" y1="36.6" y2="4.6606"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="27.6" x2="27.6" xlink:href="#a" y1="36.612" y2="4.0193"/><linearGradient id="d"><stop offset="0" stop-color="#0d48a1"/><stop offset="1" stop-color="#20ade2"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="81.5" x2="81.5" xlink:href="#d" y1="35.8367" y2="3.6367"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="54.2632" x2="54.2632" xlink:href="#d" y1="36.6125" y2="10.3345"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="105.95" x2="105.95" xlink:href="#d" y1="36.58" y2="12.1256"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="126.2" x2="126.2" xlink:href="#d" y1="35.8396" y2="12.1456"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="140.55" x2="140.55" xlink:href="#d" y1="35.8367" y2="3.996"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="151.4" x2="151.4" xlink:href="#d" y1="35.8367" y2="12.1957"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="167.4505" x2="167.4505" xlink:href="#d" y1="35.8367" y2="12.1701"/><linearGradient id="l" gradientUnits="userSpaceOnUse" x1="192" x2="192" xlink:href="#d" y1="44.87" y2="12.0738"/><path d="m10.6 28.8s.2 2.1-1.9 2.1c-2.4 0-4.3-2.8-4.3-2.8l-4.4 4s3.7 4.5 8.8 4.5c5.4 0 7.9-3.5 7.9-5.8v-26.1h-6.1z" fill="url(#b)"/><path d="m25.5 13.5c-1.5-1.6 2.1-6.8 7.3-.5l4.2-4s-3.8-5-9.1-5c-6.2 0-10.9 7-7.7 11.3 4.1 5.4 11.3 9.4 11.3 12.2 0 1.6-.9 3.2-3.1 3.2-4.6 0-5.6-4-5.6-4l-5 3s3.4 6.8 9.6 6.8 10-2.9 10-9.6c0-4.7-9.3-10.6-11.9-13.4z" fill="url(#c)"/><path d="m53.1 0c-5.1-.2-11.3 4.7-11.3 4.7l11.8 11.6z" fill="#1faae0"/><path d="m56.3 2.3-.6 16.2 6.8-14.5s-2.1-1.4-6.2-1.7z" fill="#0e4da4"/><path d="m64.4 6-2.7 4.8s3.9 2.5 3.9 2.9 3.9-3.9 3.9-3.9-3.5-3.5-5.1-3.8z" fill="#1d9fd9"/><path d="m83.2 12.2c-3.2 0-6 2.5-6.4 2.8v-11.4h-5.6v32.2h6s0-13.7 0-14.3c.1-2.1 2.1-4.1 4.7-4.1 2.5 0 3.9 2.5 4 4.3v14h5.9v-16s-.2-7.6-8.6-7.5z" fill="url(#e)"/><path d="m52.2 30.5c-11.7-4.5-5.5-16.8-5.5-16.8l-4.3-3.5c-7.5 10.3-1.4 23.4 7.6 25.6 13.4 3.4 19.5-5.4 19.5-5.4l-3.9-3.8c-4.5 3.8-9.1 5.6-13.4 3.9z" fill="url(#f)"/><path d="m111.9 15c0-.6-2.6-2.8-7.8-2.9-3.8-.1-10.1 4.2-10.1 10.8 0 10.7 7 13.6 11.2 13.6s6.7-3.1 6.7-3.1v2.3h6v-23.1h-6zm-6 16.2c-2.8 0-6.8-2-6.5-7.7.2-4.2 3.5-6.2 6.5-6.2 3.6 0 6.6 2.5 6.6 7.1 0 5.7-4.9 6.8-6.6 6.8z" fill="url(#g)"/><path d="m124.9 15.2v-2.5h-4.9v23.1h5.8v-12.3c.1-5.9 2.7-7.2 5-5.9l1.6-5c0 .1-3.7-2.2-7.5 2.6z" fill="url(#h)"/><path d="m143.1 4h-5.9v8.8h-2.8v4.7h2.8v18.3h6v-18.3h3.5v-4.7h-3.5z" fill="url(#i)"/><path d="m148.5 12.2h5.8v23.6h-5.8z" fill="url(#j)"/><path d="m162.9 14.9v-2.4h-5.6v23.2h5.7v-12.7c-.1-7.5 9.5-7.8 9.2-1l-.2 13.7h5.6s0-12.4 0-16.5c.1-6-7.2-10-14.7-4.3z" fill="url(#k)"/><path d="m198.3 12.7v2.7s-2.5-3.3-7.4-3.3c-5.4 0-11.2 4.3-10.7 13.4.4 7.5 11.1 14.6 17.9 7.3 0 0 1.9 7-6.1 7-4.9 0-5.7-2.1-5.7-2.1h-6.2c2 8.1 14.9 8.9 20 5 4.1-3.1 3.6-6.8 3.8-10v-19.9zm-5.9 17.9c-2.5 0-6.5-1.4-6.5-6.6 0-4.9 3.7-6.5 6.2-6.5 3.3 0 6.6 1.7 6.6 6.8-.1 4.6-3.8 6.3-6.3 6.3z" fill="url(#l)"/><g fill="#666565"><path d="m106 45v-4.2h-.8v-1h.8v-.4c0-.6.2-1.1.5-1.4s.8-.5 1.4-.5c.2 0 .4 0 .7.1v1.1c-.1 0-.3 0-.4 0-.5 0-.8.3-.8.8v.4h1v1h-1v4.2z"/><path d="m108.8 42.3c0-.5.1-1 .3-1.4s.5-.7.9-1c.4-.2.8-.3 1.3-.3.7 0 1.3.2 1.7.7.5.4.7 1 .8 1.8v.4c0 .8-.2 1.5-.7 2s-1.1.7-1.8.7-1.4-.2-1.8-.7c-.5-.6-.7-1.3-.7-2.2zm1.4.1c0 .5.1.9.3 1.2s.5.4.8.4.6-.1.8-.4.3-.7.3-1.3c0-.5-.1-.9-.3-1.1-.2-.3-.5-.4-.8-.4s-.6.1-.8.4c-.2.2-.3.7-.3 1.2z"/><path d="m117.4 41.1c-.2 0-.4 0-.5 0-.5 0-.9.2-1.1.5v3.5h-1.4v-5.3h1.3v.6c.3-.5.7-.7 1.2-.7.2 0 .3 0 .4.1z"/><path d="m142.1 49 2.9-9.6h2.9l-4.5 12.8h-2.8l-4.4-12.8h2.9z"/><path d="m153.9 51.2c-.6.8-1.5 1.1-2.6 1.1-1 0-1.8-.3-2.3-.9s-.8-1.4-.8-2.6v-6.2h2.5v6.2c0 1 .5 1.5 1.4 1.5s1.5-.3 1.8-.9v-6.7h2.5v9.5h-2.4z"/><path d="m162.2 52.3c-1.4 0-2.5-.4-3.4-1.3s-1.3-2-1.3-3.4v-.2c0-1 .2-1.8.6-2.6s.9-1.3 1.6-1.7 1.4-.6 2.3-.6c1.3 0 2.3.4 3.1 1.2.7.8 1.1 2 1.1 3.5v1h-6.1c.1.6.3 1.1.7 1.5s.9.6 1.6.6c1 0 1.7-.4 2.3-1.1l1.2 1.4c-.4.5-.9 1-1.5 1.3s-1.4.4-2.2.4zm-.2-7.8c-.5 0-.9.2-1.2.5s-.5.8-.6 1.5h3.5v-.2c0-.6-.2-1-.5-1.3s-.7-.5-1.2-.5z"/><path d="m167.3 50.9c0-.4.1-.7.4-1s.6-.4 1-.4.8.1 1 .4c.3.3.4.6.4 1s-.1.7-.4 1-.6.4-1 .4-.8-.1-1-.4c-.3-.3-.4-.6-.4-1z"/><path d="m174.6 42.6v10c0 1-.3 1.9-.8 2.4-.6.6-1.4.9-2.4.9-.4 0-.9 0-1.3-.1v-2c.3.1.6.1.8.1.8 0 1.2-.4 1.2-1.2v-10h2.5zm-2.7-2.4c0-.4.1-.7.4-.9s.6-.4 1-.4.8.1 1 .4c.3.2.4.6.4.9 0 .4-.1.7-.4.9s-.6.4-1 .4-.8-.1-1-.4-.4-.5-.4-.9z"/><path d="m181.3 49.5c0-.3-.2-.6-.5-.7-.3-.2-.8-.3-1.5-.5-2.3-.5-3.4-1.4-3.4-2.9 0-.8.3-1.5 1.1-2.1.7-.6 1.6-.8 2.7-.8 1.2 0 2.2.3 2.9.9s1.1 1.3 1.1 2.2h-2.5c0-.4-.1-.7-.4-.9-.2-.2-.6-.4-1.1-.4-.4 0-.8.1-1 .3s-.4.4-.4.7.1.5.4.7.7.3 1.3.4 1.2.3 1.6.4c1.3.5 2 1.3 2 2.6 0 .9-.4 1.6-1.1 2.1s-1.7.8-2.9.8c-.8 0-1.5-.1-2.1-.4s-1.1-.7-1.5-1.2-.5-1-.5-1.6h2.4c0 .5.2.8.5 1s.7.4 1.2.4.9-.1 1.1-.3c.5-.1.6-.4.6-.7z"/><path d="m132.1 38.9-.3.5-4.9 8.6-.4.6-.4-.6-4.9-8.6-.3-.5h-3l8.6 15 8.6-15z"/><path d="m122 38.9 4.5 7.9 4.5-7.9h-2.8l-1.7 3.1-1.7-3.1z"/></g></svg>


--------------------------------------------------------------------------------
/examples/public/resources/access-to-drinking-water-by-country.csv:
--------------------------------------------------------------------------------
  1 | country_name,country_code,value
  2 | Afghanistan,AF,67.06462342
  3 | Albania,AL,91.03922767
  4 | Algeria,DZ,93.55588814
  5 | Andorra,AD,99.99999628
  6 | Angola,AO,55.84290487
  7 | Antigua and Barb.,AG,96.73918628
  8 | Argentina,AR,99.07837465
  9 | Armenia,AM,99.91337654
 10 | Aruba,AW,97.86902338
 11 | Australia,AU,99.9699356
 12 | Austria,AT,100
 13 | Azerbaijan,AZ,91.38573994
 14 | Bahamas,BS,98.8869605
 15 | Bahrain,BH,100
 16 | Bangladesh,BD,97.01600557
 17 | Barbados,BB,98.49444758
 18 | Belarus,BY,96.48397119
 19 | Belgium,BE,100
 20 | Belize,BZ,97.99257979
 21 | Benin,BJ,66.41472534
 22 | Bermuda,BM,99.90314002
 23 | Bhutan,BT,97.23338334
 24 | Bolivia,BO,92.84873518
 25 | Bosnia and Herz.,BA,96.14235609
 26 | Botswana,BW,90.33771336
 27 | Brazil,BR,98.19339267
 28 | British Virgin Is.,VG,99.86438356
 29 | Brunei,BN,99.90000909
 30 | Bulgaria,BG,99.10834282
 31 | Burkina Faso,BF,47.88812734
 32 | Burundi,BI,60.83054892
 33 | Cambodia,KH,78.51065693
 34 | Cameroon,CM,60.38486395
 35 | Canada,CA,99.43624408
 36 | Cape Verde,CV,87.08320801
 37 | Cayman Is.,KY,96.125
 38 | Central African Rep.,CF,46.33375843
 39 | Chad,TD,38.70059943
 40 | Chile,CL,99.8327912
 41 | China,CN,92.84613551
 42 | Colombia,CO,97.30010961
 43 | Comoros,KM,80.16751687
 44 | Congo,CG,73.21776097
 45 | Costa Rica,CR,99.70151391
 46 | Côte d'Ivoire,CI,72.86894644
 47 | Croatia,HR,99.58666656
 48 | Cuba,CU,95.32758231
 49 | Curaçao,CW,99.49775185
 50 | Cyprus,CY,99.61328615
 51 | Czech Rep.,CZ,99.8802588
 52 | Dem. Rep. Congo,CD,43.24332204
 53 | Dem. Rep. Korea,KP,94.51245282
 54 | Denmark,DK,99.99999894
 55 | Djibouti,DJ,75.63230768
 56 | Dominica,DM,96.5
 57 | Dominican Rep.,DO,96.69022475
 58 | Ecuador,EC,93.99453654
 59 | Egypt,EG,99.10573046
 60 | El Salvador,SV,97.38837497
 61 | Eq. Guinea,GQ,64.66581781
 62 | Eritrea,ER,51.84971842
 63 | Estonia,EE,99.71282684
 64 | Ethiopia,ET,41.05995213
 65 | Fiji,FJ,93.79091928
 66 | Finland,FI,100
 67 | France,FR,100
 68 | Gabon,GA,85.77100366
 69 | Gambia,GM,77.99156682
 70 | Georgia,GE,98.39443935
 71 | Germany,DE,100
 72 | Ghana,GH,81.45338968
 73 | Greece,GR,100
 74 | Greenland,GL,99.99999747
 75 | Grenada,GD,95.62865044
 76 | Guam,GU,99.6952
 77 | Guatemala,GT,94.19058074
 78 | Guinea,GN,61.89872308
 79 | Guinea-Bissau,GW,66.63441423
 80 | Guyana,GY,95.53974768
 81 | Haiti,HT,65.46682593
 82 | Honduras,HN,94.82710944
 83 | Hong Kong,HK,100
 84 | Hungary,HU,99.99999749
 85 | Iceland,IS,99.99999943
 86 | India,IN,92.67464257
 87 | Indonesia,ID,89.34401223
 88 | Iran,IR,95.24454488
 89 | Iraq,IQ,96.53347833
 90 | Ireland,IE,97.39454461
 91 | Isle of Man,IM,99.075
 92 | Israel,IL,100
 93 | Italy,IT,99.44273388
 94 | Jamaica,JM,90.64843618
 95 | Japan,JP,99.01020833
 96 | Jordan,JO,98.93722265
 97 | Kazakhstan,KZ,95.62750722
 98 | Kenya,KE,58.91633339
 99 | Korea,KR,99.787655
100 | Kuwait,KW,100
101 | Kyrgyzstan,KG,87.4559029
102 | Lao PDR,LA,82.06189686
103 | Latvia,LV,98.62618237
104 | Lebanon,LB,92.6
105 | Lesotho,LS,68.64993758
106 | Liberia,LR,72.94803095
107 | Libya,LY,98.52894737
108 | Liechtenstein,LI,100
109 | Lithuania,LT,97.5420681
110 | Luxembourg,LU,99.88960319
111 | Macao,MO,100
112 | Macedonia,MK,93.14146285
113 | Madagascar,MG,54.40398164
114 | Malawi,MW,68.83187676
115 | Malaysia,MY,96.69593891
116 | Mali,ML,78.26082958
117 | Malta,MT,100
118 | Mauritania,MR,70.69618765
119 | Mexico,MX,99.31821889
120 | Moldova,MD,89.05565265
121 | Monaco,MC,100
122 | Mongolia,MN,83.31311501
123 | Montenegro,ME,97.04205011
124 | Morocco,MA,86.77851266
125 | Mozambique,MZ,55.69397562
126 | Myanmar,MM,81.77404853
127 | Namibia,NA,82.54109887
128 | Nauru,NR,99.48493442
129 | Nepal,NP,88.81224952
130 | Netherlands,NL,99.99999928
131 | New Caledonia,NC,99.32859759
132 | New Zealand,NZ,100
133 | Nicaragua,NI,81.52476354
134 | Niger,NE,50.27306506
135 | Nigeria,NG,71.3766307
136 | Norway,NO,100
137 | Oman,OM,91.93807842
138 | Pakistan,PK,91.46545073
139 | Panama,PA,96.38241895
140 | Papua New Guinea,PG,41.32704942
141 | Paraguay,PY,99.61019773
142 | Peru,PE,91.12787097
143 | Philippines,PH,93.56837604
144 | Poland,PL,99.72468254
145 | Portugal,PT,99.90766021
146 | Puerto Rico,PR,97.12479066
147 | Qatar,QA,99.56810194
148 | Romania,RO,100
149 | Russia,RU,97.0899112
150 | Rwanda,RW,57.71327853
151 | S. Sudan,SS,40.67601215
152 | Saint Lucia,LC,98.16200142
153 | Samoa,WS,97.38259524
154 | San Marino,SM,100
155 | São Tomé and Principe,ST,84.29015993
156 | Saudi Arabia,SA,100
157 | Senegal,SN,80.67785387
158 | Serbia,RS,85.52211629
159 | Sierra Leone,SL,60.80698694
160 | Singapore,SG,100
161 | Sint Maarten,SX,95.07411955
162 | Slovakia,SK,99.78773411
163 | Slovenia,SI,99.53502551
164 | Solomon Is.,SB,67.77595721
165 | Somalia,SO,52.43618907
166 | South Africa,ZA,92.67870194
167 | Spain,ES,99.92627831
168 | Sri Lanka,LK,89.41629243
169 | St. Vin. and Gren.,VC,95.1452199
170 | Sudan,SD,60.26709116
171 | Suriname,SR,95.42474497
172 | Sweden,SE,100
173 | Switzerland,CH,100
174 | Syria,SY,97.21650621
175 | Tajikistan,TJ,81.1962748
176 | Tanzania,TZ,56.72645032
177 | Thailand,TH,99.93071158
178 | Timor-Leste,TP,78.34386574
179 | Togo,TG,65.12884019
180 | Tonga,TO,99.90682775
181 | Trinidad and Tobago,TT,98.18496206
182 | Tunisia,TN,96.25470364
183 | Turkey,TR,98.87571815
184 | Turkmenistan,TM,98.81432798
185 | Turks and Caicos Is.,TC,94.31818182
186 | U.S. Virgin Is.,VI,98.71826738
187 | Uganda,UG,49.10403239
188 | Ukraine,UA,93.79082011
189 | United Arab Emirates,AE,98.04550656
190 | United Kingdom,GB,100
191 | United States,US,99.26919207
192 | Uruguay,UY,99.4023635
193 | Uzbekistan,UZ,97.83345271
194 | Vanuatu,VU,91.25680395
195 | Venezuela,VE,95.72371132
196 | Vietnam,VN,94.71880561
197 | Yemen,YE,63.47347434
198 | Zambia,ZM,59.96375651
199 | Zimbabwe,ZW,64.0512297


--------------------------------------------------------------------------------
/examples/public/resources/stepData17-18.csv:
--------------------------------------------------------------------------------
  1 | Date,Actual,Goal
  2 | 1/1/2017,,
  3 | 1/2/2017,,
  4 | 1/3/2017,1500,7500
  5 | 1/4/2017,3850,7125
  6 | 1/5/2017,3540,6768
  7 | 1/6/2017,2712,6429
  8 | 1/7/2017,2511,6429
  9 | 1/8/2017,1262,6107
 10 | 1/9/2017,2099,5801
 11 | 1/10/2017,2579,5510
 12 | 1/11/2017,1572,5234
 13 | 1/12/2017,1488,4972
 14 | 1/13/2017,2677,4947
 15 | 1/14/2017,1057,4922
 16 | 1/15/2017,1552,4897
 17 | 1/16/2017,2249,4872
 18 | 1/17/2017,1180,4847
 19 | 1/18/2017,1790,4822
 20 | 1/19/2017,2156,4797
 21 | 1/20/2017,2128,4773
 22 | 1/21/2017,8531,4749
 23 | 1/22/2017,1333,5033
 24 | 1/23/2017,1580,4848
 25 | 1/24/2017,2283,4823
 26 | 1/25/2017,661,4798
 27 | 1/26/2017,3373,4774
 28 | 1/27/2017,2199,4750
 29 | 1/28/2017,1307,4726
 30 | 1/29/2017,2276,4702
 31 | 1/30/2017,2011,4678
 32 | 1/31/2017,1928,4654
 33 | 2/1/2017,2003,4630
 34 | 2/2/2017,3178,4606
 35 | 2/3/2017,1763,4582
 36 | 2/4/2017,3046,4559
 37 | 2/5/2017,2120,4536
 38 | 2/6/2017,4585,4513
 39 | 2/7/2017,3767,4535
 40 | 2/8/2017,2510,4512
 41 | 2/9/2017,3116,4489
 42 | 2/10/2017,2498,4466
 43 | 2/11/2017,3692,4443
 44 | 2/12/2017,3306,4420
 45 | 2/13/2017,1297,4397
 46 | 2/14/2017,2196,4375
 47 | 2/15/2017,4167,4353
 48 | 2/16/2017,3518,4331
 49 | 2/17/2017,1894,4309
 50 | 2/18/2017,3215,4287
 51 | 2/19/2017,3421,4265
 52 | 2/20/2017,3070,4243
 53 | 2/21/2017,3549,4221
 54 | 2/22/2017,2750,4199
 55 | 2/23/2017,2379,4178
 56 | 2/24/2017,351,4157
 57 | 2/25/2017,9481,4157
 58 | 2/26/2017,4538,4406
 59 | 2/27/2017,2548,4439
 60 | 2/28/2017,3152,4416
 61 | 3/1/2017,2380,4393
 62 | 3/2/2017,2033,4371
 63 | 3/3/2017,1983,4349
 64 | 3/4/2017,13,4327
 65 | 3/5/2017,0,4327
 66 | 3/6/2017,2735,4327
 67 | 3/7/2017,2383,4305
 68 | 3/8/2017,3053,4283
 69 | 3/9/2017,4784,4261
 70 | 3/10/2017,3795,4391
 71 | 3/11/2017,433,4369
 72 | 3/12/2017,469,4369
 73 | 3/13/2017,1623,4347
 74 | 3/14/2017,315,4325
 75 | 3/15/2017,1861,4325
 76 | 3/16/2017,2095,4303
 77 | 3/17/2017,1362,4281
 78 | 3/18/2017,2928,4259
 79 | 3/19/2017,1897,4237
 80 | 3/20/2017,2112,4215
 81 | 3/21/2017,4625,4193
 82 | 3/22/2017,2419,4301
 83 | 3/23/2017,590,4279
 84 | 3/24/2017,1015,4279
 85 | 3/25/2017,2660,4257
 86 | 3/26/2017,3005,4235
 87 | 3/27/2017,3526,4213
 88 | 3/28/2017,3773,4191
 89 | 3/29/2017,2503,4170
 90 | 3/30/2017,3481,4149
 91 | 3/31/2017,2333,4128
 92 | 4/1/2017,50,4107
 93 | 4/2/2017,1240,4107
 94 | 4/3/2017,3503,4086
 95 | 4/4/2017,3663,4065
 96 | 4/5/2017,2750,4044
 97 | 4/6/2017,2803,4023
 98 | 4/7/2017,2535,4002
 99 | 4/8/2017,2493,3981
100 | 4/9/2017,3901,3961
101 | 4/10/2017,973,3941
102 | 4/11/2017,5842,3921
103 | 4/12/2017,2114,4156
104 | 4/13/2017,2219,4135
105 | 4/14/2017,4411,4114
106 | 4/15/2017,2253,4188
107 | 4/16/2017,2388,4167
108 | 4/17/2017,2934,4146
109 | 4/18/2017,4269,4125
110 | 4/19/2017,4081,4161
111 | 4/20/2017,2321,4157
112 | 4/21/2017,2849,4136
113 | 4/22/2017,2074,4115
114 | 4/23/2017,2634,4094
115 | 4/24/2017,4255,4073
116 | 4/25/2017,3343,4118
117 | 4/26/2017,4747,4097
118 | 4/27/2017,2484,4259
119 | 4/28/2017,2680,4237
120 | 4/29/2017,2275,4215
121 | 4/30/2017,2158,4193
122 | 5/1/2017,2023,4172
123 | 5/2/2017,2602,4151
124 | 5/3/2017,6568,4130
125 | 5/4/2017,2366,4377
126 | 5/5/2017,2286,4355
127 | 5/6/2017,1670,4333
128 | 5/7/2017,3172,4311
129 | 5/8/2017,6373,4289
130 | 5/9/2017,1381,4546
131 | 5/10/2017,1861,4523
132 | 5/11/2017,2240,4500
133 | 5/12/2017,2916,4477
134 | 5/13/2017,2263,4454
135 | 5/14/2017,2662,4431
136 | 5/15/2017,1690,4408
137 | 5/16/2017,3090,4385
138 | 5/17/2017,3753,4363
139 | 5/18/2017,2376,4341
140 | 5/19/2017,2955,4319
141 | 5/20/2017,1371,4319
142 | 5/21/2017,1791,4297
143 | 5/22/2017,1830,4275
144 | 5/23/2017,1681,4253
145 | 5/24/2017,3139,4231
146 | 5/25/2017,3110,4209
147 | 5/26/2017,1540,4187
148 | 5/27/2017,3976,4166
149 | 5/28/2017,8090,4145
150 | 5/29/2017,4821,4393
151 | 5/30/2017,5181,4500
152 | 5/31/2017,5745,4670
153 | 6/1/2017,5479,4938
154 | 6/2/2017,5259,5073
155 | 6/3/2017,2749,5119
156 | 6/4/2017,1226,5000
157 | 6/5/2017,9985,5000
158 | 6/6/2017,10535,5299
159 | 6/7/2017,8659,5616
160 | 6/8/2017,9028,5952
161 | 6/9/2017,16761,6309
162 | 6/10/2017,6610,6687
163 | 6/11/2017,2164,6683
164 | 6/12/2017,2289,6348
165 | 6/13/2017,4421,6030
166 | 6/14/2017,4638,5728
167 | 6/15/2017,3290,5441
168 | 6/16/2017,2709,5168
169 | 6/17/2017,2551,4909
170 | 6/18/2017,2308,4884
171 | 6/19/2017,4506,4859
172 | 6/20/2017,3591,4834
173 | 6/21/2017,5648,4809
174 | 6/22/2017,9163,5018
175 | 6/23/2017,6550,5319
176 | 6/24/2017,3950,5626
177 | 6/25/2017,3586,5542
178 | 6/26/2017,5305,5264
179 | 6/27/2017,5390,5290
180 | 6/28/2017,4260,5316
181 | 6/29/2017,8556,5263
182 | 6/30/2017,4439,5578
183 | 7/1/2017,4758,5521
184 | 7/2/2017,8561,5253
185 | 7/3/2017,4736,5568
186 | 7/4/2017,5146,5526
187 | 7/5/2017,2171,5393
188 | 7/6/2017,1878,5393
189 | 7/7/2017,2347,5123
190 | 7/8/2017,6653,4866
191 | 7/9/2017,3692,5157
192 | 7/10/2017,2062,5083
193 | 7/11/2017,4352,4828
194 | 7/12/2017,5514,4803
195 | 7/13/2017,5949,4980
196 | 7/14/2017,7423,5222
197 | 7/15/2017,15394,5535
198 | 7/16/2017,9430,5867
199 | 7/17/2017,4795,6219
200 | 7/18/2017,4802,6147
201 | 7/19/2017,6233,5839
202 | 7/20/2017,1955,5937
203 | 7/21/2017,5597,5737
204 | 7/22/2017,4136,5688
205 | 7/23/2017,2045,5403
206 | 7/24/2017,6030,5132
207 | 7/25/2017,6122,5356
208 | 7/26/2017,5325,5547
209 | 7/27/2017,5777,5535
210 | 7/28/2017,6052,5595
211 | 7/29/2017,5337,5709
212 | 7/30/2017,5166,5690
213 | 7/31/2017,4913,5506
214 | 8/1/2017,6568,5298
215 | 8/2/2017,7344,5615
216 | 8/3/2017,6158,5951
217 | 8/4/2017,3839,6002
218 | 8/5/2017,3928,6002
219 | 8/6/2017,7310,5898
220 | 8/7/2017,4551,6251
221 | 8/8/2017,5809,6166
222 | 8/9/2017,7765,6041
223 | 8/10/2017,6371,6403
224 | 8/11/2017,6650,6401
225 | 8/12/2017,5060,6463
226 | 8/13/2017,11972,6463
227 | 8/14/2017,6251,6850
228 | 8/15/2017,6600,6820
229 | 8/16/2017,1891,6743
230 | 8/17/2017,3229,6405
231 | 8/18/2017,5688,6084
232 | 8/19/2017,3249,5945
233 | 8/20/2017,4364,5647
234 | 8/21/2017,5602,5364
235 | 8/22/2017,5590,5423
236 | 8/23/2017,6094,5464
237 | 8/24/2017,3078,5621
238 | 8/25/2017,5359,5500
239 | 8/26/2017,3170,5450
240 | 8/27/2017,1096,5180
241 | 8/28/2017,6610,4930
242 | 8/29/2017,7558,5230
243 | 8/30/2017,6242,5550
244 | 8/31/2017,6796,5730
245 | 9/1/2017,6701,6000
246 | 9/2/2017,7173,6180
247 | 9/3/2017,13567,6430
248 | 9/4/2017,7074,6820
249 | 9/5/2017,5486,6890
250 | 9/6/2017,6793,6820
251 | 9/7/2017,6598,6810
252 | 9/8/2017,6850,6740
253 | 9/9/2017,2272,6780
254 | 9/10/2017,5876,6560
255 | 9/11/2017,6317,6320
256 | 9/12/2017,5801,6320
257 | 9/13/2017,4603,6140
258 | 9/14/2017,4890,5840
259 | 9/15/2017,5735,5550
260 | 9/16/2017,7111,5600
261 | 9/17/2017,7967,5940
262 | 9/18/2017,5513,6300
263 | 9/19/2017,5225,6260
264 | 9/20/2017,6120,5950
265 | 9/21/2017,5736,6000
266 | 9/22/2017,5912,5990
267 | 9/23/2017,1392,5970
268 | 9/24/2017,4498,5680
269 | 9/25/2017,2265,5400
270 | 9/26/2017,4204,5130
271 | 9/27/2017,5708,4880
272 | 9/28/2017,5150,5090
273 | 9/29/2017,6650,5120
274 | 9/30/2017,7923,5430
275 | 10/1/2017,1684,5760
276 | 10/2/2017,5201,5560
277 | 10/3/2017,5367,5440
278 | 10/4/2017,6734,5420
279 | 10/5/2017,5587,5750
280 | 10/6/2017,2813,5750
281 | 10/7/2017,9899,5470
282 | 10/8/2017,3647,5800
283 | 10/9/2017,6241,5700
284 | 10/10/2017,2789,5840
285 | 10/11/2017,6592,5690
286 | 10/12/2017,10167,5920
287 | 10/13/2017,5816,6280
288 | 10/14/2017,3095,6260
289 | 10/15/2017,7773,5950
290 | 10/16/2017,9873,6310
291 | 10/17/2017,8544,6690
292 | 10/18/2017,7676,7100
293 | 10/19/2017,6595,7250
294 | 10/20/2017,5861,7220
295 | 10/21/2017,1578,7220
296 | 10/22/2017,1866,6860
297 | 10/23/2017,4245,6520
298 | 10/24/2017,3058,6200
299 | 10/25/2017,2320,5890
300 | 10/26/2017,8169,5600
301 | 10/27/2017,5189,5940
302 | 10/28/2017,2614,5910
303 | 10/29/2017,1971,5620
304 | 10/30/2017,7309,5340
305 | 10/31/2017,6420,5660
306 | 11/1/2017,3238,5850
307 | 11/2/2017,5853,5720
308 | 11/3/2017,2825,5760
309 | 11/4/2017,2076,5620
310 | 11/5/2017,2147,5340
311 | 11/6/2017,3062,5080
312 | 11/7/2017,1355,4830
313 | 11/8/2017,886,4810
314 | 11/9/2017,5416,4790
315 | 11/10/2017,1302,4950
316 | 11/11/2017,1421,4930
317 | 11/12/2017,3101,4910
318 | 11/13/2017,1881,4890
319 | 11/14/2017,2115,4870
320 | 11/15/2017,1591,4850
321 | 11/16/2017,590,4830
322 | 11/17/2017,1907,4810
323 | 11/18/2017,7156,4790
324 | 11/19/2017,1313,5080
325 | 11/20/2017,2462,4900
326 | 11/21/2017,1601,4880
327 | 11/22/2017,2540,4860
328 | 11/23/2017,2466,4840
329 | 11/24/2017,202,4820
330 | 11/25/2017,0,4820
331 | 11/26/2017,,
332 | 11/27/2017,3578,4820
333 | 11/28/2017,3370,4800
334 | 11/29/2017,6656,4780
335 | 11/30/2017,1779,5070
336 | 12/1/2017,2482,4910
337 | 12/2/2017,1485,4890
338 | 12/3/2017,1317,4870
339 | 12/4/2017,2741,4850
340 | 12/5/2017,5030,4830
341 | 12/6/2017,3164,4880
342 | 12/7/2017,1503,4860
343 | 12/8/2017,1505,4840
344 | 12/9/2017,4063,4820
345 | 12/10/2017,4865,4800
346 | 12/11/2017,3451,4830
347 | 12/12/2017,1870,4810
348 | 12/13/2017,3623,4790
349 | 12/14/2017,5521,4790
350 | 12/15/2017,6060,4980
351 | 12/16/2017,11539,5250
352 | 12/17/2017,8065,5570
353 | 12/18/2017,8253,5910
354 | 12/19/2017,7496,6270
355 | 12/20/2017,2770,6580
356 | 12/21/2017,5247,6580
357 | 12/22/2017,1213,6520
358 | 12/23/2017,1909,6200
359 | 12/24/2017,2256,5890
360 | 12/25/2017,1988,5600
361 | 12/26/2017,1924,5320
362 | 12/27/2017,1763,5060
363 | 12/28/2017,282,4810
364 | 12/29/2017,1418,4810
365 | 12/30/2017,2838,4790
366 | 12/31/2017,3383,4770
367 | 1/1/2018,2456,4650
368 | 1/2/2018,2200,4220
369 | 1/3/2018,4786,3820
370 | 1/4/2018,3068,4670
371 | 1/5/2018,0,4670
372 | 1/6/2018,3168,4670
373 | 1/7/2018,2478,4650
374 | 1/8/2018,1622,4630
375 | 1/9/2018,3002,4610
376 | 1/10/2018,1776,4590
377 | 1/11/2018,,
378 | 1/12/2018,1605,4570
379 | 1/13/2018,3843,4550
380 | 1/14/2018,1075,4530
381 | 1/15/2018,57,4510
382 | 1/16/2018,1569,4510
383 | 1/17/2018,1887,4490
384 | 1/18/2018,1563,4470
385 | 1/19/2018,1483,4450
386 | 1/20/2018,3091,4430
387 | 1/21/2018,2231,4410
388 | 1/22/2018,2168,4390
389 | 1/23/2018,986,4370
390 | 1/24/2018,2778,4370
391 | 1/25/2018,1444,4350
392 | 1/26/2018,1167,4330
393 | 1/27/2018,1536,4310
394 | 1/28/2018,3690,4290
395 | 1/29/2018,1384,4270
396 | 1/30/2018,2387,4250
397 | 1/31/2018,756,4230
398 | 2/1/2018,1364,4230
399 | 2/2/2018,4270,4210
400 | 2/3/2018,2253,4240
401 | 2/4/2018,2351,4220
402 | 2/5/2018,2037,4200
403 | 2/6/2018,1738,4180
404 | 2/7/2018,1573,4160
405 | 2/8/2018,1008,4140
406 | 2/9/2018,4263,4120
407 | 2/10/2018,5367,4160
408 | 2/11/2018,6840,4410
409 | 2/12/2018,1753,4680
410 | 2/13/2018,1639,4660
411 | 2/14/2018,3396,4640
412 | 2/15/2018,300,4620
413 | 2/16/2018,1670,4620
414 | 2/17/2018,1340,4600
415 | 2/18/2018,2191,4580
416 | 2/19/2018,2728,4560
417 | 2/20/2018,1656,4540
418 | 2/21/2018,1890,4520
419 | 2/22/2018,873,4500
420 | 2/23/2018,1214,4500
421 | 2/24/2018,3394,4480
422 | 2/25/2018,4001,4460
423 | 2/26/2018,1733,4440
424 | 2/27/2018,953,4420
425 | 2/28/2018,1216,4400
426 | 3/1/2018,2724,4380
427 | 3/2/2018,559,4360
428 | 3/3/2018,,
429 | 3/4/2018,,
430 | 3/5/2018,1350,4360
431 | 3/6/2018,1173,4340
432 | 3/7/2018,2040,4320
433 | 3/8/2018,3752,4300
434 | 3/9/2018,1243,4280
435 | 3/10/2018,1925,4260
436 | 3/11/2018,1582,4240
437 | 3/12/2018,1340,4220
438 | 3/13/2018,337,4200
439 | 3/14/2018,1021,4200
440 | 3/15/2018,1726,4180
441 | 3/16/2018,2065,4160
442 | 3/17/2018,4097,4140
443 | 3/18/2018,1636,4130
444 | 3/19/2018,2267,4110
445 | 3/20/2018,1571,4090
446 | 3/21/2018,1336,4070
447 | 3/22/2018,1000,4050
448 | 3/23/2018,2240,4030
449 | 3/24/2018,4384,4010
450 | 3/25/2018,3887,4110
451 | 3/26/2018,1717,4100
452 | 3/27/2018,1276,4080
453 | 3/28/2018,3739,4060
454 | 3/29/2018,1409,4040
455 | 3/30/2018,149,4020
456 | 3/31/2018,3502,4020
457 | 4/1/2018,1936,4000
458 | 4/2/2018,2397,3980
459 | 4/3/2018,2488,3960
460 | 4/4/2018,1577,3940
461 | 4/5/2018,2199,3920
462 | 4/6/2018,1877,3900
463 | 4/7/2018,44,3880
464 | 4/8/2018,0,3880
465 | 4/9/2018,2839,3880
466 | 4/10/2018,2685,3860
467 | 4/11/2018,4828,3840
468 | 4/12/2018,2810,4070
469 | 4/13/2018,1284,4050
470 | 4/14/2018,3191,4030
471 | 4/15/2018,2004,4010
472 | 4/16/2018,1833,3990
473 | 4/17/2018,1720,3970
474 | 4/18/2018,1523,3950
475 | 4/19/2018,3023,3930
476 | 4/20/2018,3012,3910
477 | 4/21/2018,1610,3910
478 | 4/22/2018,1596,3890
479 | 4/23/2018,1952,3870
480 | 4/24/2018,3604,3850
481 | 4/25/2018,4491,3830
482 | 4/26/2018,2421,4000
483 | 4/27/2018,3180,3980
484 | 4/28/2018,2242,3960
485 | 4/29/2018,2215,3940
486 | 4/30/2018,1751,3920
487 | 5/1/2018,3852,3900
488 | 5/2/2018,4452,3890
489 | 5/3/2018,2680,4030
490 | 5/4/2018,3715,4010
491 | 5/5/2018,3930,3990
492 | 5/6/2018,6604,3990
493 | 5/7/2018,2750,4230
494 | 5/8/2018,7044,4210
495 | 5/9/2018,6760,4470
496 | 5/10/2018,9888,4740
497 | 5/11/2018,12647,5030
498 | 5/12/2018,3791,5340
499 | 5/13/2018,4881,5270
500 | 5/14/2018,4536,5270
501 | 5/15/2018,5399,5020
502 | 5/16/2018,3345,5120
503 | 5/17/2018,7400,5040
504 | 5/18/2018,8433,5350
505 | 5/19/2018,2602,5670
506 | 5/20/2018,552,5520
507 | 5/21/2018,2783,5250
508 | 5/22/2018,5568,4990
509 | 5/23/2018,4698,5140
510 | 5/24/2018,11471,5120
511 | 5/25/2018,7121,5430
512 | 5/26/2018,12291,5760
513 | 5/27/2018,5896,6110
514 | 5/28/2018,922,6100
515 | 5/29/2018,6736,5800
516 | 5/30/2018,5105,6040
517 | 5/31/2018,6873,6000
518 | 6/1/2018,6274,6220
519 | 6/2/2018,1987,6260
520 | 6/3/2018,5770,6050
521 | 6/4/2018,4741,4110
522 | 6/5/2018,6483,4180
523 | 6/6/2018,8651,4640
524 | 6/7/2018,6019,5450
525 | 6/8/2018,6301,5570
526 | 6/9/2018,16999,5720
527 | 6/10/2018,1823,7720
528 | 6/11/2018,2113,7130
529 | 6/12/2018,5120,6130
530 | 6/13/2018,5195,5930
531 | 6/14/2018,6483,5790
532 | 6/15/2018,6840,5860
533 | 6/16/2018,5509,6060
534 | 6/17/2018,2942,6010
535 | 6/18/2018,4394,5400
536 | 6/19/2018,5479,5200
537 | 6/20/2018,5277,5230
538 | 6/21/2018,13504,5240
539 | 6/22/2018,11973,6900
540 | 6/23/2018,15426,7920
541 | 6/24/2018,16525,9430
542 | 6/25/2018,3498,10850
543 | 6/26/2018,1913,10120
544 | 6/27/2018,1573,8480
545 | 6/28/2018,1585,7100
546 | 6/29/2018,1706,6000
547 | 6/30/2018,2835,5150
548 | 7/1/2018,1930,4690
549 | 7/2/2018,2317,4140
550 | 7/3/2018,5261,3780
551 | 7/4/2018,5930,3930
552 | 7/5/2018,5287,4330
553 | 7/6/2018,8729,4530
554 | 7/7/2018,1233,5370
555 | 7/8/2018,3412,4960
556 | 7/9/2018,2456,4650
557 | 7/10/2018,2200,4220
558 | 7/11/2018,4786,3820
559 | 


--------------------------------------------------------------------------------
/examples/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="app">
  3 | 		<div class="examplesHead">
  4 | 			<a href="https://jscharting.com"
  5 | 				><img
  6 | 					src="../public/jsc-vue-logo.svg"
  7 | 					style="width: 200px; margin-top: 2px;"
  8 | 					title="JSCharting"
  9 | 					alt="JSCharting JavaScript Chart Library"
 10 | 			/></a>
 11 | 
 12 | 			<div class="examplesItems">
 13 | 				<button
 14 | 					v-for="item in examples"
 15 | 					v-bind:key="item.file"
 16 | 					v-on:click="selected = item.file"
 17 | 					v-bind:class="{ selected: selected === item.file }"
 18 | 					class="btn"
 19 | 				>
 20 | 					{{ item.name }}
 21 | 				</button>
 22 | 			</div>
 23 | 		</div>
 24 | 		<div class="samples">
 25 | 			<component v-bind:is="selected"></component>
 26 | 		</div>
 27 | 	</div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import { JSC } from 'jscharting-vue';
 32 | 
 33 | import simpleLine from './components/simpleLine.vue';
 34 | import interactiveLine from './components/interactiveLine.vue';
 35 | import chartDash from './components/chartDash.vue';
 36 | import calendarHeatmap from './components/calendarHeatmap.vue';
 37 | import circularColorBar from './components/circularColorBar.vue';
 38 | import circularGauge from './components/circularGauge.vue';
 39 | import microchartFast from './components/microchartFast.vue';
 40 | import mapChoropleth from './components/mapChoropleth.vue';
 41 | import methodUpdate from './components/methodUpdate.vue';
 42 | import liveData from './components/liveData.vue';
 43 | import masterDetail from './components/masterDetail.vue';
 44 | import dataGrid from './components/dataGrid.vue';
 45 | import chartDataGrid from './components/chartDataGrid.vue';
 46 | 
 47 | export default {
 48 | 	name: 'app',
 49 | 	data() {
 50 | 		return {
 51 | 			selected: 'simpleLine',
 52 | 			examples: [
 53 |         { file: 'simpleLine', name: 'Line' },
 54 |         { file: 'chartDash', name: 'Dashboard' },
 55 |         { file: 'circularGauge', name: 'Gauge' },
 56 |         { file: 'circularColorBar', name: 'Color Bar' },
 57 |         { file: 'interactiveLine', name: 'Interactivity' },
 58 |         { file: 'mapChoropleth', name: 'Map Choropleth' },
 59 |         { file: 'calendarHeatmap', name: 'Calendar Heatmap' },
 60 |         { file: 'methodUpdate', name: 'Method Update' },
 61 |         { file: 'microchartFast', name: 'Microchart' },
 62 |         { file: 'liveData', name: 'Live Data' },
 63 |         { file: 'masterDetail', name: 'Master Detail' },
 64 |         { file: 'dataGrid', name: 'Data Grid' },
 65 |         { file: 'chartDataGrid', name: 'Chart Grid Switch' }
 66 | 			]
 67 | 		};
 68 | 	},
 69 | 	components: {
 70 | 		simpleLine,
 71 |     chartDash,
 72 |     circularGauge,
 73 |     circularColorBar,
 74 |     interactiveLine,
 75 |     mapChoropleth,
 76 |     calendarHeatmap,
 77 |     methodUpdate,
 78 |     microchartFast,
 79 | 		liveData,
 80 | 		masterDetail,
 81 | 		dataGrid,
 82 |     chartDataGrid
 83 | 	},
 84 | 	beforeCreate: function() {
 85 | 		JSC.defaults({ baseUrl: './assets/jscharting/' });
 86 | 	}
 87 | };
 88 | </script>
 89 | 
 90 | <style>
 91 | .samples {
 92 | 	font-family: sans-serif;
 93 | 	max-width: 800px;
 94 | 	margin: 20px auto;
 95 | }
 96 | 
 97 | .examplesHead {
 98 | 	background: #e2e7ef;
 99 | 	padding: 15px 15px 10px 15px;
100 | 	min-height: 60px;
101 | 	position: relative;
102 | 	display: inline-block;
103 | 	width: 100%;
104 | }
105 | 
106 | .examplesDescription {
107 | 	text-align: center;
108 | 	margin: 15px 0 0 0;
109 | }
110 | 
111 | .examplesItems {
112 | 	float: right;
113 | 	margin: 13px;
114 | }
115 | 
116 | .examplesLabel {
117 | 	font-family: sans-serif;
118 | 	top: 52px;
119 | 	position: absolute;
120 | 	left: 125px;
121 | }
122 | 
123 | .btn {
124 | 	background-color: #0876ff;
125 | 	border-radius: 4px;
126 | 	border-width: 0;
127 | 	color: white;
128 | 	padding: 0.5em;
129 | 	font-family: sans-serif;
130 | 	font-size: 0.9em;
131 | 	margin-right: 10px;
132 | 	margin-top: 5px;
133 | 	min-width: 60px;
134 | }
135 | 
136 | .btn:focus,
137 | .btn:hover,
138 | .btn.selected {
139 | 	background-color: #05418c;
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/examples/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jscharting/jscharting-vue/9c1f4a8ba8e0e8d3c15c084bad65900468da87fa/examples/src/assets/logo.png


--------------------------------------------------------------------------------
/examples/src/components/calendarHeatmap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<JSCharting
 3 | 		:options="chartOptions()"
 4 | 		style="height:200px;  max-width:800px;"
 5 | 	></JSCharting>
 6 | </template>
 7 | 
 8 | <script>
 9 | import JSCharting from 'jscharting-vue';
10 | 
11 | export default {
12 | 	name: 'calendarHeatmap',
13 | 	data() {
14 | 		return {
15 | 			chartOptions: () => {
16 | 				return {
17 | 					debug: true,
18 | 					type: 'calendar year solid',
19 | 					title_label_text: 'Daily Steps 2017',
20 | 					data: './resources/stepData17-18.csv',
21 | 					calendar: {
22 | 						range: ['1/1/2017', '12/31/2017'],
23 | 						defaultEdgePoint: {
24 | 							tooltip: '',
25 | 							mouseTracking: false
26 | 						}
27 | 					},
28 | 					legend_position: 'right',
29 | 					palette: {
30 | 						colors: [
31 | 							'#f7fcfd',
32 | 							'#e0ecf4',
33 | 							'#bfd3e6',
34 | 							'#9ebcda',
35 | 							'#8c96c6',
36 | 							'#8c6bb1',
37 | 							'#88419d',
38 | 							'#810f7c',
39 | 							'#4d004b'
40 | 						],
41 | 						colorBar_axis_scale_interval: 5000
42 | 					},
43 | 					defaultPoint_tooltip: '<b>%name</b><br> %zValue Steps',
44 | 					toolbar_visible: false
45 | 				};
46 | 			}
47 | 		};
48 | 	},
49 | 	components: {
50 | 		JSCharting
51 | 	}
52 | };
53 | </script>
54 | 


--------------------------------------------------------------------------------
/examples/src/components/chartDash.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="mapGridWrapper">
  3 | 		<JSCharting
  4 | 			ref="myChart"
  5 | 			v-if="dataLoaded"
  6 | 			:options="chartConfig"
  7 | 			style="max-width: 740px;height: 400px;"
  8 | 		/>
  9 | 		<JSCGrid
 10 | 			ref="myGrid"
 11 | 			v-if="dataLoaded"
 12 | 			:options="gridConfig"
 13 | 			style="max-width: 635px;"
 14 | 		/>
 15 | 	</div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import JSCharting, { JSCGrid, JSC } from 'jscharting-vue';
 20 | 
 21 | const paletteColors = ['#6ef2f0', '#00d2fa', '#00aeff', '#0084ff', '#4c4bdf'];
 22 | 
 23 | export default {
 24 | 	name: 'chartDash',
 25 | 	mounted: function() {
 26 | 		const me = this;
 27 | 		JSC.fetch('./resources/laborForceUs.csv')
 28 | 			.then(function(response) {
 29 | 				return response.text();
 30 | 			})
 31 | 			.then(function(text) {
 32 | 				let data = JSC.csv2Json(text, {
 33 | 					coerce: function(d) {
 34 | 						return {
 35 | 							state: d.state,
 36 | 							year: d.year,
 37 | 							unemployment_rate:
 38 | 								(parseInt(d.unemployed) * 100) / parseInt(d.labor_force),
 39 | 							unemployed: parseInt(d.unemployed)
 40 | 						};
 41 | 					}
 42 | 				});
 43 | 				let mapData = data.filter(v => v.year === '2020');
 44 | 				let mapPoints = mapData.map(v => {
 45 | 					return {
 46 | 						map: 'US.name:' + v.state,
 47 | 						z: v.unemployment_rate,
 48 | 						attributes_unemployed: v.unemployed
 49 | 					};
 50 | 				});
 51 | 
 52 | 				me.chartConfig = JSC.merge(me.getChartConfig(), {
 53 | 					series: [{ points: mapPoints }]
 54 | 				});
 55 | 
 56 | 				// Create Grid Data
 57 | 				let minRate = JSC.min(mapData, 'unemployment_rate');
 58 | 				let maxRate = JSC.max(mapData, 'unemployment_rate');
 59 | 
 60 | 				const gridConfigData = JSC.nest()
 61 | 					.key('state')
 62 | 					.pointRollup(function(key, val) {
 63 | 						const rateList = val.map(v => v.unemployment_rate);
 64 | 						const rates = {
 65 | 							last: rateList[rateList.length - 1],
 66 | 							min: JSC.min(rateList),
 67 | 							max: JSC.max(rateList)
 68 | 						};
 69 | 						const color =
 70 | 							paletteColors[
 71 | 								Math.round(me.mapValue(0, 4, minRate, maxRate, rates.last))
 72 | 							];
 73 | 						return {
 74 | 							state: key,
 75 | 							trends_line: `<chart type=sparkline colors="#333F89,,#00aeff" width=130 height=20 margin=3 data="${rateList.join(
 76 | 								','
 77 | 							)}">`,
 78 | 							rate_bar: `<chart type=bar margin_right=5 verticalAlign=middle color="${color}" data=${
 79 | 								rates.last
 80 | 							} max=13.3>${me.round(rates.last)}`,
 81 | 							min_rate: `${me.round(rates.min)}% (${1976 +
 82 | 								rateList.indexOf(rates.min)})`,
 83 | 							max_rate: `<span style="${
 84 | 								1976 + rateList.indexOf(rates.max) === 2020
 85 | 									? 'font-weight:bold; color:black;'
 86 | 									: ''
 87 | 							} ">${me.round(rates.max)} % (${1976 +
 88 | 								rateList.indexOf(rates.max)})</span>`
 89 | 						};
 90 | 					})
 91 | 					.points(data);
 92 | 
 93 | 				me.gridConfig = JSC.merge(me.getGridConfig(), { data: gridConfigData });
 94 | 				me.dataLoaded = true;
 95 | 			});
 96 | 	},
 97 | 	data() {
 98 | 		return {
 99 | 			chartConfig: {},
100 | 			gridConfig: {},
101 | 			dataLoaded: false
102 | 		};
103 | 	},
104 | 	methods: {
105 | 		getChartConfig: () => {
106 | 			return {
107 | 				type: 'map',
108 | 				chartArea_boxVisible: false,
109 | 				margin_right: 15,
110 | 				title: {
111 | 					label: { text: 'US Unemployment Rate, 2020', style_fontSize: '15px' },
112 | 					position: 'center'
113 | 				},
114 | 				defaultPoint_tooltip:
115 | 					'%name <b>{%zValue:n1}%</b><br>(<b>{%unemployed:n0}</b> people)',
116 | 				palette: {
117 | 					pointValue: '{%zValue:n1}%',
118 | 					colors: paletteColors,
119 | 					colorBar_axis_defaultTick_label_text: '%value%'
120 | 				},
121 | 				chartArea_fill: 'none',
122 | 				toolbar_items: {
123 | 					zoom_visible: false
124 | 				}
125 | 			};
126 | 		},
127 | 		getGridConfig: () => {
128 | 			return {
129 | 				className: 'dataTable',
130 | 				exportFile: false,
131 | 				columns: [
132 | 					{ header: 'State', value: '%state' },
133 | 					{ header: 'Unemployment Rate 2020', value: '%rate_bar%' },
134 | 					{ header: 'Trends (1976-2020)', value: '%trends_line' },
135 | 					{
136 | 						header: 'Min Unemployment Rate',
137 | 						value: '%min_rate',
138 | 						align: 'right'
139 | 					},
140 | 					{
141 | 						header: 'Max Unemployment Rate',
142 | 						value: '%max_rate',
143 | 						align: 'right'
144 | 					}
145 | 				]
146 | 			};
147 | 		},
148 | 		mapValue: (toStart, toEnd, fromStart, fromEnd, value) =>
149 | 			toStart +
150 | 			((value - fromStart) / (fromEnd - fromStart)) * (toEnd - toStart),
151 | 		round: v => Math.round(v * 10) / 10
152 | 	},
153 | 	components: {
154 | 		JSCharting,
155 | 		JSCGrid
156 | 	}
157 | };
158 | </script>
159 | 
160 | <style>
161 | #mapGridWrapper {
162 | 	max-width: 740px;
163 | 	margin: 0px auto;
164 | }
165 | #mapGridWrapper a {
166 | 	text-decoration: none;
167 | }
168 | #mapGridWrapper p {
169 | 	margin-left: 5px;
170 | 	font-size: 12px;
171 | 	font-family: tahoma, geneva, sans-serif;
172 | }
173 | 
174 | .jscGrid .col1 {
175 | 	text-align: left;
176 | 	padding-left: 15px;
177 | }
178 | 
179 | .jscGrid .dataTable {
180 | 	font-family: tahoma, geneva, sans-serif;
181 | }
182 | .jscGrid .dataTable thead th {
183 | 	background-color: white;
184 | 	color: #424242;
185 | 	text-align: left !important;
186 | 	font-size: 14px;
187 | 	font-weight: bold;
188 | 	border-bottom: 1px solid #f5f5f5;
189 | }
190 | .jscGrid .dataTable tr {
191 | 	background-color: white !important;
192 | }
193 | .jscGrid .dataTable td {
194 | 	font-size: 12px;
195 | 	border-bottom: 1px solid #f5f5f5;
196 | 	font-weight: 300;
197 | }
198 | </style>
199 | 


--------------------------------------------------------------------------------
/examples/src/components/chartDataGrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<p class="examplesDescription">
 4 | 			With one setting, you can provide a datagrid representation of your
 5 | 			charts.
 6 | 		</p>
 7 | 		<JSCharting
 8 | 			:options="chartOptions"
 9 | 			style=" height:400px; margin: 20px auto;"
10 | 		></JSCharting>
11 | 	</div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import JSCharting, { JSC } from 'jscharting-vue';
16 | 
17 | export default {
18 | 	name: 'chartDataGrid',
19 | 	components: { JSCharting },
20 | 	data() {
21 | 		return {
22 | 			chartOptions: {
23 | 				grid: { enabled: true },
24 | 				title: { label: { text: 'Sales by quarter' } },
25 | 				xAxis: { label: { text: 'Quarters' } },
26 | 				yAxis: { formatString: 'c', label: { text: 'USD' } },
27 | 				series: [
28 | 					{
29 | 						name: 'Gross Sales',
30 | 						points: [
31 | 							{ name: 'Q1', y: 50120 },
32 | 							{ name: 'Q2', y: 53465 },
33 | 							{ name: 'Q3', y: 62165 },
34 | 							{ name: 'Q4', y: 52156 }
35 | 						]
36 | 					},
37 | 					{
38 | 						name: 'Net Sales',
39 | 						points: [
40 | 							{ name: 'Q1', y: 32654 },
41 | 							{ name: 'Q2', y: 35645 },
42 | 							{ name: 'Q3', y: 42651 },
43 | 							{ name: 'Q4', y: 30153 }
44 | 						]
45 | 					}
46 | 				]
47 | 			}
48 | 		};
49 | 	}
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/examples/src/components/circularColorBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<JSCharting
  3 | 		:options="chartOptions"
  4 | 		style="max-width: 800px;height:400px; margin: 0 auto;"
  5 | 	/>
  6 | </template>
  7 | 
  8 | <script>
  9 | import JSCharting from 'jscharting-vue';
 10 | 
 11 | export default {
 12 | 	name: 'circularColorBar',
 13 | 	components: { JSCharting },
 14 | 	data() {
 15 | 		return {
 16 | 			chartOptions: {
 17 | 				legend_visible: false,
 18 | 				defaultTooltip_enabled: false,
 19 | 				xAxis_spacingPercentage: 0.4,
 20 | 				yAxis: [
 21 | 					{
 22 | 						id: 'ax1',
 23 | 						defaultTick: {
 24 | 							padding: 10,
 25 | 							enabled: false
 26 | 						},
 27 | 						customTicks: [350, 600, 700, 800, 850],
 28 | 						line: {
 29 | 							width: 10,
 30 | 
 31 | 							/* Defining the option will enable it. */
 32 | 							breaks: {},
 33 | 
 34 | 							/* Palette is defined at series level with an ID referenced here. */
 35 | 							color: 'smartPalette:pal1'
 36 | 						},
 37 | 						scale_range: [350, 850]
 38 | 					},
 39 | 					{
 40 | 						id: 'ax2',
 41 | 						scale_range: [0, 850],
 42 | 						defaultTick: {
 43 | 							padding: 10,
 44 | 							enabled: false
 45 | 						},
 46 | 						customTicks: [0, 300, 600, 700, 800, 850],
 47 | 						line: {
 48 | 							width: 10,
 49 | 							color: 'smartPalette:pal2'
 50 | 						}
 51 | 					}
 52 | 				],
 53 | 				defaultSeries: {
 54 | 					type: 'gauge column roundcaps',
 55 | 					shape: {
 56 | 						label: {
 57 | 							text: '%max',
 58 | 							align: 'center',
 59 | 							verticalAlign: 'middle'
 60 | 						}
 61 | 					}
 62 | 				},
 63 | 				series: [
 64 | 					{
 65 | 						type: 'column roundcaps',
 66 | 						name: 'Temperatures',
 67 | 						yAxis: 'ax1',
 68 | 						palette: {
 69 | 							id: 'pal1',
 70 | 							pointValue: '%yValue',
 71 | 							ranges: [
 72 | 								{ value: 350, color: '#FF5353' },
 73 | 								{ value: 600, color: '#FFD221' },
 74 | 								{ value: 700, color: '#77E6B4' },
 75 | 								{ value: [800, 850], color: '#21D683' }
 76 | 							]
 77 | 						},
 78 | 						shape_label: { style: { fontSize: 28 } },
 79 | 						points: [['x', [350, 680]]]
 80 | 					},
 81 | 					{
 82 | 						yAxis: 'ax2',
 83 | 						name: 'Temperatures',
 84 | 						palette: {
 85 | 							id: 'pal2',
 86 | 							pointValue: '{%yValue/850}',
 87 | 							colors: [
 88 | 								'#ffffd9',
 89 | 								'#edf8b0',
 90 | 								'#c7e9b4',
 91 | 								'#7fcdbb',
 92 | 								'#41b6c3',
 93 | 								'#1d91c0',
 94 | 								'#225ea8',
 95 | 								'#253494',
 96 | 								'#081d58'
 97 | 							]
 98 | 						},
 99 | 						shape_label: {
100 | 							text: '%value',
101 | 							style: { fontSize: 28 }
102 | 						},
103 | 						points: [['x', 320]]
104 | 					}
105 | 				]
106 | 			}
107 | 		};
108 | 	}
109 | };
110 | </script>
111 | 


--------------------------------------------------------------------------------
/examples/src/components/circularGauge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<JSCharting
 3 | 		:options="chartOptions"
 4 | 		style="max-width: 400px;height:400px; margin: 0 auto;"
 5 | 	/>
 6 | </template>
 7 | 
 8 | <script>
 9 | import JSCharting from 'jscharting-vue';
10 | 
11 | export default {
12 | 	name: 'circularGauge',
13 | 	components: { JSCharting },
14 | 	data() {
15 | 		return {
16 | 			chartOptions: {
17 | 				type: 'gauge ',
18 | 				legend_visible: false,
19 | 				chartArea_boxVisible: false,
20 | 				xAxis: {
21 | 					/* Used to position marker on top of axis line. */
22 | 					scale: { range: [0, 1], invert: true }
23 | 				},
24 | 				palette: {
25 | 					pointValue: '%yValue',
26 | 					ranges: [
27 | 						{ value: 350, color: '#FF5353' },
28 | 						{ value: 600, color: '#FFD221' },
29 | 						{ value: 700, color: '#77E6B4' },
30 | 						{ value: [800, 850], color: '#21D683' }
31 | 					]
32 | 				},
33 | 				yAxis: {
34 | 					defaultTick: { padding: 13, enabled: false },
35 | 					customTicks: [600, 700, 800],
36 | 					line: {
37 | 						width: 15,
38 | 						breaks_gap: 0.03,
39 | 						color: 'smartPalette'
40 | 					},
41 | 					scale: { range: [350, 850] }
42 | 				},
43 | 				defaultSeries: {
44 | 					opacity: 1,
45 | 					shape: {
46 | 						label: {
47 | 							align: 'center',
48 | 							verticalAlign: 'middle'
49 | 						}
50 | 					}
51 | 				},
52 | 				series: [
53 | 					{
54 | 						type: 'marker',
55 | 						name: 'Score',
56 | 						shape_label: {
57 | 							text: '%value',
58 | 							style: { fontSize: 48 }
59 | 						},
60 | 						defaultPoint: {
61 | 							tooltip: '%yValue',
62 | 							marker: {
63 | 								outline: {
64 | 									width: 5,
65 | 									color: 'white'
66 | 								},
67 | 								fill: 'currentColor',
68 | 								type: 'circle',
69 | 								visible: true,
70 | 								size: 35
71 | 							}
72 | 						},
73 | 						points: [[1, 720]]
74 | 					}
75 | 				]
76 | 			}
77 | 		};
78 | 	}
79 | };
80 | </script>
81 | 


--------------------------------------------------------------------------------
/examples/src/components/dataGrid.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dataGrid {
 3 | 	margin: 20px auto;
 4 | }
 5 | </style>
 6 | 
 7 | <template>
 8 | 	<JSCGrid :options="options" class="dataGrid"></JSCGrid>
 9 | </template>
10 | 
11 | <script>
12 | import { JSCGrid } from 'jscharting-vue';
13 | 
14 | export default {
15 | 	name: 'dataGrid',
16 | 	data() {
17 | 		return {
18 | 			options: {
19 | 				className: 'jscTable',
20 | 				data: [
21 | 					['Art', 5, 10],
22 | 					['Greg', 3, 6],
23 | 					['Olivia', 11, 8],
24 | 					['Steve', 11, 4],
25 | 					['Anna', 3, 8]
26 | 				],
27 | 				columns: [
28 | 					{ header: 'Name' },
29 | 					{ header: 'Value One' },
30 | 					{ header: 'Value Two' },
31 | 					{ header: 'Sum', value: '{%1+%2}' }
32 | 				]
33 | 			}
34 | 		};
35 | 	},
36 | 	components: {
37 | 		JSCGrid
38 | 	}
39 | };
40 | </script>
41 | 


--------------------------------------------------------------------------------
/examples/src/components/interactiveLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<p>Two way selection binding. Use dropdown or hover a series line.</p>
  4 | 		<label>
  5 | 			Selected:
  6 | 			<select v-model="selected" @change="selectSeries">
  7 | 				<option v-for="ser in series" :value="ser.name">{{ ser.name }}</option>
  8 | 			</select>
  9 | 		</label>
 10 | 
 11 | 		<JSCharting
 12 | 			ref="myChart"
 13 | 			v-if="dataLoaded"
 14 | 			:options="chartOptions"
 15 | 			@rendered="selectSeries"
 16 |       style="height:400px;"
 17 | 		/>
 18 | 	</div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import JSCharting, { JSC } from 'jscharting-vue';
 23 | 
 24 | const chartConfig = () => {
 25 | 	return {
 26 | 		type: 'spline',
 27 | 		title_label_text: 'Average US Unemployment Rate',
 28 | 		defaultTooltip_enabled: false,
 29 | 		yAxis: {
 30 | 			defaultTick_label_text: '%value%',
 31 | 			scale_range: [2, 14]
 32 | 		},
 33 | 		xAxis: {
 34 | 			scale_type: 'time',
 35 | 			formatString: 'yyyy'
 36 | 		},
 37 | 		defaultPoint: {
 38 | 			marker: {
 39 | 				visible: false,
 40 | 				size: 12
 41 | 			},
 42 | 			states: {
 43 | 				// Point hover and mute states are not necessary
 44 | 				hover: { enabled: false },
 45 | 				mute: { enabled: false }
 46 | 			},
 47 | 			focusGlow_width: 0
 48 | 		},
 49 | 		legend_visible: false,
 50 | 		defaultSeries: {
 51 | 			// Default line is translucent and desaturated
 52 | 			line: {
 53 | 				opacity: 0.2,
 54 | 				color: 'desaturate'
 55 | 			},
 56 | 			states: {
 57 | 				select: {
 58 | 					// Selected line is solid, and thicker.
 59 | 					line: {
 60 | 						opacity: 1,
 61 | 						color: 'currentColor',
 62 | 						width: 3
 63 | 					}
 64 | 				},
 65 | 				// Series hover and mute states are not necessary
 66 | 				hover: { enabled: false },
 67 | 				mute: { enabled: false }
 68 | 			},
 69 | 			line_width: 1
 70 | 		}
 71 | 	};
 72 | };
 73 | 
 74 | export default {
 75 | 	name: 'interactiveLine',
 76 | 	components: { JSCharting },
 77 | 	mounted: function() {
 78 | 		const me = this;
 79 | 		fetch('./resources/laborForceUs.csv')
 80 | 			.then(function(response) {
 81 | 				return response.text();
 82 | 			})
 83 | 			.then(function(text) {
 84 | 				me.series = me.makeSeries(text);
 85 | 				me.chartOptions = JSC.merge(chartConfig(), {
 86 | 					defaultPoint: {
 87 | 						events: {
 88 | 							mouseOver: function() {
 89 | 								var point = this;
 90 | 								me.selected = point.series.options('name');
 91 | 								me.selectSeries();
 92 | 								return false;
 93 | 							}
 94 | 						}
 95 | 					},
 96 | 					series: me.series
 97 | 				});
 98 | 				me.dataLoaded = true;
 99 | 			});
100 | 	},
101 | 	data() {
102 | 		return {
103 | 			series: [],
104 | 			dataLoaded: false,
105 | 			chartOptions: chartConfig(),
106 | 			selected: 'Average'
107 | 		};
108 | 	},
109 | 	methods: {
110 | 		selectionChanged: () => {
111 | 			selectSeries();
112 | 		},
113 | 		selectSeries: function(argChart) {
114 | 			const me = this;
115 | 			const chart = me.chartInstance() || argChart;
116 | 			chart?.series().each(function(s) {
117 | 				s.options({ selected: me.selected == s.name });
118 | 			});
119 | 		},
120 | 		chartInstance: function() {
121 | 			return this.$refs.myChart.instance;
122 | 		},
123 | 		// Convert csv text to a chart series
124 | 		makeSeries: csvText => {
125 | 			// Parse the csv text into JSON.
126 | 			var data = JSC.csv2Json(csvText, {
127 | 				coerce: function(d) {
128 | 					return {
129 | 						state: d.state === 'Total' ? 'Average' : d.state,
130 | 						year: d.year,
131 | 						rate: (parseInt(d.unemployed) * 100) / parseInt(d.labor_force)
132 | 					};
133 | 				}
134 | 			}).filter(function(x) {
135 | 				return parseInt(x.year) > 1990;
136 | 			});
137 | 
138 | 			// Create a series for the chart.
139 | 			return JSC.nest()
140 | 				.key('state')
141 | 				.key('year')
142 | 				.pointRollup(function(key, val) {
143 | 					var values = val[0];
144 | 					return {
145 | 						x: '1/1/' + values.year,
146 | 						y: values.rate
147 | 					};
148 | 				})
149 | 				.series(data);
150 | 		}
151 | 	}
152 | };
153 | </script>
154 | 


--------------------------------------------------------------------------------
/examples/src/components/liveData.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .liveData {
  3 | 	height: 400px;
  4 | }
  5 | </style>
  6 | 
  7 | <template>
  8 | 	<JSCharting :options="options()" class="liveData" @rendered="start">
  9 | 	</JSCharting>
 10 | </template>
 11 | 
 12 | <script>
 13 | import JSCharting from 'jscharting-vue';
 14 | 
 15 | export default {
 16 | 	beforeDestroy: function() {
 17 | 		clearInterval(this.INTERVAL_ID);
 18 | 	},
 19 | 	name: 'liveData',
 20 | 	data() {
 21 | 		return {
 22 | 			INTERVAL_ID: 0,
 23 | 			date: new Date(2020, 0, 10).getTime(),
 24 | 			chart: null,
 25 | 			useShift: true,
 26 | 			options: () => ({
 27 | 				debug: true,
 28 | 				legend_position: 'inside top right',
 29 | 				yAxis_formatString: 'c',
 30 | 				defaultSeries: { type: 'line', opacity: 1 },
 31 | 				title_label_text: 'Data Total: %sum Average: %average',
 32 | 				defaultPoint: {
 33 | 					label_text: '%yValue',
 34 | 					marker: {
 35 | 						type: 'circle',
 36 | 						size: 11,
 37 | 						outline: { color: 'white', width: 2 }
 38 | 					}
 39 | 				},
 40 | 				xAxis_overflow: 'hidden',
 41 | 				margin_right: 20,
 42 | 				animation: { duration: 400 },
 43 | 				toolbar: {
 44 | 					margin: 5,
 45 | 					items: {
 46 | 						'Shift Values': {
 47 | 							type: 'checkbox',
 48 | 							value: true,
 49 | 							tooltip:
 50 | 								'The shift option determines whether the first point in the series is removed when adding a new point.',
 51 | 							events: { change: this.shiftPoints_btnClick.bind(this) }
 52 | 						},
 53 | 						Stop: {
 54 | 							type: 'option',
 55 | 							icon_name: 'system/default/pause',
 56 | 							boxVisible: true,
 57 | 							label_text: 'Pause',
 58 | 							events: { change: this.playPause.bind(this) },
 59 | 							states_select: {
 60 | 								icon_name: 'system/default/play',
 61 | 								label_text: 'Play'
 62 | 							}
 63 | 						}
 64 | 					}
 65 | 				},
 66 | 				xAxis: { scale_type: 'time' },
 67 | 				series: [
 68 | 					{
 69 | 						name: 'Purchases',
 70 | 						points: [
 71 | 							['1/1/2020', 29.9],
 72 | 							['1/2/2020', 71.5],
 73 | 							['1/3/2020', 106.4],
 74 | 							['1/6/2020', 129.2],
 75 | 							['1/7/2020', 144.0],
 76 | 							['1/8/2020', 176.0]
 77 | 						]
 78 | 					}
 79 | 				]
 80 | 			})
 81 | 		};
 82 | 	},
 83 | 	methods: {
 84 | 		playPause(val) {
 85 | 			if (val === true) {
 86 | 				clearInterval(this.INTERVAL_ID);
 87 | 			} else {
 88 | 				this.start(this.chart);
 89 | 			}
 90 | 		},
 91 | 		shiftPoints_btnClick(shiftVal) {
 92 | 			this.useShift = shiftVal;
 93 | 		},
 94 | 		start(chart) {
 95 | 			const me = this;
 96 | 			me.chart = chart;
 97 | 			me.INTERVAL_ID = setInterval(function() {
 98 | 				if (chart) {
 99 | 					me.addData(chart);
100 | 				}
101 | 			}, 800);
102 | 		},
103 | 		addData(chart) {
104 | 			chart
105 | 				.series(0)
106 | 				.points.add(
107 | 					{ y: Math.random() * 200, x: new Date(this.date) },
108 | 					{ shift: this.useShift }
109 | 				);
110 | 			this.date = this.date + 24 * 3600000 * 2;
111 | 		}
112 | 	},
113 | 	components: {
114 | 		JSCharting
115 | 	}
116 | };
117 | </script>
118 | 


--------------------------------------------------------------------------------
/examples/src/components/mapChoropleth.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .mapChart {
  3 | 	height: 600px;
  4 | }
  5 | </style>
  6 | 
  7 | <template>
  8 | 	<JSCharting
  9 | 		v-if="dataLoaded"
 10 | 		:options="mapOptions"
 11 | 		class="mapChart"
 12 | 	></JSCharting>
 13 | </template>
 14 | 
 15 | <script>
 16 | import JSCharting, { JSC } from 'jscharting-vue';
 17 | 
 18 | const mapChartOptions = () => {
 19 | 	return {
 20 | 		type: 'map solid',
 21 | 		title: {
 22 | 			label: {
 23 | 				text: 'Percentage of population lacking access to basic drinking water',
 24 | 				style_fontSize: 14
 25 | 			},
 26 | 			position: 'center'
 27 | 		},
 28 | 		mapping_projection: {
 29 | 			type: 'lambertConformalConic',
 30 | 			parallels: [10, 9]
 31 | 		},
 32 | 		defaultPoint: {
 33 | 			tooltip: '%name <b>{%zValue:n1}%</b>',
 34 | 			outline: { color: 'white', width: 0.5 },
 35 | 			states_hover: {
 36 | 				outline: { color: '#7a7a7a' }
 37 | 			},
 38 | 			focusGlow_width: 2
 39 | 		},
 40 | 		legend_position: 'bottom',
 41 | 
 42 | 		palette: {
 43 | 			pointValue: p => p.options('z'),
 44 | 			colors: [
 45 | 				'#ff3d00',
 46 | 				'#ff7213',
 47 | 				'#ffa726',
 48 | 				'#ffc041',
 49 | 				'#ffd85b',
 50 | 				'#fff176',
 51 | 				'#eaee87',
 52 | 				'#d6eb99',
 53 | 				'#c1e8aa',
 54 | 				'#6ec1bb',
 55 | 				'#1b9acb'
 56 | 			].reverse(),
 57 | 			colorBar: {
 58 | 				width: 8,
 59 | 				axis: {
 60 | 					crosshair: {
 61 | 						label_text: '{%value:n1}%',
 62 | 						outline_width: 0
 63 | 					},
 64 | 					defaultTick_label: { text: '%value%' }
 65 | 				}
 66 | 			}
 67 | 		}
 68 | 	};
 69 | };
 70 | 
 71 | export default {
 72 | 	name: 'mapChoropleth',
 73 | 	mounted: function() {
 74 | 		const me = this;
 75 | 		fetch('./resources/access-to-drinking-water-by-country.csv')
 76 | 			.then(function(response) {
 77 | 				return response.text();
 78 | 			})
 79 | 			.then(function(text) {
 80 | 				let jsonData = JSC.csv2Json(text);
 81 | 				const points = JSC.nest()
 82 | 					.key('country_code')
 83 | 					.pointRollup(function(key, val) {
 84 | 						let values = val[0];
 85 | 						return {
 86 | 							map: values.country_code,
 87 | 							z: 100 - values.value
 88 | 						};
 89 | 					})
 90 | 					.points(jsonData);
 91 | 				me.mapOptions = JSC.merge(mapChartOptions(), { series: [{ points }] });
 92 | 				me.dataLoaded = true;
 93 | 			});
 94 | 	},
 95 | 	data() {
 96 | 		return {
 97 | 			dataObject: undefined,
 98 | 			mapOptions: mapChartOptions(),
 99 | 			dataLoaded: false
100 | 		};
101 | 	},
102 | 	components: {
103 | 		JSCharting
104 | 	}
105 | };
106 | </script>
107 | 


--------------------------------------------------------------------------------
/examples/src/components/masterDetail.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .chartA {
  3 | 	max-width: 700px;
  4 | 	height: 250px;
  5 | 	margin: 0 auto;
  6 | }
  7 | .chartB {
  8 | 	max-width: 700px;
  9 | 	height: 450px;
 10 | 	margin: 0 auto;
 11 | }
 12 | </style>
 13 | 
 14 | <template>
 15 | 	<div>
 16 | 		<JSCharting ref="chartA" :options="configA" class="chartA" />
 17 | 		<JSCharting ref="chartB" :options="configB" class="chartB" />
 18 | 	</div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import { JSCharting, JSC } from 'jscharting-vue';
 23 | 
 24 | const initialView = [1990, 2015];
 25 | const configA = () => ({
 26 | 	debug: true,
 27 | 	title_label_text: 'Births to Unmarried Women by Age Group',
 28 | 	animation: false,
 29 | 	legend: {
 30 | 		template: '%icon %name',
 31 | 		position: 'bottom'
 32 | 	},
 33 | 	defaultPoint_marker_type: 'none',
 34 | 	defaultSeries_mouseTracking_enabled: false,
 35 | 	yAxis: {
 36 | 		alternateGridFill: 'none',
 37 | 		label_text: 'Number of births'
 38 | 	},
 39 | 	xAxis: {
 40 | 		formatString: 'd',
 41 | 		label_text: 'Year',
 42 | 		markers: [
 43 | 			{
 44 | 				value: initialView,
 45 | 				legendEntry_visible: false
 46 | 			}
 47 | 		]
 48 | 	},
 49 | 	toolbar_items: {
 50 | 		export_visible: false,
 51 | 		slider: {
 52 | 			position: 'inside top',
 53 | 			type: 'range',
 54 | 			label_text: '1940-2015',
 55 | 			visible: true,
 56 | 			width: 595,
 57 | 			value: initialView,
 58 | 			min: 1940,
 59 | 			max: 2015
 60 | 			//events_change: updateDetailChart
 61 | 		}
 62 | 	},
 63 | 	series: [
 64 | 		{
 65 | 			points: []
 66 | 		}
 67 | 	]
 68 | });
 69 | 
 70 | const configB = () => ({
 71 | 	title_label_text: 'Detail',
 72 | 	animation: false,
 73 | 	debug: true,
 74 | 	legend_visible: false,
 75 | 	defaultPoint: {
 76 | 		marker_type: 'none',
 77 | 		tooltip: '%seriesName %icon %yValue'
 78 | 	},
 79 | 	yAxis: {
 80 | 		alternateGridFill: 'none',
 81 | 		label_text: 'Number of births'
 82 | 	},
 83 | 	xAxis: {
 84 | 		crosshair_enabled: true,
 85 | 		formatString: 'd',
 86 | 		label_text: 'Year'
 87 | 	},
 88 | 	series: [
 89 | 		{
 90 | 			points: []
 91 | 		}
 92 | 	]
 93 | });
 94 | 
 95 | export default {
 96 | 	name: 'masterDetail',
 97 | 	mounted: function() {
 98 | 		const me = this;
 99 | 		fetch('https://data.cdc.gov/resource/fvae-a8ai.csv')
100 | 			.then(function(response) {
101 | 				return response.text();
102 | 			})
103 | 			.then(function(text) {
104 | 				me.dataObject = JSC.csv2Json(text);
105 | 				me.configA = JSC.merge(configA(), {
106 | 					series: me.getSeries(),
107 | 					toolbar_items_slider_events_change: me.updateDetailChart
108 | 				});
109 | 				me.configB = JSC.merge(configB(), {
110 | 					series: me.getSeries()
111 | 				});
112 | 			});
113 | 	},
114 | 	data() {
115 | 		return {
116 | 			dataObject: undefined,
117 | 			configA: configA(),
118 | 			configB: configB()
119 | 		};
120 | 	},
121 | 	methods: {
122 | 		getSeries() {
123 | 			const me = this;
124 | 			return JSC.nest()
125 | 				.key('age_group')
126 | 				.key('year')
127 | 				.rollup('birth_number')
128 | 				.series(me.dataObject);
129 | 		},
130 | 		updateDetailChart(range) {
131 | 			if (this.$refs.chartB) {
132 | 				const chartDetail = this.$refs.chartB.instance,
133 | 					chart = this.$refs.chartA.instance;
134 | 				//Update marker position on main chart.
135 | 				chart
136 | 					.axes('x')
137 | 					.markers(0)
138 | 					.options({ value: range });
139 | 				//Update details chart zoom
140 | 				chartDetail.axes('x').zoom(range);
141 | 			}
142 | 		}
143 | 	},
144 | 	components: {
145 | 		JSCharting
146 | 	}
147 | };
148 | </script>
149 | 


--------------------------------------------------------------------------------
/examples/src/components/methodUpdate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<JSCharting :options="options" style="height:400px;"></JSCharting>
 4 | 		<button v-on:click="updateData">Update Chart Data</button>
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import JSCharting from 'jscharting-vue';
10 | 
11 | export default {
12 | 	name: 'methodUpdate',
13 | 	data() {
14 | 		let options = {
15 | 			type: 'line spline',
16 | 			title: { label: { text: 'Series updates' } },
17 | 			legend: {
18 | 				position: 'inside top right'
19 | 			},
20 | 			xAxis: { scale: { type: 'time' } },
21 | 			defaultPoint: {
22 | 				marker: {
23 | 					outline: {
24 | 						width: 2,
25 | 						color: 'currentColor'
26 | 					},
27 | 					fill: 'white'
28 | 				}
29 | 			},
30 | 			series: [
31 | 				{
32 | 					name: 'Purchases',
33 | 					points: this.randomPoints()
34 | 				}
35 | 			]
36 | 		};
37 | 		return {
38 | 			options
39 | 		};
40 | 	},
41 | 	methods: {
42 | 		updateData() {
43 | 			this.options = {
44 | 				series: [
45 | 					{
46 | 						name: 'Purchases',
47 | 						points: this.randomPoints()
48 | 					}
49 | 				]
50 | 			};
51 | 		},
52 | 		randomPoints() {
53 | 			let points = [];
54 | 			for (let i = 1; i < 12; i++) {
55 | 				points.push({
56 | 					id: 'p' + i,
57 | 					x: `1/${i * 2}/2020`,
58 | 					y: Math.random() * 10
59 | 				});
60 | 			}
61 | 			return points;
62 | 		}
63 | 	},
64 | 	components: {
65 | 		JSCharting
66 | 	}
67 | };
68 | </script>
69 | 


--------------------------------------------------------------------------------
/examples/src/components/microchartFast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<p>
 4 | 			The JSCLabel chart is a simple string based generator that creates simple
 5 | 			SVG charts very quickly.
 6 | 		</p>
 7 | 		<p>
 8 | 			This chart is created with the string
 9 | 			<i>&lt;chart type="column" data=12,23,... width=800 height=300&gt;</i>
10 | 		</p>
11 | 		<p>
12 | 			Microchart string reference:
13 | 			<a href="https://jscharting.com/tutorials/types/js-microcharts/"
14 | 				>MicroCharts</a
15 | 			>
16 | 		</p>
17 | 		<JSCLabel :options="labelConfig"></JSCLabel>
18 | 	</div>
19 | </template>
20 | 
21 | <script>
22 | import { JSCLabel } from 'jscharting-vue';
23 | 
24 | export default {
25 | 	name: 'microchartFast',
26 | 	mounted: function() {
27 | 		this.start();
28 | 	},
29 | 	beforeUnmount: function() {
30 | 		clearInterval(this.INTERVAL_ID);
31 | 	},
32 | 	data() {
33 | 		return {
34 | 			INTERVAL_ID: 0,
35 | 			mySeed: 0,
36 | 			labelConfig: `<chart type="column" data=${this.makeYData(
37 | 				0
38 | 			)} width=800 height=300>`
39 | 		};
40 | 	},
41 | 	methods: {
42 | 		makeYData: (seed, len = 100) => {
43 | 			let list = [];
44 | 			for (let i = 0, iLen = len; i < iLen; i++) {
45 | 				list.push(Math.sin(seed + i * 0.1));
46 | 			}
47 | 			return list.join(',');
48 | 		},
49 | 		updateChart: function() {
50 | 			this.labelConfig = `<chart type="column" data=${this.makeYData(
51 | 				this.mySeed
52 | 			)} width=800 height=300>`;
53 | 			this.mySeed += 0.1;
54 | 		},
55 | 		start: function() {
56 | 			this.INTERVAL_ID = setInterval(this.updateChart, 10);
57 | 		}
58 | 	},
59 | 	components: {
60 | 		JSCLabel
61 | 	}
62 | };
63 | </script>
64 | 


--------------------------------------------------------------------------------
/examples/src/components/simpleLine.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .simpleLine {
  3 | 	height: 400px;
  4 | }
  5 | </style>
  6 | 
  7 | <template>
  8 | 	<JSCharting :options="options" class="simpleLine"></JSCharting>
  9 | </template>
 10 | 
 11 | <script>
 12 | import JSCharting from 'jscharting-vue';
 13 | 
 14 | export default {
 15 | 	name: 'simpleLine',
 16 | 	data() {
 17 | 		return {
 18 | 			options: {
 19 | 				legend_visible: false,
 20 | 				title_label_text: 'Cost over time',
 21 | 				yAxis: [
 22 | 					{ id: 'mainY', formatString: 'c' },
 23 | 					{
 24 | 						id: 'secondY',
 25 | 						scale_syncWith: 'mainY',
 26 | 						orientation: 'opposite',
 27 | 						line_color: '#e2e2e2',
 28 | 						defaultTick: {
 29 | 							enabled: false,
 30 | 							gridLine_visible: false
 31 | 						}
 32 | 					}
 33 | 				],
 34 | 				xAxis: {
 35 | 					crosshair_enabled: true,
 36 | 					scale: { type: 'time' }
 37 | 				},
 38 | 				defaultSeries: {
 39 | 					type: 'line',
 40 | 					defaultPoint_marker_visible: false,
 41 | 					lastPoint: {
 42 | 						label_text: '<b>%seriesName</b>',
 43 | 						yAxisTick: {
 44 | 							axisId: 'secondY',
 45 | 							label_text: '%yValue'
 46 | 						}
 47 | 					}
 48 | 				},
 49 | 				series: [
 50 | 					{
 51 | 						name: 'Purchases',
 52 | 						points: [
 53 | 							['1/1/2020', 29.9],
 54 | 							['2/1/2020', 97.5],
 55 | 							['3/1/2020', 110.4],
 56 | 							['4/1/2020', 129.2],
 57 | 							['5/1/2020', 144.0],
 58 | 							['6/1/2020', 176.0],
 59 | 							['7/1/2020', 182.0],
 60 | 							['8/1/2020', 186.0],
 61 | 							['9/1/2020', 181.0],
 62 | 							['10/1/2020', 178.0],
 63 | 							['11/1/2020', 184.0],
 64 | 							['12/1/2020', 176.0]
 65 | 						]
 66 | 					},
 67 | 					{
 68 | 						name: 'Taxes',
 69 | 						points: [
 70 | 							['1/1/2020', 86.9],
 71 | 							['2/1/2020', 79.5],
 72 | 							['3/1/2020', 95.4],
 73 | 							['4/1/2020', 97.2],
 74 | 							['5/1/2020', 123.0],
 75 | 							['6/1/2020', 111.0],
 76 | 							['7/1/2020', 122.0],
 77 | 							['8/1/2020', 135.0],
 78 | 							['9/1/2020', 140.0],
 79 | 							['10/1/2020', 139.0],
 80 | 							['11/1/2020', 135.0],
 81 | 							['12/1/2020', 132.0]
 82 | 						]
 83 | 					},
 84 | 					{
 85 | 						name: 'Supplies',
 86 | 						points: [
 87 | 							['1/1/2020', 129.9],
 88 | 							['2/1/2020', 111.5],
 89 | 							['3/1/2020', 66.4],
 90 | 							['4/1/2020', 29.2],
 91 | 							['5/1/2020', 88.0],
 92 | 							['6/1/2020', 102.0],
 93 | 							['7/1/2020', 82.0],
 94 | 							['8/1/2020', 75.0],
 95 | 							['9/1/2020', 162.0],
 96 | 							['10/1/2020', 110.0],
 97 | 							['11/1/2020', 90.0],
 98 | 							['12/1/2020', 85.0]
 99 | 						]
100 | 					},
101 | 					{
102 | 						name: 'Rent',
103 | 						points: [
104 | 							['1/1/2020', 56.9],
105 | 							['2/1/2020', 56.5],
106 | 							['3/1/2020', 56.4],
107 | 							['4/1/2020', 56.2],
108 | 							['5/1/2020', 75.0],
109 | 							['6/1/2020', 56.0],
110 | 							['7/1/2020', 56.0],
111 | 							['8/1/2020', 56.0],
112 | 							['9/1/2020', 56.0],
113 | 							['10/1/2020', 67.0],
114 | 							['11/1/2020', 67.0],
115 | 							['12/1/2020', 67.0]
116 | 						]
117 | 					}
118 | 				]
119 | 			}
120 | 		};
121 | 	},
122 | 	components: {
123 | 		JSCharting
124 | 	}
125 | };
126 | </script>
127 | 


--------------------------------------------------------------------------------
/examples/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 | 	render: h => h(App)
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------
/examples/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 2 | const path = require('path');
 3 | 
 4 | module.exports = {
 5 | 	publicPath: process.env.NODE_ENV === 'production'
 6 | 		? '/my-project/'
 7 | 		: '/',
 8 | 	configureWebpack: {
 9 | 		plugins: [
10 | 			new CopyWebpackPlugin([
11 | 				{
12 | 					from: path.join(__dirname, 'node_modules/jscharting/dist/'),
13 | 					to: path.join(__dirname, 'dist/assets/jscharting/'),
14 | 					ignore: ['jscharting.*']
15 | 				}
16 | 			])
17 | 		]
18 | 	}
19 | };
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "jscharting-vue",
  3 | 	"version": "2.4.0",
  4 | 	"description": "JSCharting plugin for Vue.js",
  5 | 	"homepage": "https://jscharting.com/",
  6 | 	"author": "JSCharting <support@jscharting.com> (https://jscharting.com/support.htm)",
  7 | 	"bugs": {
  8 | 		"email": "support@jscharting.com"
  9 | 	},
 10 | 	"license": "jscharting.com/store/",
 11 | 	"main": "./src/main.js",
 12 | 	"typings": "types/jscharting-vue.d.ts",
 13 | 	"scripts": {
 14 | 		"build-examples": "cd examples && npm install && npm run build",
 15 | 		"build-examples-vue3": "cd examples-vue3 && npm install && npm run build",
 16 | 		"serve-examples": "cd examples && npm install && npm run serve",
 17 | 		"serve-examples-vue3": "cd examples-vue3 && npm install && npm run serve",
 18 | 		"lint": "eslint src/components/** scripts/** ",
 19 | 		"format": "prettier --config ./.prettierrc.js --write src/**/*.vue tests/** scripts/**",
 20 | 		"postinstall": "node ./scripts/postinstall.js",
 21 | 		"test": "jest"
 22 | 	},
 23 | 	"jest": {
 24 | 		"moduleFileExtensions": [
 25 | 			"js",
 26 | 			"json",
 27 | 			"vue"
 28 | 		],
 29 | 		"transform": {
 30 | 			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
 31 | 			".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
 32 | 		},
 33 | 		"moduleNameMapper": {
 34 | 			"^@/(.*)$": "<rootDir>/src/components/$1"
 35 | 		}
 36 | 	},
 37 | 	"dependencies": {
 38 | 		"jscharting": "^3.4.0"
 39 | 	},
 40 | 	"devDependencies": {
 41 | 		"@babel/core": "^7.16.5",
 42 | 		"@babel/preset-env": "^7.8.3",
 43 | 		"@vue/cli-plugin-babel": "~4.5.0",
 44 | 		"@vue/cli-plugin-eslint": "^4.1.0",
 45 | 		"@vue/cli-plugin-typescript": "~4.5.0",
 46 | 		"@vue/cli-service": "~4.5.0",
 47 | 		"@vue/compiler-sfc": "^3.0.7",
 48 | 		"@vue/test-utils": "^1.0.0-beta.31",
 49 | 		"babel-core": "^7.0.0-bridge.0",
 50 | 		"babel-eslint": "^10.0.3",
 51 | 		"core-js": "^3.4.3",
 52 | 		"eslint": "^5.16.0",
 53 | 		"eslint-plugin-vue": "^5.0.0",
 54 | 		"jest": "^25.1.0",
 55 | 		"prettier": "^1.19.1",
 56 | 		"vue": "^2.6.10",
 57 | 		"vue-jest": "^3.0.5",
 58 | 		"vue-template-compiler": "^2.6.10"
 59 | 	},
 60 | 	"peerDependencies": {
 61 | 		"vue": "^2.6.10 || >=3.0.5"
 62 | 	},
 63 | 	"eslintConfig": {
 64 | 		"root": true,
 65 | 		"env": {
 66 | 			"node": true,
 67 | 			"jest": true
 68 | 		},
 69 | 		"extends": [
 70 | 			"plugin:vue/essential",
 71 | 			"eslint:recommended"
 72 | 		],
 73 | 		"rules": {},
 74 | 		"parserOptions": {
 75 | 			"parser": "babel-eslint"
 76 | 		}
 77 | 	},
 78 | 	"browserslist": [
 79 | 		"> 1%",
 80 | 		"last 2 versions"
 81 | 	],
 82 | 	"repository": {
 83 | 		"type": "git",
 84 | 		"url": "git+https://github.com/jscharting/jscharting-vue.git"
 85 | 	},
 86 | 	"keywords": [
 87 | 		"charts",
 88 | 		"dataviz",
 89 | 		"graphs",
 90 | 		"visualization",
 91 | 		"javascript-chart",
 92 | 		"javascript",
 93 | 		"vuejs",
 94 | 		"vue"
 95 | 	],
 96 | 	"files": [
 97 | 		"src/",
 98 | 		"types/",
 99 | 		"scripts/",
100 | 		"*.md",
101 | 		"babel.config.js",
102 | 		".travis.yml"
103 | 	]
104 | }
105 | 


--------------------------------------------------------------------------------
/scripts/postinstall.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | console.log('POST INSTALL');
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const dir = path.resolve(__dirname, '..', 'src/components');
 6 | 
 7 | function loadModule(name) {
 8 | 	try {
 9 | 		return require(name);
10 | 	} catch (e) {
11 | 		return undefined;
12 | 	}
13 | }
14 | 
15 | const Vue = loadModule('vue');
16 | 
17 | if (!Vue || typeof Vue.version !== 'string') {
18 | 	console.warn(
19 | 		'[jscharting-vue] Vue is not found. Please run "npm install vue" to install.'
20 | 	);
21 | } else if (Vue.version.startsWith('3.')) {
22 | 	// read files from component directory
23 | 	const files = fs.readdirSync(dir);
24 | 	files.forEach(file => {
25 | 		const readFile = fs.readFileSync(path.join(dir, file), 'utf8');
26 | 
27 | 		// replace beforeDestroy lifecycle hook with beforeUnmount
28 | 		const newFile = readFile.replace(/beforeDestroy/g, 'beforeUnmount');
29 | 		fs.writeFileSync(path.join(dir, file), newFile, 'utf8');
30 | 	});
31 | } else if (!Vue.version.startsWith('2.')) {
32 | 	console.warn(
33 | 		`[jscharting-vue] Vue version v${Vue.version} is not suppported.`
34 | 	);
35 | }
36 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jscharting/jscharting-vue/9c1f4a8ba8e0e8d3c15c084bad65900468da87fa/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/jscgrid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as JSC from 'jscharting';
 7 | export default {
 8 | 	name: 'JSCGrid',
 9 | 	props: {
10 | 		options: { type: Object, required: true },
11 | 		mutable: { type: Boolean, default: true }
12 | 	},
13 | 	mounted: function() {
14 | 		this.renderGrid();
15 | 	},
16 | 	beforeDestroy: function() {
17 | 		this.destroyGrid();
18 | 	},
19 | 	watch: {
20 | 		options: function() {
21 | 			this.renderGrid();
22 | 		}
23 | 	},
24 | 	methods: {
25 | 		destroyGrid: function() {
26 | 			if (this.instance) {
27 | 				this.instance.destroy();
28 | 				this.instance = undefined;
29 | 			}
30 | 		},
31 | 		renderGrid: function() {
32 | 			const options = this.options;
33 | 			const updateExisting = this.instance && this.mutable !== false;
34 | 			if (updateExisting) {
35 | 				this.instance.options(this.options);
36 | 			} else {
37 | 				this.destroyGrid();
38 | 				const containerElement = this.$el;
39 | 				JSC.Grid(containerElement, options).then(grid => {
40 | 					this.instance = grid;
41 | 					this.$emit('rendered', grid);
42 | 				});
43 | 			}
44 | 		}
45 | 	}
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/jscharting.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { Chart } from 'jscharting';
 7 | 
 8 | export default {
 9 | 	name: 'JSCharting',
10 | 	props: {
11 | 		options: { type: Object, required: true },
12 | 		mutable: { type: Boolean, default: true },
13 | 		ignoreStateUpdate: { type: Boolean, default: false }
14 | 	},
15 | 	data() {
16 | 		return {
17 | 			instance: undefined
18 | 		};
19 | 	},
20 | 	mounted: function() {
21 | 		this.createChart();
22 | 	},
23 | 	beforeDestroy: function() {
24 | 		this.destroyChart();
25 | 	},
26 | 	watch: {
27 | 		options: {
28 | 			deep: true,
29 | 			handler() {
30 | 				// Skip update if chart exists and ignoreStateUpdate is true
31 | 				if (this.instance && this.ignoreStateUpdate) return;
32 | 
33 | 				this.createChart();
34 | 			}
35 | 		}
36 | 	},
37 | 	methods: {
38 | 		createChart: function() {
39 | 			const options = this.options || {};
40 | 
41 | 			// If the instance does not exist yet, create one
42 | 			if (!this.instance) {
43 | 				this.renderChart(options);
44 | 				return;
45 | 			}
46 | 
47 | 			if (this.mutable && !this.instance.dirty) {
48 | 				// If the mutable is true and the instance is not dirty, update the existing instance
49 | 				this.instance.options(options);
50 | 			} else {
51 | 				// Create a new instance with the new values
52 | 				this.renderChart(options);
53 | 			}
54 | 		},
55 | 		renderChart(options) {
56 | 			this.destroyChart();
57 | 			this.instance = new Chart(
58 | 				options.targetElement || this.$el,
59 | 				options,
60 | 				chart => this.$emit('rendered', chart)
61 | 			);
62 | 		},
63 | 		destroyChart: function() {
64 | 			if (this.instance) {
65 | 				this.instance.destroy();
66 | 				this.instance = undefined;
67 | 			}
68 | 		}
69 | 	}
70 | };
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/components/jsclabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import * as JSC from 'jscharting';
 7 | export default {
 8 | 	name: 'JSCLabel',
 9 | 	props: {
10 | 		options: { type: String, default: '' }
11 | 	},
12 | 	mounted: function() {
13 | 		this.renderLabel();
14 | 	},
15 | 	beforeDestroy: function() {
16 | 		this.destroyLabel();
17 | 	},
18 | 	watch: {
19 | 		options: function() {
20 | 			this.renderLabel();
21 | 		}
22 | 	},
23 | 	methods: {
24 | 		destroyLabel: function() {
25 | 			const containerElement = this.$el;
26 | 			containerElement.innerHTML = '';
27 | 		},
28 | 		renderLabel: function() {
29 | 			this.destroyLabel();
30 | 			const containerElement = this.$el;
31 | 			JSC.label(containerElement, this.options);
32 | 		}
33 | 	}
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import JSCharting from './components/jscharting.vue';
2 | import JSCLabel from './components/jsclabel.vue';
3 | import JSCGrid from './components/jscgrid.vue';
4 | import * as JSC from 'jscharting';
5 | 
6 | export default JSCharting;
7 | export { JSCharting, JSCLabel, JSCGrid, JSC };
8 | 


--------------------------------------------------------------------------------
/tests/jscgrid.test.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | import { JSCGrid } from '../src/main';
 3 | 
 4 | describe('JSCGrid unit tests', () => {
 5 | 	const wrapper = mount(JSCGrid, {
 6 | 		propsData: {
 7 | 			options: {
 8 | 				className: 'jscTable',
 9 | 				data: [
10 | 					['Art', 5, 10],
11 | 					['Greg', 3, 6],
12 | 					['Olivia', 11, 8],
13 | 					['Steve', 11, 4],
14 | 					['Anna', 3, 8]
15 | 				]
16 | 			}
17 | 		}
18 | 	});
19 | 
20 | 	test('Wrapper is a Vue instance', () => {
21 | 		expect(wrapper.exists()).toBeTruthy();
22 | 	});
23 | 
24 | 	test('Grid should be destroyed after component is destroyed.', () => {
25 | 		wrapper.destroy();
26 | 		expect(wrapper.element.innerHTML === '').toBeTruthy();
27 | 	});
28 | });
29 | 


--------------------------------------------------------------------------------
/tests/jscharting.test.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | import { JSCharting } from '../src/main';
 3 | 
 4 | const propsData = {
 5 | 	options: {
 6 | 		series: [
 7 | 			{
 8 | 				points: [
 9 | 					{
10 | 						x: 0,
11 | 						y: 1
12 | 					},
13 | 					{
14 | 						x: 1,
15 | 						y: 2
16 | 					}
17 | 				]
18 | 			}
19 | 		]
20 | 	}
21 | };
22 | 
23 | describe('JSCharting unit tests', () => {
24 | 	const wrapper = mount(JSCharting, { propsData });
25 | 	const chart = wrapper.vm.instance;
26 | 
27 | 	test('Wrapper is a Vue instance', () => {
28 | 		expect(wrapper.exists()).toBeTruthy();
29 | 	});
30 | 
31 | 	test('Component has JSCharting instance', () => {
32 | 		expect(chart).not.toBeUndefined();
33 | 	});
34 | 
35 | 	test('Chart data is set correctly', () => {
36 | 		expect(chart.options('series')[0].points[0].x).toBe(0);
37 | 		expect(chart.options('series')[0].points[0].y).toBe(1);
38 | 		expect(chart.options('series')[0].points[1].x).toBe(1);
39 | 		expect(chart.options('series')[0].points[1].y).toBe(2);
40 | 	});
41 | 
42 | 	test('Rendered event should be invoked.', () => {
43 | 		expect(wrapper.emitted().rendered).toBeTruthy();
44 | 	});
45 | 
46 | 	test('Chart should be destroyed after component is unmounted.', () => {
47 | 		wrapper.destroy();
48 | 		expect(wrapper.vm.instance).toBeUndefined();
49 | 	});
50 | });
51 | 


--------------------------------------------------------------------------------
/tests/jsclabel.test.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | import { JSCLabel } from '../src/main';
 3 | 
 4 | describe('JSCLabel unit tests', () => {
 5 | 	const wrapper = mount(JSCLabel, {
 6 | 		propsData: { options: '<b>JSCLabel test string</b>' }
 7 | 	});
 8 | 	const element = wrapper.element;
 9 | 
10 | 	test('Wrapper is a Vue instance', () => {
11 | 		expect(wrapper.exists()).toBeTruthy();
12 | 	});
13 | 
14 | 	test('Label data is set correctly', () => {
15 | 		let renderedString =
16 | 			'<text><tspan x="0px" font-weight="bold" style="white-space: pre">JSCLabel test string</tspan></text>';
17 | 		expect(element.innerHTML.indexOf(renderedString) > -1).toBeTruthy();
18 | 	});
19 | 
20 | 	test('Label should be destroyed after component is destroyed.', () => {
21 | 		wrapper.destroy();
22 | 		expect(wrapper.element.innerHTML === '').toBeTruthy();
23 | 	});
24 | });
25 | 


--------------------------------------------------------------------------------
/types/jscharting-vue.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, {WatchOptionsWithHandler} from 'vue'
 2 | import * as JSC from 'jscharting';
 3 | 
 4 | export interface ChartWatchObject {
 5 | 	options: WatchOptionsWithHandler<any>;
 6 | }
 7 | 
 8 | // Chart
 9 | export interface ChartPropsObject {
10 | 	options: JSC.JSCChartConfig;
11 | 	mutable?: boolean;
12 | 	ignoreStateUpdate?: boolean;
13 | }
14 | 
15 | export default class JSCharting extends Vue {
16 | 	props: ChartPropsObject;
17 | 	template: string;
18 | 	watch: ChartWatchObject;
19 | 	beforeDestroy: () => void;
20 | 	mounted: () => void;
21 | 	createChart: () => void;
22 | 	destroyChart: () => void;
23 | 	instance?: JSC.Chart;
24 | 
25 | }
26 | 
27 | // Grid
28 | export interface GridPropsObject {
29 | 	options: JSC.JSCGridConfig;
30 | 	mutable?: boolean;
31 | }
32 | 
33 | export class JSCGrid extends Vue {
34 | 	props: GridPropsObject;
35 | 	template: string;
36 | 	watch: ChartWatchObject;
37 | 	beforeDestroy: () => void;
38 | 	mounted: () => void;
39 | 	renderGrid: () => void;
40 | 	destroyGrid: () => void;
41 | 
42 | }
43 | 
44 | // Label
45 | export interface LabelPropsObject {
46 | 	options: string;
47 | }
48 | 
49 | export class JSCLabel extends Vue {
50 | 	props: LabelPropsObject;
51 | 	template: string;
52 | 	watch: ChartWatchObject;
53 | 	beforeDestroy: () => void;
54 | 	mounted: () => void;
55 | 	renderGrid: () => void;
56 | 	destroyGrid: () => void;
57 | 
58 | }
59 | 
60 | export {JSC as JSC};
61 | 
62 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	configureWebpack: {
3 | 		externals: {
4 | 			jscharting: 'jscharting'
5 | 		}
6 | 	}
7 | };
8 | 


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