@centreon/ui 24.4.48 → 24.4.49

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -0,0 +1,208 @@
+import { useRef } from 'react';
+
+import { BarStack as BarStackVertical, BarStackHorizontal } from '@visx/shape';
+import { Group } from '@visx/group';
+import numeral from 'numeral';
+import { Text } from '@visx/text';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+
+import { Tooltip } from '../../components';
+import { LegendProps } from '../Legend/models';
+import { Legend as LegendComponent } from '../Legend';
+import { getValueByUnit } from '../common/utils';
+import { labelNoDataFound } from '../translatedLabels';
+
+import { BarStackProps } from './models';
+import { useBarStackStyles } from './BarStack.styles';
+import useResponsiveBarStack from './useResponsiveBarStack';
+
+const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
+  <LegendComponent direction={direction} scale={scale} />
+);
+
+const BarStack = ({
+  title,
+  data,
+  width,
+  height,
+  size = 72,
+  onSingleBarClick,
+  displayLegend = true,
+  TooltipContent,
+  Legend = DefaultLengd,
+  unit = 'number',
+  displayValues,
+  variant = 'vertical',
+  legendDirection = 'column'
+}: BarStackProps & { height: number; width: number }): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useBarStackStyles();
+
+  const titleRef = useRef(null);
+  const legendRef = useRef(null);
+
+  const {
+    barSize,
+    colorScale,
+    input,
+    keys,
+    legendScale,
+    total,
+    xScale,
+    yScale,
+    svgWrapperWidth,
+    svgContainerSize,
+    isVerticalBar,
+    areAllValuesNull
+  } = useResponsiveBarStack({
+    data,
+    height,
+    legendRef,
+    size,
+    titleRef,
+    unit,
+    variant,
+    width
+  });
+
+  const BarStackComponent = isVerticalBar
+    ? BarStackVertical
+    : BarStackHorizontal;
+
+  if (areAllValuesNull) {
+    return (
+      <div className={classes.container} style={{ height, width }}>
+        <Typography variant="h3">{t(labelNoDataFound)}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.container} style={{ height, width }}>
+      <div
+        className={classes.svgWrapper}
+        style={{
+          height,
+          width: svgWrapperWidth
+        }}
+      >
+        {title && (
+          <div className={classes.title} data-testid="Title" ref={titleRef}>
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+          </div>
+        )}
+        <div
+          className={classes.svgContainer}
+          data-testid="barStack"
+          style={svgContainerSize}
+        >
+          <svg
+            data-variant={variant}
+            height={barSize.height}
+            width={barSize.width}
+          >
+            <Group>
+              <BarStackComponent
+                color={colorScale}
+                data={[input]}
+                keys={keys}
+                {...(isVerticalBar
+                  ? { x: () => undefined }
+                  : { y: () => undefined })}
+                xScale={xScale}
+                yScale={yScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => {
+                      const onClick = (): void => {
+                        onSingleBarClick?.(bar);
+                      };
+
+                      return (
+                        <Tooltip
+                          hasCaret
+                          classes={{
+                            tooltip: classes.barStackTooltip
+                          }}
+                          followCursor={false}
+                          key={`bar-stack-${barStack.index}-${bar.index}`}
+                          label={
+                            TooltipContent && (
+                              <TooltipContent
+                                color={bar.color}
+                                label={bar.key}
+                                title={title}
+                                total={total}
+                                value={barStack.bars[0].bar.data[barStack.key]}
+                              />
+                            )
+                          }
+                          position={
+                            isVerticalBar ? 'right-start' : 'bottom-start'
+                          }
+                        >
+                          <g data-testid={bar.key}>
+                            <rect
+                              fill={bar.color}
+                              height={
+                                isVerticalBar ? bar.height - 1 : bar.height
+                              }
+                              key={`bar-stack-${barStack.index}-${bar.index}`}
+                              ry={5}
+                              width={isVerticalBar ? bar.width : bar.width - 1}
+                              x={bar.x}
+                              y={bar.y}
+                              onClick={onClick}
+                            />
+                            {displayValues &&
+                              bar.height > 10 &&
+                              bar.width > 10 && (
+                                <Text
+                                  cursor="pointer"
+                                  data-testid="value"
+                                  fill="#000"
+                                  fontSize={12}
+                                  textAnchor="middle"
+                                  verticalAnchor="middle"
+                                  x={bar.x + bar.width / 2}
+                                  y={bar.y + bar.height / 2}
+                                >
+                                  {getValueByUnit({
+                                    total,
+                                    unit,
+                                    value:
+                                      barStack.bars[0].bar.data[barStack.key]
+                                  })}
+                                </Text>
+                              )}
+                          </g>
+                        </Tooltip>
+                      );
+                    })
+                  )
+                }
+              </BarStackComponent>
+            </Group>
+          </svg>
+        </div>
+      </div>
+      {displayLegend && (
+        <div data-testid="Legend" ref={legendRef}>
+          <Legend
+            data={data}
+            direction={legendDirection}
+            scale={legendScale}
+            title={title}
+            total={total}
+            unit={unit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BarStack;

package/src/Graph/BarStack/index.ts

@@ -0,0 +1 @@
+export { default as BarStack } from './BarStack';

package/src/Graph/BarStack/models.ts

@@ -0,0 +1,19 @@
+export interface BarType {
+  color: string;
+  label: string;
+  value: number;
+}
+
+export type BarStackProps = {
+  Legend?: ({ scale, data, title, total, unit, direction }) => JSX.Element;
+  TooltipContent?: (barData) => JSX.Element | boolean | null;
+  data: Array<BarType>;
+  displayLegend?: boolean;
+  displayValues?: boolean;
+  legendDirection?: 'row' | 'column';
+  onSingleBarClick?: (barData) => void;
+  size?: number;
+  title?: string;
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+};

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -0,0 +1,139 @@
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { equals, isEmpty, pluck, reject } from 'ramda';
+
+import { getValueByUnit } from '../common/utils';
+import { LegendScale } from '../Legend/models';
+
+import { BarType } from './models';
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+interface useBarStackProps {
+  data: Array<BarType>;
+  height: number;
+  legendRef;
+  size: number;
+  titleRef;
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+  width: number;
+}
+interface useBarStackState {
+  areAllValuesNull: boolean;
+  barSize: Size;
+  colorScale;
+  input;
+  isVerticalBar: boolean;
+  keys: Array<string>;
+  legendScale: LegendScale;
+  svgContainerSize: Size;
+  svgWrapperWidth: number;
+  total: number;
+  xScale;
+  yScale;
+}
+
+const useResponsiveBarStack = ({
+  data,
+  variant,
+  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 + 24
+    : 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],
+        nice: true
+      })
+    : scaleBand({
+        domain: [0, 0],
+        padding: 0
+      });
+
+  const xScale = isVerticalBar
+    ? scaleBand({
+        domain: [0, 0],
+        padding: 0
+      })
+    : scaleLinear({
+        domain: [0, total],
+        nice: true
+      });
+
+  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;
+  }, {});
+
+  const values = pluck('value', data);
+
+  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
+
+  return {
+    areAllValuesNull,
+    barSize,
+    colorScale,
+    input,
+    isVerticalBar,
+    keys,
+    legendScale,
+    svgContainerSize,
+    svgWrapperWidth,
+    total,
+    xScale,
+    yScale
+  };
+};
+
+export default useResponsiveBarStack;

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

