@centreon/ui 24.6.2 → 24.6.4

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/Gauge/Gauge.cypress.spec.tsx

@@ -1,4 +1,4 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 import {
   criticalThresholds,
   rangedThresholds,

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 
 import { Gauge } from './Gauge';
 

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

@@ -1,9 +1,9 @@
 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 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 { LineChartProps } from './models';
 

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

@@ -1,10 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useLineChartStyles = makeStyles()({
-  header: {
-    display: 'grid',
-    gridTemplateColumns: '0.4fr 1fr 0.4fr',
-    width: '100%'
-  },
   tooltipChildren: { height: '100%', width: '100%' }
 });