v2.4.60

Customizable chart background

A new slot was added on most components to customize background (image, gradient, etc.)

<VueUiXy :dataset="dataset" :config="config">
  <template #chart-background>
    <div :style="{ height: '100%', width: '100%' }">
      <img src="space.png" alt="space" class="h-full w-full object-cover">
    </div>
  </template>
</VueUiXy>

v2.4.58

VueUiGauge

• Fix: always start the animation from the smallest from value.

v2.4.57

VueUiStackbar #150

• Fix NaN% label
• Add config options to display or hide empty values or percentages:

config.style.chart.bars.dataLabels.hideEmptyValues: boolean; // default: false
config.style.chart.bars.dataLabels.hideEmptyPercentages: boolean; // default: false

v2.4.56

VueUiDonut, VueUiWaffle, VueUiQuickChart (donut mode)

• Improve serie segregating animation timing, making it more consistent and smoother.

VueUiCarouselTable

• Add marquee animation option in the config.animation:

animation: {
  type: 'scroll' | 'marquee'; // default: 'scroll'
}

Enregistrement.de.l.ecran.2024-12-27.a.08.52.46.mov

v2.4.54

User options menu display state #148

Add config options to control the state of the user options menu:

userOptions: {
  show: boolean, // Not new. Has to be true for these new options to be applied. Is true by default
  showOnChartHover: boolean; // New option. Default: false. Set to true to only show the burger menu when hovering the component
  keepStateOnChartLeave: boolean; // New option. Default: true. Set to false to always close the menu when hovering out the component
}

VueUiTableSparkline #144

• Display buttons for each sorting order
• Fix regressions in responsive mode

v2.4.50

VueUiTableSparkline #144

• Add config options to control which columns can be sorted:

config.sortedDataColumnIndices: number[]; // default: []
config.sortedSeriesName: boolean; // default: false
config.sortedSum: boolean; // default: false
config.sortedAverage: boolean; // default: false
config.sortedMedian: boolean; // default: false
config.resetSortOnClickOutside: boolean; // default: false

Example, if your table looks like this:

Series	COL 1	COL 2	COL 3	Total	Average	Median
s1	0	1	2	3	1	1

• To make COL 1 and COL 2 sortable, set sortedDataColumnIndices: [0, 1]
• To make the Series column sortable; set sortedSeriesName: true
• To make the Total column sortable, set sortedSum: true
• To make the Average column sortable, set sortedAverage: true
• To make the Median column sortable, set sortedMedian: true

v2.4.47

VueUiGauge #142

Add optional segment labels.

New dataset attribute name for dataset series

const dataset = ref({
    base: 12250, // optional
    value: 4.2,
    series: [
        {
            from: 1,
            to: 3,
            color: "#ff6400", // optional
            name: 'bad', // optional
            nameOffsetRatio: 1.1 // optional, to offset an individual name label and avoid label overlapping if segments are narrow
        },
        {
            from: 3,
            to: 4,
            color: "#5f8bee",
            name: 'acceptable'
        },
        {
            from: 4,
            to: 5,
            color: "#42d392",
            name: 'very good'
        },
    ]
})

It is possible to set individual offset for name labels, using the nameOffsetRatio dataset attribute:

New configuration attributes for segment labels:

config.style.chart.layout.segmentNames: {
  show: boolean; // default: true
  curved: boolean; // default: true
  offsetRatio: number; // default: 1.1
  fontSize: number; // default: 16
  useSerieColor: boolean; // default: true
  color: string; // default: "#2D353C"
  bold: boolean; // default: false
}

• A new config attribute was also added to control the radius of the gauge:

config.style.chart.layout.radiusRatio: number; // default: 1

• New config attributes are added to display separators between segments:

config.style.chart.layout.segmentSeparators: {
  show: boolean; // default: false
  offsetOut: number; // default: 0
  offsetIn: number; // default: 0
  stroke: string; // default: "#2D353C"
  strokeWidth: number; // default: 2
}

Here is an example of usage for separators (check out the examples page):

Documentation is up to date
Chart builder too:)

An example of cool stuff that can be done now with VueUiGauge:

v2.4.44

VueUiDonut #141

• Fix percentage display error in legend after multiple clicks - by @mnenie

VueUiXy

• Minor design improvement in tooltip and legend markers

v2.4.43

VueUiXy & VueUiStackbar #139

• Add @selectTimeLabel emit

Use this emit to use the data at the given time label:

<VueUiStackbar
  :dataset="dataset"
  :config="config"
  @selectTimeLabel="selectTimeLabel"
/>

function selectTimeLabel(data) {
  console.log(data);
}

• Add #time-label scoped slot

Use this slot to customize time labels with your own svg text elements:

<VueUiStackbar :dataset="dataset" :config="config">
  <template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
    <g @click="() => selectTimeLabel({ absoluteIndex, content, /* or whatever you need for your custom click event */ })">                
      <text
        :x="x"
        :y="y"
        :font-size="fontSize"
        :text-anchor="textAnchor"
        :fill="fill"
      >
        {{ content }}
      </text>
      <text
        :x="x"
        :y="y + fontSize"
        :font-size="fontSize * 0.8"
        :text-anchor="textAnchor"
        fill="grey"
      >
        {{ content }}
      </text>
    </g>
  </template>
</VueUiStackbar>

An additional config attribute was also added for both components to show/hide time label in the tooltip:

• VueUiXy:

config.chart.tooltip.showTimeLabel: boolean; // default: true

• VueUiStackbar:

config.style.chart.tooltip.showTimeLabel: boolean; // default: true

v2.4.42

Tooltip #138

• Fix tooltip offset when the component is placed inside a wrapper bearing transform css properties. Tooltips are now placed inside the splendid Teleport built-in component, attaching it to the body instead of the chart wrapper. Vue is awesome 🍀

Zoom #137

• Add config attributes to set initial zoom startIndex and endIndex, to show the chart already zoomed in on load. Inside the zoom config attribute object, the following attributes are now available:

startIndex: number | null; // default: null
endIndex: number | null; // default: null

Components with the zoom feature:

• VueUiCandlestick
• VueUiDonutEvolution
• VueUiQuickChart *
• VueUiStackbar
• VueUiXy
• VueUiXyCanvas

* VueUiQuickChart has special attributes for this feature:

zoomStartIndex: number | null; // default: null
zoomEndIndex: number | null; // default: null