Releases: graphieros/vue-data-ui
v2.2.84
VueUiSparkbar
improvements
This release adds config options to setup a title and subtitle on the chart, or to use a #title slot for full customization.
Check out the updated docs
Shoutout to @lucaspmarra for his idea and contribution for this improvement :)
v2.2.82
v2.2.79
VueUiSparkbar
improvements
- New config options to display the target value, and a text for the target
config.style.layout.showTargetValue: boolean; // default: false
config.style.layout.targetValueText: string; // default: ""
- New
#data-label
slot to display custom data labels. This slot exposes abar
object with all the necessary data to build your own labels. If the slot is not used, default data labels will be displayed.
<VueUiSparkbar
:dataset="dataset"
:config="config"
>
<template #data-label="{ bar }">
<div style="width:100%">
{{ bar.name }}: {{ bar.valueLabel }} / {{ bar.targetLabel }}
</div>
</template>
</VueUiSparkbar>
v2.2.78
This release removes all spaces before colons in data labels and legends.
v2.2.74
VueUiSparkbar
This release adds an optional dataset option target
, to allow multiple dataset to have individual targets.
When "target" is used on a datapoint, the bar width ratio will be value / target
.
config.style.layout.independant
must be set to true.
const dataset = ref([
{
name: "Item 1",
value: 200,
target: 1000,
rounding: 1,
suffix: "",
prefix: ""
},
{...}
])
v2.2.73
VueUiGauge
: fixed config option marker offsetY not applied
v2.2.72
VueUiGauge
: Fixed pointer y offset when in rounded mode
v2.2.71
VueUiXy
: fixed sizing not working properly when changing dimensions in the config
v2.2.70
This release improves accessibility of the charts user options menu, by adding title attributes to its buttons.
The content of the titles attributes is configurable for each chart, through the config.userOptions.buttonTitles :
const config = ref({
userOptions: {
buttonTitles: {
open: "Open options",
close: "Close options",
tooltip: "Toggle tooltip",
pdf: "Download PDF",
csv: "Download CSV",
img: "Download PNG",
table: "Toggle table",
labels: "Toggle labels",
sort: "Toggle sort",
fullscreeen: "Toggle fullscreen"
}
}
})
Since charts have more or less user options, the config buttonTitles options will vary depending on the chart. Check out the detailed docs to learn more.
v2.2.69
VueUiDonut
& VueUiParallelCoordinatePlot
Added dataset and config options to display comments for specific datapoints.
Comments can be optionally visible in the tooltip too.
VueUiDonut example:
const dataset = ref([
{
name: 'Serie 1',
values: [100],
comment: 'A comment for this datapoint'
},
{
name: 'Serie 2',
values: [50]
}
])
VueUiParallelCoordinatePlot
example:
const dataset = ref([
{
name: 'Series 1',
shape: 'triangle',
series: [
{
name: 'Item 1.1',
values: [1200, 300, 12, 1.2],
comments: ['', '', 'A comment for this datapoint', ''] // Comment will be visible under the datapoint with value 12
},
{...}
]
},
{...}
])
You can configure comments in the config object:
const config = ref({
style: {
chart: {
comments: {
show: true,
showInTooltip: true,
width: 200,
offsetX: 0,
offsetY: 0
}
}
}
})
To actually display comments on the chart, you need to use the #plot-comment slot, which gives you more control on the style:
<VueUiDonut
:dataset="dataset"
:config="config"
>
<template #plot-comment="{ plot }">
<div :style="`width: 100%; text-align:${plot.textAlign}; color:${plot.color}`">
{{ plot.comment }}
</div>
</template>
</VueUiDonut>
<VueUiParallelCoordinatePlot
:dataset="dataset"
:config="config"
>
<template #plot-comment="{ plot }">
<div :style="`width: 100%; text-align:center; color:${plot.color}`">
{{ plot.comment }}
</div>
</template>
</VueUiParallelCoordinatePlot>
We are considering rolling-out this feature to other charts where it would be useful.