diff --git a/ui/litellm-dashboard/src/components/entity_usage.tsx b/ui/litellm-dashboard/src/components/entity_usage.tsx index ec62203688..a9a13b3847 100644 --- a/ui/litellm-dashboard/src/components/entity_usage.tsx +++ b/ui/litellm-dashboard/src/components/entity_usage.tsx @@ -358,20 +358,45 @@ const EntityUsage: React.FC = ({ {/* Daily Spend Chart */} - - Daily Spend - - new Date(a.date).getTime() - new Date(b.date).getTime() - )} - index="date" - categories={["metrics.spend"]} - colors={["cyan"]} - valueFormatter={(value) => `$${value.toFixed(2)}`} - yAxisWidth={100} - showLegend={false} - /> - + + Daily Spend + + new Date(a.date).getTime() - new Date(b.date).getTime() + )} + index="date" + categories={["metrics.spend"]} + colors={["cyan"]} + valueFormatter={(value) => `$${value.toFixed(2)}`} + yAxisWidth={100} + showLegend={false} + customTooltip={({ payload, active }) => { + if (!active || !payload?.[0]) return null; + const data = payload[0].payload; + return ( +
+

{data.date}

+

Total Spend: ${data.metrics.spend.toFixed(2)}

+

Total Requests: {data.metrics.api_requests}

+

Successful: {data.metrics.successful_requests}

+

Failed: {data.metrics.failed_requests}

+

Total Tokens: {data.metrics.total_tokens}

+
+

Spend by {entityType === 'tag' ? 'Tag' : 'Team'}:

+ {Object.entries(data.breakdown.entities || {}).map(([entity, entityData]) => { + const metrics = entityData as EntityMetrics; + return ( +

+ {metrics.metadata.team_alias || entity}: ${metrics.metrics.spend.toFixed(2)} +

+ ); + })} +
+
+ ); + }} + /> +
{/* Entity Breakdown Section */}