vue-data-ui 2.1.24 → 2.1.25
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 +116 -22
- package/dist/documentation/installation.md +187 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
|
|
18
18
|
[Interactive documentation](https://vue-data-ui.graphieros.com/)
|
|
19
19
|
|
|
20
|
-
A user-empowering data visualization Vue components library.
|
|
20
|
+
A user-empowering data visualization Vue components library for eloquent data storytelling.
|
|
21
21
|
|
|
22
|
-
Available components
|
|
22
|
+
Available components
|
|
23
23
|
|
|
24
24
|
## Charts
|
|
25
25
|
|
|
@@ -94,8 +94,8 @@ npm i vue-data-ui
|
|
|
94
94
|
|
|
95
95
|
You can declare components globally in your main.js:
|
|
96
96
|
|
|
97
|
-
```
|
|
98
|
-
import { createApp } from
|
|
97
|
+
```js
|
|
98
|
+
import { createApp } from "vue";
|
|
99
99
|
import App from "./App.vue";
|
|
100
100
|
// Include the css;
|
|
101
101
|
import "vue-data-ui/style.css";
|
|
@@ -106,20 +106,18 @@ import { VueUiRadar } from "vue-data-ui";
|
|
|
106
106
|
const app = createApp(App);
|
|
107
107
|
|
|
108
108
|
app.component("VueUiRadar", VueUiRadar);
|
|
109
|
-
app.mount(
|
|
109
|
+
app.mount("#app");
|
|
110
110
|
```
|
|
111
111
|
|
|
112
112
|
Or you can import just what you need in your files:
|
|
113
113
|
|
|
114
|
-
```
|
|
115
|
-
<script setup>
|
|
116
|
-
import { VueUiRadar, VueUiXy } from "vue-data-ui";
|
|
117
|
-
</script>
|
|
114
|
+
```js
|
|
115
|
+
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
|
|
118
116
|
```
|
|
119
117
|
|
|
120
118
|
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
119
|
|
|
122
|
-
```
|
|
120
|
+
```js
|
|
123
121
|
<script setup>
|
|
124
122
|
import { ref } from "vue";
|
|
125
123
|
import { VueDataUi } from "vue-data-ui";
|
|
@@ -155,7 +153,7 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
|
|
|
155
153
|
|
|
156
154
|
Charts with tooltips have a config option to customize tooltip contents:
|
|
157
155
|
|
|
158
|
-
```
|
|
156
|
+
```js
|
|
159
157
|
|
|
160
158
|
customFormat: ({ seriesIndex, datapoint, series, config }) => {
|
|
161
159
|
return `<div>${ ... }</div>`;
|
|
@@ -169,17 +167,14 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
|
|
|
169
167
|
|
|
170
168
|
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
|
|
171
169
|
|
|
172
|
-
```
|
|
170
|
+
```html
|
|
173
171
|
<VueUiXy :dataset="dataset" :config="config">
|
|
174
172
|
<template #svg="{ svg }">
|
|
175
173
|
<foreignObject x="100" y="0" height="100" width="150">
|
|
176
|
-
<div>
|
|
177
|
-
This is a custom caption
|
|
178
|
-
</div>
|
|
174
|
+
<div>This is a custom caption</div>
|
|
179
175
|
</foreignObject>
|
|
180
176
|
</template>
|
|
181
177
|
</VueUiXy>
|
|
182
|
-
|
|
183
178
|
```
|
|
184
179
|
|
|
185
180
|
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
@@ -202,12 +197,10 @@ All charts expose a #legend slot except for:
|
|
|
202
197
|
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
203
198
|
It is recommended to set the show legend config attribute to false, to hide the default legend.
|
|
204
199
|
|
|
205
|
-
```
|
|
200
|
+
```html
|
|
206
201
|
<VueUiDonut :config="config" :dataset="dataset">
|
|
207
202
|
<template #legend="{ legend }">
|
|
208
|
-
<div v-for="item in legend">
|
|
209
|
-
{{ legend.name }}
|
|
210
|
-
</div>
|
|
203
|
+
<div v-for="item in legend">{{ legend.name }}</div>
|
|
211
204
|
</template>
|
|
212
205
|
</VueUiDonut>
|
|
213
206
|
```
|
|
@@ -260,7 +253,7 @@ The following charts bear these slots:
|
|
|
260
253
|
|
|
261
254
|
```
|
|
262
255
|
|
|
263
|
-
```
|
|
256
|
+
```html
|
|
264
257
|
<VueUiDonut :config="config" :dataset="dataset">
|
|
265
258
|
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
|
|
266
259
|
<div>
|
|
@@ -281,9 +274,110 @@ The #tooltip-before & #tooltip-after slots also works when using the VueDataUi u
|
|
|
281
274
|
|
|
282
275
|
If for some reason you can't access the documentation website and need to get the default config object for a component:
|
|
283
276
|
|
|
284
|
-
```
|
|
277
|
+
```js
|
|
285
278
|
import { getVueDataUiConfig } from "vue-data-ui";
|
|
286
279
|
|
|
287
280
|
const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
|
|
281
|
+
```
|
|
288
282
|
|
|
283
|
+
# Available components : details
|
|
284
|
+
|
|
285
|
+
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
|
|
286
|
+
|
|
287
|
+
### Universal component
|
|
288
|
+
|
|
289
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
290
|
+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
|
|
291
|
+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
292
|
+
|
|
293
|
+
### Quick chart
|
|
294
|
+
|
|
295
|
+
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
296
|
+
|
|
297
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
298
|
+
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | ---------------------------------------------- | -------------- |
|
|
299
|
+
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
300
|
+
|
|
301
|
+
### Mini charts
|
|
302
|
+
|
|
303
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
304
|
+
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ------ | -------------- |
|
|
305
|
+
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg` | ❌ |
|
|
306
|
+
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
307
|
+
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
308
|
+
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
309
|
+
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
|
|
310
|
+
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
|
|
311
|
+
|
|
312
|
+
### Charts
|
|
313
|
+
|
|
314
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
315
|
+
| --------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------- |
|
|
316
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
317
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
318
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
319
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
320
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
321
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
|
|
322
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
323
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
324
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
325
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
326
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
327
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
328
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
329
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
330
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
331
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
332
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
333
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
|
|
334
|
+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
335
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
336
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
337
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
338
|
+
|
|
339
|
+
### 3D charts
|
|
340
|
+
|
|
341
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
342
|
+
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
|
|
343
|
+
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
344
|
+
|
|
345
|
+
### Data tables
|
|
346
|
+
|
|
347
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
348
|
+
| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
|
|
349
|
+
| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
|
|
350
|
+
| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
|
|
351
|
+
| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
|
|
352
|
+
|
|
353
|
+
### Rating
|
|
354
|
+
|
|
355
|
+
| Name | dataset type | config type | emits / exposed methods |
|
|
356
|
+
| ------------- | -------------------- | ------------------- | ----------------------------------- |
|
|
357
|
+
| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
358
|
+
| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
359
|
+
|
|
360
|
+
### Utilities
|
|
361
|
+
|
|
362
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
363
|
+
| ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
|
|
364
|
+
| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
|
|
365
|
+
| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
|
|
366
|
+
| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
|
|
367
|
+
| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
|
|
368
|
+
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
|
|
369
|
+
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
|
|
370
|
+
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
|
|
371
|
+
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
|
|
372
|
+
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
|
|
373
|
+
| `VueUiIcon` | see below |
|
|
374
|
+
|
|
375
|
+
### Icons
|
|
376
|
+
|
|
377
|
+
Tailor made icons are available through the VueUiIcon component:
|
|
378
|
+
|
|
379
|
+
```html
|
|
380
|
+
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
|
|
289
381
|
```
|
|
382
|
+
|
|
383
|
+
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# Installation
|
|
2
|
+
|
|
3
|
+
## Declaring components globally
|
|
4
|
+
|
|
5
|
+
You can declare components from the library globally in your main.js (or main.ts) file.
|
|
6
|
+
|
|
7
|
+
If you need to declare many components globally, a smart thing to do is to declare only the VueDataUi universal component, which you can use to create all components provided by the library:
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
import { createApp } from "vue";
|
|
11
|
+
import App from "./App.vue";
|
|
12
|
+
// Include the css
|
|
13
|
+
import "vue-data-ui/style.css";
|
|
14
|
+
import { VueDataUi } from "vue-data-ui";
|
|
15
|
+
const app = createApp(App);
|
|
16
|
+
app.component("VueDataUi", VueDataUi);
|
|
17
|
+
app.mount("#app");
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Usage in your vue files:
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
<script setup>
|
|
24
|
+
import { ref } from "vue";
|
|
25
|
+
const dataset = ref() // Use the appropriate data structure (mandatory)
|
|
26
|
+
const config = ref({}) // Use the appropriate config object (optional)
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<div class="w-full">
|
|
31
|
+
<VueDataUi
|
|
32
|
+
component="VueUiDonut"
|
|
33
|
+
:dataset="dataset"
|
|
34
|
+
:config="config"
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Importing components directly into a Vue file
|
|
41
|
+
|
|
42
|
+
In your component:
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
<script setup>
|
|
46
|
+
import { ref } from "vue";
|
|
47
|
+
import { VueDataUi } from "vue-data-ui";
|
|
48
|
+
// Include the css if not already done globally
|
|
49
|
+
import "vue-data-ui/style.css" from "vue-data-ui";
|
|
50
|
+
const dataset = ref([]);
|
|
51
|
+
const config = ref({})
|
|
52
|
+
</script>
|
|
53
|
+
<template>
|
|
54
|
+
<div class="w-full">
|
|
55
|
+
<VueDataUi
|
|
56
|
+
component="VueUiDonut"
|
|
57
|
+
:dataset="dataset"
|
|
58
|
+
:config="config"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## TS types
|
|
65
|
+
|
|
66
|
+
Types are available in the dist directory of the library.
|
|
67
|
+
You can copy paste the vue-data-ui.d.ts file into your application to have all types available.
|
|
68
|
+
|
|
69
|
+
If you don't use TS in your project, this file can still be helpful to know the data structures of datasets that need to be passed as props.
|
|
70
|
+
|
|
71
|
+
## Config objects
|
|
72
|
+
|
|
73
|
+
All components in the library can be customized through a config object passed as a prop.
|
|
74
|
+
|
|
75
|
+
The config prop is optional, defaults will apply if you don't use it. Defaults will also be applied to all configuration attributes you did not modify yourself in the config object passed as a prop.
|
|
76
|
+
|
|
77
|
+
Declaring your config as a computed property makes it easy to toggle dark/lightmode colors.
|
|
78
|
+
|
|
79
|
+
If you don't have access to the online documentation website, you can summon any configuration object using the built-in 'getVueDataUiConfig' method, passing the name of the component as parameter:
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import { getVueDataUiConfig } from "vue-data-ui";
|
|
83
|
+
const defaultDonutConfig = getVueDataUiConfig("VueUiDonut");
|
|
84
|
+
console.log(defaultDonutConfig);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Available components
|
|
88
|
+
|
|
89
|
+
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
|
|
90
|
+
|
|
91
|
+
### Universal component
|
|
92
|
+
|
|
93
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
94
|
+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
|
|
95
|
+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
96
|
+
|
|
97
|
+
### Quick chart
|
|
98
|
+
|
|
99
|
+
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
100
|
+
|
|
101
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
102
|
+
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | ---------------------------------------------- | -------------- |
|
|
103
|
+
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
104
|
+
|
|
105
|
+
### Mini charts
|
|
106
|
+
|
|
107
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
108
|
+
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ------ | -------------- |
|
|
109
|
+
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg` | ❌ |
|
|
110
|
+
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
111
|
+
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
112
|
+
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
113
|
+
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
|
|
114
|
+
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
|
|
115
|
+
|
|
116
|
+
### Charts
|
|
117
|
+
|
|
118
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
119
|
+
| --------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------- |
|
|
120
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
121
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
122
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
123
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
124
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
125
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
|
|
126
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
|
|
127
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
128
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
129
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
|
|
130
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
131
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
132
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
133
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
134
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
135
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
136
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
137
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
|
|
138
|
+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
139
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
140
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
141
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
|
|
142
|
+
|
|
143
|
+
### 3D charts
|
|
144
|
+
|
|
145
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
146
|
+
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
|
|
147
|
+
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
148
|
+
|
|
149
|
+
### Data tables
|
|
150
|
+
|
|
151
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
152
|
+
| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
|
|
153
|
+
| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
|
|
154
|
+
| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
|
|
155
|
+
| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
|
|
156
|
+
|
|
157
|
+
### Rating
|
|
158
|
+
|
|
159
|
+
| Name | dataset type | config type | emits / exposed methods |
|
|
160
|
+
| ------------- | -------------------- | ------------------- | ----------------------------------- |
|
|
161
|
+
| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
162
|
+
| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
|
|
163
|
+
|
|
164
|
+
### Utilities
|
|
165
|
+
|
|
166
|
+
| Name | dataset type | config type | emits / exposed methods | slots |
|
|
167
|
+
| ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
|
|
168
|
+
| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
|
|
169
|
+
| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
|
|
170
|
+
| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
|
|
171
|
+
| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
|
|
172
|
+
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
|
|
173
|
+
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
|
|
174
|
+
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
|
|
175
|
+
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
|
|
176
|
+
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
|
|
177
|
+
| `VueUiIcon` | see below |
|
|
178
|
+
|
|
179
|
+
### Icons
|
|
180
|
+
|
|
181
|
+
Tailor made icons are available through the VueUiIcon component:
|
|
182
|
+
|
|
183
|
+
```html
|
|
184
|
+
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-data-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.25",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"description": "A user-empowering data visualization Vue components library",
|
|
6
|
+
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"3d bar",
|
|
9
9
|
"Vue",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"dev": "npm i && vite",
|
|
70
70
|
"clean": "node cleanup.cjs",
|
|
71
71
|
"build": "npm run clean && vite build --mode production && node copy-types.cjs && npm i",
|
|
72
|
-
"prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs",
|
|
72
|
+
"prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs && node copy-docs.cjs",
|
|
73
73
|
"build:dev": "npm run build && npm run dev",
|
|
74
74
|
"test": "vitest --run",
|
|
75
75
|
"test:w": "vitest --watch",
|