feat: highlighting flags chart (#8237)

frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx

@@ -292,7 +292,7 @@ export const NetworkTrafficUsage: VFC = () => {
                         <Grid item xs={12} md={2}>
                             <Bar
                                 data={data}
-                                plugins={[customHighlightPlugin]}
+                                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'
                             />

frontend/src/component/common/Chart/customHighlightPlugin.ts

@@ -1,9 +1,8 @@
 import type { Chart } from 'chart.js';
 
-export const customHighlightPlugin = {
+export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({
     id: 'customLine',
     beforeDraw: (chart: Chart) => {
-        const width = 46;
         if (chart.tooltip?.opacity && chart.tooltip.x) {
             const x = chart.tooltip.caretX;
             const yAxis = chart.scales.y;
@@ -22,11 +21,11 @@ export const customHighlightPlugin = {
                 x - width / 2,
                 yAxis.top,
                 width,
-                yAxis.bottom - yAxis.top + 34,
+                yAxis.bottom - yAxis.top + bottomOverflow,
                 5,
             );
             ctx.fill();
             ctx.restore();
         }
     },
-};
+});

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -23,6 +23,7 @@ import {
     createPlaceholderBarChartOptions,
 } from './createChartOptions';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { customHighlightPlugin } from '../common/Chart/customHighlightPlugin';
 
 const defaultYes = [
     45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000,
@@ -79,7 +80,10 @@ export const PlaceholderFlagMetricsChart = () => {
 const useMetricsEnvironments = (project: string, flagName: string) => {
     const [environment, setEnvironment] = useState<string | null>(null);
     const { feature } = useFeature(project, flagName);
-    const activeEnvironments = feature.environments;
+    const activeEnvironments = feature.environments.map((env) => ({
+        name: env.name,
+        type: env.type,
+    }));
     const firstProductionEnvironment = activeEnvironments.find(
         (env) => env.type === 'production',
     );
@@ -90,7 +94,7 @@ const useMetricsEnvironments = (project: string, flagName: string) => {
         } else if (activeEnvironments.length > 0) {
             setEnvironment(activeEnvironments[0].name);
         }
-    }, [flagName]);
+    }, [flagName, JSON.stringify(activeEnvironments)]);
 
     return { environment, setEnvironment, activeEnvironments };
 };
@@ -188,6 +192,7 @@ export const FlagMetricsChart: FC<{
 
             <Bar
                 data={data}
+                plugins={[customHighlightPlugin(30, 0)]}
                 options={options}
                 aria-label='A bar chart with a single feature flag exposure metrics'
             />

frontend/src/component/personalDashboard/createChartOptions.ts

@@ -82,6 +82,11 @@ export const createBarChartOptions = (
     return {
         plugins: {
             legend: plugins?.legend,
+            // required to avoid the highlight plugin highlighting empty annotation
+            annotation: {
+                clip: false,
+                annotations: {},
+            },
             tooltip: {
                 backgroundColor: theme.palette.background.paper,
                 titleColor: theme.palette.text.primary,