Skip to content

Commit dcb8e90

Browse files
graphierosgraphieros
committed
VueUiQuickChart added donut animation on serie segregation
1 parent cee4947 commit dcb8e90

File tree

4 files changed

+116
-24
lines changed

4 files changed

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

‎src/App.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3273,24 +3273,24 @@ const tableHeatmapDataset = ref([
32733273
32743274
const quickDatasetDonut = ref([
32753275
{
3276-
name: 'serie1',
3277-
value: 10,
3276+
name: 'Serie 2',
3277+
value: 200,
32783278
},
32793279
{
3280-
name: 'Serie 2',
3281-
value: 20,
3280+
name: 'serie1',
3281+
value: 100,
32823282
},
32833283
{
32843284
name: 'Serie 3',
3285-
value: 5,
3285+
value: 50,
32863286
},
32873287
{
32883288
name: 'Serie 4',
3289-
value: 2,
3289+
value: 20,
32903290
},
32913291
{
32923292
name: 'Serie 5',
3293-
value: 0,
3293+
value: 10,
32943294
},
32953295
]);
32963296

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

Lines changed: 106 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,93 @@ function segregate(id, len) {
132132
}
133133
}
134134
135+
const raf = ref(null)
136+
const rafUp = ref(null)
137+
138+
function segregateDonut(arc, ds) {
139+
let initVal = arc.value;
140+
if(segregated.value.includes(arc.id)) {
141+
segregated.value = segregated.value.filter(el => el !== arc.id)
142+
const targetVal = fd.value.dataset.find((el, i) => arc.id === `donut_${i}`).VALUE;
143+
function animUp() {
144+
if(initVal > targetVal) {
145+
cancelAnimationFrame(animUp)
146+
formattedDataset.value = {
147+
...formattedDataset.value,
148+
dataset: formattedDataset.value.dataset.map((ds, i) => {
149+
if(arc.id === `donut_${i}`) {
150+
return {
151+
...ds,
152+
value: targetVal,
153+
VALUE: targetVal
154+
}
155+
} else {
156+
return ds
157+
}
158+
})
159+
}
160+
} else {
161+
initVal += (targetVal * 0.025);
162+
formattedDataset.value = {
163+
...formattedDataset.value,
164+
dataset: formattedDataset.value.dataset.map((ds, i) => {
165+
if(arc.id === `donut_${i}`) {
166+
return {
167+
...ds,
168+
value: initVal,
169+
VALUE: initVal
170+
}
171+
} else {
172+
return ds
173+
}
174+
})
175+
};
176+
rafUp.value = requestAnimationFrame(animUp)
177+
}
178+
}
179+
animUp()
180+
} else if(ds.length > 1) {
181+
function anim() {
182+
if(initVal < 0.1) {
183+
cancelAnimationFrame(anim)
184+
segregated.value.push(arc.id)
185+
formattedDataset.value = {
186+
...formattedDataset.value,
187+
dataset: formattedDataset.value.dataset.map((ds, i) => {
188+
if(arc.id === `donut_${i}`) {
189+
return {
190+
...ds,
191+
value: 0,
192+
VALUE: 0
193+
}
194+
} else {
195+
return ds
196+
}
197+
})
198+
}
199+
} else {
200+
initVal /= 1.1;
201+
formattedDataset.value = {
202+
...formattedDataset.value,
203+
dataset: formattedDataset.value.dataset.map((ds, i) => {
204+
if(arc.id === `donut_${i}`) {
205+
return {
206+
...ds,
207+
value: initVal,
208+
VALUE: initVal
209+
}
210+
} else {
211+
return ds
212+
}
213+
})
214+
}
215+
raf.value = requestAnimationFrame(anim)
216+
}
217+
}
218+
anim()
219+
}
220+
}
221+
135222
const donut = computed(() => {
136223
if(chartType.value !== detector.chartType.DONUT) return null;
137224
const ds = formattedDataset.value.dataset.map((ds, i) => {
@@ -142,7 +229,7 @@ const donut = computed(() => {
142229
id: `donut_${i}`
143230
}
144231
})
145-
.sort((a, b) => b.value - a.value)
232+
// .sort((a, b) => b.value - a.value)
146233
.map((ds, i) => {
147234
return {
148235
...ds,
@@ -158,6 +245,12 @@ const donut = computed(() => {
158245
return arc.proportion * 100 > quickConfig.value.donutHideLabelUnderPercentage;
159246
}
160247
248+
function getSpaces(datapointId, num2) {
249+
const num1 = fd.value.dataset.find((_,i) => `donut_${i}` === datapointId).VALUE;
250+
const difference = Math.abs(String(Number(num1.toFixed(0))).length - String(Number(num2.toFixed(0))).length);
251+
return difference
252+
}
253+
161254
function useTooltip({ datapoint, seriesIndex }) {
162255
dataTooltipSlot.value = { datapoint, seriesIndex, config: quickConfig.value, dataset: ds };
163256
selectedDatapoint.value = datapoint.id;
@@ -202,11 +295,13 @@ const donut = computed(() => {
202295
}
203296
204297
const total = ds.filter(d => !segregated.value.includes(d.id)).map(d => d.value||0).reduce((a,b) => a + b, 0);
205-
const legend = ds.map(d => {
298+
299+
const legend = ds.map((d, i) => {
206300
return {
207301
...d,
208302
proportion: (d.value || 0) / total,
209-
value: d.value || 0
303+
value: d.value || 0,
304+
absoluteValue: fd.value.dataset.find((el, idx) => `donut_${idx}` === d.id).VALUE,
210305
}
211306
})
212307
@@ -218,6 +313,7 @@ const donut = computed(() => {
218313
isArcBigEnough,
219314
useTooltip,
220315
killTooltip,
316+
getSpaces,
221317
total,
222318
chart: makeDonut(
223319
{ series: ds.filter(s => !segregated.value.includes(s.id)) },
@@ -663,7 +759,6 @@ defineExpose({
663759
<g class="donut-label-connectors" v-if="quickConfig.showDataLabels">
664760
<template v-for="(arc, i) in donut.chart">
665761
<path
666-
class="quick-animation"
667762
v-if="donut.isArcBigEnough(arc)"
668763
:d="calcNutArrowPath(arc, {x: (quickConfig.width || defaultSizes.donut.width) / 2, y: (quickConfig.height || defaultSizes.donut.height) /2}, 16, 16, false, false, quickConfig.donutLabelMarkerStrokeWidth)"
669764
:stroke="arc.color"
@@ -684,7 +779,6 @@ defineExpose({
684779
/>
685780
<g class="donut">
686781
<path
687-
class="quick-animation"
688782
v-for="(arc, i) in donut.chart"
689783
:d="arc.arcSlice"
690784
:fill="arc.color"
@@ -693,7 +787,6 @@ defineExpose({
693787
:filter="getBlurFilter(arc.id)"
694788
/>
695789
<path
696-
class="quick-animation"
697790
v-for="(arc, i) in donut.chart"
698791
:d="arc.arcSlice"
699792
fill="transparent"
@@ -705,7 +798,6 @@ defineExpose({
705798
<g class="donut-labels quick-animation" v-if="quickConfig.showDataLabels">
706799
<template v-for="(arc, i) in donut.chart">
707800
<circle
708-
class="quick-animation"
709801
v-if="donut.isArcBigEnough(arc)"
710802
:cx="calcMarkerOffsetX(arc).x"
711803
:cy="calcMarkerOffsetY(arc) - 3.7"
@@ -1146,7 +1238,7 @@ defineExpose({
11461238
<div
11471239
class="vue-ui-quick-chart-legend-item"
11481240
v-for="(legendItem, i) in donut.legend"
1149-
@click="segregate(legendItem.id, donut.legend.length - 1); emit('selectLegend', legendItem)"
1241+
@click="segregateDonut(legendItem, donut.dataset); emit('selectLegend', legendItem)"
11501242
:style="`cursor: ${donut.legend.length > 1 ? 'pointer' : 'default'}; opacity:${segregated.includes(legendItem.id) ? '0.5' : '1'}`"
11511243
>
11521244
<template v-if="quickConfig.useCustomLegend">
@@ -1158,19 +1250,19 @@ defineExpose({
11581250
<span :style="`font-size:${quickConfig.legendFontSize}px`">
11591251
{{ legendItem.name }}
11601252
</span>
1161-
<span :style="`font-size:${quickConfig.legendFontSize}px`">
1162-
{{ dataLabel({
1253+
<span :style="`font-size:${quickConfig.legendFontSize}px;font-variant-numeric:tabular-nums`">
1254+
{{ segregated.includes(legendItem.id) ? '-' : dataLabel({
11631255
p: quickConfig.valuePrefix,
1164-
v: legendItem.value,
1256+
v: legendItem.absoluteValue,
11651257
s: quickConfig.valueSuffix,
1166-
r: quickConfig.dataLabelRoundingValue
1258+
r: quickConfig.dataLabelRoundingValue,
11671259
}) }}
11681260
</span>
11691261
<span v-if="segregated.includes(legendItem.id)" :style="`font-size:${quickConfig.legendFontSize}px`">
11701262
( - % )
11711263
</span>
1172-
<span v-else :style="`font-size:${quickConfig.legendFontSize}px`">
1173-
({{ dataLabel({
1264+
<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({
11741266
v: legendItem.value / donut.total * 100,
11751267
s: '%',
11761268
r: quickConfig.dataLabelRoundingPercentage

0 commit comments

Comments
 (0)