VueUiWordCloud
- Smoother opacity handling on word hovering
- New config attributes:
const config = ref({
style: {
chart: {
words: {
hoverOpacity: 0.5,
selectedStroke: "transparent",
},
},
},
});VueUiXy
- Allow passing metadata of any type in dataset items, for example:
const dataset = ref([
{
name: "Series A",
type: "line",
smooth: true,
color: "#1f77b4",
series: [1, 1, 2, 3, 5, 8, 13, 21],
// metadata:
markerIndices: [2, 6],
exposeMarkers: true,
},
]);This metadata can be leverage through the #svg slot to precisely draw annotations on the chart.
For example:
<VueUiXy :dataset="dataset" :config="config">
<template #svg="{ svg }">
<g v-html="freestyle(svg)" />
</template>
</VueUiXy>The #svg slot exposes all the data series, where you can recover your metada, based on which you can
inject content inside the chart:
function freestyle({ data, drawingArea }) {
// Filter series based on metadata:
const markedSeries = data.filter((d) => !!d.exposeMarkers);
// Filter out datapoint coordinates based on metadata:
const points = (markedSeries[0]?.plots || []).filter((_, i) =>
markedSeries[0].markerIndices.includes(i)
);
// Draw content based on these coordinates:
return `
<g>
<line
x1="${points[0]?.x}"
x2="${points[0]?.x}"
y1="${drawingArea.top}"
y2="${drawingArea.bottom}"
stroke="black"
stroke-width="3"
/>
<text
x="${points[0]?.x + 12}"
y="${drawingArea.top + 12}"
fill="red"
font-size="16"
>
This is awesome
</text>
</g>
`;
}VueUiScatter
- Allow passing metadata of any type in dataset items, for example:
const dataset = ref([
{
name: "Cluster A",
values: [
{ x: 10, y: 20, name: "p0", /* metadata: */ marked: true },
{ x: 2, y: 10, name: "p1" },
{ x: 12, y: 16, name: "p2" },
{ x: 11, y: 11, name: "p3" },
{ x: 20, y: 10, name: "p5", /* metadata: */ marked: true },
],
// metadata:
marked: true,
},
]);This metadata can be leverage through the #svg slot to precisely draw annotations on the chart.
For example:
<VueUiScatter :dataset="dataset" :config="config">
<template #svg="{ svg }">
<g v-html="freestyle(svg)" />
</template>
</VueUiScatter>The #svg slot exposes all the data series, where you can recover your metada, based on which you can
inject content inside the chart:
function freestyle({ drawingArea, data }) {
const marked = (data || []).filter((d) => !!d?.marked);
const markedPlots = marked[0]?.plots.filter((p) => !!p?.v?.marked);
const circles = (markedPlots || []).map((p) => {
return `
<g style="pointer-events: none;">
<circle
cx="${p?.x}"
cy="${p?.y}"
r="20"
stroke="#FF0000"
fill="none"
/>
<path
d="M${p?.x - 20},${p?.y} ${p?.x - 5},${p?.y} M${p?.x},${
p?.y - 20
} ${p?.x},${p?.y - 5} M${p?.x + 20},${p?.y} ${p?.x + 5},${p?.y} M${p?.x},${
p?.y + 20
} ${p?.x},${p?.y + 5}"
stroke="#FF0000"
/>
</g>
`;
});
return circles;
}VueUiStackbar
- Allow passing metadata of any type in dataset items, for example:
const dataset = ref([
{
name: "Series 1",
series: [1, 2, 3, 4, 5, 6],
// metadata:
marked: true,
},
{
name: "Series 2",
series: [12, 2, 8, 7, 3, 1],
// metadata:
marked: true,
},
{
name: "Series 3",
series: [3, 4, 5, 6, 7, 8],
},
]);This metadata can be leverage through the #svg slot to precisely draw annotations on the chart.
For example:
<VueUiStackbar :dataset="dataset" :config="config">
<template #svg="{ svg }">
<g v-html="freestyle(svg)" />
</template>
</VueUiStackbar>The #svg slot exposes all the data series, where you can recover your metada, based on which you can
inject content inside the chart:
function freestyle({ drawingArea, data }) {
const marked = data?.filter((d) => !!d.marked);
const paths = marked.map((m, i) => {
const dp = m ?? { x: [], y: [] };
const minY = Math.min(...dp?.y);
const minX = dp.x[dp.y.indexOf(minY)];
const maxY = Math.max(...dp?.y);
const maxX = dp.x[dp.y.indexOf(maxY)];
return `
<defs>
<marker
id="arrow_${i}"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<path
d="M${
minX > maxX
? `${maxX},${maxY} ${minX},${minY}`
: `${minX},${minY} ${maxX},${maxY}`
}"
stroke="#000000"
marker-end="url(#arrow_${i})"
/>
`;
});
return paths;
}VueUiCandlestick
- Expose processed dataset in #svg slot which can be used to inject content inside the chart, for example:
<VueUiCandlestick :dataset="dataset" :config="config">
<template #svg="{ svg }">
<g v-html="freestyle(svg)" />
</template>
</VueUiCandlestick>function freestyle({ drawingArea, data }) {
const maxVol = data.filter((d) => !!d.isMaxVolume);
const minVol = data.filter((d) => !!d.isMinVolume);
return `
<path
d="M${minVol[0]?.high?.x},${minVol[0]?.high?.y} ${maxVol[0]?.high?.x},${maxVol[0]?.high?.y}"
stroke="black"
/>
<path
d="M${minVol[0]?.low?.x},${minVol[0]?.low?.y} ${maxVol[0]?.low?.x},${maxVol[0]?.low?.y}"
stroke="black"
/>
<polygon
points="
${minVol[0]?.high.x},${minVol[0]?.high?.y}
${maxVol[0]?.high?.x},${maxVol[0]?.high?.y}
${maxVol[0]?.low?.x},${maxVol[0]?.low?.y}
${minVol[0]?.low?.x},${minVol[0]?.low?.y}
"
fill="#00000020"
/>
`;
}