39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { VisCrosshair, VisTooltip } from '@unovis/vue'
|
|
import type { BulletLegendItemInterface } from '@unovis/ts'
|
|
import { omit } from '@unovis/ts'
|
|
import { createApp, watch } from 'vue'
|
|
import { ChartTooltip } from '@/lib/registry/default/ui/chart'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
colors: string[]
|
|
index: string
|
|
items: BulletLegendItemInterface[]
|
|
}>(), {
|
|
colors: () => [],
|
|
})
|
|
|
|
// Use weakmap to store reference to each datapoint for Tooltip
|
|
const wm = new WeakMap()
|
|
function template(d: any) {
|
|
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 }
|
|
})
|
|
createApp(ChartTooltip, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
|
|
wm.set(d, componentDiv.innerHTML)
|
|
return componentDiv.innerHTML
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VisTooltip :horizontal-shift="20" :vertical-shift="20" />
|
|
<VisCrosshair :color="colors" :template="template" />
|
|
</template>
|