hotel-manage-stack/wages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix chart legend order and tooltip stacking on wage graphs

Browse source 
Legend was sorted to mirror bar stack order, making it hard to tell
segments apart at a glance; reverse it. Tooltip also rendered behind
the legend div when they overlapped — raise its z-index above it.
This commit is contained in:
jtricerolph 2026-07-24 15:45:00 +00:00
parent 158d8f1676
commit 2114e60fce
4 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/index.css
View file

@ -101,6 +101,12 @@ html, body, #root {
font-weight: 500; font-weight: 500;
} }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; }
.sidebar-user-name { color: #ffffff; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user { color: rgba(255,255,255,0.5); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout { color: rgba(255,255,255,0.5); display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
.sidebar-logout:hover { color: var(--gold); }
/* ── Content area ───────────────────────────────────────────────── */ /* ── Content area ───────────────────────────────────────────────── */
.content { .content {
flex: 1; flex: 1;
@ -314,6 +320,17 @@ input[type="text"]:focus {
font-style: italic; font-style: italic;
} }
/* ── Recharts tooltip/legend stacking ──────────────────────────────
Tooltip and legend wrappers are both absolutely positioned by
Recharts; without this the legend (later in DOM order) sits above
the tooltip when they overlap. */
.recharts-tooltip-wrapper {
z-index: 10;
}
.recharts-legend-wrapper {
z-index: 1;
}
/* ── Dept detail modal ──────────────────────────────────────────── */ /* ── Dept detail modal ──────────────────────────────────────────── */
.modal-backdrop { .modal-backdrop {
position: fixed; position: fixed;

2
frontend/src/pages/Monthly.tsx
View file

@ -377,7 +377,7 @@ export default function Monthly() {
<XAxis dataKey="label" tick={{ fontSize: 12 }} /> <XAxis dataKey="label" tick={{ fontSize: 12 }} />
<YAxis tickFormatter={v => `£${Math.round(Number(v) / 1000)}k`} tick={{ fontSize: 11 }} width={55} /> <YAxis tickFormatter={v => `£${Math.round(Number(v) / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
<Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} /> <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
<Legend /> <Legend itemSorter={item => -deptSummary.findIndex(dep => dep.department_name === item.dataKey)} />
{deptSummary.map(dep => ( {deptSummary.map(dep => (
<Bar key={dep.department_id} dataKey={dep.department_name} stackId="a" fill={dep.color}> <Bar key={dep.department_id} dataKey={dep.department_name} stackId="a" fill={dep.color}>
{weeks.map((w, i) => ( {weeks.map((w, i) => (

2
frontend/src/pages/Rolling12Months.tsx
View file

@ -151,7 +151,7 @@ export default function Rolling12Months() {
<XAxis dataKey="label" tick={{ fontSize: 10 }} /> <XAxis dataKey="label" tick={{ fontSize: 10 }} />
<YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} /> <YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
<Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} /> <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
<Legend /> <Legend itemSorter={item => -deptCols.findIndex(dep => dep.name === item.dataKey)} />
{deptCols.map(dep => ( {deptCols.map(dep => (
<Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} /> <Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} />
))} ))}

2
frontend/src/pages/Rolling12Weeks.tsx
View file

@ -194,7 +194,7 @@ export default function Rolling12Weeks() {
<XAxis dataKey="label" tick={{ fontSize: 10 }} /> <XAxis dataKey="label" tick={{ fontSize: 10 }} />
<YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} /> <YAxis tickFormatter={v => `£${Math.round(v / 1000)}k`} tick={{ fontSize: 11 }} width={55} />
<Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} /> <Tooltip formatter={(v: unknown) => fmtMoney(Number(v))} />
<Legend /> <Legend itemSorter={item => -deptCols.findIndex(dep => dep.name === item.dataKey)} />
{deptCols.map(dep => ( {deptCols.map(dep => (
<Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} /> <Bar key={dep.id} dataKey={dep.name} stackId="a" fill={dep.color} />
))} ))}