Skip to content

Commit 124660d

Browse files
sanjaypinnasanjaypinna
committed
show number format fields in yaxis column
1 parent 11e2871 commit 124660d

File tree

1 file changed

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

1 file changed

+79
-72
lines changed

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

Lines changed: 79 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect } from 'react';
22
import { ChartTypes } from '@/gql/generated/graphql';
33
import { Button, Checkbox, Select, Text, TextField } from 'opub-ui';
4+
45
import { ChartData, ResourceData, ResourceSchema } from '../types';
56

67
interface ChartFormProps {
@@ -25,13 +26,13 @@ const ChartForm: React.FC<ChartFormProps> = ({
2526
chartData.type === ChartTypes.AssamRc;
2627
const isGroupedChart =
2728
chartData.type === ChartTypes.GroupedBarVertical ||
28-
chartData.type === ChartTypes.GroupedBarHorizontal||
29+
chartData.type === ChartTypes.GroupedBarHorizontal ||
2930
chartData.type === ChartTypes.Multiline;
3031

3132
const isBarOrLineChart =
3233
chartData.type === ChartTypes.BarVertical ||
3334
chartData.type === ChartTypes.BarHorizontal ||
34-
chartData.type === ChartTypes.Line
35+
chartData.type === ChartTypes.Line;
3536

3637
useEffect(() => {
3738
if (
@@ -45,14 +46,10 @@ const ChartForm: React.FC<ChartFormProps> = ({
4546
}
4647
}, [chartData.options.yAxisColumn]);
4748

48-
49-
console.log(chartData);
49+
console.log(chartData);
5050

5151
useEffect(() => {
52-
if (
53-
!chartData.filters ||
54-
chartData.filters.length === 0
55-
) {
52+
if (!chartData.filters || chartData.filters.length === 0) {
5653
handleChange('filters', {
5754
...chartData,
5855
filters: [{ column: '', operator: '==', value: '' }],
@@ -95,15 +92,17 @@ console.log(chartData);
9592
...chartData.options,
9693
yAxisColumn: newYAxisColumns,
9794
});
98-
handleSave(chartData)
95+
handleSave(chartData);
9996
};
10097

10198
const handlefilterColumnChange = (
10299
index: number,
103100
field: string,
104101
value: any
105102
) => {
106-
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
103+
const currentFilters = Array.isArray(chartData.filters)
104+
? chartData.filters
105+
: [];
107106
const newFiltersColumns = [...currentFilters];
108107
newFiltersColumns[index] = {
109108
...newFiltersColumns[index],
@@ -112,7 +111,9 @@ console.log(chartData);
112111
handleChange('filters', newFiltersColumns); // Changed this line
113112
};
114113
const addFilterColumn = () => {
115-
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
114+
const currentFilters = Array.isArray(chartData.filters)
115+
? chartData.filters
116+
: [];
116117
const newFiltersColumns = [
117118
...currentFilters,
118119
{ column: '', operator: '==', value: '' },
@@ -121,10 +122,12 @@ console.log(chartData);
121122
};
122123

123124
const removeFilterColumn = (index: number) => {
124-
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
125+
const currentFilters = Array.isArray(chartData.filters)
126+
? chartData.filters
127+
: [];
125128
const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
126129
handleChange('filters', newFiltersColumns);
127-
handleSave(chartData)
130+
handleSave(chartData);
128131
};
129132
const updateChartData = (field: string, value: any) => {
130133
if (field === 'type') {
@@ -201,7 +204,7 @@ console.log(chartData);
201204
{ label: 'Sum', value: 'SUM' },
202205
{ label: 'Average', value: 'AVERAGE' },
203206
{ label: 'Count', value: 'COUNT' },
204-
]}
207+
]}
205208
label="Aggregate"
206209
value={chartData.options.aggregateType}
207210
defaultValue="SUM"
@@ -287,7 +290,9 @@ console.log(chartData);
287290
name={`yAxisColumn-${index}`}
288291
options={resourceSchema
289292
?.filter(
290-
(field) => field.format.toUpperCase() === 'INTEGER'
293+
(field) =>
294+
field.format.toUpperCase() === 'INTEGER' ||
295+
field.format.toUpperCase() === 'NUMBER'
291296
)
292297
.map((field) => ({
293298
label: field.fieldName,
@@ -386,68 +391,70 @@ console.log(chartData);
386391

387392
<div className="flex flex-row flex-wrap justify-between gap-4">
388393
<div className="flex flex-col gap-4 ">
389-
{Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => (
390-
<div
391-
key={index}
392-
className="flex flex-wrap items-end gap-4 lg:flex-nowrap"
393-
>
394-
<Select
395-
name={`Column-${index}`}
396-
options={resourceSchema.map((field) => ({
397-
label: field.fieldName,
398-
value: field.id,
399-
}))}
400-
label="Column"
401-
className={`w-36`}
402-
value={column.column}
403-
onChange={(e) => handlefilterColumnChange(index, 'column', e)}
404-
onBlur={() => handleSave(chartData)}
405-
placeholder="Select"
406-
/>
407-
<Select
408-
name={`operator-${index}`}
409-
className={`w-36`}
410-
options={[
411-
{ label: 'Equal to', value: '==' },
412-
{ label: 'Not Equal to', value: '!=' },
413-
{ label: 'Less than', value: '<' },
414-
{ label: 'Greater than', value: '>' },
415-
{ label: 'In', value: 'in' },
416-
{ label: 'Not In', value: 'not in' },
417-
{ label: 'Less than or Equal to', value: '<=' },
418-
{ label: 'Greater than or Equal to', value: '>=' },
394+
{Array.isArray(chartData?.filters) &&
395+
chartData?.filters?.map((column, index) => (
396+
<div
397+
key={index}
398+
className="flex flex-wrap items-end gap-4 lg:flex-nowrap"
399+
>
400+
<Select
401+
name={`Column-${index}`}
402+
options={resourceSchema.map((field) => ({
403+
label: field.fieldName,
404+
value: field.id,
405+
}))}
406+
label="Column"
407+
className={`w-36`}
408+
value={column.column}
409+
onChange={(e) => handlefilterColumnChange(index, 'column', e)}
410+
onBlur={() => handleSave(chartData)}
411+
placeholder="Select"
412+
/>
413+
<Select
414+
name={`operator-${index}`}
415+
className={`w-36`}
416+
options={[
417+
{ label: 'Equal to', value: '==' },
418+
{ label: 'Not Equal to', value: '!=' },
419+
{ label: 'Less than', value: '<' },
420+
{ label: 'Greater than', value: '>' },
421+
{ label: 'In', value: 'in' },
422+
{ label: 'Not In', value: 'not in' },
423+
{ label: 'Less than or Equal to', value: '<=' },
424+
{ label: 'Greater than or Equal to', value: '>=' },
425+
]}
426+
label="Operator"
427+
value={column.operator}
428+
defaultValue="Equal to"
429+
onChange={(e) =>
430+
handlefilterColumnChange(index, 'operator', e)
431+
}
432+
onBlur={() => handleSave(chartData)}
433+
/>
419434

420-
]}
421-
label="Operator"
422-
value={column.operator}
423-
defaultValue="Equal to"
424-
onChange={(e) => handlefilterColumnChange(index, 'operator', e)}
425-
onBlur={() => handleSave(chartData)}
426-
/>
427-
428-
<TextField
429-
name={`Value-${index}`}
430-
value={column.value}
431-
label="Value"
432-
onChange={(e: any) => {
433-
handlefilterColumnChange(index, 'value', e);
434-
}}
435-
onBlur={() => handleSave(chartData)}
436-
/>
437-
{(
438-
<Button onClick={() => removeFilterColumn(index)}>
439-
Remove
440-
</Button>
441-
)}
442-
</div>
443-
))}
435+
<TextField
436+
name={`Value-${index}`}
437+
value={column.value}
438+
label="Value"
439+
onChange={(e: any) => {
440+
handlefilterColumnChange(index, 'value', e);
441+
}}
442+
onBlur={() => handleSave(chartData)}
443+
/>
444+
{
445+
<Button onClick={() => removeFilterColumn(index)}>
446+
Remove
447+
</Button>
448+
}
449+
</div>
450+
))}
444451
</div>
445-
{(
452+
{
446453
<Button className="mt-4 h-fit w-fit" onClick={addFilterColumn}>
447454
Add Filter Column
448455
</Button>
449-
)}
450-
</div>
456+
}
457+
</div>
451458
</div>
452459
);
453460
};

0 commit comments

Comments
 (0)