Skip to content

Commit ec62b60

Browse files
Vinay VkVinay Vk
Vinay Vk
authored and
Vinay Vk
committed
Updated Project Risk Profile jsx and css file
1 parent 52f0558 commit ec62b60

2 files changed

Lines changed: 289 additions & 133 deletions

File tree

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

Lines changed: 137 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -78,88 +78,148 @@ export default function ProjectRiskProfileOverview() {
7878
return (
7979
<div className={`${styles.wrapper} ${darkMode ? styles.darkMode : ''}`}>
8080
<div className={`${styles.container}`}>
81-
<h2 className={`${styles.heading}`}>Project Risk Profile Overview</h2>
81+
<div className={`${styles.headerRow}`}>
82+
<h2 className={`${styles.heading}`}>Overall Risk Profile</h2>
8283

83-
<div className={`${styles.filterRow}`}>
84-
{/* Project Dropdown */}
85-
<div className={`${styles.dropdownWrapper}`}>
86-
<span className={`${styles.dropdownLabel}`}>Project</span>
87-
<button
88-
ref={allSpanRef}
89-
type="button"
90-
className={`${styles.dropdownButton}`}
91-
onClick={() => setShowProjectDropdown(prev => !prev)}
92-
aria-label="Show project dropdown"
93-
>
94-
{getProjectLabel()}
95-
</button>
96-
{showProjectDropdown && (
97-
<div className={`${styles.dropdownMenu}`}>
98-
<Select
99-
isMulti
100-
classNamePrefix="customSelect"
101-
options={allProjects.map(p => ({ label: p, value: p }))}
102-
value={selectedProjects.map(p => ({ label: p, value: p }))}
103-
onChange={opts => setSelectedProjects(opts ? opts.map(o => o.value) : [])}
104-
closeMenuOnSelect={false}
105-
hideSelectedOptions={false}
106-
components={{ IndicatorSeparator: () => null, ClearIndicator: () => null }}
107-
/>
108-
</div>
109-
)}
110-
</div>
84+
<div className={`${styles.filterRow}`}>
85+
{/* Project Dropdown */}
86+
<div className={`${styles.dropdownWrapper}`}>
87+
<span className={`${styles.dropdownLabel}`}>Project</span>
88+
<button
89+
ref={allSpanRef}
90+
type="button"
91+
className={`${styles.dropdownButton}`}
92+
onClick={() => setShowProjectDropdown(prev => !prev)}
93+
aria-label="Show project dropdown"
94+
>
95+
{getProjectLabel()}
96+
</button>
97+
{showProjectDropdown && (
98+
<div className={`${styles.dropdownMenu}`}>
99+
<Select
100+
isMulti
101+
classNamePrefix="customSelect"
102+
options={allProjects.map(p => ({ label: p, value: p }))}
103+
value={selectedProjects.map(p => ({ label: p, value: p }))}
104+
onChange={opts => setSelectedProjects(opts ? opts.map(o => o.value) : [])}
105+
closeMenuOnSelect={false}
106+
hideSelectedOptions={false}
107+
components={{ IndicatorSeparator: () => null, ClearIndicator: () => null }}
108+
/>
109+
</div>
110+
)}
111+
</div>
111112

112-
{/* Date Dropdown */}
113-
<div className={`${styles.dropdownWrapper}`}>
114-
<span className={`${styles.dropdownLabel}`}>Dates</span>
115-
<button
116-
ref={dateSpanRef}
117-
type="button"
118-
className={`${styles.dropdownButton}`}
119-
onClick={() => setShowDateDropdown(prev => !prev)}
120-
aria-label="Show date dropdown"
121-
>
122-
{getDateLabel()}
123-
</button>
124-
{showDateDropdown && (
125-
<div className={`${styles.dropdownMenu}`}>
126-
<Select
127-
isMulti
128-
classNamePrefix="customSelect"
129-
options={allDates.map(d => ({ label: d, value: d }))}
130-
value={selectedDates.map(d => ({ label: d, value: d }))}
131-
onChange={opts => setSelectedDates(opts ? opts.map(o => o.value) : [])}
132-
closeMenuOnSelect={false}
133-
hideSelectedOptions={false}
134-
components={{ IndicatorSeparator: () => null, ClearIndicator: () => null }}
135-
/>
136-
</div>
137-
)}
113+
{/* Date Dropdown */}
114+
<div className={`${styles.dropdownWrapper}`}>
115+
<span className={`${styles.dropdownLabel}`}>Dates</span>
116+
<button
117+
ref={dateSpanRef}
118+
type="button"
119+
className={`${styles.dropdownButton}`}
120+
onClick={() => setShowDateDropdown(prev => !prev)}
121+
aria-label="Show date dropdown"
122+
>
123+
{getDateLabel()}
124+
</button>
125+
{showDateDropdown && (
126+
<div className={`${styles.dropdownMenu}`}>
127+
<Select
128+
isMulti
129+
classNamePrefix="customSelect"
130+
options={allDates.map(d => ({ label: d, value: d }))}
131+
value={selectedDates.map(d => ({ label: d, value: d }))}
132+
onChange={opts => setSelectedDates(opts ? opts.map(o => o.value) : [])}
133+
closeMenuOnSelect={false}
134+
hideSelectedOptions={false}
135+
components={{ IndicatorSeparator: () => null, ClearIndicator: () => null }}
136+
/>
137+
</div>
138+
)}
139+
</div>
138140
</div>
139141
</div>
140142

141-
<ResponsiveContainer width="100%" height={350}>
142-
<BarChart
143-
data={filteredData.map(item => ({
144-
...item,
145-
predictedCostOverrun:
146-
item.predictedCostOverrun != null
147-
? -1 * item.predictedCostOverrun
148-
: item.predictedCostOverrun,
149-
}))}
150-
margin={{ top: 20, right: 30, left: 0, bottom: 5 }}
151-
barGap={8}
152-
>
153-
<CartesianGrid strokeDasharray="3 3" />
154-
<XAxis dataKey="projectName" />
155-
<YAxis />
156-
<Tooltip />
157-
<Legend />
158-
<Bar dataKey="predictedCostOverrun" name="Predicted Cost Overrun (%)" fill="#4285F4" />
159-
<Bar dataKey="totalOpenIssues" name="Issues" fill="#EA4335" />
160-
<Bar dataKey="predictedTimeDelay" name="Predicted Time Delay (%)" fill="#FBBC05" />
161-
</BarChart>
162-
</ResponsiveContainer>
143+
<div className={`${styles.chartWrapper}`}>
144+
<div className={`${styles.legendWrapper}`}>
145+
<div className={`${styles.legendItem}`}>
146+
<span
147+
className={`${styles.legendSquare}`}
148+
style={{ backgroundColor: '#4285F4' }}
149+
></span>
150+
<span>Predicted Cost Overrun Percentage</span>
151+
</div>
152+
<div className={`${styles.legendItem}`}>
153+
<span
154+
className={`${styles.legendSquare}`}
155+
style={{ backgroundColor: '#EA4335' }}
156+
></span>
157+
<span>Issues</span>
158+
</div>
159+
<div className={`${styles.legendItem}`}>
160+
<span
161+
className={`${styles.legendSquare}`}
162+
style={{ backgroundColor: '#FBBC05' }}
163+
></span>
164+
<span>Predicted Time Delay Percentage</span>
165+
</div>
166+
</div>
167+
<ResponsiveContainer width="100%" height="100%">
168+
<BarChart
169+
data={filteredData}
170+
margin={{ top: 20, right: 40, left: 50, bottom: 100 }}
171+
barGap="5%"
172+
barCategoryGap="28%"
173+
>
174+
<CartesianGrid
175+
strokeDasharray="5 5"
176+
stroke={darkMode ? '#3a3a3a' : '#e8e8e8'}
177+
horizontal={true}
178+
vertical={false}
179+
/>
180+
<XAxis
181+
dataKey="projectName"
182+
angle={-45}
183+
textAnchor="end"
184+
height={110}
185+
tick={{ fontSize: 13, fill: darkMode ? '#888' : '#666', fontWeight: 500 }}
186+
axisLine={{ stroke: darkMode ? '#555' : '#d5d5d5', strokeWidth: 1.5 }}
187+
tickLine={{ stroke: darkMode ? '#555' : '#d5d5d5' }}
188+
/>
189+
<YAxis
190+
tick={{ fontSize: 12, fill: darkMode ? '#888' : '#666', fontWeight: 500 }}
191+
axisLine={{ stroke: darkMode ? '#555' : '#d5d5d5', strokeWidth: 1.5 }}
192+
tickLine={{ stroke: darkMode ? '#555' : '#d5d5d5' }}
193+
/>
194+
<Tooltip
195+
contentStyle={{
196+
backgroundColor: darkMode ? '#333' : '#fff',
197+
border: `2px solid ${darkMode ? '#666' : '#e0e0e0'}`,
198+
borderRadius: '8px',
199+
padding: '14px',
200+
color: darkMode ? '#fff' : '#333',
201+
fontSize: '13px',
202+
fontWeight: 500,
203+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
204+
}}
205+
cursor={{ fill: 'rgba(66, 133, 244, 0.08)' }}
206+
/>
207+
<Bar
208+
dataKey="predictedCostOverrun"
209+
name="Predicted Cost Overrun Percentage"
210+
fill="#4285F4"
211+
radius={[3, 3, 0, 0]}
212+
/>
213+
<Bar dataKey="totalOpenIssues" name="Issues" fill="#EA4335" radius={[3, 3, 0, 0]} />
214+
<Bar
215+
dataKey="predictedTimeDelay"
216+
name="Predicted Time Delay Percentage"
217+
fill="#FBBC05"
218+
radius={[3, 3, 0, 0]}
219+
/>
220+
</BarChart>
221+
</ResponsiveContainer>
222+
</div>
163223
</div>
164224
</div>
165225
);

0 commit comments

Comments
 (0)