Egress.tsx60 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 EgressProps {
8	orgSlug: string
9	projectRef: string | null
10	subscription: OrgSubscription | undefined
11	currentBillingCycleSelected: boolean
12	orgDailyStats: OrgDailyUsageResponse | undefined
13	isLoadingOrgDailyStats: boolean
14	startDate: string | undefined
15	endDate: string | undefined
16	}
17
18	const Egress = ({
19	orgSlug,
20	projectRef,
21	subscription,
22	currentBillingCycleSelected,
23	orgDailyStats,
24	isLoadingOrgDailyStats,
25	startDate,
26	endDate,
27	}: EgressProps) => {
28	const chartMeta: {
29	[key: string]: { data: DataPoint[]; margin: number; isLoading: boolean }
30	} = {
31	[PricingMetric.EGRESS]: {
32	data: dailyUsageToDataPoints(orgDailyStats, (metric) => metric === PricingMetric.EGRESS),
33	margin: 16,
34	isLoading: isLoadingOrgDailyStats,
35	},
36	[PricingMetric.CACHED_EGRESS]: {
37	data: dailyUsageToDataPoints(
38	orgDailyStats,
39	(metric) => metric === PricingMetric.CACHED_EGRESS
40	),
41	margin: 16,
42	isLoading: isLoadingOrgDailyStats,
43	},
44	}
45
46	return (
47	<UsageSection
48	orgSlug={orgSlug}
49	projectRef={projectRef}
50	categoryKey="egress"
51	chartMeta={chartMeta}
52	subscription={subscription}
53	currentBillingCycleSelected={currentBillingCycleSelected}
54	startDate={startDate}
55	endDate={endDate}
56	/>
57	)
58	}
59
60	export default Egress