SizeAndCounts.tsx63 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 SizeAndCountsProps {
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 SizeAndCounts = ({
19	orgSlug,
20	projectRef,
21	subscription,
22	currentBillingCycleSelected,
23	orgDailyStats,
24	isLoadingOrgDailyStats,
25	startDate,
26	endDate,
27	}: SizeAndCountsProps) => {
28	const chartMeta: {
29	[key: string]: { data: DataPoint[]; margin: number; isLoading: boolean }
30	} = {
31	[PricingMetric.STORAGE_SIZE]: {
32	isLoading: isLoadingOrgDailyStats,
33	margin: 14,
34	data: dailyUsageToDataPoints(
35	orgDailyStats,
36	(metric) => metric === PricingMetric.STORAGE_SIZE
37	),
38	},
39	[PricingMetric.DATABASE_SIZE]: {
40	isLoading: isLoadingOrgDailyStats,
41	margin: 14,
42	data: dailyUsageToDataPoints(
43	orgDailyStats,
44	(metric) => metric === PricingMetric.DATABASE_SIZE
45	),
46	},
47	}
48
49	return (
50	<UsageSection
51	orgSlug={orgSlug}
52	projectRef={projectRef}
53	categoryKey="sizeCount"
54	chartMeta={chartMeta}
55	subscription={subscription}
56	currentBillingCycleSelected={currentBillingCycleSelected}
57	startDate={startDate}
58	endDate={endDate}
59	/>
60	)
61	}
62
63	export default SizeAndCounts