v2.6.8

VueUiXy

• Minor style improvement for the selected state of Y scale in individualScale mode

v2.6.7

Accessibility improvement

• Most charts svg element now have aria attributes to improve accessibility.

v2.6.6

This release fixes TS type errors.

v2.6.5

VueUiSparkline

Fix edge cases layout bugs when dataset contains a single datapoint.

v2.6.4

VueUiXyCanvas #168

• Fix scale issue in stack mode
• Add optional dataset attribute showYMarker to display a data label on the Y axis when hovering the chart
• Add config attribute to show an horizontal selector when hovering the chart:

config.style.chart.selector.showHorizontalSelector: boolean; // default: false

Color pickers (built-in annotator from the user options menu in most charts)

• Improved accessibility

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.