Skip to content

Commit 9471b20

Browse files
one-communityone-community
authored
Merge pull request #3456 from OneCommunityGlobal/jaissica-create-bar-graph-comparing-actual-planned-expenses
jaissica - created actual vs planned expense bar chart
2 parents 838fe96 + a52620c commit 9471b20

3 files changed

Lines changed: 232 additions & 16 deletions

File tree

‎src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpectedVsActualBarChart.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.chart-container {
2+
width: 100%;
3+
min-height: 250px;
4+
max-height: 400px;
5+
padding: 0.5rem;
6+
box-sizing: border-box;
7+
overflow-x: auto;
8+
}
9+
10+
.recharts-wrapper text {
11+
font-size: 11px;
12+
}

‎src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpenseBarChart.jsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { BarChart, Bar, XAxis, YAxis, LabelList, ResponsiveContainer } from 'recharts';
2+
import { useState, useEffect } from 'react';
3+
4+
const categories = ['Plumbing', 'Electrical', 'Structural', 'Mechanical'];
5+
const projects = ['Project A', 'Project B', 'Project C'];
6+
7+
export default function ExpenseBarChart() {
8+
const [projectId, setProjectId] = useState('');
9+
const [categoryFilter, setCategoryFilter] = useState('ALL');
10+
const [startDate, setStartDate] = useState('');
11+
const [endDate, setEndDate] = useState('');
12+
const [data, setData] = useState([]);
13+
const [errorMessage, setErrorMessage] = useState('');
14+
15+
useEffect(() => {
16+
async function fetchData() {
17+
try {
18+
const rawData = [
19+
{
20+
projectId: 'Project A',
21+
category: 'Plumbing',
22+
plannedCost: 1000,
23+
actualCost: 1200,
24+
date: '2025-04-01',
25+
},
26+
{
27+
projectId: 'Project A',
28+
category: 'Electrical',
29+
plannedCost: 1500,
30+
actualCost: 1300,
31+
date: '2025-04-01',
32+
},
33+
{
34+
projectId: 'Project B',
35+
category: 'Plumbing',
36+
plannedCost: 1100,
37+
actualCost: 1050,
38+
date: '2025-04-02',
39+
},
40+
{
41+
projectId: 'Project B',
42+
category: 'Structural',
43+
plannedCost: 2200,
44+
actualCost: 2150,
45+
date: '2025-04-02',
46+
},
47+
{
48+
projectId: 'Project C',
49+
category: 'Mechanical',
50+
plannedCost: 1300,
51+
actualCost: 1350,
52+
date: '2025-04-03',
53+
},
54+
{
55+
projectId: 'Project C',
56+
category: 'Electrical',
57+
plannedCost: 1400,
58+
actualCost: 1600,
59+
date: '2025-04-03',
60+
},
61+
];
62+
63+
const filtered = rawData.filter(entry => {
64+
const entryDate = new Date(entry.date);
65+
const start = startDate ? new Date(startDate) : null;
66+
const end = endDate ? new Date(endDate) : null;
67+
const dateMatch = (!start || entryDate >= start) && (!end || entryDate <= end);
68+
const projectMatch = projectId === '' || entry.projectId === projectId;
69+
const categoryMatch = categoryFilter === 'ALL' || entry.category === categoryFilter;
70+
return dateMatch && projectMatch && categoryMatch;
71+
});
72+
73+
const aggregated = {};
74+
filtered.forEach(entry => {
75+
const key = entry.projectId;
76+
if (!aggregated[key]) {
77+
aggregated[key] = { project: key, planned: 0, actual: 0 };
78+
}
79+
aggregated[key].planned += entry.plannedCost;
80+
aggregated[key].actual += entry.actualCost;
81+
});
82+
83+
setData(Object.values(aggregated));
84+
} catch (error) {
85+
setErrorMessage('Something went wrong while loading chart data.');
86+
}
87+
}
88+
89+
fetchData();
90+
}, [projectId, categoryFilter, startDate, endDate]);
91+
92+
return (
93+
<div style={{ width: '100%', padding: '0.5rem' }}>
94+
<div style={{ textAlign: 'center', marginBottom: '0.75rem' }}>
95+
<h4 style={{ margin: 0, color: '#555', fontSize: '1.2rem' }}>Planned vs Actual Cost</h4>
96+
{errorMessage && (
97+
<div style={{ color: 'red', fontSize: '0.9rem', marginTop: '0.5rem' }}>
98+
{errorMessage}
99+
</div>
100+
)}
101+
</div>
102+
103+
<div
104+
style={{
105+
display: 'flex',
106+
flexWrap: 'wrap',
107+
justifyContent: 'center',
108+
alignItems: 'center',
109+
gap: '1rem',
110+
fontSize: '0.75rem',
111+
marginBottom: '0.5rem',
112+
}}
113+
>
114+
<label style={{ minWidth: '150px' }}>
115+
Project:
116+
<select
117+
value={projectId}
118+
onChange={e => setProjectId(e.target.value)}
119+
style={{ marginLeft: '0.3rem', width: '100%' }}
120+
>
121+
<option value="">All</option>
122+
{projects.map(p => (
123+
<option key={p} value={p}>
124+
{p}
125+
</option>
126+
))}
127+
</select>
128+
</label>
129+
<label style={{ minWidth: '150px' }}>
130+
Category:
131+
<select
132+
value={categoryFilter}
133+
onChange={e => setCategoryFilter(e.target.value)}
134+
style={{ marginLeft: '0.3rem', width: '100%' }}
135+
>
136+
<option value="ALL">All</option>
137+
{categories.map(cat => (
138+
<option key={cat} value={cat}>
139+
{cat}
140+
</option>
141+
))}
142+
</select>
143+
</label>
144+
<label style={{ minWidth: '150px' }}>
145+
Start Date:
146+
<input
147+
type="date"
148+
value={startDate}
149+
onChange={e => setStartDate(e.target.value)}
150+
style={{ marginLeft: '0.3rem', width: '100%' }}
151+
/>
152+
</label>
153+
<label style={{ minWidth: '150px' }}>
154+
End Date:
155+
<input
156+
type="date"
157+
value={endDate}
158+
onChange={e => setEndDate(e.target.value)}
159+
style={{ marginLeft: '0.3rem', width: '100%' }}
160+
/>
161+
</label>
162+
</div>
163+
164+
<div
165+
style={{
166+
display: 'flex',
167+
justifyContent: 'center',
168+
gap: '1rem',
169+
fontSize: '0.75rem',
170+
marginBottom: '0.75rem',
171+
flexWrap: 'wrap',
172+
}}
173+
>
174+
<span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
175+
<span
176+
style={{ width: 10, height: 10, backgroundColor: '#4285F4', display: 'inline-block' }}
177+
/>{' '}
178+
Planned
179+
</span>
180+
<span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
181+
<span
182+
style={{ width: 10, height: 10, backgroundColor: '#EA4335', display: 'inline-block' }}
183+
/>{' '}
184+
Actual
185+
</span>
186+
</div>
187+
188+
<div style={{ width: '100%', height: '240px' }}>
189+
<ResponsiveContainer width="100%" height="100%">
190+
<BarChart data={data} margin={{ top: 10, right: 10, left: 35, bottom: 35 }}>
191+
<XAxis
192+
dataKey="project"
193+
tick={{ fontSize: 10 }}
194+
interval={0}
195+
angle={-15}
196+
textAnchor="end"
197+
label={{ value: 'Project Name', position: 'insideBottom', dy: 25, fontSize: 10 }}
198+
/>
199+
<YAxis tick={{ fontSize: 10 }} axisLine tickLine />
200+
<Bar dataKey="planned" fill="#4285F4" name="Planned">
201+
<LabelList dataKey="planned" position="top" style={{ fontSize: 8 }} />
202+
</Bar>
203+
<Bar dataKey="actual" fill="#EA4335" name="Actual">
204+
<LabelList dataKey="actual" position="top" style={{ fontSize: 8 }} />
205+
</Bar>
206+
</BarChart>
207+
</ResponsiveContainer>
208+
</div>
209+
</div>
210+
);
211+
}

