Skip to content

Commit dbdb42d

Browse files
graphierosgraphieros
committed
VueUiDonut added animation on serie segregation
1 parent dcb8e90 commit dbdb42d

File tree

6 files changed

+112
-60
lines changed

6 files changed

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

‎src/App.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -346,16 +346,10 @@ const tableTestDataset = {
346346
347347
const donutDataset = [
348348
{
349-
name: "serie 1",
350-
color: "",
351-
values: [1],
352-
shape: "star"
353-
},
354-
{
355-
name: "serie 2",
349+
name: "serie 4",
356350
color: "",
357-
values: [2],
358-
shape: "diamond"
351+
values: [3, 5],
352+
shape: "hexagon"
359353
},
360354
{
361355
name: "serie 3",
@@ -364,10 +358,16 @@ const donutDataset = [
364358
shape: "triangle"
365359
},
366360
{
367-
name: "serie 4",
361+
name: "serie 2",
368362
color: "",
369-
values: [3, 5],
370-
shape: "hexagon"
363+
values: [2],
364+
shape: "diamond"
365+
},
366+
{
367+
name: "serie 1",
368+
color: "",
369+
values: [1],
370+
shape: "star"
371371
},
372372
];
373373

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

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,8 @@ describe('<VueUiDonut />', () => {
3030
}
3131
});
3232

33-
const sortedDataset = fixture.dataset.toSorted((a,b) => b.values.reduce((x,y) => x + y, 0) - a.values.reduce((x, y) => x + y, 0))
34-
3533
cy.get('[data-cy="donut-trap-0"]').trigger('mouseenter', { force: true})
36-
cy.get('[data-cy="tooltip"]').should('be.visible').contains(sortedDataset[0].name)
34+
cy.get('[data-cy="tooltip"]').should('be.visible').contains(fixture.dataset[0].name)
3735
})
3836
})
3937

@@ -47,12 +45,10 @@ describe('<VueUiDonut />', () => {
4745
}
4846
});
4947

50-
const sortedDataset = fixture.dataset.toSorted((a,b) => b.values.reduce((x,y) => x + y, 0) - a.values.reduce((x, y) => x + y, 0))
51-
5248
cy.get('[data-cy="legend-item-0"]').click()
53-
cy.get('[data-cy-donut-trap]').should('have.length', sortedDataset.length - 1)
49+
cy.get('[data-cy-donut-trap]').should('have.length', fixture.dataset.length - 1)
5450
cy.get('[data-cy="legend-item-0"]').click()
55-
cy.get('[data-cy-donut-trap]').should('have.length', sortedDataset.length)
51+
cy.get('[data-cy-donut-trap]').should('have.length', fixture.dataset.length)
5652
})
5753
})
5854

