Skip to content

Commit c57567e

Browse files
graphierosgraphieros
committed
Added legend scoped slot to all eligible components
1 parent 26dfa52 commit c57567e

22 files changed

+201
-18
lines changed

‎README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,53 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
157157

158158
# Slots
159159

160+
## #svg slot
161+
160162
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
161163

164+
```
165+
<VueUiXy :dataset="dataset" :config="config">
166+
<template #svg="{ svg }">
167+
<foreignObject x="100" y="0" height="100" width="150">
168+
<div>
169+
This is a custom caption
170+
</div>
171+
</foreignObject>
172+
</template>
173+
</VueUiXy>
174+
175+
```
176+
177+
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
178+
179+
## #legend slot (since v.2.0.41)
180+
181+
All charts expose a #legend slot except for:
182+
183+
- VueUiWheel
184+
- VueUiTiremarks
185+
- VueUiHeatmap
186+
- VueUiRelationCircle
187+
- VueUiThermometer
188+
- VueUiSparkline
189+
- VueUiSparkbar
190+
- VueUiSparkStackbar
191+
- VueUiSparkgauge
192+
- VueUiSparkHistogram
193+
194+
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
195+
It is recommended to set the show legend config attribute to false, to hide the default legend.
196+
197+
```
198+
<VueUiDonut :config="config" :dataset="dataset">
199+
<template #legend="{ legend }">
200+
<div v-for="item in legend">
201+
{{ legend.name }}
202+
</div>
203+
</template>
204+
</VueUiDonut>
205+
```
206+
162207
# Config
163208

