Skip to content

Commit 8a14640

Browse files
sanjaypinnasanjaypinna
committed
move queries and form to new components
1 parent a734d72 commit 8a14640

File tree

3 files changed

+704
-327
lines changed

3 files changed

+704
-327
lines changed

‎app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import React from 'react';
2+
import { Checkbox, Select, TextField } from 'opub-ui';
3+
4+
interface ChartOptions {
5+
aggregateType: string;
6+
regionColumn?: string;
7+
showLegend: boolean;
8+
timeColumn?: string;
9+
valueColumn?: string;
10+
xAxisColumn: string;
11+
xAxisLabel: string;
12+
yAxisColumn: any[];
13+
yAxisLabel: string;
14+
}
15+
16+
interface ChartData {
17+
chartId: string;
18+
description: string;
19+
filters: any[];
20+
name: string;
21+
options: ChartOptions;
22+
resource: string;
23+
type: string;
24+
chart: any;
25+
}
26+
27+
interface ResourceSchema {
28+
fieldName: string;
29+
id: string;
30+
}
31+
32+
interface Resource {
33+
id: string;
34+
name: string;
35+
}
36+
37+
interface ResourceData {
38+
datasetResources: Resource[];
39+
}
40+
41+
interface ChartFormProps {
42+
chartData: ChartData;
43+
resourceData: ResourceData;
44+
resourceSchema: ResourceSchema[];
45+
handleChange: (field: string, value: any) => void;
46+
handleResourceChange: (value: string) => void;
47+
handleSave: (data: ChartData) => void;
48+
}
49+
50+
const ChartForm: React.FC<ChartFormProps> = ({
51+
chartData,
52+
resourceData,
53+
resourceSchema,
54+
handleChange,
55+
handleResourceChange,
56+
handleSave,
57+
}) => {
58+
return (
59+
<div>
60+
<TextField
61+
onChange={(e) => handleChange('name', e)}
62+
value={chartData.name}
63+
label="Chart Name"
64+
name="name"
65+
required
66+
helpText="To know about best practices for naming Visualizations go to our User Guide"
67+
onBlur={() => handleSave(chartData)}
68+
/>
69+
<TextField
70+
onChange={(e) => handleChange('description', e)}
71+
label="Description"
72+
value={chartData.description}
73+
name="description"
74+
multiline={4}
75+
onBlur={() => handleSave(chartData)}
76+
/>
77+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
78+
<Select
79+
name="chartType"
80+
value={chartData.type}
81+
options={[
82+
{ label: 'Bar Vertical', value: 'BAR_VERTICAL' },
83+
{ label: 'Bar Horizontal', value: 'BAR_HORIZONTAL' },
84+
{
85+
label: 'GROUPED_BAR_VERTICAL',
86+
value: 'GROUPED_BAR_VERTICAL',
87+
},
88+
{
89+
label: ' GROUPED_BAR_HORIZONTAL',
90+
value: 'GROUPED_BAR_HORIZONTAL',
91+
},
92+
{ label: 'Line', value: 'LINE' },
93+
{ label: 'Assam District', value: 'ASSAM_DISTRICT' },
94+
{ label: 'ASSAM RC', value: 'ASSAM_RC' },
95+
]}
96+
label="Select Chart Type"
97+
defaultValue={'BAR_VERTICAL'}
98+
// placeholder="Select"
99+
onBlur={() => handleSave(chartData)}
100+
onChange={(e) => handleChange('chartType', e)}
101+
/>
102+
<Select
103+
name="resource"
104+
options={resourceData?.datasetResources.map((resource: any) => ({
105+
label: resource.name,
106+
value: resource.id,
107+
}))}
108+
value={chartData?.resource}
109+
defaultValue={resourceData?.datasetResources[0]?.id}
110+
label="Select Resources"
111+
onBlur={() => handleSave(chartData)}
112+
onChange={(e) => handleResourceChange(e)}
113+
/>
114+
{chartData.type !== 'ASSAM_DISTRICT' &&
115+
chartData.type !== 'ASSAM_RC' ? (
116+
<>
117+
<Select
118+
name="xAxisColumn"
119+
options={resourceSchema?.map((field: any) => ({
120+
label: field.fieldName,
121+
value: field.id,
122+
}))}
123+
label="X-axis Column"
124+
value={chartData.options.xAxisColumn}
125+
placeholder="Select"
126+
onBlur={() => handleSave(chartData)}
127+
onChange={(e) => handleChange('xAxisColumn', e)}
128+
/>
129+
<TextField
130+
onChange={(e) => handleChange('xAxisLabel', e)}
131+
label="X-axis Label"
132+
value={chartData.options.xAxisLabel}
133+
name="xAxisLabel"
134+
onBlur={() => handleSave(chartData)}
135+
required
136+
/>
137+
<Select
138+
name="yAxisColumn"
139+
options={resourceSchema?.map((field: any) => ({
140+
label: field.fieldName,
141+
value: field.id,
142+
}))}
143+
// value={chartData?.options?.yAxisColumn[0]}
144+
label="Y-axis Column"
145+
onBlur={() => handleSave(chartData)}
146+
placeholder="Select"
147+
onChange={(e) => handleChange('yAxisColumn', e)}
148+
/>
149+
<TextField
150+
onChange={(e) => handleChange('yAxisLabel', e)}
151+
label="Y-axis Label"
152+
name="yAxisLabel"
153+
value={chartData.options.yAxisLabel}
154+
onBlur={() => handleSave(chartData)}
155+
required
156+
/>
157+
</>
158+
) : (
159+
<>
160+
<Select
161+
name="regionColumn"
162+
options={resourceSchema?.map((field: any) => ({
163+
label: field.fieldName,
164+
value: field.id,
165+
}))}
166+
label="Region Column"
167+
value={chartData.options.regionColumn}
168+
placeholder="Select"
169+
onBlur={() => handleSave(chartData)}
170+
onChange={(e) => handleChange('regionColumn', e)}
171+
/>
172+
<Select
173+
name="valueColumn"
174+
options={resourceSchema?.map((field: any) => ({
175+
label: field.fieldName,
176+
value: field.id,
177+
}))}
178+
value={chartData.options.valueColumn}
179+
label="Value Column"
180+
onBlur={() => handleSave(chartData)}
181+
placeholder="Select"
182+
onChange={(e) => handleChange('valueColumn', e)}
183+
/>
184+
</>
185+
)}
186+
<Select
187+
name="aggregateType"
188+
options={[
189+
{ label: 'None', value: 'NONE' },
190+
{ label: 'Sum', value: 'SUM' },
191+
{ label: 'Average', value: 'AVERAGE' },
192+
{ label: 'Count', value: 'COUNT' },
193+
]}
194+
label="Aggregate"
195+
value={chartData?.options?.aggregateType}
196+
defaultValue="SUM"
197+
onBlur={() => handleSave(chartData)}
198+
onChange={(e) => handleChange('aggregateType', e)}
199+
/>
200+
<div className=" pt-7">
201+
<Checkbox
202+
name="legend"
203+
value={chartData?.options?.showLegend?.toString()}
204+
// checked={chartData?.options?.showLegend}
205+
onBlur={() => handleSave(chartData)}
206+
onChange={(e) => handleChange('showLegend', e)}
207+
>
208+
Show Legend (Legend values will be taken from resource)
209+
</Checkbox>
210+
</div>
211+
</div>
212+
</div>
213+
);
214+
};
215+
216+
export default ChartForm;

0 commit comments

Comments
 (0)