VueUiIcon new icons

v2.0.82

VueUiIcon added icons

VueUiWaffle custom cells

This release adds the #cell scoped slot allowing to custom cell contents:

The config attribute useCustomCells has to be set to true.

<VueUiWaffle
  :config="config"
  :dataset="dataset"
/>
  <template #cell="{ cell, isSelected }">
    <div>
      ... your custom content here (icon, image, etc)
    </div>
  </template>
</VueUiWaffle>

VueUi3dBar stack mode

VueUi3dBar was improved to display stacked bars when the series dataset option is used.
Stack mode is automatically enabled when the series attribute is present in the dataset:

const dataset = {
  series:  [
    {
      name: string,
      value: number,
      color?: string
      // Adding breakdown array will display donuts in the legend portion of the chart
      breakdown?: [
        {
          name: string,
          value: number
        },
        {...}
      ]
    },
    {...}
  ]
}

VueUiMolecule improvements

Datapoints can be selected even when they stand under dataLabels.

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