Skip to content

Commit 7d34c7d

Browse files
one-communityone-community
authored
Merge pull request #4461 from OneCommunityGlobal/aayush_lessons_learned_hover_ghost_bar_graph
Aayush lessons learned hover ghost bar graph
2 parents d3e1389 + be569ba commit 7d34c7d

2 files changed

Lines changed: 105 additions & 95 deletions

File tree

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

Lines changed: 104 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
Legend,
99
LabelList,
1010
ResponsiveContainer,
11-
CartesianGrid,
1211
} from 'recharts';
1312
import Select from 'react-select';
1413
import DatePicker from 'react-datepicker';
@@ -142,39 +141,38 @@ function InjuryCategoryBarChart() {
142141
'#38BDF8', // cyan
143142
];
144143

145-
const selectStyles = darkMode
146-
? {
147-
control: base => ({
148-
...base,
149-
backgroundColor: '#2b3e59',
150-
color: 'white',
151-
}),
152-
menu: base => ({
153-
...base,
154-
backgroundColor: '#2b3e59',
155-
color: 'white',
156-
}),
157-
option: (base, state) => ({
158-
...base,
159-
color: 'white',
160-
backgroundColor: state.isSelected
161-
? 'rgba(255, 255, 255, 0.15)'
162-
: state.isFocused
163-
? 'rgba(255, 255, 255, 0.1)'
164-
: 'transparent',
165-
'&:active': {
166-
backgroundColor: 'rgba(255, 255, 255, 0.2)',
167-
},
168-
}),
169-
singleValue: base => ({
170-
...base,
171-
color: 'white',
172-
}),
173-
}
174-
: {};
144+
const selectStyles = darkMode && {
145+
control: base => ({
146+
...base,
147+
backgroundColor: '#2b3e59',
148+
color: 'white',
149+
}),
150+
menu: base => ({
151+
...base,
152+
backgroundColor: '#2b3e59',
153+
color: 'white',
154+
}),
155+
option: (base, state) => ({
156+
...base,
157+
color: 'white',
158+
backgroundColor: state.isSelected
159+
? 'rgba(255, 255, 255, 0.15)'
160+
: state.isFocused
161+
? 'rgba(255, 255, 255, 0.1)'
162+
: 'transparent',
163+
'&:active': {
164+
backgroundColor: 'rgba(255, 255, 255, 0.2)',
165+
},
166+
}),
167+
singleValue: base => ({
168+
...base,
169+
color: 'white',
170+
}),
171+
};
172+
// : {};
175173

