nuxt-charts 0.1.1 â 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -23
- package/dist/module.json +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -3,14 +3,16 @@
|
|
|
3
3
|
[![npm version][npm-version-src]][npm-version-href]
|
|
4
4
|
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
5
5
|
|
|
6
|
-
> Nuxt module for vue-
|
|
6
|
+
> Nuxt module for vue-s
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
10
|
- ð Use beautiful chart components in your Nuxt applications
|
|
11
11
|
- ð Auto-imports for all chart components
|
|
12
|
-
-
|
|
13
|
-
-
|
|
12
|
+
- ð Multiple types: Line, Bar, Area, Donut
|
|
13
|
+
- ðĻ Easily customizable
|
|
14
|
+
- ðĄ Simple, intuitive API
|
|
15
|
+
- ð Built with Vue 3 and TypeScript
|
|
14
16
|
|
|
15
17
|
## Installation
|
|
16
18
|
|
|
@@ -41,35 +43,50 @@ Then use the components in your Nuxt application:
|
|
|
41
43
|
```vue
|
|
42
44
|
<template>
|
|
43
45
|
<div class="chart-wrapper">
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
<LineChart
|
|
47
|
+
:data="data"
|
|
48
|
+
:categories="categories"
|
|
49
|
+
:height="300"
|
|
50
|
+
:xFormatter="xFormatter"
|
|
51
|
+
xLabel="Month"
|
|
52
|
+
yLabel="Amount"
|
|
53
|
+
/>
|
|
50
54
|
</div>
|
|
51
55
|
</template>
|
|
52
56
|
|
|
53
57
|
<script setup>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
{
|
|
58
|
-
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
import { LineChart } from 'vue-chrts';
|
|
59
|
+
|
|
60
|
+
const data = [
|
|
61
|
+
{ month: 'Jan', sales: 100, profit: 50 },
|
|
62
|
+
{ month: 'Feb', sales: 120, profit: 55 },
|
|
63
|
+
{ month: 'Mar', sales: 180, profit: 80 },
|
|
64
|
+
{ month: 'Apr', sales: 110, profit: 40 },
|
|
65
|
+
{ month: 'May', sales: 90, profit: 30 },
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
const categories = {
|
|
69
|
+
sales: {
|
|
70
|
+
name: 'Sales',
|
|
71
|
+
color: '#3b82f6'
|
|
72
|
+
},
|
|
73
|
+
profit: {
|
|
74
|
+
name: 'Profit',
|
|
75
|
+
color: '#10b981'
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
const xFormatter = (i) => data[i].month;
|
|
63
80
|
</script>
|
|
64
81
|
```
|
|
65
82
|
|
|
66
83
|
## Available Components
|
|
67
84
|
|
|
68
|
-
- `
|
|
69
|
-
- `
|
|
70
|
-
- `
|
|
71
|
-
- `
|
|
72
|
-
- `
|
|
85
|
+
- `AreaChart` - Area chart
|
|
86
|
+
- `AreaStackedChart` - Stacked area chart
|
|
87
|
+
- `LineChart` - Line chart
|
|
88
|
+
- `BarChart` - Bar chart
|
|
89
|
+
- `DonutChart` - Donut chart
|
|
73
90
|
|
|
74
91
|
## Auto-imported Types
|
|
75
92
|
|
package/dist/module.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-charts",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Nuxt module for vue-chrts",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@nuxt/kit": "^3.11.1",
|
|
31
31
|
"@unovis/vue": "^1.5.1",
|
|
32
|
-
"vue-chrts": "0.1.
|
|
32
|
+
"vue-chrts": "0.1.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@nuxt/eslint": "1.3.0",
|