Create reusable tooltip for bar chart

frontend/src/components/BarChart.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useContext } from "react";
 import { AuthContext } from "../components/AuthProvider";
 import { getTimeEntries } from "../utils";
 import { FetchedTimeEntry } from "../model";
+import { Tooltip } from "./Tooltip";
 
 export const BarChart = ({ loading }: { loading: boolean }) => {
   const [spentTime, setSpentTime] = useState<{
@@ -87,7 +88,7 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
         ) : Object.keys(spentTime).includes("Loading") ? (
           <div className="bar-chart-section">Loading...</div>
         ) : (
-          Object.keys(spentTime).map((key) => {
+          Object.keys(spentTime).map((key, index) => {
             // If the number of hours is so low that the width would be rounded down to 0%,
             // make it a thin slice anyway to show that it's there
             const width =
@@ -103,13 +104,35 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
                   backgroundColor: `${
                     colorScheme[key] ? colorScheme[key] : "hsl(291deg 13% 90%)"
                   }`,
+                  borderRadius: `${
+                    index === 0
+                      ? "4px 0 0 4px"
+                      : index === Object.keys(spentTime).length - 1
+                      ? "0 4px 4px 0"
+                      : "0"
+                  }`,
                 }}
                 className="bar-chart-section"
               >
-                <p>{spentTime[key].name}</p>
-                <p>
-                  {spentTime[key].hours}h, {getPercent(spentTime[key].hours)}%
-                </p>
+                <Tooltip
+                  content={
+                    <>
+                      <p>{spentTime[key].name}</p>
+                      <p>
+                        {spentTime[key].hours}h,{" "}
+                        {getPercent(spentTime[key].hours)}%
+                      </p>
+                    </>
+                  }
+                >
+                  <div className="bar-chart-label">
+                    <p>{spentTime[key].name}</p>
+                    <p>
+                      {spentTime[key].hours}h,{" "}
+                      {getPercent(spentTime[key].hours)}%
+                    </p>
+                  </div>
+                </Tooltip>
               </div>
             );
           })

frontend/src/components/Row.tsx

@@ -10,6 +10,7 @@ import eyeSlash from "../icons/eye-slash.svg";
 import eye from "../icons/eye.svg";
 import { dateFormat } from "../utils";
 import { PUBLIC_REDMINE_URL } from "../utils";
+import { Tooltip } from "./Tooltip";
 
 export const Row = ({
   topic,
@@ -106,7 +107,9 @@ export const Row = ({
               >{`# ${topic.issue.id}`}</a>
             </p>
             {isFav ? (
-              <div className="issuetooltip">
+              <Tooltip
+                content={`${topic.issue.subject} - ${topic.activity.name}`}
+              >
                 <textarea
                   aria-label={`Custom name for the issue ${topic.issue.id}, ${topic.issue.subject}, on the activity ${topic.activity.name}`}
                   className="issue-textarea"
@@ -130,10 +133,7 @@ export const Row = ({
                   }}
                   maxLength={100}
                 />
-                <span className="tooltiptext">
-                  {topic.issue.subject} - {topic.activity.name}
-                </span>
-              </div>
+              </Tooltip>
             ) : (
               <p className="issue-label-text">
                 {topic.custom_name

frontend/src/components/Tooltip.tsx

@@ -0,0 +1,21 @@
+import React, { ReactChild, useState } from "react";
+
+export const Tooltip = ({
+  content,
+  children,
+}: {
+  content: string | JSX.Element;
+  children: ReactChild;
+}) => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div
+      className="tooltip-wrapper"
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      {children}
+      {visible && <span className="tooltip-box">{content}</span>}
+    </div>
+  );
+};

frontend/src/index.css

@@ -392,16 +392,12 @@ Other button classes are defined further down together with other classes for th
   opacity: 1;
 }
 
-.issuetooltip {
+.tooltip-wrapper {
   width: 100%;
   position: relative;
-  display: inline-block;
-  opacity: 1;
-  z-index: 1;
 }
 
-.tooltiptext {
-  visibility: hidden;
+.tooltip-box {
   width: auto;
   height: auto;
   background-color: hsl(0deg 0% 90%);
@@ -411,10 +407,10 @@ Other button classes are defined further down together with other classes for th
   position: absolute;
   bottom: 125%;
   left: 50%;
-  margin-left: -60px;
+  transform: translateX(-50%);
 }
 
-.tooltiptext::after {
+.tooltip-box::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -425,10 +421,6 @@ Other button classes are defined further down together with other classes for th
   border-color: hsl(0deg 0% 0%) transparent transparent transparent;
 }
 
-.issuetooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
 .dropdown-button {
   margin-right: 1rem;
   background-color: hsl(186deg 30% 94%);
@@ -824,21 +816,24 @@ Other button classes are defined further down together with other classes for th
   display: flex;
   width: 100%;
   border-radius: 4px;
-  overflow: hidden;
 }
 
 .bar-chart-section {
-  overflow: hidden;
   height: 100%;
   padding-left: 0.3rem;
 }
 
-.bar-chart-section > p {
+.bar-chart-section p {
   display: block ruby;
   margin: 0;
   font-size: 0.8rem;
 }
 
+.bar-chart-label {
+  width: 100%;
+  overflow: hidden;
+}
+
 .vacation-plan-picker-label {
   margin: 0 0 0.1rem;
 }

frontend/src/utils.tsx

@@ -179,7 +179,7 @@ export const getTimeEntries = async (
   from_date: Date,
   to_date: Date,
   context: any,
-  user_id: string
+  user_id?: string
 ) => {
   // The ofset param is used to get all time_entries
   // from the api, as the limit per batch is 100