From 7ca8cc22760053318c8ce3f21686d8bc05692cf7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 29 Jan 2025 12:03:31 +0100
Subject: [PATCH] fix: dynamic highlight width (#9166)

This makes the width of the highlight bars in the network dynamic and
based on the number of labels included in the chart.

Since the number of labels should always correspond to the number of
data points, this seems like a sensible approach.

With this, the label width will now be calculated on the fly, so even if
you resize the window or change the number of labels, the highlighting
will still work as expected.

Daily view:

![image](https://github.com/user-attachments/assets/e1d158db-0587-46b3-afb1-76dfc523505d)

Monthly aggregate:

![image](https://github.com/user-attachments/assets/8c74d2a3-afc8-4623-8ac7-0c263c7e6037)

The labels are now a little narrower on the daily graphs, but it avoids
them being super wide on the monthly graphs
---
 .../NetworkTrafficUsage/NetworkTrafficUsage.tsx        |  2 +-
 .../component/common/Chart/customHighlightPlugin.ts    | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
index bc5b4e489e..041f9b9eab 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -298,7 +298,7 @@ const NewNetworkTrafficUsage: FC = () => {
                         </NewHeader>
                         <Bar
                             data={data}
-                            plugins={[customHighlightPlugin()]} // todo: accomodate wide bars when grouping by month
+                            plugins={[customHighlightPlugin()]}
                             options={options}
                             aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API' // todo: this isn't correct at all!
                         />
diff --git a/frontend/src/component/common/Chart/customHighlightPlugin.ts b/frontend/src/component/common/Chart/customHighlightPlugin.ts
index 0dc2854a11..f0c35153e3 100644
--- a/frontend/src/component/common/Chart/customHighlightPlugin.ts
+++ b/frontend/src/component/common/Chart/customHighlightPlugin.ts
@@ -1,6 +1,6 @@
 import type { Chart } from 'chart.js';
 
-export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({
+export const customHighlightPlugin = (bottomOverflow = 34) => ({
     id: 'customLine',
     beforeDraw: (chart: Chart) => {
         if (chart.tooltip?.opacity && chart.tooltip.x) {
@@ -17,10 +17,14 @@ export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({
             gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
             gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
             ctx.fillStyle = gradient;
+
+            const barWidth =
+                (chart.width / (chart.data.labels?.length ?? 1)) *
+                (chart.options.datasets?.bar?.categoryPercentage ?? 1);
             ctx.roundRect(
-                x - width / 2,
+                x - barWidth / 2,
                 yAxis.top,
-                width,
+                barWidth,
                 yAxis.bottom - yAxis.top + bottomOverflow,
                 5,
             );