Skip to content

Commit 3a15fb6

Browse files
sarthakNITTsarthakNITT
committed
fixed: Commented code and added TODOs
1 parent 391c125 commit 3a15fb6

File tree

2 files changed

+124
-82
lines changed

2 files changed

+124
-82
lines changed

‎components/FinancialSummary/BarChartComponent.tsx‎

Lines changed: 114 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { Bar, BarChart, CartesianGrid, Legend, Tooltip, YAxis } from 'recharts';
44
import type { ExpenseItem, ExpensesLinkItem } from '@/types/FinancialSummary/BarChartComponent';
55

66
import ExpensesData from '../../config/finance/json-data/Expenses.json';
7-
import Expenses2023Data from '../../config/finance/json-data/Expenses2023.json';
87
import ExpensesLinkData from '../../config/finance/json-data/ExpensesLink.json';
9-
import ExpensesLink2023Data from '../../config/finance/json-data/ExpensesLink2023.json';
108
import { getUniqueCategories } from '../../utils/getUniqueCategories';
119
import CustomTooltip from './CustomTooltip';
1210
import ExpensesCard from './ExpensesCard';
@@ -18,67 +16,81 @@ export default function BarChartComponent() {
1816
// Setting up state variables using useState hook
1917
const [selectedCategory, setSelectedCategory] = useState<string>('All Categories');
2018
const [selectedMonth, setSelectedMonth] = useState<string>('All Months');
21-
const [selectedYear, setSelectedYear] = useState<string>('2024');
2219
const [windowWidth, setWindowWidth] = useState<number>(0);
2320

24-
// Available years for the dropdown
25-
const availableYears = ['2024', '2023', 'All Years'];
26-
27-
// Function to get the appropriate data based on selected year
28-
const getExpensesData = () => {
29-
switch (selectedYear) {
30-
case '2023':
31-
return Expenses2023Data;
32-
case 'All Years': {
33-
// Combine all years data with year-prefixed keys
34-
const combined: Record<string, ExpenseItem[]> = {};
35-
36-
Object.entries(Expenses2023Data).forEach(([month, data]) => {
37-
combined[`${month} 2023`] = data as ExpenseItem[];
38-
});
39-
40-
Object.entries(ExpensesData).forEach(([month, data]) => {
41-
combined[`${month} 2024`] = data as ExpenseItem[];
42-
});
43-
44-
return combined;
45-
}
46-
case '2024':
47-
default:
48-
return ExpensesData;
49-
}
50-
};
51-
52-
// Function to get the appropriate link data based on selected year
53-
const getExpensesLinkData = () => {
54-
switch (selectedYear) {
55-
case '2023':
56-
return ExpensesLink2023Data;
57-
case 'All Years': {
58-
// Merge links from both years, with 2023 taking precedence for duplicates
59-
const allLinks = [...ExpensesLink2023Data];
60-
61-
ExpensesLinkData.forEach((link) => {
62-
if (!allLinks.find((l) => l.category === link.category)) {
63-
allLinks.push(link);
64-
}
65-
});
66-
67-
return allLinks;
68-
}
69-
case '2024':
70-
default:
71-
return ExpensesLinkData;
72-
}
73-
};
74-
75-
// Get current data based on selected year
76-
const currentExpensesData = getExpensesData();
77-
const currentExpensesLinkData = getExpensesLinkData();
78-
79-
// Extracting unique categories and months from the current data
80-
const categories: string[] = getUniqueCategories(currentExpensesData as Record<string, Array<{ Category: string }>>);
81-
const months: string[] = Object.keys(currentExpensesData);
21+
/*
22+
TODO: Uncomment the block below to enable previous-years data (2023) and "All Years" selection.
23+
Uncomment this code to implement data of previous years in finance chart.
24+
When enabled, this replaces direct usage of `ExpensesData`/`ExpensesLinkData` with `currentExpensesData`
25+
and `currentExpensesLinkData` so the chart can show 2023, 2024, or All Years combined.
26+
*/
27+
28+
// // import Expenses2023Data from '../../config/finance/json-data/Expenses2023.json';
29+
// // import ExpensesLink2023Data from '../../config/finance/json-data/ExpensesLink2023.json';
30+
// //
31+
// // // Selected year state (from code 1)
32+
// // const [selectedYear, setSelectedYear] = useState<string>('2024');
33+
// //
34+
// // // Available years for the dropdown (from code 1)
35+
// // const availableYears = ['2024', '2023', 'All Years'];
36+
// //
37+
// // // Function to get the appropriate data based on selected year (from code 1)
38+
// // const getExpensesData = () => {
39+
// // switch (selectedYear) {
40+
// // case '2023':
41+
// // return Expenses2023Data;
42+
// // case 'All Years': {
43+
// // // Combine all years data with year-prefixed keys
44+
// // const combined: Record<string, ExpenseItem[]> = {};
45+
// //
46+
// // Object.entries(Expenses2023Data).forEach(([month, data]) => {
47+
// // combined[`${month} 2023`] = data as ExpenseItem[];
48+
// // });
49+
// //
50+
// // Object.entries(ExpensesData).forEach(([month, data]) => {
51+
// // combined[`${month} 2024`] = data as ExpenseItem[];
52+
// // });
53+
// //
54+
// // return combined;
55+
// // }
56+
// // case '2024':
57+
// // default:
58+
// // return ExpensesData;
59+
// // }
60+
// // };
61+
// //
62+
// // // Function to get the appropriate link data based on selected year (from code 1)
63+
// // const getExpensesLinkData = () => {
64+
// // switch (selectedYear) {
65+
// // case '2023':
66+
// // return ExpensesLink2023Data;
67+
// // case 'All Years': {
68+
// // // Merge links from both years, with 2023 taking precedence for duplicates
69+
// // const allLinks = [...ExpensesLink2023Data];
70+
// //
71+
// // ExpensesLinkData.forEach((link) => {
72+
// // if (!allLinks.find((l) => l.category === link.category)) {
73+
// // allLinks.push(link);
74+
// // }
75+
// // });
76+
// //
77+
// // return allLinks;
78+
// // }
79+
// // case '2024':
80+
// // default:
81+
// // return ExpensesLinkData;
82+
// // }
83+
// // };
84+
// //
85+
// // // Get current data based on selected year (from code 1)
86+
// // const currentExpensesData = getExpensesData();
87+
// // const currentExpensesLinkData = getExpensesLinkData();
88+
89+
// (If you enable the block above, replace categories and months with following block of code:
90+
// const categories: string[] = getUniqueCategories(currentExpensesData as Record<string, Array<{ Category: string }>>);
91+
// const months: string[] = Object.keys(currentExpensesData);)
92+
const categories: string[] = getUniqueCategories();
93+
const months: string[] = Object.keys(ExpensesData);
8294

8395
// Effect hook to update windowWidth state on resize
8496
useEffect(() => {
@@ -96,15 +108,22 @@ export default function BarChartComponent() {
96108
};
97109
}, []);
98110

99-
// Filtering data based on selected month and category
100-
const filteredData: ExpenseItem[] = Object.entries(currentExpensesData).flatMap(([month, entries]) =>
111+
// Filtering data based on selected month and category (code 2 - active)
112+
const filteredData: ExpenseItem[] = Object.entries(ExpensesData).flatMap(([month, entries]) =>
101113
selectedMonth === 'All Months' || selectedMonth === month
102-
? (entries as ExpenseItem[]).filter(
103-
(entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory
104-
)
114+
? entries.filter((entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory)
105115
: []
106116
);
107117

118+
// // --- if previous-years support is enabled: Uncomment code block given below
119+
// // const filteredData: ExpenseItem[] = Object.entries(currentExpensesData).flatMap(([month, entries]) =>
120+
// // selectedMonth === 'All Months' || selectedMonth === month
121+
// // ? (entries as ExpenseItem[]).filter(
122+
// // (entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory
123+
// // )
124+
// // : []
125+
// // );
126+
108127
// Calculating total amount of filtered data
109128
const totalAmount: number = filteredData.reduce((total, entry) => total + parseFloat(entry.Amount), 0);
110129

@@ -155,6 +174,7 @@ export default function BarChartComponent() {
155174
</option>
156175
))}
157176
</select>
177+
158178
<select
159179
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'
160180
value={selectedMonth}
@@ -167,17 +187,21 @@ export default function BarChartComponent() {
167187
</option>
168188
))}
169189
</select>
170-
<select
171-
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'
172-
value={selectedYear}
173-
onChange={(e) => setSelectedYear(e.target.value)}
174-
>
175-
{availableYears.map((year) => (
176-
<option key={year} value={year}>
177-
{year}
178-
</option>
179-
))}
180-
</select>
190+
191+
{/*
192+
If you enable the previous-years block above, add the year selector here:
193+
<select
194+
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'
195+
value={selectedYear}
196+
onChange={(e) => setSelectedYear(e.target.value)}
197+
>
198+
{availableYears.map((year) => (
199+
<option key={year} value={year}>
200+
{year}
201+
</option>
202+
))}
203+
</select>
204+
*/}
181205
</div>
182206
</div>
183207
</div>
@@ -193,13 +217,24 @@ export default function BarChartComponent() {
193217
fill='#7B5DD3FF'
194218
onClick={(data) => {
195219
const category = data.payload.Category;
196-
const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
197-
(obj: ExpensesLinkItem) => obj.category === category
220+
221+
// Active behavior: use the static 2024 ExpensesLinkData (code 2)
222+
const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
223+
(obj) => obj.category === category
198224
);
199225

200226
if (matchedLinkObject) {
201227
window.open(matchedLinkObject.link, '_blank');
202228
}
229+
230+
// // --- if previous-years support is enabled: Uncomment code given below
231+
// // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
232+
// // (obj: ExpensesLinkItem) => obj.category === category
233+
// // );
234+
// //
235+
// // if (matchedLinkObject) {
236+
// // window.open(matchedLinkObject.link, '_blank');
237+
// // }
203238
}}
204239
/>
205240
</BarChart>

