v3 development status

[graphieros]

Current version: 3.0.0-next.77

npm i vue-data-ui@next

⚠️ 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.

Note: skeleton loaders are improved in v3, using the same layout as the chart component. They reflect the looks of the configuration you devise for your component. If props.dataset is undefined, skeleton loaders will be visible, without JS errors (set config.debug to true during dev to see informative warnings when props.dataset is missing or badly formatted). Hopefully you will find these skeleton loaders to your taste, which will allow you to avoid using v-if="dataset.length" on your chart components.

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 DONE 👌	✅ 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) DONE 👌	✅ already v2		✅	✅	✅	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 Add config.bar.innerGap Drastic reduction of DOM nodes
VueUiVerticalBar DONE 👌	✅ 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 DONE 👌	✅ already v2		✅	✅	✅	New config.style.chart.layout.labels.dataLabels.curvedDonutName attribute to show donut names on a curved path around the top of the donuts
VueUiStackbar DONE 👌	✅ already v2		✅	✅	✅	Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiCandlestick DONE 👌	✅ already v2		✅	✅	✅	Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiDonutEvolution DONE 👌	✅		✅	✅	✅	Add config.style.chart.layout.grid.axis object to set axis names Add config.style.chart.layout.grid.xAxis.dataLabels.autoRotate
VueUiSparkline DONE 👌	✅ already v2		✅	✅	✅	Add config.style.dataLabel.datetimeFormatter to handle timestamps passed in periods of the dataset
VueUiHeatmap DONE 👌	✅		✅	✅	✅	Add config.style.layout.dataLabels.xAxis.datetimeFormatter and config.style.layout.dataLabels.yAxis.datetimeFormatter Add config.style.layout.width and config.style.layout.height and remove config.style.layout.cells.height Legend now only displayed on the right. Remove config.style.legend.position and config.style.legend.scaleBorderRadius
VueUiWaffle DONE 👌	✅ already v2		✅	✅	✅
VueUiQuickChart DONE 👌	✅ already v2		✅	✅	✅	Add config.donutCurvedMarkers Add config.xyPeriodLabelsAutoRotate
VueUiBullet DONE 👌	✅		✅	✅		Add config.style.chart.target.show
VueUiParallelCoordinatePlot DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.yAxis.labels.axisNamesRotation Add config.style.chart.yAxis.labels.axisNamesAutoRotate
VueUiFlow DONE 👌	✅		✅	✅	✅	Remove config.style.chart.nodes.minHeight Remove config.style.chart.links.width Add config.style.chart.width and config.style.chart.height
VueUiAgePyramid DONE 👌	✅ already v2		✅	✅	✅	Add config.style.layout.dataLabels.xAxis.rotation Add config.style.layout.dataLabels.xAxis.autoRotate
VueUiHistoryPlot DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.axes.x.labels.autoRotate
VueUiRidgeline DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.xAxis.labels.autoRotate
VueUiScatter DONE 👌	✅ already v2		✅	✅	✅
VueUiTreemap DONE 👌	✅ already v2		✅	✅	✅
VueUiRings DONE 👌	✅ already v2		✅	✅	✅
VueUiGauge DONE 👌	✅ already v2		✅	✅		Add config.style.chart.layout.segmentNames.minFontSize (applicable on non curved labels, to avoid overflow)
VueUiOnion DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.layout.labels.minFontSize
VueUiTiremarks DONE 👌	✅		✅	✅		Add config.style.chart.width and config.style.chart.height
VueUiWheel DONE 👌	✅ already v2		✅	✅
VueUiThermometer DONE 👌	✅		✅	✅		Add config.style.chart.width Add config.style.chart.label.show Add config.style.chart.label.minFontSize Remove config.style.chart.padding.left Remove config.style.chart.padding.right
VueUiStripPlot DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.width Remove config.style.chart.stripWidth Add config.style.chart.labels.xAxisLabels.rotation Add config.style.chart.labels.xAxisLabels.autoRotate
VueUiDumbbell DONE 👌	✅ already v2		✅	✅	✅	Add config.style.chart.grid.scaleMin Add config.style.chart.grid.scaleMax Add config.style.chart.comparisonLines Add config.style.chart.labels.axis Add config.style.chart.labels.xAxisLabels.rotation Add config.style.chart.labels.xAxisLabels.autoRotate Add config.style.chart.labels.yAxisLabels.formatter
VueUi3dBar DONE 👌	✅		✅	✅	✅	Add config.useCssAnimation
VueUiWordCloud DONE 👌	✅ already v2		✅	✅	✅
VueUiSparkbar DONE 👌			✅	✅	✅
VueUiSparkStackbar DONE 👌			✅	✅	✅
VueUiSparkHistogram DONE 👌	✅		✅	✅	✅	Add config.style.labels.value.minFontSize Add config.style.labels.valueLabel.minFontSize Add config.style.labels.timeLabel.minFontSize
VueUiSparkgauge DONE 👌			✅	✅
VueUiSparkTrend DONE 👌	✅		✅	✅		Add config.style.width Add config.style.height
VueUiGizmo DONE 👌			✅	✅
VueUiKpi DONE 👌				✅
VueUiRelationCircle DONE 👌	✅ already v2		✅	✅	✅	Add config.style.labels.minFontSize
VueUiChord DONE 👌	✅ already v2		✅	✅	✅
VueUiRadar DONE 👌	✅ already v2		✅	✅	✅
VueUiMoodRadar DONE 👌	✅		✅	✅	✅
VueUiQuadrant DONE 👌	✅ already v2		✅	✅	✅
VueUiGalaxy DONE 👌	✅		✅	✅	✅
VueUiChestnut DONE 👌			✅	✅
VueUiCirclePack DONE 👌	(built-in)		✅	✅	✅
VueUiMolecule DONE 👌			✅	✅	✅
VueUiWorld DONE 👌			✅	✅	✅

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.
}

⚠️ Configuration padding

• Some charts padding config defaults are modified in v3. If you are migrating to v3, we recommend you verify the paddings in your chart configs. Most chart layouts are now automatically adjusted to prevent overflow, therefore your previous padding config could result in excessive white space.