Adjust engagement chart

BrunoQuaresma · BrunoQuaresma · commit 4b7bf9f19802 · 2025-01-16T18:14:33.000Z
diff --git a/site/src/components/Link/Link.tsx b/site/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import { SquareArrowOutUpRightIcon } from "lucide-react";
 import { forwardRef } from "react";
@@ -38,7 +38,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 				ref={ref}
 				{...props}
 			>
-				{children}
+				<Slottable>{children}</Slottable>
 				<SquareArrowOutUpRightIcon aria-hidden="true" />
 			</Comp>
 		);
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -39,15 +39,7 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
 				hidden: false,
 			},
 		],
-		activeUsersCount: [
-			{ date: "1/1/2024", count: 150 },
-			{ date: "1/2/2024", count: 165 },
-			{ date: "1/3/2024", count: 180 },
-			{ date: "1/4/2024", count: 155 },
-			{ date: "1/5/2024", count: 190 },
-			{ date: "1/6/2024", count: 200 },
-			{ date: "1/7/2024", count: 210 },
-		],
+		dailyActiveUsers: MockDeploymentDAUResponse,
 		invalidExperiments: [],
 		safeExperiments: [],
 		entitlements: undefined,
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart.tsx
@@ -10,11 +10,12 @@ import {
 	CollapsibleContent,
 	CollapsibleTrigger,
 } from "components/Collapsible/Collapsible";
+import { Link } from "components/Link/Link";
 import { Spinner } from "components/Spinner/Spinner";
-import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import type { FC } from "react";
-import { Link } from "react-router-dom";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Link as RouterLink } from "react-router-dom";
 
 const chartConfig = {
 	users: {
@@ -64,8 +65,17 @@ export const UserEngagementChart: FC<UserEngagementChartProps> = ({ data }) => {
 							A user is considered "engaged" if they initiate a connection to
 							their workspace via apps, web terminal, or SSH. The graph displays
 							the daily count of unique users who engaged at least once, with
-							additional insights available through the Activity Audit and
-							License Consumption tools.
+							additional insights available through the{" "}
+							<Link size="sm" asChild>
+								<RouterLink to="/audit">Activity Audit</RouterLink>
+							</Link>{" "}
+							and{" "}
+							<Link size="sm" asChild>
+								<RouterLink to="/deployment/licenses">
+									License Consumption
+								</RouterLink>
+							</Link>{" "}
+							tools.
 						</p>
 					</CollapsibleContent>
 				</Collapsible>
@@ -83,6 +93,7 @@ export const UserEngagementChart: FC<UserEngagementChartProps> = ({ data }) => {
 									accessibilityLayer
 									data={data}
 									margin={{
+										top: 10,
 										left: 0,
 										right: 0,
 									}}
