chore: updating tooltip

frontend/src/components/BarChartGrouped/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import ReactDOMServer from "react-dom/server";
 import { GroupedBarChart, ScaleTypes } from "@carbon/charts-react";
 import { 
   FilterableMultiSelect, 
@@ -11,9 +12,10 @@ import { fetchOpeningsPerYear } from "../../services/OpeningService";
 import { OpeningPerYearChart } from "../../types/OpeningPerYearChart";
 import "@carbon/charts/styles.css";
 import "./BarChartGrouped.scss";
-import { fetchOrgUnits} from "../../services/search/openings";
+import { fetchOrgUnits, status } from "../../services/search/openings";
 import { TextValueData, sortItems } from "../../utils/multiSelectSortUtils"
 import { differenceInDays, addDays } from "date-fns";
+import BarChartTooltip from "../BarChartTooltip";
 
 interface MultiSelectEvent {
   selectedItems: TextValueData[];
@@ -46,17 +48,7 @@ const BarChartGrouped = (): JSX.Element => {
         console.error("Error fetching org units:", error);
       }
     };
-
-    setStatusItems([
-      {value:'AMG', text: 'Amalgamate'},
-      {value:'AMD', text: 'Amended'},
-      {value:'APP', text: 'Approved'},
-      {value:'DFT', text: 'Draft'},
-      {value:'FG', text: 'Free Growing'},
-      {value:'RMD', text: 'Removed'},
-      {value:'RET', text: 'Retired'},
-      {value:'SUB', text: 'Submitted'}
-    ]);
+    setStatusItems(status);
     fetchOrgUnitsData();
 
   },[]);
@@ -69,48 +61,53 @@ const BarChartGrouped = (): JSX.Element => {
     return `${year}-${month}-${day}`;
   };
 
-  const colors = {
-    Openings: "#1192E8",
-  };
+  const tooltip = (data:OpeningPerYearChart[], defaultHTML: string, datum: OpeningPerYearChart) => {
+    const tooltipContent = <BarChartTooltip data={data} defaultHTML={defaultHTML} datum={datum} />;
+    return ReactDOMServer.renderToString(tooltipContent);
+  }
+
+  const colors = { Openings: "#1192E8" };
 
   const options = {
     axes: {
-      left: {
-        mapsTo: "value",
-      },
+      left: { mapsTo: "value" },
       bottom: {
         scaleType: ScaleTypes.LABELS,
-        mapsTo: "key",
-      },
+        mapsTo: "key"
+      }
     },
     color: {
-      scale: colors,
+      scale: colors
     },
     height: "18.5rem",
     grid: {
       x: {
         enabled: false,
         color: "#d3d3d3",
-        strokeDashArray: "2,2",
+        strokeDashArray: "2,2"
       },
       y: {
         enabled: true,
         color: "#d3d3d3",
-        strokeDashArray: "2,2",
-      },
+        strokeDashArray: "2,2"
+      }
     },
     toolbar: {
       enabled: false,
       numberOfIcons: 2,
       controls: [
         {
-          type: "Make fullscreen",
+          type: "Make fullscreen"
         },
         {
-          type: "Make fullscreen",
-        },
-      ],
+          type: "Make fullscreen"
+        }
+      ]
     },
+    tooltip:{
+      enabled: true,
+      customHTML: tooltip
+    }
   };
 
 
@@ -129,8 +126,6 @@ const BarChartGrouped = (): JSX.Element => {
 
   useEffect(() =>{
 
-    console.log(`For search`, selectedOrgUnits, selectedStatusCodes, startDate, endDate);
-
     const fetchChartData = async () => {
       try {
         setIsLoading(true);

frontend/src/components/BarChartTooltip/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Button } from "@carbon/react";
+import * as Icons from "@carbon/icons-react";
+import { OpeningPerYearChart } from "../../types/OpeningPerYearChart";
+import { status } from "../../services/search/openings";
+
+interface BarChartTooltipProps {
+  data: OpeningPerYearChart[];
+  defaultHTML: string;
+  datum: OpeningPerYearChart
+}
+
+const BarChartTooltip: React.FC<BarChartTooltipProps> = ({ datum }) => {
+
+  const statusDescription = (statusCode: string) => (
+    status.find((statusData) => statusData.value === statusCode)?.text ?? statusCode
+  ).toLowerCase();
+
+  return (
+    <div>
+      <div>
+        <Button
+        hasIconOnly
+        kind="ghost"
+        renderIcon={Icons.MapBoundary}
+        onClick={() => null}
+        size="md"
+      />
+          {datum.value} {datum.group}</div>
+      <div>
+        <ul>
+          {Object.keys(datum.statusCount).map((status, index) => (<li key={index}>{datum.statusCount[status]} {statusDescription(status)}</li>))}
+        </ul>
+      </div>
+      <Button
+        iconDescription="Go to the Openings search page"
+        tooltipPosition="bottom"
+        renderIcon={Icons.List}
+        onClick={() => null}
+        size="md"
+      >
+        Go to openings
+      </Button>
+    </div>
+  );
+};
+
+export default BarChartTooltip;