@centreon/ui 24.8.2 → 24.8.4

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,34 +1,32 @@
 import { memo, useMemo } from 'react';
 
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
-import { difference, equals, isEmpty, keys, omit, pick } from 'ramda';
+import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { Group } from '@visx/group';
+import { ScaleLinear } from 'd3-scale';
 
 import { useDeepMemo } from '../../utils';
 import { Line, TimeValue } from '../common/timeSeries/models';
 import {
   getSortedStackedLines,
   getTime,
-  getTimeSeriesForLines
+  getTimeSeriesForLines,
+  getUnits
 } 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;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const BarGroup = ({
@@ -37,44 +35,50 @@ const BarGroup = ({
   size,
   lines,
   xScale,
-  leftScale,
-  rightScale,
-  secondUnit,
-  isCenteredZero,
+  yScalesPerUnit,
   isTooltipHidden,
   barStyle
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
+  const [firstUnit] = getUnits(lines);
+
   const BarComponent = useMemo(
     () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
     [isHorizontal]
   );
 
   const stackedLines = getSortedStackedLines(lines);
+  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
 
-  const stackLinesRight = stackedLines.filter(({ unit }) =>
-    equals(unit, secondUnit)
+  const stackedKeys = stackedUnits.reduce(
+    (acc, unit) => ({
+      ...acc,
+      [`stacked-${unit}`]: null
+    }),
+    {}
   );
-  const stackLinesLeft = stackedLines.filter(
-    ({ unit }) => !equals(unit, secondUnit)
+  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = stackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
   );
-  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
@@ -82,8 +86,7 @@ const BarGroup = ({
 
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
-    ...hasStackedLinesRight,
-    ...hasStackedLinesLeft
+    ...stackedKeys
   }));
 
   const lineKeys = useDeepMemo({
@@ -119,6 +122,8 @@ const BarGroup = ({
     [...lineKeys, xScale.bandwidth()]
   );
 
+  const placeholderScale = yScalesPerUnit[firstUnit];
+
   const barComponentBaseProps = useMemo(
     () =>
       isHorizontal
@@ -126,15 +131,15 @@ const BarGroup = ({
             x0: getTime,
             x0Scale: xScale,
             x1Scale: metricScale,
-            yScale: leftScale
+            yScale: placeholderScale
           }
         : {
-            xScale: leftScale,
+            xScale: placeholderScale,
             y0: getTime,
             y0Scale: xScale,
             y1Scale: metricScale
           },
-    [isHorizontal, leftScale, rightScale, xScale, metricScale]
+    [isHorizontal, placeholderScale, xScale, metricScale]
   );
 
   return (
@@ -152,49 +157,48 @@ const BarGroup = ({
             left={barGroup.x0}
             top={barGroup.y0}
           >
-            {barGroup.bars.map((bar) => (
-              <>
-                <SingleBar
-                  bar={bar}
+            {barGroup.bars.map((bar) => {
+              const isStackedBar = bar.key.startsWith('stacked-');
+              const linesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .lines
+                : (notStackedLines.find(({ metric_id }) =>
+                    equals(metric_id, Number(bar.key))
+                  ) as Line);
+              const timeSeriesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .timeSeries
+                : notStackedTimeSeries.map((timeSerie) => ({
+                    timeTick: timeSerie.timeTick,
+                    [bar.key]: timeSerie[Number(bar.key)]
+                  }));
+
+              return isStackedBar ? (
+                <BarStack
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
                   barStyle={barStyle}
-                  isCenteredZero={isCenteredZero}
+                  barWidth={isHorizontal ? bar.width : bar.height}
                   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}
+                  lines={linesBar}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
                 />
-                {equals(bar.key, 'stackedRight') && (
-                  <BarStack
-                    barIndex={barGroup.index}
-                    barPadding={isHorizontal ? bar.x : bar.y}
-                    barStyle={barStyle}
-                    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}
-                    barStyle={barStyle}
-                    barWidth={isHorizontal ? bar.width : bar.height}
-                    isHorizontal={isHorizontal}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={stackLinesLeft}
-                    timeSeries={stackedTimeSeriesLeft}
-                    yScale={leftScale}
-                  />
-                )}
-              </>
-            ))}
+              ) : (
+                <BarStack
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
+                  barStyle={barStyle}
+                  barWidth={isHorizontal ? bar.width : bar.height}
+                  isHorizontal={isHorizontal}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={[linesBar]}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[linesBar.unit]}
+                />
+              );
+            })}
           </Group>
         ))
       }
@@ -213,27 +217,13 @@ const propsToMemoize = [
 ];
 
 export default memo(BarGroup, (prevProps, nextProps) => {
-  const prevLeftScale = [
-    ...prevProps.leftScale.domain(),
-    ...prevProps.leftScale.range()
-  ];
-  const prevRightScale = [
-    ...prevProps.rightScale.domain(),
-    ...prevProps.rightScale.range()
-  ];
+  const prevYScale = prevProps.yScalesPerUnit;
   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 nextYScale = nextProps.yScalesPerUnit;
   const nextXScale = [
     ...nextProps.xScale.domain(),
     ...nextProps.xScale.range()
@@ -241,8 +231,7 @@ export default memo(BarGroup, (prevProps, nextProps) => {
 
   return (
     equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
-    equals(prevLeftScale, nextLeftScale) &&
-    equals(prevRightScale, nextRightScale) &&
+    equals(prevYScale, nextYScale) &&
     equals(prevXScale, nextXScale)
   );
 });

package/src/Graph/BarChart/BarStack.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react';
 
 import { scaleBand } from '@visx/scale';
-import { equals, gt, pick } from 'ramda';
+import { dec, equals, gt, pick } from 'ramda';
+import { BarRounded } from '@visx/shape';
 
 import { useBarStack, UseBarStackProps } from './useBarStack';
 import { BarStyle } from './models';
@@ -37,7 +38,7 @@ const BarStack = ({
   barPadding,
   barIndex,
   isTooltipHidden,
-  barStyle
+  barStyle = { opacity: 1, radius: 0.2 }
 }: Props): JSX.Element => {
   const {
     BarStackComponent,
@@ -56,21 +57,28 @@ const BarStack = ({
       {...commonBarStackProps}
     >
       {(barStacks) => {
-        return barStacks.map((barStack) =>
+        return barStacks.map((barStack, index) =>
           barStack.bars.map((bar) => {
+            const shouldApplyRadiusOnBottom = equals(index, 0);
+            const shouldApplyRadiusOnTop = equals(index, dec(barStacks.length));
             const isNegativeValue = gt(0, bar.bar[1]);
 
+            const barRoundedProps = {
+              [isHorizontal ? 'top' : 'right']: shouldApplyRadiusOnTop,
+              [isHorizontal ? 'bottom' : 'left']: shouldApplyRadiusOnBottom
+            };
+
             return (
-              <rect
+              <BarRounded
+                {...barRoundedProps}
                 data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
                 fill={bar.color}
-                height={Math.ceil(
-                  isHorizontal ? Math.abs(bar.height) : barWidth
-                )}
+                height={isHorizontal ? Math.abs(bar.height) : barWidth}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={barStyle.opacity}
-                width={Math.ceil(isHorizontal ? barWidth : Math.abs(bar.width))}
-                x={Math.ceil(
+                opacity={barStyle.opacity ?? 1}
+                radius={barWidth * barStyle.radius}
+                width={isHorizontal ? barWidth : Math.abs(bar.width)}
+                x={
                   isHorizontal
                     ? barPadding
                     : getPadding({
@@ -78,8 +86,8 @@ const BarStack = ({
                         padding: bar.x,
                         size: bar.width
                       })
-                )}
-                y={Math.ceil(
+                }
+                y={
                   isHorizontal
                     ? getPadding({
                         isNegativeValue,
@@ -87,7 +95,7 @@ const BarStack = ({
                         size: bar.height
                       })
                     : barPadding
-                )}
+                }
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -5,21 +5,20 @@ import { useAtom } from 'jotai';
 
 import { Skeleton } from '@mui/material';
 
-import { Data, LineChartProps } from '../LineChart/models';
+import { Data, LineChartProps } from '../Chart/models';
 import { Thresholds as ThresholdsModel } from '../common/models';
-import { useIntersection } from '../LineChart/useLineChartIntersection';
+import { useIntersection } from '../Chart/useChartIntersection';
 import { Line } from '../common/timeSeries/models';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import {
-  getLeftScale,
-  getRightScale,
   getUnits,
-  getXScaleBand
+  getXScaleBand,
+  getYScalePerUnit
 } 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 { margin } from '../Chart/common';
 import { Tooltip } from '../../components';
 import Thresholds from '../common/Thresholds/Thresholds';
 import { useDeepCompare } from '../../utils';
@@ -68,7 +67,13 @@ const ResponsiveBarChart = ({
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
-  const [, secondUnit] = getUnits(linesGraph);
+  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),
@@ -100,10 +105,10 @@ const ResponsiveBarChart = ({
     [timeSeries, graphWidth, isHorizontal, graphHeight]
   );
 
-  const leftScale = useMemo(
+  const yScalesPerUnit = useMemo(
     () =>
-      getLeftScale({
-        dataLines: linesGraph,
+      getYScalePerUnit({
+        dataLines: displayedLines,
         dataTimeSeries: timeSeries,
         isCenteredZero: axis?.isCenteredZero,
         isHorizontal,
@@ -111,46 +116,25 @@ const ResponsiveBarChart = ({
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: (isHorizontal ? graphHeight : graphWidth) - 35
+        valueGraphHeight:
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
       }),
     [
-      linesGraph,
+      displayedLines,
       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,
+      thresholds?.enabled,
       axis?.isCenteredZero,
       axis?.scale,
-      axis?.scaleLogarithmicBase,
-      graphWidth,
-      isHorizontal
+      axis?.scaleLogarithmicBase
     ]
   );
 
+  const leftScale = yScalesPerUnit[firstUnit];
+  const rightScale = yScalesPerUnit[secondUnit];
+
   useEffect(
     () => {
       setLinesGraph(lines);
@@ -160,11 +144,6 @@ const ResponsiveBarChart = ({
 
   const displayLegend = legend?.display ?? true;
 
-  const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
-    [linesGraph]
-  );
-
   const showGridLines = useMemo(
     () => isNil(axis?.showGridLines) || axis?.showGridLines,
     [axis?.showGridLines]
@@ -221,6 +200,7 @@ const ResponsiveBarChart = ({
       >
         <div className={classes.tooltipChildren}>
           <ChartSvgWrapper
+            allUnits={allUnits}
             axis={axis}
             base={baseAxis}
             displayedLines={displayedLines}
@@ -238,24 +218,19 @@ const ResponsiveBarChart = ({
             <>
               <BarGroup
                 barStyle={barStyle}
-                isCenteredZero={axis?.isCenteredZero}
                 isTooltipHidden={isTooltipHidden}
-                leftScale={leftScale}
                 lines={displayedLines}
                 orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                rightScale={rightScale}
-                secondUnit={secondUnit}
                 size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
                 timeSeries={timeSeries}
                 xScale={xScale}
+                yScalesPerUnit={yScalesPerUnit}
               />
               {thresholds?.enabled && (
                 <Thresholds
                   displayedLines={displayedLines}
                   hideTooltip={() => setTooltipData(null)}
                   isHorizontal={isHorizontal}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
                   showTooltip={({ tooltipData: thresholdLabel }) =>
                     setTooltipData({
                       thresholdLabel
@@ -264,6 +239,7 @@ const ResponsiveBarChart = ({
                   thresholdUnit={thresholdUnit}
                   thresholds={thresholds as ThresholdsModel}
                   width={isHorizontal ? graphWidth : graphHeight - margin.top}
+                  yScalesPerUnit={yScalesPerUnit}
                 />
               )}
             </>

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

@@ -20,7 +20,7 @@ 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 { Tooltip } from '../../Chart/models';
 
 import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
 

package/src/Graph/BarChart/useBarStack.ts

@@ -35,8 +35,8 @@ interface UseBarStackState {
 export const useBarStack = ({
   timeSeries,
   isHorizontal,
-  yScale,
   lines,
+  yScale,
   xScale
 }: UseBarStackProps): UseBarStackState => {
   const setTooltipData = useSetAtom(tooltipDataAtom);

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Point.tsx

@@ -5,7 +5,7 @@ interface Props {
   radius: number;
   timeTick: Date;
   xScale;
-  yPoint: number;
+  yPoint: number | null;
 }
 
 const Point = ({

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -0,0 +1,67 @@
+import { equals, pluck, uniq } from 'ramda';
+
+import {
+  getInvertedStackedLines,
+  getNotInvertedStackedLines,
+  getTimeSeriesForLines
+} from '../../../../common/timeSeries';
+import { LinesData } from '../models';
+
+interface StackedLinesState {
+  invertedStackedLinesData: Record<string, LinesData>;
+  stackedLinesData: Record<string, LinesData>;
+}
+
+const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
+  const regularStackedLines = getNotInvertedStackedLines(lines);
+  const regularStackedUnits = uniq(pluck('unit', regularStackedLines));
+  const regularStackedLinesTimeSeriesPerUnit = regularStackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = regularStackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+
+  const invertedStackedLines = getInvertedStackedLines(lines);
+  const invertedStackedUnits = uniq(pluck('unit', invertedStackedLines));
+  const invertedStackedLinesTimeSeriesPerUnit = invertedStackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = invertedStackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            invert: true,
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+
+  return {
+    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerUnit,
+    stackedLinesData: regularStackedLinesTimeSeriesPerUnit
+  };
+};
+
+export default useStackedLines;

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -15,20 +15,18 @@ interface Props {
   data: LineChartData;
   graphHeight: number;
   id: string;
-  leftScale: ScaleLinear<number, number>;
   orientation?: Array<PatternOrientation>;
-  rightScale: ScaleLinear<number, number>;
   xScale: ScaleLinear<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const ThresholdWithPatternLines = ({
   graphHeight,
   data,
   orientation = ['diagonal'],
-  leftScale,
-  rightScale,
   xScale,
   id,
+  yScalesPerUnit,
   curve
 }: Props): JSX.Element | null => {
   const theme = useTheme();
@@ -36,10 +34,9 @@ const ThresholdWithPatternLines = ({
   const { lines, timeSeries } = adjustGraphData(data);
 
   const result = useScaleThreshold({
-    leftScale,
     lines,
-    rightScale,
-    xScale
+    xScale,
+    yScalesPerUnit
   });
   if (!result) {
     return null;

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/index.tsx

@@ -24,19 +24,17 @@ interface Props extends WrapperThresholdLinesModel {
 const WrapperThresholdLines = ({
   areaThresholdLines,
   graphHeight,
-  leftScale,
   lines,
-  rightScale,
   timeSeries,
   xScale,
-  curve
+  curve,
+  yScalesPerUnit
 }: Props): JSX.Element | null => {
   const data = useScaleThreshold({
     areaThresholdLines,
-    leftScale,
     lines,
-    rightScale,
-    xScale
+    xScale,
+    yScalesPerUnit
   });
 
   if (!data) {
@@ -110,10 +108,9 @@ const WrapperThresholdLines = ({
           data: element,
           graphHeight,
           key: ind,
-          leftScale,
           orientation: dataPattern?.orientation,
-          rightScale,
-          xScale
+          xScale,
+          yScalesPerUnit
         }
       }));
     }