@@ -78,17 +74,12 @@ describe('<VueUiDonut />', () => {
7874

7975
cy.get('[data-cy="donut-div-legend"]').should('exist');
8076

81-
const sortedDataset = JSON.parse(JSON.stringify(fixture.dataset)).sort((a, b) => {
82-
const sumx = a.values.reduce((x, y) => x + y, 0);
83-
const sumy = b.values.reduce((x, y) => x + y, 0);
84-
return sumy - sumx
85-
});
8677

8778
const grandTotal = fixture.dataset.map((d) => d.values.reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0);
8879

8980
for (let i = 0; i < fixture.dataset.length; i += 1) {
90-
const thisValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
91-
cy.contains(sortedDataset[i].name);
81+
const thisValue = fixture.dataset[i].values.reduce((a, b) => a + b, 0);
82+
cy.contains(fixture.dataset[i].name);
9283
cy.contains(Number(thisValue.toFixed(fixture.config.style.chart.legend.roundingValue)).toLocaleString());
9384
cy.contains(`(${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%)`)
9485
}
@@ -134,7 +125,7 @@ describe('<VueUiDonut />', () => {
134125
}
135126

136127
for (let i = 0; i < fixture.dataset.length; i += 1) {
137-
const thisValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
128+
const thisValue = fixture.dataset[i].values.reduce((a, b) => a + b, 0);
138129
const thisPercentage = `${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%`;
139130

140131
cy.get(`[data-cy="donut-datalabel-value-${i}"]`)
@@ -143,7 +134,7 @@ describe('<VueUiDonut />', () => {
143134

144135
cy.get(`[data-cy="donut-datalabel-name-${i}"]`)
145136
.should('exist')
146-
.contains(sortedDataset[i].name)
137+
.contains(fixture.dataset[i].name)
147138
}
148139

149140
cy.get(`[data-cy="user-options-summary"]`)

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

Lines changed: 89 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -116,23 +116,6 @@ const svg = computed(() => {
116116
117117
const emit = defineEmits(['selectLegend', 'selectDatapoint'])
118118
119-
const segregated = ref([]);
120-
121-
function segregate(index) {
122-
if(segregated.value.includes(index)) {
123-
segregated.value = segregated.value.filter(s => s !== index);
124-
}else {
125-
segregated.value.push(index);
126-
}
127-
emit('selectLegend', donutSet.value.map(ds => {
128-
return {
129-
name: ds.name,
130-
color: ds.color,
131-
value: ds.value
132-
}
133-
}));
134-
}
135-
136119
const immutableSet = computed(() => {
137120
return props.dataset
138121
.map((serie, i) => {
@@ -143,9 +126,11 @@ const immutableSet = computed(() => {
143126
absoluteValues: serie.values,
144127
}
145128
})
146-
.sort((a,b) => b.value - a.value)
129+
// .sort((a,b) => b.value - a.value)
147130
});
148131
132+
const mutableSet = ref(immutableSet.value)
133+
149134
function getData() {
150135
return immutableSet.value.map(ds => {
151136
return {
@@ -156,26 +141,103 @@ function getData() {
156141
});
157142
}
158143
144+
const segregated = ref([]);
145+
const rafUp = ref(null);
146+
const rafDown = ref(null);
147+
148+
function segregate(index) {
149+
const target = immutableSet.value.find((_, idx) => idx === index)
150+
const source = mutableSet.value.find((_, idx) => idx === index)
151+
let initVal = source.value;
152+
if(segregated.value.includes(index)) {
153+
segregated.value = segregated.value.filter(s => s !== index);
154+
const targetVal = target.value;
155+
function animUp() {
156+
if(initVal > targetVal) {
157+
cancelAnimationFrame(animUp);
158+
mutableSet.value = mutableSet.value.map((ds, i) => {
159+
if(index === i) {
160+
return {
161+
...ds,
162+
value: targetVal
163+
}
164+
} else {
165+
return ds
166+
}
167+
})
168+
} else {
169+
initVal += (targetVal * 0.025);
170+
mutableSet.value = mutableSet.value.map((ds, i) => {
171+
if((index === i)) {
172+
return {
173+
...ds,
174+
value: initVal
175+
}
176+
} else {
177+
return ds
178+
}
179+
})
180+
rafUp.value = requestAnimationFrame(animUp)
181+
}
182+
}
183+
animUp()
184+
} else if (segregated.value.length < immutableSet.value.length - 1) {
185+
function animDown() {
186+
if(initVal < 0.1) {
187+
cancelAnimationFrame(animDown);
188+
segregated.value.push(index);
189+
mutableSet.value = mutableSet.value.map((ds, i) => {
190+
if(index === i) {
191+
return {
192+
...ds,
193+
value: 0,
194+
}
195+
} else {
196+
return ds
197+
}
198+
})
199+
} else {
200+
initVal /= 1.1;
201+
mutableSet.value = mutableSet.value.map((ds, i) => {
202+
if(index === i) {
203+
return {
204+
...ds,
205+
value: initVal
206+
}
207+
} else {
208+
return ds
209+
}
210+
})
211+
rafDown.value = requestAnimationFrame(animDown)
212+
}
213+
}
214+
animDown()
215+
}
216+
emit('selectLegend', donutSet.value.map(ds => {
217+
return {
218+
name: ds.name,
219+
color: ds.color,
220+
value: ds.value
221+
}
222+
}));
223+
}
224+
159225
const donutSet = computed(() => {
160-
props.dataset.forEach((ds, i) => {
226+
mutableSet.value.forEach((ds, i) => {
161227
if([null, undefined].includes(ds.values)) {
162228
return {
163229
...ds,
164230
values: []
165231
}
166232
}
167233
})
168-
return props.dataset
234+
return mutableSet.value
169235
.map((serie, i) => {
170236
return {
171-
name: serie.name,
172-
color: convertColorToHex(serie.color) || palette[i] || palette[i % palette.length],
173-
value: (serie.values || []).reduce((a,b) => a + b, 0),
174-
absoluteValues: serie.values || [],
237+
...serie,
175238
seriesIndex: i
176239
}
177240
})
178-
.sort((a,b) => b.value - a.value)
179241
.filter((_, i) => !segregated.value.includes(i))
180242
});
181243
@@ -189,7 +251,6 @@ const legendSet = computed(() => {
189251
shape: 'circle',
190252
}
191253
})
192-
.sort((a,b) => b.value - a.value)
193254
.map((el, i) => {
194255
return {
195256
...el,
@@ -630,7 +691,7 @@ defineExpose({
630691
</text>
631692

632693
<!-- DATALABELS -->
633-
<g v-for="(arc, i) in currentDonut" :filter="getBlurFilter(i)">
694+
<g v-for="(arc, i) in currentDonut" :filter="getBlurFilter(i)" class="animated">
634695
<g v-if="donutConfig.style.chart.layout.labels.dataLabels.useLabelSlots">
635696
<foreignObject
636697
:x="calcMarkerOffsetX(arc, true).anchor === 'end' ? calcMarkerOffsetX(arc).x - 120 : calcMarkerOffsetX(arc, true).anchor === 'middle' ? calcMarkerOffsetX(arc).x - 60 : calcMarkerOffsetX(arc).x"
@@ -806,7 +867,7 @@ defineExpose({
806867
position: relative;
807868
}
808869
809-
path {
870+
.animated {
810871
animation: donut 0.5s ease-in-out;
811872
transform-origin: center;
812873
}

‎src/components/vue-ui-quick-chart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1262,7 +1262,7 @@ defineExpose({
12621262
( - % )
12631263
</span>
12641264
<span v-else :style="`font-size:${quickConfig.legendFontSize}px; font-variant-numeric: tabular-nums;`">
1265-
({{ legendItem.value / donut.total * 100 < 100 && legendItem.value / donut.total * 100 > 10 ? '' : '' }}{{ dataLabel({
1265+
({{ dataLabel({
12661266
v: legendItem.value / donut.total * 100,
12671267
s: '%',
12681268
r: quickConfig.dataLabelRoundingPercentage

0 commit comments

Comments
 (0)