Merge pull request 'Vaibhav_Dashboard_Enhancement' (#9) from Vaibhav_Dashboard_Enhancement into Feature_Task_Management

Reviewed-on: #9

src/components/Charts/HorizontalBarChart.jsx

@@ -46,19 +46,23 @@ const HorizontalBarChart = ({
   // Replace 0 with 1 for visual purposes, but display "0%" in labels
   const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
 
+  // Dynamically adjust chart height if only one data point
+  const chartHeight = seriesData.length === 1 ? 80 : 380;
+
   const chartOptions = {
     chart: {
       type: "bar",
-      height: 380,
+      height: chartHeight,
       toolbar: { show: false },
     },
     grid: { show: false },
     plotOptions: {
       bar: {
-        barHeight: "60%",
+        barHeight: seriesData.length === 1 ? "30%" : "60%",
         distributed: true,
         horizontal: true,
-        borderRadius: 10,
+        borderRadius: 3,
+        borderRadiusApplication: "end",
         dataLabels: {
           position: "top",
         },
@@ -70,6 +74,7 @@ const HorizontalBarChart = ({
       textAnchor: "center",
       style: {
         colors: ["#000"], // Black labels
+        fontSize: "8px",
       },
       formatter: function (_, opt) {
         const originalVal = sortedSeriesData[opt.dataPointIndex]; // Show real value
@@ -93,6 +98,10 @@ const HorizontalBarChart = ({
       axisBorder: { show: false },
       axisTicks: { show: false },
     },
+    legend: {
+      show: true, 
+      fontSize: '8px', // Reduce text size
+    },
     tooltip: {
       theme: "dark",
       x: { show: true },
@@ -110,7 +119,7 @@ const HorizontalBarChart = ({
         options={chartOptions}
         series={[{ data: adjustedSeriesData }]}
         type="bar"
-        height={380}
+        height={chartHeight}
       />
     </div>
   );

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

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">
@@ -168,7 +174,7 @@ const Dashboard = () => {
             <div className="card-header d-flex align-items-start justify-content-between">
               <div className="card-title mb-0 text-start">
                 <h5 className="mb-1">Projects</h5>
-                <p className="card-subtitle">Total Projects Overview</p>
+                <p className="card-subtitle">Projects Completion Status</p>
               </div>
             </div>
             <div className="card-body">
@@ -230,13 +236,13 @@ const Dashboard = () => {
               </div>
 
               {/* Row 2: Time Range Buttons */}
-              <div className="d-flex flex-wrap gap-2 mt-2">
+              <div className="d-flex flex-wrap  mt-2">
                 {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
                   <button
                     key={key}
                     className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
                       range === key
-                        ? "fw-bold border-bottom border-primary text-primary"
+                        ? " border-bottom border-primary text-primary"
                         : "text-muted"
                     }`}
                     style={{ cursor: "pointer", transition: "all 0.2s ease" }}
@@ -252,6 +258,7 @@ const Dashboard = () => {
                 seriesData={lineChartSeries}
                 categories={lineChartCategories}
                 loading={isLineChartLoading}
+                lineChartCategoriesDates={lineChartCategoriesDates}
               />
             </div>
           </div>