Skip to content

Commit 678501f

Browse files
graphierosgraphieros
committed
Added segregation reactivity to #legend slots
1 parent aea5ba6 commit 678501f

15 files changed

+188
-72
lines changed

‎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.1.22",
4+
"version": "2.1.23",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 90 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3506,7 +3506,7 @@ const pillConfig = ref({
35063506
</template>
35073507
</Box>
35083508

3509-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_spark_trend)">
3509+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_spark_trend)">
35103510
<template #title>
35113511
<BaseIcon name="trend"/>
35123512
VueUiSparkTrend
@@ -3524,7 +3524,7 @@ const pillConfig = ref({
35243524
</template>
35253525
</Box>
35263526

3527-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quick_chart)">
3527+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_quick_chart)">
35283528
<template #title>
35293529
<BaseIcon name="vueDataUi"/>
35303530
VueUiQuickChart
@@ -3573,7 +3573,15 @@ const pillConfig = ref({
35733573
</div>
35743574
</template>
35753575
<template #content>
3576-
<VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig" />
3576+
<VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig">
3577+
<template #legend="{legend}">
3578+
<div v-for="item in legend" @click="item.segregate()">
3579+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
3580+
{{ item.name }} {{ item.color }}
3581+
</div>
3582+
</div>
3583+
</template>
3584+
</VueDataUi>
35773585
</template>
35783586
</AccordionTest>
35793587
</template>
@@ -3811,6 +3819,14 @@ const pillConfig = ref({
38113819
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
38123820
{{ seriesIndex }}
38133821
</template>
3822+
<template #legend="{legend}">
3823+
<div v-for="legendSets in legend">
3824+
3825+
<div v-for="l in legendSets" :style="`opacity: ${l.isSegregated ? '0.3' : '1'}`" @click="l.segregate()">
3826+
{{ l.name }} {{ l.color }}
3827+
</div>
3828+
</div>
3829+
</template>
38143830
</VueDataUiTest>
38153831

38163832
</template>
@@ -4001,6 +4017,13 @@ const pillConfig = ref({
40014017
:dataset="donutEvolutionDataset"
40024018
:config="donutEvolutionConfig"
40034019
>
4020+
<template #legend="{legend}">
4021+
<div v-for="item in legend" @click="item.segregate()">
4022+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4023+
{{ item.name }} {{ item.color }}
4024+
</div>
4025+
</div>
4026+
</template>
40044027
<template #svg="{ svg }">
40054028
<circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>
40064029
</template>
@@ -4142,6 +4165,13 @@ const pillConfig = ref({
41424165
:dataset="ringsDataset"
41434166
:config="ringsConfig"
41444167
>
4168+
<template #legend="{legend}">
4169+
<div v-for="item in legend" @click="item.segregate()">
4170+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4171+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
4172+
</div>
4173+
</div>
4174+
</template>
41454175
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
41464176
{{ seriesIndex }}
41474177
</template>
@@ -4294,6 +4324,14 @@ const pillConfig = ref({
42944324
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
42954325
{{ seriesIndex }}
42964326
</template>
4327+
4328+
<template #legend="{legend}">
4329+
<div v-for="item in legend" @click="item.segregate()">
4330+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4331+
{{ item.name }}
4332+
</div>
4333+
</div>
4334+
</template>
42974335
</VueDataUiTest>
42984336
<VueDataUiTest
42994337
component="VueUiXy"
@@ -4420,6 +4458,13 @@ const pillConfig = ref({
44204458
:dataset="scatterDataset"
44214459
:config="scatterConfig"
44224460
>
4461+
<template #legend="{legend}">
4462+
<div v-for="item in legend" @click="item.segregate()">
4463+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4464+
{{ item.name }} {{ item.color }}
4465+
</div>
4466+
</div>
4467+
</template>
44234468
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
44244469
{{ seriesIndex }}
44254470
</template>
@@ -4469,6 +4514,13 @@ const pillConfig = ref({
44694514
:dataset="verticalDataset"
44704515
:config="verticalBarConfig"
44714516
>
4517+
<template #legend="{legend}">
4518+
<div v-for="item in legend" @click="item.segregate()">
4519+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4520+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
4521+
</div>
4522+
</div>
4523+
</template>
44724524
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
44734525
{{ seriesIndex }}
44744526
{{ datapoint.name }}
@@ -4519,6 +4571,13 @@ const pillConfig = ref({
45194571
:dataset="onionDataset"
45204572
@selectLegend="selectOnionLegend"
45214573
>
4574+
<template #legend="{legend}">
4575+
<div v-for="item in legend" @click="item.segregate()">
4576+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4577+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
4578+
</div>
4579+
</div>
4580+
</template>
45224581
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
45234582
{{ seriesIndex }}
45244583
{{ datapoint.name }}
@@ -4573,6 +4632,13 @@ const pillConfig = ref({
45734632
@selectSide="selectSide"
45744633
@selectLegend="selectQuadrantLegend"
45754634
>
4635+
<template #legend="{legend}">
4636+
<div v-for="item in legend" @click="item.segregate()">
4637+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4638+
{{ item.name }}
4639+
</div>
4640+
</div>
4641+
</template>
45764642
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
45774643
{{ seriesIndex }}
45784644
{{ datapoint.name }}
@@ -4626,6 +4692,13 @@ const pillConfig = ref({
46264692
:config="radarConfig"
46274693
@selectLegend="selectRadarLegend"
46284694
>
4695+
<template #legend="{legend}">
4696+
<div v-for="item in legend" @click="item.segregate()">
4697+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4698+
{{ item.name }}
4699+
</div>
4700+
</div>
4701+
</template>
46294702
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
46304703
{{ seriesIndex }}
46314704
{{ datapoint.name }}
@@ -4657,7 +4730,7 @@ const pillConfig = ref({
46574730
</template>
46584731
</Box>
46594732

4660-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_donut)">
4733+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut)">
46614734
<template #title>
46624735
<BaseIcon name="chartDonut" />
46634736
VueUiDonut
@@ -4693,7 +4766,7 @@ const pillConfig = ref({
46934766
{{ seriesIndex }}
46944767
{{ datapoint.name }}
46954768
</template>
4696-
<template #svg="{ svg }">
4769+
<!-- <template #svg="{ svg }">
46974770
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
46984771
<Arrow
46994772
:x1="20"
@@ -4703,10 +4776,12 @@ const pillConfig = ref({
47034776
:pointerSize="10"
47044777
:strokeWidth="2"
47054778
/>
4706-
</template>
4779+
</template> -->
47074780
<template #legend="{legend}">
4708-
<div v-for="item in legend">
4709-
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
4781+
<div v-for="item in legend" @click="item.segregate()">
4782+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
4783+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
4784+
</div>
47104785
</div>
47114786
</template>
47124787
</VueDataUiTest>
@@ -4978,6 +5053,13 @@ const pillConfig = ref({
49785053
<BaseIcon name="smiley" :stroke="cell.color" :size="30" />
49795054
</div>
49805055
</template> -->
5056+
<template #legend="{legend}">
5057+
<div v-for="item in legend" @click="item.segregate()">
5058+
<div :style="`opacity: ${item.isSegregated ? '0.3' : '1'}`">
5059+
{{ item.name }} {{ item.color }} {{ item.value }} {{ item.proportion }}
5060+
</div>
5061+
</div>
5062+
</template>
49815063
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
49825064
{{ seriesIndex }}
49835065
</template>

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,9 @@ const legendSet = computed(() => {
305305
.map((el, i) => {
306306
return {
307307
...el,
308-
opacity: segregated.value.includes(el.uid) ? 0.5 : 1
308+
opacity: segregated.value.includes(el.uid) ? 0.5 : 1,
309+
segregate: () => segregate(el.uid),
310+
isSegregated: segregated.value.includes(el.uid)
309311
}
310312
})
311313
});
@@ -867,7 +869,7 @@ defineExpose({
867869
</template>
868870
</Legend>
869871
870-
<slot name="legend" v-bind:legend="convertedDataset"></slot>
872+
<slot name="legend" v-bind:legend="legendSet"></slot>
871873
872874
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable && isDataset">
873875
<DataTable

‎src/components/vue-ui-donut.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,9 @@ const legendSet = computed(() => {
260260
return {
261261
...el,
262262
proportion: el.value / props.dataset.map(m => (m.values || []).reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0),
263-
opacity: segregated.value.includes(i) ? 0.5 : 1
263+
opacity: segregated.value.includes(i) ? 0.5 : 1,
264+
segregate: () => segregate(i),
265+
isSegregated: segregated.value.includes(i)
264266
}
265267
})
266268
});
@@ -468,6 +470,10 @@ const isSafari = computed(() => {
468470
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
469471
})
470472
473+
function dashLabel(num) {
474+
return num.toFixed(donutConfig.value.style.chart.legend.roundingPercentage).split('').map(el => '-').join('')
475+
}
476+
471477
function selectDatapoint(datapoint, index) {
472478
emit('selectDatapoint', { datapoint, index })
473479
}
@@ -771,13 +777,17 @@ defineExpose({
771777
@clickMarker="({i}) => segregate(i)"
772778
>
773779
<template #item="{ legend, index }">
774-
<div @click="segregate(index)" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
780+
<div @click="legend.segregate()" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
775781
{{ legend.name }} : {{ dataLabel({p: donutConfig.style.chart.layout.labels.dataLabels.prefix, v: legend.value, s: donutConfig.style.chart.layout.labels.dataLabels.suffix, r: donutConfig.style.chart.legend.roundingValue}) }}
776782
<span v-if="!segregated.includes(index)">
777-
({{ isNaN(legend.value / total) ? '-' : (legend.value / total * 100).toFixed(donutConfig.style.chart.legend.roundingPercentage)}}%)
783+
({{ isNaN(legend.value / total) ? '-' : dataLabel({
784+
v: isAnimating ? legend.proportion * 100 : legend.value / total * 100,
785+
s: '%',
786+
r: donutConfig.style.chart.legend.roundingPercentage
787+
})}})
778788
</span>
779789
<span v-else>
780-
( - % )
790+
( {{ dashLabel(legend.proportion * 100) }} % )
781791
</span>
782792
</div>
783793
</template>
@@ -810,13 +820,17 @@ defineExpose({
810820
@clickMarker="({i}) => segregate(i)"
811821
>
812822
<template #item="{ legend, index }">
813-
<div :data-cy="`legend-item-${index}`" @click="segregate(index)" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
823+
<div :data-cy="`legend-item-${index}`" @click="legend.segregate()" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
814824
{{ legend.name }} : {{ dataLabel({p: donutConfig.style.chart.layout.labels.dataLabels.prefix, v: legend.value, s: donutConfig.style.chart.layout.labels.dataLabels.suffix, r: donutConfig.style.chart.legend.roundingValue}) }}
815-
<span v-if="!segregated.includes(index)">
816-
({{ isNaN(legend.value / total) ? '-' : (legend.value / total * 100).toFixed(donutConfig.style.chart.legend.roundingPercentage)}}%)
825+
<span v-if="!segregated.includes(index)" style="font-variant-numeric: tabular-nums;">
826+
({{ isNaN(legend.value / total) ? '-' : dataLabel({
827+
v: isAnimating ? legend.proportion * 100 : legend.value / total * 100,
828+
s: '%',
829+
r: donutConfig.style.chart.legend.roundingPercentage
830+
})}})
817831
</span>
818832
<span v-else>
819-
( - % )
833+
( {{ dashLabel(legend.proportion * 100) }} % )
820834
</span>
821835
</div>
822836
</template>

‎src/components/vue-ui-galaxy.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,9 @@ const legendSet = computed(() => {
249249
...el,
250250
proportion: (el.value || 0) / props.dataset.map(m => (m.values || []).reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0),
251251
opacity: segregated.value.includes(el.id) ? 0.5 : 1,
252-
shape: el.shape || 'circle'
252+
shape: el.shape || 'circle',
253+
segregate: () => segregate(el),
254+
isSegregated: segregated.value.includes(el.id)
253255
}
254256
})
255257
});

‎src/components/vue-ui-nested-donuts.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -360,12 +360,14 @@ const legendSets = computed(() => {
360360
id: s.id,
361361
seriesIndex: j,
362362
datasetIndex: i,
363-
total: ds.series.filter(s => !segregated.value.includes(s.id)).map(s => s.value).reduce((a, b) => a + b, 0)
363+
total: ds.series.filter(s => !segregated.value.includes(s.id)).map(s => s.value).reduce((a, b) => a + b, 0),
364364
}
365365
}).map((s) => {
366366
return {
367367
...s,
368-
opacity: segregated.value.includes(s.id) ? 0.5 : 1
368+
opacity: segregated.value.includes(s.id) ? 0.5 : 1,
369+
segregate: () => segregate(s),
370+
isSegregated: segregated.value.includes(s.id)
369371
}
370372
})
371373
})

‎src/components/vue-ui-onion.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,9 @@ const immutableDataset = computed(() => {
136136
id,
137137
shape: 'circle',
138138
opacity: segregated.value.includes(id) ? 0.5 : 1,
139-
absoluteIndex: i
139+
absoluteIndex: i,
140+
segregate: () => segregate(id),
141+
isSegregated: segregated.value.includes(id)
140142
}
141143
})
142144
});
@@ -548,7 +550,7 @@ defineExpose({
548550
@clickMarker="({legend}) => segregate(legend.id)"
549551
>
550552
<template #item="{ legend }">
551-
<div @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
553+
<div @click="legend.segregate" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
552554
{{ legend.name }} : {{ (legend.percentage || 0).toFixed(onionConfig.style.chart.legend.roundingPercentage) }}%
553555
554556
@@ -580,7 +582,7 @@ defineExpose({
580582
@clickMarker="({legend}) => segregate(legend.id)"
581583
>
582584
<template #item="{ legend }">
583-
<div data-cy-legend-item @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
585+
<div data-cy-legend-item @click="legend.segregate()" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
584586
{{ legend.name }} : {{ (legend.percentage || 0).toFixed(onionConfig.style.chart.legend.roundingPercentage) }}%
585587
</div>
586588
</template>

0 commit comments

Comments
 (0)