import DayNavigator from '@/Components/DayNavigator'; import ExportButton from '@/Components/ExportButton'; import PrintButton from '@/Components/PrintButton'; import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/Components/ui/chart'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import MetricChart from '@/Pages/Metric/MetricChart'; import MetricMeasure from '@/Pages/Metric/MetricMeasure'; import MetricSummaryCard from '@/Pages/Metric/MetricSummaryCard'; import { BloodPressure, MetricPeriod, User } from '@/types'; import { Head, router, usePage } from '@inertiajs/react'; import dayjs, { Dayjs } from 'dayjs'; import { useState } from 'react'; import { Line, LineChart, XAxis, YAxis } from 'recharts'; interface BloodPressurePeriodPoint { date: string; systolic: number; diastolic: number; } interface BloodPressurePeriodSummary { systolic: { average: number; min: number; max: number }; diastolic: { average: number; min: number; max: number }; count: number; } interface BloodPressureMetricDetailProps { measures: BloodPressure[]; patient: User; availableDates: string[]; period: MetricPeriod< BloodPressurePeriodPoint, BloodPressurePeriodSummary > | null; filters: { date: string }; } export default function BloodPressureMetricDetail({ measures, patient, availableDates, period, filters, }: BloodPressureMetricDetailProps) { const user = usePage().props.auth.user; const [date, setDate] = useState( filters?.date || dayjs().format('YYYY-MM-DD'), ); const onDateChange = (updatedDate: Dayjs) => { const dateString = dayjs(updatedDate).format('YYYY-MM-DD'); setDate(dateString); router.get( route('blood-pressure.detail', { patient: patient.id }), { date: dateString }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const onRangeChange = (from: Dayjs, to: Dayjs) => { router.get( route('blood-pressure.detail', { patient: patient.id }), { from: from.format('YYYY-MM-DD'), to: to.format('YYYY-MM-DD'), }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const periodData = period ? period.data.map((point) => ({ date: dayjs(point.date).format( period.byMonth ? 'MM/YYYY' : 'DD/MM', ), systolic: point.systolic, diastolic: point.diastolic, })) : []; const chartConfig: ChartConfig = { systolic: { label: 'Sistolica', color: '#05A7A0' }, diastolic: { label: 'Diastolica', color: '#7dd3d0' }, }; // measures arrive most-recent-first; the chart needs chronological order on the x-axis. const chartData = [...measures] .sort( (a, b) => dayjs(a.measured_at).valueOf() - dayjs(b.measured_at).valueOf(), ) .map((m) => ({ date: dayjs(m.measured_at).format('HH:mm'), systolic: m.systolic, diastolic: m.diastolic, })); const maxSystolic = measures.length ? Math.max(...measures.map((m) => m.systolic)) : null; const minSystolic = measures.length ? Math.min(...measures.map((m) => m.systolic)) : null; const maxDiastolic = measures.length ? Math.max(...measures.map((m) => m.diastolic)) : null; const minDiastolic = measures.length ? Math.min(...measures.map((m) => m.diastolic)) : null; const backLinkLabel = patient.id === user.id ? 'Dashboard' : `${patient.name} ${patient.surname}`; return (

Pressione arteriosa

} />

{period && (

{period.summary && (

{period.summary.count}{' '} misurazioni dal{' '} {dayjs(period.from).format( 'DD/MM/YYYY', )}{' '} al{' '} {dayjs(period.to).format( 'DD/MM/YYYY', )}

)}

)} {!period && (

)}

La pressione arteriosa misura la forza del sangue sulle pareti delle arterie. Il valore sistolico (massima) indica la pressione durante il battito cardiaco, quello diastolico (minima) durante il riposo. Valori normali sono circa 120/80 mmHg.

{!period && (

Misurazioni

))}

)}

); }