v3 development status

[graphieros]

Current version: 3.0.0-next.33

npm i vue-data-ui@next

Migration progress: 17.3%

⚠️ Note: This is a prerelease. APIs may shift between 3.0.0‑next and the final 3.0.0. We strongly encourage you to try it out in development, share feedback, and report any issue you encounter. It is not recommended to use in production, as the API is not yet definitive.

v3 features

Configuration

• responsive: config.responsive attribute

const config = ref({
  responsive: false // default
})

• autoSize: config.autoSize attribute, with smart resizing capabilities

const config = ref({
  autoSize: true // default. To restore v2 behavior, set to false
})

• loading: config.loading attribute, with beautiful skeleton loaders

const config = ref({
  loading: false // default; also triggered internally when props.dataset is missing or empty
})

• debug: config.debug attribute, if true, show built-in warnings. Switch to false for prod

const config = ref({
  debug: false // default
})

Utility functions

• formatSmallValue:
  Formats numeric values with a controlled number of decimal places, applying maxDecimals for all values when no fallbackFormatter is given, or calling the fallbackFormatter for values ≥ 1 if provided.

import { formatSmallValue } from "vue-data-ui";
// Zero value
formatSmallValue({ value: 0 }); // "0"
     
// Values < 1 use minimal decimals
formatSmallValue({ value: 0.9 }); // "0.9"
formatSmallValue({ value: 0.0042 }); // "0.0042"
formatSmallValue({ value: 0.00420001 }); // "0.0042"
     
// Retain trailing zeros
formatSmallValue({ value: 0.9, removeTrailingZero: false }); // "0.90"
     
// Values ≥ 1 without fallback apply maxDecimals
formatSmallValue({ value: 1.61803, maxDecimals: 3 }); // "1.618"
     
// Values ≥ 1 with fallbackFormatter
formatSmallValue({ value: 2.5, fallbackFormatter: v => v.toFixed(1) }); // "2.5"
     
// Negative values
formatSmallValue({ value: -0.056 }); // "-0.056"

New events in config

const config = ref({
  events: {
            // default
            datapointEnter: null,
            datapointLeave: null,
            datapointClick: null
        },
});

Usage:

const config = ref({
  events: {
            // default
            datapointEnter: ({ datapoint, seriesIndex }) => {
               console.log({ datapoint, seriesIndex })
             },
            // other events expose the same data
        },
});

Current state of development of the next branch

Migrated	add responsive	add autoSize	add loading	add debug	add events	other changes ⚠️
VueUiDonut	✅ already v2	✅	✅	✅	✅	config.useCssAnimation: now false by default config.startAnimation.show: now false by default config.style.chart.layout.donut.radiusRatio (default 0.3, clamped between 0.1 and 0.5) Add #hollowslot which exposes total, average and dataset in a div on top of the chart svg
VueUiXy (refactored to composition API)	✅ already v2	Not necessary	✅	✅	✅	config.useCssAnimation: now false by default style.chart.padding is ignored in responsive mode Add config.chart.grid.labels.yAxis.rounding Add config.chart.grid.labels.xAxisLabels.autoRotate to rotate time labels automatically when they collide Add config.chart.grid.labels.yAxis.serieNameFormatter applied on individualScale and stacked modes Add selectedXIndex prop to cummunicate index selection through different instances of VueUiXy using events Add config.chart.zoom.preview ideal for large datasets to improve performance when using zoom Drastic reduction of DOM nodes
VueUiVerticalBar	✅ already v2	✅	✅	✅		Component is renamed to VueUiHorizontalBar but will remain usable as VueUiVerticalBar Add config.style.chart.layout.separators.fullWidth for line separators Default font sizes are increased
VueUiNestedDonuts	✅ already v2	Not necessary	✅	✅	✅	New config.style.chart.layout.labels.dataLabels.curvedDonutName attribute to show donut names on a curved path around the top of the donuts
VueUiStackbar	✅ already v2	Not necessary	✅	✅		Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiCandlestick	✅ already v2	Not necessary	✅	✅		Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiDonutEvolution	✅	Not necessary	✅	✅		Add config.style.chart.layout.grid.axis object to set axis names Add config.style.chart.layout.grid.xAxis.dataLabels.autoRotate
VueUiSparkline	✅ already v2	Not necessary	✅	✅	✅	Add config.style.dataLabel.datetimeFormatter to handle timestamps passed in periods of the dataset
VueUiHeatmap pending	⬜️	⬜️	⬜️	⬜️	⬜️
VueUiTableSparkline pending			⬜️	⬜️	⬜️

... all components will eventually be featured in this status table

Other changes

Tooltips

All components with a config....tooltip receive the additional options:

tooltip: {
  smooth: true, // same as previous behavior. Set to false, will remove the smooth animation frame when moving the tooltip
  backdropFilter: true, // same as previous behavior. Set to false, removes the css backdrop filter, useful in some cases where performance is critical.
}