v2.6.3

VueUiRating

• Add scoped slots to customize rating units. Individual content can be customized for each rating unit, using divs, images or svg.

#layer-under to customize the unselected state
#layer-above to customize the active state

Enregistrement.de.l.ecran.2025-02-12.a.06.46.04.mov

Example:

            <VueUiRating :dataset="dataset" :config="config" ref="build" @rate="setRating">
                <template #layer-under="{ value, size, focusedValue }">
                    <svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
                        <path v-if="value === 1" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" fill="#CCCCCC"/>
                        <path v-if="value === 2" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" fill="#CCCCCC"/>
                        <path v-if="value === 3" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" fill="#CCCCCC"/>
                        <path v-if="value === 4" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" fill="#CCCCCC"/>
                        <path v-if="value === 5" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" fill="#CCCCCC"/>
                    </svg>
                </template>
                <template #layer-above="{ value, size, hoveredValue, focusedValue }">
                    <svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
                        <path v-if="value === 1" fill="#5A5A5A" stroke="#5A5A5A" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" :style="{ opacity: (value <= r || value < hoveredValue) ? 1 : 0}"/>
                        <path v-if="value === 2" fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
                        <path v-if="value === 3" fill="#3A3A3A" stroke="#3A3A3A" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
                        <path v-if="value === 4" fill="#2A2A2A" stroke="#2A2A2A" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
                        <path v-if="value === 5" fill="#1A1A1A" stroke="#1A1A1A" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
                    </svg>
                </template>
            </VueUiRating>

Docs are up to date.

v2.6.2

VueUiXy

• Ignore null values for line generation

v2.6.1

Technical release

• Vue version updated to v3.5.13
• Vite version updated to v6.1.0

v2.5.9

VueUiCirclePack

• Add @selectDatapoint emit

<VueUiCirclePack
  :dataset="dataset"
  :config="config"
  @selectDatapoint="logMe"
/>

• Add #data-label slot

<VueUiCirclePack>
  <template #data-label="{ x, y, name, value, color, fontSize }">
    <text
      :x="x"
      :y="y"
      :fill="color"
      :font-size="fontSize.name"
      text-anchor="middle"
    >
      {{ name }} : {{ value }}
    </text>
  </template>
</VueUiCirclePack>

Utility functions

• Add createTSpans utility function, to create TSpan elements from a string to break text into multiple lines. The output should be placed with v-html inside an SVG <text> element.

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

const textContent = createTSpans({
    content: "This is an example of multiline text",
    fontSize: 16,
    fill: "#333",
    maxWords: 2,
    x: 10,
    y: 20
});

<text
    :x="10"
    :y="20"
    :font-size="16"
    fill="#1A1A1A"
    text-anchor="middle"
    v-html="textContent"
 />

v2.5.8

New component: VueUiCirclePack 🫧

• Represent hierarchical data with an arrangement of packed circles

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

const dataset = ref<VueUiCirclePackDatasetItem[]>([
  { name: 'Datapoint A', value: 200 },
  { name: 'Datapoint B', value: 155 },
  { name: 'Datapoint C', value: 132 },
  ...
])

const config = ref<VueUiCirclePackConfig>({
  /* Your config here */
});

Check out the docs to customize your config.

<VueUiCirclePack
  :dataset="dataset"
  :config="config"
/>

Or, using the universal component:

<VueDataUi
  component="VueUiCirclePack"
  :dataset="dataset"
  :config="config"
/>

Check out the docs

A chart builder is currently under construction.

v2.4.90

VueUiGauge

Add new config option to:

• display an arc following the proportion of the rating:

config.style.chart.layout.indicatorArc.show: boolean; // default: false
config.style.chart.layout.indicatorArc.radius: number; // default: 123
config.style.chart.layout.indicatorArc.fill: string; // default: "#E1E5E8"

• hide / show the gauge pointer:

config.style.chart.layout.pointer.show: boolean; // default: true

This is a non breaking change.

This combination of options allows for even more customization.

Try it out on the docs website

More examples will be added soon in the examples page

Enregistrement.de.l.ecran.2025-01-27.a.19.56.47.mov

v2.4.88

VueUiXy

Optimization improvements:

• Reduce drastically the number of svg dom nodes
• Add a config attribute to hide line plots above a certain number of datapoints (plots of the selected period will still appear when hovering on a datapoint, or when using the minimap)

config.line.dot.hideAboveMaxSerieLength: number; // default: 62

This way line plots will only be visible when they are needed:

Enregistrement.de.l.ecran.2025-01-21.a.06.42.18.mov

All components with responsive feature

• Fix harmless console error ("Uncaught ResizeObserver loop completed with undelivered notifications")

All components with mutable config (mutated through user options menu)

• Fix reactivity of some mutable config attributes (previously not reactive when dynamically mutated from the parent)

v2.4.83

• Fix ChartUserOptions wrong types:

userOptions.buttonTitles.animation: string; // previously wrongly typed as boolean
userOptions.buttonTitles.annotator: string; // previously wrongly typed as boolean

v2.4.82

All components using zoom

• Improved zoom design with tooltips above the range handles, which are visible when using the range inputs (mobile friendly).

v2.4.79

VueUiWordCloud #159

• Fix words not rendering when all values are identical