coder · BrunoQuaresma · Jan 17, 2025 · Jan 13, 2025 · Jan 14, 2025 · Jan 14, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2089,6 +2089,19 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getInsightsUserStatusCounts = async (
+		offset = Math.trunc(new Date().getTimezoneOffset() / 60),
+	): Promise<TypesGen.GetUserStatusCountsResponse> => {
+		const searchParams = new URLSearchParams({
+			tz_offset: offset.toString(),
+		});
+		const response = await this.axios.get(
+			`/api/v2/insights/user-status-counts?${searchParams}`,
+		);
+
+		return response.data;
+	};
+
 	getInsightsTemplate = async (
 		params: InsightsTemplateParams,
 	): Promise<TypesGen.TemplateInsightsResponse> => {

diff --git a/site/src/api/queries/insights.ts b/site/src/api/queries/insights.ts
@@ -1,4 +1,6 @@
 import { API, type InsightsParams, type InsightsTemplateParams } from "api/api";
+import type { GetUserStatusCountsResponse } from "api/typesGenerated";
+import { type UseQueryOptions, UseQueryResult } from "react-query";
 
 export const insightsTemplate = (params: InsightsTemplateParams) => {
 	return {
@@ -20,3 +22,15 @@ export const insightsUserActivity = (params: InsightsParams) => {
 		queryFn: () => API.getInsightsUserActivity(params),
 	};
 };
+
+export const insightsUserStatusCounts = () => {
+	return {
+		queryKey: ["insights", "userStatusCounts"],
+		queryFn: () => API.getInsightsUserStatusCounts(),
+		select: (data) => data.status_counts,
+	} satisfies UseQueryOptions<
+		GetUserStatusCountsResponse,
+		unknown,
+		GetUserStatusCountsResponse["status_counts"]
+	>;
+};
diff --git a/site/src/components/Chart/Chart.stories.tsx b/site/src/components/Chart/Chart.stories.tsx
@@ -19,7 +19,7 @@ const chartData = [
 const chartConfig = {
 	users: {
 		label: "Users",
-		color: "hsl(var(--chart-1))",
+		color: "hsl(var(--highlight-purple))",
 	},
 } satisfies ChartConfig;
 

diff --git a/site/src/components/Chart/Chart.tsx b/site/src/components/Chart/Chart.tsx
@@ -66,6 +66,8 @@ export const ChartContainer = React.forwardRef<
 					"[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
 					"[&_.recharts-sector]:outline-none",
 					"[&_.recharts-surface]:outline-none",
+					"[&_.recharts-text]:fill-content-secondary [&_.recharts-text]:font-medium",
+					"[&_.recharts-cartesian-axis-line]:stroke-[hsl(var(--border-default))]",
 					className,
 				)}
 				{...props}
@@ -195,7 +197,7 @@ export const ChartTooltipContent = React.forwardRef<
 			<div
 				ref={ref}
 				className={cn(
-					"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					"grid min-w-[8rem] items-start gap-1 rounded-lg border border-solid border-border bg-surface-primary px-3 py-2 text-xs shadow-xl",
 					className,
 				)}
 			>

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/index.css b/site/src/index.css
@@ -28,11 +28,8 @@
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 84% 60%;
 		--radius: 0.5rem;
-		--chart-1: 12 76% 61%;
-		--chart-2: 173 58% 39%;
-		--chart-3: 197 37% 24%;
-		--chart-4: 43 74% 66%;
-		--chart-5: 27 87% 67%;
+		--highlight-purple: 262 83% 58%;
+		--highlight-green: 143 64% 24%;
 		--border: 240 5.9% 90%;
 		--input: 240 5.9% 90%;
 		--ring: 240 10% 3.9%;
@@ -59,11 +56,8 @@
 		--border-default: 240 4% 16%;
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 91% 71%;
-		--chart-1: 220 70% 50%;
-		--chart-2: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-5: 340 75% 55%;
+		--highlight-purple: 252 95% 85%;
+		--highlight-green: 141 79% 85%;
 		--border: 240 3.7% 15.9%;
 		--input: 240 3.7% 15.9%;
 		--ring: 240 4.9% 83.9%;

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -11,7 +11,6 @@ import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 
 const GeneralSettingsPage: FC = () => {
 	const { deploymentConfig } = useDeploymentSettings();
-	const deploymentDAUsQuery = useQuery(deploymentDAUs());
 	const safeExperimentsQuery = useQuery(availableExperiments());
 
 	const { metadata } = useEmbeddedMetadata();
@@ -24,15 +23,16 @@ const GeneralSettingsPage: FC = () => {
 			return !safeExperiments.includes(exp);
 		}) ?? [];
 
+	const { data: dailyActiveUsers } = useQuery(deploymentDAUs());
+
 	return (
 		<>
 			<Helmet>
 				<title>{pageTitle("General Settings")}</title>
 			</Helmet>
 			<GeneralSettingsPageView
 				deploymentOptions={deploymentConfig.options}
-				deploymentDAUs={deploymentDAUsQuery.data}
-				deploymentDAUsError={deploymentDAUsQuery.error}
+				dailyActiveUsers={dailyActiveUsers}
 				entitlements={entitlementsQuery.data}
 				invalidExperiments={invalidExperiments}
 				safeExperiments={safeExperiments}

diff --git a/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -39,7 +39,7 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
 				hidden: false,
 			},
 		],
-		deploymentDAUs: MockDeploymentDAUResponse,
+		dailyActiveUsers: MockDeploymentDAUResponse,
 		invalidExperiments: [],
 		safeExperiments: [],
 		entitlements: undefined,
@@ -51,21 +51,6 @@ type Story = StoryObj<typeof GeneralSettingsPageView>;
 
 export const Page: Story = {};
 
-export const NoDAUs: Story = {
-	args: {
-		deploymentDAUs: undefined,
-	},
-};
-
-export const DAUError: Story = {
-	args: {
-		deploymentDAUs: undefined,
-		deploymentDAUsError: mockApiError({
-			message: "Error fetching DAUs.",
-		}),
-	},
-};
-
 export const allExperimentsEnabled: Story = {
 	args: {
 		deploymentOptions: [

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -6,11 +6,6 @@ import type {
 	Experiments,
 	SerpentOption,
 } from "api/typesGenerated";
-import {
-	ActiveUserChart,
-	ActiveUsersTitle,
-} from "components/ActiveUserChart/ActiveUserChart";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -19,20 +14,19 @@ import { docs } from "utils/docs";
 import { Alert } from "../../../components/Alert/Alert";
 import OptionsTable from "../OptionsTable";
 import { ChartSection } from "./ChartSection";
+import { UserEngagementChart } from "./UserEngagementChart";
 
 export type GeneralSettingsPageViewProps = {
 	deploymentOptions: SerpentOption[];
-	deploymentDAUs?: DAUsResponse;
-	deploymentDAUsError: unknown;
+	dailyActiveUsers: DAUsResponse | undefined;
 	entitlements: Entitlements | undefined;
 	readonly invalidExperiments: Experiments | string[];
 	readonly safeExperiments: Experiments | string[];
 };
 
 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 	deploymentOptions,
-	deploymentDAUs,
-	deploymentDAUsError,
+	dailyActiveUsers,
 	entitlements,
 	safeExperiments,
 	invalidExperiments,
@@ -51,16 +45,12 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 				docsHref={docs("/admin/setup")}
 			/>
 			<Stack spacing={4}>
-				{Boolean(deploymentDAUsError) && (
-					<ErrorAlert error={deploymentDAUsError} />
-				)}
-				{deploymentDAUs && (
-					<div css={{ marginBottom: 24, height: 200 }}>
-						<ChartSection title={<ActiveUsersTitle interval="day" />}>
-							<ActiveUserChart data={deploymentDAUs.entries} interval="day" />
-						</ChartSection>
-					</div>
-				)}
+				<UserEngagementChart
+					data={dailyActiveUsers?.entries.map((i) => ({
+						date: i.date,
+						users: i.amount,
+					}))}
+				/>
 				{licenseUtilizationPercentage && (
 					<ChartSection title="License Utilization">
 						<LinearProgress

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UserEngagementChart } from "./UserEngagementChart";
+
+const meta: Meta<typeof UserEngagementChart> = {
+	title: "pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart",
+	component: UserEngagementChart,
+	args: {
+		data: [
+			{ date: "1/1/2024", users: 150 },
+			{ date: "1/2/2024", users: 165 },
+			{ date: "1/3/2024", users: 180 },
+			{ date: "1/4/2024", users: 155 },
+			{ date: "1/5/2024", users: 190 },
+			{ date: "1/6/2024", users: 200 },
+			{ date: "1/7/2024", users: 210 },
+		],
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof UserEngagementChart>;
+
+export const Loaded: Story = {};
+
+export const Empty: Story = {
+	args: {
+		data: [],
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		data: undefined,
+	},
+};