Space allocation (#24)
* Update the props * Display the space allocation horizontally
This commit is contained in:
parent
cf0b5d68aa
commit
ba52e9afa4
|
@ -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 key={d.title} className="nodeSpaceAllocation-legendRow">
|
||||
<div
|
||||
className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
|
||||
></div>
|
||||
<span>{d.title}</span>
|
||||
<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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue