Improve DAU chart view (#4172)

site/package.json

@@ -39,8 +39,10 @@
     "axios": "0.26.1",
     "can-ndjson-stream": "1.0.2",
     "chart.js": "^3.5.0",
+    "chartjs-adapter-date-fns": "2.0.0",
     "cron-parser": "4.6.0",
     "cronstrue": "2.11.0",
+    "date-fns": "2.29.3",
     "dayjs": "1.11.4",
     "emoji-mart": "^5.2.1",
     "eventsourcemock": "^2.0.0",

site/src/components/WorkspaceSection/WorkspaceSection.tsx

@@ -11,7 +11,7 @@ export interface WorkspaceSectionProps {
    */
   action?: React.ReactNode
   contentsProps?: HTMLProps<HTMLDivElement>
-  title?: string
+  title?: string | JSX.Element
 }
 
 export const WorkspaceSection: React.FC<React.PropsWithChildren<WorkspaceSectionProps>> = ({

site/src/pages/TemplatePage/DAUChart.tsx

@@ -2,7 +2,6 @@ import useTheme from "@material-ui/styles/useTheme"
 
 import { Theme } from "@material-ui/core/styles"
 import {
-  BarElement,
   CategoryScale,
   Chart as ChartJS,
   ChartOptions,
@@ -11,9 +10,11 @@ import {
   LinearScale,
   LineElement,
   PointElement,
+  TimeScale,
   Title,
   Tooltip,
 } from "chart.js"
+import "chartjs-adapter-date-fns"
 import { Stack } from "components/Stack/Stack"
 import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "components/Tooltips/HelpTooltip"
 import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
@@ -25,8 +26,8 @@ import * as TypesGen from "../../api/typesGenerated"
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  TimeScale,
   PointElement,
-  BarElement,
   LineElement,
   Title,
   Tooltip,
@@ -81,6 +82,11 @@ export const DAUChart: FC<DAUChartProps> = ({ templateDAUs: templateMetricsData
       },
       x: {
         ticks: {},
+        type: "time",
+        time: {
+          unit: "day",
+          stepSize: 2,
+        },
       },
     },
     aspectRatio: 10 / 1,
@@ -88,16 +94,19 @@ export const DAUChart: FC<DAUChartProps> = ({ templateDAUs: templateMetricsData
 
   return (
     <>
-      <WorkspaceSection>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <h3>{Language.chartTitle}</h3>
-          <HelpTooltip size="small">
-            <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
-            <HelpTooltipText>
-              We use all workspace connection traffic to calculate DAUs.
-            </HelpTooltipText>
-          </HelpTooltip>
-        </Stack>
+      <WorkspaceSection
+        title={
+          <Stack direction="row" spacing={1} alignItems="center">
+            {Language.chartTitle}
+            <HelpTooltip size="small">
+              <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
+              <HelpTooltipText>
+                We use all workspace connection traffic to calculate DAUs.
+              </HelpTooltipText>
+            </HelpTooltip>
+          </Stack>
+        }
+      >
         <Line
           data={{
             labels: labels,

site/yarn.lock

@@ -5442,6 +5442,11 @@ chart.js@^3.5.0:
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
   integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
 
+chartjs-adapter-date-fns@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
+  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -6243,6 +6248,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 dayjs@1.11.4:
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"