vue-data-ui 2.1.92 → 2.1.94
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/LICENSE +21 -21
- package/README.md +409 -409
- package/dist/documentation/installation.md +190 -190
- package/dist/{index-2efc7911.js → index-97890d03.js} +4855 -4824
- package/dist/{index.es-4f43a869.js → index.es-3b6fc98e.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/types/vue-data-ui.d.ts +5251 -5247
- package/dist/vue-data-ui.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,409 +1,409 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://vue-data-ui.graphieros.com/"><img src="https://vue-data-ui.graphieros.com/vue-data-ui2.png"></a>
|
|
3
|
-
<br>
|
|
4
|
-
<br>
|
|
5
|
-
<br>
|
|
6
|
-
<a href="https://vue-data-ui.graphieros.com/"><img src="https://vue-data-ui.graphieros.com/vue-data-ui-showcase.png"></a>
|
|
7
|
-
</p>
|
|
8
|
-
|
|
9
|
-
# vue-data-ui
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[](https://madewithvuejs.com/p/vue-data-ui/shield-link)
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
[Interactive documentation](https://vue-data-ui.graphieros.com/)
|
|
19
|
-
|
|
20
|
-
A user-empowering data visualization Vue components library for eloquent data storytelling.
|
|
21
|
-
|
|
22
|
-
Available components
|
|
23
|
-
|
|
24
|
-
## Charts
|
|
25
|
-
|
|
26
|
-
- [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid)
|
|
27
|
-
- [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick)
|
|
28
|
-
- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)
|
|
29
|
-
- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
|
|
30
|
-
- [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)
|
|
31
|
-
- [VueUiDumbbell](https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell)
|
|
32
|
-
- [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy)
|
|
33
|
-
- [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge)
|
|
34
|
-
- [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)
|
|
35
|
-
- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
|
|
36
|
-
- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
|
|
37
|
-
- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)
|
|
38
|
-
- [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion)
|
|
39
|
-
- [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant)
|
|
40
|
-
- [VueUiQuickChart](https://vue-data-ui.graphieros.com/docs#vue-ui-quick-chart)
|
|
41
|
-
- [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)
|
|
42
|
-
- [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)
|
|
43
|
-
- [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
|
|
44
|
-
- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
|
|
45
|
-
- [VueUiStripPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-strip-plot)
|
|
46
|
-
- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
|
|
47
|
-
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
|
|
48
|
-
- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
|
|
49
|
-
- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
|
|
50
|
-
- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
|
|
51
|
-
- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
|
|
52
|
-
- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
|
|
53
|
-
|
|
54
|
-
## Mini charts
|
|
55
|
-
|
|
56
|
-
- [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram)
|
|
57
|
-
- [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)
|
|
58
|
-
- [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge)
|
|
59
|
-
- [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
|
|
60
|
-
- [VueUiSparkStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
|
|
61
|
-
- [VueUiSparkTrend](https://vue-data-ui.graphieros.com/docs#vue-ui-spark-trend)
|
|
62
|
-
|
|
63
|
-
## 3d
|
|
64
|
-
|
|
65
|
-
- [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)
|
|
66
|
-
|
|
67
|
-
## Tables
|
|
68
|
-
|
|
69
|
-
- [VueUiTableHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-table-heatmap)
|
|
70
|
-
- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
|
|
71
|
-
- [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
|
|
72
|
-
|
|
73
|
-
## Rating
|
|
74
|
-
|
|
75
|
-
- [VueUiRating](https://vue-data-ui.graphieros.com/docs#vue-ui-rating)
|
|
76
|
-
- [VueUiSmiley](https://vue-data-ui.graphieros.com/docs#vue-ui-smiley)
|
|
77
|
-
|
|
78
|
-
## Utilities
|
|
79
|
-
|
|
80
|
-
- [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion)
|
|
81
|
-
- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
|
|
82
|
-
- [VueUiCursor](https://vue-data-ui.graphieros.com/docs#vue-ui-cursor)
|
|
83
|
-
- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
|
|
84
|
-
- [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
|
|
85
|
-
- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
|
|
86
|
-
- [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi)
|
|
87
|
-
- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
|
|
88
|
-
- [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
|
|
89
|
-
- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
|
|
90
|
-
|
|
91
|
-
# Installation
|
|
92
|
-
|
|
93
|
-
```
|
|
94
|
-
npm i vue-data-ui
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
You can declare components globally in your main.js:
|
|
98
|
-
|
|
99
|
-
```js
|
|
100
|
-
import { createApp } from "vue";
|
|
101
|
-
import App from "./App.vue";
|
|
102
|
-
// Include the css;
|
|
103
|
-
import "vue-data-ui/style.css";
|
|
104
|
-
|
|
105
|
-
// You can declare Vue Data UI components globally
|
|
106
|
-
import { VueUiRadar } from "vue-data-ui";
|
|
107
|
-
|
|
108
|
-
const app = createApp(App);
|
|
109
|
-
|
|
110
|
-
app.component("VueUiRadar", VueUiRadar);
|
|
111
|
-
app.mount("#app");
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
Or you can import just what you need in your files:
|
|
115
|
-
|
|
116
|
-
```js
|
|
117
|
-
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
|
|
121
|
-
|
|
122
|
-
```js
|
|
123
|
-
<script setup>
|
|
124
|
-
import { ref } from "vue";
|
|
125
|
-
import { VueDataUi } from "vue-data-ui";
|
|
126
|
-
// Include the css;
|
|
127
|
-
import "vue-data-ui/style.css";
|
|
128
|
-
|
|
129
|
-
const config = ref({...});
|
|
130
|
-
const dataset = ref([...]);
|
|
131
|
-
|
|
132
|
-
</script>
|
|
133
|
-
|
|
134
|
-
<template>
|
|
135
|
-
|
|
136
|
-
<VueDataUi
|
|
137
|
-
component="VueUiXy"
|
|
138
|
-
:config="config"
|
|
139
|
-
:dataset="dataset"
|
|
140
|
-
/>
|
|
141
|
-
|
|
142
|
-
</template>
|
|
143
|
-
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
## Typescript
|
|
147
|
-
|
|
148
|
-
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
|
|
149
|
-
|
|
150
|
-
## Nuxt
|
|
151
|
-
|
|
152
|
-
[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
|
|
153
|
-
|
|
154
|
-
# Customizable tooltips
|
|
155
|
-
|
|
156
|
-
Charts with tooltips have a config option to customize tooltip contents:
|
|
157
|
-
|
|
158
|
-
```js
|
|
159
|
-
|
|
160
|
-
customFormat: ({ seriesIndex, datapoint, series, config }) => {
|
|
161
|
-
return `<div>${ ... }</div>`;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
# Slots
|
|
167
|
-
|
|
168
|
-
## #svg slot
|
|
169
|
-
|
|
170
|
-
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
|
|
171
|
-
|
|
172
|
-
```html
|
|
173
|
-
<VueUiXy :dataset="dataset" :config="config">
|
|
174
|
-
<template #svg="{ svg }">
|
|
175
|
-
<foreignObject x="100" y="0" height="100" width="150">
|
|
176
|
-
<div>This is a custom caption</div>
|
|
177
|
-
</foreignObject>
|
|
178
|
-
</template>
|
|
179
|
-
</VueUiXy>
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
183
|
-
|
|
184
|
-
## #legend slot (since v.2.0.41)
|
|
185
|
-
|
|
186
|
-
All charts expose a #legend slot except for:
|
|
187
|
-
|
|
188
|
-
- VueUiHeatmap
|
|
189
|
-
- VueUiRelationCircle
|
|
190
|
-
- VueUiSparkHistogram
|
|
191
|
-
- VueUiSparkStackbar
|
|
192
|
-
- VueUiSparkbar
|
|
193
|
-
- VueUiSparkgauge
|
|
194
|
-
- VueUiSparkline
|
|
195
|
-
- VueUiThermometer
|
|
196
|
-
- VueUiTiremarks
|
|
197
|
-
- VueUiWheel
|
|
198
|
-
- VueUiDumbbell
|
|
199
|
-
|
|
200
|
-
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
201
|
-
It is recommended to set the show legend config attribute to false, to hide the default legend.
|
|
202
|
-
|
|
203
|
-
```html
|
|
204
|
-
<VueUiDonut :config="config" :dataset="dataset">
|
|
205
|
-
<template #legend="{ legend }">
|
|
206
|
-
<div v-for="item in legend">{{ legend.name }}</div>
|
|
207
|
-
</template>
|
|
208
|
-
</VueUiDonut>
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
## Tooltip #tooltip-before & #tooltip-after slots
|
|
212
|
-
|
|
213
|
-
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots.
|
|
214
|
-
It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.
|
|
215
|
-
|
|
216
|
-
Both slots expose the following object:
|
|
217
|
-
|
|
218
|
-
```
|
|
219
|
-
{
|
|
220
|
-
datapoint,
|
|
221
|
-
seriesIndex,
|
|
222
|
-
series,
|
|
223
|
-
config,
|
|
224
|
-
}
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
The following charts bear these slots:
|
|
228
|
-
|
|
229
|
-
- VueUiAgePyramid
|
|
230
|
-
- VueUiCandlestick
|
|
231
|
-
- VueUiDonut
|
|
232
|
-
- VueUiGalaxy
|
|
233
|
-
- VueUiHeatmap
|
|
234
|
-
- VueUiMolecule
|
|
235
|
-
- VueUiNestedDonuts
|
|
236
|
-
- VueUiOnion
|
|
237
|
-
- VueUiQuadrant
|
|
238
|
-
- VueUiQuickChart
|
|
239
|
-
- VueUiRadar
|
|
240
|
-
- VueUiRings
|
|
241
|
-
- VueUiScatter
|
|
242
|
-
- VueUiTreemap
|
|
243
|
-
- VueUiVerticalBar
|
|
244
|
-
- VueUiXy \*
|
|
245
|
-
- VueUiwaffle
|
|
246
|
-
|
|
247
|
-
\* VueUiXy slots specifically expose the following additional attributes:
|
|
248
|
-
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
{
|
|
252
|
-
...,
|
|
253
|
-
bars,
|
|
254
|
-
lines,
|
|
255
|
-
plots
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
```html
|
|
261
|
-
<VueUiDonut :config="config" :dataset="dataset">
|
|
262
|
-
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
|
|
263
|
-
<div>
|
|
264
|
-
This content shows first
|
|
265
|
-
</div>
|
|
266
|
-
</template>
|
|
267
|
-
<template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
|
|
268
|
-
<div>
|
|
269
|
-
This content shows last
|
|
270
|
-
</div>
|
|
271
|
-
</template>
|
|
272
|
-
</VueUiDonut>
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
|
|
276
|
-
|
|
277
|
-
## Customization of the zoom reset button with the #reset-action slot
|
|
278
|
-
|
|
279
|
-
Available for the following components:
|
|
280
|
-
|
|
281
|
-
- VueUiQuickChart (for line & bar types only)
|
|
282
|
-
- VueUiXy
|
|
283
|
-
- VueUiDonutEvolution
|
|
284
|
-
- VueUiCandlestick
|
|
285
|
-
|
|
286
|
-
The config option zoom.useResetSlot must be set to true to use the slot.
|
|
287
|
-
|
|
288
|
-
```html
|
|
289
|
-
<VueUiXy :config="config" :dataset="dataset">
|
|
290
|
-
<template #reset-action="{ reset }">
|
|
291
|
-
<button @click="reset()">RESET ZOOM</button>
|
|
292
|
-
</template>
|
|
293
|
-
</VueUiXy>
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
# Config
|
|
297
|
-
|
|
298
|
-
If for some reason you can't access the documentation website and need to get the default config object for a component:
|
|
299
|
-
|
|
300
|
-
```js
|
|
301
|
-
import { getVueDataUiConfig } from "vue-data-ui";
|
|
302
|
-
|
|
303
|
-
const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
|
|
304
|
-
```
|
|
305
|
-
|
|
306
|
-
# Available components : details
|
|
307
|
-
|
|
308
|
-
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
|
|
309
|
-
|
|
310
|
-
### Universal component
|
|
311
|
-
|
|
312
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
313
|
-
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
|
|
314
|
-
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
315
|
-
|
|
316
|
-
### Quick chart
|
|
317
|
-
|
|
318
|
-
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
319
|
-
|
|
320
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
321
|
-
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- |
|
|
322
|
-
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
323
|
-
|
|
324
|
-
### Mini charts
|
|
325
|
-
|
|
326
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
327
|
-
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ----------------- | -------------- |
|
|
328
|
-
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before` | ❌ |
|
|
329
|
-
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
330
|
-
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
331
|
-
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
332
|
-
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
|
|
333
|
-
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
|
|
334
|
-
|
|
335
|
-
### Charts
|
|
336
|
-
|
|
337
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
338
|
-
| --------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------- |
|
|
339
|
-
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
340
|
-
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
341
|
-
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
342
|
-
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
343
|
-
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#reset-action` | ❌ |
|
|
344
|
-
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
345
|
-
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
|
|
346
|
-
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
347
|
-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
348
|
-
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
349
|
-
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
350
|
-
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
351
|
-
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
352
|
-
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
353
|
-
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
354
|
-
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
355
|
-
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
356
|
-
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
357
|
-
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
358
|
-
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
|
|
359
|
-
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
360
|
-
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
361
|
-
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
362
|
-
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
363
|
-
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
364
|
-
|
|
365
|
-
### 3D charts
|
|
366
|
-
|
|
367
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
368
|
-
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
|
|
369
|
-
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
370
|
-
|
|
371
|
-
### Data tables
|
|
372
|
-
|
|
373
|
-
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
374
|
-
| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
|
|
375
|
-
| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
|
|
376
|
-
| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
|
|
377
|
-
| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
|
|
378
|
-
|
|
379
|
-
### Rating
|
|
380
|
-
|
|
381
|
-
| Name | dataset type | config type | emits / exposed methods |
|
|
382
|
-
| ------------- | -------------------- | ------------------- | ----------------------------------- |
|
|
383
|
-
| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
384
|
-
| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
385
|
-
|
|
386
|
-
### Utilities
|
|
387
|
-
|
|
388
|
-
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
389
|
-
| ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
|
|
390
|
-
| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
|
|
391
|
-
| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
|
|
392
|
-
| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
|
|
393
|
-
| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
|
|
394
|
-
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
|
|
395
|
-
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
|
|
396
|
-
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
|
|
397
|
-
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
|
|
398
|
-
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
|
|
399
|
-
| `VueUiIcon` | see below |
|
|
400
|
-
|
|
401
|
-
### Icons
|
|
402
|
-
|
|
403
|
-
Tailor made icons are available through the VueUiIcon component:
|
|
404
|
-
|
|
405
|
-
```html
|
|
406
|
-
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
|
|
407
|
-
```
|
|
408
|
-
|
|
409
|
-
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://vue-data-ui.graphieros.com/"><img src="https://vue-data-ui.graphieros.com/vue-data-ui2.png"></a>
|
|
3
|
+
<br>
|
|
4
|
+
<br>
|
|
5
|
+
<br>
|
|
6
|
+
<a href="https://vue-data-ui.graphieros.com/"><img src="https://vue-data-ui.graphieros.com/vue-data-ui-showcase.png"></a>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
# vue-data-ui
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
[](https://madewithvuejs.com/p/vue-data-ui/shield-link)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
[Interactive documentation](https://vue-data-ui.graphieros.com/)
|
|
19
|
+
|
|
20
|
+
A user-empowering data visualization Vue components library for eloquent data storytelling.
|
|
21
|
+
|
|
22
|
+
Available components
|
|
23
|
+
|
|
24
|
+
## Charts
|
|
25
|
+
|
|
26
|
+
- [VueUiAgePyramid](https://vue-data-ui.graphieros.com/docs#vue-ui-age-pyramid)
|
|
27
|
+
- [VueUiCandlestick](https://vue-data-ui.graphieros.com/docs#vue-ui-candlestick)
|
|
28
|
+
- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)
|
|
29
|
+
- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
|
|
30
|
+
- [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)
|
|
31
|
+
- [VueUiDumbbell](https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell)
|
|
32
|
+
- [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy)
|
|
33
|
+
- [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge)
|
|
34
|
+
- [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)
|
|
35
|
+
- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
|
|
36
|
+
- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
|
|
37
|
+
- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)
|
|
38
|
+
- [VueUiOnion](https://vue-data-ui.graphieros.com/docs#vue-ui-onion)
|
|
39
|
+
- [VueUiQuadrant](https://vue-data-ui.graphieros.com/docs#vue-ui-quadrant)
|
|
40
|
+
- [VueUiQuickChart](https://vue-data-ui.graphieros.com/docs#vue-ui-quick-chart)
|
|
41
|
+
- [VueUiRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-radar)
|
|
42
|
+
- [VueUiRelationCircle](https://vue-data-ui.graphieros.com/docs#vue-ui-relation-circle)
|
|
43
|
+
- [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
|
|
44
|
+
- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
|
|
45
|
+
- [VueUiStripPlot](https://vue-data-ui.graphieros.com/docs#vue-ui-strip-plot)
|
|
46
|
+
- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
|
|
47
|
+
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
|
|
48
|
+
- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
|
|
49
|
+
- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
|
|
50
|
+
- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
|
|
51
|
+
- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
|
|
52
|
+
- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
|
|
53
|
+
|
|
54
|
+
## Mini charts
|
|
55
|
+
|
|
56
|
+
- [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram)
|
|
57
|
+
- [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)
|
|
58
|
+
- [VueUiSparkgauge](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkgauge)
|
|
59
|
+
- [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
|
|
60
|
+
- [VueUiSparkStackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
|
|
61
|
+
- [VueUiSparkTrend](https://vue-data-ui.graphieros.com/docs#vue-ui-spark-trend)
|
|
62
|
+
|
|
63
|
+
## 3d
|
|
64
|
+
|
|
65
|
+
- [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)
|
|
66
|
+
|
|
67
|
+
## Tables
|
|
68
|
+
|
|
69
|
+
- [VueUiTableHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-table-heatmap)
|
|
70
|
+
- [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
|
|
71
|
+
- [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
|
|
72
|
+
|
|
73
|
+
## Rating
|
|
74
|
+
|
|
75
|
+
- [VueUiRating](https://vue-data-ui.graphieros.com/docs#vue-ui-rating)
|
|
76
|
+
- [VueUiSmiley](https://vue-data-ui.graphieros.com/docs#vue-ui-smiley)
|
|
77
|
+
|
|
78
|
+
## Utilities
|
|
79
|
+
|
|
80
|
+
- [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion)
|
|
81
|
+
- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
|
|
82
|
+
- [VueUiCursor](https://vue-data-ui.graphieros.com/docs#vue-ui-cursor)
|
|
83
|
+
- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
|
|
84
|
+
- [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
|
|
85
|
+
- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
|
|
86
|
+
- [VueUiKpi](https://vue-data-ui.graphieros.com/docs#vue-ui-kpi)
|
|
87
|
+
- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
|
|
88
|
+
- [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
|
|
89
|
+
- [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
|
|
90
|
+
|
|
91
|
+
# Installation
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
npm i vue-data-ui
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
You can declare components globally in your main.js:
|
|
98
|
+
|
|
99
|
+
```js
|
|
100
|
+
import { createApp } from "vue";
|
|
101
|
+
import App from "./App.vue";
|
|
102
|
+
// Include the css;
|
|
103
|
+
import "vue-data-ui/style.css";
|
|
104
|
+
|
|
105
|
+
// You can declare Vue Data UI components globally
|
|
106
|
+
import { VueUiRadar } from "vue-data-ui";
|
|
107
|
+
|
|
108
|
+
const app = createApp(App);
|
|
109
|
+
|
|
110
|
+
app.component("VueUiRadar", VueUiRadar);
|
|
111
|
+
app.mount("#app");
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Or you can import just what you need in your files:
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
<script setup>
|
|
124
|
+
import { ref } from "vue";
|
|
125
|
+
import { VueDataUi } from "vue-data-ui";
|
|
126
|
+
// Include the css;
|
|
127
|
+
import "vue-data-ui/style.css";
|
|
128
|
+
|
|
129
|
+
const config = ref({...});
|
|
130
|
+
const dataset = ref([...]);
|
|
131
|
+
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<template>
|
|
135
|
+
|
|
136
|
+
<VueDataUi
|
|
137
|
+
component="VueUiXy"
|
|
138
|
+
:config="config"
|
|
139
|
+
:dataset="dataset"
|
|
140
|
+
/>
|
|
141
|
+
|
|
142
|
+
</template>
|
|
143
|
+
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Typescript
|
|
147
|
+
|
|
148
|
+
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
|
|
149
|
+
|
|
150
|
+
## Nuxt
|
|
151
|
+
|
|
152
|
+
[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
|
|
153
|
+
|
|
154
|
+
# Customizable tooltips
|
|
155
|
+
|
|
156
|
+
Charts with tooltips have a config option to customize tooltip contents:
|
|
157
|
+
|
|
158
|
+
```js
|
|
159
|
+
|
|
160
|
+
customFormat: ({ seriesIndex, datapoint, series, config }) => {
|
|
161
|
+
return `<div>${ ... }</div>`;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
# Slots
|
|
167
|
+
|
|
168
|
+
## #svg slot
|
|
169
|
+
|
|
170
|
+
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<VueUiXy :dataset="dataset" :config="config">
|
|
174
|
+
<template #svg="{ svg }">
|
|
175
|
+
<foreignObject x="100" y="0" height="100" width="150">
|
|
176
|
+
<div>This is a custom caption</div>
|
|
177
|
+
</foreignObject>
|
|
178
|
+
</template>
|
|
179
|
+
</VueUiXy>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
183
|
+
|
|
184
|
+
## #legend slot (since v.2.0.41)
|
|
185
|
+
|
|
186
|
+
All charts expose a #legend slot except for:
|
|
187
|
+
|
|
188
|
+
- VueUiHeatmap
|
|
189
|
+
- VueUiRelationCircle
|
|
190
|
+
- VueUiSparkHistogram
|
|
191
|
+
- VueUiSparkStackbar
|
|
192
|
+
- VueUiSparkbar
|
|
193
|
+
- VueUiSparkgauge
|
|
194
|
+
- VueUiSparkline
|
|
195
|
+
- VueUiThermometer
|
|
196
|
+
- VueUiTiremarks
|
|
197
|
+
- VueUiWheel
|
|
198
|
+
- VueUiDumbbell
|
|
199
|
+
|
|
200
|
+
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
201
|
+
It is recommended to set the show legend config attribute to false, to hide the default legend.
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<VueUiDonut :config="config" :dataset="dataset">
|
|
205
|
+
<template #legend="{ legend }">
|
|
206
|
+
<div v-for="item in legend">{{ legend.name }}</div>
|
|
207
|
+
</template>
|
|
208
|
+
</VueUiDonut>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Tooltip #tooltip-before & #tooltip-after slots
|
|
212
|
+
|
|
213
|
+
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots.
|
|
214
|
+
It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.
|
|
215
|
+
|
|
216
|
+
Both slots expose the following object:
|
|
217
|
+
|
|
218
|
+
```
|
|
219
|
+
{
|
|
220
|
+
datapoint,
|
|
221
|
+
seriesIndex,
|
|
222
|
+
series,
|
|
223
|
+
config,
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
The following charts bear these slots:
|
|
228
|
+
|
|
229
|
+
- VueUiAgePyramid
|
|
230
|
+
- VueUiCandlestick
|
|
231
|
+
- VueUiDonut
|
|
232
|
+
- VueUiGalaxy
|
|
233
|
+
- VueUiHeatmap
|
|
234
|
+
- VueUiMolecule
|
|
235
|
+
- VueUiNestedDonuts
|
|
236
|
+
- VueUiOnion
|
|
237
|
+
- VueUiQuadrant
|
|
238
|
+
- VueUiQuickChart
|
|
239
|
+
- VueUiRadar
|
|
240
|
+
- VueUiRings
|
|
241
|
+
- VueUiScatter
|
|
242
|
+
- VueUiTreemap
|
|
243
|
+
- VueUiVerticalBar
|
|
244
|
+
- VueUiXy \*
|
|
245
|
+
- VueUiwaffle
|
|
246
|
+
|
|
247
|
+
\* VueUiXy slots specifically expose the following additional attributes:
|
|
248
|
+
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
{
|
|
252
|
+
...,
|
|
253
|
+
bars,
|
|
254
|
+
lines,
|
|
255
|
+
plots
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
```html
|
|
261
|
+
<VueUiDonut :config="config" :dataset="dataset">
|
|
262
|
+
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
|
|
263
|
+
<div>
|
|
264
|
+
This content shows first
|
|
265
|
+
</div>
|
|
266
|
+
</template>
|
|
267
|
+
<template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
|
|
268
|
+
<div>
|
|
269
|
+
This content shows last
|
|
270
|
+
</div>
|
|
271
|
+
</template>
|
|
272
|
+
</VueUiDonut>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
|
|
276
|
+
|
|
277
|
+
## Customization of the zoom reset button with the #reset-action slot
|
|
278
|
+
|
|
279
|
+
Available for the following components:
|
|
280
|
+
|
|
281
|
+
- VueUiQuickChart (for line & bar types only)
|
|
282
|
+
- VueUiXy
|
|
283
|
+
- VueUiDonutEvolution
|
|
284
|
+
- VueUiCandlestick
|
|
285
|
+
|
|
286
|
+
The config option zoom.useResetSlot must be set to true to use the slot.
|
|
287
|
+
|
|
288
|
+
```html
|
|
289
|
+
<VueUiXy :config="config" :dataset="dataset">
|
|
290
|
+
<template #reset-action="{ reset }">
|
|
291
|
+
<button @click="reset()">RESET ZOOM</button>
|
|
292
|
+
</template>
|
|
293
|
+
</VueUiXy>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
# Config
|
|
297
|
+
|
|
298
|
+
If for some reason you can't access the documentation website and need to get the default config object for a component:
|
|
299
|
+
|
|
300
|
+
```js
|
|
301
|
+
import { getVueDataUiConfig } from "vue-data-ui";
|
|
302
|
+
|
|
303
|
+
const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
# Available components : details
|
|
307
|
+
|
|
308
|
+
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
|
|
309
|
+
|
|
310
|
+
### Universal component
|
|
311
|
+
|
|
312
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
313
|
+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
|
|
314
|
+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
315
|
+
|
|
316
|
+
### Quick chart
|
|
317
|
+
|
|
318
|
+
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
319
|
+
|
|
320
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
321
|
+
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- |
|
|
322
|
+
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
323
|
+
|
|
324
|
+
### Mini charts
|
|
325
|
+
|
|
326
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
327
|
+
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ----------------- | -------------- |
|
|
328
|
+
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before` | ❌ |
|
|
329
|
+
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
330
|
+
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
331
|
+
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
332
|
+
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
|
|
333
|
+
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
|
|
334
|
+
|
|
335
|
+
### Charts
|
|
336
|
+
|
|
337
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
338
|
+
| --------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------- |
|
|
339
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
340
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
341
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
342
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
343
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#reset-action` | ❌ |
|
|
344
|
+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
345
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
|
|
346
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
347
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
348
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
349
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
350
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
351
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
352
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
353
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
354
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
355
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
356
|
+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
357
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
358
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
|
|
359
|
+
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
360
|
+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
361
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
362
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
363
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
|
|
364
|
+
|
|
365
|
+
### 3D charts
|
|
366
|
+
|
|
367
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
368
|
+
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
|
|
369
|
+
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
370
|
+
|
|
371
|
+
### Data tables
|
|
372
|
+
|
|
373
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
374
|
+
| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
|
|
375
|
+
| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
|
|
376
|
+
| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
|
|
377
|
+
| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
|
|
378
|
+
|
|
379
|
+
### Rating
|
|
380
|
+
|
|
381
|
+
| Name | dataset type | config type | emits / exposed methods |
|
|
382
|
+
| ------------- | -------------------- | ------------------- | ----------------------------------- |
|
|
383
|
+
| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
384
|
+
| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
385
|
+
|
|
386
|
+
### Utilities
|
|
387
|
+
|
|
388
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
389
|
+
| ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
|
|
390
|
+
| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
|
|
391
|
+
| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
|
|
392
|
+
| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
|
|
393
|
+
| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
|
|
394
|
+
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
|
|
395
|
+
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
|
|
396
|
+
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
|
|
397
|
+
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
|
|
398
|
+
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
|
|
399
|
+
| `VueUiIcon` | see below |
|
|
400
|
+
|
|
401
|
+
### Icons
|
|
402
|
+
|
|
403
|
+
Tailor made icons are available through the VueUiIcon component:
|
|
404
|
+
|
|
405
|
+
```html
|
|
406
|
+
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
|