79 lines
No EOL
3 KiB
TypeScript
79 lines
No EOL
3 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { useBedPressureStore } from "@/stores/bedPressureStore"
|
|
|
|
const getValueColor = (value: number) => {
|
|
if (value < 1500) return "#22c55e" // Green - Low value
|
|
if (value < 2500) return "#eab308" // Yellow - Medium value
|
|
if (value < 3500) return "#f97316" // Orange - High value
|
|
return "#ef4444" // Red - Very high value
|
|
}
|
|
|
|
export function BedVisualization() {
|
|
const { sensorConfig, sensorData, setSelectedSensor, setIsModalOpen } = useBedPressureStore()
|
|
|
|
const handleSensorClick = (sensorId: string) => {
|
|
setSelectedSensor(sensorId)
|
|
setIsModalOpen(true)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Sensor Value Distribution Map</CardTitle>
|
|
<p className="text-sm text-gray-600">Click on any sensor point to view detailed value graphs</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="relative">
|
|
{/* Bed outline */}
|
|
<svg viewBox="0 0 100 100" className="w-full h-96 border-2 border-gray-200 rounded-lg bg-white">
|
|
{/* Bed frame */}
|
|
<rect x="25" y="10" width="50" height="80" fill="none" stroke="#e5e7eb" strokeWidth="2" rx="8" />
|
|
|
|
{/* Pillow area */}
|
|
<rect x="30" y="12" width="40" height="15" fill="#f3f4f6" stroke="#d1d5db" strokeWidth="1" rx="4" />
|
|
|
|
{/* Pressure sensors */}
|
|
{sensorConfig.map((sensor) => {
|
|
const sensorInfo = sensorData[sensor.id]
|
|
if (!sensorInfo) return null
|
|
|
|
return (
|
|
<circle
|
|
key={sensor.id}
|
|
cx={sensor.x}
|
|
cy={sensor.y}
|
|
r="3"
|
|
fill={getValueColor(sensorInfo.currentValue)}
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
className="cursor-pointer transition-all duration-200 hover:r-4 hover:opacity-80"
|
|
onClick={() => handleSensorClick(sensor.id)}
|
|
/>
|
|
)
|
|
})}
|
|
</svg>
|
|
|
|
{/* Value Legend */}
|
|
<div className="mt-4 flex items-center justify-center gap-6 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
|
<span>Low ({"<"}1500)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<span>Medium (1500-2500)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-orange-500"></div>
|
|
<span>High (2500-3500)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<span>Critical ({">"}3500)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
} |