@centreon/ui 24.4.72 → 24.4.74

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,38 +1,30 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, pluck } from 'ramda';
+import { useMemo } from 'react';
+
+import { scaleOrdinal } from '@visx/scale';
+import { equals, isNil, pluck } from 'ramda';
 
-import { getValueByUnit } from '../common/utils';
 import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
 
 import { BarType } from './models';
 
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface useBarStackProps {
+interface UseBarStackProps {
   data: Array<BarType>;
   height: number;
-  legendRef;
-  size: number;
-  titleRef;
+  legendDirection?: 'column' | 'row';
   unit?: 'percentage' | 'number';
   variant?: 'vertical' | 'horizontal';
   width: number;
 }
-interface useBarStackState {
-  barSize: Size;
+
+interface UseBarStackState {
   colorScale;
-  input;
+  formattedLegendDirection: 'column' | 'row';
+  isSmall: boolean;
   isVerticalBar: boolean;
-  keys: Array<string>;
   legendScale: LegendScale;
-  svgContainerSize: Size;
-  svgWrapperWidth: number;
+  titleVariant: 'xs' | 'sm' | 'md';
   total: number;
-  xScale;
-  yScale;
 }
 
 const useResponsiveBarStack = ({
@@ -41,90 +33,73 @@ const useResponsiveBarStack = ({
   height,
   width,
   unit = 'number',
-  titleRef,
-  legendRef,
-  size
-}: useBarStackProps): useBarStackState => {
-  const isVerticalBar = equals(variant, 'vertical');
-
-  const heightOfTitle = titleRef.current?.offsetHeight || 0;
-  const widthOfLegend = legendRef.current?.offsetWidth || 0;
-
-  const horizontalGap = widthOfLegend > 0 ? 12 : 0;
-  const verticalGap = heightOfTitle > 0 ? 8 : 0;
-
-  const svgWrapperWidth = isVerticalBar
-    ? size + 36
-    : width - widthOfLegend - horizontalGap;
-
-  const svgContainerSize = {
-    height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
-    width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
-  };
-
-  const barSize = {
-    height: svgContainerSize.height - 16,
-    width: svgContainerSize.width - 16
-  };
-
-  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
-
-  const yScale = isVerticalBar
-    ? scaleLinear({
-        domain: [0, total]
-      })
-    : scaleBand({
-        domain: [0, 0],
-        padding: 0
-      });
-
-  const xScale = isVerticalBar
-    ? scaleBand({
-        domain: [0, 0],
-        padding: 0
-      })
-    : scaleLinear({
-        domain: [0, total]
-      });
-
-  const keys = pluck('label', data);
-
-  const colorsRange = pluck('color', data);
-
-  const colorScale = scaleOrdinal({
-    domain: keys,
-    range: colorsRange
-  });
-
-  const legendScale = {
-    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
-    range: colorsRange
-  };
-
-  const xMax = barSize.width;
-  const yMax = barSize.height;
-
-  xScale.rangeRound([0, xMax]);
-  yScale.range([yMax, 0]);
-
-  const input = data.reduce((acc, { label, value }) => {
-    acc[label] = value;
-
-    return acc;
-  }, {});
+  legendDirection
+}: UseBarStackProps): UseBarStackState => {
+  const total = useMemo(
+    () => Math.floor(data.reduce((acc, { value }) => acc + value, 0)),
+    [data]
+  );
+
+  const isVerticalBar = useMemo(() => equals(variant, 'vertical'), [variant]);
+
+  const isSmall = useMemo(
+    () => Math.floor(height) < 90,
+    [isVerticalBar, height]
+  );
+
+  const titleVariant = useMemo(() => {
+    if (width <= 105) {
+      return 'xs';
+    }
+
+    if (width <= 150 || isSmall) {
+      return 'sm';
+    }
+
+    return 'md';
+  }, [isSmall, width]);
+
+  const keys = useMemo(() => pluck('label', data), [data]);
+
+  const colorsRange = useMemo(() => pluck('color', data), [data]);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        domain: keys,
+        range: colorsRange
+      }),
+    [keys, colorsRange]
+  );
+
+  const legendScale = useMemo(
+    () => ({
+      domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+      range: colorsRange
+    }),
+    [data, colorsRange]
+  );
+
+  const formattedLegendDirection = useMemo(() => {
+    if (!isNil(legendDirection)) {
+      return legendDirection;
+    }
+
+    if (equals(variant, 'horizontal')) {
+      return 'row';
+    }
+
+    return 'column';
+  }, [legendDirection, variant]);
 
   return {
-    barSize,
     colorScale,
-    input,
+    formattedLegendDirection,
+    isSmall,
     isVerticalBar,
-    keys,
     legendScale,
-    svgContainerSize,
-    svgWrapperWidth,
-    total,
-    xScale,
-    yScale
+    titleVariant,
+    total
   };
 };
 

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { T, equals, gt, lt } from 'ramda';
@@ -13,6 +13,7 @@ import { useHeatMapStyles } from './HeatMap.styles';
 const gap = 8;
 const maxTileSize = 120;
 const smallestTileSize = 44;
