Skip to content

feat(finance): add year filter to Budget Analysis issue#3653 #4451

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat(finance): add year filter to Budget Analysis issue#3653 #4451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
222f3e9
feat(finance): add year filter to Budget Analysis issue ##3653
Sarthak114123082 Oct 3, 2025
c9a43f9
fix: netlify and coderabbitai errors in BarChartComponent
Sarthak114123082 Oct 3, 2025
0f804fd
fix: Type error
Sarthak114123082 Oct 3, 2025
961df71
fix: netlify build error
Sarthak114123082 Oct 3, 2025
b787b69
fix: added TODOs
sarthakNITT Oct 16, 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
110 changes: 108 additions & 2 deletions components/FinancialSummary/BarChartComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,77 @@ export default function BarChartComponent() {
const [selectedMonth, setSelectedMonth] = useState<string>('All Months');
const [windowWidth, setWindowWidth] = useState<number>(0);

// Extracting unique categories and months from the data
/*
TODO: Uncomment the block below to enable previous-years data (2023) and "All Years" selection.
Uncomment this code to implement data of previous years in finance chart.
When enabled, this replaces direct usage of `ExpensesData`/`ExpensesLinkData` with `currentExpensesData`
and `currentExpensesLinkData` so the chart can show 2023, 2024, or All Years combined.
*/

// // import Expenses2023Data from '../../config/finance/json-data/Expenses2023.json';
// // import ExpensesLink2023Data from '../../config/finance/json-data/ExpensesLink2023.json';
// //
// // // Selected year state
// // const [selectedYear, setSelectedYear] = useState<string>('2024');
// //
// // // Available years for the dropdown
// // const availableYears = ['2024', '2023', 'All Years'];
// //
// // // Function to get the appropriate data based on selected year
// // const getExpensesData = () => {
// // switch (selectedYear) {
// // case '2023':
// // return Expenses2023Data;
// // case 'All Years': {
// // // Combine all years data with year-prefixed keys
// // const combined: Record<string, ExpenseItem[]> = {};
// //
// // Object.entries(Expenses2023Data).forEach(([month, data]) => {
// // combined[`${month} 2023`] = data as ExpenseItem[];
// // });
// //
// // Object.entries(ExpensesData).forEach(([month, data]) => {
// // combined[`${month} 2024`] = data as ExpenseItem[];
// // });
// //
// // return combined;
// // }
// // case '2024':
// // default:
// // return ExpensesData;
// // }
// // };
// //
// // // Function to get the appropriate link data based on selected year
// // const getExpensesLinkData = () => {
// // switch (selectedYear) {
// // case '2023':
// // return ExpensesLink2023Data;
// // case 'All Years': {
// // // Merge links from both years, with 2023 taking precedence for duplicates
// // const allLinks = [...ExpensesLink2023Data];
// //
// // ExpensesLinkData.forEach((link) => {
// // if (!allLinks.find((l) => l.category === link.category)) {
// // allLinks.push(link);
// // }
// // });
// //
// // return allLinks;
// // }
// // case '2024':
// // default:
// // return ExpensesLinkData;
// // }
// // };
// //
// // // Get current data based on selected year
// // const currentExpensesData = getExpensesData();
// // const currentExpensesLinkData = getExpensesLinkData();

// (If you enable the block above, replace categories and months with following block of code:
// const categories: string[] = getUniqueCategories(currentExpensesData as Record<string, Array<{ Category: string }>>);
// const months: string[] = Object.keys(currentExpensesData);)
const categories: string[] = getUniqueCategories();
const months: string[] = Object.keys(ExpensesData);

Expand All @@ -38,13 +108,22 @@ export default function BarChartComponent() {
};
}, []);

// Filtering data based on selected month and category
// Filtering data based on selected month and category (code 2 - active)
const filteredData: ExpenseItem[] = Object.entries(ExpensesData).flatMap(([month, entries]) =>
selectedMonth === 'All Months' || selectedMonth === month
? entries.filter((entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory)
: []
);

// // --- if previous-years support is enabled: Uncomment code block given below
// // const filteredData: ExpenseItem[] = Object.entries(currentExpensesData).flatMap(([month, entries]) =>
// // selectedMonth === 'All Months' || selectedMonth === month
// // ? (entries as ExpenseItem[]).filter(
// // (entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory
// // )
// // : []
// // );

// Calculating total amount of filtered data
const totalAmount: number = filteredData.reduce((total, entry) => total + parseFloat(entry.Amount), 0);

Expand Down Expand Up @@ -95,6 +174,7 @@ export default function BarChartComponent() {
</option>
))}
</select>

<select
className='m-1 w-full rounded-md border border-gray-600 bg-violet p-2 pr-8 text-xs font-semibold text-white sm:w-auto md:w-48'
value={selectedMonth}
Expand All @@ -107,6 +187,21 @@ export default function BarChartComponent() {
</option>
))}
</select>

{/*
If you enable the previous-years block above, add the year selector here:
<select
className='m-1 w-full rounded-md border border-gray-600 bg-violet p-2 pr-8 text-xs font-semibold text-white sm:w-auto md:w-48'
value={selectedYear}
onChange={(e) => setSelectedYear(e.target.value)}
>
{availableYears.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
*/}
</div>
</div>
</div>
Expand All @@ -122,13 +217,24 @@ export default function BarChartComponent() {
fill='#7B5DD3FF'
onClick={(data) => {
const category = data.payload.Category;

// Active behavior: use the static 2024 ExpensesLinkData (code 2)
const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
(obj) => obj.category === category
);

if (matchedLinkObject) {
window.open(matchedLinkObject.link, '_blank');
}

// // --- if previous-years support is enabled: Uncomment code given below
// // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
// // (obj: ExpensesLinkItem) => obj.category === category
// // );
// //
// // if (matchedLinkObject) {
// // window.open(matchedLinkObject.link, '_blank');
// // }
}}
/>
</BarChart>
Expand Down
5 changes: 5 additions & 0 deletions next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
7 changes: 7 additions & 0 deletions utils/getUniqueCategories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,16 @@ import Expenses from '../config/finance/json-data/Expenses.json';
* @param {Object} expenses - The expenses data.
* @returns {string[]} An array of unique expense categories.
*/

// Uncomment below code to implement data of previous years in finance chart.
// export const getUniqueCategories = (expensesData: Record<string, Array<{ Category: string }>>): string[] => {
export const getUniqueCategories = (): string[] => {
const allCategories: string[] = [];

// uncomment the block below to switch to a
// version that accepts arbitrary/combined expense data (e.g., 2023 + 2024).
// Object.keys(expensesData).forEach((month) => {
// expensesData[month].forEach((entry: { Category: string }) => {
Object.keys(Expenses).forEach((month) => {
Expenses[month as keyof typeof Expenses].forEach((entry: { Category: string }) => {
if (!allCategories.includes(entry.Category)) {
Expand Down