From fa4a5a37ec023b62f5067cb8e0919d2b54bfd74f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 15 Sep 2023 13:22:53 +0300
Subject: [PATCH] Add notes for (add months labels)

---
 .../Dashboard/UptimeChart/UptimeChart.tsx     | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
index cf29257e..869a013c 100644
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
@@ -1,42 +1,47 @@
 
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-
+// @NOTE: XAxis for months or days
 const data: DataItem[] = [
     {
+        // @NOTE: if you want to add name in the XAxis. You need to set the names here
+        // name: 'Jan',
+        pv: 1,
+        pa: 1,
+    },
+    {
+        // name: 'Feb',
+        pv: 0   ,
+        pa: 0
+    },
+    {
+        //name: 'Feb',
+        pv: 1,
+        pa: 0
+    },
+    {
+        //name: 'Feb',
+        pv: 0,
+        pa: 0
+    },
+    {
+        //name: 'Feb',
+        pv: 0,
+        pa: 0
+    },
+    {
+        //name: 'Feb',
         pv: 1,
         pa: 1
     },
     {
-
-        pv: 0,
-        pa: 0
-    },
-    {
-
-        pv: 1,
-        pa: 0
-    },
-    {
-
-        pv: 0,
-        pa: 0
-    },
-    {
-
-        pv: 0,
-        pa: 0   
-    },
-    {
-        pv: 1,
-        pa: 1
-    },
-    {
+        //name: 'Feb',
         pv: 1,
         pa: 1
     },
 ];
 
 interface DataItem {
+    name?: string;
     pa: number;
     pv: number;
 }
@@ -51,7 +56,9 @@ const UptimeChart = () => {
                 }}
                 style={{ backgroundColor: '#F0F2F5' }}
             >
+                {/* <XAxis dataKey="name" fontSize={'10px'} width={50} /> */}
                 <Bar dataKey="pv" barSize={2} fill="#E95460" />
+                {/* <XAxis dataKey="name" fontSize={'10px'} width={50} /> */}
                 <Bar dataKey="pa" barSize={2} fill="#E95460" />
             </BarChart>
         </ResponsiveContainer>