coder
diff --git a/‎coderd/database/dump.sql
+1-1 b/‎coderd/database/dump.sql
+1-1
diff --git a/‎coderd/database/models.go
+1-1 b/‎coderd/database/models.go
+1-1
diff --git a/‎coderd/database/queries.sql.go
+1-1 b/‎coderd/database/queries.sql.go
+1-1
diff --git a/‎coderd/metrics.go
+1-1 b/‎coderd/metrics.go
+1-1
diff --git a/‎site/src/pages/UsersPage/DAUChart.tsx
+32-5 b/‎site/src/pages/UsersPage/DAUChart.tsx
+32-5
@@ -189,7 +189,7 @@ func (api *API) workspaceAgentReportStats(rw http.ResponseWriter, r *http.Reques
 			lastReport = rep
 
 			_, err = api.Database.InsertAgentStat(ctx, database.InsertAgentStatParams{
-				ID:          uuid.NewString(),
+				ID:          uuid.New(),
 				CreatedAt:   time.Now(),
 				AgentID:     workspaceAgent.ID,
 				WorkspaceID: build.WorkspaceID,
 
@@ -10,21 +10,29 @@ export interface DAUChartProps {
   userMetricsData: TypesGen.GetDAUsResponse
 }
 
+import useTheme from "@material-ui/styles/useTheme"
+
+import { Theme } from "@material-ui/core/styles"
 import {
   CategoryScale,
   Chart as ChartJS,
   ChartOptions,
+  defaults,
   Legend,
   LinearScale,
   LineElement,
   PointElement,
   Title,
   Tooltip,
 } from "chart.js"
+import { Stack } from "components/Stack/Stack"
+import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "components/Tooltips/HelpTooltip"
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
 
 export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
+  const theme: Theme = useTheme()
+
   const labels = userMetricsData.entries.map((val) => {
     return moment(val.date).format("l")
   })
@@ -33,6 +41,8 @@ export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
     return val.daus
   })
 
+  defaults.font.family = theme.typography.fontFamily
+
   const options = {
     responsive: true,
     plugins: {
@@ -43,25 +53,42 @@ export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
     scales: {
       y: {
         min: 0,
+        ticks: {
+          precision: 0,
+        },
+      },
+      x: {
+        ticks: {},
       },
-      x: {},
     },
     aspectRatio: 6 / 1,
   } as ChartOptions
 
   return (
     <>
-      {/* <p>{JSON.stringify(chartData)}</p> */}
-
-      <WorkspaceSection title="Daily Active Users">
+      {/* <WorkspaceSection title="Daily Active Users"> */}
+      <WorkspaceSection>
+        <Stack direction="row" spacing={1} alignItems="center">
+          <h3>Daily Active Users</h3>
+          <HelpTooltip size="small">
+            <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
+            <HelpTooltipText>
+              We use daily, unique workspace connection traffic to compute DAUs.
+            </HelpTooltipText>
+          </HelpTooltip>
+        </Stack>
         <Line
           data={{
             labels: labels,
             datasets: [
               {
+                label: "Daily Active Users",
                 data: data,
+                lineTension: 1 / 4,
+                backgroundColor: theme.palette.secondary.dark,
+                borderColor: theme.palette.secondary.dark,
               },
-            ],
+            ] as any,
           }}
           options={options as any}
           height={400}