From 50109a7784f00a3e1ac2c8f6a68ae6db34354f6f Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Fri, 14 Mar 2025 17:59:40 -0700
Subject: [PATCH] fix(top_key_view.tsx): fix bar chart to use key alias

---
 .../src/components/top_key_view.tsx           | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx
index d687e499d3..d6643721ad 100644
--- a/ui/litellm-dashboard/src/components/top_key_view.tsx
+++ b/ui/litellm-dashboard/src/components/top_key_view.tsx
@@ -122,7 +122,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
           <BarChart
             className="mt-4 h-40 cursor-pointer hover:opacity-90"
             data={topKeys}
-            index="key"
+            index="key_alias"
             categories={["spend"]}
             colors={["cyan"]}
             yAxisWidth={80}
@@ -130,9 +130,26 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
             layout="vertical"
             showXAxis={false}
             showLegend={false}
-            valueFormatter={(value) => `$${value.toFixed(2)}`}
+            valueFormatter={(value) => value ? `$${value.toFixed(2)}` : "No Key Alias"}
             onValueChange={(item) => handleKeyClick(item)}
             showTooltip={true}
+            customTooltip={(props) => {
+              const item = props.payload?.[0]?.payload;
+              return (
+                <div className="p-3 bg-black/90 shadow-lg rounded-lg text-white">
+                  <div className="space-y-1.5">
+                    <div className="text-sm">
+                      <span className="text-gray-300">Key: </span>
+                      <span className="font-mono text-gray-100">{item?.key?.slice(0, 10)}...</span>
+                    </div>
+                    <div className="text-sm">
+                      <span className="text-gray-300">Spend: </span>
+                      <span className="text-white font-medium">${item?.spend.toFixed(2)}</span>
+                    </div>
+                  </div>
+                </div>
+              );
+            }}
           />
         </div>
       ) : (