coder · BrunoQuaresma · Oct 3, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1474,28 +1474,31 @@ export const getWorkspaceParameters = async (workspace: TypesGen.Workspace) => {
   };
 };
 
-type InsightsFilter = {
+export type InsightsParams = {
   start_time: string;
   end_time: string;
   template_ids: string;
 };
 
 export const getInsightsUserLatency = async (
-  filters: InsightsFilter,
+  filters: InsightsParams,
 ): Promise<TypesGen.UserLatencyInsightsResponse> => {
   const params = new URLSearchParams(filters);
   const response = await axios.get(`/api/v2/insights/user-latency?${params}`);
   return response.data;
 };
 
+export type InsightsTemplateParams = InsightsParams & {
+  interval: "day" | "week";
+};
+
 export const getInsightsTemplate = async (
-  filters: InsightsFilter,
+  params: InsightsTemplateParams,
 ): Promise<TypesGen.TemplateInsightsResponse> => {
-  const params = new URLSearchParams({
-    ...filters,
-    interval: "day",
-  });
-  const response = await axios.get(`/api/v2/insights/templates?${params}`);
+  const searchParams = new URLSearchParams(params);
+  const response = await axios.get(
+    `/api/v2/insights/templates?${searchParams}`,
+  );
   return response.data;
 };
 

diff --git a/site/src/api/queries/insights.ts b/site/src/api/queries/insights.ts
@@ -0,0 +1,15 @@
+import * as API from "api/api";
+
+export const insightsTemplate = (params: API.InsightsTemplateParams) => {
+  return {
+    queryKey: ["insights", "templates", params.template_ids, params],
+    queryFn: () => API.getInsightsTemplate(params),
+  };
+};
+
+export const insightsUserLatency = (params: API.InsightsParams) => {
+  return {
+    queryKey: ["insights", "userLatency", params.template_ids, params],
+    queryFn: () => API.getInsightsUserLatency(params),
+  };
+};
diff --git a/site/src/components/DAUChart/DAUChart.tsx → ...nents/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/DAUChart/DAUChart.tsx → ...nents/ActiveUserChart/ActiveUserChart.tsx
@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import { Theme } from "@mui/material/styles";
 import useTheme from "@mui/styles/useTheme";
-import * as TypesGen from "api/typesGenerated";
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -38,18 +37,22 @@ ChartJS.register(
   Legend,
 );
 
-export interface DAUChartProps {
-  daus: TypesGen.DAUsResponse;
+export interface ActiveUserChartProps {
+  data: { date: string; amount: number }[];
+  interval: "day" | "week";
 }
 
-export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
+export const ActiveUserChart: FC<ActiveUserChartProps> = ({
+  data,
+  interval,
+}) => {
   const theme: Theme = useTheme();
 
-  const labels = daus.entries.map((val) => {
+  const labels = data.map((val) => {
     return dayjs(val.date).format("YYYY-MM-DD");
   });
 
-  const data = daus.entries.map((val) => {
+  const chartData = data.map((val) => {
     return val.amount;
   });
 
@@ -82,11 +85,11 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
 
       x: {
         ticks: {
-          stepSize: daus.entries.length > 10 ? 2 : undefined,
+          stepSize: data.length > 10 ? 2 : undefined,
         },
         type: "time",
         time: {
-          unit: "day",
+          unit: interval,
         },
       },
     },
@@ -101,7 +104,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
         datasets: [
           {
             label: "Daily Active Users",
-            data: data,
+            data: chartData,
             pointBackgroundColor: theme.palette.info.light,
             pointBorderColor: theme.palette.info.light,
             borderColor: theme.palette.info.light,
@@ -115,17 +118,15 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
   );
 };
 
-export const DAUTitle = () => {
+export const ActiveUsersTitle = () => {
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-      Daily Active Users
+      Active Users
       <HelpTooltip size="small">
-        <HelpTooltipTitle>
-          How do we calculate daily active users?
-        </HelpTooltipTitle>
+        <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
         <HelpTooltipText>
           When a connection is initiated to a user&apos;s workspace they are
-          considered a daily active user. e.g. apps, web terminal, SSH
+          considered an active user. e.g. apps, web terminal, SSH
         </HelpTooltipText>
       </HelpTooltip>
     </Box>

diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,7 +1,10 @@
 import Box from "@mui/material/Box";
 import { ClibaseOption, DAUsResponse } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { DAUChart, DAUTitle } from "components/DAUChart/DAUChart";
+import {
+  ActiveUserChart,
+  ActiveUsersTitle,
+} from "components/ActiveUserChart/ActiveUserChart";
 import { Header } from "components/DeploySettingsLayout/Header";
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
 import { Stack } from "components/Stack/Stack";
@@ -32,8 +35,8 @@ export const GeneralSettingsPageView = ({
         )}
         {deploymentDAUs && (
           <Box height={200} sx={{ mb: 3 }}>
-            <ChartSection title={<DAUTitle />}>
-              <DAUChart daus={deploymentDAUs} />
+            <ChartSection title={<ActiveUsersTitle />}>
+              <ActiveUserChart data={deploymentDAUs.entries} interval="day" />
             </ChartSection>
           </Box>
         )}

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -0,0 +1,87 @@
+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 insightsIntervals = {
+  day: {
+    label: "Daily",
+  },
+  week: {
+    label: "Weekly",
+  },
+} as const;
+
+export type InsightsInterval = keyof typeof insightsIntervals;
+
+export const IntervalMenu = ({
+  value,
+  onChange,
+}: {
+  value: InsightsInterval;
+  onChange: (value: InsightsInterval) => 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 />}
+      >
+        {insightsIntervals[value].label}
+      </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",
+        }}
+      >
+        {Object.keys(insightsIntervals).map((interval) => {
+          const { label } = insightsIntervals[interval as InsightsInterval];
+          return (
+            <MenuItem
+              css={{ fontSize: 14, justifyContent: "space-between" }}
+              key={interval}
+              onClick={() => {
+                onChange(interval as InsightsInterval);
+                handleClose();
+              }}
+            >
+              {label}
+              <Box css={{ width: 16, height: 16 }}>
+                {value === interval && (
+                  <CheckOutlined css={{ width: 16, height: 16 }} />
+                )}
+              </Box>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </div>
+  );
+};