Skip to content

Commit 54194fe

Browse files
graphierosgraphieros
committed
New feature - Added VueUiDumbbell component
1 parent 8a99306 commit 54194fe

File tree

14 files changed

+1238
-51
lines changed

14 files changed

+1238
-51
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1414
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1515
![npm](https://img.shields.io/npm/dt/vue-data-ui)
16-
![Static Badge](https://img.shields.io/badge/components-48-green)
16+
![Static Badge](https://img.shields.io/badge/components-49-green)
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

@@ -28,6 +28,7 @@ Available components
2828
- [VueUiChestnut](https://vue-data-ui.graphieros.com/docs#vue-ui-chestnut)
2929
- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
3030
- [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)
31+
- [VueUiDumbbell](https://vue-data-ui.graphieros.com/docs#vue-ui-dumbbell)
3132
- [VueUiGalaxy](https://vue-data-ui.graphieros.com/docs#vue-ui-galaxy)
3233
- [VueUiGauge](https://vue-data-ui.graphieros.com/docs#vue-ui-gauge)
3334
- [VueUiHeatmap](https://vue-data-ui.graphieros.com/docs#vue-ui-heatmap)
@@ -194,6 +195,7 @@ All charts expose a #legend slot except for:
194195
- VueUiThermometer
195196
- VueUiTiremarks
196197
- VueUiWheel
198+
- VueUiDumbbell
197199

198200
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
199201
It is recommended to set the show legend config attribute to false, to hide the default legend.
@@ -320,6 +322,7 @@ From the dataset you pass into the props, this component will produce the most a
320322
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
321323
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
322324
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
325+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
323326
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
324327
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
325328
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |

‎documentation/installation.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ From the dataset you pass into the props, this component will produce the most a
122122
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
123123
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
124124
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
125+
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
125126
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
126127
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
127128
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |

‎package.json‎

Lines changed: 2 additions & 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.43",
4+
"version": "2.1.44",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
77
"keywords": [
@@ -18,6 +18,7 @@
1818
"data visualization",
1919
"donut evolution",
2020
"donut",
21+
"dumbbell",
2122
"galaxy",
2223
"gauge",
2324
"graph",

‎src/App.vue‎

Lines changed: 188 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import QuickTest from "./components/vue-ui-quick-chart.vue";
6363
import TestCursor from "./components/vue-ui-cursor.vue";
6464
import TestTrend from "./components/vue-ui-spark-trend.vue";
6565
import TestStrip from "./components/vue-ui-strip-plot.vue";
66+
import TestDumb from "./components/vue-ui-dumbbell.vue";
6667
6768
const dataset = ref([
6869
{
@@ -1292,18 +1293,28 @@ const pyramidDataset = ref([
12921293
// IDEAS:
12931294
// . treeselector (with sums & avgs & so on)
12941295
1295-
const sparkbarConfig = ref({});
1296+
const sparkbarConfig = ref({
1297+
style: {
1298+
layout: {
1299+
independant: true,
1300+
percentage: false,
1301+
target: 110
1302+
}
1303+
}
1304+
});
1305+
1306+
12961307
const sparkbarDataset = ref([
12971308
{
12981309
name: "Some random kpi",
1299-
value: 80.8798798787,
1300-
suffix: "%",
1310+
value: 60,
1311+
suffix: "$",
13011312
rounding: 1,
13021313
},
13031314
{
13041315
name: "Some other kpi",
1305-
value: 95.26576576565,
1306-
suffix: "%",
1316+
value: 50,
1317+
suffix: "$",
13071318
rounding: 2,
13081319
},
13091320
]);
@@ -3477,6 +3488,148 @@ const stripConfig = ref({
34773488
}
34783489
})
34793490
3491+
const dumbDataset = ref([
3492+
{ name: 'Sweden', start: 5000, end: 7100},
3493+
{ name: 'Korea, Rep.', start: 4900, end: 7050},
3494+
{ name: 'Iceland', start: 6500, end: 8000},
3495+
{ name: 'Finland', start: 6400, end: 7600},
3496+
{ name: 'Norway', start: 5400, end: 6050},
3497+
{ name: 'Ireland', start: 3000, end: 2000}
3498+
]);
3499+
3500+
const dumbConfig = ref({
3501+
useCssAnimation: true,
3502+
userOptions: {
3503+
show: true
3504+
},
3505+
style: {
3506+
fontFamily: "inherit",
3507+
chart: {
3508+
backgroundColor: "#1A1A1A",
3509+
color: "#2D353C",
3510+
width: 600,
3511+
rowHeight: 40,
3512+
padding: {
3513+
top: 12,
3514+
left: 100,
3515+
right: 24,
3516+
bottom: 12
3517+
},
3518+
plots: {
3519+
startColor: "#ff6400",
3520+
endColor: "#5f8bee",
3521+
radius: 6,
3522+
stroke: "#FFFFFF",
3523+
strokeWidth: 1,
3524+
link: {
3525+
strokeWidth: 2,
3526+
type: "curved"
3527+
},
3528+
gradient: {
3529+
show: true,
3530+
intensity: 40
3531+
}
3532+
},
3533+
grid: {
3534+
strokeWidth: 1,
3535+
scaleSteps: 10,
3536+
horizontalGrid: {
3537+
show: true,
3538+
stroke: "#cccccc",
3539+
strokeWidth: 0.5,
3540+
strokeDasharray: 4
3541+
},
3542+
verticalGrid: {
3543+
show: true,
3544+
stroke: "#cccccc",
3545+
strokeWidth: 0.5,
3546+
strokeDasharray: 0
3547+
}
3548+
},
3549+
labels: {
3550+
prefix: "",
3551+
suffix: "",
3552+
yAxisLabels: {
3553+
show: true,
3554+
fontSize: 14,
3555+
color: "#2D353C",
3556+
offsetX: 0,
3557+
bold: true,
3558+
showProgression: true,
3559+
rounding: 1
3560+
},
3561+
xAxisLabels: {
3562+
show: true,
3563+
fontSize: 14,
3564+
color: "#2D353C",
3565+
offsetY: 0,
3566+
bold: false,
3567+
rounding: 0
3568+
},
3569+
startLabels: {
3570+
show: true,
3571+
fontSize: 10,
3572+
color: "#2D353C",
3573+
offsetY: 0,
3574+
rounding: 0,
3575+
useStartColor: true
3576+
},
3577+
endLabels: {
3578+
show: true,
3579+
fontSize: 10,
3580+
color: "#2D353C",
3581+
offsetY: 0,
3582+
rounding: 0,
3583+
useEndColor: true
3584+
}
3585+
},
3586+
legend: {
3587+
show: true,
3588+
labelStart: "start",
3589+
labelEnd: "end",
3590+
backgroundColor: "#FFFFFF",
3591+
color: "#2D353C",
3592+
fontSize: 14,
3593+
bold: false
3594+
},
3595+
title: {
3596+
text: "",
3597+
color: "#2D353C",
3598+
fontSize: 20,
3599+
bold: true,
3600+
subtitle: {
3601+
color: "#A1A1A1",
3602+
text: "",
3603+
fontSize: 16,
3604+
bold: false
3605+
}
3606+
}
3607+
}
3608+
},
3609+
table: {
3610+
show: false,
3611+
responsiveBreakpoint: 300,
3612+
columnNames: {
3613+
series: "Series",
3614+
start: "Start value",
3615+
end: "End value",
3616+
progression: "Progression"
3617+
},
3618+
th: {
3619+
backgroundColor: "#FAFAFA",
3620+
color: "#2D353C",
3621+
outline: "none"
3622+
},
3623+
td: {
3624+
backgroundColor: "#FFFFFF",
3625+
color: "#2D353C",
3626+
outline: "none",
3627+
roundingValue: 0,
3628+
roundingPercentage: 1
3629+
}
3630+
}
3631+
})
3632+
34803633
</script>
34813634

34823635
<template>
@@ -3618,11 +3771,36 @@ const stripConfig = ref({
36183771
<BaseIcon name="cursor" stroke="#42d392" />
36193772
<BaseIcon name="trend" stroke="#42d392" />
36203773
<BaseIcon name="chartStripPlot" stroke="#42d392" />
3774+
<BaseIcon name="chartDumbbell" stroke="#42d392" />
36213775
</div>
36223776
</template>
36233777
</Box>
36243778

3625-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_strip_plot)">
3779+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_dumbbell)">
3780+
<template #title>
3781+
<BaseIcon name="chartDumbbell"/>
3782+
VueUiDumbbell
3783+
</template>
3784+
<template #info>
3785+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
3786+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3787+
<BaseIcon name="image" stroke="#5f8bee"/>
3788+
<BaseIcon name="excel" stroke="#5f8bee"/>
3789+
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
3790+
</template>
3791+
<template #dev>
3792+
<TestDumb :dataset="dumbDataset" :config="dumbConfig" />
3793+
</template>
3794+
<template #prod>
3795+
<VueUiDumbbell :dataset="dumbDataset" :config="dumbConfig">
3796+
</VueUiDumbbell>
3797+
</template>
3798+
<template #config>
3799+
{{ PROD_CONFIG.vue_ui_dumbbell }}
3800+
</template>
3801+
</Box>
3802+
3803+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_strip_plot)">
36263804
<template #title>
36273805
<BaseIcon name="chartStripPlot"/>
36283806
VueUiStripPlot
@@ -4021,7 +4199,7 @@ const stripConfig = ref({
40214199
</template>
40224200
</Box>
40234201

4024-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
4202+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
40254203
<template #title>
40264204
<BaseIcon name="chartCluster"/>
40274205
VueUiMolecule
@@ -4223,7 +4401,7 @@ const stripConfig = ref({
42234401
</template>
42244402
</Box>
42254403

4226-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
4404+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
42274405
<template #title>
42284406
<BaseIcon name="skeleton"/>
42294407
VueUiSkeleton
@@ -4582,7 +4760,7 @@ const stripConfig = ref({
45824760
</template>
45834761
</Box>
45844762

4585-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
4763+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
45864764
<template #title>
45874765
<BaseIcon name="chartScatter" />
45884766
VueUiScatter
@@ -4953,7 +5131,7 @@ const stripConfig = ref({
49535131
</template>
49545132
</Box>
49555133

4956-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
5134+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
49575135
<template #title>
49585136
<BaseIcon name="chartSparkStackbar" />
49595137
VueUiSparkStackbar

‎src/atoms/BaseIcon.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,8 @@ const icons = computed(() => {
142142
accordion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 18 6 L 16 8 L 18 10 L 16 12 L 18 14 L 16 16 L 18 18 L 2 18 L 4 16 L 2 14 L 4 12 L 2 10 L 4 8 L 2 6 L 4 4 L 2 2"/><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 4 4 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 18 6 L 16 8 L 4 8 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 18 10 L 16 12 L 4 12 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 14 L 18 14 L 16 16 L 4 16 Z" />`,
143143
cursor: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 6 10 A 1 1 0 0 0 14 10 A 1 1 0 0 0 6 10 M 1 10 L 6 10 M 14 10 L 19 10 M 10 1 L 10 6 M 10 14 L 10 19 M 10 8 L 10 12 M 8 10 L 12 10" />`,
144144
trend: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-kinejoin="round" d="M 1 6 L 4 4 L 7 6 M 4 4 L 4 13 M 7 16 C 7 16 7 18 9 18 C 12 18 10 9 12 9 C 14 9 14 13 15 13 C 18 14 17.6667 5.6667 19 2"/>`,
145-
chartStripPlot: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 4 16 A 1 1 0 0 0 4 18 A 1 1 0 0 0 4 16 M 4 13 A 1 1 0 0 0 4 15 A 1 1 0 0 0 4 13 M 4 9 A 1 1 0 0 0 4 11 A 1 1 0 0 0 4 9 M 8 11 A 1 1 0 0 0 8 13 A 1 1 0 0 0 8 11 M 8 8 A 1 1 0 0 0 8 10 A 1 1 0 0 0 8 8 M 4 2 A 1 1 0 0 0 4 4 A 1 1 0 0 0 4 2 M 12 15 A 1 1 0 0 0 12 17 A 1 1 0 0 0 12 15 M 12 10 A 1 1 0 0 0 12 12 A 1 1 0 0 0 12 10 M 12 7 A 1 1 0 0 0 12 9 A 1 1 0 0 0 12 7 M 8 5 A 1 1 0 0 0 8 7 A 1 1 0 0 0 8 5 M 16 12 A 1 1 0 0 0 16 14 A 1 1 0 0 0 16 12 M 16 10 A 1 1 0 0 0 16 12 A 1 1 0 0 0 16 10 M 16 16 A 1 1 0 0 0 16 18 A 1 1 0 0 0 16 16" />`
145+
chartStripPlot: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 4 16 A 1 1 0 0 0 4 18 A 1 1 0 0 0 4 16 M 4 13 A 1 1 0 0 0 4 15 A 1 1 0 0 0 4 13 M 4 9 A 1 1 0 0 0 4 11 A 1 1 0 0 0 4 9 M 8 11 A 1 1 0 0 0 8 13 A 1 1 0 0 0 8 11 M 8 8 A 1 1 0 0 0 8 10 A 1 1 0 0 0 8 8 M 4 2 A 1 1 0 0 0 4 4 A 1 1 0 0 0 4 2 M 12 15 A 1 1 0 0 0 12 17 A 1 1 0 0 0 12 15 M 12 10 A 1 1 0 0 0 12 12 A 1 1 0 0 0 12 10 M 12 7 A 1 1 0 0 0 12 9 A 1 1 0 0 0 12 7 M 8 5 A 1 1 0 0 0 8 7 A 1 1 0 0 0 8 5 M 16 12 A 1 1 0 0 0 16 14 A 1 1 0 0 0 16 12 M 16 10 A 1 1 0 0 0 16 12 A 1 1 0 0 0 16 10 M 16 16 A 1 1 0 0 0 16 18 A 1 1 0 0 0 16 16" />`,
146+
chartDumbbell: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 3 2 A 1 1 0 0 0 3 4 A 1 1 0 0 0 3 2 M 10 2 A 1 1 0 0 0 10 4 A 1 1 0 0 0 10 2 M 4 3 L 9 3 M 5 9 A 1 1 0 0 0 5 11 A 1 1 0 0 0 5 9 M 17 9 A 1 1 0 0 0 17 11 A 1 1 0 0 0 17 9 M 6 10 L 16 10 M 8 16 A 1 1 0 0 0 8 18 A 1 1 0 0 0 8 16 M 15 16 A 1 1 0 0 0 15 18 A 1 1 0 0 0 15 16 M 9 17 L 14 17" />`
146147
}
147148
})
148149

‎src/atoms/Legend.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function handleClick(legend, i) {
3333
:id="id"
3434
:data-cy="config.cy"
3535
class="vue-data-ui-legend"
36-
:style="`background:${config.backgroundColor};font-size:${config.fontSize}px;color:${config.color};padding-bottom:${config.paddingBottom}px;font-weight:${config.fontWeight}`"
36+
:style="`background:${config.backgroundColor};font-size:${config.fontSize}px;color:${config.color};padding-bottom:${config.paddingBottom}px;padding-top:${config.paddingTop || 0}px;font-weight:${config.fontWeight}`"
3737
>
3838
<slot name="legendTitle" :titleSet="legendSet"></slot>
3939
<div v-for="(legend, i) in legendSet" class="vue-data-ui-legend-item">

0 commit comments

Comments
 (0)