refactor HorizontalBarChart: streamline data handling and improve label visibility

src/components/Charts/HorizontalBarChart.jsx

@@ -6,19 +6,9 @@ const HorizontalBarChart = ({
   seriesData = [],
   categories = [],
   colors = [
-    "#1E90FF", // Dodger Blue - Primary
+    "#1E90FF", "#00BFFF", "#9370DB", "#6A0DAD", "#A9A9A9",
-    "#00BFFF", // Deep Sky Blue - Info
+    "#6A5ACD", "#FFA500", "#FF4500", "#20B2AA", "#708090",
-    "#9370DB", // Medium Purple - Success (replacing Lime Green)
-    "#6A0DAD", // Amethyst Purple - On Route (replacing Forest Green)
-    "#A9A9A9", // Dark Gray - Neutral
-    "#6A5ACD", // Slate Blue - Secondary
-    "#FFA500", // Orange - Warning
-    "#FF4500", // Orange Red - Danger
-    "#20B2AA", // Light Sea Green - Late
-    "#708090", // Slate Gray - Muted
   ],
-
-
 }) => {
   // Guard clause for invalid or incomplete data
   const hasValidData =
@@ -31,25 +21,34 @@ const HorizontalBarChart = ({
     return <div className="text-center text-gray-500">No data to display</div>;
   }
 
-  const chartOptions = {
+  // Combine seriesData and categories, then sort in descending order
+  const combined = seriesData.map((value, index) => ({
+    value,
+    label: categories[index],
+  }));
+  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);
+
+  // Replace 0 with 1 for visual purposes, but display "0%" in labels
+  const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
+
+  const chartOptions = {
     chart: {
       type: "bar",
       height: 380,
-      toolbar: {
+      toolbar: { show: false },
-        show: false, // This removes the menu
-      },
-    },
-    grid: {
-      show: false
     },
+    grid: { show: false },
     plotOptions: {
       bar: {
         barHeight: "60%",
         distributed: true,
         horizontal: true,
         dataLabels: {
-          position: "center",
+          position: "start",
         },
       },
     },
@@ -58,49 +57,33 @@ const HorizontalBarChart = ({
       enabled: true,
       textAnchor: "start",
       style: {
-        colors: ["#000"], // Switch to black for better visibility
+        colors: ["#000"], // Black labels
       },
-      formatter: function (val, opt) {
+      formatter: function (_, opt) {
-        return `${opt.w.globals.labels[opt.dataPointIndex]}: ${val}`;
+        const originalVal = sortedSeriesData[opt.dataPointIndex]; // Show real value
-      },
+        return `${originalVal}%`;
-      offsetX: 10, // Push label slightly to the right
-      dropShadow: {
-        enabled: false,
       },
+      offsetX: 10,
+      dropShadow: { enabled: false },
     },
-
     stroke: {
       width: 1,
       colors: ["#fff"],
     },
     xaxis: {
-      categories,
+      categories: sortedCategories,
-      axisBorder: {
+      axisBorder: { show: false },
-        show: false,
+      axisTicks: { show: false },
-      },
+      labels: { show: false },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        show: false,
-      },
     },
     yaxis: {
-      labels: {
+      labels: { show: false },
-        show: false,
+      axisBorder: { show: false },
-      },
+      axisTicks: { show: false },
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
     },
     tooltip: {
       theme: "dark",
-      x: {
+      x: { show: true },
-        show: false,
-      },
       y: {
         title: {
           formatter: () => "",
@@ -113,7 +96,7 @@ const HorizontalBarChart = ({
     <div className="w-full">
       <ReactApexChart
         options={chartOptions}
-        series={[{ data: seriesData }]}
+        series={[{ data: adjustedSeriesData }]}
         type="bar"
         height={380}
       />