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

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

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import { type MutableRefObject, ReactElement, useMemo } from 'react';
 
 import { Event } from '@visx/visx';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
@@ -9,9 +9,11 @@ import {
   find,
   isEmpty,
   isNil,
+  isNotNil,
   keys,
   map,
   negate,
+  omit,
   pick,
   pipe,
   pluck,
@@ -37,6 +39,10 @@ import type {
   InteractedZone as ZoomPreviewModel
 } from '../models';
 
+import {
+  computPixelsToShiftMouse,
+  computeGElementMarginLeft
+} from '../../common/utils';
 import Annotations from './Annotations';
 import type { TimelineEvent } from './Annotations/models';
 import Bar from './Bar';
@@ -80,6 +86,9 @@ interface Props {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
   };
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
+  additionalZoomMargin?: number;
 }
 
 const InteractionWithGraph = ({
@@ -87,8 +96,11 @@ const InteractionWithGraph = ({
   commonData,
   annotationData,
   timeShiftZonesData,
-  transformMatrix
-}: Props): JSX.Element => {
+  transformMatrix,
+  hasSecondUnit,
+  maxLeftAxisCharacters,
+  additionalZoomMargin = 0
+}: Props): ReactElement => {
   const { classes } = useStyles();
 
   const setEventMouseDown = useSetAtom(eventMouseDownAtom);
@@ -142,6 +154,15 @@ const InteractionWithGraph = ({
     setEventMouseDown(event);
   };
 
+  const graphMarginLeft = useMemo(
+    () =>
+      computeGElementMarginLeft({
+        maxCharacters: maxLeftAxisCharacters,
+        hasSecondUnit
+      }) + additionalZoomMargin,
+    [additionalZoomMargin, maxLeftAxisCharacters, hasSecondUnit]
+  );
+
   const updateMousePosition = (pointPosition: MousePosition): void => {
     if (isNil(pointPosition)) {
       changeMousePosition({
@@ -151,10 +172,12 @@ const InteractionWithGraph = ({
 
       return;
     }
+    const pixelToShift = computPixelsToShiftMouse(xScale);
     const timeValue = getTimeValue({
       timeSeries,
-      x: pointPosition[0],
-      xScale
+      x: pointPosition[0] - pixelToShift,
+      xScale,
+      marginLeft: graphMarginLeft
     });
 
     if (isNil(timeValue)) {
@@ -199,6 +222,39 @@ const InteractionWithGraph = ({
           yScalesPerUnit
         });
 
+        if (isNotNil(lineData?.stackOrder)) {
+          const test = Object.entries(omit(['timeTick'], timeValue)).reduce(
+            (acc, [key, value]) => {
+              const line = getLineForMetric({
+                lines,
+                metric_id: Number(key)
+              });
+
+              const isBelowStackOrder =
+                isNotNil(line?.stackOrder) &&
+                (line?.stackOrder as number) >= (lineData.stackOrder as number);
+
+              if (isBelowStackOrder) {
+                return acc + value;
+              }
+
+              return acc;
+            },
+            0
+          );
+
+          const y0 = yScale(test);
+
+          const diffBetweenY0AndPointPosition = Math.abs(
+            y0 - margin.top - (graphHeight - pointPosition[1])
+          );
+
+          return {
+            ...acc,
+            [metricId]: diffBetweenY0AndPointPosition
+          };
+        }
+
         const y0 = yScale(value);
 
         const diffBetweenY0AndPointPosition = Math.abs(
@@ -248,6 +304,8 @@ const InteractionWithGraph = ({
           graphHeight={graphHeight}
           graphWidth={graphWidth}
           xScale={xScale}
+          graphSvgRef={graphSvgRef}
+          graphMarginLeft={graphMarginLeft}
         />
       )}
       {displayEventAnnotations && (

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}

package/src/Graph/Chart/helpers/index.ts

@@ -38,9 +38,10 @@ export const getXAxisTickFormat = (graphInterval: GraphInterval): string => {
   return gte(numberDays, 2) ? dateFormat : timeFormat;
 };
 
-export const truncate = (content?: string): string => {
-  const maxLength = 180;
-
+export const truncate = ({
+  content,
+  maxLength = 180
+}: { content?: string; maxLength?: number }): string => {
   if (isNil(content)) {
     return '';
   }

package/src/Graph/Chart/index.tsx

@@ -1,4 +1,4 @@
-import { type MutableRefObject, memo, useEffect, useRef } from 'react';
+import { RefCallback, memo, useEffect } 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;
   transformMatrix?: {
     fx?: (pointX: number) => number;
@@ -71,16 +70,23 @@ const WrapperChart = ({
   getRef,
   transformMatrix,
   additionalLines,
+  min,
+  max,
+  boundariesUnit,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
 
   const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  const {
+    ref,
+    width: responsiveWidth,
+    height: responsiveHeight
+  } = useResizeObserver();
 
   useEffect(() => {
-    getRef?.(lineChartRef);
-  }, [lineChartRef?.current]);
+    getRef?.(ref);
+  }, [ref?.current]);
 
   if (loading && !adjustedData) {
     return (
@@ -91,48 +97,42 @@ 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}
-              additionalLines={additionalLines}
-              transformMatrix={transformMatrix}
-            />
-          );
-        }}
-      </ParentSize>
+      {!responsiveHeight ? (
+        <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 || 0}
+          legend={legend}
+          limitLegend={limitLegend}
+          lineStyle={lineStyle}
+          shapeLines={shapeLines}
+          thresholdUnit={thresholdUnit}
+          thresholds={thresholds}
+          timeShiftZones={timeShiftZones}
+          tooltip={tooltip}
+          width={width || responsiveWidth || 0}
+          zoomPreview={zoomPreview}
+          skipIntersectionObserver={rest.skipIntersectionObserver}
+          additionalLines={additionalLines}
+          transformMatrix={transformMatrix}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
+        />
+      )}
     </div>
   );
 };

package/src/Graph/Chart/models.ts

@@ -122,6 +122,9 @@ export interface LineChartProps {
   zoomPreview?: InteractedZone;
   skipIntersectionObserver?: boolean;
   additionalLines?: Array<AdditionalLineProps>;
+  min?: number;
+  max?: number;
+  boundariesUnit?: string;
 }
 
 export interface Area {
@@ -172,6 +175,11 @@ export interface LegendModel {
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
+  secondaryClick?: (props: {
+    element: EventTarget | null;
+    metricId: number | string;
+    position: [number, number];
+  }) => void;
 }
 
 export interface GetDate {

package/src/Graph/Chart/useChartData.ts

@@ -30,6 +30,8 @@ interface Props {
   start?: string;
 }
 
+const getBoolean = (value) => Boolean(Number(value));
+
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
 
@@ -38,7 +40,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return data;
     }
 
-    if (isEmpty(data.metrics) || isEmpty(data.times)) {
+    if (isEmpty(data.metrics)) {
       return undefined;
     }
 
@@ -48,7 +50,16 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
 
     const newMetrics = Object.entries(metricsGroupedByColor).map(
       ([color, value]) => {
-        return value?.map((metric, index) =>
+        const adjustedValue = value?.map((item) => ({
+          ...item,
+          ds_data: {
+            ...item?.ds_data,
+            ds_invert: getBoolean(item?.ds_data?.ds_invert),
+            ds_filled: getBoolean(item?.ds_data?.ds_filled)
+          }
+        }));
+
+        return adjustedValue?.map((metric, index) =>
           set(
             lensPath(['ds_data', 'ds_color_line']),
             emphasizeCurveColor({ color, index }),
@@ -76,6 +87,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
     const { title } = dataWithAdjustedMetricsColor.global;
 
     const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
+
     const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
 
     adjustedDataRef.current = {

package/src/Graph/Gauge/Gauge.tsx

@@ -1,23 +1,28 @@
-import { ParentSize } from '../..';
+import { Box } from '@mui/material';
 import { LineChartData, Thresholds } from '../common/models';
 import { getMetricWithLatestData } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
+import { useResizeObserver } from './useResizeObserver';
 
 export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;
   thresholds: Thresholds;
+  max?: number;
 }
 
 export const Gauge = ({
   thresholds,
   data,
   displayAsRaw,
-  baseColor
+  baseColor,
+  max
 }: Props): JSX.Element | null => {
+  const { width, height, ref } = useResizeObserver();
+
   if (!data) {
     return null;
   }
@@ -25,17 +30,16 @@ export const Gauge = ({
   const metric = getMetricWithLatestData(data) as Metric;
 
   return (
-    <ParentSize>
-      {({ width, height }) => (
-        <ResponsiveGauge
-          baseColor={baseColor}
-          displayAsRaw={displayAsRaw}
-          height={height}
-          metric={metric}
-          thresholds={thresholds}
-          width={width}
-        />
-      )}
-    </ParentSize>
+    <Box sx={{ width: '100%', height: '100%' }} ref={ref}>
+      <ResponsiveGauge
+        baseColor={baseColor}
+        displayAsRaw={displayAsRaw}
+        height={height}
+        metric={metric}
+        thresholds={thresholds}
+        width={width}
+        max={max}
+      />
+    </Box>
   );
 };

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -22,6 +22,7 @@ interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
   height: number;
   metric: Metric;
   width: number;
+  max?: number;
 }
 
 const ResponsiveGauge = ({
@@ -30,7 +31,8 @@ const ResponsiveGauge = ({
   thresholds,
   metric,
   displayAsRaw,
-  baseColor
+  baseColor,
+  max
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const svgRef = useRef<SVGSVGElement>(null);
@@ -53,11 +55,13 @@ const ResponsiveGauge = ({
         pluck('value', thresholds.critical)
       ])
     : [0];
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
+  const adaptedMaxValue =
+    max ||
+    Math.max(
+      metric.maximum_value || 0,
+      Math.max(...thresholdValues) * 1.1,
+      head(metric.data) as number
+    );
 
   const pieColor = getColorFromDataAndTresholds({
     baseColor,

package/src/Graph/Gauge/useResizeObserver.ts

@@ -0,0 +1,68 @@
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+interface UseResizeObserverState {
+  width: number;
+  height: number;
+  ref: RefObject<HTMLDivElement | null>;
+}
+
+export const useResizeObserver = (): UseResizeObserverState => {
+  const [elementResolved, setElementResolved] = useState(false);
+  const [size, setSize] = useState([0, 0]);
+  const targetRef = useRef<HTMLDivElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const resize = useCallback((entries: Array<ResizeObserverEntry>): void => {
+    setSize([entries[0].contentRect.width, entries[0].contentRect.height]);
+  }, []);
+
+  const observeElement = useCallback(() => {
+    if (!targetRef.current) {
+      return;
+    }
+
+    observerRef.current = new ResizeObserver(resize);
+    observerRef.current?.observe(targetRef.current);
+  }, [resize, targetRef.current]);
+
+  const unobserveElement = useCallback((): void => {
+    if (!targetRef.current) {
+      return;
+    }
+
+    observerRef.current?.unobserve(targetRef.current);
+    observerRef.current = null;
+    setElementResolved(false);
+  }, []);
+
+  useEffect(() => {
+    if (elementResolved) {
+      return;
+    }
+    setElementResolved(!!targetRef.current?.tagName);
+  });
+
+  useEffect(() => {
+    if (!elementResolved) {
+      return;
+    }
+
+    observeElement();
+
+    return () => {
+      unobserveElement();
+    };
+  }, [elementResolved]);
+
+  return {
+    width: size[0],
+    height: size[1],
+    ref: targetRef
+  };
+};

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -4,7 +4,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { Group, Tooltip } from '@visx/visx';
-import { equals, flatten, head, lt, pluck } from 'ramda';
+import { clamp, equals, flatten, head, pluck } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -35,13 +35,12 @@ const ResponsiveSingleBar = ({
   displayAsRaw,
   baseColor,
   size = 'medium',
-  showLabels = true
+  showLabels = true,
+  max
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const theme = useTheme();
 
-  const isSmallHeight = lt(height, 150);
-
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
   const thresholdValues = thresholds.enabled
@@ -51,11 +50,13 @@ const ResponsiveSingleBar = ({
       ])
     : [0];
 
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
+  const adaptedMaxValue =
+    max ||
+    Math.max(
+      metric.maximum_value || 0,
+      Math.max(...thresholdValues) * 1.1,
+      head(metric.data) as number
+    );
 
   const { showTooltip, hideTooltip, tooltipOpen, tooltipData } =
     Tooltip.useTooltip();
@@ -72,7 +73,7 @@ const ResponsiveSingleBar = ({
     [latestMetricData, thresholds, theme]
   );
 
-  const isSmall = equals(size, 'small') || isSmallHeight;
+  const isSmall = equals(size, 'small');
 
   const textStyle = isSmall ? theme.typography.h6 : theme.typography.h4;
 
@@ -118,14 +119,15 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barHeight = isSmallHeight ? barHeights.small : barHeights[size];
-
   const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
 
-  const realBarHeight =
-    !isSmall && textHeight + barHeight > height
-      ? height - textHeight - 2 * margins.top
-      : barHeight;
+  const realBarHeight = !isSmall
+    ? clamp(
+        barHeights.small,
+        barHeights.medium,
+        height - textHeight - 2 * margins.top
+      )
+    : barHeights.small;
 
   return (
     <div

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -66,12 +66,12 @@ export const ThresholdLine = ({
         x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 6
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 2
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
       />
@@ -83,12 +83,12 @@ export const ThresholdLine = ({
         x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 5
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top + 5
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
         onMouseEnter={onMouseEnter}

package/src/Graph/SingleBar/models.ts

@@ -7,4 +7,5 @@ export interface SingleBarProps {
   showLabels?: boolean;
   size?: 'medium' | 'small';
   thresholds: Thresholds;
+  max?: number;
 }