Releases: graphieros/vue-data-ui
Releases · graphieros/vue-data-ui
v2.12.5
VueUiDonutEvolution
Improved datapoint focus behavior:
- Use VueUiDonut in a resizable and draggable dialog
Enregistrement.de.l.ecran.2025-06-24.a.06.47.04.mov
New config attributes to control the dialog and the embedded donut:
const config = ref({
style: {
chart: {
dialog: {
show: true,
backgroundColor: '#FFFFFF',
color: '#D2D353C',
header: {
backgroundColor: '#FFFFFF',
color: '#2D353C',
},
donutChart: {
// VueUiDonut config
}
}
}
}
})Deprecated config attributes, related to the old way datapoints were focused on:
const config = ref({
style: {
chart: {
donuts: {
zoom: {...} // Deprecated
}
}
}
})v2.12.3
Technical release
- Harmonize some colors in default config, based on standard palette
v2.12.2
v2.12.1
Remove cjs files from dist
50% lighter package size 🚀
v2.11.0
VueUiChord - New component
A chord diagram is a circular network chart that uses arcs for each category and ribbons to encode the strength and direction of relationships between them.
Ideal for revealing patterns of flow or connectivity in complex matrix or network data.
Enregistrement.de.l.ecran.2025-06-20.a.18.11.58.mov
v2.10.11
VueUiFlow : Node Categorization & Legend Support
Enregistrement.de.l.ecran.2025-06-15.a.09.57.16.mov
New Configuration Options
nodeCategories (config.nodeCategories)
Type: Record<string, string>
Map each Sankey node to a high-level category.
// e.g.
nodeCategories: {
'Mining': 'raw',
'Copper': 'component',
'Lithium': 'component',
'PCB Assembly': 'manufacturing',
'Battery Production': 'manufacturing',
// …
}nodeCategoryColors (config.nodeCategoryColors)
Type: Record<string, string>
Assign a distinct color to each category name.
// e.g.
nodeCategories: {
raw: '#8B4513',
component: '#1E90FF',
manufacturing: '#FFD700',
// …
}With both nodeCategories and nodeCategoryColors provided, your chart will automatically:
- Color every node according to its assigned category.
- Render an interactive legend below the chart, displaying each category name and its color swatch.
- Support drilling/filtering: clicking a legend item highlights only the nodes & links in that category (and fades out others).
Summing up:
const config = {
nodeCategories: {},
nodeCategoryColors: {},
style: {
chart: {
legend: {
backgroundColor: "#F3F4F6",
color: "#1A1A1A",
show: true,
fontSize: 14,
bold: false,
}
}
}
}v2.10.7
VueUiFlow
- Add optional tooltip
const config = ref({
style: {
chart: {
tooltip: {
show: true,
color: "#1A1A1A",
backgroundColor: "#F3F4F6",
fontSize: 14,
showPercentage: true,
roundingPercentage: 0,
customFormat: null,
borderRadius: 4,
borderColor:"#e1e5e8",
borderWidth: 1,
backgroundOpacity: 30,
position: "center",
offsetY: 24,
showPercentage: true,
roundingPercentage: 0,
translations: {
from: 'From:',
to: 'To:',
percentOfTotal: 'Percent of total:'
}
}
}
}
})Documentation is up to date, as well as the chart maker.
v2.10.6
VueUiNestedDonuts
- Add optional start animation
Enregistrement.de.l.ecran.2025-06-14.a.10.52.32.mov
- Improve easing animation when segregating series (clicking on legends)
New config attributes:
const config = ref({
// Animation used when segregating series from clicking the legend items
serieToggleAnimation: {
show: true,
durationMs: 500,
},
// Animation used once on load
startAnimation: {
show: true,
durationMs: 1000,
staggerMs: 50
},
})v2.10.5
VueUiDasard #208
- Add #top and #bottom slots to add extra content above or below the charts
<VueUiDasard :dataset="dataset" :config="config">
<template #top="{ item }">
<button>My button on top</button>
</template>
<template #content="{ item }">
<component :is="item.component" v-bind="item.props" />
</template>
<template #bottom="{ item }">
Content below
</template>
</VueUiDasard>v2.10.4
VueUiHeatmap
- Add
@selectDatapointemit, triggered when clicking on a cell
Emits the cell data:
{
side: 'up' | 'down' // above or below average
color: string
ratio: number
value: number
xAxisName: string | number | undefined
yAxisName: string | number | undefined
id: string // internal uuid
}