From 45218d0366ec245301bc7f33dda6879005178fac Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 16 Aug 2023 13:14:18 +0000
Subject: [PATCH 1/2] Use bar chart

---
 site/src/components/DAUChart/DAUChart.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/site/src/components/DAUChart/DAUChart.tsx b/site/src/components/DAUChart/DAUChart.tsx
index fe6d92e5fb332..fac450a9aeaca 100644
--- a/site/src/components/DAUChart/DAUChart.tsx
+++ b/site/src/components/DAUChart/DAUChart.tsx
@@ -9,8 +9,7 @@ import {
   defaults,
   Legend,
   LinearScale,
-  LineElement,
-  PointElement,
+  BarElement,
   TimeScale,
   Title,
   Tooltip,
@@ -23,14 +22,13 @@ import {
 } from "components/Tooltips/HelpTooltip"
 import dayjs from "dayjs"
 import { FC } from "react"
-import { Line } from "react-chartjs-2"
+import { Bar } from "react-chartjs-2"
 
 ChartJS.register(
   CategoryScale,
   LinearScale,
   TimeScale,
-  PointElement,
-  LineElement,
+  BarElement,
   Title,
   Tooltip,
   Legend,
@@ -54,7 +52,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
   defaults.font.family = theme.typography.fontFamily as string
   defaults.color = theme.palette.text.secondary
 
-  const options: ChartOptions<"line"> = {
+  const options: ChartOptions<"bar"> = {
     responsive: true,
     plugins: {
       legend: {
@@ -70,7 +68,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
       },
       x: {
         ticks: {
-          stepSize: 2,
+          stepSize: daus.entries.length > 10 ? 2 : undefined,
         },
         type: "time",
         time: {
@@ -82,7 +80,7 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
   }
 
   return (
-    <Line
+    <Bar
       data-chromatic="ignore"
       data={{
         labels: labels,
@@ -90,9 +88,12 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
           {
             label: "Daily Active Users",
             data: data,
-            tension: 1 / 4,
             backgroundColor: theme.palette.secondary.dark,
             borderColor: theme.palette.secondary.dark,
+            barThickness: 8,
+            borderWidth: 2,
+            borderRadius: Number.MAX_VALUE,
+            borderSkipped: false,
           },
         ],
       }}

From 5da7425fd1052dec1c61710db4cce631beb4f4af Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 16 Aug 2023 13:26:03 +0000
Subject: [PATCH 2/2] refactor(site): use bar chart for DAUs

---
 site/src/components/DAUChart/DAUChart.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/site/src/components/DAUChart/DAUChart.tsx b/site/src/components/DAUChart/DAUChart.tsx
index fac450a9aeaca..ae93b0e086dff 100644
--- a/site/src/components/DAUChart/DAUChart.tsx
+++ b/site/src/components/DAUChart/DAUChart.tsx
@@ -58,6 +58,15 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
       legend: {
         display: false,
       },
+      tooltip: {
+        displayColors: false,
+        callbacks: {
+          title: (context) => {
+            const date = new Date(context[0].parsed.x)
+            return date.toLocaleDateString()
+          },
+        },
+      },
     },
     scales: {
       y: {