@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -0,0 +1,256 @@
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useAtom } from 'jotai';
+import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
+
+import { Skeleton } from '@mui/material';
+
+import { Tooltip } from '../../components';
+import { useDeepCompare } from '../../utils';
+import { margin } from '../Chart/common';
+import { Data, LineChartProps } from '../Chart/models';
+import { useIntersection } from '../Chart/useChartIntersection';
+import BaseChart from '../common/BaseChart/BaseChart';
+import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
+import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import Thresholds from '../common/Thresholds/Thresholds';
+import { Thresholds as ThresholdsModel } from '../common/models';
+import {
+  getUnits,
+  getXScaleBand,
+  getYScalePerUnit
+} from '../common/timeSeries';
+import { Line } from '../common/timeSeries/models';
+import { useTooltipStyles } from '../common/useTooltipStyles';
+
+import BarGroup from './BarGroup';
+import BarChartTooltip from './Tooltip/BarChartTooltip';
+import { tooltipDataAtom } from './atoms';
+import { BarStyle } from './models';
+
+interface Props
+  extends Pick<LineChartProps, 'tooltip' | 'legend' | 'axis' | 'header'> {
+  barStyle: BarStyle;
+  graphData: Data;
+  graphRef: MutableRefObject<HTMLDivElement | null>;
+  height: number;
+  limitLegend?: false | number;
+  orientation: 'vertical' | 'horizontal' | 'auto';
+  thresholdUnit?: string;
+  thresholds?: ThresholdsModel;
+  width: number;
+  skipIntersectionObserver?: boolean;
+}
+
+const ResponsiveBarChart = ({
+  graphRef,
+  graphData,
+  legend,
+  height,
+  width,
+  axis,
+  thresholdUnit,
+  thresholds,
+  header,
+  limitLegend,
+  orientation,
+  tooltip,
+  barStyle,
+  skipIntersectionObserver
+}: Props): JSX.Element => {
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const { classes, cx } = useTooltipStyles();
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(lines);
+  const graphSvgRef = useRef<SVGSVGElement | null>(null);
+
+  const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
+
+  const { isInViewport } = useIntersection({ element: graphRef?.current });
+
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+
+  const [firstUnit, secondUnit] = getUnits(displayedLines);
+  const allUnits = getUnits(lines);
+
+  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
+    hasSecondUnit: Boolean(secondUnit),
+    height,
+    legendDisplay: legend?.display,
+    legendPlacement: legend?.placement,
+    width
+  });
+
+  const thresholdValues = flatten([
+    pluck('value', thresholds?.warning || []),
+    pluck('value', thresholds?.critical || [])
+  ]);
+
+  const isHorizontal = useMemo(() => {
+    if (!equals(orientation, 'auto')) {
+      return equals(orientation, 'horizontal');
+    }
+
+    return gte(graphWidth, graphHeight + 60);
+  }, [orientation, graphWidth, graphHeight]);
+
+  const xScale = useMemo(
+    () =>
+      getXScaleBand({
+        dataTime: timeSeries,
+        valueWidth: isHorizontal ? graphWidth : graphHeight - 30
+      }),
+    [timeSeries, graphWidth, isHorizontal, graphHeight]
+  );
+
+  const yScalesPerUnit = useMemo(
+    () =>
+      getYScalePerUnit({
+        dataLines: displayedLines,
+        dataTimeSeries: timeSeries,
+        isCenteredZero: axis?.isCenteredZero,
+        isHorizontal,
+        scale: axis?.scale,
+        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight:
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
+      }),
+    [
+      displayedLines,
+      timeSeries,
+      graphHeight,
+      thresholdValues,
+      graphWidth,
+      thresholds?.enabled,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase
+    ]
+  );
+
+  const leftScale = yScalesPerUnit[firstUnit];
+  const rightScale = yScalesPerUnit[secondUnit];
+
+  useEffect(
+    () => {
+      setLinesGraph(lines);
+    },
+    useDeepCompare([lines])
+  );
+
+  const displayLegend = legend?.display ?? true;
+
+  const showGridLines = useMemo(
+    () => isNil(axis?.showGridLines) || axis?.showGridLines,
+    [axis?.showGridLines]
+  );
+
+  if (!isInViewport && !skipIntersectionObserver) {
+    return (
+      <Skeleton
+        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
+        variant="rectangular"
+        width="100%"
+      />
+    );
+  }
+
+  const isTooltipHidden = equals(tooltip?.mode, 'hidden');
+
+  return (
+    <BaseChart
+      base={baseAxis}
+      graphWidth={graphWidth}
+      header={header}
+      height={height}
+      isHorizontal={isHorizontal}
+      legend={{
+        displayLegend,
+        mode: legend?.mode,
+        placement: legend?.placement,
+        renderExtraComponent: legend?.renderExtraComponent
+      }}
+      legendRef={legendRef}
+      limitLegend={limitLegend}
+      lines={linesGraph}
+      setLines={setLinesGraph}
+      title={title}
+    >
+      <Tooltip
+        classes={{
+          tooltip: cx(
+            classes.tooltip,
+            has('data', tooltipData) && classes.tooltipDisablePadding
+          )
+        }}
+        label={
+          <BarChartTooltip
+            base={baseAxis}
+            mode={tooltip?.mode}
+            sortOrder={tooltip?.sortOrder}
+            timeSeries={timeSeries}
+          />
+        }
+        open={!equals(tooltip?.mode, 'hidden') && Boolean(tooltipData)}
+        placement="top"
+      >
+        <div className={classes.tooltipChildren}>
+          <ChartSvgWrapper
+            allUnits={allUnits}
+            axis={axis}
+            base={baseAxis}
+            displayedLines={displayedLines}
+            graphHeight={graphHeight}
+            graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
+            gridLinesType={axis?.gridLinesType}
+            leftScale={leftScale}
+            orientation={isHorizontal ? 'horizontal' : 'vertical'}
+            rightScale={rightScale}
+            showGridLines={showGridLines}
+            svgRef={graphSvgRef}
+            timeSeries={timeSeries}
+            xScale={xScale}
+          >
+            <>
+              <BarGroup
+                barStyle={barStyle}
+                isTooltipHidden={isTooltipHidden}
+                lines={displayedLines}
+                orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
+                timeSeries={timeSeries}
+                xScale={xScale}
+                yScalesPerUnit={yScalesPerUnit}
+                scaleType={axis?.scale}
+              />
+              {thresholds?.enabled && (
+                <Thresholds
+                  displayedLines={displayedLines}
+                  hideTooltip={() => setTooltipData(null)}
+                  isHorizontal={isHorizontal}
+                  showTooltip={({ tooltipData: thresholdLabel }) =>
+                    setTooltipData({
+                      thresholdLabel
+                    })
+                  }
+                  thresholdUnit={thresholdUnit}
+                  thresholds={thresholds as ThresholdsModel}
+                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
+                  yScalesPerUnit={yScalesPerUnit}
+                />
+              )}
+            </>
+          </ChartSvgWrapper>
+        </div>
+      </Tooltip>
+    </BaseChart>
+  );
+};
+
+export default ResponsiveBarChart;

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -0,0 +1,122 @@
+import { useAtomValue } from 'jotai';
+import {
+  path,
+  T,
+  always,
+  cond,
+  equals,
+  filter,
+  gt,
+  has,
+  isNil,
+  prop,
+  reverse,
+  sortBy
+} from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { useLocaleDateTimeFormat } from '../../../utils';
+import { Tooltip } from '../../Chart/models';
+import { formatMetricValueWithUnit } from '../../common/timeSeries';
+import { TimeValue } from '../../common/timeSeries/models';
+import { tooltipDataAtom } from '../atoms';
+
+import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
+
+interface Props extends Partial<Pick<Tooltip, 'mode' | 'sortOrder'>> {
+  base: number;
+  timeSeries: Array<TimeValue>;
+}
+
+const BarChartTooltip = ({
+  timeSeries,
+  base,
+  mode,
+  sortOrder
+}: Props): JSX.Element | null => {
+  const { classes } = useBarChartTooltipStyles();
+  const { toDate, toTime } = useLocaleDateTimeFormat();
+  const tooltipData = useAtomValue(tooltipDataAtom);
+
+  if (isNil(tooltipData)) {
+    return null;
+  }
+
+  if (has('thresholdLabel', tooltipData)) {
+    return <Typography>{tooltipData.thresholdLabel}</Typography>;
+  }
+
+  const date = timeSeries[tooltipData.index].timeTick;
+  const formattedDateTime = `${toDate(date)} / ${toTime(date)}`;
+
+  const isSingleMode = equals(mode, 'single');
+
+  const filteredMetrics = isSingleMode
+    ? filter(
+        ({ metric }) => equals(metric.metric_id, tooltipData.highlightedMetric),
+        tooltipData.data
+      )
+    : tooltipData.data;
+
+  const displayHighLightedMetric = gt(filteredMetrics.length, 1);
+
+  const sortedMetrics = cond([
+    [equals('name'), always(sortBy(path(['metric', 'name']), filteredMetrics))],
+    [equals('ascending'), always(sortBy(prop('value'), filteredMetrics))],
+    [
+      equals('descending'),
+      always(reverse(sortBy(prop('value'), filteredMetrics)))
+    ],
+    [T, always(filteredMetrics)]
+  ])(sortOrder);
+
+  return (
+    <div className={classes.tooltipContainer}>
+      <Typography fontWeight="bold" textAlign="center">
+        {formattedDateTime}
+      </Typography>
+      <div className={classes.metrics}>
+        {sortedMetrics.map(({ metric, value }) => (
+          <div
+            className={classes.metric}
+            data-metric={metric.name}
+            key={metric.metric_id}
+          >
+            <Box
+              className={classes.metricColorBox}
+              sx={{ backgroundColor: metric.color }}
+            />
+            <Typography
+              className={classes.metricName}
+              fontWeight={
+                displayHighLightedMetric &&
+                equals(tooltipData.highlightedMetric, metric.metric_id)
+                  ? 'bold'
+                  : 'regular'
+              }
+            >
+              {metric.name}
+            </Typography>
+            <Typography
+              fontWeight={
+                displayHighLightedMetric &&
+                equals(tooltipData.highlightedMetric, metric.metric_id)
+                  ? 'bold'
+                  : 'regular'
+              }
+            >
+              {formatMetricValueWithUnit({
+                base,
+                unit: metric.unit,
+                value
+              })}
+            </Typography>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BarChartTooltip;

package/src/Graph/BarChart/Tooltip/useBarChartTooltipStyles.ts

@@ -0,0 +1,28 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBarChartTooltipStyles = makeStyles()((theme) => ({
+  metric: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1),
+    weidth: '100%'
+  },
+  metricColorBox: {
+    borderRadius: theme.shape.borderRadius,
+    flexShrink: 0,
+    height: theme.spacing(1.5),
+    width: theme.spacing(1.5)
+  },
+  metricName: {
+    flexGrow: 1
+  },
+  metrics: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: theme.spacing(0.5),
+    width: '100%'
+  },
+  tooltipContainer: {
+    padding: theme.spacing(1)
+  }
+}));

package/src/Graph/BarChart/atoms.ts

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+
+import { TooltipData } from './models';
+
+export const tooltipDataAtom = atom<TooltipData | null>(null);

package/src/Graph/BarChart/models.ts

@@ -0,0 +1,21 @@
+import { Line } from '../common/timeSeries/models';
+
+export type TooltipData =
+  | {
+      data: Array<{
+        metric: Line;
+        value: number | null;
+      }>;
+      highlightedMetric: number;
+      index: number;
+    }
+  | {
+      thresholdLabel: string;
+    };
+
+export interface BarStyle {
+  /** The opacity of the bar between 0 and 1. */
+  opacity: number;
+  /** The radius of a bar between 0 and 0.5. Does not work for stacked bars */
+  radius: number;
+}

package/src/Graph/BarChart/useBarChartStyles.tsx

@@ -0,0 +1,5 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBarChartStyles = makeStyles()({
+  tooltipChildren: { height: '100%', width: '100%' }
+});

package/src/Graph/BarChart/useBarStack.ts

@@ -0,0 +1,114 @@
+import { useCallback, useMemo } from 'react';
+
+import { scaleOrdinal } from '@visx/scale';
+import { BarStack, BarStackHorizontal } from '@visx/shape';
+import { useSetAtom } from 'jotai';
+import { equals, keys, omit } from 'ramda';
+
+import { useDeepMemo } from '../../utils';
+import { Line, TimeValue } from '../common/timeSeries/models';
+
+import { tooltipDataAtom } from './atoms';
+
+interface HoverBarProps {
+  barIndex: number;
+  highlightedMetric: number;
+}
+
+export interface UseBarStackProps {
+  isHorizontal: boolean;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  xScale;
+  yScale;
+}
+
+interface UseBarStackState {
+  BarStackComponent: typeof BarStack | typeof BarStackHorizontal;
+  colorScale;
+  commonBarStackProps;
+  exitBar: () => void;
+  hoverBar: (props: HoverBarProps) => () => void;
+  lineKeys: Array<number>;
+}
+
+export const useBarStack = ({
+  timeSeries,
+  isHorizontal,
+  lines,
+  yScale,
+  xScale
+}: UseBarStackProps): UseBarStackState => {
+  const setTooltipData = useSetAtom(tooltipDataAtom);
+
+  const BarStackComponent = useMemo(
+    () => (isHorizontal ? BarStack : BarStackHorizontal),
+    [isHorizontal]
+  );
+
+  const lineKeys = useDeepMemo({
+    deps: [timeSeries],
+    variable: keys(omit(['timeTick'], timeSeries[0]))
+  });
+  const colors = useDeepMemo({
+    deps: [lineKeys, lines],
+    variable: lineKeys.map((key) => {
+      const metric = lines.find(({ metric_id }) =>
+        equals(metric_id, Number(key))
+      );
+
+      return metric?.lineColor || '';
+    })
+  });
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal<number, string>({
+        domain: lineKeys,
+        range: colors
+      }),
+    [...lineKeys, ...colors]
+  );
+
+  const commonBarStackProps = isHorizontal
+    ? {
+        x: (d) => d.timeTick,
+        xScale,
+        yScale
+      }
+    : {
+        xScale: yScale,
+        y: (d) => d.timeTick,
+        yScale: xScale
+      };
+
+  const hoverBar = useCallback(
+    ({ highlightedMetric, barIndex }: HoverBarProps) =>
+      (): void => {
+        setTooltipData({
+          data: lines.map((metric) => {
+            return {
+              metric,
+              value: timeSeries[barIndex][metric.metric_id]
+            };
+          }),
+          highlightedMetric,
+          index: barIndex
+        });
+      },
+    []
+  );
+
+  const exitBar = useCallback((): void => {
+    setTooltipData(null);
+  }, []);
+
+  return {
+    BarStackComponent,
+    colorScale,
+    commonBarStackProps,
+    exitBar,
+    hoverBar,
+    lineKeys
+  };
+};

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

@@ -0,0 +1,139 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarStackProps, BarType } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '400px',
+  height = '400px',
+  data = defaultData,
+  ...args
+}: Omit<BarStackProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <BarStack {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Bar stack', () => {
+  it('renders Bar stack correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('barStack').should('have.css', 'height', '270px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+    cy.get('[data-variant="vertical"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('conditionally displays values on rects based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});