diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx index cbacaa9a356..2810c85acce 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx @@ -216,15 +216,15 @@ describe("SpendByProvider", () => { expect(screen.queryByText("unknown")).not.toBeInTheDocument(); }); - it("renders one cyan donut sector per visible provider with the $ total as center label", () => { + it("gives every visible provider its own donut color and shows the $ total as center label", () => { const { container } = render( , ); const sectors = container.querySelectorAll(".recharts-pie-sector path"); expect(sectors).toHaveLength(2); - const fills = new Set(Array.from(sectors).map((sector) => sector.getAttribute("fill"))); - expect(fills).toEqual(new Set(["var(--color-cyan-500, #06b6d4)"])); + const fills = Array.from(sectors).map((sector) => sector.getAttribute("fill")); + expect(new Set(fills).size).toBe(fills.length); const centerLabels = Array.from(container.querySelectorAll("text.fill-foreground")).map((text) => text.textContent); expect(centerLabels).toContain("$351.25"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx index f5d6db67478..181705fad5f 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx @@ -116,7 +116,6 @@ const SpendByProvider: React.FC = ({ loading, isDateChangi index="provider" category="spend" valueFormatter={(value) => `$${formatNumberWithCommas(value, 2)}`} - colors={["cyan"]} showLabel startAngle={90} endAngle={-270}