@centreon/ui 25.3.4 → 25.4.0-MON-191119-npm-develop.0

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

@@ -22,7 +22,15 @@ import WrapperChart from '.';
 interface Props
   extends Pick<
     LineChartProps,
-    'legend' | 'tooltip' | 'axis' | 'lineStyle' | 'barStyle' | 'additionalLines'
+    | 'legend'
+    | 'tooltip'
+    | 'axis'
+    | 'lineStyle'
+    | 'barStyle'
+    | 'additionalLines'
+    | 'min'
+    | 'max'
+    | 'boundariesUnit'
   > {
   data?: LineChartData;
 }
@@ -69,7 +77,10 @@ const initialize = ({
   axis,
   lineStyle,
   barStyle,
-  additionalLines
+  additionalLines,
+  min,
+  max,
+  boundariesUnit
 }: Props): void => {
   cy.adjustViewport();
 
@@ -93,6 +104,9 @@ const initialize = ({
           barStyle={barStyle}
           tooltip={tooltip}
           additionalLines={additionalLines}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
         />
       </Provider>
     )
@@ -139,7 +153,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '376.203125');
+    .and('equal', '376');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -165,8 +179,8 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.45 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('0.4 s').should('be.visible');
+      cy.contains('75.64%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -188,12 +202,12 @@ describe('Line chart', () => {
       cy.get('[data-metric="connTime"]').should(
         'have.attr',
         'data-highlight',
-        'false'
+        'true'
       );
       cy.get('[data-metric="hitratio"]').should(
         'have.attr',
         'data-highlight',
-        'true'
+        'false'
       );
 
       cy.makeSnapshot();
@@ -437,7 +451,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 145.04834208635688)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 274.47726401277305)"]').should(
         'be.visible'
       );
 
@@ -451,8 +465,8 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.contains('0.9').should('be.visible');
-      cy.contains('-0.9').should('be.visible');
+      cy.contains('0.8').should('be.visible');
+      cy.contains('-0.8').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -518,8 +532,8 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="250.83333333333334"]').should('be.visible');
-      cy.get('circle[cy="52.93597418085514"]').should('be.visible');
+      cy.get('circle[cx="248.33333333333334"]').should('be.visible');
+      cy.get('circle[cy="251.79089393069725"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -577,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();
     });
