From b32318ccc7cfd02e0e8e7a1e1b3531735aff5f1d Mon Sep 17 00:00:00 2001
From: Ravinou <dev@r4ven.fr>
Date: Thu, 2 Jan 2025 11:58:12 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=9A=A1=20storage=20chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StorageUsedChartBar/StorageUsedChartBar.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.tsx b/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.tsx
index 2443865..64120b9 100644
--- a/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.tsx
+++ b/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.tsx
@@ -10,10 +10,12 @@ import {
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import { useState, useEffect } from 'react';
+import { Repository } from '~/domain/config.types';
+import { Optional } from '~/types';
 
 export default function StorageUsedChartBar() {
   //States
-  const [data, setData] = useState([]);
+  const [data, setData] = useState<Optional<Array<Repository>>>();
 
   //LifeCycle
   useEffect(() => {
@@ -41,10 +43,10 @@ export default function StorageUsedChartBar() {
     responsive: true,
     plugins: {
       legend: {
-        position: 'bottom',
+        position: 'bottom' as const,
       },
       title: {
-        position: 'bottom',
+        position: 'bottom' as const,
         display: true,
         text: 'Storage used for each repository',
       },
@@ -55,7 +57,7 @@ export default function StorageUsedChartBar() {
         min: 0,
         ticks: {
           // Include a dollar sign in the ticks
-          callback: function (value) {
+          callback: function (value: number | string) {
             return value + '%';
           },
           stepSize: 10,
@@ -64,7 +66,7 @@ export default function StorageUsedChartBar() {
     },
   };
 
-  const labels = data.map((repo) => repo.alias);
+  const labels = data?.map((repo) => repo.alias);
 
   const dataChart = {
     labels,
@@ -72,7 +74,7 @@ export default function StorageUsedChartBar() {
       {
         label: 'Storage used (%)',
         //storageUsed is in kB, storageSize is in GB. Round to 1 decimal for %.
-        data: data.map((repo) =>
+        data: data?.map((repo) =>
           (((repo.storageUsed / 1024 ** 2) * 100) / repo.storageSize).toFixed(1)
         ),
         backgroundColor: '#704dff',