From 8b20be1b0cd0f2b722edddb1211e87e7e5de97a0 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 6 Jan 2025 17:33:07 -0500
Subject: [PATCH] chore(charts): update "alerts timeline" example so tooltips
 appear centered horizontally (#11379)

fixes https://github.com/patternfly/patternfly-react/issues/11378
---
 .../victory/components/ChartBar/examples/ChartBar.md   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md
index bdeed8c426b..6466d22dbc7 100644
--- a/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md
+++ b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md
@@ -322,7 +322,7 @@ class Timeline extends React.Component {
       [
         { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' },
         { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' },
-        { y0: new Date('2024-08-09T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
+        { y0: new Date('2024-08-09T11:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' },
         { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' }
       ],
       [
@@ -394,7 +394,13 @@ class Timeline extends React.Component {
           containerComponent={
             <ChartVoronoiContainer
               labelComponent={
-                <ChartTooltip constrainToVisibleArea labelComponent={<ChartLabel dx={-65} textAnchor="start" />} />
+                <ChartTooltip
+                  constrainToVisibleArea
+                  dx={({ x, x0 }) => -(x - x0) / 2} // Position tooltip so pointer appears centered
+                  dy={-5} // Position tooltip so pointer appears above bar
+                  labelComponent={<ChartLabel dx={-68} textAnchor="start" />}
+                  orientation="top" // Mimic bullet chart tooltip orientation
+                />
               }
               labels={({ datum }) =>
                 `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`