Skip to content

Add filters in chart creation #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Deepthi-Chand merged 3 commits into from
Feb 26, 2025
Merged

Add filters in chart creation #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c82f59
add filters
sanjaypinna Feb 26, 2025
8dab732
add column schema
sanjaypinna Feb 26, 2025
0c0e7b7
add column id
sanjaypinna Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 47 additions & 45 deletions ...le]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,24 +39,24 @@ const ChartForm: React.FC<ChartFormProps> = ({
) {
handleChange('options', {
...chartData.options,
yAxisColumn: [{ fieldName: '', label: '', color: '' }],
yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
});
}
}, [chartData.options.yAxisColumn]);



// useEffect(() => {
// if (
// !chartData.filters ||
// chartData.filters.length === 0
// ) {
// handleChange('filters', {
// ...chartData,
// // filters: [{ column: '', operator: '==', value: '' }],
// });
// }
// }, [chartData.filters]);
useEffect(() => {
if (
!chartData.filters ||
chartData.filters.length === 0
) {
handleChange('filters', {
...chartData,
filters: [{ column: '', operator: '==', value: '' }],
});
}
}, [chartData.filters]);

const handleYAxisColumnChange = (
index: number,
Expand All @@ -77,7 +77,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
const addYAxisColumn = () => {
const newYAxisColumns = [
...(chartData.options.yAxisColumn ?? []),
{ fieldName: '', label: '', color: '' },
{ fieldName: '', label: '', color: '#000000' },
];
handleChange('options', {
...chartData.options,
Expand All @@ -93,35 +93,37 @@ const ChartForm: React.FC<ChartFormProps> = ({
...chartData.options,
yAxisColumn: newYAxisColumns,
});
handleSave(chartData)
};

// const handlefilterColumnChange = (
// index: number,
// field: string,
// value: any
// ) => {
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
// const newFiltersColumns = [...currentFilters];
// newFiltersColumns[index] = {
// ...newFiltersColumns[index],
// [field]: value,
// };
// handleChange('filters', newFiltersColumns); // Changed this line
// };
// const addFilterColumn = () => {
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
// const newFiltersColumns = [
// ...currentFilters,
// { column: '', operator: '==', value: '' },
// ];
// handleChange('filters', newFiltersColumns);
// };
const handlefilterColumnChange = (
index: number,
field: string,
value: any
) => {
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
const newFiltersColumns = [...currentFilters];
newFiltersColumns[index] = {
...newFiltersColumns[index],
[field]: value,
};
handleChange('filters', newFiltersColumns); // Changed this line
};
const addFilterColumn = () => {
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
const newFiltersColumns = [
...currentFilters,
{ column: '', operator: '==', value: '' },
];
handleChange('filters', newFiltersColumns);
};

// const removeFilterColumn = (index: number) => {
// const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
// const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
// handleChange('filters', newFiltersColumns);
// };
const removeFilterColumn = (index: number) => {
const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
handleChange('filters', newFiltersColumns);
handleSave(chartData)
};
const updateChartData = (field: string, value: any) => {
if (field === 'type') {
const newData = {
Expand All @@ -132,7 +134,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
yAxisColumn:
chartData.options.yAxisColumn.length > 0
? chartData.options.yAxisColumn
: [{ fieldName: '', label: '', color: '' }],
: [{ fieldName: '', label: '', color: '#000000' }],
},
};
handleChange(field, value);
Expand Down Expand Up @@ -197,7 +199,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
{ label: 'Sum', value: 'SUM' },
{ label: 'Average', value: 'AVERAGE' },
{ label: 'Count', value: 'COUNT' },
]}
]}
label="Aggregate"
value={chartData.options.aggregateType}
defaultValue="SUM"
Expand Down Expand Up @@ -380,7 +382,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
</>
)}

