Space allocation (#24)

* Update the props

* Display the space allocation horizontally

src/components/SpaceAllocation/SpaceAllocation.tsx

@@ -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 key={d.title} className="nodeSpaceAllocation-legendRow">
-            <div className="nodeSpaceAllocation-legendLeft">
+            <div
-              <div
+              className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
-                className={`nodeSpaceAllocation-legendItem nodeSpaceAllocation-quota nodeSpaceAllocation-quota-${index}`}
+            ></div>
-              ></div>
+            <div className="nodeSpaceAllocation-legendItem-text">
-              <span>{d.title}</span>
+              <small>{d.title}</small>
+              <SimpleText variant="light" size="small">
+                {PrettyBytes(d.size)}
+              </SimpleText>
             </div>
-            <small>{PrettyBytes(d.size)}</small>
           </div>
         ))}
       </div>

src/components/SpaceAllocation/spaceAllocation.css

@@ -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;
+  flex-direction: column;
-  gap: 0.75rem;
+  line-height: 1rem;
 }

stories/SpaceAllocation.stories.ts

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