WIP: Setup base users count chart

coder · BrunoQuaresma · Jan 17, 2025 · Jan 13, 2025 · Jan 14, 2025 · Jan 14, 2025
commit 899e88f3d7b15981803dc99e4523e8d15a76bc2e
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
@@ -20,3 +20,10 @@ export const insightsUserActivity = (params: InsightsParams) => {
 		queryFn: () => API.getInsightsUserActivity(params),
 	};
 };
+
+export const insightsUserStatusCounts = () => {
+	return {
+		queryKey: ["insights", "userStatusCounts"],
+		queryFn: () => API.getInsightsUserStatusCounts(),
+	};
+};
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UsersCountChart } from "./UsersCountChart";
+
+const meta: Meta<typeof UsersCountChart> = {
+	title: "pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart",
+	component: UsersCountChart,
+	args: {
+		active: [
+			{ date: "1/1/2024", amount: 150 },
+			{ date: "1/2/2024", amount: 165 },
+			{ date: "1/3/2024", amount: 180 },
+			{ date: "1/4/2024", amount: 155 },
+			{ date: "1/5/2024", amount: 190 },
+			{ date: "1/6/2024", amount: 200 },
+			{ date: "1/7/2024", amount: 210 },
+		],
+		dormant: [
+			{ date: "1/1/2024", amount: 80 },
+			{ date: "1/2/2024", amount: 82 },
+			{ date: "1/3/2024", amount: 85 },
+			{ date: "1/4/2024", amount: 88 },
+			{ date: "1/5/2024", amount: 90 },
+			{ date: "1/6/2024", amount: 92 },
+			{ date: "1/7/2024", amount: 95 },
+		],
+		suspended: [
+			{ date: "1/1/2024", amount: 20 },
+			{ date: "1/2/2024", amount: 22 },
+			{ date: "1/3/2024", amount: 25 },
+			{ date: "1/4/2024", amount: 23 },
+			{ date: "1/5/2024", amount: 28 },
+			{ date: "1/6/2024", amount: 30 },
+			{ date: "1/7/2024", amount: 32 },
+		],
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof UsersCountChart>;
+
+export const Default: Story = {};
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.tsx
@@ -0,0 +1,101 @@
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "components/Collapsible/Collapsible";
+import type { FC } from "react";
+
+const chartConfig = {
+	desktop: {
+		label: "Desktop",
+		color: "hsl(var(--chart-1))",
+	},
+	mobile: {
+		label: "Mobile",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
+type Data = {
+	date: string;
+	amount: number;
+};
+
+export type UsersCountChartProps = {
+	active: Data[];
+	dormant: Data[];
+	suspended: Data[];
+};
+
+export const UsersCountChart: FC<UsersCountChartProps> = () => {
+	return (
+		<div className="border border-solid rounded-sm">
+			<div className="p-4">
+				<Collapsible>
+					<h3>User Engagement</h3>
+					<CollapsibleTrigger asChild>
+						<button type="button">How we calculate engaged users</button>
+					</CollapsibleTrigger>
+					<CollapsibleContent className="px-5">
+						<p>
+							We consider a user “engaged” if they initiate a connection to
+							their workspace. The connection can be made through apps, web
+							terminal or SSH.
+						</p>
+						<p>
+							The graph shows the number of unique users who were engaged at
+							least once during the day.
+						</p>
+						<p>You might also check:</p>
+						<ul>
+							<li>Activity Audit</li>
+							<li>License Consumption</li>
+						</ul>
+					</CollapsibleContent>
+				</Collapsible>
+			</div>
+
+			<div className="p-6">
+				<ChartContainer config={chartConfig}>
+					<AreaChart
+						accessibilityLayer
+						data={chartData}
+						margin={{
+							left: 12,
+							right: 12,
+						}}
+					>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="month"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							tickFormatter={(value) => value.slice(0, 3)}
+						/>
+						<ChartTooltip
+							cursor={false}
+							content={<ChartTooltipContent indicator="dot" />}
+						/>
+						<Area
+							dataKey="mobile"
+							type="natural"
+							fill="var(--color-mobile)"
+							fillOpacity={0.4}
+							stroke="var(--color-mobile)"
+							stackId="a"
+						/>
+						<Area
+							dataKey="desktop"
+							type="natural"
+							fill="var(--color-desktop)"
+							fillOpacity={0.4}
+							stroke="var(--color-desktop)"
+							stackId="a"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</div>
+		</div>
+	);
+};