chart

1<script setup lang="ts">
2import type { BulletLegendItemInterface } from "@unovis/ts"
3import type { Component } from "vue"
4import { omit } from "@unovis/ts"
5import { VisCrosshair, VisTooltip } from "@unovis/vue"
6import { createApp } from "vue"
7import { ChartTooltip } from "."
8 
9const props = withDefaults(defineProps<{
10  colors: string[]
11  index: string
12  items: BulletLegendItemInterface[]
13  customTooltip?: Component
14}>(), {
15  colors: () => [],
16})
17 
18// Use weakmap to store reference to each datapoint for Tooltip
19const wm = new WeakMap()
20function template(d: any) {
21  if (wm.has(d)) {
22    return wm.get(d)
23  }
24  else {
25    const componentDiv = document.createElement("div")
26    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
27      const legendReference = props.items.find(i => i.name === key)
28      return { ...legendReference, value }
29    })
30    const TooltipComponent = props.customTooltip ?? ChartTooltip
31    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
32    wm.set(d, componentDiv.innerHTML)
33    return componentDiv.innerHTML
34  }
35}
36 
37function color(d: unknown, i: number) {
38  return props.colors[i] ?? "transparent"
39}
40</script>
41 
42<template>
43  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
44  <VisCrosshair :template="template" :color="color" />
45</template>