VueUiQuadrant zoom functionality

This release adds the zoom functionality to the VueUiQuadrant component.
Clicking on a side will zoom on it, and display a minimap.

VueUiTreemap new component

v2.0.71

VueUiTreemap improved zoom functionality & animations

Improved components resilience

This release improves the stability of all chart components when the dataset passed into the props is undefined or empty, which used to cause errors on some components.

Now, empty or undefined datasets will show a skeleton of the same type as the component's.
In the console, a warning is displayed to the user pointing to bad formatted or missing dataset.

New types of skeleton loaders were added to the VueUiSkeleton component:

• bar3d
• sparkHistogram
• sparkStackbar
• sparkbar
• thermometer
• relationCircle
• molecule
• tiremarks

VueUiSparkline improved options

The following config options are added to VueUiSparkline :

style.chartWidth: number;
style.dataLabel.show: boolean;
style.dataLabel.offsetX: number;
style.dataLabel.offsetY: number;

These options provide more control on the width of the chart area, and data label placement.

Tooltip slots

This version exposes data into the #tooltip-before and #tooltip-after scoped slots, to facilitate custom tooltip content creation.
All charts bearing tooltips (except for VueUiXy, see further below) expose the same objects:

<VueUiDonut
  :dataset="dataset"
  :config="config"
>
  <template #tooltip-before="{ datapoint, seriesIndex, series, config }">
    ... your custom content here
  </template>
  <template #tooltip-after="{ datapoint, seriesIndex, series, config }">
    ... your custom content here
  </template>
</VueUiDonut>

VueUiXy exposes additional data:

<VueUiXy
  :dataset="dataset"
  :config="config"
>
  <template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
    ... your custom content here
  </template>
  <template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
    ... your custom content here
  </template>
</VueUiXy>

Tooltip slots

This version introduces the #tooltip-before and #tooltip-after named slots, to further customize your tooltip contents.
It is now that easy to add a picture, another chart, or any content you need into your tooltips.
These slots do not expose any data, as you can already customize data content through the customFormat config option. You can therefore use these slots in conjunction with the default tooltip content, or with your custom content.

<VueUiDonut
  :dataset="dataset"
  :config="config"
>
  <template #tooltip-before>
    <div>This comes first</div>
  </template>
  <template #tooltip-after>
    <div>This comes last</div>
  </template>
</VueUiDonut>

These slots are available on the following components (and on the universal VueDataUi component, provided it wraps one of the following):

• VueUiAgePyramid
• VueUiCandlestick
• VueUiDonut
• VueUiHeatmap
• VueUiMolecule
• VueUiNestedDonuts
• VueUiOnion
• VueUiQuadrant
• VueUiRadar
• VueUiRings
• VueUiScatter
• VueUiVerticalBar
• VueUiWaffle
• VueUiXy

Animations improved

• VueUiSparkHistogram : added optional animation

• VueUiRadar : added config option to control animations in the tooltip's bar charts

• VueUiTableSparkline : added config option to control sparkline animations

• VueUiSparkline : improved animation speed consistency

Mini charts animations

Added optional animation config for the following components:

• VueUiSparkline
• VueUiSparkbar
• VueUiSparkStackbar

Animation is enabled by default.

animation: {
  show: true,
  animationFrames: 60
}

.d.ts file minor fix

v.2.0.54

Minor fix in .d.ts file

VueUiKpi new component

Added new component