diff --git a/site/package.json b/site/package.json index 4ff8d296a7fd5..b9a64a579e834 100644 --- a/site/package.json +++ b/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", diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx index 6e98a23734b67..6b20d52917dba 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx @@ -11,7 +11,7 @@ export interface WorkspaceSectionProps { */ action?: React.ReactNode contentsProps?: HTMLProps - title?: string + title?: string | JSX.Element } export const WorkspaceSection: React.FC> = ({ diff --git a/site/src/pages/TemplatePage/DAUChart.tsx b/site/src/pages/TemplatePage/DAUChart.tsx index 5e12717b75d79..b418378dbecf7 100644 --- a/site/src/pages/TemplatePage/DAUChart.tsx +++ b/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 = ({ templateDAUs: templateMetricsData }, x: { ticks: {}, + type: "time", + time: { + unit: "day", + stepSize: 2, + }, }, }, aspectRatio: 10 / 1, @@ -88,16 +94,19 @@ export const DAUChart: FC = ({ templateDAUs: templateMetricsData return ( <> - - -

{Language.chartTitle}

- - How do we calculate DAUs? - - We use all workspace connection traffic to calculate DAUs. - - -
+ + {Language.chartTitle} + + How do we calculate DAUs? + + We use all workspace connection traffic to calculate DAUs. + + + + } + >