Releases: graphieros/vue-data-ui
v2.17.5
v2.17.2
Most chart components
- Add exposed method
getImage
which programmatically returns the dataUri of the chart
const chart = ref<InstanceType<typeof VueUiXy>>(null)
onMounted(async () => {
if (chart.value) {
const {
imageUri,
base64,
title, // as provided by your configuration in title.text
width,
height,
aspectRatio
} = await chart.value.getImage({ scale: 2 }) // optional scale param, defaults to 2, increase for better image quality
console.log(imageUri)
}
})
- Existing
getData
exposed method is now a Promise
const chart = ref<InstanceType<typeof VueUiXy>>()
onMounted(async () => {
if (chart.value) {
const data = await chart.value.getData()
console.log(data)
}
})
All components with pdf & image user options
- Expose PNG imageUri in
pdf
andimg
user options callbacks
const config = ref({
userOptions: {
callbacks: {
// Override the default PDF and IMG generation to use your own solution
pdf: ({ imageUri, base64 }) => {
console.log(imageUri) // will log when clicking on the user options menu PDF button
},
img: ({ imageUri, base64 }) => {
console.log(imageUri) // will log when clicking on the user options menu IMG button
}
}
}
})
Note: the old base64
exposed data is still available, returning a uri with a svg+xml prefix, which is not compatible with libs like pdfMake, contrary to imageUri, which returns a png type.
Add config options to control the display of values and percentages in the legends of some charts
const config = ref({
style: {
chart: {
legend: {
showValue: true,
showPercentage: true
}
}
}
})
The following components are concerned:
- VueUiDonut
- VueUiNestedDonuts
- VueUiDonutEvolution
- VueUiWaffle
- VueUitreemap
- VueUiRings
- VueUiGalaxy
VueUiDonut & VueUiNestedDonuts
- Add
autoSize
exposed function.
The svg area has an overflow: visible set, to allow for big dataLabels to be visible in all cases.
However, when converting the svg to an image (during a print to PNG or PDF for example), overflow gets ignored and labels cropped.
Using autoSize before calling the print resizes the viewBox of the svg to fit all its contents. The resulting svg might not be centered anymore, but will feature all its elements uncut. After the print has finished, you can reset the chart by updating a key on the component.
const chart = ref<InstanceType<typeof VueUiDonut>>()
onMounted(() => {
if (chart.value) {
chart.value.autoSize()
}
})
Legends
- Improve css on legend items, to avoid weird wrapping when converted to PNG or PDF
v2.16.5
v2.16.4
VueUiXy
- Fix harmless console errors in some edge cases where data is empty
getVueDataUiConfig
utility function
- Improve TS type: use a generic, no more 'as' casting required
Before:
const config = ref(getVueDataUiConfig('vue_ui_donut') as VueUiDonutConfig);
After:
const config = ref(getVueDataUiConfig<VueUiDonutConfig>('vue_ui_donut'));
User options menu
- Set a min-width (in some rare environments, the user options menu button and drawer could have no width, leading to an invisible menu)
v3.0.0-next.0
v3.0.0-next.0 pre-release
This prerelease is the first step toward our 3.x line, focused exclusively on improving layouts and responsive features across every component.
β οΈ Note: This is a prerelease. APIs may shift between 3.0.0βnext.0 and the final 3.0.0. We strongly encourage you to try it out, share feedback, and report any issue you encounter. It is not recommended to use it in production.
npm i vue-data-ui@next
VueUiXy
v3.0.0-next.0 includes the following changes for VueUiXy
:
- Layout is automatically computed so you don't have to tweak paddings to fit scale labels, time labels and axis labels anymore.
- Configuration changes (possible breaking changes):
config.chart.padding
defaults are now set to 0 for top, right, bottom, left.
Components affected:
VueUiXy
VueUiRidgeline
(embedded VueUiXy config padding was also modified)
v2.16.3
VueUiStackbar
- Add new config options:
const config = ref({
style: {
chart: {
bars: {
dataLabels: {
hideUnderValue: null, // or number
hideUnderPercentage: null, // or number, ej. 50 for 50%; used when showDistributedPercentage is true
},
},
grid: {
x: {
// style horizontal grid lines
linesColor: '#E1E5E8',
linesThickness: 1,
linesStrokeDasharray: 0
},
y: {
// style vertical grid lines
linesColor: '#E1E5E8',
linesThickness: 1,
linesStrokeDasharray: 0
}
}
}
}
})
v2.16.1
Shorthand hex colors are now supported in config objects
const config = ref({
style: {
chart: {
backgroundColor: '#FFF', // now works properly
}
}
})
useObjectBindings
composable #226
Special thanks to @tjones-ieee for his original idea and contribution
useObjectBindings
is a composable that flattens a reactive object into a set of refs (one for each βleafβ property) so you can easily bind to deeply nested values by their string paths.
Why use it?
- Automatic reactivity: Every nested property becomes a
Ref
, with automatic getters/setters that keep your source object in sync. - Flat API surface: Access or update any nested field by its dotβdelimited path, without writing deep destructuring or
ref
plumbing. - Dynamic path support: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.
import { useObjectBindings, getVueDataUiConfig } from "vue-data-ui";
const config = ref(getVueDataUiConfig('vue_ui_donut'));
const bindings = useObjectBindings(config);
// Now `bindings` has refs for each leaf path:
// bindings["style.chart.backgroundColor"] β Ref<string>
// bindings["style.chart.color"] β Ref<string>
// bindings["customPalette"] β Ref<boolean>
// by default, arrays are skipped:
// no "customPalette.0", unless you disable skipArrays
You can then use these in your template:
<template>
<div>
<input type="color" v-model="bindings['style.chart.backgroundColor'].value" />
</div>
</template>
Note: this composable could have been tested further, but I just couldn't wait to ship it.
v2.15.5
VueUiCandlestick #232
- Add optional min and max values for yAxis scale:
const config = ref({
style: {
layout: {
grid: {
yAxis: {
scale: {
min: null, // default
max: null // default
}
}
}
}
}
})
- Add date time formatter for time series (xAxis), so you can pass directly timestamps in your dataset:
config.style.layout.grid.xAxis.dataLabels.datetimeFormatter
datetimeFormatter: {
enable: boolean // default: false
locale: string // default: 'en'
useUTC: boolean // default: false
januaryAsYear: boolean // default: false
options: {
year: string // default: 'yyyy'
month: string // default: "MMM 'yy"
day: string // default: 'dd MMM'
hour: string // default: 'HH:mm'
minute: string // default: 'HH:mm:ss'
second: string // default: 'HH:mm:ss'
}
}
v2.15.4
v2.15.3
All charts with fullscreen feature #222
- Fix dimension calculations leading to scrollbars appearing when escaping fullscreen mode on a responsive chart