Skip to content

Commit 0c11cc1

Browse files
Neeraj-KondaveetiNeeraj-Kondaveeti
committed
Merge remote-tracking branch 'origin/development' into Neeraj_Resource_Management_Dashboard
2 parents a28fbd4 + 19fe262 commit 0c11cc1

File tree

2 files changed

+111
-19
lines changed

2 files changed

+111
-19
lines changed

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

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,15 @@ function InjuryCategoryBarChart() {
131131
const showLabels = seriesProjectIds.length <= 4;
132132

133133
return (
134-
<div className={`${styles['injury-chart-container']} ${darkMode ? 'darkMode' : ''}`}>
135-
<div className="injury-chart-header">
134+
<div className={`${styles['injury-chart-container']} ${darkMode ? styles.darkMode : ''}`}>
135+
<div className={styles['injury-chart-header']}>
136136
<h3 className={styles['injury-chart-title']}>
137137
Injury Severity by Category of Worker Injured
138138
</h3>
139139

140140
<div className={styles['injury-chart-filters']}>
141-
<div className="filter">
142-
<label htmlFor="project-names-select" className="injury-chart-label">
141+
<div className={styles.filter}>
142+
<label htmlFor="project-names-select" className={styles['injury-chart-label']}>
143143
Projects
144144
</label>
145145
<Select
@@ -153,8 +153,8 @@ function InjuryCategoryBarChart() {
153153
/>
154154
</div>
155155

156-
<div className="filter">
157-
<label htmlFor="severities-select" className="injury-chart-label">
156+
<div className={styles.filter}>
157+
<label htmlFor="severities-select" className={styles['injury-chart-label']}>
158158
Severities
159159
</label>
160160
<Select
@@ -168,8 +168,8 @@ function InjuryCategoryBarChart() {
168168
/>
169169
</div>
170170

171-
<div className="filter">
172-
<label htmlFor="injury-types-select" className="injury-chart-label">
171+
<div className={styles.filter}>
172+
<label htmlFor="injury-types-select" className={styles['injury-chart-label']}>
173173
Injury types
174174
</label>
175175
<Select
@@ -183,8 +183,8 @@ function InjuryCategoryBarChart() {
183183
/>
184184
</div>
185185

186-
<div className="filter">
187-
<label htmlFor="start-date" className="injury-chart-label">
186+
<div className={styles.filter}>
187+
<label htmlFor="start-date" className={styles['injury-chart-label']}>
188188
Start date
189189
</label>
190190
<DatePicker
@@ -199,8 +199,8 @@ function InjuryCategoryBarChart() {
199199
/>
200200
</div>
201201

202-
<div className="filter">
203-
<label htmlFor="end-date" className="injury-chart-label">
202+
<div className={styles.filter}>
203+
<label htmlFor="end-date" className={styles['injury-chart-label']}>
204204
End date
205205
</label>
206206
<DatePicker
@@ -218,38 +218,82 @@ function InjuryCategoryBarChart() {
218218
</div>
219219

220220
{loading && <p>Loading…</p>}
221-
{!loading && error && <p className="error">Error: {String(error)}</p>}
221+
{!loading && error && <p className={styles.error}>Error: {String(error)}</p>}
222222

223223
{!loading && !error && (
224224
<ResponsiveContainer width="100%" height={420}>
225-
<BarChart data={chartData} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
225+
<BarChart
226+
data={chartData}
227+
margin={{ top: 16, right: 24, bottom: 8, left: 8 }}
228+
style={{
229+
backgroundColor: darkMode ? '#1e2a3a' : '#fff',
230+
borderRadius: '8px',
231+
padding: '8px',
232+
}}
233+
>
226234
<XAxis
227235
dataKey="workerCategory"
228236
interval={0}
229237
angle={-45}
230238
textAnchor="end"
231239
height={80}
232240
tick={{ fill: darkMode ? '#fff' : '#000' }}
241+
axisLine={{ stroke: darkMode ? '#888' : '#000' }}
242+
tickLine={{ stroke: darkMode ? '#888' : '#000' }}
243+
/>
244+
<YAxis
245+
allowDecimals={false}
246+
tick={{ fill: darkMode ? '#fff' : '#000' }}
247+
axisLine={{ stroke: darkMode ? '#888' : '#000' }}
248+
tickLine={{ stroke: darkMode ? '#888' : '#000' }}
233249
/>
234-
<YAxis allowDecimals={false} />
235250
<Tooltip
251+
contentStyle={{
252+
backgroundColor: darkMode ? '#2b3e59' : '#fff',
253+
color: darkMode ? '#fff' : '#000',
254+
border: 'none',
255+
}}
256+
labelStyle={{
257+
color: darkMode ? '#fff' : '#000',
258+
}}
236259
formatter={(value, name) => [
237260
value,
238261
projectNameById.get(String(name)) || 'Unknown Project',
239262
]}
240263
/>
241264
<Legend
242-
wrapperStyle={{ maxHeight: 72, overflowY: 'auto' }}
265+
wrapperStyle={{
266+
maxHeight: 72,
267+
overflowY: 'auto',
268+
color: darkMode ? '#fff' : '#000',
269+
}}
243270
payload={seriesProjectIds.map(pid => ({
244271
id: pid,
245272
type: 'square',
246273
value: projectNameById.get(pid) || 'Unknown Project',
247274
}))}
248275
/>
249276
{seriesProjectIds.map((pid, index) => (
250-
<Bar key={pid} dataKey={pid} fill={index % 2 === 0 ? '#17c9d3' : '#000'}>
277+
<Bar
278+
key={pid}
279+
dataKey={pid}
280+
fill={
281+
darkMode
282+
? index % 2 === 0
283+
? '#00A3A1'
284+
: '#1E90FF'
285+
: index % 2 === 0
286+
? '#17c9d3'
287+
: '#000'
288+
}
289+
>
251290
{showLabels && (
252-
<LabelList dataKey={pid} position="top" formatter={v => (v > 0 ? v : '')} />
291+
<LabelList
292+
dataKey={pid}
293+
position="top"
294+
formatter={v => (v > 0 ? v : '')}
295+
fill={darkMode ? '#fff' : '#000'}
296+
/>
253297
)}
254298
</Bar>
255299
))}
@@ -258,7 +302,7 @@ function InjuryCategoryBarChart() {
258302
)}
259303

260304
{!loading && !error && chartData.length === 0 && (
261-
<div className="empty">No data for selected filters.</div>
305+
<div className={styles.empty}>No data for selected filters.</div>
262306
)}
263307
</div>
264308
);

‎src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
.injury-chart-container {
22
padding: 1rem;
3+
background-color: #ffffff;
4+
border-radius: 8px;
5+
transition: background-color 0.3s ease, color 0.3s ease;
36
}
47

58
.injury-chart-title {
@@ -16,7 +19,38 @@
1619
margin-bottom: 2rem;
1720
}
1821

22+
.filter {
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
27+
.injury-chart-label {
28+
color: #444;
29+
font-size: 0.9rem;
30+
margin-bottom: 0.25rem;
31+
}
32+
33+
.error {
34+
color: #d9534f;
35+
}
36+
37+
.empty {
38+
color: #888;
39+
text-align: center;
40+
margin-top: 1rem;
41+
}
42+
1943
/* ------------------- DARK MODE STYLES ------------------- */
44+
.darkMode {
45+
background-color: #0f1824;
46+
color: white;
47+
}
48+
49+
.darkMode .injury-chart-container {
50+
background-color: #0f1824;
51+
color: white;
52+
}
53+
2054
.darkMode .injury-chart-title {
2155
color: white;
2256
}
@@ -25,6 +59,13 @@
2559
color: white;
2660
}
2761

62+
.darkMode .injury-chart-filters {
63+
background-color: #142237;
64+
color: black;
65+
border-radius: 8px;
66+
padding: 1rem;
67+
}
68+
2869
.darkMode .injury-select__control {
2970
background-color: #2b3e59 !important;
3071
color: white !important;
@@ -54,3 +95,10 @@
5495
border-radius: 4px;
5596
}
5697

98+
.darkMode .error {
99+
color: #ff6b6b;
100+
}
101+
102+
.darkMode .empty {
103+
color: #ccc;
104+
}

0 commit comments

Comments
 (0)