‎utils/getUniqueCategories.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,18 @@ import Expenses from '../config/finance/json-data/Expenses.json';
66
* @param {Object} expenses - The expenses data.
77
* @returns {string[]} An array of unique expense categories.
88
*/
9-
export const getUniqueCategories = (expensesData: Record<string, Array<{ Category: string }>>): string[] => {
9+
10+
// Uncomment below code to implement data of previous years in finance chart.
11+
// export const getUniqueCategories = (expensesData: Record<string, Array<{ Category: string }>>): string[] => {
12+
export const getUniqueCategories = (): string[] => {
1013
const allCategories: string[] = [];
1114

12-
Object.keys(expensesData).forEach((month) => {
13-
expensesData[month].forEach((entry: { Category: string }) => {
15+
// uncomment the block below to switch to a
16+
// version that accepts arbitrary/combined expense data (e.g., 2023 + 2024).
17+
// Object.keys(expensesData).forEach((month) => {
18+
// expensesData[month].forEach((entry: { Category: string }) => {
19+
Object.keys(Expenses).forEach((month) => {
20+
Expenses[month as keyof typeof Expenses].forEach((entry: { Category: string }) => {
1421
if (!allCategories.includes(entry.Category)) {
1522
allCategories.push(entry.Category);
1623
}

0 commit comments

Comments
 (0)