@centreon/ui 25.10.28 → 25.10.30

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

@@ -101,40 +101,34 @@ const Lines = ({
       {(areaStackedLines?.display ?? true) && (
         <>
           {Object.entries(stackedLinesData).map(
-            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
-              const [, unit] = stackedKey.split('-');
-              return (
-                <StackedLines
-                  lineStyle={lineStyle}
-                  key={`stacked-${unit}`}
-                  lines={lines}
-                  timeSeries={stackedTimeSeries}
-                  yScale={yScalesPerUnit[unit || undefined]}
-                  {...commonStackedLinesProps}
-                />
-              );
-            }
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                lineStyle={lineStyle}
+                key={`stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={yScalesPerUnit[unit] ?? undefined}
+                {...commonStackedLinesProps}
+              />
+            )
           )}
           {Object.entries(invertedStackedLinesData).map(
-            ([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}
-                />
-              );
-            }
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                lineStyle={lineStyle}
+                key={`invert-stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={getYScale({
+                  invert: '1',
+                  scale,
+                  scaleLogarithmicBase,
+                  unit: unit ?? undefined,
+                  yScalesPerUnit
+                })}
+                {...commonStackedLinesProps}
+              />
+            )
           )}
         </>
       )}
@@ -152,107 +146,107 @@ const Lines = ({
 
       {displayAreaRegularLines
         ? regularLines.map(
-            ({
-              areaColor,
-              transparency,
-              lineColor,
-              filled,
+          ({
+            areaColor,
+            transparency,
+            lineColor,
+            filled,
+            unit,
+            highlight,
+            invert,
+            metric_id,
+            ...rest
+          }) => {
+            const yScale = getYScale({
+              invert,
+              scale,
+              scaleLogarithmicBase,
               unit,
-              highlight,
+              yScalesPerUnit
+            });
+            const relatedTimeSeries = getTimeSeriesForLines({
               invert,
-              metric_id,
-              ...rest
-            }) => {
-              const yScale = getYScale({
-                invert,
-                scale,
-                scaleLogarithmicBase,
-                unit,
-                yScalesPerUnit
-              });
-              const relatedTimeSeries = getTimeSeriesForLines({
-                invert,
-                lines: [
-                  {
-                    areaColor,
-                    filled,
-                    highlight,
-                    invert,
-                    lineColor,
-                    metric_id,
-                    transparency,
-                    unit,
-                    ...rest
-                  }
-                ],
-                timeSeries
-              });
-
-              const style = getStyle({
-                style: lineStyle,
-                metricId: metric_id
-              }) as LineStyle;
-
-              return (
-                <g key={metric_id}>
-                  {displayGuidingLines && (
-                    <RegularAnchorPoint
-                      areaColor={areaColor || lineColor}
-                      lineColor={lineColor}
-                      metric_id={metric_id}
-                      timeSeries={relatedTimeSeries}
-                      transparency={transparency}
-                      xScale={xScale}
-                      yScale={yScale}
-                      maxLeftAxisCharacters={maxLeftAxisCharacters}
-                      hasSecondUnit={hasSecondUnit}
-                    />
-                  )}
-                  {style?.showPoints &&
-                    getDates(relatedTimeSeries).map((timeTick) => (
-                      <Point
-                        key={timeTick.toString()}
-                        lineColor={lineColor}
-                        metric_id={metric_id}
-                        radius={getPointRadius(style?.lineWidth)}
-                        timeSeries={relatedTimeSeries}
-                        timeTick={timeTick}
-                        xScale={xScale}
-                        yPoint={getYAnchorPoint({
-                          metric_id,
-                          timeSeries: relatedTimeSeries,
-                          timeTick,
-                          yScale
-                        })}
-                        yScale={yScale}
-                      />
-                    ))}
-                  <RegularLine
+              lines: [
+                {
+                  areaColor,
+                  filled,
+                  highlight,
+                  invert,
+                  lineColor,
+                  metric_id,
+                  transparency,
+                  unit,
+                  ...rest
+                }
+              ],
+              timeSeries
+            });
+
+            const style = getStyle({
+              style: lineStyle,
+              metricId: metric_id
+            }) as LineStyle;
+
+            return (
+              <g key={metric_id}>
+                {displayGuidingLines && (
+                  <RegularAnchorPoint
                     areaColor={areaColor || lineColor}
-                    curve={style?.curve || 'linear'}
-                    dashLength={style?.dashLength}
-                    dashOffset={style?.dashOffset}
-                    dotOffset={style?.dotOffset}
-                    filled={isNil(style?.showArea) ? filled : style.showArea}
-                    graphHeight={height}
-                    highlight={highlight}
                     lineColor={lineColor}
-                    lineWidth={style?.lineWidth || 2}
                     metric_id={metric_id}
                     timeSeries={relatedTimeSeries}
-                    transparency={
-                      isNil(style?.areaTransparency)
-                        ? transparency || 80
-                        : style.areaTransparency
-                    }
-                    unit={unit}
+                    transparency={transparency}
                     xScale={xScale}
                     yScale={yScale}
+                    maxLeftAxisCharacters={maxLeftAxisCharacters}
+                    hasSecondUnit={hasSecondUnit}
                   />
-                </g>
-              );
-            }
-          )
+                )}
+                {style?.showPoints &&
+                  getDates(relatedTimeSeries).map((timeTick) => (
+                    <Point
+                      key={timeTick.toString()}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      radius={getPointRadius(style?.lineWidth)}
+                      timeSeries={relatedTimeSeries}
+                      timeTick={timeTick}
+                      xScale={xScale}
+                      yPoint={getYAnchorPoint({
+                        metric_id,
+                        timeSeries: relatedTimeSeries,
+                        timeTick,
+                        yScale
+                      })}
+                      yScale={yScale}
+                    />
+                  ))}
+                <RegularLine
+                  areaColor={areaColor || lineColor}
+                  curve={style?.curve || 'linear'}
+                  dashLength={style?.dashLength}
+                  dashOffset={style?.dashOffset}
+                  dotOffset={style?.dotOffset}
+                  filled={isNil(style?.showArea) ? filled : style.showArea}
+                  graphHeight={height}
+                  highlight={highlight}
+                  lineColor={lineColor}
+                  lineWidth={style?.lineWidth || 2}
+                  metric_id={metric_id}
+                  timeSeries={relatedTimeSeries}
+                  transparency={
+                    isNil(style?.areaTransparency)
+                      ? transparency || 80
+                      : style.areaTransparency
+                  }
+                  unit={unit}
+                  xScale={xScale}
+                  yScale={yScale}
+                />
+              </g>
+            );
+          }
+        )
         : null}
     </g>
   );

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="248.33333333333334"]').should('be.visible');
+      cy.get('circle[cx="250.83333333333334"]').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.11111111111111"]').should('be.visible');
+      cy.get('circle[cx="33.44444444444444"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -713,7 +713,7 @@ describe('Lines and bars', () => {
     cy.findByLabelText('B').click();
 
     cy.findAllByTestId('unit-selector').eq(0).should('have.value', 'B');
-    cy.contains('8.79 KB').should('be.visible');
+    cy.contains('8.79 KiB').should('be.visible');
 
     cy.findAllByTestId('unit-selector').eq(1).parent().click();
     cy.findByLabelText('%').click();
@@ -746,11 +746,9 @@ 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();
@@ -816,21 +814,4 @@ 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, Menu } from '@mui/material';
+import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
@@ -26,7 +26,6 @@ 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';
@@ -759,44 +758,3 @@ 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

