implement a custom tooltip for incidents

Author: jgbernalp

web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Chart,
@@ -8,7 +8,6 @@ import {
   ChartLabel,
   ChartLegend,
   ChartThemeColor,
-  ChartTooltip,
   ChartVoronoiContainer,
 } from '@patternfly/react-charts/victory';
 import {
@@ -25,16 +24,53 @@ import {
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
 import { useDispatch, useSelector } from 'react-redux';
+import { VictoryPortal } from 'victory';
 import { setAlertsAreLoading, setChooseIncident } from '../../../actions/observe';
 import { MonitoringState } from '../../../reducers/observe';
+import '../incidents-styles.css';
 import { Incident } from '../model';
 import {
   createIncidentsChartBars,
   formatDate,
   generateDateArray,
   updateBrowserUrl,
 } from '../utils';
-import { VictoryPortal } from 'victory';
+
+const TOOLTIP_MAX_HEIGHT = 300;
+const TOOLTIP_MAX_WIDTH = 500;
+
+const IncidentsTooltip = ({
+  x,
+  y,
+  x0,
+  height,
+  text,
+}: {
+  x?: number;
+  y?: number;
+  x0?: number;
+  height?: number;
+  text?: string | Array<string>;
+}) => {
+  const posx = x - (x - x0) / 2 - TOOLTIP_MAX_WIDTH / 2;
+  const posy = y - Math.min(height || 0, TOOLTIP_MAX_HEIGHT) / 2 - 20;
+  const textArray: Array<string> = Array.isArray(text) ? text : [text];
+
+  return (
+    <VictoryPortal>
+      <foreignObject height={TOOLTIP_MAX_HEIGHT} width={TOOLTIP_MAX_WIDTH} x={posx} y={posy}>
+        <div className="incidents__tooltip-wrap">
+          <div className="incidents__tooltip">
+            {textArray.map((text, index) => (
+              <p key={index}>{text}</p>
+            ))}
+          </div>
+          <div className="incidents__tooltip-arrow" />
+        </div>
+      </foreignObject>
+    </VictoryPortal>
+  );
+};
 
 const IncidentsChart = ({
   incidentsData,
@@ -132,17 +168,7 @@ const IncidentsChart = ({
             <Chart
               containerComponent={
                 <ChartVoronoiContainer
-                  labelComponent={
-                    <VictoryPortal>
-                      <ChartTooltip
-                        activateData={false}
-                        orientation="top"
-                        dx={({ x, x0 }: any) => -(x - x0) / 2}
-                        dy={-5} // Position tooltip so pointer appears above bar
-                        labelComponent={<ChartLabel />}
-                      />
-                    </VictoryPortal>
-                  }
+                  labelComponent={<IncidentsTooltip />}
                   voronoiPadding={0}
                   labels={({ datum }) => {
                     if (datum.nodata) {

web/src/components/Incidents/incidents-styles.css

@@ -1,3 +1,27 @@
 .expanded-details-text-margin {
   margin-left: 2px;
 }
+
+.incidents__tooltip-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.incidents__tooltip {
+  background-color: var(--pf-t--global--background--color--inverse--default);
+  border-radius: var(--pf-t--global--border--radius--small);
+  color: var(--pf-t--global--text--color--inverse);
+  font-size: 12px;
+  overflow-x: hidden;
+  padding: 10px;
+}
+
+.incidents__tooltip-arrow {
+  border-left: 12px solid transparent;
+  border-top: 12px solid var(--pf-t--global--background--color--inverse--default);
+  border-right: 12px solid transparent;
+  height: 0;
+  margin-top: -1px;
+  width: 0;
+}