Display current memory values in legend

src/client/components/chart-cards/memory.tsx

@@ -1,7 +1,10 @@
+import { formatValue } from '@/utils/format';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ChartCard } from './index';
 
+const formatOptions = { units: 'B' };
+
 export const Memory = () => {
   const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
@@ -18,6 +21,13 @@ export const Memory = () => {
     }
   }, [dynamicData]);
 
+  const formatedTotals = useMemo(() => {
+    if (!staticData) {
+      return [];
+    }
+    return [formatValue(staticData.total_memory, formatOptions), formatValue(staticData.total_swap, formatOptions)];
+  }, [staticData]);
+
   if (!staticData || !dynamicData) {
     return <div />;
   }
@@ -26,11 +36,14 @@ export const Memory = () => {
     <ChartCard
       title='Memory'
       legend={{
-        values: [staticData.total_memory, staticData.total_swap],
+        values: [
-        labels: ['Total memory', 'Total swap'],
+          `${formatValue(dynamicData.mem_usage, formatOptions)} / ${formatedTotals[0]}`,
+          `${formatValue(dynamicData.swap_usage, formatOptions)} / ${formatedTotals[1]}`,
+        ],
+        labels: ['Memory', 'Swap'],
       }}
       domain={[0, Math.max(staticData.total_memory, staticData.total_swap)]}
-      formatOptions={{ units: 'B' }}
+      formatOptions={formatOptions}
       data={history}
       total={2}
     />

src/client/components/legend/index.tsx

@@ -4,7 +4,7 @@ import './index.css';
 
 export type LegendProps = {
   labels: string[];
-  values: number[];
+  values: string[] | number[];
   formatOptions?: FormatOptions;
   hueOffset?: number;
 };
@@ -14,7 +14,12 @@ export const Legend = ({ labels, values, formatOptions, hueOffset = 0 }: LegendP
     {labels.map((label, index) => (
       <div key={labels[index]}>
         <small style={{ color: getTextColor((hueOffset + (360 * index) / values.length) % 360) }}>{label}</small>
-        <h4>{formatValue(values[index], formatOptions)}</h4>
+        <h4>
+          {(() => {
+            const value = values[index];
+            return typeof value === 'string' ? value : formatValue(value, formatOptions);
+          })()}
+        </h4>
       </div>
     ))}
   </div>