Global health bar with recharts #904

JeanMarcMilletScality · 2025-09-08T14:16:29Z

Reworks Global health bar using Recharts lib
Tooltip:

Use Portal for tooltip to avoid clipping issue when GlobalHealthBar is in a container

Label:

Add calculation and conditions for ticks labels to have consistent spacing between labels and have same behavior as previous chart
Add margin to chart to avoid label clipping

Next Step: Add round edges to bars when bars is at start or end of chart (use mask?)

bert-e · 2025-09-08T14:16:33Z

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
`/after_pull_request`	Wait for the given pull request id to be merged before continuing with the current one.
`/bypass_author_approval`	Bypass the pull request author's approval	⭐
`/bypass_build_status`	Bypass the build and test status	⭐
`/bypass_commit_size`	Bypass the check on the size of the changeset `TBA`	⭐
`/bypass_incompatible_branch`	Bypass the check on the source branch prefix	⭐
`/bypass_jira_check`	Bypass the Jira issue check	⭐
`/bypass_peer_approval`	Bypass the pull request peers' approval	⭐
`/bypass_leader_approval`	Bypass the pull request leaders' approval	⭐
`/approve`	Instruct Bert-E that the author has approved the pull request.		✍️
`/create_pull_requests`	Allow the creation of integration pull requests.
`/create_integration_branches`	Allow the creation of integration branches.
`/no_octopus`	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
`/unanimity`	Change review acceptance criteria from `one reviewer at least` to `all reviewers`
`/wait`	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
`/help`	Print Bert-E's manual in the pull request.
`/status`	Print Bert-E's current status in the pull request `TBA`
`/clear`	Remove all comments from Bert-E from the history `TBA`
`/retry`	Re-start a fresh build `TBA`
`/build`	Re-start a fresh build `TBA`
`/force_reset`	Delete integration branches & pull requests, and restart merge process from the beginning.
`/reset`	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

bert-e · 2025-09-08T14:16:42Z

Conflict

There is a conflict between your branch feature/global-health-bar-recharts and the
destination branch development/1.0.

Please resolve the conflict on the feature branch (feature/global-health-bar-recharts).

git fetch && \
git checkout origin/feature/global-health-bar-recharts && \
git merge origin/development/1.0

Resolve merge conflicts and commit

git push origin HEAD:feature/global-health-bar-recharts

bert-e · 2025-09-08T14:32:09Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2025-09-10T13:42:26Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2025-09-12T08:53:13Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2025-09-12T11:20:12Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2025-09-15T13:13:28Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

…h tooltip

…ry slider, and utils with calc functions

…oltip functionality and data handling. Remove unused HistoryProvider and HistorySlider components. Update tooltip styling and data structure for alerts. Add 'Small' variant to text component

…actor data handling with useHealthBarData hook.

…XAxis component and consolidating utility constants in utils.tsx. Update CustomTooltip to accept tooltipProps for enhanced functionality.

…lobalHealthBar. Update GlobalHealthBar to utilize the new portal for tooltip display, enhancing positioning and visibility.

Add test

Add test for healthbar hook

bert-e · 2025-09-17T13:43:17Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

JBWatenbergScality · 2025-09-19T07:17:48Z

src/lib/components/globalhealthbar/components/AlertBar.tsx

