v2.4.40

VueUiXy

• Fix error in responsive mode when no title is set.

VueUiDashboard

• Prevent dashboard events when using zoom inputs in chart components

v2.4.39

New utility functions

The following set of tested utility functions are now available:

import { 
  abbreviate, 
  darkenColor, 
  lightenColor, 
  shiftColorHue 
} from "vue-data-ui";

Documentation website is up to date

abbreviate

Generate abbreviations for labels

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

const text = "Lorem Ipsum Dolor Sit Amet";
const abbreviated = abbreviate(text, 5); // result: "LIDSA"

darkenColor

Darkens a color by a specified strength.
The color passed can be in HEX (with or without alpha channel), RGB or RGBA, or named color.

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

const color = "#FF0000";
const darkened = darkenColor(color, 0.1);

lightenColor

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

Lightens a color by a specified strength.
The color passed can be in HEX (with or without alpha channel), RGB or RGBA, or named color.

const color = "#FF0000";
const lightened = lightenColor(color, 0.1);

shiftColorHue

Shifts hue for a given color, by a given strength.
The color passed can be in HEX (with or without alpha channel), RGB or RGBA, or named color.

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

const color = "#FF0000";
const shifted = shiftColorHue(color, 0.1);

v2.4.38

VueUiGauge

Add config attributes to further control labels:

config.style.chart.layout.markers.show: boolean; // default: true
config.style.chart.layout.markers.prefix: string; // default: ""
config.style.chart.layout.markers.suffix: string; // default: ""
config.style.chart.layout.markers.formatter: Function | null ; // default: null
config.style.chart.legend.show: boolean; // default: true

Reminder on how to use the formatter:

const config = ref({
   style: {
     chart: {
       layout: {
         markers: {
           formatter: ({ value }) => {
             return `my string ${value}`
           }
         }
       }
     }
   }
})

v2.4.37

New component: VueUiHistoryPlot

Visualize the dynamic journey of two variables over time, with every point telling a story of change and connection in two-dimensional space.

Check out the docs
A chart builder is also available!

VueUiCarouselTable

• Fix regression causing caption to move
• Add config attribute to control the table background color:

config.tbody.backgroundColor: string; // default: "#FFFFFF"

VueUiTableSparkline

• Fix textAlign issues
• Add config attribute to hide color markers in first TD:

config.tbody.showColorMarker: boolean; // default: true

• Improve selection behaviour
• Add config options to control the background color of selected cells:

config.tbody.selectedColor.useSerieColor: boolean; // default: true
config.tbody.selectedColor.fallback: string; // default: #E1E5E8, applied when useSerieColor is set to false

• Add config options to control chart dimensions:

config.sparkline.dimensions.width: number; // default: 150
config.sparkline.dimensions.heightRatio: number; // default: 1

v2.4.27

VueUiCarouselTable

New config options to control the display of the scrollbar:

config.scrollbar.showOnlyOnHover: boolean; // default: false
config.scrollbar.hide: boolean; // default: false

see #129

v2.4.26

New component: VueUiFunnel

A funnel chart is a unique chart type that illustrates the progression of users through a business or sales process. Its name reflects its shape, beginning with a wide top and tapering to a narrow bottom. The funnel's width at each stage represents the number of users, decreasing as the process advances.

Classic funnel charts generally use a "realistic" funnel shape, which makes it hard for the brain to compare sizes. This funnel chart is designed to make it easy to compare stages, using simple bars.

The documentation website is up to date.

A chart maker is also available !

v2.4.25

VueUiCanvas : custom scales

• Set a custom scale in non stack mode (default) through the following new config attributes:

style.chart.scale.min: number | null; // default: null
style.chart.scale.max: number | null; // default: null

• Set custom scales on each dataset item (applied when stack mode is true), through the following new dataset attributes:

scaleMin: number | null;
scaleMax: number | null;

• Show vertical lines at same index as time labels on large datasets

Docs are up to date.

v2.4.22

VueUiCanvas

• Fix dataset reactivity issue

v2.4.21

All charts with minimap in zoom

• Fix layout shift occurring on the minimap on chart re-rendering

VueUiIcon

• Add "boxes" icon

v2.4.17

VueUiParallelCoordinatePlot

• Increase the capture area of tooltip traps to facilitate user selection

---

All components with optional minimap in zoom

• Fix harmless occasional console error

---

VueUiWordCloud

• Set text elements dominant-baseline to 'central'

---

User options built-in annotator

• Improve color picker