@@ -733,10 +747,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,273.3424587717121 h56.51239669421488 h1v1 v100.86066622828793 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.86066622828793 v-1h1z"]'
+      '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,218.3663782225586 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.86864253262454 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.86864253262454 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      '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();
@@ -763,4 +777,60 @@ describe('Lines and bars', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays graph according to min and max boundaries', () => {
+    initialize({
+      data: dataPingServiceLines,
+      min: 0.01,
+      max: 0.1
+    });
+
+    checkGraphWidth();
+
+    cy.get('path[data-metric="1"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+
+    cy.contains('0.1 ms').should('be.visible');
+    cy.contains('0.1%').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays graph according to min and max boundaries for a unit', () => {
+    initialize({
+      data: dataPingServiceLines,
+      min: 0.01,
+      max: 0.1,
+      boundariesUnit: 'ms'
+    });
+
+    checkGraphWidth();
+
+    cy.get('path[data-metric="1"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+
+    cy.contains('0.1 ms').should('be.visible');
+    cy.contains('2%').should('be.visible');
+
+    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';
@@ -717,3 +718,85 @@ export const WithAdditionalLines: Story = {
     />
   )
 };
+
+export const linesAndBarsMinMax: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    min: 10,
+    max: 30,
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsMinMaxForUnit: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    min: 10,
+    max: 30,
+    boundariesUnit: '%',
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};
+
+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

@@ -112,7 +112,10 @@ const Chart = ({
   limitLegend,
   skipIntersectionObserver,
   transformMatrix,
-  additionalLines
+  additionalLines,
+  min,
+  max,
+  boundariesUnit
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -191,7 +194,10 @@ const Chart = ({
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - margin.bottom
+        valueGraphHeight: graphHeight - margin.bottom,
+        min,
+        max,
+        boundariesUnit
       }),
     [
       linesGraph,
@@ -246,6 +252,8 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
+  const hasSecondUnit = useMemo(() => Boolean(secondUnit), [secondUnit]);
+
   if ((!isInViewport && !skipIntersectionObserver) || !height) {
     return (
       <Skeleton
@@ -269,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}
@@ -299,7 +308,7 @@ const Chart = ({
                 timeSeries={timeSeries}
                 xScale={xScale}
                 maxAxisCharacters={maxLeftAxisCharacters}
-                hasSecondUnit={Boolean(secondUnit)}
+                hasSecondUnit={hasSecondUnit}
               >
                 <>
                   {!isEmpty(linesDisplayedAsBar) && (
@@ -327,6 +336,8 @@ const Chart = ({
                       width={graphWidth}
                       xScale={xScale}
                       yScalesPerUnit={yScalesPerUnit}
+                      hasSecondUnit={hasSecondUnit}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
                       {...shapeLines}
                     />
                   )}
@@ -355,6 +366,8 @@ const Chart = ({
                     }}
                     zoomData={{ ...zoomPreview }}
                     transformMatrix={transformMatrix}
+                    hasSecondUnit={hasSecondUnit}
+                    maxLeftAxisCharacters={maxLeftAxisCharacters}
                   />
                   {thresholds?.enabled && (
                     <Thresholds

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -15,6 +15,8 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 export const getYAnchorPoint = ({
@@ -38,11 +40,15 @@ const RegularAnchorPoint = ({
   yScale,
   metric_id,
   timeSeries,
-  lineColor
+  lineColor,
+  maxLeftAxisCharacters,
+  hasSecondUnit
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
-    xScale
+    xScale,
+    maxLeftAxisCharacters,
+    hasSecondUnit
   });
 
   if (isNil(timeTick)) {

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -15,7 +15,10 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
+
 interface GetYAnchorPoint {
   stackValues: Array<StackValue>;
   timeTick: Date | null;
@@ -43,7 +46,7 @@ export const getYAnchorPoint = ({
     return null;
   }
 
-  return yScale(timeValue[1] as number);
+  return yScale(timeValue[0] as number);
 };
 
 const StackedAnchorPoint = ({
@@ -51,11 +54,15 @@ const StackedAnchorPoint = ({
   yScale,
   stackValues,
   timeSeries,
-  lineColor
+  lineColor,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
-    xScale
+    xScale,
+    hasSecondUnit,
+    maxLeftAxisCharacters
   });
 
   if (isNil(timeTick)) {

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -6,6 +6,10 @@ import { useAtomValue } from 'jotai';
 import useAxisY from '../../../common/Axes/useAxisY';
 import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
+import {
+  computPixelsToShiftMouse,
+  computeGElementMarginLeft
+} from '../../../common/utils';
 import { margin } from '../../common';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
@@ -25,6 +29,8 @@ interface Props {
   rightScale?: ScaleLinear<number, number>;
   timeSeries: Array<TimeValue>;
   xScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const useTickGraph = ({
@@ -33,7 +39,9 @@ const useTickGraph = ({
   leftScale,
   rightScale,
   lines = [],
-  baseAxis = 1000
+  baseAxis = 1000,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): AnchorPointResult => {
   const guidingLinesRef = useRef<SVGGElement | null>(null);
   const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
@@ -69,8 +77,17 @@ const useTickGraph = ({
 
       return;
     }
+    const pixelToShift = computPixelsToShiftMouse(xScale);
     const mousePositionTimeTick = mousePosition
-      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale })?.timeTick
+      ? getTimeValue({
+          timeSeries,
+          x: mousePosition[0] - pixelToShift,
+          xScale,
+          marginLeft: computeGElementMarginLeft({
+            maxCharacters: maxLeftAxisCharacters,
+            hasSecondUnit
+          })
+        })?.timeTick
       : 0;
     const timeTickValue = mousePosition
       ? new Date(mousePositionTimeTick || 0)

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -27,15 +27,13 @@ export const useGraphValueTooltip = ({
   isSingleMode,
   sortOrder
 }: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
-  const { toDate, toTime } = useLocaleDateTimeFormat();
+  const { format } = useLocaleDateTimeFormat();
   const graphTooltipData = useAtomValue(graphTooltipDataAtom);
 
   if (isNil(graphTooltipData) || isNil(graphTooltipData.metrics)) {
     return null;
   }
 
-  const formattedDateTime = `${toDate(graphTooltipData.date)} / ${toTime(graphTooltipData.date)}`;
-
   const filteredMetrics = isSingleMode
     ? filter(
         ({ id }) => equals(id, graphTooltipData.highlightedMetricId),
@@ -54,7 +52,7 @@ export const useGraphValueTooltip = ({
   ])(sortOrder);
 
   return {
-    dateTime: formattedDateTime,
+    dateTime: format({ date: graphTooltipData.date, formatString: 'L LTS' }),
     highlightedMetricId: graphTooltipData.highlightedMetricId,
     metrics: sortedMetrics
   };

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/index.tsx

@@ -4,18 +4,29 @@ import { alpha, useTheme } from '@mui/system';
 
 import Bar from '../Bar';
 
+import { margin } from '../../common';
 import { ZoomPreviewData } from './models';
 import useZoomPreview from './useZoomPreview';
 
 const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
   const theme = useTheme();
 
-  const { graphHeight, xScale, graphWidth, getInterval, ...rest } = data;
+  const {
+    graphHeight,
+    xScale,
+    graphWidth,
+    getInterval,
+    graphSvgRef,
+    graphMarginLeft,
+    ...rest
+  } = data;
 
   const { zoomBarWidth, zoomBoundaries } = useZoomPreview({
     getInterval,
     graphWidth,
-    xScale
+    xScale,
+    graphSvgRef,
+    graphMarginLeft
   });
 
   const restData = omit(['enable'], { ...rest });
@@ -24,7 +35,7 @@ const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
     <g>
       <Bar
         fill={alpha(theme.palette.primary.main, 0.2)}
-        height={graphHeight}
+        height={graphHeight - margin.bottom}
         stroke={alpha(theme.palette.primary.main, 0.5)}
         width={zoomBarWidth}
         x={zoomBoundaries?.start || 0}

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/models.ts

@@ -1,9 +1,12 @@
 import { ScaleTime } from 'd3-scale';
 
+import { RefObject } from 'react';
 import { InteractedZone } from '../../models';
 
 export interface ZoomPreviewData extends InteractedZone {
   graphHeight: number;
   graphWidth: number;
   xScale: ScaleTime<number, number>;
+  graphSvgRef: RefObject<SVGSVGElement | null>;
+  graphMarginLeft: number;
 }

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/useZoomPreview.ts

@@ -1,18 +1,15 @@
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 
 import { Event } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, gte, isNil, lt } from 'ramda';
-
-import { margin } from '../../common';
 import { Interval } from '../../models';
 import {
   eventMouseDownAtom,
   eventMouseUpAtom,
   mousePositionAtom
 } from '../interactionWithGraphAtoms';
-
 import { applyingZoomAtomAtom } from './zoomPreviewAtoms';
 
 interface Boundaries {
@@ -28,12 +25,16 @@ interface Props {
   getInterval?: (args: Interval) => void;
   graphWidth: number;
   xScale: ScaleTime<number, number>;
+  graphSvgRef: RefObject<SVGSVGElement | null>;
+  graphMarginLeft: number;
 }
 
 const useZoomPreview = ({
   xScale,
   graphWidth,
-  getInterval
+  getInterval,
+  graphSvgRef,
+  graphMarginLeft
 }: Props): ZoomPreview => {
   const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
   const eventMouseDown = useAtomValue(eventMouseDownAtom);
@@ -41,16 +42,17 @@ const useZoomPreview = ({
   const mousePosition = useAtomValue(mousePositionAtom);
   const setApplyingZoom = useSetAtom(applyingZoomAtomAtom);
 
-  const mousePointDown = eventMouseDown
-    ? Event.localPoint(eventMouseDown)
-    : null;
+  const mousePointDown =
+    eventMouseDown && graphSvgRef.current
+      ? Event.localPoint(graphSvgRef.current, eventMouseDown)
+      : null;
 
   const mouseDownPositionX = mousePointDown
-    ? mousePointDown.x - margin.left
+    ? mousePointDown.x - graphMarginLeft
     : null;
 
   const movingMousePositionX = mousePosition
-    ? mousePosition[0] - margin.left
+    ? mousePosition[0] - graphMarginLeft
     : null;
 
   const applyZoom = (): void => {