Patients by department

Everyone the clinic has seen, by the department that saw them, as a donut with the total in its centre; reads patientsByDepartment().

Preview

app/clinic/components/department-donut.tsx

"use client"

import { formatNumber } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { DonutChart } from "@/components/ui/donut-chart"

/** Distinct patients per department, with the legend the donut alone cannot carry. */
export function DepartmentDonut({ data }: { data: { name: string; value: number }[] }) {
  const total = data.reduce((sum, slice) => sum + slice.value, 0)
  return (
    <ChartCard
      data-widget="widget-clinic-overview-department-donut"
      role="region"
      aria-label="Patients by department"
      title="Patients by department"
      description="Everyone the clinic has seen, by where."
      height={260}
      className="h-full"
    >
      <DonutChart
        data={data}
        height={260}
        innerRadius={60}
        centerLabel="Patients"
        centerValue={formatNumber(total)}
        valueFormatter={(value) => formatNumber(value)}
      />
    </ChartCard>
  )
}

Install

npx shadcn@latest add @vibra/widget-clinic-overview-department-donut

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

Source

app/clinic/components/department-donut.tsx

"use client"

import { formatNumber } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { DonutChart } from "@/components/ui/donut-chart"

/** Distinct patients per department, with the legend the donut alone cannot carry. */
export function DepartmentDonut({ data }: { data: { name: string; value: number }[] }) {
  const total = data.reduce((sum, slice) => sum + slice.value, 0)
  return (
    <ChartCard
      data-widget="widget-clinic-overview-department-donut"
      role="region"
      aria-label="Patients by department"
      title="Patients by department"
      description="Everyone the clinic has seen, by where."
      height={260}
      className="h-full"
    >
      <DonutChart
        data={data}
        height={260}
        innerRadius={60}
        centerLabel="Patients"
        centerValue={formatNumber(total)}
        valueFormatter={(value) => formatNumber(value)}
      />
    </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 Clinic dashboard page