Skip to content

Commit 5b4de4f

Browse files
sanjaypinnasanjaypinna
committed
add filters
1 parent d13a846 commit 5b4de4f

File tree

2 files changed

+137
-10
lines changed

2 files changed

+137
-10
lines changed

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

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

76
interface ChartFormProps {
@@ -45,6 +44,20 @@ const ChartForm: React.FC<ChartFormProps> = ({
4544
}
4645
}, [chartData.options.yAxisColumn]);
4746

47+
48+
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]);
60+
4861
const handleYAxisColumnChange = (
4962
index: number,
5063
field: string,
@@ -82,6 +95,33 @@ const ChartForm: React.FC<ChartFormProps> = ({
8295
});
8396
};
8497

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+
// };
119+
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+
// };
85125
const updateChartData = (field: string, value: any) => {
86126
if (field === 'type') {
87127
const newData = {
@@ -233,7 +273,6 @@ const ChartForm: React.FC<ChartFormProps> = ({
233273

234274
{(isBarOrLineChart || isGroupedChart) && (
235275
<div className="flex flex-row flex-wrap justify-between gap-4">
236-
237276
<div className="flex flex-col gap-4 ">
238277
{chartData?.options?.yAxisColumn?.map((column, index) => (
239278
<div
@@ -293,7 +332,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
293332
))}
294333
</div>
295334
{isGroupedChart && (
296-
<Button className="h-fit w-fit mt-4" onClick={addYAxisColumn}>
335+
<Button className="mt-4 h-fit w-fit" onClick={addYAxisColumn}>
297336
Add Y-axis Column
298337
</Button>
299338
)}
@@ -340,6 +379,71 @@ const ChartForm: React.FC<ChartFormProps> = ({
340379
/>
341380
</>
342381
)}
382+
383+
{/* <div className="flex flex-row flex-wrap justify-between gap-4">
384+
<div className="flex flex-col gap-4 ">
385+
{Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => (
386+
<div
387+
key={index}
388+
className="flex flex-wrap items-end gap-4 lg:flex-nowrap"
389+
>
390+
<Select
391+
name={`Column-${index}`}
392+
options={resourceSchema.map((field) => ({
393+
label: field.fieldName,
394+
value: field.id,
395+
}))}
396+
label="Column"
397+
className={`w-36`}
398+
value={column.fieldName}
399+
onChange={(e) => handlefilterColumnChange(index, 'column', e)}
400+
onBlur={() => handleSave(chartData)}
401+
placeholder="Select"
402+
/>
403+
<Select
404+
name={`operator-${index}`}
405+
className={`w-36`}
406+
options={[
407+
{ label: 'Equal to', value: '==' },
408+
{ label: 'Not Equal to', value: '!=' },
409+
{ label: 'Less than', value: '<' },
410+
{ label: 'Greater than', value: '>' },
411+
{ label: 'In', value: 'in' },
412+
{ label: 'Not In', value: 'not in' },
413+
{ label: 'Less than or Equal to', value: '<=' },
414+
{ label: 'Greater than or Equal to', value: '>=' },
415+
416+
]}
417+
label="Operator"
418+
value={column.operator}
419+
defaultValue="Equal to"
420+
onChange={(e) => handlefilterColumnChange(index, 'operator', e)}
421+
onBlur={() => handleSave(chartData)}
422+
/>
423+
424+
<TextField
425+
name={`Value-${index}`}
426+
value={column.value}
427+
label="Value"
428+
onChange={(e: any) => {
429+
handlefilterColumnChange(index, 'value', e);
430+
}}
431+
onBlur={() => handleSave(chartData)}
432+
/>
433+
{ index > 0 && (
434+
<Button onClick={() => removeFilterColumn(index)}>
435+
Remove
436+
</Button>
437+
)}
438+
</div>
439+
))}
440+
</div>
441+
{ (
442+
<Button className="mt-4 h-fit w-fit" onClick={addFilterColumn}>
443+
Add Filter Column
444+
</Button>
445+
)}
446+
</div> */}
343447
</div>
344448
);
345449
};

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

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ interface YAxisColumnItem {
2525
label: string;
2626
color: string;
2727
}
28+
interface ChartFilters {
29+
column: string;
30+
operator: string;
31+
value: string;
32+
}
2833

2934
interface ChartOptions {
3035
aggregateType: string;
@@ -41,7 +46,7 @@ interface ChartOptions {
4146
interface ChartData {
4247
chartId: string;
4348
description: string;
44-
filters: any[];
49+
// filters: any[];
4550
name: string;
4651
options: ChartOptions;
4752
resource: string;
@@ -52,7 +57,7 @@ interface ChartData {
5257
interface ResourceChartInput {
5358
chartId: string;
5459
description: string;
55-
filters: any[];
60+
// filters: ChartFilters[];
5661
name: string;
5762
options: ChartOptions;
5863
resource: string;
@@ -152,7 +157,13 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
152157
const [chartData, setChartData] = useState<ChartData>({
153158
chartId: '',
154159
description: '',
155-
filters: [],
160+
// filters: [
161+
// {
162+
// column: '',
163+
// operator: '==',
164+
// value: '',
165+
// },
166+
// ],
156167
name: '',
157168
options: {
158169
aggregateType: 'SUM',
@@ -188,13 +199,15 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
188199
}
189200
}, [chartId, chartDetails, resourceData]);
190201

202+
191203
useEffect(() => {
192204
if (chartId && chartDetails?.resourceChart) {
193205
refetch();
194206
updateChartData(chartDetails.resourceChart);
195207
}
196208
}, [chartId, chartDetails]);
197209

210+
198211
const updateChartData = (resourceChart: any) => {
199212
if (
200213
resourceChart.chartType === 'ASSAM_DISTRICT' ||
@@ -209,7 +222,14 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
209222
const updatedData: ChartData = {
210223
chartId: resourceChart.id,
211224
description: resourceChart.description || '',
212-
filters: resourceChart.filters || [],
225+
// filters:
226+
// resourceChart.filters?.length > 0
227+
// ? resourceChart.filters.map((filter: any) => ({
228+
// column: filter.column,
229+
// operator: filter.operator,
230+
// value: filter.value,
231+
// }))
232+
// : [{ column: '', operator: '==', value: '' }],
213233
name: resourceChart.name || '',
214234
options: {
215235
aggregateType: resourceChart?.options?.aggregateType,
@@ -293,8 +313,6 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
293313
});
294314
}, []);
295315

296-
297-
298316
const { mutate, isLoading: editMutationLoading } = useMutation(
299317
(chartInput: { chartInput: ResourceChartInput }) =>
300318
GraphQL(
@@ -330,7 +348,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
330348
const chartInput: ResourceChartInput = {
331349
chartId: updatedData.chartId,
332350
description: updatedData.description,
333-
filters: updatedData.filters,
351+
// filters: updatedData.filters,
334352
name: updatedData.name,
335353
options: {
336354
...updatedData.options,
@@ -359,9 +377,14 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
359377
},
360378
}
361379
);
380+
362381
setPreviousChartData({
363382
...updatedData,
364383
type: currentType, // Ensure previousChartData also has correct type
384+
// filters:
385+
// updatedData.filters?.length > 0
386+
// ? updatedData.filters
387+
// : [{ column: '', operator: '==', value: '' }],
365388
});
366389
}
367390
},

0 commit comments

Comments
 (0)