Update chart to support weekly data

BrunoQuaresma · BrunoQuaresma · commit 6b4e763f3a91 · 2023-10-02T17:38:06.000Z
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -39,9 +39,13 @@ ChartJS.register(
 
 export interface ActiveUserChartProps {
   data: { date: string; amount: number }[];
+  interval: "day" | "week";
 }
 
-export const ActiveUserChart: FC<ActiveUserChartProps> = ({ data }) => {
+export const ActiveUserChart: FC<ActiveUserChartProps> = ({
+  data,
+  interval,
+}) => {
   const theme: Theme = useTheme();
 
   const labels = data.map((val) => {
@@ -85,7 +89,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({ data }) => {
         },
         type: "time",
         time: {
-          unit: "day",
+          unit: interval,
         },
       },
     },
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -36,7 +36,7 @@ export const GeneralSettingsPageView = ({
         {deploymentDAUs && (
           <Box height={200} sx={{ mb: 3 }}>
             <ChartSection title={<ActiveUsersTitle />}>
-              <ActiveUserChart data={deploymentDAUs.entries} />
+              <ActiveUserChart data={deploymentDAUs.entries} interval="day" />
             </ChartSection>
           </Box>
         )}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -112,6 +112,7 @@ export default function TemplateInsightsPage() {
         }
         templateInsights={templateInsights}
         userLatency={userLatency}
+        interval={interval}
       />
     </>
   );
@@ -121,10 +122,12 @@ export const TemplateInsightsPageView = ({
   templateInsights,
   userLatency,
   controls,
+  interval,
 }: {
   templateInsights: TemplateInsightsResponse | undefined;
   userLatency: UserLatencyInsightsResponse | undefined;
   controls: ReactNode;
+  interval: InsightsInterval;
 }) => {
   return (
     <>
@@ -148,6 +151,7 @@ export const TemplateInsightsPageView = ({
       >
         <ActiveUsersPanel
           sx={{ gridColumn: "span 2" }}
+          interval={interval}
           data={templateInsights?.interval_reports}
         />
         <UserLatencyPanel data={userLatency} />
@@ -166,9 +170,11 @@ export const TemplateInsightsPageView = ({
 
 const ActiveUsersPanel = ({
   data,
+  interval,
   ...panelProps
 }: PanelProps & {
   data: TemplateInsightsResponse["interval_reports"] | undefined;
+  interval: InsightsInterval;
 }) => {
   return (
     <Panel {...panelProps}>
@@ -182,6 +188,7 @@ const ActiveUsersPanel = ({
         {data && data.length === 0 && <NoDataAvailable />}
         {data && data.length > 0 && (
           <ActiveUserChart
+            interval={interval}
             data={data.map((d) => {
               return {
                 amount: d.active_users,
