"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"; 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(), spacetime.now().toNativeDate(), spacetime.now().toNativeDate() ]; })(); 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, }).data ?? []; console.log(categoryFrequencies); return (

Analytics

{/* { 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} ))}

{ categoryFrequencies .sort((a, b) => b.count - a.count) .map((category, i) => (

{category.categoryName}

{category.count} hours

)) }

Drugs

{ !drugsList ? :

{drug.name}:

}

); }