‎src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import WeeklyProjectSummaryHeader from './WeeklyProjectSummaryHeader';
88
import PaidLaborCost from './PaidLaborCost/PaidLaborCost';
99
import { fetchAllMaterials } from '../../../actions/bmdashboard/materialsActions';
1010
import QuantityOfMaterialsUsed from './QuantityOfMaterialsUsed/QuantityOfMaterialsUsed';
11+
import ExpenseBarChart from './Financials/ExpenseBarChart';
1112
import ActualVsPlannedCost from './ActualVsPlannedCost/ActualVsPlannedCost';
1213
import TotalMaterialCostPerProject from './TotalMaterialCostPerProject/TotalMaterialCostPerProject';
1314
import styles from './WeeklyProjectSummary.module.css';
@@ -244,23 +245,15 @@ export default function WeeklyProjectSummary() {
244245
key: 'Financials',
245246
className: 'large',
246247
content: (
247-
<>
248-
{Array.from({ length: 4 }).map(() => {
249-
const uniqueId = uuidv4();
250-
return (
251-
<div
252-
key={uniqueId}
253-
className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}
254-
>
255-
📊 Card
256-
</div>
257-
);
258-
})}
259-
260-
<div className={`${styles.weeklyProjectSummaryCard} ${styles.financialBig}`}>
261-
📊 Big Card
248+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
249+
<div className="weekly-project-summary-card financial-small">📊 Card</div>
250+
<div className="weekly-project-summary-card financial-small financial-chart">
251+
<ExpenseBarChart />
262252
</div>
263-
</>
253+
<div className="weekly-project-summary-card financial-small">📊 Card</div>
254+
<div className="weekly-project-summary-card financial-small">📊 Card</div>
255+
<div className="weekly-project-summary-card financial-big">📊 Big Card</div>
256+
</div>
264257
),
265258
},
266259
{

0 commit comments

Comments
 (0)