10000 feat: improve metrics and UI for user engagement on the platform by BrunoQuaresma · Pull Request #16134 · coder/coder · GitHub
[go: up one dir, main page]
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
Use DAU for user engagement chart
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jan 16, 2025
commit c454ebad8864d4abe08abfe09f430af1ab9eb4bb
46 changes: 2 additions & 44 deletions site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { deploymentDAUs } from "api/queries/deployment";
import { entitlements } from "api/queries/entitlements";
import { availableExperiments, experiments } from "api/queries/experiments";
import { insightsUserStatusCounts } from "api/queries/insights";
import type { UserStatusChangeCount } from "api/typesGenerated";
import { eachDayOfInterval, isSameDay } from "date-fns";
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { useDeploymentSettings } from "modules/management/DeploymentSettingsProvider";
import type { FC } from "react";
Expand All @@ -26,7 +23,7 @@ const GeneralSettingsPage: FC = () => {
return !safeExperiments.includes(exp);
}) ?? [];

const { data: userStatusCount } = useQuery(insightsUserStatusCounts());
const { data: dailyActiveUsers } = useQuery(deploymentDAUs());

return (
<>
Expand All @@ -35,7 +32,7 @@ const GeneralSettingsPage: FC = () => {
</Helmet>
<GeneralSettingsPageView
deploymentOptions={deploymentConfig.options}
activeUsersCount={normalizeStatusCount(userStatusCount?.active)}
dailyActiveUsers={dailyActiveUsers}
entitlements={entitlementsQuery.data}
invalidExperiments={invalidExperiments}
safeExperiments={safeExperiments}
Expand All @@ -44,43 +41,4 @@ const GeneralSettingsPage: FC = () => {
);
};

// TODO: Remove this function once the API returns values sorted by date and
// includes all dates within the specified range. The
// `/api/v2/insights/user-status-counts` endpoint does not return the
// `UserStatusChangeCount[]` items sorted by date, nor does it backfill missing
// dates within the specified range.
function normalizeStatusCount(
statusCount: UserStatusChangeCount[] | undefined,
) {
if (!statusCount) {
return undefined;
}

const sortedCounts = statusCount.toSorted((a, b) => {
return new Date(a.date).getTime() - new Date(b.date).getTime();
});

const dates = eachDayOfInterval({
start: new Date(sortedCounts[0].date),
end: new Date(sortedCounts[sortedCounts.length - 1].date),
});

const backFilledCounts: UserStatusChangeCount[] = [];
dates.forEach((date, i) => {
const existingCount = sortedCounts.find((c) =>
isSameDay(date, new Date(c.date)),
);
if (existingCount) {
backFilledCounts.push(existingCount);
} else {
backFilledCounts.push({
date: date.toISOString(),
count: backFilledCounts[i - 1].count,
});
}
});

return backFilledCounts;
}

export default GeneralSettingsPage;
11 changes: 5 additions & 6 deletions site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import AlertTitle from "@mui/material/AlertTitle";
import LinearProgress from "@mui/material/LinearProgress";
import type {
DAUsResponse,
Entitlements,
Experiments,
SerpentOption,
UserStatusChangeCount,
} from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
import { Stack } from "components/Stack/Stack";
import type { FC } from "react";
Expand All @@ -19,15 +18,15 @@ import { UserEngagementChart } from "./UserEngagementChart";

export type GeneralSettingsPageViewProps = {
deploymentOptions: SerpentOption[];
activeUsersCount: UserStatusChangeCount[] | undefined;
dailyActiveUsers: DAUsResponse | undefined;
entitlements: Entitlements | undefined;
readonly invalidExperiments: Experiments | string[];
readonly safeExperiments: Experiments | string[];
};

export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
deploymentOptions,
activeUsersCount,
dailyActiveUsers,
entitlements,
safeExperiments,
invalidExperiments,
Expand All @@ -47,9 +46,9 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
/>
<Stack spacing={4}>
<UserEngagementChart
data={activeUsersCount?.map((i) => ({
data={dailyActiveUsers?.entries.map((i) => ({
date: i.date,
users: i.count,
users: i.amount,
}))}
/>
{licenseUtilizationPercentage && (
Expand Down
0