{/* <div className="flex flex-row flex-wrap justify-between gap-4">
<div className="flex flex-row flex-wrap justify-between gap-4">
<div className="flex flex-col gap-4 ">
{Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => (
<div
Expand Down Expand Up @@ -430,20 +432,20 @@ const ChartForm: React.FC<ChartFormProps> = ({
}}
onBlur={() => handleSave(chartData)}
/>
{ index > 0 && (
{(
<Button onClick={() => removeFilterColumn(index)}>
Remove
</Button>
)}
</div>
))}
</div>
{ (
{(
<Button className="mt-4 h-fit w-fit" onClick={addFilterColumn}>
Add Filter Column
</Button>
)}
</div> */}
</div>
</div>
);
};
Expand Down
59 changes: 34 additions & 25 deletions ...shboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface ChartOptions {
interface ChartData {
chartId: string;
description: string;
// filters: any[];
filters: any[];
name: string;
options: ChartOptions;
resource: string;
Expand All @@ -57,7 +57,7 @@ interface ChartData {
interface ResourceChartInput {
chartId: string;
description: string;
// filters: ChartFilters[];
filters: ChartFilters[];
name: string;
options: ChartOptions;
resource: string;
Expand Down Expand Up @@ -148,7 +148,12 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
chartsListRefetch();
},
onError: (err: any) => {
toast(`Received ${err} while deleting chart `);
toast(`Received ${err} while deleting chart `,{
action:{
label:'undo',
onClick: ()=>{}
}
});
},
}
);
Expand All @@ -157,20 +162,20 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
const [chartData, setChartData] = useState<ChartData>({
chartId: '',
description: '',
// filters: [
// {
// column: '',
// operator: '==',
// value: '',
// },
// ],
filters: [
{
column: '',
operator: '==',
value: '',
},
],
name: '',
options: {
aggregateType: 'SUM',
showLegend: true,
xAxisColumn: '',
xAxisLabel: '',
yAxisColumn: [{ fieldName: '', label: '', color: '' }],
yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
yAxisLabel: '',
regionColumn: '',
valueColumn: '',
Expand Down Expand Up @@ -220,14 +225,14 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
const updatedData: ChartData = {
chartId: resourceChart.id,
description: resourceChart.description || '',
// filters:
// resourceChart.filters?.length > 0
// ? resourceChart.filters.map((filter: any) => ({
// column: filter.column,
// operator: filter.operator,
// value: filter.value,
// }))
// : [{ column: '', operator: '==', value: '' }],
filters:
resourceChart.filters?.length > 0
? resourceChart.filters.map((filter: any) => ({
column: filter.column.id,
operator: filter.operator,
value: filter.value,
}))
: [{ column: '', operator: '==', value: '' }],
name: resourceChart.name || '',
options: {
aggregateType: resourceChart?.options?.aggregateType,
Expand Down Expand Up @@ -330,7 +335,11 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
refetch();
},
onError: (err: any) => {
toast(`Received ${err} during resource chart saving`);
toast(`Received ${err} during resource chart saving`,{
action:{
label:'undo',
onClick: ()=>{}
}});
},
}
);
Expand All @@ -346,7 +355,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
const chartInput: ResourceChartInput = {
chartId: updatedData.chartId,
description: updatedData.description,
// filters: updatedData.filters,
filters: updatedData.filters,
name: updatedData.name,
options: {
...updatedData.options,
Expand Down Expand Up @@ -379,10 +388,10 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
setPreviousChartData({
...updatedData,
type: currentType, // Ensure previousChartData also has correct type
// filters:
// updatedData.filters?.length > 0
// ? updatedData.filters
// : [{ column: '', operator: '==', value: '' }],
filters:
updatedData.filters?.length > 0
? updatedData.filters
: [{ column: '', operator: '==', value: '' }],
});
}
},
Expand Down
16 changes: 11 additions & 5 deletions app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ export const getResourceChartDetails = graphql(`
}
chart
filters {
column
column {
id
fieldName
}
operator
value
}
Expand Down Expand Up @@ -86,10 +89,13 @@ export const createChart = graphql(`
}
name
filters {
column
operator
value
}
column {
id
fieldName
}
operator
value
}
options {
aggregateType
xAxisColumn {
Expand Down
2 changes: 1 addition & 1 deletion app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export interface ChartOptions {
export interface ChartData {
chartId: string;
description: string;
// filters: any[];
filters: any[];
name: string;
options: ChartOptions;
resource: string;
Expand Down
Loading