v2.3.22

This release improves the tooltip behavior when it reaches chart borders.

Additional config attributes are also added to customize the tooltip position. A centered position relative to the mouse position used to be imposed, I figured it would be nice to leave it to the users what they prefer.

{
  ...
  position: "left" | "center" | "right"; // default: "center" (previous behavior)
  offsetY: number;  // default: 24
}

For VueUiQuickChart, these config attributes are as follows:

{
  ...
  tooltipPosition,
  tooltipOffsetY
}

Docs are updated.
For chart makers you might need to click "Clear local storage for this chart" to reset your local storage with up to date config.

v2.3.21

VueUiGizmo: fix gauge proportion not exact

v2.3.20

This release adds a new mini component: VueUiGizmo

It comes for now in 2 types: "battery" or "gauge". More types may be added in the future.
Check it out here

v2.3.19

This release adds the #watermark slot to most charts.

Usage:

<VueUiDonut :config="config" :dataset="dataset">
  <template #watermark="{ isPrinting }">
    <div
      v-if="isPrinting"
      style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)"
    >
      WATERMARK
    </div>
  </template>
</VueUiDonut>

The slot exposes the isPrinting boolean, should you wish to display the watermark only on the downloaded pdf or png.
The list of components supporting this slot is available on the README

v2.3.17

VueUiGauge: fix title textAlign config option not applied

v2.3.16

Titles on charts were centered by default.
This release adds config options to all charts with titles to manage alignment:

textAlign: "left" | "center" | "right"; // default: "center"
paddingLeft: number; // default: 0
paddingRight: number; // default: 0

v2.3.14

VueUiSparkbar : fix bar overflow issue when value > 100 in percentage mode (issue)

v2.3.13

VueUiSparkHistogram :
. Allow individual datapoints color with the color dataset attribute:

const dataset = ref<VueUiSparkHistogramDatasetItem[]>(
  {
    value: 1.2,
    intensity: 1,
    valueLabel: '20%',
    timeLabel: '09:00',
    color: '#FF0000', // this color will only be applied on this datapoint
  },
  {
    value:  1.3,
    intensity: 0.6,
    valueLabel: '50%',
    timeLabel: '10:00'
  }, // color for this datapoint will depend on the config (default behavior)
  ...
)

---

VueUiSparkbar : add new datalabel position options (config.style.labels.name.position):

• left
• top-left (default)
• top-center
• top-right
• right

The legacy 'top' which used to be the default will fallback to 'top-left', so no breaking change here.

Thanks @zcodecn for suggesting these improvements :)

v2.3.11

VueUiSparkbar: fix TS type def errors

v2.3.10

VueUiSparkbar : fix chart not updating when dataset changes dynamically