[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
feat(VueUiSparkbar): add slot types
graphieros
(Apr 25, 2026, 7:07 AM +0200)
fe4fb0f2
3cbe88af
+201
-14
+7
-6
manual-testing/backend/database.json
+7
-6
manual-testing/backend/database.json
···
1219
1219
"VueUiRidgeline": true,
1220
1220
"VueUiRings": true,
1221
1221
"VueUiScatter": true,
1222
-
"VueUiSkeleton": false,
1223
-
"VueUiSmiley": false,
1224
-
"VueUiSparkbar": false,
1222
+
"VueUiSkeleton": true,
1223
+
"VueUiSmiley": true,
1224
+
"VueUiSparkbar": true,
1225
1225
"VueUiSparkgauge": false,
1226
1226
"VueUiSparkHistogram": false,
1227
1227
"VueUiSparkline": false,
···
1247
1247
"customCheckList": {},
1248
1248
"id": "3846f04c-685f-4509-8042-87b9c0b7ec33",
1249
1249
"createdAt": 1775989842046,
1250
-
"updatedAt": 1777066831402
1250
+
"updatedAt": 1777093606437
1251
1251
},
1252
1252
{
1253
1253
"title": "Expose more methods",
···
1266
1266
"createSmoothPath": false,
1267
1267
"createStraightPath": false,
1268
1268
"createSmoothPathWithCuts": false,
1269
-
"createStraightPathWithCuts": false
1269
+
"createStraightPathWithCuts": false,
1270
+
"createStepperPath": false
1270
1271
},
1271
1272
"id": "ef0d34dc-adc3-4826-b117-38c8d7d4199c",
1272
1273
"createdAt": 1776182479567,
1273
-
"updatedAt": 1776747061054
1274
+
"updatedAt": 1777067070045
1274
1275
},
1275
1276
{
1276
1277
"title": "Nested circle packing",
+5
ts-playground/src/App.vue
+5
ts-playground/src/App.vue
···
114
114
const TsVueUiScatter = defineAsyncComponent(
115
115
() => import('./components/charts/ts-vue-ui-scatter.vue'),
116
116
);
117
+
const TsVueUiSparkbar = defineAsyncComponent(
118
+
() => import('./components/charts/ts-vue-ui-sparkbar.vue'),
119
+
);
117
120
118
121
const components = shallowRef([
119
122
{ name: 'VueUiXy' },
···
154
157
{ name: 'VueUiRidgeline' },
155
158
{ name: 'VueUiRings' },
156
159
{ name: 'VueUiScatter' },
160
+
{ name: 'VueUiSparkbar' },
157
161
]);
158
162
159
163
const selectedComponent = shallowRef(components.value[0]);
···
225
229
<TsVueUiRidgeline v-if="selectedComponent?.name === 'VueUiRidgeline'" />
226
230
<TsVueUiRings v-if="selectedComponent?.name === 'VueUiRings'" />
227
231
<TsVueUiScatter v-if="selectedComponent?.name === 'VueUiScatter'" />
232
+
<TsVueUiSparkbar v-if="selectedComponent?.name === 'VueUiSparkbar'" />
228
233
</div>
229
234
</template>
230
235
+125
ts-playground/src/components/charts/ts-vue-ui-sparkbar.vue
+125
ts-playground/src/components/charts/ts-vue-ui-sparkbar.vue
···
1
+
<script setup lang="ts">
2
+
import { computed } from 'vue';
3
+
import { getVueDataUiConfig } from 'vue-data-ui';
4
+
import { VueUiSparkbar, type VueUiSparkbarConfig, type VueUiSparkbarDatasetItem } from 'vue-data-ui/vue-ui-sparkbar';
5
+
6
+
const dataset = computed<VueUiSparkbarDatasetItem[]>(() => {
7
+
return [
8
+
{
9
+
name: 'quality',
10
+
value: 61.953,
11
+
rounding: 2,
12
+
suffix: '%',
13
+
},
14
+
{
15
+
name: 'popularity',
16
+
value: 2.0412,
17
+
rounding: 2,
18
+
suffix: '%',
19
+
},
20
+
{
21
+
name: 'maintenance',
22
+
value: 33.3291,
23
+
rounding: 2,
24
+
suffix: '%',
25
+
},
26
+
];
27
+
});
28
+
29
+
const config = computed<VueUiSparkbarConfig>(() => {
30
+
return {
31
+
skeletonDataset: null,
32
+
skeletonConfig: null,
33
+
debug: false,
34
+
loading: false,
35
+
events: {
36
+
datapointEnter: null,
37
+
datapointLeave: null,
38
+
datapointClick: null,
39
+
},
40
+
theme: '',
41
+
customPalette: [],
42
+
style: {
43
+
fontFamily: 'inherit',
44
+
backgroundColor: '#FFFFFF',
45
+
animation: {
46
+
show: true,
47
+
animationFrames: 60,
48
+
},
49
+
layout: {
50
+
independant: true,
51
+
percentage: true,
52
+
target: 0,
53
+
showTargetValue: false,
54
+
targetValueText: '',
55
+
},
56
+
gutter: {
57
+
backgroundColor: '#e1e5e8',
58
+
opacity: 100,
59
+
},
60
+
bar: {
61
+
gradient: {
62
+
show: true,
63
+
intensity: 40,
64
+
underlayerColor: '#FFFFFF',
65
+
},
66
+
},
67
+
labels: {
68
+
fontSize: 16,
69
+
name: {
70
+
position: 'top-left',
71
+
width: '100%',
72
+
color: '#2D353C',
73
+
bold: false,
74
+
},
75
+
value: {
76
+
show: true,
77
+
bold: true,
78
+
},
79
+
},
80
+
title: {
81
+
text: 'Title',
82
+
color: '#2D353C',
83
+
fontSize: 16,
84
+
bold: true,
85
+
textAlign: 'left',
86
+
margin: '0 0 6px 0',
87
+
subtitle: {
88
+
color: '#A1A1A1',
89
+
text: 'Subtitle',
90
+
fontSize: 12,
91
+
bold: false,
92
+
},
93
+
},
94
+
gap: 4,
95
+
},
96
+
};
97
+
});
98
+
99
+
function log(n: unknown) {
100
+
console.log(n);
101
+
}
102
+
</script>
103
+
104
+
<template>
105
+
<div>
106
+
<VueUiSparkbar :dataset :config>
107
+
<template #title="{ title: t }">
108
+
<code style="color: chocolate">#title</code>
109
+
<h2>{{ t.title }}</h2>
110
+
<h3>{{ t.subtitle }}</h3>
111
+
</template>
112
+
113
+
<template #data-label="{ bar }">
114
+
<div style="color: #1a1a1a">
115
+
<code style="color: chocolate">#data-label</code>
116
+
<div>{{ bar }}</div>
117
+
</div>
118
+
</template>
119
+
120
+
<template #source>
121
+
<code style="color: chocolate"> #source </code>
122
+
</template>
123
+
</VueUiSparkbar>
124
+
</div>
125
+
</template>
+37
-2
types/vue-data-ui.d.ts
+37
-2
types/vue-data-ui.d.ts
···
3568
3568
};
3569
3569
};
3570
3570
3571
-
export const VueUiSparkbar: DefineComponent<{
3571
+
export type VueUiSparkbarTitleSlotProps = {
3572
+
title: {
3573
+
title: string;
3574
+
subtitle: string;
3575
+
};
3576
+
};
3577
+
3578
+
export type VueUiSparkbarDataLabelSlotProps = {
3579
+
bar: {
3580
+
color: string;
3581
+
formatter: Formatter;
3582
+
name: string;
3583
+
rounding: number;
3584
+
suffix: string;
3585
+
target: number;
3586
+
targetLabel: string;
3587
+
value: number;
3588
+
valueLabel: string;
3589
+
};
3590
+
};
3591
+
3592
+
export type VueUiSparkbarProps = {
3572
3593
config?: VueUiSparkbarConfig;
3573
3594
dataset: VueUiSparkbarDatasetItem[];
3574
-
}>;
3595
+
};
3596
+
3597
+
const VueUiSparkbarBase: DefineComponent<VueUiSparkbarProps>;
3598
+
3599
+
export const VueUiSparkbar: typeof VueUiSparkbarBase & {
3600
+
new (): {
3601
+
$slots: {
3602
+
title?: (props: VueUiSparkbarTitleSlotProps) => VNodeChild;
3603
+
['data-label']?: (
3604
+
props: VueUiSparkbarDataLabelSlotProps,
3605
+
) => VNodeChild;
3606
+
source?: () => VNodeChild;
3607
+
};
3608
+
};
3609
+
};
3575
3610
3576
3611
export type VueUiAgePyramidDatasetRow = [
3577
3612
year: string,
+27
-6
types/vue-ui-sparkbar.d.ts
+27
-6
types/vue-ui-sparkbar.d.ts
···
1
-
import type { DefineComponent } from 'vue';
1
+
import type { DefineComponent, VNodeChild } from 'vue';
2
+
3
+
import type {
4
+
VueUiSparkbarDatasetItem,
5
+
VueUiSparkbarConfig,
6
+
VueUiSparkbarEvent,
7
+
VueUiSparkbarProps,
8
+
VueUiSparkbarTitleSlotProps,
9
+
VueUiSparkbarDataLabelSlotProps,
10
+
} from 'vue-data-ui';
2
11
3
12
export type {
4
13
VueUiSparkbarDatasetItem,
5
14
VueUiSparkbarConfig,
6
15
VueUiSparkbarEvent,
7
-
} from 'vue-data-ui';
16
+
VueUiSparkbarProps,
17
+
VueUiSparkbarTitleSlotProps,
18
+
VueUiSparkbarDataLabelSlotProps,
19
+
};
20
+
21
+
declare const VueUiSparkbarBase: DefineComponent<VueUiSparkbarProps>;
8
22
9
-
declare const VueUiSparkbar: DefineComponent<{
10
-
config?: VueUiSparkbarConfig;
11
-
dataset: VueUiSparkbarDatasetItem[];
12
-
}>;
23
+
export const VueUiSparkbar: typeof VueUiSparkbarBase & {
24
+
new (): {
25
+
$slots: {
26
+
title?: (props: VueUiSparkbarTitleSlotProps) => VNodeChild;
27
+
['data-label']?: (
28
+
props: VueUiSparkbarDataLabelSlotProps,
29
+
) => VNodeChild;
30
+
source?: () => VNodeChild;
31
+
};
32
+
};
33
+
};
13
34
14
35
export default VueUiSparkbar;
15
36
export { VueUiSparkbar };