Skip to content

Commit 899e88f

Browse files
BrunoQuaresmaBrunoQuaresma
committed
WIP: Setup base users count chart
1 parent 24dd8a1 commit 899e88f

File tree

4 files changed

+162
-0
lines changed

4 files changed

+162
-0
lines changed

‎site/src/api/api.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2089,6 +2089,19 @@ class ApiMethods {
20892089
return response.data;
20902090
};
20912091

2092+
getInsightsUserStatusCounts = async (
2093+
offset = Math.trunc(new Date().getTimezoneOffset() / 60),
2094+
): Promise<TypesGen.GetUserStatusCountsResponse> => {
2095+
const searchParams = new URLSearchParams({
2096+
tz_offset: offset.toString(),
2097+
});
2098+
const response = await this.axios.get(
2099+
`/api/v2/insights/user-status-counts?${searchParams}`,
2100+
);
2101+
2102+
return response.data;
2103+
};
2104+
20922105
getInsightsTemplate = async (
20932106
params: InsightsTemplateParams,
20942107
): Promise<TypesGen.TemplateInsightsResponse> => {

‎site/src/api/queries/insights.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,10 @@ export const insightsUserActivity = (params: InsightsParams) => {
2020
queryFn: () => API.getInsightsUserActivity(params),
2121
};
2222
};
23+
24+
export const insightsUserStatusCounts = () => {
25+
return {
26+
queryKey: ["insights", "userStatusCounts"],
27+
queryFn: () => API.getInsightsUserStatusCounts(),
28+
};
29+
};

‎site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.stories.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { UsersCountChart } from "./UsersCountChart";
3+
4+
const meta: Meta<typeof UsersCountChart> = {
5+
title: "pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart",
6+
component: UsersCountChart,
7+
args: {
8+
active: [
9+
{ date: "1/1/2024", amount: 150 },
10+
{ date: "1/2/2024", amount: 165 },
11+
{ date: "1/3/2024", amount: 180 },
12+
{ date: "1/4/2024", amount: 155 },
13+
{ date: "1/5/2024", amount: 190 },
14+
{ date: "1/6/2024", amount: 200 },
15+
{ date: "1/7/2024", amount: 210 },
16+
],
17+
dormant: [
18+
{ date: "1/1/2024", amount: 80 },
19+
{ date: "1/2/2024", amount: 82 },
20+
{ date: "1/3/2024", amount: 85 },
21+
{ date: "1/4/2024", amount: 88 },
22+
{ date: "1/5/2024", amount: 90 },
23+
{ date: "1/6/2024", amount: 92 },
24+
{ date: "1/7/2024", amount: 95 },
25+
],
26+
suspended: [
27+
{ date: "1/1/2024", amount: 20 },
28+
{ date: "1/2/2024", amount: 22 },
29+
{ date: "1/3/2024", amount: 25 },
30+
{ date: "1/4/2024", amount: 23 },
31+
{ date: "1/5/2024", amount: 28 },
32+
{ date: "1/6/2024", amount: 30 },
33+
{ date: "1/7/2024", amount: 32 },
34+
],
35+
},
36+
};
37+
38+
export default meta;
39+
type Story = StoryObj<typeof UsersCountChart>;
40+
41+
export const Default: Story = {};

‎site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UsersCountChart.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import {
2+
Collapsible,
3+
CollapsibleContent,
4+
CollapsibleTrigger,
5+
} from "components/Collapsible/Collapsible";
6+
import type { FC } from "react";
7+
8+
const chartConfig = {
9+
desktop: {
10+
label: "Desktop",
11+
color: "hsl(var(--chart-1))",
12+
},
13+
mobile: {
14+
label: "Mobile",
15+
color: "hsl(var(--chart-2))",
16+
},
17+
} satisfies ChartConfig;
18+
19+
type Data = {
20+
date: string;
21+
amount: number;
22+
};
23+
24+
export type UsersCountChartProps = {
25+
active: Data[];
26+
dormant: Data[];
27+
suspended: Data[];
28+
};
29+
30+
export const UsersCountChart: FC<UsersCountChartProps> = () => {
31+
return (
32+
<div className="border border-solid rounded-sm">
33+
<div className="p-4">
34+
<Collapsible>
35+
<h3>User Engagement</h3>
36+
<CollapsibleTrigger asChild>
37+
<button type="button">How we calculate engaged users</button>
38+
</CollapsibleTrigger>
39+
<CollapsibleContent className="px-5">
40+
<p>
41+
We consider a user “engaged” if they initiate a connection to
42+
their workspace. The connection can be made through apps, web
43+
terminal or SSH.
44+
</p>
45+
<p>
46+
The graph shows the number of unique users who were engaged at
47+
least once during the day.
48+
</p>
49+
<p>You might also check:</p>
50+
<ul>
51+
<li>Activity Audit</li>
52+
<li>License Consumption</li>
53+
</ul>
54+
</CollapsibleContent>
55+
</Collapsible>
56+
</div>
57+
58+
<div className="p-6">
59+
<ChartContainer config={chartConfig}>
60+
<AreaChart
61+
accessibilityLayer
62+
data={chartData}
63+
margin={{
64+
left: 12,
65+
right: 12,
66+
}}
67+
>
68+
<CartesianGrid vertical={false} />
69+
<XAxis
70+
dataKey="month"
71+
tickLine={false}
72+
axisLine={false}
73+
tickMargin={8}
74+
tickFormatter={(value) => value.slice(0, 3)}
75+
/>
76+
<ChartTooltip
77+
cursor={false}
78+
content={<ChartTooltipContent indicator="dot" />}
79+
/>
80+
<Area
81+
dataKey="mobile"
82+
type="natural"
83+
fill="var(--color-mobile)"
84+
fillOpacity={0.4}
85+
stroke="var(--color-mobile)"
86+
stackId="a"
87+
/>
88+
<Area
89+
dataKey="desktop"
90+
type="natural"
91+
fill="var(--color-desktop)"
92+
fillOpacity={0.4}
93+
stroke="var(--color-desktop)"
94+
stackId="a"
95+
/>
96+
</AreaChart>
97+
</ChartContainer>
98+
</div>
99+
</div>
100+
);
101+
};

0 commit comments

Comments
 (0)