Skip to content

Akshith - Fix: Job Analytics Page - Dark Mode #5118

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
akshith312 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Akshith - Fix: Job Analytics Page - Dark Mode #5118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06bdeeb
fix: fixed dark mode styling to apply on job analytics page
akshith312 Apr 8, 2026
930c163
fix: fixed failing sonar qube condition
akshith312 Apr 8, 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
74 changes: 64 additions & 10 deletions src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,30 @@
},
};

// ======================== SHARED CONSTANTS ========================
const AXIS_TICK = { fontSize: 12 };

const CHART_MARGIN = { top: 10, right: 10, left: 0, bottom: 10 };

const GRID_PROPS = {
strokeDasharray: '3 3',
};

const getTooltipStyles = darkMode => ({
contentStyle: {
backgroundColor: darkMode ? '#1f2937' : '#ffffff',
borderColor: darkMode ? '#374151' : '#e5e7eb',
color: darkMode ? '#f9fafb' : '#111827',
},
itemStyle: {
color: darkMode ? '#f9fafb' : '#111827',
},
});

const getCursorStyle = darkMode => ({
fill: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
});

// ======================== UTILITIES ========================
const calculatePercentageChange = (current, previous) => {
if (previous === 0) return { value: 100, isPositive: true, formatted: '+100%' };
Expand Down Expand Up @@ -417,8 +441,24 @@
// ======================== MAIN ========================
function JobAnalytics({ darkMode, role, hasPermission: hasPerm }) {
// Theme attribute for global CSS
// Sync with Global App Theme (body classes) and Local Component Theme (data-theme)
useEffect(() => {
document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
const root = document.documentElement;
const body = document.body;

if (darkMode) {
// 1. Set the attribute for your JobAnalytics.module.css
root.setAttribute('data-theme', 'dark');

Check failure on line 451 in src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer `.dataset` over `setAttribute(…)`. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ1rpf2YSVX9vHhvKnVz&open=AZ1rpf2YSVX9vHhvKnVz&pullRequest=5118

// 2. Add the classes required by the global CSS you found
body.classList.add('dark-mode');
body.classList.add('bm-dashboard-dark');

Check warning on line 455 in src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Do not call `Element#classList.add()` multiple times. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ1rpf2YSVX9vHhvKnV0&open=AZ1rpf2YSVX9vHhvKnV0&pullRequest=5118
} else {
// 3. Clean up when switching back to light mode
root.setAttribute('data-theme', 'light');

Check failure on line 458 in src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer `.dataset` over `setAttribute(…)`. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ1rpf2YSVX9vHhvKnV1&open=AZ1rpf2YSVX9vHhvKnV1&pullRequest=5118
body.classList.remove('dark-mode');
body.classList.remove('bm-dashboard-dark');

Check warning on line 460 in src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Do not call `Element#classList.remove()` multiple times. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ1rpf2YSVX9vHhvKnV2&open=AZ1rpf2YSVX9vHhvKnV2&pullRequest=5118
}
}, [darkMode]);

const canViewAnalytics = hasPerm('getJobReports');
Expand Down Expand Up @@ -526,11 +566,11 @@
<section className={styles.chartsGrid} data-mobile={isMobile ? '1' : '0'}>
<ChartCard title="User Trend Comparison" icon={TrendingUp}>
<ResponsiveContainer width="100%" height={320}>
<LineChart data={mergedData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }}>
<CartesianGrid strokeDasharray="3 3" className={styles.gridStroke} />
<XAxis dataKey="displayDate" tick={{ fontSize: 12 }} />
<YAxis tick={{ fontSize: 12 }} domain={['dataMin - 100', 'dataMax + 100']} />
<Tooltip />
<LineChart data={mergedData} margin={CHART_MARGIN}>
<CartesianGrid {...GRID_PROPS} className={styles.gridStroke} />
<XAxis dataKey="displayDate" tick={AXIS_TICK} />
<YAxis tick={AXIS_TICK} domain={['dataMin - 100', 'dataMax + 100']} />
<Tooltip {...getTooltipStyles(darkMode)} />
<Legend />
<Line
type="monotone"
Expand Down Expand Up @@ -569,7 +609,7 @@
<CartesianGrid strokeDasharray="3 3" className={styles.gridStroke} />
<XAxis dataKey="displayDate" tick={{ fontSize: 12 }} />
<YAxis tick={{ fontSize: 12 }} domain={['dataMin - 500', 'dataMax + 500']} />
<Tooltip />
<Tooltip {...getTooltipStyles(darkMode)} />
<Legend />
<Area
type="monotone"
Expand Down Expand Up @@ -598,7 +638,7 @@
height={60}
/>
<YAxis tick={{ fontSize: 12 }} domain={[0, 'dataMax + 500']} />
<Tooltip />
<Tooltip cursor={getCursorStyle(darkMode)} {...getTooltipStyles(darkMode)} />
<Legend />
<Bar
dataKey="current"
Expand Down Expand Up @@ -638,7 +678,13 @@
/>
))}
</Pie>
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: 'var(--card)',
borderColor: 'var(--card-border)',
color: 'var(--fg)',
}}
/>
</PieChart>
</ResponsiveContainer>
</ChartCard>
Expand Down Expand Up @@ -666,7 +712,15 @@
tick={{ fontSize: 12 }}
domain={[0, 100]}
/>
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: 'var(--card)',
borderColor: 'var(--card-border)',
color: 'var(--fg)',
borderRadius: '8px',
}}
itemStyle={{ color: 'var(--fg)' }}
/>
<Legend />
<Line
yAxisId="left"
Expand Down
Loading
Loading