Skip to content

feat: improve metrics and UI for user engagement on the platform #16134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Jan 17, 2025
Merged

feat: improve metrics and UI for user engagement on the platform #16134

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
899e88f
WIP: Setup base users count chart
BrunoQuaresma Jan 13, 2025
3d652ee
Merge branch 'main' of https://github.com/coder/coder into bq/user-eg…
BrunoQuaresma Jan 14, 2025
034c359
Implement User Engagement component
BrunoQuaresma Jan 14, 2025
8eba4d4
Integrate chart with API data
BrunoQuaresma Jan 14, 2025
2238590
Run lint and format
BrunoQuaresma Jan 14, 2025
8373732
Update story to show active data
BrunoQuaresma Jan 14, 2025
dc0261f
Merge branch 'main' of https://github.com/coder/coder into bq/user-eg…
BrunoQuaresma Jan 15, 2025
090230d
Adjust a few design topics from Chrsitin
BrunoQuaresma Jan 15, 2025
c454eba
Use DAU for user engagement chart
BrunoQuaresma Jan 16, 2025
e2cf922
Merge branch 'main' of https://github.com/coder/coder into bq/user-eg…
BrunoQuaresma Jan 16, 2025
4b7bf9f
Adjust engagement chart
BrunoQuaresma Jan 16, 2025
e036f94
Add license consumption chart
BrunoQuaresma Jan 16, 2025
372649b
Add storybook for license chart
BrunoQuaresma Jan 16, 2025
a88da96
Remove text-ms
BrunoQuaresma Jan 16, 2025
39ee475
Run make fmt
BrunoQuaresma Jan 16, 2025
11ce947
Adjust charts
BrunoQuaresma Jan 17, 2025
c2e7b95
Fix format
BrunoQuaresma Jan 17, 2025
f38361e
Fix stories
BrunoQuaresma Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Adjust engagement chart
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jan 16, 2025
commit 4b7bf9f198029ef4bbceef5bb6b58bf40518d13c
4 changes: 2 additions & 2 deletions site/src/components/Link/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -38,7 +38,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
ref={ref}
{...props}
>
{children}
<Slottable>{children}</Slottable>
<SquareArrowOutUpRightIcon aria-hidden="true" />
</Comp>
);
Expand Down
10 changes: 1 addition & 9 deletions .../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
19 changes: 15 additions & 4 deletions site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/UserEngagementChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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>
Expand All @@ -83,6 +93,7 @@ export const UserEngagementChart: FC<UserEngagementChartProps> = ({ data }) => {
accessibilityLayer
data={data}
margin={{
top: 10,
left: 0,
right: 0,
}}
Expand Down