phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

fix tool tip

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-01 08:56:21 -07:00
parent 94b98f5c4e
commit e3229d0468
1 changed files with 20 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

45
ui/litellm-dashboard/src/components/model_dashboard.tsx
View file

@ -693,45 +693,40 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
} }
} }
const customTooltip = (props) => { const customTooltip = (props: any) => {
const { payload, active } = props; const { payload, active } = props;
if (!active || !payload) return null; if (!active || !payload) return null;
// Extract the date from the first item in the payload array
const date = payload[0]?.payload?.date;
// Sort the payload array by category.value in descending order // Sort the payload array by category.value in descending order
let sortedPayload = payload.sort((a, b) => b.value - a.value); let sortedPayload = payload.sort((a: any, b: any) => b.value - a.value);
console.log("sortedPayload:", sortedPayload); // Only show the top 5, the 6th one should be called "X other categories" depending on how many categories were not shown
if (sortedPayload.length > 5) {
// only show the top 5, the 6th one should be called "X other categories" depending on how many categories were not shown
if (sortedPayload.length > 5 ) {
let remainingItems = sortedPayload.length - 5; let remainingItems = sortedPayload.length - 5;
sortedPayload = sortedPayload.slice(0, 5); sortedPayload = sortedPayload.slice(0, 5);
sortedPayload.push({ sortedPayload.push({
dataKey: `${remainingItems} other deployments`, dataKey: `${remainingItems} other deployments`,
value: payload.slice(5).reduce((acc, curr) => acc + curr.value, 0), value: payload.slice(5).reduce((acc: number, curr: any) => acc + curr.value, 0),
color: "gray", color: "gray",
}) });
} }
return ( return (
<div className="w-150 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown"> <div className="w-150 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown">
{sortedPayload.map((category, idx) => ( {date && <p className="text-tremor-content-emphasis mb-2">Date: {date}</p>}
<div key={idx} className="flex flex-1 space-x-2.5"> {sortedPayload.map((category: any, idx: number) => (
<div key={idx} className="flex justify-between">
{/* <div <div className="flex items-center space-x-2">
className={`flex w-1 flex-col bg-${category.color}-500 rounded`} <div className={`w-2 h-2 mt-1 rounded-full bg-${category.color}-500`} />
> */}
<p className="text-tremor-content">{category.dataKey}</p> <p className="text-tremor-content">{category.dataKey}</p>
<p className="font-medium text-tremor-content-emphasis"> </div>
{category.value.toFixed(5)} <p className="font-medium text-tremor-content-emphasis text-righ ml-2">
</p> {category.value.toFixed(5)}
</div> </p>
// </div> </div>
))} ))}
</div> </div>
); );