164209
If for some reason you can't access the documentation website and need to get the default config object for a component:

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.40",
4+
"version": "2.0.41",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2899,7 +2899,11 @@ function testEmit2(data) {
28992899
<template #info>
29002900
</template>
29012901
<template #dev>
2902-
<VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig" />
2902+
<VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig">
2903+
<template #legend="{ legend }">
2904+
{{ legend }}
2905+
</template>
2906+
</VueDataUiTest>
29032907
</template>
29042908
<template #prod>
29052909
<VueDataUi component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig"/>
@@ -2986,6 +2990,9 @@ function testEmit2(data) {
29862990
<template #svg="{ svg }">
29872991
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
29882992
</template>
2993+
<template #legend="{ legend }">
2994+
{{ legend }}
2995+
</template>
29892996
</VueDataUiTest>
29902997
</template>
29912998
<template #prod>
@@ -3082,9 +3089,12 @@ function testEmit2(data) {
30823089
:dataset="donutEvolutionDataset"
30833090
:config="donutEvolutionConfig"
30843091
>
3085-
<template #svg="{ svg }">
3092+
<template #svg="{ svg }">
30863093
<circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>
30873094
</template>
3095+
<template #legend="{ legend }">
3096+
{{ legend }}
3097+
</template>
30883098
</VueDataUiTest>
30893099
</template>
30903100
<template #prod>
@@ -3222,9 +3232,12 @@ function testEmit2(data) {
32223232
:dataset="ringsDataset"
32233233
:config="ringsConfig"
32243234
>
3225-
<template #svg="{ svg }">
3235+
<template #svg="{ svg }">
32263236
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
32273237
</template>
3238+
<template #legend="{ legend }">
3239+
{{ legend }}
3240+
</template>
32283241
</VueDataUiTest>
32293242
</template>
32303243
<template #prod>
@@ -3361,6 +3374,11 @@ function testEmit2(data) {
33613374
@selectLegend="selectLegendXY"
33623375
@selectX="selectX"
33633376
>
3377+
<template #legend="{ legend }">
3378+
<div v-for="item in legend">
3379+
{{ item.name }} {{ item.color }}
3380+
</div>
3381+
</template>
33643382
</VueDataUiTest>
33653383
<VueDataUiTest
33663384
component="VueUiXy"
@@ -3381,6 +3399,9 @@ function testEmit2(data) {
33813399
<template #svg="{ svg }">
33823400
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
33833401
</template>
3402+
<template #legend="{ legend }">
3403+
{{ legend }}
3404+
</template>
33843405
</VueDataUi>
33853406
<VueDataUi
33863407
component="VueUiXy"
@@ -3438,9 +3459,12 @@ function testEmit2(data) {
34383459
:dataset="candlestickDataset"
34393460
:config="candlestickConfig"
34403461
>
3441-
<template #svg="{ svg }">
3462+
<template #svg="{ svg }">
34423463
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
34433464
</template>
3465+
<template #legend="{ legend }">
3466+
{{ legend }}
3467+
</template>
34443468
</VueDataUiTest>
34453469
</template>
34463470
<template #prod>
@@ -3479,9 +3503,12 @@ function testEmit2(data) {
34793503
:dataset="scatterDataset"
34803504
:config="scatterConfig"
34813505
>
3482-
<template #svg="{ svg }">
3506+
<template #svg="{ svg }">
34833507
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
34843508
</template>
3509+
<template #legend="{ legend }">
3510+
{{ legend }}
3511+
</template>
34853512
</VueDataUiTest>
34863513
</template>
34873514
<template #prod>
@@ -3521,9 +3548,12 @@ function testEmit2(data) {
35213548
:dataset="verticalDataset"
35223549
:config="verticalBarConfig"
35233550
>
3524-
<template #svg="{ svg }">
3551+
<template #svg="{ svg }">
35253552
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
35263553
</template>
3554+
<template #legend="{ legend }">
3555+
{{ legend }}
3556+
</template>
35273557
</VueDataUiTest>
35283558
</template>
35293559
<template #prod>
@@ -3563,9 +3593,12 @@ function testEmit2(data) {
35633593
:dataset="onionDataset"
35643594
@selectLegend="selectOnionLegend"
35653595
>
3566-
<template #svg="{ svg }">
3596+
<template #svg="{ svg }">
35673597
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
35683598
</template>
3599+
<template #legend="{ legend }">
3600+
{{ legend }}
3601+
</template>
35693602
</VueDataUiTest>
35703603
</template>
35713604
<template #prod>
@@ -3609,9 +3642,12 @@ function testEmit2(data) {
36093642
@selectSide="selectSide"
36103643
@selectLegend="selectQuadrantLegend"
36113644
>
3612-
<template #svg="{ svg }">
3645+
<template #svg="{ svg }">
36133646
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
36143647
</template>
3648+
<template #legend="{ legend }">
3649+
{{ legend }}
3650+
</template>
36153651
</VueDataUiTest>
36163652
</template>
36173653
<template #prod>
@@ -3654,9 +3690,12 @@ function testEmit2(data) {
36543690
:config="radarConfig"
36553691
@selectLegend="selectRadarLegend"
36563692
>
3657-
<template #svg="{ svg }">
3693+
<template #svg="{ svg }">
36583694
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
36593695
</template>
3696+
<template #legend="{ legend }">
3697+
{{ legend }}
3698+
</template>
36603699
</VueDataUiTest>
36613700
</template>
36623701
<template #prod>
@@ -3709,6 +3748,11 @@ function testEmit2(data) {
37093748
:strokeWidth="2"
37103749
/>
37113750
</template>
3751+
<template #legend="{legend}">
3752+
<div v-for="item in legend">
3753+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
3754+
</div>
3755+
</template>
37123756
</VueDataUiTest>
37133757
</template>
37143758
<template #prod>
@@ -3868,9 +3912,12 @@ function testEmit2(data) {
38683912
@selectBranch="selectBranch"
38693913
@selectNut="selectNut"
38703914
>
3871-
<template #svg="{ svg }">
3915+
<template #svg="{ svg }">
38723916
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
38733917
</template>
3918+
<template #legend="{ legend }">
3919+
{{ legend }}
3920+
</template>
38743921
</VueDataUiTest>
38753922
</template>
38763923
<template #prod>
@@ -3911,9 +3958,12 @@ function testEmit2(data) {
39113958
:dataset="pyramidDataset"
39123959
:config="pyramidConfig"
39133960
>
3914-
<template #svg="{ svg }">
3961+
<template #svg="{ svg }">
39153962
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
39163963
</template>
3964+
<template #legend="{ legend }">
3965+
{{ legend }}
3966+
</template>
39173967
</VueDataUiTest>
39183968
</template>
39193969
<template #prod>
@@ -3953,9 +4003,14 @@ function testEmit2(data) {
39534003
:config="waffleConfig"
39544004
@selectLegend="selectLegendWaffle"
39554005
>
3956-
<template #svg="{ svg }">
4006+
<template #svg="{ svg }">
39574007
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
39584008
</template>
4009+
<template #legend="{ legend }">
4010+
<div v-for="item in legend">
4011+
{{ legend }}
4012+
</div>
4013+
</template>
39594014
</VueDataUiTest>
39604015
</template>
39614016
<template #prod>
@@ -4153,9 +4208,12 @@ function testEmit2(data) {
41534208
ref="gaugetest"
41544209
:dataset="gaugeDataset"
41554210
>
4156-
<template #svg="{ svg }">
4211+
<template #svg="{ svg }">
41574212
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
41584213
</template>
4214+
<template #legend="{ legend }">
4215+
{{ legend }}
4216+
</template>
41594217
</VueDataUiTest>
41604218
</template>
41614219
<template #prod>

0 commit comments

Comments
 (0)