vue-data-ui 2.2.11 → 2.2.13
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 +34 -31
- package/dist/documentation/installation.md +71 -44
- package/dist/{index-57a4315b.js → index-dcadb1ed.js} +10402 -9949
- package/dist/{index.es-ae6fe944.js → index.es-f92bea16.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/types/vue-data-ui.d.ts +56 -5
- package/dist/vue-data-ui.js +35 -33
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
# vue-data-ui
|
|
10
10
|
|
|
11
11
|

|
|
12
|
+

|
|
12
13
|
[](https://madewithvuejs.com/p/vue-data-ui/shield-link)
|
|
13
14
|

|
|
14
15
|

|
|
15
16
|

|
|
16
|
-

|
|
17
17
|
|
|
18
18
|
[Interactive documentation](https://vue-data-ui.graphieros.com/)
|
|
19
19
|
|
|
@@ -49,6 +49,7 @@ Available components
|
|
|
49
49
|
- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
|
|
50
50
|
- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
|
|
51
51
|
- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
|
|
52
|
+
- [VueUiWordCloud](https://vue-data-ui.graphieros.com/docs#vue-ui-word-cloud)
|
|
52
53
|
- [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
|
|
53
54
|
|
|
54
55
|
## Mini charts
|
|
@@ -330,9 +331,9 @@ Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types
|
|
|
330
331
|
|
|
331
332
|
### Universal component
|
|
332
333
|
|
|
333
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
334
|
-
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
|
|
335
|
-
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
334
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
335
|
+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- | ---------------------- |
|
|
336
|
+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
336
337
|
|
|
337
338
|
### Quick chart
|
|
338
339
|
|
|
@@ -355,33 +356,34 @@ From the dataset you pass into the props, this component will produce the most a
|
|
|
355
356
|
|
|
356
357
|
### Charts
|
|
357
358
|
|
|
358
|
-
| Name | dataset type
|
|
359
|
-
| --------------------- |
|
|
360
|
-
| `VueUiAgePyramid` | `Array<Array<string / number>>`
|
|
361
|
-
| `VueUiCandlestick` | `Array<Array<string / number>>`
|
|
362
|
-
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]`
|
|
363
|
-
| `VueUiDonut` | `VueUiDonutDatasetItem[]`
|
|
364
|
-
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]`
|
|
365
|
-
| `VueUiDumbbell` | `VueUiDumbbellDataset[]`
|
|
366
|
-
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]`
|
|
367
|
-
| `VueUiGauge` | `VueUiGaugeDataset`
|
|
368
|
-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]`
|
|
369
|
-
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]`
|
|
370
|
-
| `VueUiMoodRadar` | `VueUiMoodRadarDataset`
|
|
371
|
-
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]`
|
|
372
|
-
| `VueUiOnion` | `VueUiOnionDatasetItem[]`
|
|
373
|
-
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]`
|
|
374
|
-
| `VueUiRadar` | `VueUiRadarDataset`
|
|
375
|
-
| `VueUiRings` | `VueUiRingsDatasetItem[]`
|
|
376
|
-
| `VueUiScatter` | `VueUiScatterDatasetItem[]`
|
|
377
|
-
| `VueUiStripPlot` | `VueUiStripPlotDataset[]`
|
|
378
|
-
| `VueUiThermometer` | `VueUiThermometerDataset`
|
|
379
|
-
| `VueUiTiremarks` | `VueUiTiremarksDataset`
|
|
380
|
-
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]`
|
|
381
|
-
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]`
|
|
382
|
-
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]`
|
|
383
|
-
| `VueUiWheel` | `VueUiWheelDataset`
|
|
384
|
-
| `
|
|
359
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
360
|
+
| --------------------- | -------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------- | ------ |
|
|
361
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
362
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ | ✅ |
|
|
363
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ | ✅ |
|
|
364
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
365
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#reset-action` | ❌ | ✅ |
|
|
366
|
+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ | ✅ |
|
|
367
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
368
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ | ✅ |
|
|
369
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
370
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
371
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ | ✅ |
|
|
372
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
373
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
374
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
375
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
376
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
377
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
378
|
+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
379
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ | ✅ |
|
|
380
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ | ✅ |
|
|
381
|
+
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
382
|
+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
383
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
384
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ | ✅ |
|
|
385
|
+
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv` | `#svg` | ❌ | ✅ |
|
|
386
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ | ✅ |
|
|
385
387
|
|
|
386
388
|
### 3D charts
|
|
387
389
|
|
|
@@ -456,6 +458,7 @@ It is possible to provide a custom palette in the config prop through config.cus
|
|
|
456
458
|
- VueUiTreemap
|
|
457
459
|
- VueUiVerticalBar
|
|
458
460
|
- VueUiWaffle
|
|
461
|
+
- VueUiWordCloud
|
|
459
462
|
- VueUiXy
|
|
460
463
|
|
|
461
464
|
If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette.
|
|
@@ -84,70 +84,96 @@ const defaultDonutConfig = getVueDataUiConfig("VueUiDonut");
|
|
|
84
84
|
console.log(defaultDonutConfig);
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
## Themes (since v2.2.9)
|
|
88
|
+
|
|
89
|
+
All charts are set by default without a theme, and use the default color palette.
|
|
90
|
+
|
|
91
|
+
3 themes are available for all charts:
|
|
92
|
+
|
|
93
|
+
- zen
|
|
94
|
+
- hack
|
|
95
|
+
- concrete
|
|
96
|
+
|
|
97
|
+
Any color provided in dataset props will override the colors used by the theme for datapoints.
|
|
98
|
+
|
|
99
|
+
To use a theme, set the theme attribute of the config prop, for example:
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
const donutConfig = ref({
|
|
103
|
+
theme: 'zen',
|
|
104
|
+
...
|
|
105
|
+
})
|
|
106
|
+
```
|
|
107
|
+
|
|
87
108
|
## Available components
|
|
88
109
|
|
|
89
110
|
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
|
|
90
111
|
|
|
91
112
|
### Universal component
|
|
92
113
|
|
|
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) |
|
|
114
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
115
|
+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- | ---------------------- |
|
|
116
|
+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
|
|
117
|
+
|
|
118
|
+
### Quick chart
|
|
119
|
+
|
|
120
|
+
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
96
121
|
|
|
97
122
|
### Quick chart
|
|
98
123
|
|
|
99
124
|
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
|
|
100
125
|
|
|
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`, `#reset-action` | ✅ |
|
|
126
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
127
|
+
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- | ------ |
|
|
128
|
+
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ | ✅ |
|
|
104
129
|
|
|
105
130
|
### Mini charts
|
|
106
131
|
|
|
107
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
108
|
-
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ----------------- | -------------- |
|
|
109
|
-
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before` | ❌ |
|
|
110
|
-
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
111
|
-
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
112
|
-
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
|
|
113
|
-
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
|
|
114
|
-
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
|
|
132
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
133
|
+
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ----------------- | -------------- | ------ |
|
|
134
|
+
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg`, `#before` | ❌ | ✅ |
|
|
135
|
+
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ | ✅ |
|
|
136
|
+
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ | ✅ |
|
|
137
|
+
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ | ✅ |
|
|
138
|
+
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ | ✅ |
|
|
139
|
+
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ | ✅ |
|
|
115
140
|
|
|
116
141
|
### Charts
|
|
117
142
|
|
|
118
|
-
| Name | dataset type
|
|
119
|
-
| --------------------- |
|
|
120
|
-
| `VueUiAgePyramid` | `Array<Array<string / number>>`
|
|
121
|
-
| `VueUiCandlestick` | `Array<Array<string / number>>`
|
|
122
|
-
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]`
|
|
123
|
-
| `VueUiDonut` | `VueUiDonutDatasetItem[]`
|
|
124
|
-
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]`
|
|
125
|
-
| `VueUiDumbbell` | `VueUiDumbbellDataset[]`
|
|
126
|
-
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]`
|
|
127
|
-
| `VueUiGauge` | `VueUiGaugeDataset`
|
|
128
|
-
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]`
|
|
129
|
-
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]`
|
|
130
|
-
| `VueUiMoodRadar` | `VueUiMoodRadarDataset`
|
|
131
|
-
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]`
|
|
132
|
-
| `VueUiOnion` | `VueUiOnionDatasetItem[]`
|
|
133
|
-
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]`
|
|
134
|
-
| `VueUiRadar` | `VueUiRadarDataset`
|
|
135
|
-
| `VueUiRings` | `VueUiRingsDatasetItem[]`
|
|
136
|
-
| `VueUiScatter` | `VueUiScatterDatasetItem[]`
|
|
137
|
-
| `VueUiStripPlot` | `VueUiStripPlotDataset[]`
|
|
138
|
-
| `VueUiThermometer` | `VueUiThermometerDataset`
|
|
139
|
-
| `VueUiTiremarks` | `VueUiTiremarksDataset`
|
|
140
|
-
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]`
|
|
141
|
-
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]`
|
|
142
|
-
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]`
|
|
143
|
-
| `VueUiWheel` | `VueUiWheelDataset`
|
|
144
|
-
| `
|
|
143
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
144
|
+
| --------------------- | -------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------- | ------ |
|
|
145
|
+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
146
|
+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ | ✅ |
|
|
147
|
+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ | ✅ |
|
|
148
|
+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
149
|
+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#reset-action` | ❌ | ✅ |
|
|
150
|
+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ | ✅ |
|
|
151
|
+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
152
|
+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ | ✅ |
|
|
153
|
+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
154
|
+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
155
|
+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ | ✅ |
|
|
156
|
+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
157
|
+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
158
|
+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
159
|
+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
160
|
+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
161
|
+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
162
|
+
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
163
|
+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ | ✅ |
|
|
164
|
+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ | ✅ |
|
|
165
|
+
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
166
|
+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
167
|
+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ | ✅ |
|
|
168
|
+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ | ✅ |
|
|
169
|
+
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv` | `#svg` | ❌ | ✅ |
|
|
170
|
+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ | ✅ |
|
|
145
171
|
|
|
146
172
|
### 3D charts
|
|
147
173
|
|
|
148
|
-
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
|
|
149
|
-
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
|
|
150
|
-
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
|
|
174
|
+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip | themes |
|
|
175
|
+
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- | ------ |
|
|
176
|
+
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ | ✅ |
|
|
151
177
|
|
|
152
178
|
### Data tables
|
|
153
179
|
|
|
@@ -216,6 +242,7 @@ It is possible to provide a custom palette in the config prop through config.cus
|
|
|
216
242
|
- VueUiTreemap
|
|
217
243
|
- VueUiVerticalBar
|
|
218
244
|
- VueUiWaffle
|
|
245
|
+
- VueUiWordCloud
|
|
219
246
|
- VueUiXy
|
|
220
247
|
|
|
221
248
|
If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette.
|