NoDataPlaceholder.tsx60 lines · main

1	import { BarChart2 } from 'lucide-react'
2	import { cn } from 'ui'
3
4	import { ChartHeader } from './ChartHeader'
5	import { useChartSize } from './Charts.utils'
6
7	interface NoDataPlaceholderProps {
8	title?: string
9	attribute?: string
10	format?: string | ((value: unknown) => string)
11	message?: string
12	description?: string
13	className?: string
14	size: Parameters<typeof useChartSize>[0]
15	isFullHeight?: boolean
16	titleTooltip?: string
17	hideTotalPlaceholder?: boolean
18	}
19	const NoDataPlaceholder = ({
20	attribute,
21	message = 'No data to show',
22	description,
23	format,
24	className = '',
25	size,
26	isFullHeight = false,
27	titleTooltip,
28	hideTotalPlaceholder = false,
29	}: NoDataPlaceholderProps) => {
30	const { minHeight } = useChartSize(size)
31
32	return (
33	<div className={cn(isFullHeight && 'h-full')}>
34	{attribute !== undefined && (
35	<ChartHeader
36	title={attribute}
37	format={format}
38	highlightedValue={hideTotalPlaceholder ? undefined : 0}
39	titleTooltip={titleTooltip}
40	/>
41	)}
42	<div
43	className={cn(
44	'border-control flex grow w-full flex-col items-center justify-center space-y-2 border border-dashed text-center',
45	isFullHeight && 'h-full',
46	className
47	)}
48	// extra 20 px for the x ticks
49	style={{ minHeight: minHeight + 20 }}
50	>
51	<BarChart2 size={20} className="text-border-stronger" />
52	<div className="px-1">
53	<p className="text-foreground-light text-xs">{message}</p>
54	{description && <p className="text-foreground-lighter text-xs">{description}</p>}
55	</div>
56	</div>
57	</div>
58	)
59	}
60	export default NoDataPlaceholder