feat: improve metrics and UI for user engagement on the platform #16134
Implement User Engagement component
- Loading branch information
commit 034c35919abb76dff557ad5d20fbae87321bf8d1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| 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 Default: Story = {}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import { Button } from "components/Button/Button"; | ||
| import { | ||
| ChartContainer, | ||
| ChartTooltip, | ||
| ChartTooltipContent, | ||
| type ChartConfig, | ||
| } from "components/Chart/Chart"; | ||
| import { | ||
| Collapsible, | ||
| CollapsibleContent, | ||
| CollapsibleTrigger, | ||
| } from "components/Collapsible/Collapsible"; | ||
| import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react"; | ||
| import type { FC } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
| import { CartesianGrid, XAxis, Area, AreaChart, YAxis } from "recharts"; | ||
|
|
||
| const chartConfig = { | ||
| users: { | ||
| label: "Users", | ||
| color: "hsl(var(--chart-1))", | ||
| }, | ||
| } satisfies ChartConfig; | ||
|
|
||
| export type UserEngagementChartProps = { | ||
| data: { | ||
| date: string; | ||
| users: number; | ||
| }[]; | ||
| }; | ||
|
|
||
| export const UserEngagementChart: FC<UserEngagementChartProps> = ({ data }) => { | ||
| return ( | ||
| <section className="border border-solid rounded"> | ||
| <div className="p-4"> | ||
| <Collapsible> | ||
| <header className="flex flex-col gap-2 items-start"> | ||
| <h3 className="text-md m-0 font-medium">User Engagement</h3> | ||
|
|
||
| <CollapsibleTrigger asChild> | ||
| <Button className="h-auto p-0 border-0 bg-transparent font-medium text-content-secondary hover:bg-transparent hover:text-content-primary"> | ||
| <ChevronDownIcon /> | ||
| How we calculate engaged users | ||
| </Button> | ||
| </CollapsibleTrigger> | ||
| </header> | ||
|
|
||
| <CollapsibleContent className="pt-2 pl-7 pr-5 space-y-4 [&_p]:m-0 [&_p]:text-sm [&_p]:text-content-secondary font-medium"> | ||
| <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> | ||
| <div> | ||
| <p>You might also check:</p> | ||
| <ul className="list-none p-0 m-0 [&_a]:text-sm [&_a]:font-medium [&_a]:text-content-link [&_a]:no-underline [&_a]:flex [&_a]:items-center [&_a]:gap-0.5 [&_svg]:p-[2px]"> | ||
| <li> | ||
| <Link to="/audit"> | ||
| Activity Audit | ||
| <ExternalLinkIcon className="size-icon-sm" /> | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to="/deployment/licenses"> | ||
| License Consumption | ||
| <ExternalLinkIcon className="size-icon-sm" /> | ||
| </Link> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </CollapsibleContent> | ||
| </Collapsible> | ||
| </div> | ||
|
|
||
| <div className="p-6 border-0 border-t border-solid"> | ||
| <ChartContainer config={chartConfig} className="aspect-auto h-64"> | ||
| <AreaChart | ||
| accessibilityLayer | ||
| data={data} | ||
| margin={{ | ||
| left: 0, | ||
| right: 0, | ||
| }} | ||
| > | ||
| <CartesianGrid vertical={false} /> | ||
| <XAxis | ||
| dataKey="date" | ||
| tickLine={false} | ||
| tickMargin={12} | ||
| tickFormatter={(value: string) => | ||
| new Date(value).toLocaleDateString(undefined, { | ||
| month: "short", | ||
| day: "numeric", | ||
| }) | ||
| } | ||
| /> | ||
| <YAxis | ||
| dataKey="users" | ||
| tickLine={false} | ||
| axisLine={false} | ||
| tickMargin={12} | ||
| tickFormatter={(value: number) => { | ||
| return value === 0 ? "" : value.toLocaleString(); | ||
| }} | ||
| /> | ||
| <ChartTooltip | ||
| cursor={false} | ||
| content={ | ||
| <ChartTooltipContent | ||
| className="font-medium text-content-secondary" | ||
| labelClassName="text-content-primary" | ||
| labelFormatter={(_, p) => { | ||
| const item = p[0]; | ||
| return `${item.value} users`; | ||
| }} | ||
| formatter={(v, n, item) => { | ||
| const date = new Date(item.payload.date); | ||
| return date.toLocaleString(undefined, { | ||
| month: "long", | ||
| day: "2-digit", | ||
| }); | ||
| }} | ||
| /> | ||
| } | ||
| /> | ||
| <defs> | ||
| <linearGradient id="fillUsers" x1="0" y1="0" x2="0" y2="1"> | ||
| <stop | ||
| offset="5%" | ||
| stopColor="var(--color-users)" | ||
| stopOpacity={0.8} | ||
| /> | ||
| <stop | ||
| offset="95%" | ||
| stopColor="var(--color-users)" | ||
| stopOpacity={0.1} | ||
| /> | ||
| </linearGradient> | ||
| </defs> | ||
|
|
||
| <Area | ||
| dataKey="users" | ||
| type="natural" | ||
| fill="url(#fillUsers)" | ||
| fillOpacity={0.4} | ||
| stroke="var(--color-users)" | ||
| stackId="a" | ||
| /> | ||
| </AreaChart> | ||
| </ChartContainer> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
text-base covers the size ["1rem", "1.5rem"] so there shouldn't be a need to explicitly set md, see https://tailwindcss.com/docs/font-size#setting-the-line-height