Fix observable chart tooltips

Author: tannerlinsley

src/components/charts/PlotContainer.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import * as Plot from '@observablehq/plot'
 
+export const observablePlotClassName = 'tanstack-observable-plot'
+
 interface PlotContainerProps {
   /** Build Plot options given the measured container width. */
   options: (width: number) => Parameters<typeof Plot.plot>[0]
@@ -37,7 +39,12 @@ export function PlotContainer({
       if (width === 0) return
 
       currentPlot = Plot.plot({ ...options(width), width, height })
-      currentPlot.style.overflow = 'visible'
+      const svg =
+        currentPlot instanceof SVGSVGElement
+          ? currentPlot
+          : currentPlot.querySelector('svg')
+      svg?.classList.add(observablePlotClassName)
+      if (svg) svg.style.overflow = 'visible'
       container.appendChild(currentPlot)
       setReady(true)
     }

src/components/npm-stats/NPMStatsChart.tsx

@@ -12,6 +12,7 @@ import {
 } from '@radix-ui/react-dropdown-menu'
 import { twMerge } from 'tailwind-merge'
 import { Tooltip } from '~/components/Tooltip'
+import { observablePlotClassName } from '~/components/charts/PlotContainer'
 import {
   binningOptionsByType,
   getHistoryStartDate,
@@ -4256,14 +4257,15 @@ export function NPMStatsChart({
           plotRef={plotRef}
           showLegend={showLegend}
           options={{
+            className: observablePlotClassName,
             marginLeft,
             marginRight,
             marginBottom: isLatestVerticalBar
               ? latestVerticalXAxisLayout.marginBottom
               : 70,
             width,
             height,
-            clip: hasTimelineZoom ? true : undefined,
+            style: { overflow: 'visible' },
             marks: (
               [
                 isHorizontalBar
@@ -4289,6 +4291,7 @@ export function NPMStatsChart({
                         strokeDasharray: '2 4',
                         strokeOpacity: 0.8,
                         curve: 'monotone-x',
+                        clip: hasTimelineZoom ? true : undefined,
                       },
                     )
                   : undefined,
@@ -4300,6 +4303,7 @@ export function NPMStatsChart({
                         stroke: getStrokeColor,
                         strokeWidth: 2,
                         curve: 'monotone-x',
+                        clip: hasTimelineZoom ? true : undefined,
                       },
                     )
                   : undefined,
@@ -4329,6 +4333,7 @@ export function NPMStatsChart({
                       z: 'seriesName',
                       fill: getSeriesGradientFill,
                       curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
                     })
                   : undefined,
                 viewMode === 'history' && chartType === 'stacked-stream'
@@ -4339,6 +4344,7 @@ export function NPMStatsChart({
                       z: 'seriesName',
                       fill: getSeriesGradientFill,
                       curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
                     })
                   : undefined,
                 viewMode === 'history' &&
@@ -4353,6 +4359,7 @@ export function NPMStatsChart({
                       strokeWidth: 1.4,
                       strokeOpacity: 0.95,
                       curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
                     })
                   : undefined,
                 viewMode === 'history' &&

src/styles/app.css

@@ -152,6 +152,15 @@ html.theme-switching *::after {
   }
 }
 
+.tanstack-observable-plot {
+  --plot-background: var(--color-white);
+  overflow: visible;
+}
+
+html.dark .tanstack-observable-plot {
+  --plot-background: var(--color-gray-800);
+}
+
 button {
   @apply cursor-pointer;
 }