@centreon/ui 25.10.20 → 25.10.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.10.20",
+  "version": "25.10.22",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/Inputs/Grid.tsx

@@ -21,8 +21,9 @@ const Grid = ({
     <div
       className={`${className} grid gap-3`}
       style={{
-        gridTemplateColumns:
-          className ? grid?.gridTemplateColumns || undefined : grid?.gridTemplateColumns ||
+        gridTemplateColumns: className
+          ? grid?.gridTemplateColumns || undefined
+          : grid?.gridTemplateColumns ||
             `repeat(${grid?.columns.length || 1}, 1fr)`,
         alignItems: grid?.alignItems || 'flex-start'
       }}

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,9 @@
 export const useNavigateToSection = () => {
-    return (sectionName: string) => {
-        const section = document.querySelector(
-            `[data-section-group-form-id="${sectionName}"]`
-        );
+  return (sectionName: string) => {
+    const section = document.querySelector(
+      `[data-section-group-form-id="${sectionName}"]`
+    );
 
-        section?.scrollIntoView({ behavior: 'smooth' });
-    };
+    section?.scrollIntoView({ behavior: 'smooth' });
+  };
 };

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -4,10 +4,12 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
+import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -312,4 +314,21 @@ describe('Bar chart', () => {
     cy.contains('1 s').should('be.visible');
     cy.contains('1%').should('be.visible');
   });
+
+  it('displays the stacked bar chart correctly when a point is missing compare to the time serie', () => {
+    initialize({ data: dataMissingPoint });
+
+    cy.findByTestId('stacked-bar-2-0-139').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the stacked bar chart with bars stacked together', () => {
+    initialize({ data: dataPingServiceLinesStackKeys });
+
+    cy.findByTestId('stacked-bar-3-0-0.05336').should('be.visible');
+    cy.findByTestId('stacked-bar-4-0-0.06684').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -5,7 +5,10 @@ import { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
 
+import { ClickAwayListener } from '@mui/material';
+import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -259,4 +262,51 @@ export const mixedStackedMinMax: Story = {
     max: 20
   },
   render: Template
-};
+};
+
+const LegendSecondaryClick = (args) => {
+  const [position, setPosition] = useState<Array<[number, number]> | null>(
+    null
+  );
+
+  return (
+    <>
+      <Template
+        {...args}
+        legend={{
+          secondaryClick: ({ position }) => setPosition(position)
+        }}
+      />
+      {position && (
+        <ClickAwayListener onClickAway={() => setPosition(null)}>
+          <div
+            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
+            style={{ left: position?.[0], top: position?.[1] }}
+            open={Boolean(position)}
+            onClose={() => setPosition(null)}
+          >
+            menu
+          </div>
+        </ClickAwayListener>
+      )}
+    </>
+  );
+};
+
+export const withLegendSecondaryClick: Story = {
+  args: defaultArgs,
+  render: (args) => (
+    <LegendSecondaryClick
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};
+
+export const stackKey: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStackeKey
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -116,4 +116,4 @@ const BarChart = ({
   );
 };
 
-export default BarChart;
+export default BarChart;

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,12 +1,13 @@
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
-import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { difference, equals, keys, omit, pick } from 'ramda';
 import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
   getSortedStackedLines,
+  getStackedLinesTimeSeriesPerStackAndUnit,
   getTime,
   getTimeSeriesForLines,
   getUnits
@@ -54,41 +55,18 @@ const BarGroup = ({
   );
 
   const stackedLines = getSortedStackedLines(lines);
-  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
-
-  const stackedKeys = stackedUnits.reduce(
-    (acc, unit) => ({
-      ...acc,
-      [`stacked-${unit}`]: null
-    }),
-    {}
-  );
-  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = stackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
-
   const notStackedTimeSeries = getTimeSeriesForLines({
     lines: notStackedLines,
     timeSeries
   });
 
+  const { stackedLinesTimeSeriesPerStackKeyAndUnit, stackedKeys } = useMemo(
+    () =>
+      getStackedLinesTimeSeriesPerStackAndUnit({ stackedLines, timeSeries }),
+    [stackedLines, timeSeries]
+  );
+
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
     ...stackedKeys
@@ -98,6 +76,16 @@ const BarGroup = ({
     deps: [normalizedTimeSeries],
     variable: keys(omit(['timeTick'], normalizedTimeSeries[0]))
   });
+  const sortedLineKeys = lineKeys.sort((lineKeyA: string, lineKeyB: string) => {
+    if (lineKeyA.startsWith('stacked-') && !lineKeyB.startsWith('stacked-')) {
+      return true;
+    }
+
+    const lineKeysA = lineKeyA.split('-');
+    const lineKeysB = lineKeyB.split('-');
+
+    return lineKeysA[2] === '' && lineKeysB[2] !== '';
+  });
   const colors = useDeepMemo({
     deps: [lineKeys, lines],
     variable: lineKeys.map((key) => {
@@ -154,7 +142,7 @@ const BarGroup = ({
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
-      keys={lineKeys}
+      keys={sortedLineKeys}
       {...barComponentBaseProps}
     >
       {(barGroups) =>
@@ -164,7 +152,9 @@ const BarGroup = ({
               key={`bar-group-${barGroup.index}-${barGroup.x0}`}
               barGroup={barGroup}
               barStyle={barStyle}
-              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              stackedLinesTimeSeriesPerStackKeyAndUnit={
+                stackedLinesTimeSeriesPerStackKeyAndUnit
+              }
               notStackedTimeSeries={notStackedTimeSeries}
               notStackedLines={notStackedLines}
               isTooltipHidden={isTooltipHidden}

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
   isTooltipHidden: boolean;
   barStyle: BarStyle;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-  stackedLinesTimeSeriesPerUnit: Record<
+  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
     string,
     { lines: Array<Line>; timeSeries: Array<TimeValue> }
   >;
@@ -25,7 +25,7 @@ interface Props {
 
 const MemoizedGroup = ({
   barGroup,
-  stackedLinesTimeSeriesPerUnit,
+  stackedLinesTimeSeriesPerStackKeyAndUnit,
   notStackedLines,
   notStackedTimeSeries,
   isHorizontal,
@@ -38,9 +38,7 @@ const MemoizedGroup = ({
   const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
     if (key.startsWith('stacked-')) {
       const timeValueBar =
-        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
-          barIndex
-        ];
+        stackedLinesTimeSeriesPerStackKeyAndUnit[key].timeSeries[barIndex];
 
       return Object.values(omit(['timeTick'], timeValueBar)).every(
         (value) => !value
@@ -59,13 +57,12 @@ const MemoizedGroup = ({
       {barGroup.bars.map((bar) => {
         const isStackedBar = bar.key.startsWith('stacked-');
         const linesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
               equals(metric_id, Number(bar.key))
             ) as Line);
         const timeSeriesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-              .timeSeries
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
               timeTick: timeSerie.timeTick,
               [bar.key]: timeSerie[Number(bar.key)]
@@ -82,7 +79,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            yScale={yScalesPerUnit[bar.key.split('-')[1] || undefined]}
             neutralValue={neutralValue}
           />
         ) : (
@@ -110,8 +107,8 @@ export default memo(
   (prevProps, nextProps) =>
     equals(prevProps.barGroup, nextProps.barGroup) &&
     equals(
-      prevProps.stackedLinesTimeSeriesPerUnit,
-      nextProps.stackedLinesTimeSeriesPerUnit
+      prevProps.stackedLinesTimeSeriesPerStackKeyAndUnit,
+      nextProps.stackedLinesTimeSeriesPerStackKeyAndUnit
     ) &&
     equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
     equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -196,7 +196,8 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent
+        renderExtraComponent: legend?.renderExtraComponent,
+        secondaryClick: legend?.secondaryClick
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -1,9 +1,7 @@
-import { equals, pluck, uniq } from 'ramda';
-
 import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
-  getTimeSeriesForLines
+  getStackedLinesTimeSeriesPerStackAndUnit
 } from '../../../../common/timeSeries';
 import { LinesData } from '../models';
 
@@ -14,53 +12,28 @@ interface StackedLinesState {
 
 const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
   const regularStackedLines = getNotInvertedStackedLines(lines);
-  const regularStackedUnits = uniq(pluck('unit', regularStackedLines));
-  const regularStackedLinesTimeSeriesPerUnit = regularStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = regularStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      regularStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: regularStackedLines,
+    timeSeries
+  });
 
   const invertedStackedLines = getInvertedStackedLines(lines);
-  const invertedStackedUnits = uniq(pluck('unit', invertedStackedLines));
-  const invertedStackedLinesTimeSeriesPerUnit = invertedStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = invertedStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
 
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            invert: true,
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      invertedStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: invertedStackedLines,
+    timeSeries,
+    invert: true
+  });
 
   return {
-    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerUnit,
-    stackedLinesData: regularStackedLinesTimeSeriesPerUnit
+    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerStackKeyAndUnit,
+    stackedLinesData: regularStackedLinesTimeSeriesPerStackKeyAndUnit
   };
 };
 

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -101,34 +101,40 @@ const Lines = ({
       {(areaStackedLines?.display ?? true) && (
         <>
           {Object.entries(stackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={yScalesPerUnit[unit || undefined]}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
           {Object.entries(invertedStackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`invert-stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={getYScale({
-                  invert: '1',
-                  scale,
-                  scaleLogarithmicBase,
-                  unit,
-                  yScalesPerUnit
-                })}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`invert-stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={getYScale({
+                    invert: '1',
+                    scale,
+                    scaleLogarithmicBase,
+                    unit: unit || undefined,
+                    yScalesPerUnit
+                  })}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
         </>
       )}

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -180,7 +180,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.4 s').should('be.visible');
-       cy.contains('75.64%').should('be.visible');
+      cy.contains('75.64%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -532,7 +532,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="250.83333333333334"]').should('be.visible');
+      cy.get('circle[cx="248.33333333333334"]').should('be.visible');
       cy.get('circle[cy="251.79089393069725"]').should('be.visible');
 
       cy.makeSnapshot();
@@ -591,7 +591,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle[cx="33.44444444444444"]').should('be.visible');
+      cy.get('circle[cx="33.11111111111111"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -746,9 +746,11 @@ describe('Lines and bars', () => {
 
     checkGraphWidth();
 
-    cy.get('path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
+    cy.get(
+      'path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
     ).should('be.visible');
-    cy.get('path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+    cy.get(
+      'path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();
@@ -814,4 +816,21 @@ describe('Lines and bars', () => {
 
     cy.makeSnapshot();
   });
+
+  it('calls the secondary function when a metric is clicked in the legend', () => {
+    const secondaryClick = cy.stub().as('secondaryClick');
+    initialize({
+      data: dataPingServiceLines,
+      legend: {
+        mode: 'grid',
+        placement: 'bottom',
+        secondaryClick
+      }
+    });
+
+    checkGraphWidth();
+
+    cy.contains('Packet Loss').rightclick();
+    cy.get('@secondaryClick').should('have.been.called');
+  });
 });

package/src/Graph/Chart/Chart.stories.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '@mui/material';
+import { Button, Menu } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
@@ -26,6 +26,7 @@ import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
+import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 import dataZoomPreview from '../mockedData/zoomPreview.json';
 
 import { dateTimeFormat } from './common';
@@ -758,3 +759,44 @@ export const linesAndBarsMinMaxForUnit: Story = {
     />
   )
 };
+
+const LegendSecondaryClick = (args) => {
+  const [anchor, setAnchor] = useState<EventTarget | null>(null);
+
+  return (
+    <>
+      <WrapperChart
+        {...args}
+        legend={{
+          secondaryClick: ({ element }) => setAnchor(element)
+        }}
+      />
+      <Menu
+        anchorEl={anchor}
+        open={Boolean(anchor)}
+        onClose={() => setAnchor(null)}
+      >
+        menu
+      </Menu>
+    </>
+  );
+};
+
+export const withLegendSecondaryClick: Story = {
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <LegendSecondaryClick
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};
+
+export const stackedKey: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    data: dataPingServiceLinesStackKeys
+  }
+};

package/src/Graph/Chart/Chart.tsx

@@ -277,7 +277,8 @@ const Chart = ({
             legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
-            renderExtraComponent: legend?.renderExtraComponent
+            renderExtraComponent: legend?.renderExtraComponent,
+            secondaryClick: legend?.secondaryClick
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}
@@ -394,4 +395,4 @@ const Chart = ({
   );
 };
 
-export default Chart;
+export default Chart;

package/src/Graph/Chart/Legend/index.tsx

@@ -26,6 +26,11 @@ interface Props extends Pick<LegendModel, 'placement' | 'mode'> {
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   shouldDisplayLegendInCompactMode: boolean;
   toggable?: boolean;
+  secondaryClick?: (props: {
+    element: EventTarget | null;
+    metricId: number | string;
+    position: [number, number];
+  }) => void;
 }
 
 const MainLegend = ({
@@ -38,7 +43,8 @@ const MainLegend = ({
   shouldDisplayLegendInCompactMode,
   placement,
   height,
-  mode
+  mode,
+  secondaryClick
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     limitLegendRows: Boolean(limitLegend),
@@ -65,7 +71,24 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  const selectMetric = ({ event, metric_id }): void => {
+  const contextMenuClick =
+    (metricId: number) =>
+    (event: MouseEvent): void => {
+      if (!secondaryClick) {
+        return;
+      }
+      event.preventDefault();
+      secondaryClick({
+        element: event.target,
+        metricId,
+        position: [event.pageX, event.pageY]
+      });
+    };
+
+  const selectMetric = ({
+    event,
+    metric_id
+  }: { event: MouseEvent; metric_id: number }): void => {
     if (!toggable) {
       return;
     }
@@ -127,6 +150,7 @@ const MainLegend = ({
               onClick={(event): void => selectMetric({ event, metric_id })}
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
+              onContextMenu={contextMenuClick(metric_id)}
             >
               <LegendHeader
                 color={markerColor}