LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): bound graph labels to the container box

This commit is contained in:
Michał Leszczyk 2022-04-11 13:10:33 +02:00
parent d093577909
commit 2e7bccf604
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
View File

@ -12,11 +12,13 @@ const BarTip = styled.span.attrs({
})``; })``;
const BarLabel = styled.span.attrs({ const BarLabel = styled.span.attrs({
className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow", className: "usage-label bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow",
})` })`
right: max(0%, ${({ $percentage }) => 100 - $percentage}%); ${({ $percentage }) => `
top: -0.5rem; left: max(0%, ${$percentage}%);
transform: translateX(50%); top: -0.5rem;
transform: translateX(-${$percentage}%);
`}
`; `;
export const GraphBar = ({ value, limit, label }) => { export const GraphBar = ({ value, limit, label }) => {