Add weekly controls

coder · BrunoQuaresma · Oct 3, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
commit 41cc6386232a39816c98dcc875fe261da10c3184
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -26,7 +26,14 @@ import {
   UserLatencyInsightsResponse,
 } from "api/typesGenerated";
 import { ComponentProps, ReactNode, useState } from "react";
-import { subDays, isToday } from "date-fns";
+import {
+  subDays,
+  subWeeks,
+  startOfWeek,
+  endOfWeek,
+  isSunday,
+  endOfDay,
+} from "date-fns";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { DateRange, DateRangeValue } from "./DateRange";
@@ -37,23 +44,30 @@ import { getDateRangeFilter } from "./utils";
 import Tooltip from "@mui/material/Tooltip";
 import LinkOutlined from "@mui/icons-material/LinkOutlined";
 import { InsightsInterval, IntervalMenu } from "./IntervalMenu";
+import { WeeklyPreset, WeeklyPresetsMenu } from "./WeeklyPresetsMenu";
 
 export default function TemplateInsightsPage() {
+  const { template } = useTemplateLayoutContext();
   const now = new Date();
-  const [interval, setInterval] = useState<InsightsInterval>("day");
-  const [dateRangeValue, setDateRangeValue] = useState<DateRangeValue>({
+
+  const defaultWeeklyPreset = 4;
+  const defaultDateRangeValue = {
     startDate: subDays(now, 6),
     endDate: now,
-  });
-  const { template } = useTemplateLayoutContext();
+  };
+
+  const [interval, setInterval] = useState<InsightsInterval>("day");
+  const [weeklyPreset, setWeeklyPreset] =
+    useState<WeeklyPreset>(defaultWeeklyPreset);
+  const [dateRangeValue, setDateRangeValue] = useState<DateRangeValue>(
+    defaultDateRangeValue,
+  );
+
+  const dateRange =
+    interval === "day" ? dateRangeValue : getWeeklyRange(weeklyPreset);
   const commonFilters = {
     template_ids: template.id,
-    ...getDateRangeFilter({
-      startDate: dateRangeValue.startDate,
-      endDate: dateRangeValue.endDate,
-      now,
-      isToday,
-    }),
+    ...getDateRangeFilter(dateRange),
   };
   const insightsFilter = { ...commonFilters, interval };
   const { data: templateInsights } = useQuery({
@@ -73,8 +87,25 @@ export default function TemplateInsightsPage() {
       <TemplateInsightsPageView
         controls={
           <>
-            <IntervalMenu value={interval} onChange={setInterval} />
-            <DateRange value={dateRangeValue} onChange={setDateRangeValue} />
+            <IntervalMenu
+              value={interval}
+              onChange={(interval) => {
+                setInterval(interval);
+                if (interval === "week") {
+                  setWeeklyPreset(defaultWeeklyPreset);
+                } else {
+                  setDateRangeValue(defaultDateRangeValue);
+                }
+              }}
+            />
+            {interval === "day" ? (
+              <DateRange value={dateRangeValue} onChange={setDateRangeValue} />
+            ) : (
+              <WeeklyPresetsMenu
+                value={weeklyPreset}
+                onChange={setWeeklyPreset}
+              />
+            )}
           </>
         }
         templateInsights={templateInsights}
@@ -598,6 +629,13 @@ const TextValue = ({ children }: { children: ReactNode }) => {
   );
 };
 
+const getWeeklyRange = (numberOfWeeks: WeeklyPreset) => {
+  const now = new Date();
+  const startDate = startOfWeek(subWeeks(now, numberOfWeeks));
+  const endDate = isSunday(now) ? endOfDay(now) : endOfWeek(subWeeks(now, 1));
+  return { startDate, endDate };
+};
+
 function mapToDAUsResponse(
   data: TemplateInsightsResponse["interval_reports"],
 ): DAUsResponse {

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeeklyPresetsMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeeklyPresetsMenu.tsx
@@ -0,0 +1,79 @@
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useState, useRef } from "react";
+
+export const weeklyPresets = [4, 12, 24, 48] as const;
+
+export type WeeklyPreset = (typeof weeklyPresets)[number];
+
+export const WeeklyPresetsMenu = ({
+  value,
+  onChange,
+}: {
+  value: WeeklyPreset;
+  onChange: (value: WeeklyPreset) => void;
+}) => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button
+        ref={anchorRef}
+        id="interval-button"
+        aria-controls={open ? "interval-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={() => setOpen(true)}
+        endIcon={<ExpandMoreOutlined />}
+      >
+        {value} weeks ago
+      </Button>
+      <Menu
+        id="interval-menu"
+        anchorEl={anchorRef.current}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "interval-button",
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+      >
+        {weeklyPresets.map((numberOfWeeks) => {
+          return (
+            <MenuItem
+              css={{ fontSize: 14, justifyContent: "space-between" }}
+              key={numberOfWeeks}
+              onClick={() => {
+                onChange(numberOfWeeks);
+                handleClose();
+              }}
+            >
+              {numberOfWeeks} weeks ago
+              <Box css={{ width: 16, height: 16 }}>
+                {value === numberOfWeeks && (
+                  <CheckOutlined css={{ width: 16, height: 16 }} />
+                )}
+              </Box>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </div>
+  );
+};
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts b/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts
@@ -1,15 +1,22 @@
-import { addDays, addHours, format, startOfDay, startOfHour } from "date-fns";
+import {
+  addDays,
+  addHours,
+  format,
+  startOfDay,
+  startOfHour,
+  isToday as isTodayDefault,
+} from "date-fns";
 
 export function getDateRangeFilter({
   startDate,
   endDate,
-  now,
-  isToday,
+  now = new Date(),
+  isToday = isTodayDefault,
 }: {
   startDate: Date;
   endDate: Date;
-  now: Date;
-  isToday: (date: Date) => boolean;
+  now?: Date;
+  isToday?: (date: Date) => boolean;
 }) {
   return {
     start_time: toISOLocal(startOfDay(startDate)),