WIP render labels outside tier system, using HTML-formatted text

Author: duncanbradley

src/lib/components/data-vis/line-chart/Lines.svelte

@@ -1,6 +1,7 @@
 <script>
   import Line from "./Line.svelte";
   import Marker from "./Marker.svelte";
+  import ValueLabel from "./ValueLabel.svelte";
   import SeriesLabel from "./SeriesLabel.svelte";
   import labelplacer from "labelplacer";
   import { onMount } from "svelte";
@@ -14,8 +15,8 @@
     chartWidth,
     xFunction,
     yFunction,
-    labelClicked = $bindable(),
-    labelHovered = $bindable(),
+    labelClicked,
+    labelHovered,
     lineHovered,
     lineClicked,
     chartHeight,
@@ -90,43 +91,52 @@
           {activeMarkerId}
         />
       {/each}
-      {#if tier == "hover"}
-        {#if true}
-          <!-- <ValueLabel
-            {marker}
-            labelColor="grey"
-            labelTextColor="black"
-            textContent={parseInput(marker, marker[y])}
-          ></ValueLabel> -->
-        {/if}
-      {/if}
     </g>
 
     <g>
       {#each tieredDataObject[tier] as line, i}
         {#if line.showLabel}
-          {@const newY = labelsPlaced.find(
-            (el) => el.datum[series] === line[series],
-          )?.[y]}
-          <SeriesLabel
-            id={`label-${line[series]}`}
-            bind:labelClicked
-            bind:labelHovered
-            {chartWidth}
-            {lineFunction}
-            dataArray={line}
-            {xFunction}
-            {yFunction}
-            {newY}
-            {onClickLabel}
-            {onMouseEnterLabel}
-            {onMouseLeaveLabel}
-            {labelText}
-            {series}
-            {y}
-          ></SeriesLabel>
+          {console.log("@", labelClicked == line[series])}
+          {#if !labelClicked || (labelClicked && line[series] == labelClicked)}
+            {@const newY = labelsPlaced.find(
+              (el) => el.datum[series] === line[series],
+            )?.[y]}
+            <SeriesLabel
+              id={`label-${line[series]}`}
+              {labelClicked}
+              {labelHovered}
+              {chartWidth}
+              {lineFunction}
+              dataArray={line}
+              {xFunction}
+              {yFunction}
+              {newY}
+              {onClickLabel}
+              {onMouseEnterLabel}
+              {onMouseLeaveLabel}
+              {labelText}
+              {series}
+              {y}
+            ></SeriesLabel>
+          {/if}
         {/if}
       {/each}
     </g>
   </g>
 {/each}
+
+{#if activeMarkerId}
+  <ValueLabel
+    {activeMarkerId}
+    labelColor="grey"
+    labelTextColor="black"
+    textContent={`this string contains some <strong>HTML!!!</strong>`}
+    {xFunction}
+    {yFunction}
+    {x}
+    {y}
+  ></ValueLabel>
+{/if}
+
+<!-- if markerhovered get the id render the tooltip find in the tieredDataObject gets
+the data for that line -->

src/lib/components/data-vis/line-chart/Marker.svelte

@@ -15,26 +15,11 @@
     markerFill = "grey",
     markerStroke = "white",
     markerStrokeWidth = 1,
-    activeMarkerId,
   } = $props();
-
-  function makeList(inputValue) {
-    let items = inputValue.split("\\n").map((item) => item.trim());
-    return items;
-  }
-
-  function parseInput(marker, inputValue) {
-    let items = makeList(inputValue);
-    let mappedItems = items.map((item) =>
-      item.replace(/\{(\w+)\}/g, (_, key) => marker[key] ?? `{${key}}`),
-    );
-    return mappedItems;
-  }
 </script>
 
 {#each dataArray as marker, i}
   {@const markerId = "marker-" + marker[series] + marker[x]}
-  {console.log(markerId)}
   <g
     data-id={markerId}
     onclick={(event) => onClickMarker(event, marker, markerId)}
@@ -72,15 +57,5 @@
         stroke-width={markerStrokeWidth}
       ></polygon>
     {/if}
-    <!-- {#if true}
-      {#if activeMarkerId === markerId}
-        <ValueLabel
-          {marker}
-          labelColor="grey"
-          labelTextColor="black"
-          textContent={parseInput(marker, marker[y])}
-        ></ValueLabel>
-      {/if}
-    {/if} -->
   </g>
 {/each}

src/lib/components/data-vis/line-chart/ValueLabel.svelte

@@ -1,30 +1,73 @@
 <script>
-  let { marker, labelColor, labelTextColor, textContent } = $props();
+  let {
+    activeMarkerId,
+    labelColor,
+    labelTextColor,
+    textContent,
+    xFunction,
+    yFunction,
+    x,
+    y,
+  } = $props();
 
   let textDimensions = $state();
   let lineSpacing = $state(20);
   let verticalPadding = $state(8);
   let horizontalPadding = $derived(verticalPadding * 2);
+
+  $inspect(activeMarkerId);
+
+  let widthWithPadding = $derived(
+    textDimensions ? textDimensions.width + horizontalPadding : 10,
+  );
+  let heightWithPadding = $derived(
+    textDimensions ? textDimensions.height + verticalPadding : 10,
+  );
 </script>
 
-<svg width="300" height="300">
-  {#if textDimensions}
-    <rect
-      height={textDimensions.height + verticalPadding}
-      rx="5"
-      ry="5"
-      fill={labelColor}
-      width={textDimensions.width + horizontalPadding}
-    ></rect>
-  {/if}
-  <text
-    text-anchor="start"
-    font-size="16"
-    fill={labelTextColor}
-    bind:contentRect={textDimensions}
+<svg>
+  <g
+    transform="translate({xFunction(activeMarkerId[x])},{yFunction(
+      activeMarkerId[y],
+    )})"
   >
-    {#each textContent as line, i}
-      <tspan x={horizontalPadding / 2} dy={lineSpacing}>{line}</tspan>
-    {/each}
-  </text>
+    {#if !textDimensions}
+      <foreignObject
+        x="0"
+        y="0"
+        width="1000"
+        height="1000"
+        style="visibility: hidden"
+      >
+        <div
+          xmlns="http://www.w3.org/1999/xhtml"
+          bind:contentRect={textDimensions}
+          style="display: inline-block"
+        >
+          {@html textContent}
+        </div>
+      </foreignObject>
+    {/if}
+    {#if textDimensions}
+      <rect
+        height={textDimensions.height + verticalPadding}
+        rx="5"
+        ry="5"
+        fill={labelColor}
+        width={textDimensions.width + horizontalPadding}
+      ></rect>
+    {/if}
+  </g>
+  {#key textDimensions}
+    <foreignObject
+      x={xFunction(activeMarkerId[x])}
+      y={yFunction(activeMarkerId[y])}
+      width={widthWithPadding}
+      height={heightWithPadding}
+    >
+      <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block">
+        {@html textContent}
+      </div>
+    </foreignObject>
+  {/key}
 </svg>