Expenses by category

The month's spend as a treemap, payroll broken out by role and marketing by channel beside hosting and tooling; reads expensesByCategory().

Preview

app/finance/components/expenses-by-category.tsx

"use client"

import { formatCurrency } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { TreemapChart, type TreemapDatum } from "@/components/ui/treemap-chart"

const money = (value: number) => formatCurrency(value, "USD", { maximumFractionDigits: 0 })

/** Where the month's money went, payroll and marketing split into their parts. */
export function ExpensesByCategory({ data }: { data: TreemapDatum[] }) {
  return (
    <ChartCard
      data-widget="widget-finance-overview-expenses-by-category"
      title="Expenses by category"
      description="The month's spend, by what it paid for"
      height={280}
      className="h-full"
    >
      <TreemapChart data={data} height={280} valueFormatter={money} />
    </ChartCard>
  )
}

Install

npx shadcn@latest add @vibra/widget-finance-overview-expenses-by-category

Needs the @vibra registry in your components.json — set it up once.

Source

app/finance/components/expenses-by-category.tsx

"use client"

import { formatCurrency } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { TreemapChart, type TreemapDatum } from "@/components/ui/treemap-chart"

const money = (value: number) => formatCurrency(value, "USD", { maximumFractionDigits: 0 })

/** Where the month's money went, payroll and marketing split into their parts. */
export function ExpensesByCategory({ data }: { data: TreemapDatum[] }) {
  return (
    <ChartCard
      data-widget="widget-finance-overview-expenses-by-category"
      title="Expenses by category"
      description="The month's spend, by what it paid for"
      height={280}
      className="h-full"
    >
      <TreemapChart data={data} height={280} valueFormatter={money} />
    </ChartCard>
  )
}

Its page

On its page the card sits among the rest of the dashboard and shares its range and its data with them.

From the Finance dashboard page