vue-data-ui 2.0.56 → 2.0.58
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
CHANGED
|
@@ -111,7 +111,7 @@ Or you can import just what you need in your files:
|
|
|
111
111
|
</script>
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using
|
|
114
|
+
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.
|
|
115
115
|
|
|
116
116
|
```
|
|
117
117
|
<script setup>
|
|
@@ -182,16 +182,16 @@ The svg slot also works when using the VueDataUi universal component, if the com
|
|
|
182
182
|
|
|
183
183
|
All charts expose a #legend slot except for:
|
|
184
184
|
|
|
185
|
-
- VueUiWheel
|
|
186
|
-
- VueUiTiremarks
|
|
187
185
|
- VueUiHeatmap
|
|
188
186
|
- VueUiRelationCircle
|
|
189
|
-
-
|
|
190
|
-
- VueUiSparkline
|
|
191
|
-
- VueUiSparkbar
|
|
187
|
+
- VueUiSparkHistogram
|
|
192
188
|
- VueUiSparkStackbar
|
|
189
|
+
- VueUiSparkbar
|
|
193
190
|
- VueUiSparkgauge
|
|
194
|
-
-
|
|
191
|
+
- VueUiSparkline
|
|
192
|
+
- VueUiThermometer
|
|
193
|
+
- VueUiTiremarks
|
|
194
|
+
- VueUiWheel
|
|
195
195
|
|
|
196
196
|
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
197
197
|
It is recommended to set the show legend config attribute to false, to hide the default legend.
|
|
@@ -206,6 +206,47 @@ It is recommended to set the show legend config attribute to false, to hide the
|
|
|
206
206
|
</VueUiDonut>
|
|
207
207
|
```
|
|
208
208
|
|
|
209
|
+
## Tooltip #tooltip-before & #tooltip-after slots
|
|
210
|
+
|
|
211
|
+
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots.
|
|
212
|
+
It is that easy to include an image, another chart or any other content into your tooltips.
|
|
213
|
+
These slots do not expose any data, as you can create your own custom data content using the config option tooltip.customFormat.
|
|
214
|
+
|
|
215
|
+
The following charts bear these slots:
|
|
216
|
+
|
|
217
|
+
- VueUiAgePyramid
|
|
218
|
+
- VueUiCandlestick
|
|
219
|
+
- VueUiDonut
|
|
220
|
+
- VueUiGalaxy
|
|
221
|
+
- VueUiHeatmap
|
|
222
|
+
- VueUiMolecule
|
|
223
|
+
- VueUiNestedDonuts
|
|
224
|
+
- VueUiOnion
|
|
225
|
+
- VueUiQuadrant
|
|
226
|
+
- VueUiRadar
|
|
227
|
+
- VueUiRings
|
|
228
|
+
- VueUiScatter
|
|
229
|
+
- VueUiVerticalBar
|
|
230
|
+
- VueUiXy
|
|
231
|
+
- VueUiwaffle
|
|
232
|
+
|
|
233
|
+
```
|
|
234
|
+
<VueUiDonut :config="config" :dataset="dataset">
|
|
235
|
+
<template #tooltip-before">
|
|
236
|
+
<div>
|
|
237
|
+
This content shows first
|
|
238
|
+
</div>
|
|
239
|
+
</template>
|
|
240
|
+
<template #tooltip-after">
|
|
241
|
+
<div>
|
|
242
|
+
This content shows last
|
|
243
|
+
</div>
|
|
244
|
+
</template>
|
|
245
|
+
</VueUiDonut>
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
|
|
249
|
+
|
|
209
250
|
# Config
|
|
210
251
|
|
|
211
252
|
If for some reason you can't access the documentation website and need to get the default config object for a component:
|