99# vue-data-ui
1010
1111[ ![ npm] ( https://img.shields.io/npm/v/vue-data-ui )] ( https://github.com/graphieros/vue-data-ui )
12- [ ![ Static Badge] ( https://img.shields.io/badge/components-58 -blue )] ( https://github.com/graphieros/vue-data-ui )
12+ [ ![ Static Badge] ( https://img.shields.io/badge/components-59 -blue )] ( https://github.com/graphieros/vue-data-ui )
1313[ ![ GitHub issues] ( https://img.shields.io/github/issues/graphieros/vue-data-ui )] ( https://github.com/graphieros/vue-data-ui/issues )
1414[ ![ License] ( https://img.shields.io/badge/license-MIT-green )] ( https://github.com/graphieros/vue-data-ui?tab=MIT-1-ov-file#readme )
1515[ ![ MadeWithVueJs.com shield] ( https://madewithvuejs.com/storage/repo-shields/4526-shield.svg )] ( https://madewithvuejs.com/p/vue-data-ui/shield-link )
@@ -30,6 +30,7 @@ Available components
3030- [ VueUiDonut] ( https://vue-data-ui.graphieros.com/docs#vue-ui-donut )
3131- [ VueUiDumbbell] ( https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell )
3232- [ VueUiFlow] ( https://vue-data-ui.graphieros.com/docs#vue-ui-flow )
33+ - [ VueUiFunnel] ( https://vue-data-ui.graphieros.com/docs#vue-ui-funnel )
3334- [ VueUiGalaxy] ( https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy )
3435- [ VueUiGauge] ( https://vue-data-ui.graphieros.com/docs#vue-ui-gauge )
3536- [ VueUiHeatmap] ( https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap )
@@ -209,7 +210,9 @@ The svg slot also works when using the VueDataUi universal component, if the com
209210
210211All charts expose a #legend slot except for:
211212
213+ - VueUiDumbbell
212214- VueUiFlow
215+ - VueUiFunnel
213216- VueUiHeatmap
214217- VueUiRelationCircle
215218- VueUiSparkHistogram
@@ -218,10 +221,9 @@ All charts expose a #legend slot except for:
218221- VueUiSparkgauge
219222- VueUiSparkline
220223- VueUiThermometer
224+ - VueUiTimer
221225- VueUiTiremarks
222226- VueUiWheel
223- - VueUiDumbbell
224- - VueUiTimer
225227
226228The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
227229It is recommended to set the show legend config attribute to false, to hide the default legend.
@@ -415,7 +417,8 @@ From the dataset you pass into the props, this component will produce the most a
415417| ` VueUiDonutEvolution ` | ` VueUiDonutEvolutionDatasetItem[] ` | ` VueUiDonutEvolutionConfig ` | ` @selectLegend ` , ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` | ` #svg ` , ` #legend ` , ` #reset-action ` , ` #watermark ` | ❌ | ✅ |
416418| ` VueUiDonut ` | ` VueUiDonutDatasetItem[] ` | ` VueUiDonutConfig ` | ` @selectDatapoint ` , ` @selectLegend ` , ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` , ` toggleLabels ` , ` toggleTooltip ` | ` #svg ` , ` #legend ` , ` #dataLabel ` , ` #tooltip-before ` , ` #tooltip-after ` , ` #plot-comment ` , ` #watermark ` | ✅ | ✅ |
417419| ` VueUiDumbbell ` | ` VueUiDumbbellDataset[] ` | ` VueUiDumbbellConfig ` | ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` | ` #svg ` , ` #legend ` , ` #watermark ` | ❌ | ✅ |
418- | ` VueUiFlow ` | ` VueUiFlowDatasetItem[] ` | ` VueUiFlowConfig ` | ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` | ` #svg ` ,, ` #watermark ` | ❌ | ✅ |
420+ | ` VueUiFlow ` | ` VueUiFlowDatasetItem[] ` | ` VueUiFlowConfig ` | ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` | ` #svg ` , ` #watermark ` | ❌ | ✅ |
421+ | ` VueUiFunnel ` | ` VueUiFunnelDatasetItem[] ` | ` VueUiFunnelConfig ` | ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` | ` #svg ` , ` #watermark ` | ❌ | ✅ |
419422| ` VueUiGalaxy ` | ` VueUiGalaxyDatasetItem[] ` | ` VueUiGalaxyConfig ` | ` @selectDatapoint ` , ` @selectLegend ` , ` getData ` , ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` , ` toggleTooltip ` | ` #svg ` , ` #legend ` ,` #tooltip-before ` , ` #tooltip-after ` | ✅ | ✅ |
420423| ` VueUiGauge ` | ` VueUiGaugeDataset ` | ` VueUiGaugeConfig ` | ` generatePdf ` , ` generateImage ` | ` #svg ` , ` #legend ` , ` #watermark ` | ❌ | ✅ |
421424| ` VueUiHeatmap ` | ` VueUiHeatmapDatasetItem[] ` | ` VueUiHeatmapConfig ` | ` generatePdf ` , ` generateCsv ` , ` generateImage ` , ` toggleTable ` , ` toggleTooltip ` | ` #svg ` , ` #tooltip-before ` , ` #tooltip-after ` , ` #watermark ` | ✅ | ✅ |
@@ -549,6 +552,7 @@ User options actions available per chart:
549552| VueUiDonutEvolution | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
550553| VueUiDumbbell | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
551554| VueUiFlow | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
555+ | VueUiFunnel | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
552556| VueUiGalaxy | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
553557| VueUiGauge | optionPdf, optionImg, optionFullscreen, optionAnnotator |
554558| VueUiHeatmap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
@@ -637,6 +641,7 @@ However the folowing charts can be made fully responsive, making them better to
637641| VueUiDonutEvolution | - |
638642| VueUiDumbbell | ✅ |
639643| VueUiFlow | - |
644+ | VueUiFunnel | ✅ |
640645| VueUiGalaxy | - |
641646| VueUiGauge | ✅ |
642647| VueUiHeatmap | - |
0 commit comments