feat(chart): add chart tooltip

Author: fhqvst

apps/insights/src/components/PriceFeed/Chart/chart-page.module.scss

@@ -6,6 +6,7 @@
     height: theme.spacing(140);
     border-radius: theme.border-radius("xl");
     overflow: hidden;
+    position: relative;
 
     .spinnerContainer {
       width: 100%;

apps/insights/src/components/PriceFeed/Chart/chart.module.scss

@@ -14,3 +14,41 @@
   --chart-series-muted-light: #{theme.pallette-color("violet", 100)};
   --chart-series-muted-dark: #{theme.pallette-color("violet", 950)};
 }
+
+.tooltip {
+  @include theme.elevation("default", 2);
+
+  background-color: theme.color("background", "tooltip");
+  border-radius: theme.border-radius("md");
+  color: theme.color("tooltip");
+  font-size: theme.font-size("xs");
+  padding: theme.spacing(3);
+  pointer-events: none;
+  position: absolute;
+  z-index: 1000;
+  width: theme.spacing(60);
+  overflow: hidden;
+}
+
+.tooltipTable {
+  color-scheme: dark;
+  white-space: nowrap;
+  width: 100%;
+
+  td:last-child {
+    color: theme.color("foreground");
+    font-weight: theme.font-weight("medium");
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  td:first-child {
+    color: theme.color("muted");
+    font-weight: theme.font-weight("normal");
+    text-align: left;
+  }
+}
+
+:global([data-theme="dark"]) .tooltipTable {
+  color-scheme: light;
+}

apps/insights/src/components/PriceFeed/Chart/chart.tsx

@@ -26,6 +26,7 @@ import {
 import { useTheme } from "next-themes";
 import type { RefObject } from "react";
 import { useCallback, useEffect, useRef } from "react";
+import { useDateFormatter } from "react-aria";
 import { z } from "zod";
 
 import styles from "./chart.module.scss";
@@ -68,6 +69,7 @@ const useChartElem = (symbol: string, feedId: string) => {
   const [resolution] = useChartResolution();
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<ChartRefContents | undefined>(undefined);
+  const tooltipRef = useRef<HTMLDivElement | undefined>(undefined);
   const isBackfilling = useRef(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   // Lightweight charts has [a
@@ -264,6 +266,16 @@ const useChartElem = (symbol: string, feedId: string) => {
     if (chartRef.current) {
       chartRef.current.chart.remove();
     }
+    if (tooltipRef.current) {
+      tooltipRef.current.remove();
+    }
+
+    const tooltip = document.createElement("div");
+    tooltip.className = styles.tooltip ?? "";
+    tooltip.style.display = "none";
+    chartElem.append(tooltip);
+    tooltipRef.current = tooltip;
+
     const chart = createChart(chartElem, {
       layout: {
         attributionLogo: false,
@@ -283,6 +295,7 @@ const useChartElem = (symbol: string, feedId: string) => {
       },
       localization: {
         priceFormatter: priceFormatter.format,
+        dateFormat: "dd MMM yy,",
       },
     });
 
@@ -337,6 +350,10 @@ const useChartElem = (symbol: string, feedId: string) => {
 
     return () => {
       chart.remove();
+      if (tooltipRef.current) {
+        tooltipRef.current.remove();
+        tooltipRef.current = undefined;
+      }
     };
   });
 
@@ -383,6 +400,117 @@ const useChartElem = (symbol: string, feedId: string) => {
     }
   }, [livePriceData?.exponent, priceFormatter]);
 
+  const dateFormatter = useDateFormatter({
+    year: "2-digit",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "UTC",
+  });
+
+  // Subscribe to crosshair move for tooltip updates
+  useEffect(() => {
+    const chartData = chartRef.current;
+    const tooltip = tooltipRef.current;
+    const chartElem = chartContainerRef.current;
+
+    if (!chartData || !tooltip || !chartElem) {
+      return;
+    }
+
+    const { chart, price, confidenceHigh, confidenceLow } = chartData;
+
+    const handleCrosshairMove: Parameters<
+      typeof chart.subscribeCrosshairMove
+    >[0] = (param) => {
+      if (
+        !param.time ||
+        param.point === undefined ||
+        param.point.x < 0 ||
+        param.point.y < 0
+      ) {
+        tooltip.style.display = "none";
+        return;
+      }
+
+      const priceData = param.seriesData.get(price);
+      const confHighData = param.seriesData.get(confidenceHigh);
+      const confLowData = param.seriesData.get(confidenceLow);
+
+      if (!priceData || !("value" in priceData)) {
+        tooltip.style.display = "none";
+        return;
+      }
+
+      const priceValue = priceData.value;
+      const date = new Date(Number(param.time) * 1000);
+      const formattedDate = dateFormatter.format(date);
+      const formattedPrice = priceFormatter.format(priceValue);
+
+      let confidenceText = "N/A";
+      if (
+        confHighData &&
+        "value" in confHighData &&
+        confLowData &&
+        "value" in confLowData
+      ) {
+        const confidence = confHighData.value - priceValue;
+        confidenceText = `±${priceFormatter.format(confidence)}`;
+      }
+
+      tooltip.innerHTML = `
+        <table class="${styles.tooltipTable ?? ""}">
+          <tbody>
+            <tr>
+              <td colspan="2">${formattedDate}</td>
+            </tr>
+            <tr>
+            <tr>
+              <td>Price</td>
+              <td>${formattedPrice}</td>
+            </tr>
+            <tr>
+              <td>Confidence</td>
+              <td>${confidenceText}</td>
+            </tr>
+          </tbody>
+        </table>
+        `;
+
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const containerRect = chartElem.getBoundingClientRect();
+      const tooltipMargin = 20;
+
+      const left = Math.max(
+        0,
+        Math.min(
+          containerRect.width - tooltipRect.width,
+          param.point.x - tooltipRect.width / 2,
+        ),
+      );
+
+      const coordinate = price.priceToCoordinate(priceValue);
+      if (coordinate === null) {
+        tooltip.style.display = "none";
+        return;
+      }
+      const top = Math.max(0, coordinate - tooltipRect.height - tooltipMargin);
+
+      tooltip.style.left = `${String(left)}px`;
+      tooltip.style.top = `${String(top)}px`;
+      tooltip.style.display = "block";
+    };
+
+    chart.subscribeCrosshairMove(handleCrosshairMove);
+
+    return () => {
+      chart.unsubscribeCrosshairMove(handleCrosshairMove);
+    };
+  }, [priceFormatter, chartContainerRef, dateFormatter]);
+
   return { chartRef, chartContainerRef };
 };