@centreon/ui 23.10.121 → 24.4.0

package/src/Graph/BarStack/GraphAndLegend.tsx

@@ -0,0 +1,119 @@
+import { memo, useMemo } from 'react';
+
+import { equals, props } from 'ramda';
+
+import { useGraphAndLegendStyles } from './BarStack.styles';
+import Graph from './Graph';
+import { gap, legendMaxHeight, legendMaxWidth } from './constants';
+import { BarStackProps } from './models';
+
+interface Props
+  extends Pick<
+    BarStackProps,
+    | 'data'
+    | 'displayValues'
+    | 'onSingleBarClick'
+    | 'unit'
+    | 'TooltipContent'
+    | 'tooltipProps'
+  > {
+  colorScale;
+  displayLegend: boolean;
+  height: number;
+  isVerticalBar: boolean;
+  legend: JSX.Element;
+  total: number;
+  width: number;
+}
+
+const GraphAndLegend = ({
+  isVerticalBar,
+  legend,
+  displayLegend,
+  height,
+  width,
+  colorScale,
+  total,
+  unit,
+  data,
+  displayValues,
+  onSingleBarClick,
+  tooltipProps,
+  TooltipContent
+}: Props): JSX.Element => {
+  const { classes } = useGraphAndLegendStyles();
+
+  const isSmall = useMemo(
+    () =>
+      (!isVerticalBar && Math.floor(height) <= 80) ||
+      (isVerticalBar && Math.floor(width) <= 150),
+    [isVerticalBar, height, width]
+  );
+
+  const mustDisplayLegend = useMemo(
+    () => displayLegend && !isSmall,
+    [isSmall, displayLegend]
+  );
+
+  const graphWidth = useMemo(
+    () =>
+      isVerticalBar ? width - (isSmall ? 0 : legendMaxWidth - gap) : width,
+    [width, isVerticalBar, isSmall]
+  );
+
+  const graphHeight = useMemo(
+    () =>
+      isVerticalBar ? height : height - (isSmall ? 0 : legendMaxHeight - gap),
+    [height, isVerticalBar, isSmall]
+  );
+
+  return (
+    <div
+      className={classes.graphAndLegend}
+      data-display-legend={mustDisplayLegend}
+      data-is-vertical={isVerticalBar}
+      style={{ height }}
+    >
+      <Graph
+        TooltipContent={TooltipContent}
+        colorScale={colorScale}
+        data={data}
+        displayValues={displayValues}
+        height={graphHeight}
+        isVerticalBar={isVerticalBar}
+        tooltipProps={tooltipProps}
+        total={total}
+        unit={unit}
+        width={graphWidth}
+        onSingleBarClick={onSingleBarClick}
+      />
+      {mustDisplayLegend && (
+        <div
+          className={classes.legend}
+          data-is-vertical={isVerticalBar}
+          data-testid="Legend"
+        >
+          {legend}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const propsToMemoize = [
+  'width',
+  'height',
+  'isVerticalBar',
+  'colorScale',
+  'data',
+  'total',
+  'unit',
+  'displayValues',
+  'tooltipProps',
+  'displayLegend',
+  'legend'
+];
+
+export default memo(GraphAndLegend, (prevProps, nextProps) =>
+  equals(props(propsToMemoize, prevProps), props(propsToMemoize, nextProps))
+);

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -0,0 +1,114 @@
+import { useMemo } from 'react';
+
+import numeral from 'numeral';
+import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+
+import { Legend as LegendComponent } from '../Legend';
+import { LegendProps } from '../Legend/models';
+
+import { useStyles } from './BarStack.styles';
+import GraphAndLegend from './GraphAndLegend';
+import { gap, smallTitleHeight, titleHeight } from './constants';
+import { BarStackProps } from './models';
+import useResponsiveBarStack from './useResponsiveBarStack';
+
+const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
+  <LegendComponent direction={direction} scale={scale} />
+);
+
+const BarStack = ({
+  title,
+  data,
+  height,
+  width,
+  onSingleBarClick,
+  displayLegend = true,
+  TooltipContent,
+  Legend = DefaultLengd,
+  unit = 'number',
+  displayValues,
+  variant = 'vertical',
+  legendDirection,
+  tooltipProps = {}
+}: BarStackProps & { height: number; width: number }): JSX.Element => {
+  const { classes, cx } = useStyles();
+  const { t } = useTranslation();
+
+  const {
+    total,
+    titleVariant,
+    legendScale,
+    isVerticalBar,
+    colorScale,
+    formattedLegendDirection
+  } = useResponsiveBarStack({
+    data,
+    height,
+    legendDirection,
+    unit,
+    variant,
+    width
+  });
+
+  const graphAndLegendHeight = useMemo(() => {
+    if (equals(titleVariant, 'xs')) {
+      return height - 2 * smallTitleHeight - gap;
+    }
+
+    if (equals(titleVariant, 'sm')) {
+      return height - smallTitleHeight - gap;
+    }
+
+    return height - titleHeight - gap;
+  }, [titleVariant, height]);
+
+  return (
+    <div
+      className={classes.container}
+      data-has-title={!!title}
+      data-title-variant={titleVariant}
+      data-variant={variant}
+    >
+      {title && (
+        <Typography
+          className={cx(equals(titleVariant, 'md') && classes.clippedTitle)}
+          data-testid="Title"
+          fontWeight="bold"
+          textAlign="center"
+          variant={equals(titleVariant, 'md') ? 'h6' : 'body1'}
+        >
+          {`${numeral(total).format('0a')}`} {t(title)}
+        </Typography>
+      )}
+      <GraphAndLegend
+        TooltipContent={TooltipContent}
+        colorScale={colorScale}
+        data={data}
+        displayLegend={displayLegend}
+        displayValues={displayValues}
+        height={graphAndLegendHeight}
+        isVerticalBar={isVerticalBar}
+        legend={
+          <Legend
+            data={data}
+            direction={formattedLegendDirection}
+            scale={legendScale}
+            title={title}
+            total={total}
+            unit={unit}
+          />
+        }
+        tooltipProps={tooltipProps}
+        total={total}
+        unit={unit}
+        width={width}
+        onSingleBarClick={onSingleBarClick}
+      />
+    </div>
+  );
+};
+
+export default BarStack;

package/src/Graph/BarStack/constants.ts

@@ -0,0 +1,5 @@
+export const legendMaxWidth = 85;
+export const legendMaxHeight = 43;
+export const titleHeight = 36;
+export const smallTitleHeight = 20;
+export const gap = 4;

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;
+  title?: string;
+  tooltipProps?: object;
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+};

package/src/Graph/BarStack/useGraphAndLegend.ts

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { pluck } from 'ramda';
+
+import { BarType } from './models';
+
+interface UseGraphandLegendProps {
+  data: Array<BarType>;
+  height: number;
+  isVerticalBar: boolean;
+  total: number;
+  width: number;
+}
+
+interface UseGraphAndLegendState {
+  barStackData: Record<string, number>;
+  keys: Array<string>;
+  xScale;
+  yScale;
+}
+
+export const useGraphAndLegend = ({
+  data,
+  isVerticalBar,
+  total,
+  width,
+  height
+}: UseGraphandLegendProps): UseGraphAndLegendState => {
+  const dataWithNonEmptyValue = useMemo(
+    () => data.filter(({ value }) => value),
+    [data]
+  );
+
+  const keys = useMemo(
+    () => pluck('label', dataWithNonEmptyValue),
+    [dataWithNonEmptyValue]
+  );
+
+  const barStackData = useMemo(
+    () =>
+      dataWithNonEmptyValue.reduce((acc, { label, value }) => {
+        acc[label] = value;
+
+        return acc;
+      }, {}),
+    [dataWithNonEmptyValue]
+  );
+
+  const yScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleLinear({
+            domain: [0, total],
+            range: [height, 0]
+          })
+        : scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [height, 0]
+          }),
+    [isVerticalBar, total, height]
+  );
+
+  const xScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [0, width]
+          })
+        : scaleLinear({
+            domain: [0, total],
+            range: [0, width]
+          }),
+    [total, width, isVerticalBar]
+  );
+
+  return {
+    barStackData,
+    keys,
+    xScale,
+    yScale
+  };
+};

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+
+import { scaleOrdinal } from '@visx/scale';
+import { equals, isNil, pluck } from 'ramda';
+
+import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
+
+import { BarType } from './models';
+
+interface UseBarStackProps {
+  data: Array<BarType>;
+  height: number;
+  legendDirection?: 'column' | 'row';
+  unit?: 'percentage' | 'number';
+  variant?: 'vertical' | 'horizontal';
+  width: number;
+}
+
+interface UseBarStackState {
+  colorScale;
+  formattedLegendDirection: 'column' | 'row';
+  isSmall: boolean;
+  isVerticalBar: boolean;
+  legendScale: LegendScale;
+  titleVariant: 'xs' | 'sm' | 'md';
+  total: number;
+}
+
+const useResponsiveBarStack = ({
+  data,
+  variant,
+  height,
+  width,
+  unit = 'number',
+  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 {
+    colorScale,
+    formattedLegendDirection,
+    isSmall,
+    isVerticalBar,
+    legendScale,
+    titleVariant,
+    total
+  };
+};
+
+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');
+  });
+});