@centreon/ui 24.8.2 → 24.8.3

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
         }
       }));
     }

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/models.ts

@@ -59,10 +59,9 @@ export interface LinesThreshold {
 
 export interface WrapperThresholdLinesModel {
   areaThresholdLines?: GlobalAreaLines['areaThresholdLines'];
-  leftScale: ScaleLinear<number, number>;
   lines: Array<Line>;
-  rightScale: ScaleLinear<number, number>;
   xScale: ScaleLinear<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 export interface ScaleVariationThreshold {

package/src/Graph/{LineChart → Chart}/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -2,7 +2,7 @@ import { equals, isNil, prop } from 'ramda';
 
 import { ThresholdType, VariationThreshold } from '../../../models';
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { getTime, getUnits, getYScale } from '../../../../common/timeSeries';
+import { getTime, getYScale } from '../../../../common/timeSeries';
 import { displayArea } from '../../../helpers/index';
 
 import { envelopeVariationFormula } from './helpers';
@@ -26,8 +26,7 @@ interface Result extends Partial<ScaleVariationThreshold> {
 const useScaleThreshold = ({
   lines,
   areaThresholdLines,
-  leftScale,
-  rightScale,
+  yScalesPerUnit,
   xScale
 }: WrapperThresholdLinesModel): Result | null => {
   const getLinesThreshold = (): LinesThreshold | null => {
@@ -50,8 +49,6 @@ const useScaleThreshold = ({
 
   const { lineUpper, lineLower, lineOrigin } = linesThreshold;
 
-  const [, secondUnit, thirdUnit] = getUnits(lines);
-
   const {
     metric_id: metricY1,
     unit: unitY1,
@@ -73,30 +70,21 @@ const useScaleThreshold = ({
   } = lineOrigin;
 
   const y1Scale = getYScale({
-    hasMoreThanTwoUnits: !isNil(thirdUnit),
     invert: invertY1,
-    leftScale,
-    rightScale,
-    secondUnit,
-    unit: unitY1
+    unit: unitY1,
+    yScalesPerUnit
   });
 
   const y0Scale = getYScale({
-    hasMoreThanTwoUnits: !isNil(thirdUnit),
     invert: invertY0,
-    leftScale,
-    rightScale,
-    secondUnit,
-    unit: unitY0
+    unit: unitY0,
+    yScalesPerUnit
   });
 
   const yScale = getYScale({
-    hasMoreThanTwoUnits: !isNil(thirdUnit),
     invert: invertYOrigin,
-    leftScale,
-    rightScale,
-    secondUnit,
-    unit: unitYOrigin
+    unit: unitYOrigin,
+    yScalesPerUnit
   });
 
   const getX = (timeValue: TimeValue): number => {