Skip to content

Commit 53fb94b

Browse files
Deepthi-ChandDeepthi-Chand
authored
Merge pull request #199 from CivicDataLab/198-add-filter-in-chart-creation
Add filters in chart creation
2 parents abec194 + 0c0e7b7 commit 53fb94b

File tree

4 files changed

+93
-76
lines changed

4 files changed

+93
-76
lines changed

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

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,24 @@ const ChartForm: React.FC<ChartFormProps> = ({
3939
) {
4040
handleChange('options', {
4141
...chartData.options,
42-
yAxisColumn: [{ fieldName: '', label: '', color: '' }],
42+
yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
4343
});
4444
}
4545
}, [chartData.options.yAxisColumn]);
4646

4747

4848

49-
// useEffect(() => {
50-
// if (
51-
// !chartData.filters ||
52-
// chartData.filters.length === 0
53-
// ) {
54-
// handleChange('filters', {
55-
// ...chartData,
56-
// // filters: [{ column: '', operator: '==', value: '' }],
57-
// });
58-
// }
59-
// }, [chartData.filters]);
49+
useEffect(() => {
50+
if (
51+
!chartData.filters ||
52+
chartData.filters.length === 0
53+
) {
54+
handleChange('filters', {
55+
...chartData,
56+
filters: [{ column: '', operator: '==', value: '' }],
57+
});
58+
}
59+
}, [chartData.filters]);
6060

6161
const handleYAxisColumnChange = (
6262
index: number,
@@ -77,7 +77,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
7777
const addYAxisColumn = () => {
7878
const newYAxisColumns = [
7979
...(chartData.options.yAxisColumn ?? []),
80-
{ fieldName: '', label: '', color: '' },
80+
{ fieldName: '', label: '', color: '#000000' },
8181
];
8282
handleChange('options', {
8383
...chartData.options,
@@ -93,35 +93,37 @@ const ChartForm: React.FC<ChartFormProps> = ({
9393
...chartData.options,
9494
yAxisColumn: newYAxisColumns,
9595
});
96+
handleSave(chartData)
9697
};
9798

98-
// const handlefilterColumnChange = (
99-
// index: number,
100-
// field: string,
101-
// value: any
102-
// ) => {
103-
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
104-
// const newFiltersColumns = [...currentFilters];
105-
// newFiltersColumns[index] = {
106-
// ...newFiltersColumns[index],
107-
// [field]: value,
108-
// };
109-
// handleChange('filters', newFiltersColumns); // Changed this line
110-
// };
111-
// const addFilterColumn = () => {
112-
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
113-
// const newFiltersColumns = [
114-
// ...currentFilters,
115-
// { column: '', operator: '==', value: '' },
116-
// ];
117-
// handleChange('filters', newFiltersColumns);
118-
// };
99+
const handlefilterColumnChange = (
100+
index: number,
101+
field: string,
102+
value: any
103+
) => {
104+
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
105+
const newFiltersColumns = [...currentFilters];
106+
newFiltersColumns[index] = {
107+
...newFiltersColumns[index],
108+
[field]: value,
109+
};
110+
handleChange('filters', newFiltersColumns); // Changed this line
111+
};
112+
const addFilterColumn = () => {
113+
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
114+
const newFiltersColumns = [
115+
...currentFilters,
116+
{ column: '', operator: '==', value: '' },
117+
];
118+
handleChange('filters', newFiltersColumns);
119+
};
119120

120-
// const removeFilterColumn = (index: number) => {
121-
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
122-
// const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
123-
// handleChange('filters', newFiltersColumns);
124-
// };
121+
const removeFilterColumn = (index: number) => {
122+
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
123+
const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
124+
handleChange('filters', newFiltersColumns);
125+
handleSave(chartData)
126+
};
125127
const updateChartData = (field: string, value: any) => {
126128
if (field === 'type') {
127129
const newData = {
@@ -132,7 +134,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
132134
yAxisColumn:
133135
chartData.options.yAxisColumn.length > 0
134136
? chartData.options.yAxisColumn
135-
: [{ fieldName: '', label: '', color: '' }],
137+
: [{ fieldName: '', label: '', color: '#000000' }],
136138
},
137139
};
138140
handleChange(field, value);
@@ -197,7 +199,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
197199
{ label: 'Sum', value: 'SUM' },
198200
{ label: 'Average', value: 'AVERAGE' },
199201
{ label: 'Count', value: 'COUNT' },
200-
]}
202+
]}
201203
label="Aggregate"
202204
value={chartData.options.aggregateType}
203205
defaultValue="SUM"
@@ -380,7 +382,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
380382
</>
381383
)}
382384

