chore: refactor ranges to prepare for custom ranges

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

Cargo.lock

@@ -24,7 +24,7 @@
 		"date-fns": "^4.1.0",
 		"fets": "^0.8.3",
 		"fuzzysort": "^3.1.0",
-		"lightningcss": "^1.27.0",
+		"lightningcss": "^1.28.1",
 		"lucide-react": "^0.454.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
@@ -37,7 +37,7 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-simple-maps": "^3.0.6",
-		"astro": "^4.16.8",
+		"astro": "^4.16.9",
 		"bun-types": "^1.1.34",
 		"rollup-plugin-license": "^3.5.3",
 		"typescript": "^5.6.3"

web/bun.lockb

@@ -5,7 +5,7 @@ import type { DateRange, Dimension, DimensionFilter, DimensionTableRow, Metric,
 
 import { api } from ".";
 import { queryClient, useQuery } from "./query";
-import { resolveRange, type RangeName } from "./ranges";
+import { rangeDataPoints, rangeEndsToday, type RangeName } from "./ranges";
 
 export const useMe = () => {
 	const { data, isLoading } = useQuery({
@@ -96,23 +96,23 @@ export const useDimension = ({
 export const useProjectData = ({
 	project,
 	metric,
-	rangeName = "last7Days",
+	range,
 	filters = [],
 }: {
 	project?: ProjectResponse;
 	metric: Metric;
-	rangeName?: RangeName;
+	range: DateRange;
 	filters?: DimensionFilter[];
 }) => {
-	const { range, graphRange, dataPoints } = useMemo(() => resolveRange(rangeName), [rangeName]);
-
 	let refetchInterval = undefined;
 	let staleTime = 1000 * 60 * 10;
-	if (rangeName === "today" || rangeName.startsWith("last")) {
+	if (rangeEndsToday(range)) {
 		refetchInterval = 1000 * 60;
 		staleTime = 0;
 	}
 
+	const dataPoints = rangeDataPoints(range);
+
 	const {
 		data: stats,
 		isError: isErrorStats,
@@ -138,7 +138,7 @@ export const useProjectData = ({
 		refetchInterval,
 		staleTime,
 		enabled: project !== undefined,
-		queryKey: ["project_graph", project?.id, range, graphRange, metric, filters, dataPoints],
+		queryKey: ["project_graph", project?.id, range, metric, filters, dataPoints],
 		queryFn: () =>
 			api["/api/dashboard/project/{project_id}/graph"]
 				.post({ json: { range, metric, dataPoints, filters }, params: { project_id: project?.id ?? "" } })
@@ -155,7 +155,7 @@ export const useProjectData = ({
 		graph: {
 			error: isErrorGraph,
 			loading: isLoadingGraph,
-			range: graphRange,
+			range,
 			data: graph?.data ? toDataPoints(graph.data, range, metric) : [],
 		},
 		isLoading: isLoadingStats || isLoadingGraph,

web/package.json

@@ -15,6 +15,50 @@ import {
 import type { DateRange } from "./types";
 import type { GraphRange } from "../components/graph/graph";
 
+export const rangeEndsToday = (range: DateRange) => {
+	const now = new Date().getTime();
+	return startOfDay(now) === startOfDay(range.end);
+};
+
+export const rangeGraphRange = (range: DateRange): GraphRange => {
+	const days = differenceInDays(range.end, range.start);
+	if (days < 2) {
+		return "hour";
+	}
+	const months = differenceInMonths(range.end, range.start);
+	if (months < 2) {
+		return "day";
+	}
+	return "month";
+};
+
+export const rangeDataPoints = (range: DateRange): number => {
+	switch (rangeGraphRange(range)) {
+		case "hour":
+			return differenceInHours(range.end, range.start) + 1;
+		case "day":
+			return differenceInDays(range.end, range.start) + 1;
+		case "month":
+			return differenceInMonths(range.end, range.start) + 1;
+	}
+	throw new Error("unreachable");
+};
+
+export const serializeRange = (range: DateRange): string => {
+	const start = new Date(range.start);
+	const end = new Date(range.end);
+	return `${Number(start)}:${Number(end)}`;
+};
+
+export const deserializeRange = (range: string): DateRange => {
+	if (!range.includes(":")) {
+		return ranges[range as RangeName]().range;
+	}
+
+	const [start, end] = range.split(":").map(Number);
+	return { start, end };
+};
+
 export const rangeNames = {
 	today: "Today",
 	yesterday: "Yesterday",
@@ -32,8 +76,6 @@ const lastXDays = (days: number) => {
 	return { start, end };
 };
 
-export const resolveRange = (name: RangeName) => ranges[name]();
-
 // all rangeNames are keys of the ranges object
 export const ranges: Record<RangeName, () => { range: DateRange; dataPoints: number; graphRange: GraphRange }> = {
 	today: () => {

web/src/api/hooks.ts

@@ -1,5 +1,5 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { ArrowDownIcon, LinkIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import { LinkIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import styles from "./dimensions.module.css";
 
 import { type Dimension, type DimensionTableRow, dimensionNames, metricNames, useDimension } from "../../api";
@@ -92,11 +92,6 @@ export const DimensionDropdown = ({
 						</option>
 					))}
 				</select>
-				{/* {Object.entries(dimensions).map(([key, value]) => (
-					<Tabs.Trigger key={key} value={value}>
-						{dimensionNames[value]}
-					</Tabs.Trigger>
-				))} */}
 				<div>{metricNames[query.metric]}</div>
 			</Tabs.List>
 			{dimensions.map((dimension) => (

web/src/api/ranges.ts

@@ -6,6 +6,8 @@ import { addMonths } from "date-fns";
 import type { DataPoint } from ".";
 import { formatMetricVal } from "../../utils";
 import { useWindowSize } from "@uidotdev/usehooks";
+import type { DateRange } from "../../api";
+import { rangeGraphRange } from "../../api/ranges";
 
 export type GraphRange = "year" | "month" | "day" | "hour";
 
@@ -39,12 +41,13 @@ const Tooltip = (props: SliceTooltipProps & { title: string; range: GraphRange }
 export const LineGraph = ({
 	data,
 	title,
-	range = "day",
+	range,
 }: {
 	data: DataPoint[];
 	title: string;
-	range?: GraphRange;
+	range: DateRange;
 }) => {
+	const graphRange = rangeGraphRange(range);
 	const max = useMemo(() => Math.max(...data.map((d) => d.y)), [data]);
 	const yCount = 5;
 
@@ -76,7 +79,7 @@ export const LineGraph = ({
 			axisRight={null}
 			axisBottom={{
 				legend: "",
-				format: (value: Date) => formatDate(value, range),
+				format: (value: Date) => formatDate(value, graphRange),
 				tickValues: xCount,
 			}}
 			axisLeft={{
@@ -90,7 +93,7 @@ export const LineGraph = ({
 			pointLabel="data.yFormatted"
 			pointLabelYOffset={-12}
 			enableSlices="x"
-			sliceTooltip={(props) => <Tooltip {...props} title={title} range={range} />}
+			sliceTooltip={(props) => <Tooltip {...props} title={title} range={graphRange} />}
 			defs={[
 				{
 					colors: [

web/src/components/dimensions/index.tsx

@@ -1,10 +1,10 @@
 import styles from "./project.module.css";
 import _map from "./worldmap.module.css";
 
-import { Suspense, lazy, useEffect, useState } from "react";
+import { Suspense, lazy, useEffect, useMemo, useState } from "react";
 import { useLocalStorage } from "@uidotdev/usehooks";
 
-import { type RangeName, resolveRange } from "../api/ranges";
+import { deserializeRange, type RangeName } from "../api/ranges";
 import { metricNames, useDimension, useProject, useProjectData } from "../api";
 import type { DimensionFilter, DateRange, Metric, ProjectResponse, DimensionTableRow, Dimension } from "../api";
 
@@ -28,17 +28,17 @@ export type ProjectQuery = {
 export const Project = () => {
 	const [projectId, setProjectId] = useState<string | undefined>();
 	const [filters, setFilters] = useState<DimensionFilter[]>([]);
-	const [dateRange, setDateRange] = useLocalStorage<RangeName>("date-range", "last7Days");
 	const [metric, setMetric] = useLocalStorage<Metric>("metric", "views");
+	const [rangeString, setRangeString] = useLocalStorage<string>("date-range", "last7Days");
+	const range = useMemo(() => deserializeRange(rangeString), [rangeString]);
 
 	useEffect(() => {
 		if (typeof window === "undefined") return;
 		setProjectId(window?.document.location.pathname.split("/").pop());
 	}, []);
 
 	const { project } = useProject(projectId);
-	const { graph, stats } = useProjectData({ project, metric, rangeName: dateRange, filters });
-	const { range } = resolveRange(dateRange);
+	const { graph, stats } = useProjectData({ project, metric, range, filters });
 	if (!project) return null;
 
 	const query = { metric, range, filters, project };
@@ -92,7 +92,7 @@ export const Project = () => {
 				<div>
 					<div className={styles.projectHeader}>
 						<ProjectHeader project={project} stats={stats.data} />
-						<SelectRange onSelect={(name: RangeName) => setDateRange(name)} range={dateRange} />
+						<SelectRange onSelect={(name) => setRangeString(name)} range={rangeString} />
 					</div>
 					<SelectMetrics data={stats.data} metric={metric} setMetric={setMetric} className={styles.projectStats} />
 					<SelectFilters value={filters} onChange={setFilters} />

web/src/components/graph/graph.tsx

@@ -3,17 +3,18 @@ import { useRef } from "react";
 import { rangeNames, type RangeName } from "../../api/ranges";
 import { cls } from "../../utils";
 
-export const SelectRange = ({ onSelect, range }: { onSelect: (name: RangeName) => void; range: RangeName }) => {
+export const SelectRange = ({ onSelect, range }: { onSelect: (name: string) => void; range: string }) => {
+	const rangeName = range.includes(":") ? "Custom" : rangeNames[range as RangeName];
 	const detailsRef = useRef<HTMLDetailsElement>(null);
 
-	const handleSelect = (name: RangeName) => () => {
+	const handleSelect = (name: string) => () => {
 		if (detailsRef.current) detailsRef.current.open = false;
 		onSelect(name);
 	};
 
 	return (
 		<details ref={detailsRef} className={cls("dropdown", styles.selectRange)}>
-			<summary>{rangeNames[range]}</summary>
+			<summary>{rangeName}</summary>
 			<ul>
 				{Object.entries(rangeNames).map(([key, value]) => (
 					<li key={key}>

web/src/components/project.tsx

@@ -1,11 +1,20 @@
-import { Suspense } from "react";
+import { Suspense, useMemo } from "react";
 import styles from "./projects.module.css";
 
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { ChevronDownIcon } from "lucide-react";
 
-import { type Metric, type ProjectResponse, api, metricNames, useMe, useProjectData, useQuery } from "../api";
-import type { RangeName } from "../api/ranges";
+import {
+	type DateRange,
+	type Metric,
+	type ProjectResponse,
+	api,
+	metricNames,
+	useMe,
+	useProjectData,
+	useQuery,
+} from "../api";
+import { deserializeRange, type RangeName } from "../api/ranges";
 import { getUsername } from "../utils";
 import { LineGraph } from "./graph";
 import { SelectRange } from "./project/range";
@@ -45,9 +54,10 @@ export const Projects = () => {
 		queryFn: () => api["/api/dashboard/projects"].get().json(),
 	});
 
-	const [dateRange, setDateRange] = useLocalStorage<RangeName>("date-range", "last7Days");
 	const [metric, setMetric] = useLocalStorage<Metric>("metric", "views");
 	const [hiddenProjects, setHiddenProjects] = useLocalStorage<string[]>("hiddenProjects", []);
+	const [rangeString, setRangeString] = useLocalStorage<string>("date-range", "last7Days");
+	const range = useMemo(() => deserializeRange(rangeString), [rangeString]);
 
 	const projects = data?.projects || [];
 
@@ -75,7 +85,7 @@ export const Projects = () => {
 		<div className={styles.projects}>
 			<div className={styles.header}>
 				<h1>Dashboard</h1>
-				<SelectRange onSelect={(name: RangeName) => setDateRange(name)} range={dateRange} />
+				<SelectRange onSelect={(name) => setRangeString(name)} range={rangeString} />
 			</div>
 
 			<Suspense>
@@ -89,7 +99,7 @@ export const Projects = () => {
 				>
 					{projects.map((project) => (
 						<Accordion.Item key={project.id} value={project.id}>
-							<Project project={project} metric={metric} setMetric={setMetric} rangeName={dateRange} />
+							<Project project={project} metric={metric} setMetric={setMetric} range={range} />
 						</Accordion.Item>
 					))}
 				</Accordion.Root>
@@ -102,9 +112,9 @@ const Project = ({
 	project,
 	metric,
 	setMetric,
-	rangeName,
-}: { project: ProjectResponse; metric: Metric; setMetric: (value: Metric) => void; rangeName: RangeName }) => {
-	const { stats, graph, isLoading, isError } = useProjectData({ project, metric, rangeName });
+	range,
+}: { project: ProjectResponse; metric: Metric; setMetric: (value: Metric) => void; range: DateRange }) => {
+	const { stats, graph, isLoading, isError } = useProjectData({ project, metric, range });
 
 	return (
 		<article className={styles.project} data-loading={isLoading || isError} data-error={isError}>