Skip to content

Vinay K Tooltip Hover Preview #4753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vinay944924 wants to merge 4 commits into
base: development
Choose a base branch
from
Open

Vinay K Tooltip Hover Preview #4753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5846033
Added tooltip and made changes in the css file
Jan 23, 2026
b28b185
Fix tools section dark mode styling and tooltip behavior
Apr 20, 2026
32c99da
Merge origin/development into vinay_k_tools_section
Apr 20, 2026
0c21aee
Fix Prettier formatting in weekly tools summary files
Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions ...components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,16 @@
};

// Custom tooltip component
const CustomTooltip = ({ active, payload, total, hasNoData, toolName, projectName, toolId }) => {
const CustomTooltip = ({
active,

Check warning on line 38 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'active' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfn&open=AZ2swNY0hhF0ZNhqqVfn&pullRequest=4753
payload,

Check warning on line 39 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'payload' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfo&open=AZ2swNY0hhF0ZNhqqVfo&pullRequest=4753
total,

Check warning on line 40 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'total' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfp&open=AZ2swNY0hhF0ZNhqqVfp&pullRequest=4753
hasNoData,

Check warning on line 41 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'hasNoData' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfq&open=AZ2swNY0hhF0ZNhqqVfq&pullRequest=4753
toolName,

Check warning on line 42 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'toolName' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfr&open=AZ2swNY0hhF0ZNhqqVfr&pullRequest=4753
projectName,

Check warning on line 43 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'projectName' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfs&open=AZ2swNY0hhF0ZNhqqVfs&pullRequest=4753
toolId,

Check warning on line 44 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'toolId' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVft&open=AZ2swNY0hhF0ZNhqqVft&pullRequest=4753
darkMode,

Check warning on line 45 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

'darkMode' is missing in props validation 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfu&open=AZ2swNY0hhF0ZNhqqVfu&pullRequest=4753
}) => {

Check failure on line 46 in src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 26 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ2swNY0hhF0ZNhqqVfv&open=AZ2swNY0hhF0ZNhqqVfv&pullRequest=4753
if (!active || !payload || !payload.length) {
return null;
}
Expand All @@ -44,17 +53,19 @@
return (
<div
style={{
backgroundColor: 'rgba(255, 255, 255, 0.95)',
border: '1px solid #ccc',
backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
borderRadius: '4px',
padding: '8px 12px',
fontSize: '14px',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
maxWidth: '200px',
}}
>
<div style={{ fontWeight: '600', color: '#333' }}>📊 No Tools Match</div>
<div style={{ color: '#666', fontSize: '12px' }}>
<div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333' }}>
📊 No Tools Match
</div>
<div style={{ color: darkMode ? '#c5d0dd' : '#666', fontSize: '12px' }}>
No tools match the selected combination
</div>
</div>
Expand All @@ -66,17 +77,19 @@
return (
<div
style={{
backgroundColor: 'rgba(255, 255, 255, 0.95)',
border: '1px solid #ccc',
backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
borderRadius: '4px',
padding: '8px 12px',
fontSize: '14px',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
maxWidth: '200px',
}}
>
<div style={{ fontWeight: '600', color: '#333' }}>{toolName}</div>
<div style={{ color: '#666', fontSize: '12px' }}>❌ Not used in this project</div>
<div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333' }}>{toolName}</div>
<div style={{ color: darkMode ? '#c5d0dd' : '#666', fontSize: '12px' }}>
❌ Not used in this project
</div>
</div>
);
}
Expand All @@ -87,22 +100,22 @@
return (
<div
style={{
backgroundColor: 'rgba(255, 255, 255, 0.95)',
border: '1px solid #ccc',
backgroundColor: darkMode ? 'rgba(27, 42, 65, 0.97)' : 'rgba(255, 255, 255, 0.95)',
border: `1px solid ${darkMode ? '#3a506b' : '#ccc'}`,
borderRadius: '4px',
padding: '8px 12px',
fontSize: '14px',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
maxWidth: '200px',
}}
>
<div style={{ fontWeight: '600', color: '#333', marginBottom: '4px' }}>
<div style={{ fontWeight: '600', color: darkMode ? '#e0e0e0' : '#333', marginBottom: '4px' }}>
{toolName || 'All Tools'}
</div>
<div style={{ color: '#666', marginBottom: '2px' }}>
<div style={{ color: darkMode ? '#c5d0dd' : '#666', marginBottom: '2px' }}>
Count: <strong>{data.value}</strong>
</div>
<div style={{ color: '#666' }}>
<div style={{ color: darkMode ? '#c5d0dd' : '#666' }}>
Percentage: <strong>{percentage}%</strong>
</div>
</div>
Expand Down Expand Up @@ -316,6 +329,7 @@
hasNoData={hasNoData}
toolName={toolName}
toolId={toolId}
darkMode={darkMode}
/>
}
cursor={false}
Expand Down
34 changes: 34 additions & 0 deletions ...nts/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,40 @@
color: var(--donut-text-color);
}

.toolDonutWrapper select {
width: 220px;
margin-top: 8px;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 14px;
background-color: #ffffff;
color: #111827;
font-size: 20px;
line-height: 1.2;
outline: none;
}

.toolDonutWrapper select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.toolDonutWrapperDark select {
background-color: #253342;
color: #ffffff;
border-color: #3a506b;
}

.toolDonutWrapperDark select:focus {
border-color: #5b89c2;
box-shadow: 0 0 0 2px rgba(91, 137, 194, 0.25);
}

.toolDonutWrapperDark select option {
background-color: #253342;
color: #ffffff;
}

.filterValue {
font-size: 14px;
color: #888;
Expand Down
60 changes: 6 additions & 54 deletions src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,51 +59,6 @@ function ToolsAvailabilityPage() {
setEndDate('');
};

// Apply dark mode styles to document body when in dark mode
useEffect(() => {
if (darkMode) {
document.body.classList.add('dark-mode-body');
} else {
document.body.classList.remove('dark-mode-body');
}

// Add dark mode CSS
if (!document.getElementById('dark-mode-styles')) {
const styleElement = document.createElement('style');
styleElement.id = 'dark-mode-styles';
styleElement.innerHTML = `
.dark-mode-body .tools-availability-page {
background-color: #1e2736 !important;
color: #e0e0e0 !important;
}
.dark-mode-body .tools-availability-content {
background-color: #1e2736 !important;
color: #e0e0e0 !important;
}
.dark-mode-body .recharts-wrapper,
.dark-mode-body .recharts-surface {
background-color: #1e2736 !important;
}
.dark-mode-body .recharts-layer {
background-color: #1e2736 !important;
}
`;
document.head.appendChild(styleElement);
}

return () => {
// Cleanup
document.body.classList.remove('dark-mode-body');
};
}, [darkMode]);

const darkModeStyles = darkMode
? {
backgroundColor: '#1e2736',
color: '#e0e0e0',
}
: {};

// Render project selection based on loading and error states
const renderProjectSelection = () => {
if (loading) {
Expand All @@ -130,16 +85,16 @@ function ToolsAvailabilityPage() {
? {
control: baseStyles => ({
...baseStyles,
backgroundColor: '#2c3344',
borderColor: '#364156',
backgroundColor: '#253342',
borderColor: '#3a506b',
}),
menu: baseStyles => ({
...baseStyles,
backgroundColor: '#2c3344',
backgroundColor: '#253342',
}),
option: (baseStyles, state) => ({
...baseStyles,
backgroundColor: state.isFocused ? '#364156' : '#2c3344',
backgroundColor: state.isFocused ? '#3a506b' : '#253342',
color: '#e0e0e0',
}),
singleValue: baseStyles => ({
Expand All @@ -158,11 +113,8 @@ function ToolsAvailabilityPage() {
};

return (
<div
className={`tools-availability-page ${darkMode ? 'dark-mode' : ''}`}
style={darkModeStyles}
>
<div className="tools-availability-content" style={darkModeStyles}>
<div className={`tools-availability-page ${darkMode ? 'dark-mode' : ''}`}>
<div className="tools-availability-content">
<div className="tools-chart-filters">
<div className="filter-group">
<label htmlFor="project-select">Project</label>
Expand Down
41 changes: 31 additions & 10 deletions src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,45 @@
.tools-availability-page {
--tools-bg: #ffffff;
--tools-text: #000000;
--tools-card: #fafafa;
--tools-section: #ffffff;
--tools-border: #d1d5db;
--tools-input-bg: #ffffff;
--tools-input-border: #d1d5db;
--tools-select-bg: #ffffff;
--tools-select-hover: #f3f4f6;

padding: 24px;
min-height: 100vh;
background-color: var(--bg-color);
background-color: var(--tools-bg);
color: var(--tools-text);
transition: background-color 0.25s ease, color 0.25s ease;
}

.tools-availability-page.dark-mode {
background-color: var(--dark-bg);
--tools-bg: #1b2a41;
--tools-text: #ffffff;
--tools-card: #2b3e59;
--tools-section: #253342;
--tools-border: #3a506b;
--tools-input-bg: #253342;
--tools-input-border: #3a506b;
--tools-select-bg: #253342;
--tools-select-hover: #3a506b;
}

.tools-availability-content {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
background-color: var(--card-bg);
background-color: var(--tools-section);
border-radius: 8px;
box-shadow: 0 2px 5px var(--card-shadow);
box-shadow: 0 2px 5px var(--card-shadow, rgba(0,0,0,0.1));
}

.tools-availability-page.dark-mode .tools-availability-content {
background-color: var(--section-bg);
background-color: var(--tools-section);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Filter section styling */
Expand Down Expand Up @@ -79,8 +100,8 @@

/* Dark mode date picker styling */
.tools-availability-page.dark-mode .date-picker {
background-color: #2c3344;
border-color: #364156;
background-color: var(--tools-input-bg);
border-color: var(--tools-input-border);
color: #e0e0e0;
}

Expand All @@ -90,7 +111,7 @@
}

.tools-availability-page.dark-mode .date-picker:hover {
border-color: #4b5563;
border-color: var(--tools-input-border);
}

/* "to" text styling */
Expand Down Expand Up @@ -184,9 +205,9 @@
}

.tools-availability-page.dark-mode .select-loading {
background-color: #2c3344;
background-color: var(--tools-input-bg);
color: #9ca3af;
border-color: #364156;
border-color: var(--tools-input-border);
}

.tools-availability-page.dark-mode .select-error {
Expand Down
Loading
Loading