IoT Monitoring Charts

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

export function SensorDashboard({ sensors }) {
  return (
    <div className="grid grid-cols-4 gap-4">
      {sensors.map(sensor => (
        <div key={sensor.id} className="rounded-xl card p-4">
          <p className="text-sm muted-text">{sensor.name}</p>
          <p className="text-2xl font-bold heading">{sensor.current}{sensor.unit}</p>
          <GaugeChart
            value={sensor.current}
            min={sensor.min}
            max={sensor.max}
            zones={sensor.zones}
            className="h-24 mt-2"
          />
        </div>
      ))}
      <div className="col-span-4 rounded-xl card p-6">
        <LineChart
          data={sensors[0].history}
          x="timestamp"
          y="value"
          className="h-64"
          animate
        />
      </div>
    </div>
  )
}