vue-data-ui 2.1.90 → 2.1.92

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.
Files changed (9) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +409 -409
  3. package/dist/documentation/installation.md +190 -190
  4. package/dist/{index-0cced96b.js → index-2efc7911.js} +6741 -7015
  5. package/dist/{index.es-bcef9729.js → index.es-4f43a869.js} +1 -1
  6. package/dist/style.css +1 -1
  7. package/dist/types/vue-data-ui.d.ts +5247 -5243
  8. package/dist/vue-data-ui.js +1 -1
  9. package/package.json +1 -1
package/dist/documentation/installation.md CHANGED
@@ -1,190 +1,190 @@
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`, `#reset-action` | ✅ |
104
-
105
- ### Mini charts
106
-
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` | ❌ | ❌ | ❌ |
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`, `#reset-action` | ✅ |
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`, `#reset-action` | ❌ |
125
- | `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
126
- | `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
127
- | `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
128
- | `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
129
- | `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
130
- | `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
131
- | `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
132
- | `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
133
- | `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
134
- | `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
135
- | `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
136
- | `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
137
- | `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
138
- | `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
139
- | `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
140
- | `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
141
- | `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
142
- | `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
143
- | `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
144
- | `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
145
-
146
- ### 3D charts
147
-
148
- | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
149
- | ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
150
- | `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
151
-
152
- ### Data tables
153
-
154
- | Name | dataset type | config type | emits / exposed methods | slots |
155
- | --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
156
- | `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
157
- | `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
158
- | `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
159
-
160
- ### Rating
161
-
162
- | Name | dataset type | config type | emits / exposed methods |
163
- | ------------- | -------------------- | ------------------- | ----------------------------------- |
164
- | `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
165
- | `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
166
-
167
- ### Utilities
168
-
169
- | Name | dataset type | config type | emits / exposed methods | slots |
170
- | ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
171
- | `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
172
- | `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
173
- | `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
174
- | `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
175
- | `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
176
- | `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
177
- | `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
178
- | `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
179
- | `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
180
- | `VueUiIcon` | see below |
181
-
182
- ### Icons
183
-
184
- Tailor made icons are available through the VueUiIcon component:
185
-
186
- ```html
187
- <VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
188
- ```
189
-
190
- All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
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`, `#reset-action` | ✅ |
104
+
105
+ ### Mini charts
106
+
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` | ❌ | ❌ | ❌ |
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`, `#reset-action` | ✅ |
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`, `#reset-action` | ❌ |
125
+ | `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
126
+ | `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
127
+ | `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
128
+ | `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
129
+ | `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
130
+ | `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
131
+ | `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
132
+ | `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
133
+ | `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
134
+ | `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
135
+ | `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
136
+ | `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
137
+ | `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
138
+ | `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
139
+ | `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
140
+ | `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
141
+ | `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
142
+ | `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
143
+ | `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
144
+ | `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action` | ✅ |
145
+
146
+ ### 3D charts
147
+
148
+ | Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
149
+ | ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
150
+ | `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
151
+
152
+ ### Data tables
153
+
154
+ | Name | dataset type | config type | emits / exposed methods | slots |
155
+ | --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
156
+ | `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
157
+ | `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
158
+ | `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
159
+
160
+ ### Rating
161
+
162
+ | Name | dataset type | config type | emits / exposed methods |
163
+ | ------------- | -------------------- | ------------------- | ----------------------------------- |
164
+ | `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
165
+ | `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
166
+
167
+ ### Utilities
168
+
169
+ | Name | dataset type | config type | emits / exposed methods | slots |
170
+ | ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
171
+ | `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
172
+ | `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
173
+ | `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
174
+ | `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
175
+ | `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
176
+ | `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
177
+ | `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
178
+ | `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
179
+ | `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
180
+ | `VueUiIcon` | see below |
181
+
182
+ ### Icons
183
+
184
+ Tailor made icons are available through the VueUiIcon component:
185
+
186
+ ```html
187
+ <VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
188
+ ```
189
+
190
+ All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.