v2.12.6

Utility functions

Add getCumulativeAverage and getCumulativeMedian utility functions:

getCumulativeAverage

import { getCumulativeAverage } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeAvg = getCumulativeAverage({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeAvgNoInvalid = getCumulativeAverage({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeAvgZeroed = getCumulativeAverage({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

getCumulativeMedian

import { getCumulativeMedian } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeMed = getCumulativeMedian({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeMedNoInvalid = getCumulativeMedian({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeMedZeroed = getCumulativeMedian({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

v2.12.5

VueUiDonutEvolution

Improved datapoint focus behavior:

• Use VueUiDonut in a resizable and draggable dialog

Enregistrement.de.l.ecran.2025-06-24.a.06.47.04.mov

New config attributes to control the dialog and the embedded donut:

const config = ref({
  style: {
    chart: {
      dialog: {
        show: true,
        backgroundColor: '#FFFFFF',
        color: '#D2D353C',
        header: {
          backgroundColor: '#FFFFFF',
          color: '#2D353C',
        },
        donutChart: {
          // VueUiDonut config
        }
      }
    }
  }
})

Deprecated config attributes, related to the old way datapoints were focused on:

const config = ref({
  style: {
    chart: {
      donuts: {
        zoom: {...} // Deprecated
      }
    }
  }
})

Docs are up to date

v2.12.3

Technical release

• Harmonize some colors in default config, based on standard palette

v2.12.2

VueUiChord

• Add optional display of group percentages

const config = ref({
  style: {
    chart: {
      arcs: {
        labels: {
          showPercentage: true, // new
          roundingPercentage: 0, // new
        }
      }
    }
  }
})

View docs

v2.12.1

Remove cjs files from dist

50% lighter package size 🚀

v2.11.0

VueUiChord - New component

A chord diagram is a circular network chart that uses arcs for each category and ribbons to encode the strength and direction of relationships between them.

Ideal for revealing patterns of flow or connectivity in complex matrix or network data.

Enregistrement.de.l.ecran.2025-06-20.a.18.11.58.mov

DOCS

v2.10.11

VueUiFlow : Node Categorization & Legend Support

Enregistrement.de.l.ecran.2025-06-15.a.09.57.16.mov

New Configuration Options

nodeCategories (config.nodeCategories)

Type: Record<string, string>
Map each Sankey node to a high-level category.

// e.g.
nodeCategories: {
   'Mining': 'raw',
   'Copper': 'component',
   'Lithium': 'component',
   'PCB Assembly': 'manufacturing',
   'Battery Production': 'manufacturing',
    // …
}

nodeCategoryColors (config.nodeCategoryColors)

Type: Record<string, string>
Assign a distinct color to each category name.

// e.g.
nodeCategories: {
   raw: '#8B4513',
   component: '#1E90FF',
   manufacturing: '#FFD700',
   // …
}

With both nodeCategories and nodeCategoryColors provided, your chart will automatically:

• Color every node according to its assigned category.
• Render an interactive legend below the chart, displaying each category name and its color swatch.
• Support drilling/filtering: clicking a legend item highlights only the nodes & links in that category (and fades out others).

Summing up:

const config = {
  nodeCategories: {},
  nodeCategoryColors: {},
  style: {
    chart: {
      legend: {
        backgroundColor: "#F3F4F6",
        color: "#1A1A1A",
        show: true,
        fontSize: 14,
        bold: false,
      }
    }
  }
}

Docs are up to date

v2.10.7

VueUiFlow

• Add optional tooltip

const config = ref({
    style: {
        chart: {
            tooltip: {
                show: true,
                color: "#1A1A1A",
                backgroundColor: "#F3F4F6",
                fontSize: 14,
                showPercentage: true,
                roundingPercentage: 0,
                customFormat: null,
                borderRadius: 4,
                borderColor:"#e1e5e8",
                borderWidth: 1,
                backgroundOpacity: 30,
                position: "center",
                offsetY: 24,
                showPercentage: true,
                roundingPercentage: 0,
                translations: {
                    from: 'From:',
                    to: 'To:',
                    percentOfTotal: 'Percent of total:'
                }
            }
        }
    }
})

Documentation is up to date, as well as the chart maker.

v2.10.6

VueUiNestedDonuts

• Add optional start animation

Enregistrement.de.l.ecran.2025-06-14.a.10.52.32.mov

• Improve easing animation when segregating series (clicking on legends)

New config attributes:

const config = ref({
  // Animation used when segregating series from clicking the legend items
  serieToggleAnimation: {
    show: true,
    durationMs: 500,
  },
  // Animation used once on load
  startAnimation: {
    show: true,
    durationMs: 1000,
    staggerMs: 50
  },
})

Docs are up to date

v2.10.5

VueUiDashboard #208

• Add #top and #bottom slots to add extra content above or below the charts

        <VueUiDashboard :dataset="dataset" :config="config">
            <template #top="{ item }">
                <button>My button on top</button>
            </template>

            <template #content="{ item }">
                <component :is="item.component" v-bind="item.props" />
            </template>

            <template #bottom="{ item }">
                Content below
            </template>
        </VueUiDashboard>