Activity.tsx91 lines · main

1	import { dailyUsageToDataPoints } from './Usage.utils'
2	import UsageSection from './UsageSection/UsageSection'
3	import { DataPoint } from '@/data/analytics/constants'
4	import { PricingMetric, type OrgDailyUsageResponse } from '@/data/analytics/org-daily-stats-query'
5	import type { OrgSubscription } from '@/data/subscriptions/types'
6
7	export interface ActivityProps {
8	orgSlug: string
9	projectRef?: string | null
10	startDate: string | undefined
11	endDate: string | undefined
12	subscription: OrgSubscription | undefined
13	currentBillingCycleSelected: boolean
14	orgDailyStats: OrgDailyUsageResponse | undefined
15	isLoadingOrgDailyStats: boolean
16	}
17
18	const Activity = ({
19	orgSlug,
20	projectRef,
21	subscription,
22	currentBillingCycleSelected,
23	orgDailyStats,
24	isLoadingOrgDailyStats,
25	}: ActivityProps) => {
26	const chartMeta: {
27	[key: string]: { data: DataPoint[]; margin: number; isLoading: boolean }
28	} = {
29	[PricingMetric.MONTHLY_ACTIVE_USERS]: {
30	data: dailyUsageToDataPoints(
31	orgDailyStats,
32	(metric) => metric === PricingMetric.MONTHLY_ACTIVE_USERS
33	),
34	margin: 18,
35	isLoading: isLoadingOrgDailyStats,
36	},
37	[PricingMetric.MONTHLY_ACTIVE_SSO_USERS]: {
38	data: dailyUsageToDataPoints(
39	orgDailyStats,
40	(metric) => metric === PricingMetric.MONTHLY_ACTIVE_SSO_USERS
41	),
42	margin: 20,
43	isLoading: isLoadingOrgDailyStats,
44	},
45	[PricingMetric.STORAGE_IMAGES_TRANSFORMED]: {
46	data: dailyUsageToDataPoints(
47	orgDailyStats,
48	(metric) => metric === PricingMetric.STORAGE_IMAGES_TRANSFORMED
49	),
50	margin: 0,
51	isLoading: isLoadingOrgDailyStats,
52	},
53	[PricingMetric.FUNCTION_INVOCATIONS]: {
54	data: dailyUsageToDataPoints(
55	orgDailyStats,
56	(metric) => metric === PricingMetric.FUNCTION_INVOCATIONS
57	),
58	margin: 26,
59	isLoading: isLoadingOrgDailyStats,
60	},
61	[PricingMetric.REALTIME_MESSAGE_COUNT]: {
62	data: dailyUsageToDataPoints(
63	orgDailyStats,
64	(metric) => metric === PricingMetric.REALTIME_MESSAGE_COUNT
65	),
66	margin: 38,
67	isLoading: isLoadingOrgDailyStats,
68	},
69	[PricingMetric.REALTIME_PEAK_CONNECTIONS]: {
70	data: dailyUsageToDataPoints(
71	orgDailyStats,
72	(metric) => metric === PricingMetric.REALTIME_PEAK_CONNECTIONS
73	),
74	margin: 0,
75	isLoading: isLoadingOrgDailyStats,
76	},
77	}
78
79	return (
80	<UsageSection
81	orgSlug={orgSlug}
82	projectRef={projectRef}
83	categoryKey="activity"
84	chartMeta={chartMeta}
85	subscription={subscription}
86	currentBillingCycleSelected={currentBillingCycleSelected}
87	/>
88	)
89	}
90
91	export default Activity