v2.4.46

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'
        },
    ]
})

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

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

v2.4.41

VueUiRelationCircle

Full revamp of the component with better functionality.
Docs are up to date

Enregistrement.de.l.ecran.2024-12-18.a.08.29.07.mov

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