Add notes for (add months labels)

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>