+const toleratedRangeWidth = 10;
 
 const ResponsiveHeatMap = <TData,>({
   width,
@@ -24,6 +25,7 @@ const ResponsiveHeatMap = <TData,>({
   displayTooltipCondition = T
 }: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
+  const previousTileSize = useRef(0);
 
   const tileSize = useMemo(() => {
     const scaleWidth = scaleLinear({
@@ -39,6 +41,12 @@ const ResponsiveHeatMap = <TData,>({
       tilesLength * maxTileSize + (tilesLength - 1) * gap;
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
+    const canUpdateTileSize =
+      Math.abs(tileWidth - previousTileSize.current) > toleratedRangeWidth;
+
+    if (!canUpdateTileSize) {
+      return previousTileSize.current;
+    }
 
     if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
       return smallestTileSize;
@@ -52,6 +60,8 @@ const ResponsiveHeatMap = <TData,>({
   }, [width, tiles]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
+  const isMediumSize = !isSmallestSize && lt(tileSize, 90);
+  previousTileSize.current = tileSize;
 
   if (equals(width, 0)) {
     return null;
@@ -92,7 +102,14 @@ const ResponsiveHeatMap = <TData,>({
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>
-              {children({ backgroundColor, data, id, isSmallestSize })}
+              {children({
+                backgroundColor,
+                data,
+                id,
+                isMediumSize,
+                isSmallestSize,
+                tileSize
+              })}
             </div>
           </Tooltip>
         </Box>

package/src/Graph/HeatMap/model.ts

@@ -10,7 +10,9 @@ interface ChildrenProps<TData> {
   backgroundColor: string;
   data: TData;
   id: string;
+  isMediumSize?: boolean;
   isSmallestSize: boolean;
+  tileSize?: number;
 }
 
 export interface HeatMapProps<TData> {
@@ -19,7 +21,9 @@ export interface HeatMapProps<TData> {
     backgroundColor,
     id,
     data,
-    isSmallestSize
+    isSmallestSize,
+    tileSize,
+    isMediumSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
   displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;

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

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
+    width: 'fit-content'
+  }
+}));

package/src/Graph/Legend/Legend.tsx

@@ -1,9 +1,13 @@
 import { LegendOrdinal } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
+import { equals } from 'ramda';
 
+import { useStyles } from './Legend.styles';
 import { LegendProps } from './models';
 
 const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
+  const { classes } = useStyles();
+
   const legendScale = scaleOrdinal({
     domain: scale.domain,
     range: scale.range
@@ -11,8 +15,9 @@ const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
 
   return (
     <LegendOrdinal
+      className={classes.container}
       direction={direction}
-      labelMargin="0 16px 0 0"
+      labelMargin={equals(direction, 'row') ? '0 12px 0 0' : '0 0 0 0'}
       scale={legendScale}
     />
   );

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -55,6 +55,7 @@ const RegularLine = ({
   if (filled) {
     return (
       <Shape.AreaClosed<TimeValue>
+        data-metric={metric_id}
         fill={getFillColor({ areaColor, transparency })}
         fillRule="nonzero"
         key={metric_id}
@@ -65,7 +66,7 @@ const RegularLine = ({
     );
   }
 
-  return <Shape.LinePath<TimeValue> {...props} />;
+  return <Shape.LinePath<TimeValue> data-metric={metric_id} {...props} />;
 };
 
 export default memo(RegularLine, (prevProps, nextProps) => {

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -45,10 +45,8 @@ const StackLines = ({
     >
       {({ stacks, path: linePath }): Array<JSX.Element> => {
         return stacks.map((stack, index) => {
-          const { areaColor, transparency, lineColor, highlight } = nth(
-            index,
-            lines
-          ) as Line;
+          const { areaColor, transparency, lineColor, highlight, metric_id } =
+            nth(index, lines) as Line;
 
           return (
             <g key={`stack-${prop('key', stack)}`}>
@@ -65,6 +63,7 @@ const StackLines = ({
               )}
               <path
                 d={linePath(stack) || ''}
+                data-metric={metric_id}
                 fill={getFillColor({ areaColor, transparency })}
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

package/src/Graph/LineChart/Icons/Downtime.tsx

@@ -1,9 +1,9 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { SvgIconProps } from '@mui/material';
 
-import { ReactComponent as IconDowntime } from '../../../@assets/icons/downtime.icon.svg';
+import { DowntimeIcon } from '../../../Icon/DowntimeIcon';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
-  <SvgIcon component={IconDowntime} {...props} />
+  <DowntimeIcon {...props} />
 );
 
 export default Downtime;

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

@@ -1,6 +1,7 @@
 import { omit } from 'ramda';
 
-import { alpha, useTheme } from '@mui/system';
+import { useTheme } from '@mui/material';
+import { alpha } from '@mui/system';
 
 import Bar from '../Bar';
 

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

@@ -1,8 +1,10 @@
+import { lt } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { margin } from '../common';
 
 interface MakeStylesProps {
+  height?: number | null;
   limitLegendRows?: boolean;
 }
 
@@ -10,8 +12,16 @@ export const legendWidth = 21;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
+const getLegendMaxHeight = ({ height }): number => {
+  if (lt(height || 0, 220)) {
+    return 40;
+  }
+
+  return 90;
+};
+
 export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows }) => ({
+  (theme, { limitLegendRows, height = 0 }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
@@ -29,9 +39,6 @@ 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),
@@ -40,7 +47,11 @@ export const useStyles = makeStyles<MakeStylesProps>()(
     legend: {
       marginLeft: margin.left,
       marginRight: margin.right,
-      overflow: 'hidden'
+      maxHeight: limitLegendRows
+        ? theme.spacing(legendItemHeight * 2 + 1)
+        : getLegendMaxHeight({ height }),
+      overflowX: 'hidden',
+      overflowY: 'auto'
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -63,7 +63,10 @@ const LegendHeader = ({
         placement="top"
       >
         <div className={classes.markerAndLegendName}>
-          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
+          <div
+            data-icon
+            className={cx(classes.icon, { [classes.disabled]: disabled })}
+          />
           <EllipsisTypography
             className={cx(classes.text, classes.legendName)}
             data-mode={

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

@@ -11,13 +11,14 @@ import { Line } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
 
 import { useStyles } from './Legend.styles';
+import LegendContent from './LegendContent';
 import LegendHeader from './LegendHeader';
 import { GetMetricValueProps, LegendDisplayMode } from './models';
 import useLegend from './useLegend';
-import LegendContent from './LegendContent';
 
 interface Props {
   base: number;
+  height?: number | null;
   limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
@@ -33,9 +34,13 @@ const MainLegend = ({
   limitLegend = false,
   renderExtraComponent,
   setLinesGraph,
-  shouldDisplayLegendInCompactMode
+  shouldDisplayLegendInCompactMode,
+  height
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
+  const { classes, cx } = useStyles({
+    height,
+    limitLegendRows: Boolean(limitLegend)
+  });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -145,7 +150,8 @@ const Legend = (props: Props): JSX.Element => {
     limitLegend,
     lines,
     base,
-    shouldDisplayLegendInCompactMode
+    shouldDisplayLegendInCompactMode,
+    height
   } = props;
 
   return useMemoComponent({
@@ -155,7 +161,8 @@ const Legend = (props: Props): JSX.Element => {
       base,
       toggable,
       limitLegend,
-      shouldDisplayLegendInCompactMode
+      shouldDisplayLegendInCompactMode,
+      height
     ]
   });
 };

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

@@ -3,6 +3,7 @@ import { LineChartData } from '../common/models';
 import dataLastDay from './mockedData/lastDay.json';
 import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
 import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
+import dataCurvesWithSameColor from './mockedData/curvesWithSameColor.json';
 import { args as argumentsData } from './helpers/doc';
 
 import WrapperLineChart from '.';
@@ -88,4 +89,56 @@ describe('Line chart', () => {
       cy.makeSnapshot();
     });
   });
+
+  it('displays the curves with different shades when curves have same color', () => {
+    initialize(dataCurvesWithSameColor);
+
+    cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(41, 175, 238)');
+    cy.findByLabelText('Centreon-Server_5: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(83, 191, 241)');
+    cy.findByLabelText('Centreon-Server_4: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(8, 34, 47)');
+    cy.findByLabelText('Centreon-Server_3: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(16, 70, 95)');
+    cy.findByLabelText('Centreon-Server_2: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(24, 105, 142)');
+    cy.findByLabelText('Centreon-Server_1: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(32, 140, 190)');
+
+    cy.get('[data-metric="1"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(41, 175, 238)'
+    );
+    cy.get('[data-metric="21"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(32, 140, 190)'
+    );
+    cy.get('[data-metric="17"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(24, 105, 142)'
+    );
+    cy.get('[data-metric="13"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(16, 70, 95)'
+    );
+    cy.get('[data-metric="9"]').should('have.attr', 'stroke', 'rgb(8, 34, 47)');
+    cy.get('[data-metric="5"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(83, 191, 241)'
+    );
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/LineChart/LineChart.tsx

@@ -5,35 +5,35 @@ import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { Thresholds as ThresholdsModel } from '../common/models';
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
+import { CurveType } from './BasicComponents/Lines/models';
+import Thresholds from './BasicComponents/Thresholds';
 import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './LineChart.styles';
 import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
+import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import Legend from './Legend';
+import { legendWidth } from './Legend/Legend.styles';
+import { useStyles } from './LineChart.styles';
 import { margin } from './common';
 import {
   Data,
   GlobalAreaLines,
   GraphInterval,
-  LineChartProps,
-  LegendModel
+  LegendModel,
+  LineChartProps
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
-import { CurveType } from './BasicComponents/Lines/models';
-import Thresholds from './BasicComponents/Thresholds';
-import { legendWidth } from './Legend/Legend.styles';
-import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 
 const extraMargin = 10;
 
@@ -292,6 +292,7 @@ const LineChart = ({
         <div ref={legendRef}>
           <Legend
             base={baseAxis}
+            height={height}
             limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}

package/src/Graph/LineChart/index.stories.tsx

@@ -34,6 +34,7 @@ import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
 import dataLastDay from './mockedData/lastDay.json';
+import dataCurvesSameColor from './mockedData/curvesWithSameColor.json';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -478,3 +479,15 @@ export const thresholdsRange: Story = {
     />
   )
 };
+
+export const LineChartWithSameColorCurves: Story = {
+  ...Template,
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataCurvesSameColor as unknown as LineChartData}
+    />
+  )
+};