383-
{/* <div className="flex flex-row flex-wrap justify-between gap-4">
385+
<div className="flex flex-row flex-wrap justify-between gap-4">
384386
<div className="flex flex-col gap-4 ">
385387
{Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => (
386388
<div
@@ -430,20 +432,20 @@ const ChartForm: React.FC<ChartFormProps> = ({
430432
}}
431433
onBlur={() => handleSave(chartData)}
432434
/>
433-
{ index > 0 && (
435+
{(
434436
<Button onClick={() => removeFilterColumn(index)}>
435437
Remove
436438
</Button>
437439
)}
438440
</div>
439441
))}
440442
</div>
441-
{ (
443+
{(
442444
<Button className="mt-4 h-fit w-fit" onClick={addFilterColumn}>
443445
Add Filter Column
444446
</Button>
445447
)}
446-
</div> */}
448+
</div>
447449
</div>
448450
);
449451
};

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

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ interface ChartOptions {
4646
interface ChartData {
4747
chartId: string;
4848
description: string;
49-
// filters: any[];
49+
filters: any[];
5050
name: string;
5151
options: ChartOptions;
5252
resource: string;
@@ -57,7 +57,7 @@ interface ChartData {
5757
interface ResourceChartInput {
5858
chartId: string;
5959
description: string;
60-
// filters: ChartFilters[];
60+
filters: ChartFilters[];
6161
name: string;
6262
options: ChartOptions;
6363
resource: string;
@@ -148,7 +148,12 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
148148
chartsListRefetch();
149149
},
150150
onError: (err: any) => {
151-
toast(`Received ${err} while deleting chart `);
151+
toast(`Received ${err} while deleting chart `,{
152+
action:{
153+
label:'undo',
154+
onClick: ()=>{}
155+
}
156+
});
152157
},
153158
}
154159
);
@@ -157,20 +162,20 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
157162
const [chartData, setChartData] = useState<ChartData>({
158163
chartId: '',
159164
description: '',
160-
// filters: [
161-
// {
162-
// column: '',
163-
// operator: '==',
164-
// value: '',
165-
// },
166-
// ],
165+
filters: [
166+
{
167+
column: '',
168+
operator: '==',
169+
value: '',
170+
},
171+
],
167172
name: '',
168173
options: {
169174
aggregateType: 'SUM',
170175
showLegend: true,
171176
xAxisColumn: '',
172177
xAxisLabel: '',
173-
yAxisColumn: [{ fieldName: '', label: '', color: '' }],
178+
yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
174179
yAxisLabel: '',
175180
regionColumn: '',
176181
valueColumn: '',
@@ -220,14 +225,14 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
220225
const updatedData: ChartData = {
221226
chartId: resourceChart.id,
222227
description: resourceChart.description || '',
223-
// filters:
224-
// resourceChart.filters?.length > 0
225-
// ? resourceChart.filters.map((filter: any) => ({
226-
// column: filter.column,
227-
// operator: filter.operator,
228-
// value: filter.value,
229-
// }))
230-
// : [{ column: '', operator: '==', value: '' }],
228+
filters:
229+
resourceChart.filters?.length > 0
230+
? resourceChart.filters.map((filter: any) => ({
231+
column: filter.column.id,
232+
operator: filter.operator,
233+
value: filter.value,
234+
}))
235+
: [{ column: '', operator: '==', value: '' }],
231236
name: resourceChart.name || '',
232237
options: {
233238
aggregateType: resourceChart?.options?.aggregateType,
@@ -330,7 +335,11 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
330335
refetch();
331336
},
332337
onError: (err: any) => {
333-
toast(`Received ${err} during resource chart saving`);
338+
toast(`Received ${err} during resource chart saving`,{
339+
action:{
340+
label:'undo',
341+
onClick: ()=>{}
342+
}});
334343
},
335344
}
336345
);
@@ -346,7 +355,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
346355
const chartInput: ResourceChartInput = {
347356
chartId: updatedData.chartId,
348357
description: updatedData.description,
349-
// filters: updatedData.filters,
358+
filters: updatedData.filters,
350359
name: updatedData.name,
351360
options: {
352361
...updatedData.options,
@@ -379,10 +388,10 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
379388
setPreviousChartData({
380389
...updatedData,
381390
type: currentType, // Ensure previousChartData also has correct type
382-
// filters:
383-
// updatedData.filters?.length > 0
384-
// ? updatedData.filters
385-
// : [{ column: '', operator: '==', value: '' }],
391+
filters:
392+
updatedData.filters?.length > 0
393+
? updatedData.filters
394+
: [{ column: '', operator: '==', value: '' }],
386395
});
387396
}
388397
},

‎app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ export const getResourceChartDetails = graphql(`
3838
}
3939
chart
4040
filters {
41-
column
41+
column {
42+
id
43+
fieldName
44+
}
4245
operator
4346
value
4447
}
@@ -86,10 +89,13 @@ export const createChart = graphql(`
8689
}
8790
name
8891
filters {
89-
column
90-
operator
91-
value
92-
}
92+
column {
93+
id
94+
fieldName
95+
}
96+
operator
97+
value
98+
}
9399
options {
94100
aggregateType
95101
xAxisColumn {

‎app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export interface ChartOptions {
2828
export interface ChartData {
2929
chartId: string;
3030
description: string;
31-
// filters: any[];
31+
filters: any[];
3232
name: string;
3333
options: ChartOptions;
3434
resource: string;

0 commit comments

Comments
 (0)