Dashboard final version, TODO: update main sidebar menu

2025-11-23 21:33:01 +01:00
parent c3de189e9d
commit c1ac92efbf
67 changed files with 5195 additions and 844 deletions
@@ -0,0 +1,54 @@
+<script setup>
+import { omit } from "@unovis/ts";
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+import { createApp } from "vue";
+import { ChartTooltip } from ".";
+
+const props = defineProps({
+  colors: { type: Array, required: false, default: () => [] },
+  index: { type: String, required: true },
+  // items now optional when using external template factory
+  items: { type: Array, required: false, default: () => [] },
+  customTooltip: { type: null, required: false },
+  labelFormatter: { type: Function, required: false },
+  // template override (e.g., componentToString(...))
+  template: { type: Function, required: false },
+});
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function internalTemplate(d) {
+  // If we have cached markup and no custom formatter altering title, reuse.
+  if (wm.has(d) && !props.labelFormatter && !props.template) {
+    return wm.get(d);
+  }
+  // If external template provided, delegate directly
+  if (props.template) {
+    const html = props.template(d, d[props.index]);
+    wm.set(d, html);
+    return html;
+  }
+  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 };
+  });
+  const TooltipComponent = props.customTooltip ?? ChartTooltip;
+  createApp(TooltipComponent, {
+    title: d[props.index],
+    data: omittedData,
+    labelFormatter: props.labelFormatter,
+  }).mount(componentDiv);
+  wm.set(d, componentDiv.innerHTML);
+  return componentDiv.innerHTML;
+}
+
+function color(d, i) {
+  return props.colors[i] ?? "transparent";
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="internalTemplate" :color="color" />
+</template>