38 lines
2.8 KiB
JavaScript
38 lines
2.8 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useEffect, useState } from 'react';
|
|
import { useStats } from '../../hooks/useStats';
|
|
import { formatMinutesAfter, getToday, getLocalOffsetFromReference } from '../../utils/time';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
|
|
const WakeupPlot = ({ from_date, to_date, wakeup_ref, bedtime_ref }) => {
|
|
const { wakeupBedtime, isLoading } = useStats(from_date, to_date, '07:00', '20:00', wakeup_ref, bedtime_ref);
|
|
const [chartData, setChartData] = useState([]);
|
|
useEffect(() => {
|
|
if (!wakeupBedtime?.days) {
|
|
setChartData([]);
|
|
return;
|
|
}
|
|
const data = wakeupBedtime.days.map((day) => {
|
|
const daysAgo = Math.floor((new Date(getToday()).getTime() - new Date(day.date).getTime()) / (1000 * 60 * 60 * 24));
|
|
const offsetFromRef = day.wakeup_minutes !== null ? getLocalOffsetFromReference(day.wakeup_minutes, wakeup_ref) : 0;
|
|
return {
|
|
date: daysAgo === 0 ? 'Today' : `${daysAgo}d ago`,
|
|
minutes: offsetFromRef,
|
|
time: day.wakeup_minutes !== null
|
|
? formatMinutesAfter(offsetFromRef, wakeup_ref)
|
|
: 'N/A',
|
|
};
|
|
}).reverse();
|
|
setChartData(data);
|
|
}, [wakeupBedtime, wakeup_ref]);
|
|
if (isLoading)
|
|
return _jsx("div", { className: "text-center p-4", children: "Loading plot..." });
|
|
if (!chartData.length) {
|
|
return _jsx("div", { className: "text-center p-4 text-gray-500", children: "No data available for this period." });
|
|
}
|
|
return (_jsxs("div", { className: "bg-white p-4 rounded-xl shadow-sm border border-gray-200", children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-gray-800", children: "Wakeup Times" }), _jsx(ResponsiveContainer, { width: "100%", height: 200, children: _jsxs(LineChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#e5e7eb" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, tickLine: false, axisLine: { stroke: '#e5e7eb' } }), _jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: { stroke: '#e5e7eb' }, tickFormatter: (value) => formatMinutesAfter(value, wakeup_ref), domain: ['dataMin - 30', 'dataMax + 30'] }), _jsx(Tooltip, { formatter: (value) => [
|
|
formatMinutesAfter(value ?? 0, wakeup_ref),
|
|
'Wakeup',
|
|
], labelFormatter: (label) => label }), _jsx(Line, { type: "monotone", dataKey: "minutes", stroke: "#3b82f6", strokeWidth: 2, dot: { fill: '#3b82f6', r: 4 }, connectNulls: false })] }) })] }));
|
|
};
|
|
export default WakeupPlot;
|