ReportSettings.tsx59 lines · main

1	import { Settings } from 'lucide-react'
2	import { useState } from 'react'
3	import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Label, Switch } from 'ui'
4
5	import { useChartHoverState } from './useChartHoverState'
6	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7
8	interface ReportSettingsProps {
9	chartId: string
10	}
11
12	export const ReportSettings = ({ chartId }: ReportSettingsProps) => {
13	const [isOpen, setIsOpen] = useState(false)
14	const { syncHover, syncTooltip, setSyncHover, setSyncTooltip } = useChartHoverState(chartId)
15
16	return (
17	<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
18	<DropdownMenuTrigger asChild>
19	<ButtonTooltip
20	type="default"
21	icon={<Settings />}
22	className="w-7"
23	tooltip={{ content: { side: 'bottom', text: 'Report settings' } }}
24	/>
25	</DropdownMenuTrigger>
26	<DropdownMenuContent align="start" side="bottom" className="w-64 p-3">
27	<div className="space-y-4">
28	<Label htmlFor="sync-hover" className="text-sm font-normal">
29	<div className="flex items-center justify-between space-x-2">
30	Sync chart headers
31	<Switch id="sync-hover" checked={syncHover} onCheckedChange={setSyncHover} />
32	</div>
33	<p className="text-xs text-foreground-light mt-1">
34	When enabled, hovering over any chart will update headers across all charts
35	</p>
36	</Label>
37
38	<Label htmlFor="sync-tooltips" className="text-sm font-normal flex flex-col">
39	<div className="flex items-center justify-between space-x-2">
40	Sync tooltips
41	<Switch
42	id="sync-tooltips"
43	checked={syncTooltip}
44	disabled={!syncHover}
45	onCheckedChange={setSyncTooltip}
46	/>
47	</div>
48	<p className="text-xs text-foreground-light mt-1">
49	When enabled, also shows tooltips on all charts.{' '}
50	<span className={cn(syncHover ? 'text-foreground-light' : 'text-foreground')}>
51	Requires header sync.
52	</span>
53	</p>
54	</Label>
55	</div>
56	</DropdownMenuContent>
57	</DropdownMenu>
58	)
59	}