import { Form, Head, Link } from '@inertiajs/react'; import { useState } from 'react'; import SensorHistoryController from '@/actions/App/Http/Controllers/SensorHistoryController'; import Heading from '@/components/heading'; import SensorHistoryChart from '@/components/sensor-history-chart'; import WindDirectionIndicator from '@/components/wind-direction-indicator'; import { formatSensorMetricValue } from '@/lib/sensor-metrics'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { dashboard } from '@/routes'; type MetricPoint = { timestamp: string | null; label: string | null; value: number; sample_count?: number; }; type MetricChart = { cdn: string; height: number; type: string; options: Record; series: Array<{ name: string; data: number[]; }>; }; type MetricSeries = { key: string; label: string; points: MetricPoint[]; chart: MetricChart; latest: number | null; average: number | null; min: number | null; max: number | null; yesterday_min: number | null; yesterday_max: number | null; }; function isWindDirectionMetric(metric: MetricSeries): boolean { return metric.key === 'wind_direction'; } type SensorDetail = { id: number; name: string; friendly_name: string | null; display_name: string; device_id: string; description: string | null; sensor_type_name: string | null; }; export default function SensorShow({ sensor, filters, metricSeries, }: { sensor: SensorDetail; filters: { start_date: string | null; end_date: string | null; }; metricSeries: MetricSeries[]; }) { const [historyLoading, setHistoryLoading] = useState(false); return ( <> {historyLoading ? (
Loading history
) : null}
History filters Limit the charts to a selected date range.
setHistoryLoading(true)} onFinish={() => setHistoryLoading(false)} className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto_auto]" > {({ processing }) => ( <>
)}
Sensor details Device identity and the most recent historical data available.
Device ID
{sensor.device_id}
Sensor type
{sensor.sensor_type_name ?? 'Unknown'}
Internal name
{sensor.name}
{metricSeries.length === 0 ? ( No numeric history is available to graph for this sensor yet. ) : ( metricSeries.map((metric) => (
{metric.label} Historical trend across stored uplinks.
{isWindDirectionMetric(metric) ? `Latest ${metric.latest ?? 'n/a'}°` : `Latest ${ metric.latest !== null ? formatSensorMetricValue( metric.key, metric.latest, ) : 'n/a' }`}
{isWindDirectionMetric(metric) ? (
Latest
{metric.latest !== null ? ( ) : ( 'n/a' )}
First
{metric.points[0] ? ( ) : ( 'n/a' )}
Samples
{metric.points.length}
) : ( <>
Latest
{metric.latest !== null ? formatSensorMetricValue( metric.key, metric.latest, ) : 'n/a'}
Average
{metric.average !== null ? formatSensorMetricValue( metric.key, metric.average, ) : 'n/a'}
Today min
{metric.min !== null ? formatSensorMetricValue( metric.key, metric.min, ) : 'n/a'}
Today max
{metric.max !== null ? formatSensorMetricValue( metric.key, metric.max, ) : 'n/a'}
Yesterday
Min
{metric.yesterday_min !== null ? formatSensorMetricValue( metric.key, metric.yesterday_min, ) : 'n/a'}
Max
{metric.yesterday_max !== null ? formatSensorMetricValue( metric.key, metric.yesterday_max, ) : 'n/a'}
)} )) )}
); } SensorShow.layout = { breadcrumbs: [ { title: 'Dashboard', href: dashboard(), }, { title: 'Sensor history', href: dashboard(), }, ], };