From 710dadc86105ed477b149c305786b22787845c92 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 4 Oct 2023 11:57:25 +0300
Subject: [PATCH] fix device uptime

---
 .../Dashboard/DeviceUptime/DeviceUptime.tsx   |   2 +-
 .../Dashboard/UptimeChart/UptimeChart.tsx     | 292 ++++++++++--------
 2 files changed, 160 insertions(+), 134 deletions(-)

diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index ddac0241..9b8629d7 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@@ -96,7 +96,7 @@ const DeviceUptime = () => {
               height: '100%',
             }}
           >
-            <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[0, 10, 30, 40, 50, 10, 70, 10,60, 30, 10, 0, 0]} />
+            <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} />
           </Stack>
         </XStack>
       </YStack>
diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
index eabf2d3a..2b281f02 100644
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
@@ -2,175 +2,176 @@
 const data: DataItem[] = [
   {
     name: 'Jan',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Feb',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Mar',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Apr',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'May',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
-  },
-  {
-    name: 'Aug',
-    'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
+
   {
     name: 'Jun',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Jul',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
+    'ten': 1,
+  },
+  {
+    name: 'Aug',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Sep',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Oct',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Nov',
+    'one': 1,
+    'two': 1,
+    'three': 1,
+    'four': 1,
+    'five': 1,
+    'six': 1,
+    'seven': 1,
+    'eight': 1,
+    'nine': 1,
     'ten': 1,
-    'twenty': 1,
-    'thirty': 1,
-    'forty': 1,
-    'fifty': 1,
-    'sixty': 1,
-    'seventy': 1,
-    'eighty': 1,
-    'ninety': 1,
-    'hundred': 1,
   },
   {
     name: 'Dec',
+    'one': 0,
+    'two': 0,
+    'three': 0,
+    'four': 0,
+    'five': 0,
+    'six': 0,
+    'seven': 0,
+    'eight': 0,
+    'nine': 0,
     'ten': 0,
-    'twenty': 0,
-    'thirty': 0,
-    'forty': 0,
-    'fifty': 0,
-    'sixty': 0,
-    'seventy': 0,
-    'eighty': 0,
-    'ninety': 0,
-    'hundred': 0,
   },
 ]
 import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts';
 
 type DataItem = {
   name: string;
+  one: number;
+  two: number;
+  three: number;
+  four: number;
+  five: number;
+  six: number;
+  seven: number;
+  eight: number;
+  nine: number;
   ten: number;
-  twenty: number;
-  thirty: number;
-  forty: number;
-  fifty: number;
-  sixty: number;
-  seventy: number;
-  eighty: number;
-  ninety: number;
-  hundred: number;
 };
 
 type UptimeChartProps = {
@@ -179,25 +180,50 @@ type UptimeChartProps = {
   endMonth: number;
 };
 
-const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
-  // Transform the data array to have multiple entries for each month
-   
+const updateMonthlyValues = (data:any, monthlyActivity:any) => {
+  
+  if (!Array.isArray(monthlyActivity) || monthlyActivity.length !== 12) {
+    console.error("monthlyActivity should be an array with 12 values");
+    return;
+  }
+   const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 
+  for (let i = 0; i < data.length; i++) {
+    const month = data[i];
+    const activity = monthlyActivity[i];
+
+    for (let j = 0; j < keys.length; j++) {
+      if (j < activity) {
+        month[keys[j]] = 1;
+      } else {
+        month[keys[j]] = 0;
+      }
+    }
+  }
+
+  return data;
+}
+
+const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
+
+  const updatedData = updateMonthlyValues(data, monthlyActivity);
+  console.log(updatedData)
   const filteredData = data.slice(startMonth, endMonth + 1);
 
+  filteredData
   return (
     <ResponsiveContainer>
       <BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}>
+        <Bar dataKey="one" barSize={10} fill="#E95460" />
+        <Bar dataKey="two" barSize={10} fill="#E95460" />
+        <Bar dataKey="three" barSize={10} fill="#E95460" />
+        <Bar dataKey="four" barSize={10} fill="#E95460" />
+        <Bar dataKey="five" barSize={10} fill="#E95460" />
+        <Bar dataKey="six" barSize={10} fill="#E95460" />
+        <Bar dataKey="seven" barSize={10} fill="#E95460" />
+        <Bar dataKey="eight" barSize={10} fill="#E95460" />
+        <Bar dataKey="nine" barSize={10} fill="#E95460" />
         <Bar dataKey="ten" barSize={10} fill="#E95460" />
-        <Bar dataKey="twenty" barSize={10} fill="#E95460" />
-        <Bar dataKey="thirty" barSize={10} fill="#E95460" />
-        <Bar dataKey="forty" barSize={10} fill="#E95460" />
-        <Bar dataKey="fifty" barSize={10} fill="#E95460" />
-        <Bar dataKey="sixty" barSize={10} fill="#E95460" />
-        <Bar dataKey="seventy" barSize={10} fill="#E95460" />
-        <Bar dataKey="eighty" barSize={10} fill="#E95460" />
-        <Bar dataKey="ninety" barSize={10} fill="#E95460" />
-        <Bar dataKey="hundred" barSize={10} fill="#E95460" />
         <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />
       </BarChart>
     </ResponsiveContainer>