From dd697b47b526e990eaab4a764e1f2bc2e29faee7 Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Tue, 15 Apr 2025 16:38:26 +0530
Subject: [PATCH] add line chart date formatting based on sorted dashboard data

---
 src/components/Charts/LineChart.jsx    | 21 ++++++++++++++++-----
 src/components/Dashboard/Dashboard.jsx |  9 ++++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/Charts/LineChart.jsx b/src/components/Charts/LineChart.jsx
index 565e5816..1dc1b1ac 100644
--- a/src/components/Charts/LineChart.jsx
+++ b/src/components/Charts/LineChart.jsx
@@ -3,10 +3,11 @@ import ReactApexChart from "react-apexcharts";
 import PropTypes from "prop-types";
 
 const LineChart = ({
-    seriesData = [],
-    categories = [],
-    colors = ["#1E90FF", "#FF6347"],
-    loading = false
+  seriesData = [],
+  categories = [],
+  colors = ["#1E90FF", "#FF6347"],
+  loading = false,
+  lineChartCategoriesDates = [],
 }) => {
     const hasValidData =
         Array.isArray(seriesData) &&
@@ -100,11 +101,21 @@ const LineChart = ({
     tooltip: {
       enabled: true,
       x: {
-        formatter: (val, opts) => val
+        formatter: (value, { dataPointIndex }) => {
+          if (
+            lineChartCategoriesDates &&
+            lineChartCategoriesDates.length > dataPointIndex
+          ) {
+            return lineChartCategoriesDates[dataPointIndex];
+          }
+          return value;
+        }
       }
     }
+
   };
 
+
   return (
     <div className="w-full overflow-x-auto">
       <ReactApexChart
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index d2048aba..5140974a 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -82,7 +82,13 @@ const Dashboard = () => {
       day: "numeric",
     })
   );
-
+  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    })
+  );
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
@@ -252,6 +258,7 @@ const Dashboard = () => {
                 seriesData={lineChartSeries}
                 categories={lineChartCategories}
                 loading={isLineChartLoading}
+                lineChartCategoriesDates={lineChartCategoriesDates}
               />
             </div>
           </div>