176174
return (
177-
<div className={`injury-chart-container ${darkMode ? 'darkMode' : ''}`}>
175+
<div className={`injury-chart-container ${darkMode && 'darkMode'}`}>
178176
<div className="injury-chart-header">
179177
<h3 className="injury-chart-title">Injury Severity by Category of Worker Injured</h3>
180178

@@ -266,68 +264,80 @@ function InjuryCategoryBarChart() {
266264
{loading && <p>Loading…</p>}
267265
{!loading && error && <p className="error">Error: {String(error)}</p>}
268266

269-
{!loading && !error && (
270-
<div style={{ width: '100%', overflowX: 'auto' }}>
271-
<ResponsiveContainer width="100%" height={420}>
272-
<BarChart data={chartData} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
273-
<XAxis
274-
dataKey="workerCategory"
275-
interval={0}
276-
angle={-45}
277-
dy={12}
278-
textAnchor="end"
279-
height={90}
280-
tick={{
281-
className: darkMode ? 'injury-xaxis-tick-dark' : 'injury-xaxis-tick-light',
282-
}}
283-
/>
284-
<YAxis
285-
allowDecimals={false}
286-
tick={{
287-
className: darkMode ? 'injury-yaxis-tick-dark' : 'injury-yaxis-tick-light',
288-
}}
289-
/>
290-
<CartesianGrid stroke={darkMode ? '#4a5568' : '#cccccc'} strokeDasharray="3 3" />
291-
<Tooltip
292-
contentStyle={{
293-
backgroundColor: darkMode ? '#1e1e1e' : '#ffffff',
294-
border: `1px solid ${darkMode ? '#4a5568' : '#cccccc'}`,
295-
color: darkMode ? '#ffffff' : '#000000',
296-
borderRadius: '6px',
297-
}}
298-
itemStyle={{
299-
color: darkMode ? '#ffffff' : '#000000',
300-
}}
301-
formatter={(value, name) => [
302-
value,
303-
projectNameById.get(String(name)) || 'Unknown Project',
304-
]}
305-
/>
306-
<Legend
307-
wrapperStyle={{ maxHeight: 72, overflowY: 'auto' }}
308-
payload={seriesProjectIds.map((pid, index) => ({
309-
id: pid,
310-
type: 'square',
311-
color: COLOR_PALETTE[index % COLOR_PALETTE.length],
312-
value: projectNameById.get(pid) || 'Unknown Project',
313-
}))}
314-
/>
315-
{seriesProjectIds.map((pid, index) => (
316-
<Bar
317-
key={pid}
318-
dataKey={pid}
319-
fill={COLOR_PALETTE[index % COLOR_PALETTE.length]}
320-
stroke={darkMode ? '#E5E7EB' : '#ffffff'}
321-
strokeWidth={1}
322-
>
323-
{showLabels && (
324-
<LabelList dataKey={pid} position="top" formatter={v => (v > 0 ? v : '')} />
325-
)}
326-
</Bar>
327-
))}
328-
</BarChart>
329-
</ResponsiveContainer>
330-
</div>
267+
{!loading && !error && chartData.length > 0 && (
268+
<ResponsiveContainer width="100%" height={420}>
269+
<BarChart
270+
data={chartData}
271+
margin={{ top: 16, right: 24, bottom: 8, left: 8 }}
272+
style={{
273+
backgroundColor: darkMode ? '#1e2a3a' : '#fff',
274+
borderRadius: '8px',
275+
padding: '8px',
276+
}}
277+
>
278+
<XAxis
279+
dataKey="workerCategory"
280+
interval={0}
281+
angle={-45}
282+
textAnchor="end"
283+
height={80}
284+
tick={{ fill: darkMode ? '#fff' : '#000' }}
285+
axisLine={{ stroke: darkMode ? '#888' : '#000' }}
286+
tickLine={{ stroke: darkMode ? '#888' : '#000' }}
287+
/>
288+
<YAxis
289+
allowDecimals={false}
290+
tick={{ fill: darkMode ? '#fff' : '#000' }}
291+
axisLine={{ stroke: darkMode ? '#888' : '#000' }}
292+
tickLine={{ stroke: darkMode ? '#888' : '#000' }}
293+
/>
294+
<Tooltip
295+
contentStyle={{
296+
backgroundColor: darkMode ? '#2b3e59' : '#fff',
297+
border: `1px solid ${darkMode ? '#4a5568' : '#cccccc'}`,
298+
color: darkMode ? '#fff' : '#000',
299+
}}
300+
labelStyle={{
301+
color: darkMode ? '#fff' : '#000',
302+
}}
303+
formatter={(value, name) => [
304+
value,
305+
projectNameById.get(String(name)) || 'Unknown Project',
306+
]}
307+
/>
308+
<Legend
309+
wrapperStyle={{
310+
maxHeight: 72,
311+
overflowY: 'auto',
312+
color: darkMode ? '#fff' : '#000',
313+
}}
314+
payload={seriesProjectIds.map((pid, index) => ({
315+
id: pid,
316+
type: 'square',
317+
color: COLOR_PALETTE[index % COLOR_PALETTE.length],
318+
value: projectNameById.get(pid) || 'Unknown Project',
319+
}))}
320+
/>
321+
{seriesProjectIds.map((pid, index) => (
322+
<Bar
323+
key={pid}
324+
dataKey={pid}
325+
fill={COLOR_PALETTE[index % COLOR_PALETTE.length]}
326+
stroke={darkMode ? '#E5E7EB' : '#ffffff'}
327+
strokeWidth={1}
328+
>
329+
{showLabels && (
330+
<LabelList
331+
dataKey={pid}
332+
position="top"
333+
formatter={v => (v > 0 ? v : '')}
334+
// fill={darkMode ? '#fff' : '#000'}
335+
/>
336+
)}
337+
</Bar>
338+
))}
339+
</BarChart>
340+
</ResponsiveContainer>
331341
)}
332342

333343
{!loading && !error && chartData.length === 0 && (

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12496,4 +12496,4 @@ yocto-queue@^0.1.0:
1249612496
yoctocolors-cjs@^2.1.2:
1249712497
version "2.1.3"
1249812498
resolved "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz"
12499-
integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
12499+
integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==

0 commit comments

Comments
 (0)