Update modal temperature

This commit is contained in:
MacRimi
2026-02-13 20:09:50 +01:00
parent fe3963dfe2
commit 322687c658
2 changed files with 8 additions and 4 deletions

View File

@@ -518,6 +518,7 @@ export function SystemOverview() {
<TemperatureDetailModal <TemperatureDetailModal
open={tempModalOpen} open={tempModalOpen}
onOpenChange={setTempModalOpen} onOpenChange={setTempModalOpen}
liveTemperature={systemData.temperature}
/> />
<NodeMetricsCharts /> <NodeMetricsCharts />

View File

@@ -33,6 +33,7 @@ interface TempStats {
interface TemperatureDetailModalProps { interface TemperatureDetailModalProps {
open: boolean open: boolean
onOpenChange: (open: boolean) => void onOpenChange: (open: boolean) => void
liveTemperature?: number
} }
const CustomTooltip = ({ active, payload, label }: any) => { const CustomTooltip = ({ active, payload, label }: any) => {
@@ -68,7 +69,7 @@ const getStatusInfo = (temp: number) => {
return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" } return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
} }
export function TemperatureDetailModal({ open, onOpenChange }: TemperatureDetailModalProps) { export function TemperatureDetailModal({ open, onOpenChange, liveTemperature }: TemperatureDetailModalProps) {
const [timeframe, setTimeframe] = useState("hour") const [timeframe, setTimeframe] = useState("hour")
const [data, setData] = useState<TempHistoryPoint[]>([]) const [data, setData] = useState<TempHistoryPoint[]>([])
const [stats, setStats] = useState<TempStats>({ min: 0, max: 0, avg: 0, current: 0 }) const [stats, setStats] = useState<TempStats>({ min: 0, max: 0, avg: 0, current: 0 })
@@ -114,8 +115,10 @@ export function TemperatureDetailModal({ open, onOpenChange }: TemperatureDetail
time: formatTime(d.timestamp), time: formatTime(d.timestamp),
})) }))
const currentStatus = getStatusInfo(stats.current) // Use live temperature from the overview card (real-time) instead of last DB record
const chartColor = getStatusColor(stats.current) const currentTemp = liveTemperature && liveTemperature > 0 ? Math.round(liveTemperature * 10) / 10 : stats.current
const currentStatus = getStatusInfo(currentTemp)
const chartColor = getStatusColor(currentTemp)
// Calculate Y axis domain with some padding // Calculate Y axis domain with some padding
const values = data.map((d) => d.value) const values = data.map((d) => d.value)
@@ -150,7 +153,7 @@ export function TemperatureDetailModal({ open, onOpenChange }: TemperatureDetail
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3">
<div className={`rounded-lg p-3 text-center ${currentStatus.color}`}> <div className={`rounded-lg p-3 text-center ${currentStatus.color}`}>
<div className="text-xs opacity-80 mb-1">Current</div> <div className="text-xs opacity-80 mb-1">Current</div>
<div className="text-lg font-bold">{stats.current}°C</div> <div className="text-lg font-bold">{currentTemp}°C</div>
</div> </div>
<div className="bg-muted/50 rounded-lg p-3 text-center"> <div className="bg-muted/50 rounded-lg p-3 text-center">
<div className="text-xs text-muted-foreground mb-1 flex items-center justify-center gap-1"> <div className="text-xs text-muted-foreground mb-1 flex items-center justify-center gap-1">