Skip to content

Commit

Permalink
Better graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
@N2D4
N2D4 committed Dec 22, 2024
1 parent a6ee07d commit d944062
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 50 deletions.
4 changes: 2 additions & 2 deletions apps/backend/src/app/api/v1/internal/metrics/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ async function loadTotalUsers(projectId: string, now: Date): Promise<DataPoints>
GROUP BY ds.registration_day
ORDER BY ds.registration_day
`).map((x) => ({
date: x.date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }),
date: x.date.toISOString().split('T')[0],
activity: Number(x.dailyUsers),
}));
}
Expand Down Expand Up @@ -98,7 +98,7 @@ async function loadDailyActiveUsers(projectId: string, now: Date) {
`;

return res.map(x => ({
date: x.day.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }),
date: x.day.toISOString().split('T')[0],
activity: Number(x.dau),
}));
}
Expand Down
6 changes: 3 additions & 3 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/globe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,12 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
>
<div className='absolute top-0 right-0' style={{
width: globeSize?.[0] ?? 64,
height: globeSize?.[1] ?? 64,
height: (globeWindowSize?.height ?? 64) + 16,
}}>
{!isGlobeReady && (
<Skeleton style={{
width: Math.min(globeContainerSize?.width ?? 0, globeContainerSize?.height ?? 0) * 2 / 3,
height: Math.min(globeContainerSize?.width ?? 0, globeContainerSize?.height ?? 0) * 2 / 3,
width: Math.min(globeSize?.[0] ?? 64, (globeWindowSize?.height ?? 64) + 16) * 1.9 / 3,
height: Math.min(globeSize?.[0] ?? 64, (globeWindowSize?.height ?? 64) + 16) * 1.9 / 3,
borderRadius: '100%',
position: 'absolute',
top: '50%',
Expand Down
30 changes: 21 additions & 9 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { isWeekend } from "@stackframe/stack-shared/dist/utils/dates";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@stackframe/stack-ui";
import { Area, AreaChart, Pie, PieChart, XAxis } from "recharts";
import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";

export type LineChartDisplayConfig = {
name: string,
Expand Down Expand Up @@ -30,27 +31,37 @@ export function LineChartDisplay({
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={config.chart} className='w-full max-h-[300px] p-4'>
<AreaChart accessibilityLayer data={datapoints}>
<ChartContainer config={config.chart} className='w-full max-h-[300px] p-0 ml-[-30px]'>
<BarChart accessibilityLayer data={datapoints}>
<CartesianGrid
horizontal={true}
vertical={false}
/>
<ChartTooltip
content={<ChartTooltipContent labelKey='date'/>}
/>
<Area
<Bar
dataKey="activity"
fill="var(--color-activity)"
fillOpacity={0.4}
stroke="var(--color-activity)"
strokeWidth={2}
/>
fillOpacity={1}
isAnimationActive={false}
>{datapoints.map(x => (
<Cell key={x.date} fillOpacity={isWeekend(new Date(x.date)) ? 0.4 : 1} />
))}</Bar>

<YAxis
tickLine={false}
axisLine={false}
width={60}
/>
<XAxis
dataKey="date"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value}
/>
</AreaChart>
</BarChart>
</ChartContainer>
</CardContent>
</Card>
Expand Down Expand Up @@ -161,6 +172,7 @@ export function DonutChartDisplay({
nameKey="method"
innerRadius={60}
labelLine={false}
isAnimationActive={false}
label={(x) => `${new Map(Object.entries(BRAND_CONFIG)).get(x.method)?.label ?? x.method}: ${x.count}`}
/>
</PieChart>
Expand Down
45 changes: 20 additions & 25 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
'use client';

import { UserAvatar } from '@stackframe/stack';
import { fromNow } from '@stackframe/stack-shared/dist/utils/dates';
import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@stackframe/stack-ui';
import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableRow, Typography } from '@stackframe/stack-ui';
import { PageLayout } from "../page-layout";
import { useAdminApp } from '../use-admin-app';
import { GlobeSection } from './globe';
Expand Down Expand Up @@ -57,19 +58,16 @@ export default function PageClient() {
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Display Name</TableHead>
<TableHead>Registered at</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{
data.recently_registered.map((user: any) => <TableRow key={user.id}>
<TableCell>{user.display_name}</TableCell>
<TableCell>{fromNow(new Date(user.signed_up_at_millis))}</TableCell>
</TableRow>)
}
{data.recently_registered.map((user: any) => <TableRow key={user.id}>
<TableCell><UserAvatar user={{ profileImageUrl: user.profile_image_url, displayName: user.display_name, primaryEmail: user.primary_email }} /></TableCell>
<TableCell>
{user.display_name ?? user.primary_email}
<Typography variant='secondary'>
signed up {fromNow(new Date(user.signed_up_at_millis))}
</Typography>
</TableCell>
</TableRow>)}
</TableBody>
</Table>
</CardContent>
Expand All @@ -80,19 +78,16 @@ export default function PageClient() {
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Display Name</TableHead>
<TableHead>Last Active at</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{
data.recently_active.map((user: any) => <TableRow key={user.id}>
<TableCell>{user.display_name}</TableCell>
<TableCell>{fromNow(new Date(user.last_active_at_millis))}</TableCell>
</TableRow>)
}
{data.recently_active.map((user: any) => <TableRow key={user.id}>
<TableCell><UserAvatar user={{ profileImageUrl: user.profile_image_url, displayName: user.display_name, primaryEmail: user.primary_email }} /></TableCell>
<TableCell>
{user.display_name ?? user.primary_email}
<Typography variant='secondary'>
last active {fromNow(new Date(user.last_active_at_millis))}
</Typography>
</TableCell>
</TableRow>)}
</TableBody>
</Table>
</CardContent>
Expand Down
4 changes: 4 additions & 0 deletions packages/stack-shared/src/utils/dates.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { remainder } from "./math";

export function isWeekend(date: Date): boolean {
return date.getDay() === 0 || date.getDay() === 6;
}

const agoUnits = [
[60, 'second'],
[60, 'minute'],
Expand Down
24 changes: 13 additions & 11 deletions packages/stack/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
export { default as StackProvider } from "./providers/stack-provider";
export { useUser, useStackApp } from "./lib/hooks";
export { default as StackHandler } from "./components-page/stack-handler";
export { StackTheme } from './providers/theme-provider';
export { useStackApp, useUser } from "./lib/hooks";
export * from './lib/stack-app';
export { default as StackProvider } from "./providers/stack-provider";
export { StackTheme } from './providers/theme-provider';

export { SignIn } from "./components-page/sign-in";
export { SignUp } from "./components-page/sign-up";
export { EmailVerification } from "./components-page/email-verification";
export { PasswordReset } from "./components-page/password-reset";
export { ForgotPassword } from "./components-page/forgot-password";
export { MessageCard } from "./components/message-cards/message-card";
export { UserButton } from "./components/user-button";
export { AccountSettings } from "./components-page/account-settings";
export { AuthPage } from "./components-page/auth-page";
export { EmailVerification } from "./components-page/email-verification";
export { ForgotPassword } from "./components-page/forgot-password";
export { PasswordReset } from "./components-page/password-reset";
export { SignIn } from "./components-page/sign-in";
export { SignUp } from "./components-page/sign-up";
export { CredentialSignIn as CredentialSignIn } from "./components/credential-sign-in";
export { CredentialSignUp as CredentialSignUp } from "./components/credential-sign-up";
export { UserAvatar } from "./components/elements/user-avatar";
export { MagicLinkSignIn as MagicLinkSignIn } from "./components/magic-link-sign-in";
export { MessageCard } from "./components/message-cards/message-card";
export { OAuthButton } from "./components/oauth-button";
export { OAuthButtonGroup } from "./components/oauth-button-group";
export { UserButton } from "./components/user-button";

export {
SelectedTeamSwitcher,
SelectedTeamSwitcher
} from "./components/selected-team-switcher";

0 comments on commit d944062

Please sign in to comment.