@centreon/ui 25.10.9 → 25.10.11

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

@@ -107,7 +107,7 @@ const Lines = ({
                 key={`stacked-${unit}`}
                 lines={lines}
                 timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
+                yScale={yScalesPerUnit[unit] ?? undefined}
                 {...commonStackedLinesProps}
               />
             )
@@ -123,7 +123,7 @@ const Lines = ({
                   invert: '1',
                   scale,
                   scaleLogarithmicBase,
-                  unit,
+                  unit: unit ?? undefined,
                   yScalesPerUnit
                 })}
                 {...commonStackedLinesProps}
@@ -146,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';
@@ -758,36 +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}
-    />
-  )
-};

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;
@@ -197,7 +198,8 @@ const Chart = ({
         valueGraphHeight: graphHeight - margin.bottom,
         min,
         max,
-        boundariesUnit
+        boundariesUnit,
+        isFilled: lineStyle?.showArea
       }),
     [
       linesGraph,
@@ -277,8 +279,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}
@@ -395,4 +396,4 @@ const Chart = ({
   );
 };
 
-export default Chart;
+export default Chart;

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 } 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);
@@ -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,12 +77,11 @@ const WrapperChart = ({
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
-
   const { adjustedData } = useChartData({ data, end, start });
   const {
     ref,
     width: responsiveWidth,
-    height: responsiveHeight
+    height: responsiveHeight,
   } = useResizeObserver();
 
   useEffect(() => {
@@ -97,13 +97,17 @@ const WrapperChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <NoData />;
+  }
+
   return (
     <div
       ref={ref}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       {!responsiveHeight ? (
-        <Loading height={height || '100%'} width={width} />
+        <Loading height={height || "100%"} width={width} />
       ) : (
         <Chart
           annotationEvent={annotationEvent}

package/src/Graph/Chart/models.ts

@@ -175,11 +175,6 @@ 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 {
@@ -198,4 +193,4 @@ export interface GraphTooltipData {
     unit: string;
     value: number;
   }>;
-}
+}

package/src/Graph/Chart/translatedLabels.ts

@@ -7,3 +7,4 @@ export const labelDowntime = 'Downtime';
 export const labelMin = 'Min';
 export const labelMax = 'Max';
 export const labelAvg = 'Avg';
+export const labelNoDataForThisPeriod = 'No data available for this period';

package/src/Graph/Chart/useChartData.ts

@@ -40,7 +40,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return data;
     }
 
-    if (isEmpty(data.metrics)) {
+    if (isEmpty(data.metrics) || isEmpty(data.times)) {
       return undefined;
     }
 

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -19,10 +19,7 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<
-    LegendModel,
-    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
-  > & {
+  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -104,7 +101,6 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
-                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -126,7 +122,6 @@ const BaseChart = ({
             renderExtraComponent={legend.renderExtraComponent}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-            secondaryClick={legend?.secondaryClick}
           />
         </div>
       )}

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
@@ -10,7 +12,7 @@ interface Props {
   title: string;
 }
 
-const Header = ({ title, header }: Props): JSX.Element => {
+const Header = ({ title, header }: Props): ReactElement => {
   const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;

package/src/Graph/common/Error/NoData.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material';
+
+import { useTranslation } from 'react-i18next';
+
+import { labelNoDataForThisPeriod } from '../../Chart/translatedLabels';
+
+const NoData = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={'flex items-center justify-center h-full'}>
+      <Typography align="center" variant="body1">
+        {t(labelNoDataForThisPeriod)}
+      </Typography>
+    </div>
+  );
+};
+
+export default NoData;

package/src/Graph/common/timeSeries/index.test.ts

@@ -362,10 +362,10 @@ describe('timeSeries', () => {
   describe(formatMetricValue, () => {
     const cases: Array<TestCase> = [
       [218857269, '', 1000, '218.86m'],
-      [218857269, '', 1024, '208.72 M'],
+      [218857269, '', 1024, '208.72 Mi'],
       [0.12232323445, '', 1000, '0.12'],
-      [1024, 'B', 1000, '1 KB'],
-      [1024, 'B', 1024, '1 KB'],
+      [1024, 'B', 1000, '1 KiB'],
+      [1024, 'B', 1024, '1 KiB'],
       [null, 'B', 1024, null]
     ];
 
@@ -553,7 +553,7 @@ describe('Format value with unit', () => {
       return '324.23m';
     }
 
-    return `309.21 M${unit}`;
+    return `309.21 Mi${unit}`;
   };
 
   const humanReadableTestCases = units.map((unit) => {