Space allocation (#24)

* Update the props

* Display the space allocation horizontally
This commit is contained in:
Arnaud 2024-09-20 15:34:07 +02:00 committed by GitHub
parent cf0b5d68aa
commit ba52e9afa4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 25 deletions

View File

@ -1,36 +1,41 @@
import { SimpleText } from "../SimpleText/SimpleText";
import { PrettyBytes } from "../utils/bytes";
import "./spaceAllocation.css";
type Props = {
data: {
title: string;
percent: number;
size: number;
}[];
};
export function SpaceAllocation({ data }: Props) {
const total = data.reduce((acc, val) => acc + val.size, 0);
return (
<>
<div className="nodeSpaceAllocation-bar">
{data.map((d, index) => (
<span
key={d.title}
className={`nodeSpaceAllocation-barItem nodeSpaceAllocation-barQuota nodeSpaceAllocation-quota-${index}`}
style={{ width: d.percent + "%" }}
style={{ width: (d.size / total) * 100 + "%" }}
></span>
))}
</div>
<div className="nodeSpaceAllocation-legend">
{data.map((d, index) => (
<div className="nodeSpaceAllocation-legendRow">
<div className="nodeSpaceAllocation-legendLeft">
<div
className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
></div>
<span>{d.title}</span>
<div key={d.title} className="nodeSpaceAllocation-legendRow">
<div
className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
></div>
<div className="nodeSpaceAllocation-legendItem-text">
<small>{d.title}</small>
<SimpleText variant="light" size="small">
{PrettyBytes(d.size)}
</SimpleText>
</div>
<small>{PrettyBytes(d.size)}</small>
</div>
))}
</div>

View File

@ -2,7 +2,7 @@
height: 10px;
display: flex;
gap: 0.75rem;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
}
.nodeSpaceAllocation-barQuota {
@ -22,19 +22,21 @@
}
.nodeSpaceAllocation-quota-0 {
background-color: var(--codex-color);
}
.nodeSpaceAllocation-quota-1 {
background-color: var(--codex-color-primary);
}
.nodeSpaceAllocation-quota-2 {
.nodeSpaceAllocation-quota-1 {
background-color: #f9fa93;
}
.nodeSpaceAllocation-quota-2 {
background-color: var(--codex-color);
}
.nodeSpaceAllocation-legend {
margin-top: 0.75rem;
display: flex;
gap: 0.75rem;
}
.nodeSpaceAllocation-legendItem {
@ -48,11 +50,11 @@
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
gap: 0.75rem;
gap: 0.5rem;
}
.nodeSpaceAllocation-legendLeft {
.nodeSpaceAllocation-legendItem-text {
display: flex;
align-items: center;
gap: 0.75rem;
flex-direction: column;
line-height: 1rem;
}

View File

@ -18,18 +18,15 @@ export const Default: Story = {
args: {
data: [
{
title: "Maximum storage space used by the node",
percent: 60,
title: "Space allocated",
size: 10000000,
},
{
title: "Amount of storage space currently in use",
percent: 20,
title: "New space allocation",
size: 10000000 * 0.2,
},
{
title: "Amount of storage space reserved",
percent: 20,
title: "Remaining space",
size: 10000000 * 0.2,
},
],