Skip to content

Commit d2305ef

Browse files
sanjaypinnasanjaypinna
committed
fix css
1 parent 7148b74 commit d2305ef

File tree

1 file changed

+134
-105
lines changed
  • app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components

1 file changed

+134
-105
lines changed

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

Lines changed: 134 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { ChartTypes } from '@/gql/generated/graphql';
3-
import { Button, Checkbox, Select, TextField } from 'opub-ui';
3+
import { Button, Checkbox, Select, Text, TextField } from 'opub-ui';
44

55
import { ChartData, ResourceData, ResourceSchema } from '../types';
66

@@ -33,9 +33,11 @@ const ChartForm: React.FC<ChartFormProps> = ({
3333
chartData.type === ChartTypes.Line ||
3434
chartData.type === ChartTypes.Multiline;
3535

36-
3736
useEffect(() => {
38-
if (!chartData.options.yAxisColumn || chartData.options.yAxisColumn.length === 0) {
37+
if (
38+
!chartData.options.yAxisColumn ||
39+
chartData.options.yAxisColumn.length === 0
40+
) {
3941
handleChange('options', {
4042
...chartData.options,
4143
yAxisColumn: [{ fieldName: '', label: '', color: '' }],
@@ -81,16 +83,16 @@ const ChartForm: React.FC<ChartFormProps> = ({
8183
};
8284

8385
const updateChartData = (field: string, value: any) => {
84-
8586
if (field === 'type') {
8687
const newData = {
8788
...chartData,
8889
type: value,
8990
options: {
9091
...chartData.options,
91-
yAxisColumn: chartData.options.yAxisColumn.length > 0
92-
? chartData.options.yAxisColumn
93-
: [{ fieldName: '', label: '', color: '' }],
92+
yAxisColumn:
93+
chartData.options.yAxisColumn.length > 0
94+
? chartData.options.yAxisColumn
95+
: [{ fieldName: '', label: '', color: '' }],
9496
},
9597
};
9698
handleChange(field, value);
@@ -105,7 +107,6 @@ const ChartForm: React.FC<ChartFormProps> = ({
105107
}
106108
};
107109

108-
109110
return (
110111
<div className="flex flex-col gap-4">
111112
<TextField
@@ -148,34 +149,40 @@ const ChartForm: React.FC<ChartFormProps> = ({
148149
onChange={handleResourceChange}
149150
placeholder="Select"
150151
/>
151-
<Checkbox
152-
name="legend"
153-
value={chartData.options.showLegend?.toString()}
154-
checked={chartData.options.showLegend ?? true}
155-
onBlur={() => handleSave(chartData)}
156-
onChange={(e) =>
157-
handleChange('options', {
158-
...chartData.options,
159-
showLegend: e,
160-
})
161-
}
162-
>
163-
Show Legend
164-
</Checkbox>
165-
<Select
166-
name="aggregateType"
167-
options={[
168-
{ label: 'None', value: 'NONE' },
169-
{ label: 'Sum', value: 'SUM' },
170-
{ label: 'Average', value: 'AVERAGE' },
171-
{ label: 'Count', value: 'COUNT' },
172-
]}
173-
label="Aggregate"
174-
value={chartData.options.aggregateType}
175-
defaultValue="SUM"
176-
onBlur={() => handleSave(chartData)}
177-
onChange={(e) => handleChange('options', { ...chartData.options, aggregateType: e })}
178-
/>
152+
<div className="grid grid-cols-1 items-center gap-2 lg:grid-cols-2">
153+
<Select
154+
name="aggregateType"
155+
options={[
156+
{ label: 'None', value: 'NONE' },
157+
{ label: 'Sum', value: 'SUM' },
158+
{ label: 'Average', value: 'AVERAGE' },
159+
{ label: 'Count', value: 'COUNT' },
160+
]}
161+
label="Aggregate"
162+
value={chartData.options.aggregateType}
163+
defaultValue="SUM"
164+
onBlur={() => handleSave(chartData)}
165+
onChange={(e) =>
166+
handleChange('options', { ...chartData.options, aggregateType: e })
167+
}
168+
/>
169+
<div className=" m-0 lg:ml-6 lg:mt-6">
170+
<Checkbox
171+
name="legend"
172+
value={chartData.options.showLegend?.toString()}
173+
checked={chartData.options.showLegend ?? true}
174+
onBlur={() => handleSave(chartData)}
175+
onChange={(e) =>
176+
handleChange('options', {
177+
...chartData.options,
178+
showLegend: e,
179+
})
180+
}
181+
>
182+
Show Legend
183+
</Checkbox>
184+
</div>
185+
</div>
179186
{!isAssamChart && (
180187
<>
181188
<Select
@@ -195,78 +202,100 @@ const ChartForm: React.FC<ChartFormProps> = ({
195202
}
196203
placeholder="Select"
197204
/>
198-
<TextField
199-
onChange={(e) =>
200-
handleChange('options', {
201-
...chartData.options,
202-
xAxisLabel: e,
203-
})
204-
}
205-
label="X-axis Label"
206-
value={chartData.options.xAxisLabel}
207-
name="xAxisLabel"
208-
onBlur={() => handleSave(chartData)}
209-
required
210-
/>
211-
<TextField
212-
onChange={(e) =>
213-
handleChange('options', {
214-
...chartData.options,
215-
yAxisLabel: e,
216-
})
217-
}
218-
label="Y-axis Label"
219-
value={chartData.options.yAxisLabel}
220-
name="yAxisLabel"
221-
onBlur={() => handleSave(chartData)}
222-
required
223-
/>
205+
<div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
206+
<TextField
207+
onChange={(e) =>
208+
handleChange('options', {
209+
...chartData.options,
210+
xAxisLabel: e,
211+
})
212+
}
213+
label="X-axis Label"
214+
value={chartData.options.xAxisLabel}
215+
name="xAxisLabel"
216+
onBlur={() => handleSave(chartData)}
217+
required
218+
/>
219+
<TextField
220+
onChange={(e) =>
221+
handleChange('options', {
222+
...chartData.options,
223+
yAxisLabel: e,
224+
})
225+
}
226+
label="Y-axis Label"
227+
value={chartData.options.yAxisLabel}
228+
name="yAxisLabel"
229+
onBlur={() => handleSave(chartData)}
230+
required
231+
/>
232+
</div>
224233

225234
{(isBarOrLineChart || isGroupedChart) && (
226-
<div className="flex flex-col gap-4">
227-
{chartData?.options?.yAxisColumn?.map((column, index) => (
228-
<div key={index} className="flex items-end gap-4">
229-
<Select
230-
name={`yAxisColumn-${index}`}
231-
options={resourceSchema
232-
?.filter(field => field.format.toUpperCase() === 'INTEGER' )
233-
.map((field) => ({
234-
label: field.fieldName,
235-
value: field.id,
236-
}))}
237-
label="Y-axis Column"
238-
value={column.fieldName}
239-
onChange={(e) =>
240-
handleYAxisColumnChange(index, 'fieldName', e)
241-
}
242-
onBlur={() => handleSave(chartData)}
243-
placeholder="Select"
244-
/>
245-
<TextField
246-
name={`yAxisLabel-${index}`}
247-
label="Label"
248-
value={column.label}
249-
onChange={(e) => handleYAxisColumnChange(index, 'label', e)}
250-
onBlur={() => handleSave(chartData)}
251-
/>
252-
<input
253-
name={`yAxisColor-${index}`}
254-
type="Color"
255-
value={column.color || '#000000'}
256-
onChange={(e: any) => {
257-
handleYAxisColumnChange(index, 'color', e.target.value);
258-
}}
259-
onBlur={() => handleSave(chartData)}
260-
/>
261-
{isGroupedChart && index > 0 && (
262-
<Button onClick={() => removeYAxisColumn(index)}>
263-
Remove
264-
</Button>
265-
)}
266-
</div>
267-
))}
235+
<div className="flex flex-row flex-wrap justify-between gap-4">
236+
237+
<div className="flex flex-col gap-4 ">
238+
{chartData?.options?.yAxisColumn?.map((column, index) => (
239+
<div
240+
key={index}
241+
className="flex flex-wrap items-end gap-4 lg:flex-nowrap"
242+
>
243+
<Select
244+
name={`yAxisColumn-${index}`}
245+
options={resourceSchema
246+
?.filter(
247+
(field) => field.format.toUpperCase() === 'INTEGER'
248+
)
249+
.map((field) => ({
250+
label: field.fieldName,
251+
value: field.id,
252+
}))}
253+
label="Y-axis Column"
254+
value={column.fieldName}
255+
onChange={(e) =>
256+
handleYAxisColumnChange(index, 'fieldName', e)
257+
}
258+
onBlur={() => handleSave(chartData)}
259+
placeholder="Select"
260+
/>
261+
<TextField
262+
name={`yAxisLabel-${index}`}
263+
label="Label"
264+
value={column.label}
265+
onChange={(e) =>
266+
handleYAxisColumnChange(index, 'label', e)
267+
}
268+
onBlur={() => handleSave(chartData)}
269+
/>
270+
<div className=" flex flex-col gap-1">
271+
<Text>Color</Text>
272+
<input
273+
name={`yAxisColor-${index}`}
274+
type="Color"
275+
className=" h-9"
276+
value={column.color || '#000000'}
277+
onChange={(e: any) => {
278+
handleYAxisColumnChange(
279+
index,
280+
'color',
281+
e.target.value
282+
);
283+
}}
284+
onBlur={() => handleSave(chartData)}
285+
/>
286+
</div>
287+
{isGroupedChart && index > 0 && (
288+
<Button onClick={() => removeYAxisColumn(index)}>
289+
Remove
290+
</Button>
291+
)}
292+
</div>
293+
))}
294+
</div>
268295
{isGroupedChart && (
269-
<Button onClick={addYAxisColumn}>Add Y-axis Column</Button>
296+
<Button className="h-fit w-fit mt-4" onClick={addYAxisColumn}>
297+
Add Y-axis Column
298+
</Button>
270299
)}
271300
</div>
272301
)}

0 commit comments

Comments
 (0)