Healthcare Data Visualization

import { LineChart, GaugeChart, BoxPlotChart } from "@chartts/react"

export function PatientDashboard({ patient }) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 rounded-xl card p-6">
        <LineChart
          data={patient.vitals}
          x="timestamp"
          y={["heartRate", "bloodPressure"]}
          className="h-64"
          aria={{
            label: "Patient vitals over 24 hours",
            description: "Heart rate and blood pressure trends"
          }}
        />
      </div>
      <div className="col-span-4 grid gap-4">
        <div className="rounded-xl card p-4">
          <GaugeChart
            value={patient.bedOccupancy}
            max={100}
            label="Bed Occupancy"
            zones={[
              { max: 70, className: "fill-emerald-500" },
              { max: 90, className: "fill-amber-500" },
              { max: 100, className: "fill-red-500" },
            ]}
          />
        </div>
      </div>
    </div>
  )
}