From 3cf13d0bb6fae3a6e0fbc129ad9c4bcc30cb28ce Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Mon, 5 May 2025 12:36:41 +0530
Subject: [PATCH] Handle widget chart tooltip

---
 src/components/Charts/HorizontalBarChart.jsx | 30 +++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 3537b827..7335919e 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -6,8 +6,16 @@ const HorizontalBarChart = ({
   seriesData = [],
   categories = [],
   colors = [
-    "#1E90FF", "#00BFFF", "#9370DB", "#6A0DAD", "#A9A9A9",
-    "#6A5ACD", "#FFA500", "#FF4500", "#20B2AA", "#708090",
+    "#1E90FF",
+    "#00BFFF",
+    "#9370DB",
+    "#6A0DAD",
+    "#A9A9A9",
+    "#6A5ACD",
+    "#FFA500",
+    "#FF4500",
+    "#20B2AA",
+    "#708090",
   ],
   loading = false,
 }) => {
@@ -31,7 +39,6 @@ const HorizontalBarChart = ({
   if (!hasValidData) {
     return <div className="text-center text-gray-500">No data to display</div>;
   }
-
   // Combine seriesData and categories, then sort in descending order
   const combined = seriesData.map((value, index) => ({
     value,
@@ -40,11 +47,13 @@ const HorizontalBarChart = ({
   const sorted = combined.sort((a, b) => b.value - a.value);
 
   // Extract sorted values
-  const sortedSeriesData = sorted.map(item => item.value);
-  const sortedCategories = sorted.map(item => item.label);
+  const sortedSeriesData = sorted.map((item) => item.value);
+  const sortedCategories = sorted.map((item) => item.label);
 
   // Replace 0 with 1 for visual purposes, but display "0%" in labels
-  const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
+  const adjustedSeriesData = sortedSeriesData.map((val) =>
+    val === 0 ? 0.1 : val
+  );
 
   // Dynamically adjust chart height if only one data point
   const chartHeight = seriesData.length === 1 ? 80 : 380;
@@ -99,14 +108,13 @@ const HorizontalBarChart = ({
       axisTicks: { show: false },
     },
     legend: {
-      show: true, 
+      show: true,
     },
     tooltip: {
-      theme: "dark",
       x: { show: true },
       y: {
-        title: {
-          formatter: () => "",
+        formatter: function (val) {
+          return (val < 1 ? Math.floor(val) : val) + "%";
         },
       },
     },
@@ -116,7 +124,7 @@ const HorizontalBarChart = ({
     <div className="w-full">
       <ReactApexChart
         options={chartOptions}
-        series={[{ data: adjustedSeriesData }]}
+        series={[{ data: adjustedSeriesData, name: "Complete Status" }]}
         type="bar"
         height={chartHeight}
       />