74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<script setup>
|
|
import { omit } from "@unovis/ts";
|
|
import { VisTooltip } from "@unovis/vue";
|
|
import { createApp } from "vue";
|
|
import { ChartTooltip } from ".";
|
|
|
|
const props = defineProps({
|
|
selector: { type: String, required: true },
|
|
index: { type: String, required: true },
|
|
items: { type: Array, required: false },
|
|
valueFormatter: { type: Function, required: false },
|
|
customTooltip: { type: null, required: false },
|
|
});
|
|
|
|
// Use weakmap to store reference to each datapoint for Tooltip
|
|
const wm = new WeakMap();
|
|
function template(d, i, elements) {
|
|
const valueFormatter = props.valueFormatter ?? ((tick) => `${tick}`);
|
|
if (props.index in d) {
|
|
if (wm.has(d)) {
|
|
return wm.get(d);
|
|
} else {
|
|
const componentDiv = document.createElement("div");
|
|
const omittedData = Object.entries(omit(d, [props.index])).map(
|
|
([key, value]) => {
|
|
const legendReference = props.items?.find((i) => i.name === key);
|
|
return { ...legendReference, value: valueFormatter(value) };
|
|
},
|
|
);
|
|
const TooltipComponent = props.customTooltip ?? ChartTooltip;
|
|
createApp(TooltipComponent, {
|
|
title: d[props.index],
|
|
data: omittedData,
|
|
}).mount(componentDiv);
|
|
wm.set(d, componentDiv.innerHTML);
|
|
return componentDiv.innerHTML;
|
|
}
|
|
} else {
|
|
const data = d.data;
|
|
|
|
if (wm.has(data)) {
|
|
return wm.get(data);
|
|
} else {
|
|
const style = getComputedStyle(elements[i]);
|
|
const omittedData = [
|
|
{
|
|
name: data.name,
|
|
value: valueFormatter(data[props.index]),
|
|
color: style.fill,
|
|
},
|
|
];
|
|
const componentDiv = document.createElement("div");
|
|
const TooltipComponent = props.customTooltip ?? ChartTooltip;
|
|
createApp(TooltipComponent, {
|
|
title: d[props.index],
|
|
data: omittedData,
|
|
}).mount(componentDiv);
|
|
wm.set(d, componentDiv.innerHTML);
|
|
return componentDiv.innerHTML;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VisTooltip
|
|
:horizontal-shift="20"
|
|
:vertical-shift="20"
|
|
:triggers="{
|
|
[selector]: template,
|
|
}"
|
|
/>
|
|
</template>
|