+  startTimestamp: number,
+  endTimestamp: number,
+) => {
+  return (props: any, key: string) => {


Suggested change

return (props: any, key: string) => {

return (props: SHOULD_BE_RECT_PROPS, key: string) => {

JBWatenbergScality · 2025-09-19T07:46:58Z

src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx

+
+      setTooltipPosition({ left, top });
+    }
+  }, [coordinate, chartContainerRef]);


nit(for later): I feel like the whole logic of the effect also needs to be executed on scroll and window resize 🤔

Probably some of this can be computed using utils from floating-ui instead of re-inventing the wheel 🤔

JBWatenbergScality · 2025-09-19T07:52:28Z

src/lib/components/globalhealthbar/components/HealthBarXAxis.tsx

+    shouldShowLabel && (
+      <g transform={`translate(${payload.coordinate},${y})`}>
+        <text
+          textAnchor="middle"
+          dy={10}
+          dx={edgeMargin}
+          fontSize={fontSize.smaller}
+          fill={theme.textSecondary}
+        >
+          {is7DaySpan || isDaySpan ? (
+            <FormattedDateTime
+              format="day-month-abbreviated-hour-minute"
+              value={new Date(payload.value)}
+            />
+          ) : (
+            <FormattedDateTime format="time" value={new Date(payload.value)} />
+          )}
+        </text>
+      </g>


Isn't this the same logic for linetemporal chart and temporal bar charts ?

There is no such logic in Barchart but we could use it in Line chart

JBWatenbergScality · 2025-09-19T07:54:47Z

src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx

+  const handlePointerEnter = useCallback(
+    (key: string) => {
+      setTooltipData(data[0][`alert_${key}`]);
+    },
+    [data],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    setTooltipData(null);
+  }, []);


Shouldn't be only pointer, but focus changes so that keyboard navigation can trigger the tooltip

JBWatenbergScality · 2025-09-19T07:58:04Z

src/lib/components/globalhealthbar/components/AlertBar.tsx

+  dataKey: string;
+  yAxisId: string;
+  fill: string;
+  shape: (props: BarProps) => JSX.Element;


pretty sure we can replace this props by alertstartTime and endTime and simplify usage of this alertBar component

@JBWatenbergScality Remove it as proper data for recharts make it useless

JBWatenbergScality · 2025-09-19T08:00:03Z

src/lib/components/globalhealthbar/healthBarUtils.ts

+ * Calculates rectangle properties for alert bars
+ */
+export const getRectangleProps = (
+  props: any,


would be nice to type this

JBWatenbergScality · 2025-09-19T08:02:38Z

src/lib/components/globalhealthbar/useHealthBarData.ts

+  );
+
+  const data = useMemo(
+    () => [


I'm not sure to understand why data needs to be an array if there is always a single entry in there

Because Barchart expect an array for data.
I compute everything in data so I propose to separate the data needs for the barchart from the data for tooltip and bars

stories/GlobalHealthBar/globalhealthbarRecharts.stories.tsx

…hart and data for tooltip. Update related tests

…ealthBar

Update tests

JeanMarcMilletScality force-pushed the feature/global-health-bar-recharts branch from c6c8af7 to 73aebbd Compare September 8, 2025 14:32

JeanMarcMilletScality marked this pull request as ready for review September 8, 2025 14:33

JeanMarcMilletScality force-pushed the feature/global-health-bar-recharts branch 2 times, most recently from 9c35fde to 5e1f951 Compare September 10, 2025 15:35

JeanMarcMilletScality force-pushed the feature/global-health-bar-recharts branch from 1d9f433 to 14b943c Compare September 15, 2025 13:13

JBWatenbergScality and others added 18 commits September 17, 2025 15:29

GlobalHealthMonitoring: POC new implementation using Recharts

ae99ee8

first version functional component, standard and history feature, wit…

b1975b4

…h tooltip

init stories and guideline for new globalhealthbar

5cdbbf3

add history bar to stories

0306e46

add functions to render ticks, bars with round corners, tooltip

dd2af06

split GlobalHealthBarRecharts code in multiple files : tooltip, histo…

c469bea

…ry slider, and utils with calc functions

remove ref for tooltip of history and add fixed value for width

b1d134c

change value in storie to test next to start

c021cee

put if statements in useEffect

d931eed

Refactor GlobalHealthBar and CustomTooltip components for improved to…

b169eb8

…oltip functionality and data handling. Remove unused HistoryProvider and HistorySlider components. Update tooltip styling and data structure for alerts. Add 'Small' variant to text component

extract constants

11522c2

Extract Bar rendering from main component: add AlertBar.tsx file. Ref…

118527d

…actor data handling with useHealthBarData hook.

Refactor GlobalHealthBar component by extracting XAxis into HealthBar…

b0a9d01

…XAxis component and consolidating utility constants in utils.tsx. Update CustomTooltip to accept tooltipProps for enhanced functionality.

fix inputLine story

166f206

Add CustomTooltipPortal component for improved tooltip rendering in G…

21efc15

…lobalHealthBar. Update GlobalHealthBar to utilize the new portal for tooltip display, enhancing positioning and visibility.

Rework globalHealthbar to improve tick labels and tooltip

22c8c60

remove customtooltip component (replaced by customTooltipPortal)

be4dca5

Rename Tooltip comp

e08abfb

JeanMarcMilletScality added 9 commits September 17, 2025 15:31

Restructure files

ee35588

remove animation from bar

877eb16

incresase edge margin

4d99685

increase chart margin

151d606

1 tick out of 3 when 4 tick

92cdb6b

Add test

increase min size per tick

86d44ec

fix test and chnge label config for 1 hour tick

ff24d09

Revert some changes and tests.

4826049

Add test for healthbar hook

export new globalhealthBar

fcdaae5

JeanMarcMilletScality force-pushed the feature/global-health-bar-recharts branch from 14b943c to fcdaae5 Compare September 17, 2025 13:43

JBWatenbergScality reviewed Sep 19, 2025

View reviewed changes

JeanMarcMilletScality added 9 commits September 19, 2025 15:12

Remove stories

7b46634

Refactor how data for chart is compute: split data into data for barc…

e352e85

…hart and data for tooltip. Update related tests

Use floating ui for positionning

e90859a

Use workaround to allow keyboard navigation between alerts on GlobalH…

d98ac7a

…ealthBar

Remove AlertBar as component was simplify with proper data for Barchart

270fbf0

Update tests

storybook open on localhost 3001

e5b12f8

Remove imports

2d15567

Move keyboard navigation logic in utils

193a797

add severity 'unavailable' in Alert type

a190439

	return (props: any, key: string) => {
	return (props: SHOULD_BE_RECT_PROPS, key: string) => {

Global health bar with recharts #904

Are you sure you want to change the base?

Global health bar with recharts #904

Uh oh!

Conversation

JeanMarcMilletScality commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bert-e commented Sep 8, 2025

Hello jeanmarcmilletscality,

Uh oh!

bert-e commented Sep 8, 2025

Conflict

Uh oh!

bert-e commented Sep 8, 2025

Waiting for approval

Uh oh!

bert-e commented Sep 10, 2025

Waiting for approval

Uh oh!

bert-e commented Sep 12, 2025

Waiting for approval

Uh oh!

bert-e commented Sep 12, 2025

Waiting for approval

Uh oh!

bert-e commented Sep 15, 2025

Waiting for approval

Uh oh!

bert-e commented Sep 17, 2025

Waiting for approval

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JeanMarcMilletScality commented Sep 8, 2025 •

edited

Loading