Skip to content

Commit 6ab1343

Browse files
graphierosgraphieros
committed
Added animations on mini charts
1 parent 5bc50a5 commit 6ab1343

File tree

9 files changed

+177
-43
lines changed

9 files changed

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

‎src/App.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2519,10 +2519,10 @@ const radarConfig = ref({
25192519
style: {
25202520
chart: {
25212521
tooltip: {
2522-
customFormat: ({ seriesIndex, datapoint, series, config }) => {
2523-
console.log({seriesIndex, datapoint, series, config})
2524-
return "TEST"
2525-
}
2522+
// customFormat: ({ seriesIndex, datapoint, series, config }) => {
2523+
// console.log({seriesIndex, datapoint, series, config})
2524+
// return "TEST"
2525+
// }
25262526
}
25272527
}
25282528
}
@@ -2988,7 +2988,7 @@ const kpiConfig = ref(
29882988
</template>
29892989
</Box>
29902990

2991-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_kpi)">
2991+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_kpi)">
29922992
<template #title>
29932993
<!-- <BaseIcon name="chartGalaxy"/> -->
29942994
VueUiKpi
@@ -3026,7 +3026,7 @@ const kpiConfig = ref(
30263026
</template>
30273027
</Box>
30283028

3029-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_galaxy)">
3029+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_galaxy)">
30303030
<template #title>
30313031
<BaseIcon name="chartGalaxy"/>
30323032
VueUiGalaxy
@@ -3459,7 +3459,7 @@ const kpiConfig = ref(
34593459
</template>
34603460
</Box>
34613461

3462-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
3462+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
34633463
<template #title>
34643464
<BaseIcon name="chartSparkline" />
34653465
VueUiSparkline
@@ -4265,7 +4265,7 @@ const kpiConfig = ref(
42654265
</template>
42664266
</Box>
42674267

4268-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
4268+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
42694269
<template #title>
42704270
<BaseIcon name="chartSparkbar"/>
42714271
VueUiSparkbar

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ const mutableConfig = ref({
7474
showTable: galaxyConfig.value.table.show,
7575
});
7676
77+
const innerGradientIntensity = computed(() => {
78+
return `${galaxyConfig.value.style.chart.layout.arcs.gradient.intensity}%`;
79+
})
80+
7781
const svg = ref({
7882
height: 180, // or 250 if non fibo
7983
width: 250
@@ -433,7 +437,8 @@ defineExpose({
433437
:stroke-width="(galaxyConfig.style.chart.layout.arcs.strokeWidth / 2) * (selectedSerie === datapoint.id && galaxyConfig.style.chart.layout.arcs.hoverEffect.show ? galaxyConfig.style.chart.layout.arcs.hoverEffect.multiplicator : 1)"
434438
stroke-linecap="round"
435439
:class="`vue-ui-galaxy-gradient ${selectedSerie && selectedSerie !== datapoint.id && galaxyConfig.useBlurOnHover ? 'vue-ui-galaxy-blur' : ''}`"
436-
:style="`filter: blur(5px) opacity(${galaxyConfig.style.chart.layout.arcs.gradient.intensity}%)`"
440+
:style="`filter: blur(5px) opacity(${galaxyConfig.style.chart.layout.arcs.gradient.intensity}%);transform: translate(0,0)`"
441+
class="inner-gradient"
437442
/>
438443
</g>
439444

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

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ const props = defineProps({
2727
}
2828
});
2929
30-
onMounted(() => {
31-
if(objectIsEmpty(props.dataset)) {
32-
error({
33-
componentName: 'VueUiSparkbar',
34-
type: 'dataset'
35-
})
36-
}
37-
})
38-
3930
const uid = ref(createUid());
4031
const defaultConfig = ref(mainConfig.vue_ui_sparkbar);
4132
@@ -46,6 +37,51 @@ const sparkbarConfig = computed(() => {
4637
});
4738
});
4839
40+
const safeDatasetCopy = ref(props.dataset.map(d => {
41+
return {
42+
...d,
43+
value: sparkbarConfig.value.style.animation.show ? 0 : d.value || 0
44+
}
45+
}));
46+
47+
onMounted(() => {
48+
if(objectIsEmpty(props.dataset)) {
49+
error({
50+
componentName: 'VueUiSparkbar',
51+
type: 'dataset'
52+
})
53+
}
54+
55+
if (sparkbarConfig.value.style.animation.show) {
56+
const chunks = sparkbarConfig.value.style.animation.animationFrames;
57+
const chunkSet = props.dataset.map((d, i) => d.value / chunks);
58+
const total = props.dataset.map(d => d.value || 0).reduce((a, b) => a + b, 0);
59+
let start = 0;
60+
61+
function animate() {
62+
start += (total / chunks);
63+
if (start < total) {
64+
safeDatasetCopy.value = safeDatasetCopy.value.map((d, i) => {
65+
return {
66+
...d,
67+
value: d.value += chunkSet[i]
68+
}
69+
});
70+
requestAnimationFrame(animate)
71+
} else {
72+
safeDatasetCopy.value = props.dataset.map(d => {
73+
return {
74+
...d,
75+
value: d.value || 0
76+
}
77+
})
78+
}
79+
}
80+
animate()
81+
}
82+
})
83+
84+
4985
const svg = ref({
5086
width: 500,
5187
height: 16,
@@ -75,7 +111,7 @@ const drawableDataset = computed(() => {
75111
}
76112
})
77113
78-
return props.dataset.map((d, i) => {
114+
return safeDatasetCopy.value.map((d, i) => {
79115
return {
80116
...d,
81117
value: d.value || 0,

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

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,30 @@ const props = defineProps({
3535
}
3636
});
3737
38+
const uid = ref(createUid());
39+
const defaultConfig = ref(mainConfig.vue_ui_sparkline);
40+
41+
const sparklineConfig = computed(() => {
42+
return useNestedProp({
43+
userConfig: props.config,
44+
defaultConfig: defaultConfig.value
45+
});
46+
});
47+
48+
const safeDatasetCopy = ref(props.dataset.map(d => {
49+
if (sparklineConfig.value.style.animation.show) {
50+
return {
51+
...d,
52+
value: null
53+
}
54+
} else {
55+
return {
56+
...d,
57+
value: ![undefined].includes(d.value) ? d.value : null
58+
}
59+
}
60+
}))
61+
3862
onMounted(() => {
3963
if(objectIsEmpty(props.dataset)) {
4064
error({
@@ -61,17 +85,27 @@ onMounted(() => {
6185
}
6286
})
6387
}
64-
})
6588
66-
const uid = ref(createUid());
67-
const defaultConfig = ref(mainConfig.vue_ui_sparkline);
89+
if (sparklineConfig.value.style.animation.show) {
90+
safeDatasetCopy.value = [];
91+
const chunks = sparklineConfig.value.style.animation.animationFrames;
92+
let start = 0;
93+
94+
function animate() {
95+
if (start < props.dataset.length) {
96+
safeDatasetCopy.value.push(props.dataset[start])
97+
setTimeout(() => {
98+
requestAnimationFrame(animate)
99+
}, chunks)
100+
} else {
101+
safeDatasetCopy.value = props.dataset
102+
}
103+
start += 1;
104+
}
105+
animate()
106+
}
68107
69-
const sparklineConfig = computed(() => {
70-
return useNestedProp({
71-
userConfig: props.config,
72-
defaultConfig: defaultConfig.value
73-
});
74-
});
108+
})
75109
76110
const svg = ref({
77111
height: 80,
@@ -96,10 +130,10 @@ const drawingArea = computed(() => {
96130
});
97131
98132
const min = computed(() => {
99-
return Math.min(...props.dataset.map(s => isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : s.value || 0))
133+
return Math.min(...safeDatasetCopy.value.map(s => isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : s.value || 0))
100134
});
101135
const max = computed(() => {
102-
return Math.max(...props.dataset.map(s => isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : s.value || 0))
136+
return Math.max(...safeDatasetCopy.value.map(s => isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : s.value || 0))
103137
});
104138
105139
@@ -123,7 +157,7 @@ function ratioToMax(v) {
123157
const len = computed(() => props.dataset.length - 1);
124158
125159
const mutableDataset = computed(() => {
126-
return props.dataset.map((s, i) => {
160+
return safeDatasetCopy.value.map((s, i) => {
127161
const absoluteValue = isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : (s.value || 0);
128162
return {
129163
absoluteValue,

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

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,23 @@ const props = defineProps({
2727
}
2828
})
2929
30+
const uid = ref(createUid());
31+
const defaultConfig = ref(mainConfig.vue_ui_sparkstackbar);
32+
33+
const stackConfig = computed(() => {
34+
return useNestedProp({
35+
userConfig: props.config,
36+
defaultConfig: defaultConfig.value
37+
});
38+
});
39+
40+
const safeDatasetCopy = ref(props.dataset.map(d => {
41+
return {
42+
...d,
43+
value: stackConfig.value.style.animation.show ? 0 : d.value || 0
44+
}
45+
}));
46+
3047
onMounted(() => {
3148
if(objectIsEmpty(props.dataset)) {
3249
error({
@@ -53,16 +70,34 @@ onMounted(() => {
5370
}
5471
})
5572
}
56-
})
5773
58-
const uid = ref(createUid());
59-
const defaultConfig = ref(mainConfig.vue_ui_sparkstackbar);
74+
if (stackConfig.value.style.animation.show) {
75+
const chunks = stackConfig.value.style.animation.animationFrames;
76+
const chunkSet = props.dataset.map((d, i) => d.value / chunks);
77+
const total = props.dataset.map(d => d.value || 0).reduce((a, b) => a + b, 0);
78+
let start = 0;
6079
61-
const stackConfig = computed(() => {
62-
return useNestedProp({
63-
userConfig: props.config,
64-
defaultConfig: defaultConfig.value
65-
});
80+
function animate() {
81+
start += (total / chunks);
82+
if (start < total) {
83+
safeDatasetCopy.value = safeDatasetCopy.value.map((d, i) => {
84+
return {
85+
...d,
86+
value: d.value += chunkSet[i]
87+
}
88+
});
89+
requestAnimationFrame(animate)
90+
} else {
91+
safeDatasetCopy.value = props.dataset.map(d => {
92+
return {
93+
...d,
94+
value: d.value || 0
95+
}
96+
})
97+
}
98+
}
99+
animate()
100+
}
66101
});
67102
68103
const svg = ref({
@@ -75,7 +110,7 @@ const total = computed(() => {
75110
});
76111
77112
const computedDataset = computed(() => {
78-
return props.dataset.map((d, i) => {
113+
return safeDatasetCopy.value.map((d, i) => {
79114
return {
80115
...d,
81116
value: d.value || 0,

‎src/default_configs.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1681,6 +1681,10 @@
16811681
"vue_ui_sparkline": {
16821682
"type": "line",
16831683
"style": {
1684+
"animation": {
1685+
"show": true,
1686+
"animationFrames": 60
1687+
},
16841688
"backgroundColor":"#FFFFFF",
16851689
"fontFamily": "inherit",
16861690
"line": {
@@ -2242,6 +2246,10 @@
22422246
"style": {
22432247
"backgroundColor": "#FFFFFF",
22442248
"fontFamily": "inherit",
2249+
"animation": {
2250+
"show": true,
2251+
"animationFrames": 60
2252+
},
22452253
"layout": {
22462254
"independant": true,
22472255
"percentage": true,
@@ -2533,6 +2541,10 @@
25332541
"style": {
25342542
"backgroundColor": "#FFFFFF",
25352543
"fontFamily": "inherit",
2544+
"animation": {
2545+
"show": true,
2546+
"animationFrames": 60
2547+
},
25362548
"bar": {
25372549
"gradient": {
25382550
"show": true,

0 commit comments

Comments
 (0)