VueUiSparkline : added new #before scoped slot to customize chart presentation.
This slot exposes the following data:
selected: the current selected datapoint when hovering the chartlatest: the value of the last datapointsumaveragemediantrend
Usage (with a very basic presentation):
<VueUiSparkline
:config="config"
:dataset="dataset"
>
<template #before="{ selected, latest, sum, average, median, trend }">
<ul>
<li>Latest: {{ latest }}>
<li>Sum: {{ sum }}>
<li>Average: {{ average }}>
<li>Median: {{ median }}>
<li>Trend: {{ trend }}>
<li>Selected: {{ selected }}>
</ul>
</template>
</VueUiSparkline>This is also usable with the VueDataUi universal component:
<VueDataUi
component="VueUiSparkline"
:config="config"
:dataset="dataset"
>
<template #before="{ selected, latest, sum, average, median, trend }">
<ul>
<li>Latest: {{ latest }}>
<li>Sum: {{ sum }}>
<li>Average: {{ average }}>
<li>Median: {{ median }}>
<li>Trend: {{ trend }}>
<li>Selected: {{ selected }}>
</ul>
</template>
</VueDataUi>