Releases: graphieros/vue-data-ui
v2.4.10
VueUiXy
Minor fix: position datapoint labels correctly when value is 0.
v2.4.9
VueUiSparkStackbar
Add optional tooltip:
const config = ref<VueUiSparkStackBarConfig>({
style: {
..., // rest of your config
tooltip: {
show: boolean; // default: true
backgroundColor: string; // default: "#FFFFFF"
color: string; // default: "#2D353C"
fontSize: number; // default: 14
customFormat: null | Function; // default: null *
borderRadius: number; // default: 4
borderColor: string; // default: "#E1E5E8"
borderWidth: number; // default: 1
position: "left" | "center" | "right"; // default: "center"
offsetY: number; // default: 24
}
}
})
*check out v2.0.6 to see how to use custom format
Built-in annotator improvement
(see v2.4.2 for details on this feature)
Now the path is smoothed and optimized while drawing, to auto correct the noise that occurs when using a mouse to draw paths.
v2.4.7
v2.4.5
Source slot
All chart components now expose a #source
slot, to display a source caption under your chart.
Usage:
<VueUiDonut :dataset="dataset" :config="config">
<template #source>
<div style="font-size: 10px">
Source: Lorem ipsum...
</div>
</template>
</VueUiDonut>
v2.4.2
New user option: annotator ✍️
Most charts now have the annotator user option, available in the chart top menu, which allows end users to draw live annotations on charts. These annotations can be saved using pdf of img download. A nice feature when people talk around a chart.
When activated, the annotator shows a set of 5 actions:
- Close the annotator
- Change the pen color
- Undo
- Redo
- Delete all annotations
By default, this feature is enabled.
To disable this feature, set the following config attribute to false
.
userOptions.buttons.annotator: boolean; // default: true
To change the tooltip label of the action button:
userOptions.buttonTitles.annotator: string: // default: "Toggle annotator"
Enregistrement.de.l.ecran.2024-11-23.a.18.44.39.mov
v2.4.1
New component : VueUiBullet
A Bullet Graph is a compact visualization tool for performance data, which includes additional elements such as a target and ranges to provide richer context. This component offers a space-efficient alternative to traditional gauge charts.
Try it out on the documentation page.
A chart maker is also available:)
Enregistrement.de.l.ecran.2024-11-21.a.16.20.43.mov
v2.4.0
VueUiDonut
Apply shadow option in polar mode
VueUiRating & VueUiSmiley
- Improved reactivity
- New config options:
- Label formatter callbacks to customize labels:
config.style.rating.formatter: Function | null; // default: null
config.style.tooltip.formatter: Function | null; // default: null
Example implementation:
const config = ref({
style: {
rating: {
formatter: ({ value }) => {
return `Rating: ${value}`;
}
}
}
});
- Rounding value config option for tooltips:
config.style.tooltip.roundingValue: number: // default: 0
v2.3.99
v2.3.98
- Improve smooth line algorithm to fix dips in some edge cases
- Update
chartAgePyramid
icon - VueUiXy: expose seriesIndex and datapointIndex in #plot-comment slot
- VueUiScatter: fix regression affecting smooth line on vertical marginal bar