konnosDashboard
BlockViewConfiguration.tsx144 lines · main
1import { BarChart2, Settings2, Table } from 'lucide-react'
2import {
3 Checkbox,
4 Label,
5 Popover,
6 PopoverContent,
7 PopoverTrigger,
8 Select,
9 SelectContent,
10 SelectGroup,
11 SelectItem,
12 SelectTrigger,
13 ToggleGroup,
14 ToggleGroupItem,
15} from 'ui'
16
17import { ButtonTooltip } from '../ButtonTooltip'
18import { ChartConfig } from '@/components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
19
20interface BlockViewConfigurationProps {
21 columns: string[]
22 view: 'chart' | 'table'
23 isChart: boolean
24 lockColumns?: boolean
25 chartConfig?: ChartConfig
26 changeView: (value: 'chart' | 'table') => void
27 updateChartConfig: (config: ChartConfig) => void
28}
29
30export const BlockViewConfiguration = ({
31 columns,
32 view,
33 isChart,
34 lockColumns = false,
35 chartConfig,
36 changeView,
37 updateChartConfig,
38}: BlockViewConfigurationProps) => {
39 return (
40 <Popover modal={false}>
41 <PopoverTrigger asChild>
42 <ButtonTooltip
43 id="help-popover-button"
44 type="text"
45 className="px-1"
46 icon={<Settings2 size={14} strokeWidth={1.5} />}
47 tooltip={{ content: { side: 'bottom', text: 'View data' } }}
48 />
49 </PopoverTrigger>
50 <PopoverContent side="bottom" align="center" className="w-[240px] p-3">
51 <form className="grid gap-2">
52 <ToggleGroup
53 type="single"
54 value={view}
55 className="w-full"
56 onValueChange={(view: 'chart' | 'table') => {
57 if (view) changeView(view)
58 }}
59 >
60 <ToggleGroupItem className="w-full" value="table" aria-label="Show as table">
61 <Table className="h-4 w-4" />
62 <p className="text-xs ml-2">As table</p>
63 </ToggleGroupItem>
64 <ToggleGroupItem className="w-full" value="chart" aria-label="Show as chart">
65 <BarChart2 className="h-4 w-4" />
66 <p className="text-xs ml-2">As chart</p>
67 </ToggleGroupItem>
68 </ToggleGroup>
69
70 {isChart && chartConfig && (
71 <>
72 <Select
73 disabled={lockColumns}
74 value={chartConfig?.xKey}
75 onValueChange={(value) => updateChartConfig({ ...chartConfig, xKey: value })}
76 >
77 <SelectTrigger className="text-left">
78 X Axis {chartConfig?.xKey && `- ${chartConfig.xKey}`}
79 </SelectTrigger>
80 <SelectContent>
81 <SelectGroup>
82 {columns.map((key) => (
83 <SelectItem value={key} key={key}>
84 {key}
85 </SelectItem>
86 ))}
87 </SelectGroup>
88 </SelectContent>
89 </Select>
90
91 <Select
92 disabled={lockColumns}
93 value={chartConfig?.yKey}
94 onValueChange={(value) => updateChartConfig({ ...chartConfig, yKey: value })}
95 >
96 <SelectTrigger className="text-left">
97 Y Axis {chartConfig?.yKey && `- ${chartConfig.yKey}`}
98 </SelectTrigger>
99 <SelectContent>
100 <SelectGroup>
101 {columns.map((key) => (
102 <SelectItem value={key} key={key}>
103 {key}
104 </SelectItem>
105 ))}
106 </SelectGroup>
107 </SelectContent>
108 </Select>
109
110 <div className="*:flex *:gap-2 *:items-center grid gap-2 *:text-foreground-light *:p-1.5 *:pl-0">
111 <Label htmlFor="cumulative">
112 <Checkbox
113 id="cumulative"
114 checked={chartConfig?.cumulative}
115 onClick={() =>
116 updateChartConfig({
117 ...chartConfig,
118 cumulative: !chartConfig?.cumulative,
119 })
120 }
121 />
122 Cumulative
123 </Label>
124 <Label htmlFor="logScale">
125 <Checkbox
126 id="logScale"
127 checked={chartConfig?.logScale}
128 onClick={() =>
129 updateChartConfig({
130 ...chartConfig,
131 logScale: !chartConfig?.logScale,
132 })
133 }
134 />
135 Log scale
136 </Label>
137 </div>
138 </>
139 )}
140 </form>
141 </PopoverContent>
142 </Popover>
143 )
144}