@centreon/ui 24.6.2 → 24.6.4

package/src/Graph/BarChart/BarGroup.tsx

@@ -0,0 +1,246 @@
+import { memo, useMemo } from 'react';
+
+import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
+import { difference, equals, isEmpty, keys, omit, pick } from 'ramda';
+import { scaleBand, scaleOrdinal } from '@visx/scale';
+import { Group } from '@visx/group';
+
+import { useDeepMemo } from '../../utils';
+import { Line, TimeValue } from '../common/timeSeries/models';
+import {
+  getSortedStackedLines,
+  getTime,
+  getTimeSeriesForLines
+} from '../common/timeSeries';
+
+import SingleBar from './SingleBar';
+import BarStack from './BarStack';
+import { BarStyle } from './models';
+
+interface Props {
+  barStyle: BarStyle;
+  isCenteredZero?: boolean;
+  isTooltipHidden: boolean;
+  leftScale;
+  lines: Array<Line>;
+  orientation: 'horizontal' | 'vertical';
+  rightScale;
+  secondUnit?: string;
+  size: number;
+  timeSeries: Array<TimeValue>;
+  xScale;
+}
+
+const BarGroup = ({
+  orientation,
+  timeSeries,
+  size,
+  lines,
+  xScale,
+  leftScale,
+  rightScale,
+  secondUnit,
+  isCenteredZero,
+  isTooltipHidden,
+  barStyle
+}: Props): JSX.Element => {
+  const isHorizontal = equals(orientation, 'horizontal');
+
+  const BarComponent = useMemo(
+    () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
+    [isHorizontal]
+  );
+
+  const stackedLines = getSortedStackedLines(lines);
+  const notStackedLines = difference(lines, stackedLines);
+
+  const stackLinesRight = stackedLines.filter(({ unit }) =>
+    equals(unit, secondUnit)
+  );
+  const stackLinesLeft = stackedLines.filter(
+    ({ unit }) => !equals(unit, secondUnit)
+  );
+  const hasStackedLinesRight = !isEmpty(stackLinesRight)
+    ? { stackedRight: null }
+    : {};
+  const hasStackedLinesLeft = !isEmpty(stackLinesLeft)
+    ? { stackedLeft: null }
+    : {};
+
+  const stackedTimeSeriesRight = getTimeSeriesForLines({
+    lines: stackLinesRight,
+    timeSeries
+  });
+  const stackedTimeSeriesLeft = getTimeSeriesForLines({
+    lines: stackLinesLeft,
+    timeSeries
+  });
+  const notStackedTimeSeries = getTimeSeriesForLines({
+    lines: notStackedLines,
+    timeSeries
+  });
+
+  const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
+    ...timeSerie,
+    ...hasStackedLinesRight,
+    ...hasStackedLinesLeft
+  }));
+
+  const lineKeys = useDeepMemo({
+    deps: [normalizedTimeSeries],
+    variable: keys(omit(['timeTick'], normalizedTimeSeries[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 metricScale = useMemo(
+    () =>
+      scaleBand({
+        domain: lineKeys,
+        padding: 0.1,
+        range: [0, xScale.bandwidth()]
+      }),
+    [...lineKeys, xScale.bandwidth()]
+  );
+
+  const barComponentBaseProps = useMemo(
+    () =>
+      isHorizontal
+        ? {
+            x0: getTime,
+            x0Scale: xScale,
+            x1Scale: metricScale,
+            yScale: leftScale
+          }
+        : {
+            xScale: leftScale,
+            y0: getTime,
+            y0Scale: xScale,
+            y1Scale: metricScale
+          },
+    [isHorizontal, leftScale, rightScale, xScale, metricScale]
+  );
+
+  return (
+    <BarComponent<TimeValue>
+      color={colorScale}
+      data={normalizedTimeSeries}
+      height={size}
+      keys={lineKeys}
+      {...barComponentBaseProps}
+    >
+      {(barGroups) =>
+        barGroups.map((barGroup) => (
+          <Group
+            key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+            left={barGroup.x0}
+            top={barGroup.y0}
+          >
+            {barGroup.bars.map((bar) => (
+              <>
+                <SingleBar
+                  bar={bar}
+                  barStyle={barStyle}
+                  isCenteredZero={isCenteredZero}
+                  isHorizontal={isHorizontal}
+                  isTooltipHidden={isTooltipHidden}
+                  key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
+                  leftScale={leftScale}
+                  lines={lines}
+                  rightScale={rightScale}
+                  secondUnit={secondUnit}
+                  size={size}
+                />
+                {equals(bar.key, 'stackedRight') && (
+                  <BarStack
+                    barIndex={barGroup.index}
+                    barPadding={isHorizontal ? bar.x : bar.y}
+                    barWidth={isHorizontal ? bar.width : bar.height}
+                    isHorizontal={isHorizontal}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={stackLinesRight}
+                    timeSeries={stackedTimeSeriesRight}
+                    yScale={rightScale}
+                  />
+                )}
+                {equals(bar.key, 'stackedLeft') && (
+                  <BarStack
+                    barIndex={barGroup.index}
+                    barPadding={isHorizontal ? bar.x : bar.y}
+                    barWidth={isHorizontal ? bar.width : bar.height}
+                    isHorizontal={isHorizontal}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={stackLinesLeft}
+                    timeSeries={stackedTimeSeriesLeft}
+                    yScale={leftScale}
+                  />
+                )}
+              </>
+            ))}
+          </Group>
+        ))
+      }
+    </BarComponent>
+  );
+};
+
+const propsToMemoize = [
+  'orientation',
+  'timeSeries',
+  'size',
+  'lines',
+  'secondUnit',
+  'isCenteredZero',
+  'barStyle'
+];
+
+export default memo(BarGroup, (prevProps, nextProps) => {
+  const prevLeftScale = [
+    ...prevProps.leftScale.domain(),
+    ...prevProps.leftScale.range()
+  ];
+  const prevRightScale = [
+    ...prevProps.rightScale.domain(),
+    ...prevProps.rightScale.range()
+  ];
+  const prevXScale = [
+    ...prevProps.xScale.domain(),
+    ...prevProps.xScale.range()
+  ];
+
+  const nextLeftScale = [
+    ...nextProps.leftScale.domain(),
+    ...nextProps.leftScale.range()
+  ];
+  const nextRightScale = [
+    ...nextProps.rightScale.domain(),
+    ...nextProps.rightScale.range()
+  ];
+  const nextXScale = [
+    ...nextProps.xScale.domain(),
+    ...nextProps.xScale.range()
+  ];
+
+  return (
+    equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
+    equals(prevLeftScale, nextLeftScale) &&
+    equals(prevRightScale, nextRightScale) &&
+    equals(prevXScale, nextXScale)
+  );
+});

package/src/Graph/BarChart/BarStack.tsx

@@ -0,0 +1,126 @@
+import { memo } from 'react';
+
+import { scaleBand } from '@visx/scale';
+import { equals, gt, pick } from 'ramda';
+
+import { useBarStack, UseBarStackProps } from './useBarStack';
+
+const xScale = scaleBand<number>({
+  domain: [0, 0],
+  padding: 0,
+  range: [0, 0]
+});
+
+interface Props extends Omit<UseBarStackProps, 'xScale'> {
+  barIndex: number;
+  barPadding: number;
+  barWidth: number;
+  isTooltipHidden: boolean;
+}
+
+const getPadding = ({ padding, size, isNegativeValue }): number => {
+  if (!isNegativeValue) {
+    return padding;
+  }
+
+  return padding + size;
+};
+
+const BarStack = ({
+  timeSeries,
+  isHorizontal,
+  yScale,
+  lines,
+  barWidth,
+  barPadding,
+  barIndex,
+  isTooltipHidden
+}: Props): JSX.Element => {
+  const {
+    BarStackComponent,
+    commonBarStackProps,
+    colorScale,
+    lineKeys,
+    exitBar,
+    hoverBar
+  } = useBarStack({ isHorizontal, lines, timeSeries, xScale, yScale });
+
+  return (
+    <BarStackComponent
+      color={colorScale}
+      data={[timeSeries[barIndex]]}
+      keys={lineKeys}
+      {...commonBarStackProps}
+    >
+      {(barStacks) => {
+        return barStacks.map((barStack) =>
+          barStack.bars.map((bar) => {
+            const isNegativeValue = gt(0, bar.bar[1]);
+
+            return (
+              <rect
+                data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
+                fill={bar.color}
+                height={isHorizontal ? Math.abs(bar.height) : barWidth}
+                key={`bar-stack-${barStack.index}-${bar.index}`}
+                width={isHorizontal ? barWidth : Math.abs(bar.width)}
+                x={
+                  isHorizontal
+                    ? barPadding
+                    : getPadding({
+                        isNegativeValue,
+                        padding: bar.x,
+                        size: bar.width
+                      })
+                }
+                y={
+                  isHorizontal
+                    ? getPadding({
+                        isNegativeValue,
+                        padding: bar.y,
+                        size: bar.height
+                      })
+                    : barPadding
+                }
+                onMouseEnter={
+                  isTooltipHidden
+                    ? undefined
+                    : hoverBar({
+                        barIndex,
+                        highlightedMetric: Number(bar.key)
+                      })
+                }
+                onMouseLeave={isTooltipHidden ? undefined : exitBar}
+              />
+            );
+          })
+        );
+      }}
+    </BarStackComponent>
+  );
+};
+
+const propsToMemoize = [
+  'timeSeries',
+  'isHorizontal',
+  'barWidth',
+  'lines',
+  'barPadding',
+  'barIndex',
+  'isTooltipHidden'
+];
+
+export default memo(BarStack, (prevProps, nextProps) => {
+  const prevYScaleDomain = prevProps.yScale.domain();
+  const prevYScaleRange = prevProps.yScale.range();
+  const nextYScaleDomain = nextProps.yScale.domain();
+  const nextYScaleRange = nextProps.yScale.range();
+
+  return (
+    equals(
+      [...prevYScaleDomain, ...prevYScaleRange],
+      [...nextYScaleDomain, ...nextYScaleRange]
+    ) &&
+    equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
+  );
+});

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -0,0 +1,263 @@
+import { MutableRefObject, useMemo, useRef, useState } from 'react';
+
+import { equals, flatten, has, isNil, pluck } from 'ramda';
+import { useAtom } from 'jotai';
+
+import { Skeleton } from '@mui/material';
+
+import { Data, LineChartProps } from '../LineChart/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
+import { useIntersection } from '../LineChart/useLineChartIntersection';
+import { Line } from '../common/timeSeries/models';
+import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import {
+  getLeftScale,
+  getRightScale,
+  getUnits,
+  getXScaleBand
+} from '../common/timeSeries';
+import BaseChart from '../common/BaseChart/BaseChart';
+import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
+import { useTooltipStyles } from '../common/useTooltipStyles';
+import { margin } from '../LineChart/common';
+import { Tooltip } from '../../components';
+import Thresholds from '../common/Thresholds/Thresholds';
+
+import BarGroup from './BarGroup';
+import { tooltipDataAtom } from './atoms';
+import BarChartTooltip from './Tooltip/BarChartTooltip';
+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';
+  thresholdUnit?: string;
+  thresholds?: ThresholdsModel;
+  width: number;
+}
+
+const ResponsiveBarChart = ({
+  graphRef,
+  graphData,
+  legend,
+  height,
+  width,
+  axis,
+  thresholdUnit,
+  thresholds,
+  header,
+  limitLegend,
+  orientation,
+  tooltip,
+  barStyle
+}: 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 [, secondUnit] = getUnits(linesGraph);
+
+  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 = equals(orientation, 'horizontal');
+
+  const xScale = useMemo(
+    () =>
+      getXScaleBand({
+        dataTime: timeSeries,
+        valueWidth: isHorizontal ? graphWidth : graphHeight - 30
+      }),
+    [timeSeries, graphWidth, isHorizontal, graphHeight]
+  );
+
+  const leftScale = useMemo(
+    () =>
+      getLeftScale({
+        dataLines: linesGraph,
+        dataTimeSeries: timeSeries,
+        isCenteredZero: axis?.isCenteredZero,
+        isHorizontal,
+        scale: axis?.scale,
+        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight: (isHorizontal ? graphHeight : graphWidth) - 35
+      }),
+    [
+      linesGraph,
+      timeSeries,
+      graphHeight,
+      thresholdValues,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase,
+      graphWidth,
+      isHorizontal
+    ]
+  );
+
+  const rightScale = useMemo(
+    () =>
+      getRightScale({
+        dataLines: linesGraph,
+        dataTimeSeries: timeSeries,
+        isCenteredZero: axis?.isCenteredZero,
+        isHorizontal,
+        scale: axis?.scale,
+        scaleLogarithmicBase: axis?.scaleLogarithmicBase,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight: (isHorizontal ? graphHeight : graphWidth) - 35
+      }),
+    [
+      timeSeries,
+      linesGraph,
+      graphHeight,
+      axis?.isCenteredZero,
+      axis?.scale,
+      axis?.scaleLogarithmicBase,
+      graphWidth,
+      isHorizontal
+    ]
+  );
+
+  const displayLegend = legend?.display ?? true;
+
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+
+  const showGridLines = useMemo(
+    () => isNil(axis?.showGridLines) || axis?.showGridLines,
+    [axis?.showGridLines]
+  );
+
+  if (!isInViewport) {
+    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
+            axis={axis}
+            base={baseAxis}
+            displayedLines={displayedLines}
+            graphHeight={graphHeight}
+            graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
+            gridLinesType={axis?.gridLinesType}
+            leftScale={leftScale}
+            orientation={orientation}
+            rightScale={rightScale}
+            showGridLines={showGridLines}
+            svgRef={graphSvgRef}
+            timeSeries={timeSeries}
+            xScale={xScale}
+          >
+            <>
+              <BarGroup
+                barStyle={barStyle}
+                isCenteredZero={axis?.isCenteredZero}
+                isTooltipHidden={isTooltipHidden}
+                leftScale={leftScale}
+                lines={displayedLines}
+                orientation={orientation}
+                rightScale={rightScale}
+                secondUnit={secondUnit}
+                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
+                timeSeries={timeSeries}
+                xScale={xScale}
+              />
+              {thresholds?.enabled && (
+                <Thresholds
+                  displayedLines={displayedLines}
+                  hideTooltip={() => setTooltipData(null)}
+                  isHorizontal={isHorizontal}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  showTooltip={({ tooltipData: thresholdLabel }) =>
+                    setTooltipData({
+                      thresholdLabel
+                    })
+                  }
+                  thresholdUnit={thresholdUnit}
+                  thresholds={thresholds as ThresholdsModel}
+                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
+                />
+              )}
+            </>
+          </ChartSvgWrapper>
+        </div>
+      </Tooltip>
+    </BaseChart>
+  );
+};
+
+export default ResponsiveBarChart;

package/src/Graph/BarChart/SingleBar.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react';
+
+import { equals, pick } from 'ramda';
+
+import { useSingleBar, UseSingleBarProps } from './useSingleBar';
+import { BarStyle } from './models';
+
+const SingleBar = ({
+  lines,
+  secondUnit,
+  bar,
+  leftScale,
+  rightScale,
+  size,
+  isCenteredZero,
+  isHorizontal,
+  isTooltipHidden,
+  barStyle
+}: UseSingleBarProps & {
+  barStyle: BarStyle;
+}): JSX.Element => {
+  const { barLength, barPadding, listeners } = useSingleBar({
+    bar,
+    isCenteredZero,
+    isHorizontal,
+    isTooltipHidden,
+    leftScale,
+    lines,
+    rightScale,
+    secondUnit,
+    size
+  });
+
+  return (
+    <rect
+      data-testid={`single-bar-${bar.key}-${bar.index}-${bar.value}`}
+      fill={bar.color}
+      height={isHorizontal ? barLength : bar.height}
+      opacity={barStyle.opacity}
+      rx={(isHorizontal ? bar.width : bar.height) * barStyle.radius}
+      width={isHorizontal ? bar.width : barLength}
+      x={isHorizontal ? bar.x : barPadding}
+      y={isHorizontal ? barPadding : bar.y}
+      {...listeners}
+    />
+  );
+};
+
+const propsToMemoize = [
+  'bar',
+  'lines',
+  'secondUnit',
+  'size',
+  'isCenteredZero',
+  'isHorizontal',
+  'isTooltipHidden',
+  'barStyle'
+];
+
+export default memo(SingleBar, (prevProps, nextProps) =>
+  equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
+);