reuse tooltip for incidents alert chart

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Author: jgbernalp

web/src/components/Incidents/AlertsChart/AlertsChart.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   Chart,
@@ -7,21 +7,26 @@ import {
   ChartGroup,
   ChartLabel,
   ChartLegend,
-  ChartTooltip,
   ChartVoronoiContainer,
 } from '@patternfly/react-charts/victory';
-import { Card, CardBody, CardTitle, EmptyState, EmptyStateBody } from '@patternfly/react-core';
-import { createAlertsChartBars, formatDate, generateDateArray } from '../utils';
-import { getResizeObserver } from '@patternfly/react-core';
-import { useDispatch, useSelector } from 'react-redux';
-import { setAlertsAreLoading } from '../../../actions/observe';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  EmptyState,
+  EmptyStateBody,
+  getResizeObserver,
+} from '@patternfly/react-core';
 import {
   t_global_color_status_danger_default,
   t_global_color_status_info_default,
   t_global_color_status_warning_default,
 } from '@patternfly/react-tokens';
+import { useDispatch, useSelector } from 'react-redux';
+import { setAlertsAreLoading } from '../../../actions/observe';
 import { MonitoringState } from '../../../reducers/observe';
-import { VictoryPortal } from 'victory';
+import { IncidentsTooltip } from '../IncidentsTooltip';
+import { createAlertsChartBars, formatDate, generateDateArray } from '../utils';
 
 const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
@@ -96,16 +101,7 @@ const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' |
             <Chart
               containerComponent={
                 <ChartVoronoiContainer
-                  labelComponent={
-                    <VictoryPortal>
-                      <ChartTooltip
-                        orientation="top"
-                        dx={({ x, x0 }: any) => -(x - x0) / 2}
-                        dy={-5} // Position tooltip so pointer appears above bar
-                        labelComponent={<ChartLabel />}
-                      />
-                    </VictoryPortal>
-                  }
+                  labelComponent={<IncidentsTooltip />}
                   labels={({ datum }) => {
                     if (datum.nodata) {
                       return null;

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

@@ -24,10 +24,10 @@ 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 { IncidentsTooltip } from '../IncidentsTooltip';
 import { Incident } from '../model';
 import {
   createIncidentsChartBars,
@@ -36,42 +36,6 @@ import {
   updateBrowserUrl,
 } from '../utils';
 
-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,
   chartDays,

web/src/components/Incidents/IncidentsTooltip.tsx

@@ -0,0 +1,37 @@
+import { VictoryPortal } from 'victory';
+import './incidents-styles.css';
+
+const TOOLTIP_MAX_HEIGHT = 300;
+const TOOLTIP_MAX_WIDTH = 500;
+export 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>
+  );
+};