Releases: graphieros/vue-data-ui
Releases · graphieros/vue-data-ui
v3.8.5
VueUiDonut
- Improve animation performance
- Fade out data labels during series segregation
- Add config options to display non overlapping labels for small arcs:
const config = ref({
style: {
chart: {
labels: {
dataLabels: {
smallArcClusterThreshold: 8, // show label on the side under this percentage
smallArcClusterFontSize: 12, // font size for small arc labels
oneLine: false, // display name and value on the same line
}
}
}
}
})
Built-in chart annotator (all charts with user options):
- Fix caret not visible in text mode
v3.8.3
VueUiDag
- Slightly trim the edge path when arrows are present, to avoid seeing the edge tip when the arrow is highlighted
- Expose the graph orientation ('TB' | 'RL' | 'BT' | 'LR') in scoped slots
- Add the
#free-node-labelscoped slot, to customize labels inside an exposed svg G element:
<VueUiDag :dataset="dataset" :config="config">
<template #free-node-label="{ node, orientation }">
<!-- Content will be injected inside a svg G element -->
<!-- Use this to place the label below the node, for example -->
<text :x="node.x" :y="node.y + node.height" fill="black" text-anchor="middle">
{{ node.label }}
</text>
</template>
</VueUiDag>v3.8.1
VueUiDag
- Add optional chart dimensions and responsive mode:
const config = ref({
responsive: false, // new
style: {
chart: {
width: null, // new
height: null, // new
}
}
})v3.8.0
VueUiDag new component ! 🎉
Enregistrement.de.l.ecran.2025-12-07.a.17.58.38.mov
Create easily a performant DAG graph
- Simple dataset:
const dataset = ref({
nodes: [
{ id: "A", label: "A",},
{ id: "B", label: "B",},
{ id: "C", label: "C", backgroundColor: '#FF0000', color: '#FFFFFF'},
{ id: "D", label: "D" },
],
edges: [
{ from: "A", to: "B",},
{ from: "B", to: "A" },
{ from: "B", to: "A" },
{ from: "C", to: "A", color: '#FF0000'},
{ from: "B", to: "D" },
{ from: "C", to: "D", color: '#FF0000' },
{ from: "D", to: "A" },
]
});- Customize everything through the config object (node size, tooltips, arrows, etc)
- Customize content through comprehensive slots (node content, tooltips, labels)
- Pan zoom feature
Documentation is up to date
View examples
A chart maker is also available.
v3.7.16
VueUiCursor
- Fix crosshair issue when centerCircleRadius is updated dynamically
- Manage error gracefully when a provided config.parentId is not (yet) available in the DOM
VueUiDigits
- Add a config attribute to control digit thickness:
const config = ref({
digits: {
thickness: 1, // new
},
});VueUiSmiley
- Refactor component to a leaner version. No change in functionality.
VueUiIcon
- Add new icons: 'triangleInformation', 'triangleExclamation'
v3.7.15
v3.7.14
VueUiWordCloud
- 3x performance improvement on the word placement algorithm
- Fix word size issues on small datasets
v3.7.13
v3.7.12
VueUiDonutEvolution #279
- Fix scale offsetX not applied from config
BaseDraggableDialog built-in component #278
- Change css class to avoid conflicts with UI libraries - by @ujaved931 🚀
- Improve accessibility features
VueUiStackline
- Treat null values as zero in area computation to fix discontinuous area fills when null values are present in a series.
v3.7.11
VueUiSparkStackbar
- Fix legend value & percentage not showing when animation is disabled
Dev deps
- Bump vue from 3.5.24 to 3.5.25
