From b8dd0367124276c6f1f1e2930469f75ffeb38da6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 4 Oct 2023 11:16:23 +0300
Subject: [PATCH] pass monthlyActivity

---
 .../Dashboard/DeviceUptime/DeviceUptime.tsx   |  71 +-----
 .../Dashboard/UptimeChart/UptimeChart.tsx     | 213 ++++++++++++++++--
 2 files changed, 198 insertions(+), 86 deletions(-)

diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index 24f78cc7..ddac0241 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@@ -7,80 +7,11 @@ import UptimeChart from '../UptimeChart/UptimeChart'
 import Icon from '../../../components/General/Icon'
 import { getMonthIndicesFromRange } from '../../../utilities'
 
-const data: DataItem[] = [
-  {
-    name: 'Jan',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Feb',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Mar',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Apr',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'May',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Aug',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Jun',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Jul',
-    pv: 1,
-    pa: 0,
-  },
-  {
-    name: 'Sep',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Oct',
-    pv: 0,
-    pa: 0,
-  },
-  {
-    name: 'Nov',
-    pv: 1,
-    pa: 1,
-  },
-  {
-    name: 'Dec',
-    pv: 1,
-    pa: 1,
-  },
-]
-
-type DataItem = {
-  name?: string
-  pa: number
-  pv: number
-}
 
 const DeviceUptime = () => {
   const [isCalendarVisible, setIsCalendarVisible] = useState(false)
   const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined })
   const [startMonth, endMonth] = getMonthIndicesFromRange(dateRange)
-  const filteredMonths = data.slice(startMonth, endMonth + 1)
 
   const handleRangeSelect = (
     range: DateRange | undefined,
@@ -165,7 +96,7 @@ const DeviceUptime = () => {
               height: '100%',
             }}
           >
-            <UptimeChart data={filteredMonths} />
+            <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[0, 10, 30, 40, 50, 10, 70, 10,60, 30, 10, 0, 0]} />
           </Stack>
         </XStack>
       </YStack>
diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
index 238acdac..eabf2d3a 100644
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
@@ -1,26 +1,207 @@
-import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'
+
+const data: DataItem[] = [
+  {
+    name: 'Jan',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Feb',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Mar',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Apr',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'May',
+    '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',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Jul',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Sep',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Oct',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Nov',
+    'ten': 1,
+    'twenty': 1,
+    'thirty': 1,
+    'forty': 1,
+    'fifty': 1,
+    'sixty': 1,
+    'seventy': 1,
+    'eighty': 1,
+    'ninety': 1,
+    'hundred': 1,
+  },
+  {
+    name: 'Dec',
+    '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
-  pa: number
-  pv: number
-}
+  name: string;
+  ten: number;
+  twenty: number;
+  thirty: number;
+  forty: number;
+  fifty: number;
+  sixty: number;
+  seventy: number;
+  eighty: number;
+  ninety: number;
+  hundred: number;
+};
 
 type UptimeChartProps = {
-  data: DataItem[]
-}
+  monthlyActivity: number[];
+  startMonth: number;
+  endMonth: number;
+};
+
+const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
+  // Transform the data array to have multiple entries for each month
+   
+
+  const filteredData = data.slice(startMonth, endMonth + 1);
 
-const UptimeChart = ({ data }: UptimeChartProps) => {
   return (
     <ResponsiveContainer>
-      <BarChart data={data} style={{ backgroundColor: '#F0F2F5' }}>
-        <Bar dataKey="pv" barSize={2} fill="#E95460" />
-        {/* @NOTE: We can add as many Bar items as we need and use them for each day of the month */}
-        <Bar dataKey="pa" barSize={2} fill="#E95460" />
-        {data[0].name && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />}
+      <BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}>
+        <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>
-  )
-}
+  );
+};
 
-export default UptimeChart
+export default UptimeChart;