From 453b467d8ea4c69638fe84946973585d4d9ac454 Mon Sep 17 00:00:00 2001
From: vltbaudbot <264001112+vltbaudbot@users.noreply.github.com>
Date: Wed, 19 Aug 2026 20:51:07 +0000
Subject: [PATCH] fix(history-chart): add colored dot to tooltip entries

Add a colored circle matching each line's stroke color in front of the
package manager / registry name in the hover tooltip, making it easy to
correlate tooltip entries with their lines in the chart.
---
 app/src/components/history-chart.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/src/components/history-chart.tsx b/app/src/components/history-chart.tsx
index e71e9be20c..0ccb5cf448 100644
--- a/app/src/components/history-chart.tsx
+++ b/app/src/components/history-chart.tsx
@@ -284,9 +284,15 @@ export const HistoryChart = ({
                       return String(label);
                     }
                   }}
-                  formatter={(value, name) => (
+                  formatter={(value, name, item) => (
                     <div className="flex flex-1 justify-between items-center gap-4">
-                      <span className="text-muted-foreground">{name}</span>
+                      <span className="flex items-center gap-2 text-muted-foreground">
+                        <span
+                          className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+                          style={{ backgroundColor: item.color }}
+                        />
+                        {name}
+                      </span>
                       <span className="font-mono font-medium tabular-nums text-foreground">
                         {typeof value === "number"
                           ? isPerPackageVariation