"use client"; import LoadingSpinner from "@/components/ui/spinner"; import { api } from "@/lib/trpc"; import { use, useEffect, useRef, useState } from "react"; import spacetime from "spacetime"; import { predefinedRanges } from "@/lib/dates"; import { useSearchParams } from "next/navigation"; import { parseISO, format as fmt } from "date-fns"; import { DatePickerInput } from '@mantine/dates'; import { Calendar1, MenuIcon } from "lucide-react"; import { Anchor, Button, Menu } from "@mantine/core"; import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; import PieChart from "./PieChart"; import { useTimezone } from "@/lib/userLocalSettings/client"; import TimeseriesChart from "./Timeseries"; const parseDateRangeFromQuery = (): Date[] | undefined => { const searchParams = useSearchParams(); if (!searchParams.has("dateRange")) return undefined; const range = searchParams.get("dateRange")! .split(",") .map((date) => parseISO(date)); return range; } const updateHistory = (dateRange: Date[]) => { const start = dateRange[0]; const end = dateRange[1]; const startStr = spacetime(start).format("iso-short"); const endStr = spacetime(end).format("iso-short"); const searchParams = new URLSearchParams(); searchParams.set("dateRange", `${startStr},${endStr}`); history.replaceState(null, "", `?${searchParams.toString()}`); }; export default function AnalyticsView() { const datePickerRef = useRef(null); const { data: metrics } = api.metrics.list.useQuery(); const drugsList = metrics?.filter((metric) => metric.type === "drug"); const initialDateRange: [Date, Date] = (() => { const range = parseDateRangeFromQuery(); if (range && range.length === 2) { return range as [Date, Date]; } return [ // spacetime.now().subtract(1, "week").toNativeDate(), parseISO(spacetime.now(useTimezone()).format("iso-short")), parseISO(spacetime.now(useTimezone()).format("iso-short")), ]; })(); const [dateRange, setDateRange] = useState(initialDateRange); const [datePickerRange, setDatePickerRange] = useState(initialDateRange); useEffect(() => { if (datePickerRef.current?.getAttribute("aria-expanded") === "false") { setDateRange(datePickerRange); updateHistory(datePickerRange); } }, [datePickerRange]); const { containerRef, TooltipInPortal } = useTooltipInPortal({ // TooltipInPortal is rendered in a separate child of and positioned // with page coordinates which should be updated on scroll. consider using // Tooltip or TooltipWithBounds if you don't need to render inside a Portal scroll: true, }); const categoryFrequencies = api.hours.categoryFrequencies.useQuery({ dateRange, timezone: useTimezone(), }).data ?? []; const weightData = api.measurements.getTimeseries.useQuery({ dateRange, timezone: useTimezone(), metricName: "weight" }).data ?? []; return (

Analytics for  {dateRange[0].getUTCDate() == dateRange[1].getUTCDate() ? spacetime(dateRange[0]).unixFmt("MMM dd, yyyy") : dateRange.map((d) => spacetime(d).unixFmt("MMM dd, yyyy")).join(" to ") }

{/* { if (fmt(value[0], format) === fmt(value[1], format)) { return fmt(value[0], format); } return `${fmt(value[0], format)} - ${fmt(value[1], format)}`; }} /> */}
} leftSectionPointerEvents="none" /> {predefinedRanges.map((range) => ( setDatePickerRange(range.value)} > {range.label} ))}
Total
{categoryFrequencies.reduce((acc, category) => acc + category.count, 0)} hours
{ categoryFrequencies .sort((a, b) => b.count - a.count) .map((category, i) => (
{category.categoryName ?? "[Unallocated]"}
{category.count} hours
)) }

Weight

{ !weightData ? : }

Drugs

{ !drugsList ? :
    {drugsList.map((drug) => (
  • {drug.name}:
    • ))}
}
); }