@@ -1,5 +1,6 @@
 import {
   type MutableRefObject,
+  ReactElement,
   useEffect,
   useMemo,
   useRef,
@@ -116,7 +117,7 @@ const Chart = ({
   min,
   max,
   boundariesUnit
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const { classes } = useChartStyles();
 
   const { title, timeSeries, baseAxis, lines } = graphData;
@@ -137,7 +138,7 @@ const Chart = ({
   ]);
 
   const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
+    () => (linesGraph || []).filter(({ display }) => display),
     [linesGraph]
   );
   const [firstUnit, secondUnit] = useMemo(
@@ -197,7 +198,8 @@ const Chart = ({
         valueGraphHeight: graphHeight - margin.bottom,
         min,
         max,
-        boundariesUnit
+        boundariesUnit,
+        isFilled: lineStyle?.showArea
       }),
     [
       linesGraph,
@@ -211,8 +213,13 @@ const Chart = ({
     ]
   );
 
-  const leftScale = yScalesPerUnit[axis?.axisYLeft?.unit ?? firstUnit];
-  const rightScale = yScalesPerUnit[axis?.axisYRight?.unit ?? secondUnit];
+  const allUnits = getUnits(linesGraph || []);
+
+  const fallbackLeftUnit = axis?.axisYLeft?.unit ?? firstUnit ?? allUnits?.[0];
+  const fallbackRightUnit = axis?.axisYRight?.unit ?? secondUnit ?? allUnits?.[1];
+
+  const leftScale = yScalesPerUnit[fallbackLeftUnit];
+  const rightScale = yScalesPerUnit[fallbackRightUnit];
 
   const linesDisplayedAsLine = useMemo(
     () =>
@@ -227,8 +234,6 @@ const Chart = ({
     [displayedLines]
   );
 
-  const allUnits = getUnits(linesGraph);
-
   useEffect(
     () => {
       setLinesGraph(
@@ -277,8 +282,7 @@ const Chart = ({
             legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
-            renderExtraComponent: legend?.renderExtraComponent,
-            secondaryClick: legend?.secondaryClick
+            renderExtraComponent: legend?.renderExtraComponent
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}

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

@@ -27,13 +27,15 @@ export const useGraphValueTooltip = ({
   isSingleMode,
   sortOrder
 }: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
-  const { format } = useLocaleDateTimeFormat();
+  const { toDate, toTime } = 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),
@@ -52,7 +54,7 @@ export const useGraphValueTooltip = ({
   ])(sortOrder);
 
   return {
-    dateTime: format({ date: graphTooltipData.date, formatString: 'L LTS' }),
+    dateTime: formattedDateTime,
     highlightedMetricId: graphTooltipData.highlightedMetricId,
     metrics: sortedMetrics
   };

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

@@ -26,11 +26,6 @@ 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 = ({
@@ -43,8 +38,7 @@ const MainLegend = ({
   shouldDisplayLegendInCompactMode,
   placement,
   height,
-  mode,
-  secondaryClick
+  mode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     limitLegendRows: Boolean(limitLegend),
@@ -71,24 +65,7 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  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 => {
+  const selectMetric = ({ event, metric_id }): void => {
     if (!toggable) {
       return;
     }
@@ -150,7 +127,6 @@ 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/index.tsx

@@ -1,22 +1,23 @@
-import { RefCallback, memo, useEffect } from 'react';
+import dayjs from "dayjs";
+import { memo, type RefCallback, useEffect, useRef } from "react";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import "dayjs/locale/fr";
+import "dayjs/locale/pt";
 
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import Loading from '../../LoadingSkeleton';
-import type { LineChartData, Thresholds } from '../common/models';
+import { NoData } from "@centreon/ui";
 
-import useResizeObserver from 'use-resize-observer';
-import Chart from './Chart';
-import { useChartStyles } from './Chart.styles';
-import LoadingSkeleton from './LoadingSkeleton';
-import type { GlobalAreaLines, LineChartProps } from './models';
-import useChartData from './useChartData';
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezonePlugin from "dayjs/plugin/timezone";
+import utcPlugin from "dayjs/plugin/utc";
+import useResizeObserver from "use-resize-observer";
+import Loading from "../../LoadingSkeleton";
+import type { LineChartData, Thresholds } from "../common/models";
+import Chart from "./Chart";
+import { useChartStyles } from "./Chart.styles";
+import LoadingSkeleton from "./LoadingSkeleton";
+import type { GlobalAreaLines, LineChartProps } from "./models";
+import useChartData from "./useChartData";
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -31,7 +32,7 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  getRef?: (ref: RefCallback<Element>) => void;
+  getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
   transformMatrix?: {
     fx?: (pointX: number) => number;
@@ -52,14 +53,14 @@ const WrapperChart = ({
   loading,
   timeShiftZones,
   tooltip = {
-    mode: 'all',
-    sortOrder: 'name'
+    mode: "all",
+    sortOrder: "name",
   },
   annotationEvent,
   legend = {
     display: true,
-    mode: 'grid',
-    placement: 'bottom'
+    mode: "grid",
+    placement: "bottom",
   },
   header,
   lineStyle,
@@ -76,17 +77,26 @@ const WrapperChart = ({
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
-
   const { adjustedData } = useChartData({ data, end, start });
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   const {
-    ref,
+    ref: resizeObserverRef,
     width: responsiveWidth,
-    height: responsiveHeight
+    height: responsiveHeight,
   } = useResizeObserver();
 
-  useEffect(() => {
-    getRef?.(ref);
-  }, [ref?.current]);
+  const combinedRef = (element: HTMLDivElement | null) => {
+    if (containerRef.current !== element) {
+      containerRef.current = element;
+      if (element) {
+        getRef?.(containerRef);
+      }
+    }
+    resizeObserverRef(element);
+  };
+
 
   if (loading && !adjustedData) {
     return (
@@ -97,13 +107,17 @@ const WrapperChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <NoData />;
+  }
+
   return (
     <div
-      ref={ref}
+      ref={combinedRef}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       {!responsiveHeight ? (
-        <Loading height={height || '100%'} width={width} />
+        <Loading height={height || "100%"} width={width} />
       ) : (
         <Chart
           annotationEvent={annotationEvent}
@@ -112,7 +126,7 @@ const WrapperChart = ({
           displayAnchor={displayAnchor}
           graphData={adjustedData}
           graphInterval={{ end, start }}
-          graphRef={ref}
+          graphRef={containerRef}
           header={header}
           height={height || responsiveHeight || 0}
           legend={legend}