@centreon/ui 24.7.6 → 24.7.7

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

@@ -0,0 +1,122 @@
+import { useAtomValue } from 'jotai';
+import {
+  always,
+  cond,
+  equals,
+  filter,
+  gt,
+  has,
+  isNil,
+  path,
+  prop,
+  reverse,
+  sortBy,
+  T
+} from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { TimeValue } from '../../common/timeSeries/models';
+import { useLocaleDateTimeFormat } from '../../../utils';
+import { formatMetricValueWithUnit } from '../../common/timeSeries';
+import { tooltipDataAtom } from '../atoms';
+import { Tooltip } from '../../LineChart/models';
+
+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 { BarStack, BarStackHorizontal } from '@visx/shape';
+import { equals, keys, omit } from 'ramda';
+import { scaleOrdinal } from '@visx/scale';
+import { useSetAtom } from 'jotai';
+
+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,
+  yScale,
+  lines,
+  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/BarChart/useSingleBar.ts

@@ -0,0 +1,199 @@
+import { useMemo } from 'react';
+
+import { equals, gt } from 'ramda';
+import { useSetAtom } from 'jotai';
+
+import { Line } from '../common/timeSeries/models';
+import { useDeepMemo } from '../..';
+
+import { tooltipDataAtom } from './atoms';
+
+const getInvertedBarLength = ({
+  useRightScale,
+  rightScale,
+  leftScale,
+  value
+}): number | null => {
+  const scale = useRightScale ? rightScale : leftScale;
+
+  return scale(value);
+};
+
+const getBarLength = ({
+  size,
+  value,
+  invertedBarLength,
+  lengthToMatchZero,
+  isCenteredZero,
+  isHorizontal
+}): number => {
+  if (!value) {
+    return 0;
+  }
+
+  if (!isHorizontal && gt(0, value) && isCenteredZero) {
+    return size - lengthToMatchZero - invertedBarLength;
+  }
+
+  if (!isHorizontal && gt(0, value) && gt(invertedBarLength, 0)) {
+    return invertedBarLength;
+  }
+
+  if (!isHorizontal && gt(0, value)) {
+    return invertedBarLength + (size - lengthToMatchZero);
+  }
+
+  if (!isHorizontal) {
+    return invertedBarLength - (size - lengthToMatchZero);
+  }
+
+  if (value < 0) {
+    return Math.abs(invertedBarLength) - (size - lengthToMatchZero);
+  }
+
+  if (isCenteredZero) {
+    const barLength = size - invertedBarLength;
+
+    return size - invertedBarLength - barLength / 2;
+  }
+
+  return size - invertedBarLength - lengthToMatchZero;
+};
+
+export interface UseSingleBarProps {
+  bar: {
+    color: string;
+    height: number;
+    index: number;
+    key: number;
+    value: number | null;
+    width: number;
+    x: number;
+    y: number;
+  };
+  isCenteredZero?: boolean;
+  isHorizontal: boolean;
+  isTooltipHidden: boolean;
+  leftScale;
+  lines: Array<Line>;
+  rightScale;
+  secondUnit?: string;
+  size: number;
+}
+
+interface UseSingleBarState {
+  barLength: number;
+  barPadding: number;
+  listeners: {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+  };
+}
+
+export const useSingleBar = ({
+  lines,
+  secondUnit,
+  bar,
+  leftScale,
+  rightScale,
+  size,
+  isCenteredZero,
+  isHorizontal,
+  isTooltipHidden
+}: UseSingleBarProps): UseSingleBarState => {
+  const setTooltipData = useSetAtom(tooltipDataAtom);
+
+  const metric = useDeepMemo({
+    deps: [lines, bar.key],
+    variable: lines.find(({ metric_id }) => equals(metric_id, Number(bar.key)))
+  }) as Line;
+
+  const useRightScale = useMemo(
+    () => equals(secondUnit, metric?.unit),
+    [secondUnit, metric?.unit]
+  );
+
+  const left0Height = useMemo(() => leftScale(0), [leftScale(0)]);
+  const right0Height = useMemo(() => rightScale(0), [rightScale(0)]);
+
+  const invertedBarLength = useMemo(
+    () =>
+      getInvertedBarLength({
+        leftScale,
+        rightScale,
+        useRightScale,
+        value: bar.value
+      }),
+    [bar.value, useRightScale, leftScale, rightScale]
+  );
+
+  const lengthToMatchZero = useMemo(
+    () => size - (useRightScale ? right0Height : left0Height),
+    [useRightScale, rightScale, leftScale]
+  );
+
+  const barLength = useMemo(
+    () =>
+      getBarLength({
+        invertedBarLength,
+        isCenteredZero,
+        isHorizontal,
+        lengthToMatchZero,
+        size,
+        value: bar.value
+      }),
+    [
+      size,
+      invertedBarLength,
+      isCenteredZero,
+      isHorizontal,
+      lengthToMatchZero,
+      bar.value
+    ]
+  );
+
+  const barPadding = useMemo(
+    () =>
+      isHorizontal
+        ? size -
+          barLength -
+          lengthToMatchZero +
+          ((bar.value ?? 0) < 0 ? barLength : 0)
+        : size - lengthToMatchZero - ((bar.value ?? 0) < 0 ? barLength : 0),
+    [isHorizontal, barLength, bar.value, barLength]
+  );
+
+  const hoverBar = (): void => {
+    setTooltipData({
+      data: [
+        {
+          metric,
+          value: bar.value
+        }
+      ],
+      highlightedMetric: metric?.metric_id,
+      index: bar.index
+    });
+  };
+
+  const exitBar = (): void => {
+    setTooltipData(null);
+  };
+
+  const listeners = useMemo(
+    () =>
+      isTooltipHidden
+        ? {}
+        : {
+            onMouseEnter: hoverBar,
+            onMouseLeave: exitBar
+          },
+    [isTooltipHidden]
+  );
+
+  return {
+    barLength,
+    barPadding,
+    listeners
+  };
+};

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

@@ -0,0 +1,139 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarType, BarStackProps } 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();
+  });
+});