@centreon/ui 24.10.12 → 24.10.13

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

@@ -129,13 +129,13 @@ const initializeCustomUnits = ({
 };
 
 const checkGraphWidth = (): void => {
-  cy.findByTestId('graph-interaction-zone')
-    .should('have.attr', 'width')
-    .and('equal', '1170');
-
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
     .and('equal', '393');
+
+  cy.findByTestId('graph-interaction-zone').then((graph) => {
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+  });
 };
 
 describe('Line chart', () => {
@@ -158,8 +158,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.45 s').should('be.visible');
-      cy.contains('75.93%').should('be.visible');
-      cy.contains('0.43 s').should('be.visible');
+      cy.contains('73.65%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -176,12 +175,12 @@ describe('Line chart', () => {
       cy.get('[data-metric="querytime"]').should(
         'have.attr',
         'data-highlight',
-        'false'
+        'true'
       );
       cy.get('[data-metric="connTime"]').should(
         'have.attr',
         'data-highlight',
-        'true'
+        'false'
       );
 
       cy.makeSnapshot();
@@ -194,7 +193,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1185, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1198, 100);
 
       cy.get('[data-metric="querytime"]').should('not.exist');
 
@@ -208,10 +207,10 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1152, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1170, 100);
 
       cy.get('[data-metric="querytime"]').should('be.visible');
-      cy.get('[data-metric="hitratio"]').should('not.exist');
+      cy.get('[data-metric="hitratio"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -225,7 +224,7 @@ describe('Line chart', () => {
 
       cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
 
-      cy.get('[data-metric="connTime"]').should(
+      cy.get('[data-metric="querytime"]').should(
         'have.attr',
         'data-highlight',
         'true'
@@ -286,7 +285,7 @@ describe('Line chart', () => {
 
     cy.findByTestId('graph-interaction-zone')
       .should('have.attr', 'width')
-      .and('equal', '1212');
+      .and('equal', '1200');
 
     cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
       .find('[data-icon="true"]')
@@ -362,8 +361,6 @@ describe('Line chart', () => {
       cy.get('[data-as-list="true"]').should('exist');
 
       cy.contains(':00 AM').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it('displays the legend on the right side of the graph as list when the corresponding props are set', () => {
@@ -373,8 +370,6 @@ describe('Line chart', () => {
       cy.get('[data-as-list="true"]').should('exist');
 
       cy.contains(':00 AM').should('be.visible');
-
-      cy.makeSnapshot();
     });
   });
 
@@ -448,7 +443,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 312.508173777963)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 227.55748987831032)"]').should(
         'be.visible'
       );
 
@@ -479,8 +474,6 @@ describe('Line chart', () => {
       cy.get('[data-metric="13536"]').should('be.visible');
       cy.get('[data-metric="13534"]').should('be.visible');
       cy.get('[data-metric="13535"]').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it('displays the curve in a step style when the prop is set', () => {
@@ -493,8 +486,6 @@ describe('Line chart', () => {
       cy.get('[data-metric="13534"]').should('be.visible');
       cy.get('[data-metric="13535"]').should('be.visible');
       checkLegendInformation();
-
-      cy.makeSnapshot();
     });
 
     it('shows the area when the prop is set', () => {
@@ -530,8 +521,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="4.0625"]').should('be.visible');
-      cy.get('circle[cy="105.21757370835121"]').should('be.visible');
+      cy.get('circle[cx="37.625"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -583,7 +573,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -634,7 +623,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });

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

@@ -669,7 +669,7 @@ export const linesAndBarsMixedCenteredZero: Story = {
   )
 };
 const CustomYUnits = (props): JSX.Element => {
-  const [leftUnit, setLeftUnit] = useState('b');
+  const [leftUnit, setLeftUnit] = useState('B');
   const [rightUnit, setRightUnit] = useState('ms');
 
   return (

package/src/Graph/Chart/Chart.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 
 import { useAtom } from 'jotai';
-import { equals, flatten, isNil, pluck, reject } from 'ramda';
+import { equals, flatten, isEmpty, isNil, pluck, reject } from 'ramda';
 
 import { ClickAwayListener, Skeleton } from '@mui/material';
 
@@ -16,6 +16,7 @@ import BarGroup from '../BarChart/BarGroup';
 import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import { useComputeYAxisMaxCharacters } from '../common/BaseChart/useComputeYAxisMaxCharacters';
 import Thresholds from '../common/Thresholds/Thresholds';
 import type { Thresholds as ThresholdsModel } from '../common/models';
 import {
@@ -25,7 +26,6 @@ import {
   getYScalePerUnit
 } from '../common/timeSeries';
 import type { Line } from '../common/timeSeries/models';
-
 import Lines from './BasicComponents/Lines';
 import {
   canDisplayThreshold,
@@ -97,8 +97,7 @@ const Chart = ({
   },
   thresholds,
   thresholdUnit,
-  limitLegend,
-  skipIntersectionObserver
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -128,13 +127,24 @@ const Chart = ({
     [displayedLines]
   );
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      graphData,
+      thresholds,
+      thresholdUnit,
+      axis,
+      firstUnit,
+      secondUnit
+    });
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
     legendHeight: legend?.height,
     legendPlacement: legend?.placement,
-    width
+    width,
+    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
   });
 
   const xScale = useMemo(
@@ -220,7 +230,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport && !skipIntersectionObserver) {
+  if (!isInViewport) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}
@@ -271,39 +281,45 @@ const Chart = ({
                 svgRef={graphSvgRef}
                 timeSeries={timeSeries}
                 xScale={xScale}
+                maxAxisCharacters={maxLeftAxisCharacters}
+                hasSecondUnit={Boolean(secondUnit)}
               >
                 <>
-                  <BarGroup
-                    barStyle={barStyle}
-                    isTooltipHidden={false}
-                    lines={linesDisplayedAsBar}
-                    orientation="horizontal"
-                    size={graphHeight - margin.top - 5}
-                    timeSeries={timeSeries}
-                    xScale={xScaleBand}
-                    yScalesPerUnit={yScalesPerUnit}
-                  />
-                  <Lines
-                    areaTransparency={lineStyle?.areaTransparency}
-                    curve={lineStyle?.curve || 'linear'}
-                    dashLength={lineStyle?.dashLength}
-                    dashOffset={lineStyle?.dashOffset}
-                    displayAnchor={displayAnchor}
-                    displayedLines={linesDisplayedAsLine}
-                    dotOffset={lineStyle?.dotOffset}
-                    graphSvgRef={graphSvgRef}
-                    height={graphHeight - margin.top}
-                    lineWidth={lineStyle?.lineWidth}
-                    scale={axis?.scale}
-                    scaleLogarithmicBase={axis?.scaleLogarithmicBase}
-                    showArea={lineStyle?.showArea}
-                    showPoints={lineStyle?.showPoints}
-                    timeSeries={timeSeries}
-                    width={graphWidth}
-                    xScale={xScale}
-                    yScalesPerUnit={yScalesPerUnit}
-                    {...shapeLines}
-                  />
+                  {!isEmpty(linesDisplayedAsBar) && (
+                    <BarGroup
+                      barStyle={barStyle}
+                      isTooltipHidden={false}
+                      lines={linesDisplayedAsBar}
+                      orientation="horizontal"
+                      size={graphHeight - margin.top - 5}
+                      timeSeries={timeSeries}
+                      xScale={xScaleBand}
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                  {!isEmpty(linesDisplayedAsLine) && (
+                    <Lines
+                      areaTransparency={lineStyle?.areaTransparency}
+                      curve={lineStyle?.curve || 'linear'}
+                      dashLength={lineStyle?.dashLength}
+                      dashOffset={lineStyle?.dashOffset}
+                      displayAnchor={displayAnchor}
+                      displayedLines={linesDisplayedAsLine}
+                      dotOffset={lineStyle?.dotOffset}
+                      graphSvgRef={graphSvgRef}
+                      height={graphHeight - margin.top}
+                      lineWidth={lineStyle?.lineWidth}
+                      scale={axis?.scale}
+                      scaleLogarithmicBase={axis?.scaleLogarithmicBase}
+                      showArea={lineStyle?.showArea}
+                      showPoints={lineStyle?.showPoints}
+                      timeSeries={timeSeries}
+                      width={graphWidth}
+                      xScale={xScale}
+                      yScalesPerUnit={yScalesPerUnit}
+                      {...shapeLines}
+                    />
+                  )}
                   <InteractionWithGraph
                     annotationData={{ ...annotationEvent }}
                     commonData={{

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

@@ -11,7 +11,7 @@ const GuidingLines = ({
   graphHeight,
   graphWidth
 }: GuidingLinesModel): JSX.Element | null => {
-  const { positionX, positionY } = useTickGraph({
+  const { positionX, positionY, guidingLinesRef } = useTickGraph({
     timeSeries,
     xScale
   });
@@ -20,7 +20,7 @@ const GuidingLines = ({
   }
 
   return (
-    <>
+    <g ref={guidingLinesRef}>
       <Shape.Line
         fill="dotted"
         from={{ x: positionX, y: 0 }}
@@ -38,7 +38,7 @@ const GuidingLines = ({
         strokeWidth={1}
         to={{ x: graphWidth, y: positionY }}
       />
-    </>
+    </g>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
@@ -15,6 +15,7 @@ interface AnchorPointResult {
   tickAxisBottom: Date | null;
   tickAxisLeft: string | null;
   tickAxisRight: string | null;
+  guidingLinesRef: MutableRefObject<SVGGElement | null>;
 }
 
 interface Props {
@@ -34,6 +35,7 @@ const useTickGraph = ({
   lines = [],
   baseAxis = 1000
 }: Props): AnchorPointResult => {
+  const guidingLinesRef = useRef<SVGGElement | null>(null);
   const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
   const [tickAxisLeft, setTickAxisLeft] = useState<string | null>(null);
   const [tickAxisRight, setTickAxisRight] = useState<string | null>(null);
@@ -42,12 +44,22 @@ const useTickGraph = ({
 
   const mousePosition = useAtomValue(mousePositionAtom);
 
+  const paddingLeftString = useMemo(
+    () =>
+      (
+        guidingLinesRef.current?.parentElement?.parentElement?.attributes
+          ?.transform.value || ''
+      ).match(/translate\(([0-9\.]+), ([0-9\.]+)\)/)?.[1] || '0',
+    [
+      guidingLinesRef.current?.parentElement?.parentElement?.attributes
+        ?.transform.value
+    ]
+  );
+
   const positionX = mousePosition
-    ? mousePosition[0] - margin.left - 4
-    : undefined;
-  const positionY = mousePosition
-    ? mousePosition[1] - margin.top + 2
+    ? mousePosition[0] - Number(paddingLeftString) - 1
     : undefined;
+  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
 
   useEffect(() => {
     if (!mousePosition) {
@@ -86,7 +98,8 @@ const useTickGraph = ({
     positionY,
     tickAxisBottom,
     tickAxisLeft,
-    tickAxisRight
+    tickAxisRight,
+    guidingLinesRef
   };
 };
 export default useTickGraph;

package/src/Graph/Chart/Legend/Legend.styles.ts

@@ -1,17 +1,33 @@
 import { makeStyles } from 'tss-react/mui';
 
+import { equals, lt } from 'ramda';
 import { margin } from '../common';
+import type { LegendModel } from '../models';
 
 interface MakeStylesProps {
   limitLegendRows?: boolean;
+  placement: Pick<LegendModel, 'placement'>;
+  height?: number | null;
 }
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
+const getLegendMaxHeight = ({ placement, height }) => {
+  if (!equals(placement, 'bottom')) {
+    return height || 0;
+  }
+
+  if (lt(height || 0, 220)) {
+    return 40;
+  }
+
+  return 90;
+};
+
 export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows }) => ({
+  (theme, { limitLegendRows, placement, height = 0 }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
@@ -35,25 +51,23 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       display: 'grid',
       gridAutoRows: theme.spacing(legendItemHeight),
       gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(legendWidth)}, 1fr))`,
-      maxHeight: limitLegendRows
-        ? theme.spacing(legendItemHeight * 2 + 1)
-        : 'unset',
-      overflowX: 'hidden',
-      overflowY: 'auto',
       rowGap: theme.spacing(1),
       width: '100%'
     },
     legend: {
       '&[data-display-side="false"]': {
         marginLeft: margin.left,
-        marginRight: margin.right,
-        overflow: 'hidden'
+        marginRight: margin.right
       },
       '&[data-display-side="true"]': {
         height: '100%',
-        marginTop: `${margin.top / 2}px`,
-        overflowY: 'auto'
-      }
+        marginTop: `${margin.top / 2}px`
+      },
+      maxHeight: limitLegendRows
+        ? theme.spacing(legendItemHeight * 2 + 1)
+        : getLegendMaxHeight({ placement, height }),
+      overflowY: 'auto',
+      overflowX: 'hidden'
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),

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

@@ -1,6 +1,6 @@
 import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
 
-import { equals, lt, prop, slice, sortBy } from 'ramda';
+import { equals, prop, slice, sortBy } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -8,7 +8,6 @@ import { useMemoComponent } from '@centreon/ui';
 
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
-import { margin } from '../common';
 import { LegendModel } from '../models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
 
@@ -41,7 +40,11 @@ const MainLegend = ({
   height,
   mode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
+  const { classes, cx } = useStyles({
+    limitLegendRows: Boolean(limitLegend),
+    placement,
+    height
+  });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -81,31 +84,10 @@ const MainLegend = ({
       ? LegendDisplayMode.Compact
       : LegendDisplayMode.Normal;
 
-  const legendMaxHeight = useMemo(() => {
-    if (!isListMode || !equals(placement, 'bottom')) {
-      return 'none';
-    }
-
-    if (lt(height || 0, 220)) {
-      return 40;
-    }
-
-    return 90;
-  }, [height, isListMode, placement]);
-
-  const overflow = equals(legendMaxHeight, 'none') ? 'hidden' : 'auto';
-
   return (
     <div
       className={classes.legend}
       data-display-side={!equals(placement, 'bottom')}
-      style={{
-        height: !equals(placement, 'bottom')
-          ? (height || 0) - margin.top / 2
-          : undefined,
-        maxHeight: legendMaxHeight,
-        overflow
-      }}
     >
       <div
         className={classes.items}

package/src/Graph/Chart/index.tsx

@@ -1,4 +1,4 @@
-import { type MutableRefObject, memo, useEffect, useRef } from 'react';
+import { RefCallback, memo, useEffect, useRef } from 'react';
 
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
@@ -8,11 +8,10 @@ import 'dayjs/locale/pt';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
-
-import { ParentSize } from '../..';
 import Loading from '../../LoadingSkeleton';
 import type { LineChartData, Thresholds } from '../common/models';
 
+import useResizeObserver from 'use-resize-observer';
 import Chart from './Chart';
 import { useChartStyles } from './Chart.styles';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -32,7 +31,7 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  getRef?: (ref: MutableRefObject<HTMLDivElement | null>) => void;
+  getRef?: (ref: RefCallback<Element>) => void;
   containerStyle?: string;
 }
 
@@ -68,13 +67,15 @@ const WrapperChart = ({
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
+  const ref = useRef<HTMLDivElement | null>(null);
 
   const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  const { width: responsiveWidth, height: responsiveHeight } =
+    useResizeObserver({ ref });
 
   useEffect(() => {
-    getRef?.(lineChartRef);
-  }, [lineChartRef?.current]);
+    getRef?.(ref);
+  }, [ref?.current]);
 
   if (loading && !adjustedData) {
     return (
@@ -85,46 +86,36 @@ const WrapperChart = ({
     );
   }
 
-  if (!adjustedData) {
-    return <Loading height={height} width={width} />;
-  }
-
   return (
     <div
-      ref={lineChartRef as MutableRefObject<HTMLDivElement>}
+      ref={ref}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
-      <ParentSize>
-        {({
-          height: responsiveHeight,
-          width: responsiveWidth
-        }): JSX.Element => {
-          return (
-            <Chart
-              annotationEvent={annotationEvent}
-              axis={axis}
-              barStyle={barStyle}
-              displayAnchor={displayAnchor}
-              graphData={adjustedData}
-              graphInterval={{ end, start }}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              lineStyle={lineStyle}
-              shapeLines={shapeLines}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              timeShiftZones={timeShiftZones}
-              tooltip={tooltip}
-              width={width ?? responsiveWidth}
-              zoomPreview={zoomPreview}
-              skipIntersectionObserver={rest.skipIntersectionObserver}
-            />
-          );
-        }}
-      </ParentSize>
+      {!responsiveHeight || !data ? (
+        <Loading height={height || '100%'} width={width} />
+      ) : (
+        <Chart
+          annotationEvent={annotationEvent}
+          axis={axis}
+          barStyle={barStyle}
+          displayAnchor={displayAnchor}
+          graphData={adjustedData}
+          graphInterval={{ end, start }}
+          graphRef={ref}
+          header={header}
+          height={height || responsiveHeight}
+          legend={legend}
+          limitLegend={limitLegend}
+          lineStyle={lineStyle}
+          shapeLines={shapeLines}
+          thresholdUnit={thresholdUnit}
+          thresholds={thresholds}
+          timeShiftZones={timeShiftZones}
+          tooltip={tooltip}
+          width={width || responsiveWidth || 0}
+          zoomPreview={zoomPreview}
+        />
+      )}
     </div>
   );
 };

package/src/Graph/Chart/models.ts

@@ -120,7 +120,6 @@ export interface LineChartProps {
   tooltip?: Tooltip;
   width: number;
   zoomPreview?: InteractedZone;
-  skipIntersectionObserver?: boolean;
 }
 
 export interface Area {