Modify DAUChart to be agnostic to interval

coder · BrunoQuaresma · Oct 3, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
commit 78e6db05c1bb4c93e6235c96948726c9d82cabc2
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,18 @@ ChartJS.register(
   Legend,
 );
 
-export interface DAUChartProps {
-  daus: TypesGen.DAUsResponse;
+export interface ActiveUserChartProps {
+  data: { date: string; amount: number }[];
 }
 
-export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
+export const ActiveUserChart: FC<ActiveUserChartProps> = ({ data }) => {
   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,7 +81,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
 
       x: {
         ticks: {
-          stepSize: daus.entries.length > 10 ? 2 : undefined,
+          stepSize: data.length > 10 ? 2 : undefined,
         },
         type: "time",
         time: {
@@ -101,7 +100,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,

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, ActiveUsersTitle } 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";
@@ -33,7 +36,7 @@ export const GeneralSettingsPageView = ({
         {deploymentDAUs && (
           <Box height={200} sx={{ mb: 3 }}>
             <ChartSection title={<ActiveUsersTitle />}>
-              <DAUChart daus={deploymentDAUs} />
+              <ActiveUserChart data={deploymentDAUs.entries} />
             </ChartSection>
           </Box>
         )}

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -4,7 +4,10 @@ import { styled, useTheme } from "@mui/material/styles";
 import { BoxProps } from "@mui/system";
 import { useQuery } from "@tanstack/react-query";
 import { getInsightsTemplate, getInsightsUserLatency } from "api/api";
-import { ActiveUsersTitle, DAUChart } from "components/DAUChart/DAUChart";
+import {
+  ActiveUsersTitle,
+  ActiveUserChart,
+} from "components/ActiveUserChart/ActiveUserChart";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import {
   HelpTooltip,
@@ -19,7 +22,6 @@ import { Helmet } from "react-helmet-async";
 import { getTemplatePageTitle } from "../utils";
 import { Loader } from "components/Loader/Loader";
 import {
-  DAUsResponse,
   TemplateInsightsResponse,
   TemplateParameterUsage,
   TemplateParameterValue,
@@ -178,7 +180,16 @@ const ActiveUsersPanel = ({
       <PanelContent>
         {!data && <Loader sx={{ height: "100%" }} />}
         {data && data.length === 0 && <NoDataAvailable />}
-        {data && data.length > 0 && <DAUChart daus={mapToDAUsResponse(data)} />}
+        {data && data.length > 0 && (
+          <ActiveUserChart
+            data={data.map((d) => {
+              return {
+                amount: d.active_users,
+                date: d.start_time,
+              };
+            })}
+          />
+        )}
       </PanelContent>
     </Panel>
   );
@@ -636,20 +647,6 @@ const getWeeklyRange = (numberOfWeeks: WeeklyPreset) => {
   return { startDate, endDate };
 };
 
-function mapToDAUsResponse(
-  data: TemplateInsightsResponse["interval_reports"],
-): DAUsResponse {
-  return {
-    tz_hour_offset: 0,
-    entries: data.map((d) => {
-      return {
-        amount: d.active_users,
-        date: d.start_time,
-      };
-    }),
-  };
-}
-
 function formatTime(seconds: number): string {
   if (seconds < 60) {
     return seconds + " seconds";