Skip to content

Commit ebb3b60

Browse files
Neeraj-KondaveetiNeeraj-Kondaveeti
committed
Add amount label, extend material bars, and include unit tests for ResourceUsage component
1 parent 29af793 commit ebb3b60

3 files changed

Lines changed: 194 additions & 106 deletions

File tree

‎src/components/CommunityPortal/ResourceUsage/ResourceUsage.jsx‎

Lines changed: 124 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useState, useEffect } from 'react';
3+
import { useState, useEffect, useRef} from 'react';
44
import { Dropdown } from 'react-bootstrap';
55
import {
66
BarChart,
@@ -82,34 +82,38 @@ const insightDefinitions = {
8282
'Highest cost venues/hr': 'Venue with the highest hourly cost during the selected period.',
8383
};
8484

85+
function filterDataByDate(data, timePeriod) {
86+
return data;
87+
}
88+
8589
function CustomTooltip({ active, payload, darkMode }) {
8690
if (!active || !payload || !payload.length) return null;
8791

88-
const data = payload[0].payload;
92+
const data = payload[0].payload;
8993

90-
return (
91-
<div
92-
className={styles.chartTooltip}
93-
style={{
94-
backgroundColor: darkMode ? '#1e293b' : '#ffffff',
95-
color: darkMode ? '#f8fafc' : '#111827',
96-
}}
97-
>
98-
<div className={styles.tooltipTitle}>{data.name}</div>
94+
return (
95+
<div
96+
className={styles.chartTooltip}
97+
style={{
98+
backgroundColor: darkMode ? '#1e293b' : '#ffffff',
99+
color: darkMode ? '#f8fafc' : '#111827',
100+
}}
101+
>
102+
<div className={styles.tooltipTitle}>{data.name}</div>
99103

100-
<div className={styles.tooltipRow}>
101-
<span className={styles.tooltipDot} style={{ background: '#22c55e' }} />
102-
<span>Returned</span>
103-
<span className={styles.tooltipValue}>{data.returned}</span>
104-
</div>
104+
<div className={styles.tooltipRow}>
105+
<span className={styles.tooltipDot} style={{ background: '#22c55e' }} />
106+
<span>Returned</span>
107+
<span className={styles.tooltipValue}>{data.returned}</span>
108+
</div>
105109

106-
<div className={styles.tooltipRow}>
107-
<span className={styles.tooltipDot} style={{ background: '#fca5a5' }} />
108-
<span>Loaned</span>
109-
<span className={styles.tooltipValue}>{data.loaned}</span>
110-
</div>
110+
<div className={styles.tooltipRow}>
111+
<span className={styles.tooltipDot} style={{ background: '#fca5a5' }} />
112+
<span>Loaned</span>
113+
<span className={styles.tooltipValue}>{data.loaned}</span>
111114
</div>
112-
);
115+
</div>
116+
);
113117
}
114118

115119
export default function ResourceUsage() {
@@ -120,10 +124,21 @@ export default function ResourceUsage() {
120124
const [insights, setInsights] = useState(allInsights['Last Week']);
121125

122126
const darkMode = useSelector(state => state.theme.darkMode);
127+
const badgeRefs = useRef([]);
128+
129+
useEffect(() => {
130+
badgeRefs.current.forEach(badge => {
131+
if (badge) {
132+
badge.style.setProperty('color', '#000', 'important');
133+
}
134+
});
135+
}, [insights]);
123136

124137
useEffect(() => {
125-
setData(allData[resourceType.toLowerCase()]);
126-
}, [resourceType]);
138+
const resourceTypeKey = resourceType.toLowerCase();
139+
const filteredData = filterDataByDate(allData[resourceTypeKey], timePeriod);
140+
setData(filteredData);
141+
}, [resourceType, timePeriod, allData]);
127142

128143
useEffect(() => {
129144
setInsights(allInsights[insightsTimePeriod]);
@@ -172,85 +187,98 @@ export default function ResourceUsage() {
172187
Amount
173188
</div>
174189

175-
<ResponsiveContainer width="100%" height="100%">
176-
<BarChart data={data} margin={{ top: 20, right: 30, left: 30, bottom: 80 }}>
177-
<CartesianGrid
178-
strokeDasharray="3 3"
179-
stroke={darkMode ? '#3A506B' : '#eee'}
180-
vertical={false}
181-
/>
190+
{data && data.length > 0 ? (
191+
<ResponsiveContainer width="100%" height="100%">
192+
<BarChart data={data} margin={{ top: 20, right: 30, left: 30, bottom: 80 }}>
193+
<CartesianGrid
194+
strokeDasharray="3 3"
195+
stroke={darkMode ? '#3A506B' : '#eee'}
196+
vertical={false}
197+
/>
182198

183-
<XAxis
184-
dataKey="name"
185-
axisLine={false}
186-
tickLine={false}
187-
tick={{
188-
fill: darkMode ? '#ffffff' : '#666',
189-
fontWeight: 700,
190-
fontSize: 12,
191-
}}
192-
/>
199+
<XAxis
200+
dataKey="name"
201+
axisLine={false}
202+
tickLine={false}
203+
tick={{
204+
fill: darkMode ? '#ffffff' : '#666',
205+
fontWeight: 700,
206+
fontSize: 12,
207+
}}
208+
/>
193209

194-
<YAxis
195-
axisLine={false}
196-
tickLine={false}
197-
tick={{
198-
fill: darkMode ? '#ffffff' : '#666',
199-
fontWeight: 700,
200-
fontSize: 12,
201-
}}
202-
/>
210+
<YAxis
211+
axisLine={false}
212+
tickLine={false}
213+
tick={{
214+
fill: darkMode ? '#ffffff' : '#666',
215+
fontWeight: 700,
216+
fontSize: 12,
217+
}}
218+
/>
203219

204-
<Tooltip content={<CustomTooltip darkMode={darkMode} />} />
220+
<Tooltip content={<CustomTooltip darkMode={darkMode} />} />
205221

206-
<Legend
207-
align="right"
208-
verticalAlign="top"
209-
iconType="circle"
210-
iconSize={8}
211-
wrapperStyle={{
212-
color: darkMode ? '#ffffff' : '#666',
213-
}}
214-
/>
222+
<Legend
223+
align="right"
224+
verticalAlign="top"
225+
iconType="circle"
226+
iconSize={8}
227+
wrapperStyle={{
228+
color: darkMode ? '#ffffff' : '#666',
229+
}}
230+
/>
215231

216-
<Bar dataKey="returned" stackId="a" fill="#22c55e" radius={[4, 4, 0, 0]} />
217-
<Bar dataKey="loaned" stackId="a" fill="#fca5a5" radius={[4, 4, 0, 0]} />
218-
</BarChart>
219-
</ResponsiveContainer>
220-
</div>
221-
</div>
222-
223-
{/* RIGHT SECTION */}
224-
<div className={`${styles.insightsSection} ${darkMode ? styles.darkInsightsSection : ''}`}>
225-
<div className={styles.insightsHeader}>
226-
<h2>Insights</h2>
227-
228-
<Dropdown>
229-
<Dropdown.Toggle className={styles.customDropdown}>
230-
{insightsTimePeriod}
231-
</Dropdown.Toggle>
232-
<Dropdown.Menu>
233-
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Week')}>
234-
This Week
235-
</Dropdown.Item>
236-
<Dropdown.Item onClick={() => setInsightsTimePeriod('Last Week')}>
237-
Last Week
238-
</Dropdown.Item>
239-
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Month')}>
240-
This Month
241-
</Dropdown.Item>
242-
</Dropdown.Menu>
243-
</Dropdown>
244-
</div>
232+
<Bar dataKey="returned" stackId="a" fill="#22c55e" radius={[4, 4, 0, 0]} />
233+
<Bar dataKey="loaned" stackId="a" fill="#fca5a5" radius={[4, 4, 0, 0]} />
234+
</BarChart>
235+
</ResponsiveContainer>
236+
) : (
237+
<div
238+
style={{
239+
display: 'flex',
240+
justifyContent: 'center',
241+
alignItems: 'center',
242+
height: '100%',
243+
}}
244+
>
245+
<p>No data available for the selected time period and resource type.</p>
246+
</div>
247+
)}
248+
</div>
249+
</div>
245250

251+
{/* RIGHT SECTION */}
252+
<div className={`${styles.insightsSection} ${darkMode ? 'bg-space-cadet text-light' : ''}`}>
253+
<div className={styles.insightsHeader}>
254+
<h2>Insights</h2>
255+
<Dropdown>
256+
<Dropdown.Toggle className={styles.customDropdown}>
257+
{insightsTimePeriod}
258+
</Dropdown.Toggle>
259+
<Dropdown.Menu>
260+
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Week')}>
261+
This Week
262+
</Dropdown.Item>
263+
<Dropdown.Item onClick={() => setInsightsTimePeriod('Last Week')}>
264+
Last Week
265+
</Dropdown.Item>
266+
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Month')}>
267+
This Month
268+
</Dropdown.Item>
269+
</Dropdown.Menu>
270+
</Dropdown>
271+
</div>
246272
<div className={styles.insightsGrid}>
247273
{insights.map((insight, idx) => (
248274
<div
249275
key={idx}
250276
className={`${styles.insightCard} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}
251277
>
252-
{/* 🔹 ADD THIS LINE RIGHT HERE */}
253-
<div className={styles.insightTooltip}>{insightDefinitions[insight.title]}</div>
278+
{/* Tooltip description */}
279+
<div className={styles.insightTooltip}>
280+
{insightDefinitions[insight.title]}
281+
</div>
254282

255283
<div
256284
className={styles.insightTitle}
@@ -261,17 +289,20 @@ export default function ResourceUsage() {
261289
</div>
262290

263291
<div
292+
ref={el => (badgeRefs.current[idx] = el)}
264293
className={`${styles.insightBadge} ${darkMode ? 'text-dark' : ''}`}
265294
style={{ backgroundColor: insight.color }}
266295
>
267296
{insight.value}
268297
</div>
269298

270-
<div className={styles.insightMeta}>Based on returned vs loaned comparison</div>
299+
<div className={styles.insightMeta}>
300+
Based on returned vs loaned comparison
301+
</div>
271302
</div>
272303
))}
273304
</div>
305+
</div>
274306
</div>
275-
</div>
276307
);
277308
}

0 commit comments

Comments
 (0)