@@ -0,0 +1,102 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Props, Gauge } from './Gauge';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Gauge
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Gauge', () => {
+  it('does not display the gauge when there is no data', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+  });
+
+  it('displays the gauge as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
+    cy.findByTestId('1.1500000000000001-arc').should('be.visible');
+    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the gauge as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
+    cy.findByTestId('1.25-arc').should('be.visible');
+    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the gauge as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
+    cy.findByTestId('0.6399999999999999-arc').should('be.visible');
+    cy.findByTestId('0.54-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.findByTestId('0.37-arc').should('be.visible');
+    cy.findByTestId('0.09999999999999998-arc').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the threshold tooltip when a threshold is hovered', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.findByTestId('1.1500000000000001-arc').trigger('mouseover', {
+      force: true
+    });
+
+    cy.contains('Warning').should('be.visible');
+
+    cy.findByTestId('0.15000000000000013-arc').trigger('mouseover', {
+      force: true
+    });
+
+    cy.contains('Critical').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/Gauge/Gauge.tsx

@@ -5,7 +5,7 @@ import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
 
-interface Props {
+export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

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

@@ -0,0 +1,145 @@
+import { pluck } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import EllipsisTypography from '../../Typography/EllipsisTypography';
+
+import HeatMap from './HeatMap';
+import heatMapData from './HeatMapData.json';
+import { HeatMapProps } from './model';
+
+const dataIds = pluck('id', heatMapData);
+
+interface Data {
+  counter: number;
+  host: string;
+  service: string;
+}
+
+const TileContent = ({
+  isSmallestSize,
+  data
+}: {
+  data: Data;
+  isSmallestSize: boolean;
+}): JSX.Element | false =>
+  !isSmallestSize && (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: 'common.black',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+      }}
+    >
+      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
+    </Box>
+  );
+
+const initialize = ({
+  width = '100vw',
+  height = '100vh',
+  ...args
+}: Omit<HeatMapProps<Data>, 'tiles' | 'children'> & {
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <HeatMap tiles={heatMapData} {...args}>
+          {TileContent}
+        </HeatMap>
+      </div>
+    )
+  });
+};
+
+describe('HeatMap', () => {
+  it('displays tiles', () => {
+    initialize({});
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('does not display the tooltip when the prop is not set and the tile is hovered', () => {
+    initialize({});
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.findByTestId(`tooltip-${dataIds[0]}`).should('not.exist');
+  });
+
+  it('displays the tooltip when the prop is set and the tile is hovered', () => {
+    initialize({
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays the tooltip conditionally when the prop is set and the tile is hovered', () => {
+    initialize({
+      displayTooltipCondition: ({ counter }) => counter > 100,
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'not.exist'
+    );
+
+    cy.findByTestId(dataIds[1]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-779`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays tiles with fixed size', () => {
+    initialize({ height: '200px', tileSizeFixed: true, width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('displays tiles as small when the container width is under the breakpoint', () => {
+    initialize({ height: '200px', width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display tiles as small when the contains width is 0', () => {
+    initialize({ height: '200px', width: '0px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('not.exist');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a single tile', () => {
+    initialize({ tiles: [heatMapData[0]] });
+    cy.findByTestId(dataIds[0]).should('be.visible');
+  });
+});

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -3,8 +3,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box, Typography } from '@mui/material';
 
-import EllipsisTypography from '../../Typography/EllipsisTypography';
-
 import heatMapData from './HeatMapData.json';
 
 import { HeatMap } from '.';
@@ -22,29 +20,6 @@ const meta: Meta<typeof HeatMap<Data>> = {
 export default meta;
 type Story = StoryObj<typeof HeatMap<Data>>;
 
-const TileContent = ({
-  isSmallestSize,
-  data
-}: {
-  data: Data;
-  isSmallestSize: boolean;
-}): JSX.Element | false =>
-  !isSmallestSize && (
-    <Box
-      sx={{
-        alignItems: 'center',
-        color: 'common.black',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%'
-      }}
-    >
-      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
-    </Box>
-  );
-
 const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
   return (
     <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -40,7 +40,7 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
+    if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
       return smallestTileSize;
     }
 
@@ -66,13 +66,19 @@ const ResponsiveHeatMap = <TData,>({
       }}
     >
       {tiles.map(({ backgroundColor, id, data }) => (
-        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
+        <Box
+          className={classes.heatMapTile}
+          data-testid={id}
+          key={id}
+          sx={{ backgroundColor }}
+        >
           <Tooltip
             hasCaret
             classes={{
               arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
               tooltip: classes.heatMapTooltip
             }}
+            data-testid={`tooltip-${data?.id}`}
             followCursor={false}
             label={
               displayTooltipCondition?.(data) &&