@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/BarChart/BarStack.tsx

@@ -1,13 +1,10 @@
-import { ReactElement, memo } from 'react';
-
-import { ScaleType, scaleBand } from '@visx/scale';
-import { BarRounded } from '@visx/shape';
+import { scaleBand } from '@visx/scale';
 import { dec, equals, gt, pick } from 'ramda';
+import { memo, type ReactElement } from 'react';
 
-import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
-import { getStyle } from '../common/utils';
-import { BarStyle } from './models';
-import { UseBarStackProps, useBarStack } from './useBarStack';
+import Bar from './Bar';
+import type { BarStyle } from './models';
+import { type UseBarStackProps, useBarStack } from './useBarStack';
 
 const xScale = scaleBand<number>({
   domain: [0, 0],
@@ -33,47 +30,6 @@ const getPadding = ({ padding, size, isNegativeValue }): number => {
   return padding + size;
 };
 
-interface GetFirstBarHeightProps {
-  bar: Omit<BarGroupBar<StackKey>, 'key' | 'value'> & {
-    bar: SeriesPoint<unknown>;
-    key: StackKey;
-  };
-  isHorizontal: boolean;
-  barWidth: number;
-  y: number;
-  isFirstBar: boolean;
-  yScale: ScaleType;
-  neutralValue: number;
-}
-
-const getFirstBarHeight = ({
-  bar,
-  isHorizontal,
-  barWidth,
-  y,
-  isFirstBar,
-  yScale,
-  neutralValue
-}: GetFirstBarHeightProps): number => {
-  if (!isFirstBar || !isHorizontal) {
-    return isHorizontal ? Math.abs(bar.height) : barWidth;
-  }
-
-  if (equals(bar.height, 0)) {
-    return 0;
-  }
-
-  if (isHorizontal && bar.height < 0) {
-    return bar.height;
-  }
-
-  if (isHorizontal) {
-    return Math.abs(bar.width) - (y - yScale(neutralValue));
-  }
-
-  return barWidth;
-};
-
 const BarStack = ({
   timeSeries,
   isHorizontal,
@@ -109,69 +65,40 @@ const BarStack = ({
             const shouldApplyRadiusOnBottom = equals(index, 0);
             const shouldApplyRadiusOnTop = equals(index, dec(barStacks.length));
             const isNegativeValue = gt(0, bar.bar[1]);
+            const shouldRetrievePadding =
+              isNegativeValue && isStacked && !shouldApplyRadiusOnBottom;
 
             const barRoundedProps = {
               [isHorizontal ? 'bottom' : 'left']: shouldApplyRadiusOnBottom,
               [isHorizontal ? 'top' : 'right']: shouldApplyRadiusOnTop
             };
 
-            const style = getStyle({
-              style: barStyle,
-              metricId: Number(bar.key)
-            }) as BarStyle;
-
-            const barY =
-              isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
-                ? getPadding({
-                    isNegativeValue,
-                    padding: bar.y,
-                    size: bar.height
-                  })
-                : bar.y;
+            const barY = shouldRetrievePadding
+              ? getPadding({
+                  isNegativeValue,
+                  padding: bar.y,
+                  size: bar.height
+                })
+              : bar.y;
 
             return (
-              <BarRounded
-                {...barRoundedProps}
-                data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
-                fill={bar.color}
-                height={getFirstBarHeight({
-                  bar,
-                  barWidth,
-                  y: isHorizontal
-                    ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
-                    : barPadding,
-                  isFirstBar: shouldApplyRadiusOnBottom,
-                  isHorizontal,
-                  yScale,
-                  neutralValue
-                })}
+              <Bar
+                bar={bar}
+                barIndex={barIndex}
+                barPadding={barPadding}
+                barRoundedProps={barRoundedProps}
+                barStyle={barStyle}
+                barWidth={barWidth}
+                barY={barY}
+                exitBar={exitBar}
+                hoverBar={hoverBar}
+                isHorizontal={isHorizontal}
+                isNegativeValue={isNegativeValue}
+                isTooltipHidden={isTooltipHidden}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={style?.opacity || 1}
-                radius={style?.radius ? barWidth * style.radius : 0}
-                width={isHorizontal ? barWidth : Math.abs(bar.width)}
-                x={
-                  isHorizontal
-                    ? barPadding
-                    : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
-                }
-                y={isHorizontal ? barY : barPadding}
-                onMouseEnter={
-                  isTooltipHidden
-                    ? undefined
-                    : hoverBar({
-                        barIndex,
-                        highlightedMetric: Number(bar.key)
-                      })
-                }
-                onMouseLeave={isTooltipHidden ? undefined : exitBar}
+                neutralValue={neutralValue}
+                shouldApplyRadiusOnBottom={shouldApplyRadiusOnBottom}
+                yScale={yScale}
               />
             );
           })

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -1,11 +1,12 @@
 import { Group } from '@visx/group';
-import { BarGroup } from '@visx/shape/lib/types';
-import { ScaleLinear } from 'd3-scale';
+import type { BarGroup } from '@visx/shape/lib/types';
+import type { ScaleLinear } from 'd3-scale';
 import { equals, omit } from 'ramda';
 import { memo } from 'react';
-import { Line, TimeValue } from '../common/timeSeries/models';
+
+import type { Line, TimeValue } from '../common/timeSeries/models';
 import BarStack from './BarStack';
-import { BarStyle } from './models';
+import type { BarStyle } from './models';
 
 interface Props {
   neutralValue: number;
@@ -78,32 +79,32 @@ const MemoizedGroup = ({
 
         return isStackedBar ? (
           <BarStack
-            isStacked
-            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             barIndex={barGroup.index}
             barPadding={isHorizontal ? bar.x : bar.y}
             barStyle={barStyle}
             barWidth={isHorizontal ? bar.width : bar.height}
             isHorizontal={isHorizontal}
+            isStacked
             isTooltipHidden={isTooltipHidden}
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             lines={linesBar as Array<Line>}
+            neutralValue={neutralValue}
             timeSeries={timeSeriesBar}
             yScale={yScale}
-            neutralValue={neutralValue}
           />
         ) : (
           <BarStack
-            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             barIndex={barGroup.index}
             barPadding={isHorizontal ? bar.x : bar.y}
             barStyle={barStyle}
             barWidth={isHorizontal ? bar.width : bar.height}
             isHorizontal={isHorizontal}
             isTooltipHidden={isTooltipHidden}
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
             lines={[linesBar as Line]}
+            neutralValue={neutralValue}
             timeSeries={timeSeriesBar}
             yScale={yScale}
-            neutralValue={neutralValue}
           />
         );
       })}

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,44 +1,43 @@
+import { Skeleton } from '@mui/material';
+
+import { useAtom, useAtomValue } from 'jotai';
+import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
 import {
-  MutableRefObject,
-  ReactElement,
+  type MutableRefObject,
+  type ReactElement,
   useEffect,
   useMemo,
   useRef,
   useState
 } from 'react';
 
-import { useAtom, useAtomValue } from 'jotai';
-import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
-
-import { Skeleton } from '@mui/material';
-
 import { Tooltip } from '../../components';
 import { useDeepCompare } from '../../utils';
+import { margin } from '../Chart/common';
 import InteractionWithGraph from '../Chart/InteractiveComponents';
 import { applyingZoomAtomAtom } from '../Chart/InteractiveComponents/ZoomPreview/zoomPreviewAtoms';
-import { margin } from '../Chart/common';
-import { Data, LineChartProps } from '../Chart/models';
+import type { Data, LineChartProps } from '../Chart/models';
 import { useIntersection } from '../Chart/useChartIntersection';
 import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import { useComputeYAxisMaxCharacters } from '../common/BaseChart/useComputeYAxisMaxCharacters';
+import type { Thresholds as ThresholdsModel } from '../common/models';
 import Thresholds from '../common/Thresholds/Thresholds';
-import { Thresholds as ThresholdsModel } from '../common/models';
 import {
   getUnits,
   getXScale,
   getXScaleBand,
   getYScalePerUnit
 } from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
+import type { Line } from '../common/timeSeries/models';
 import { useMarginTop } from '../common/useMarginTop';
 import { useTooltipStyles } from '../common/useTooltipStyles';
 import { computPixelsToShiftMouse } from '../common/utils';
+import { tooltipDataAtom } from './atoms';
 import BarGroup from './BarGroup';
+import type { BarStyle } from './models';
 import BarChartTooltip from './Tooltip/BarChartTooltip';
-import { tooltipDataAtom } from './atoms';
-import { BarStyle } from './models';
 
 interface Props
   extends Pick<
@@ -114,12 +113,12 @@ const ResponsiveBarChart = ({
 
   const { maxLeftAxisCharacters, maxRightAxisCharacters } =
     useComputeYAxisMaxCharacters({
-      graphData,
-      thresholds,
-      thresholdUnit,
       axis,
       firstUnit,
-      secondUnit
+      graphData,
+      secondUnit,
+      thresholds,
+      thresholdUnit
     });
 
   const { legendRef, graphWidth, graphHeight, titleRef } =
@@ -128,10 +127,10 @@ const ResponsiveBarChart = ({
       height,
       legendDisplay: legend?.display,
       legendPlacement: legend?.placement,
-      width,
       maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
       title,
-      units: allUnits
+      units: allUnits,
+      width
     });
 
   const thresholdValues = flatten([
@@ -168,20 +167,20 @@ const ResponsiveBarChart = ({
   const yScalesPerUnit = useMemo(
     () =>
       getYScalePerUnit({
+        boundariesUnit,
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        isBarChart: true,
         isCenteredZero: axis?.isCenteredZero,
         isHorizontal,
+        max,
+        min,
         scale: axis?.scale,
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
+        thresholdUnit,
         valueGraphHeight:
-          (isHorizontal ? graphHeight : graphWidth) - margin.bottom,
-        min,
-        max,
-        isBarChart: true,
-        boundariesUnit
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
       }),
     [
       displayedLines,
@@ -192,7 +191,12 @@ const ResponsiveBarChart = ({
       thresholds?.enabled,
       axis?.isCenteredZero,
       axis?.scale,
-      axis?.scaleLogarithmicBase
+      axis?.scaleLogarithmicBase,
+      boundariesUnit,
+      isHorizontal,
+      max,
+      min,
+      thresholdUnit
     ]
   );
 
@@ -231,6 +235,7 @@ const ResponsiveBarChart = ({
   return (
     <BaseChart
       base={baseAxis}
+      graphHeight={graphHeight}
       graphWidth={graphWidth}
       header={header}
       height={height}
@@ -249,7 +254,6 @@ const ResponsiveBarChart = ({
       setLines={setLinesGraph}
       title={title}
       titleRef={titleRef}
-      graphHeight={graphHeight}
     >
       <Tooltip
         classes={{
@@ -278,110 +282,100 @@ const ResponsiveBarChart = ({
             graphHeight={graphHeight}
             graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
             gridLinesType={axis?.gridLinesType}
+            hasSecondUnit={Boolean(secondUnit)}
             leftScale={leftScale}
+            maxAxisCharacters={maxLeftAxisCharacters}
             orientation={isHorizontal ? 'horizontal' : 'vertical'}
             rightScale={rightScale}
             showGridLines={showGridLines}
             svgRef={graphSvgRef}
             timeSeries={timeSeries}
-            xScale={xScale}
-            maxAxisCharacters={maxLeftAxisCharacters}
-            hasSecondUnit={Boolean(secondUnit)}
             title={title}
+            xScale={xScale}
           >
-            <>
-              {isApplyingZoom && (
-                <>
-                  <BarGroup
-                    barStyle={barStyle}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={displayedLines}
-                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                    size={
-                      isHorizontal ? graphHeight - marginTop - 5 : graphWidth
+            {isApplyingZoom && (
+              <>
+                <BarGroup
+                  barStyle={barStyle}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={displayedLines}
+                  orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                  scaleType={axis?.scale}
+                  size={isHorizontal ? graphHeight - marginTop - 5 : graphWidth}
+                  timeSeries={timeSeries}
+                  xScale={xScale}
+                  yScalesPerUnit={yScalesPerUnit}
+                />
+                {thresholds?.enabled && (
+                  <Thresholds
+                    displayedLines={displayedLines}
+                    hideTooltip={() => setTooltipData(null)}
+                    isHorizontal={isHorizontal}
+                    showTooltip={({ tooltipData: thresholdLabel }) =>
+                      setTooltipData({
+                        thresholdLabel
+                      })
                     }
-                    timeSeries={timeSeries}
-                    xScale={xScale}
+                    thresholds={thresholds as ThresholdsModel}
+                    thresholdUnit={thresholdUnit}
+                    width={isHorizontal ? graphWidth : graphHeight - marginTop}
                     yScalesPerUnit={yScalesPerUnit}
-                    scaleType={axis?.scale}
                   />
-                  {thresholds?.enabled && (
-                    <Thresholds
-                      displayedLines={displayedLines}
-                      hideTooltip={() => setTooltipData(null)}
-                      isHorizontal={isHorizontal}
-                      showTooltip={({ tooltipData: thresholdLabel }) =>
-                        setTooltipData({
-                          thresholdLabel
-                        })
-                      }
-                      thresholdUnit={thresholdUnit}
-                      thresholds={thresholds as ThresholdsModel}
-                      width={
-                        isHorizontal ? graphWidth : graphHeight - marginTop
-                      }
-                      yScalesPerUnit={yScalesPerUnit}
-                    />
-                  )}
-                </>
-              )}
-              {isHorizontal && (
-                <InteractionWithGraph
-                  additionalZoomMargin={pixelsToShift}
-                  maxLeftAxisCharacters={maxLeftAxisCharacters}
-                  commonData={{
-                    graphHeight,
-                    graphSvgRef,
-                    graphWidth,
-                    lines,
-                    xScale: xScaleLinear,
-                    timeSeries,
-                    yScalesPerUnit
-                  }}
-                  annotationData={{ ...annotationEvent }}
-                  zoomData={{ ...zoomPreview }}
-                  timeShiftZonesData={{
-                    ...timeShiftZones,
-                    graphInterval: { start, end }
-                  }}
+                )}
+              </>
+            )}
+            {isHorizontal && (
+              <InteractionWithGraph
+                additionalZoomMargin={pixelsToShift}
+                annotationData={{ ...annotationEvent }}
+                commonData={{
+                  graphHeight,
+                  graphSvgRef,
+                  graphWidth,
+                  lines,
+                  timeSeries,
+                  xScale: xScaleLinear,
+                  yScalesPerUnit
+                }}
+                maxLeftAxisCharacters={maxLeftAxisCharacters}
+                timeShiftZonesData={{
+                  ...timeShiftZones,
+                  graphInterval: { end, start }
+                }}
+                zoomData={{ ...zoomPreview }}
+              />
+            )}
+            {!isApplyingZoom && (
+              <>
+                <BarGroup
+                  barStyle={barStyle}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={displayedLines}
+                  orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                  scaleType={axis?.scale}
+                  size={isHorizontal ? graphHeight - marginTop - 5 : graphWidth}
+                  timeSeries={timeSeries}
+                  xScale={xScale}
+                  yScalesPerUnit={yScalesPerUnit}
                 />
-              )}
-              {!isApplyingZoom && (
-                <>
-                  <BarGroup
-                    barStyle={barStyle}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={displayedLines}
-                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                    size={
-                      isHorizontal ? graphHeight - marginTop - 5 : graphWidth
+                {thresholds?.enabled && (
+                  <Thresholds
+                    displayedLines={displayedLines}
+                    hideTooltip={() => setTooltipData(null)}
+                    isHorizontal={isHorizontal}
+                    showTooltip={({ tooltipData: thresholdLabel }) =>
+                      setTooltipData({
+                        thresholdLabel
+                      })
                     }
-                    timeSeries={timeSeries}
-                    xScale={xScale}
+                    thresholds={thresholds as ThresholdsModel}
+                    thresholdUnit={thresholdUnit}
+                    width={isHorizontal ? graphWidth : graphHeight - marginTop}
                     yScalesPerUnit={yScalesPerUnit}
-                    scaleType={axis?.scale}
                   />
-                  {thresholds?.enabled && (
-                    <Thresholds
-                      displayedLines={displayedLines}
-                      hideTooltip={() => setTooltipData(null)}
-                      isHorizontal={isHorizontal}
-                      showTooltip={({ tooltipData: thresholdLabel }) =>
-                        setTooltipData({
-                          thresholdLabel
-                        })
-                      }
-                      thresholdUnit={thresholdUnit}
-                      thresholds={thresholds as ThresholdsModel}
-                      width={
-                        isHorizontal ? graphWidth : graphHeight - marginTop
-                      }
-                      yScalesPerUnit={yScalesPerUnit}
-                    />
-                  )}
-                </>
-              )}
-            </>
+                )}
+              </>
+            )}
           </ChartSvgWrapper>
         </div>
       </Tooltip>

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

@@ -1,7 +1,7 @@
+import { Box, Typography } from '@mui/material';
+
 import { useAtomValue } from 'jotai';
 import {
-  path,
-  T,
   always,
   cond,
   equals,
@@ -9,19 +9,18 @@ import {
   gt,
   has,
   isNil,
+  path,
   prop,
   reverse,
-  sortBy
+  sortBy,
+  T
 } from 'ramda';
 
-import { Box, Typography } from '@mui/material';
-
 import { useLocaleDateTimeFormat } from '../../../utils';
-import { Tooltip } from '../../Chart/models';
+import type { Tooltip } from '../../Chart/models';
 import { formatMetricValueWithUnit } from '../../common/timeSeries';
-import { TimeValue } from '../../common/timeSeries/models';
+import type { TimeValue } from '../../common/timeSeries/models';
 import { tooltipDataAtom } from '../atoms';
-
 import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
 
 interface Props extends Partial<Pick<Tooltip, 'mode' | 'sortOrder'>> {

package/src/Graph/BarChart/atoms.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
 
-import { TooltipData } from './models';
+import type { TooltipData } from './models';
 
 export const tooltipDataAtom = atom<TooltipData | null>(null);

package/src/Graph/BarChart/models.ts

@@ -1,4 +1,4 @@
-import { Line } from '../common/timeSeries/models';
+import type { Line } from '../common/timeSeries/models';
 
 export type TooltipData =
   | {

package/src/Graph/BarChart/useBarStack.ts

@@ -1,13 +1,11 @@
-import { useCallback, useMemo } from 'react';
-
 import { scaleOrdinal } from '@visx/scale';
 import { BarStack, BarStackHorizontal } from '@visx/shape';
 import { useSetAtom } from 'jotai';
 import { equals, keys, omit } from 'ramda';
+import { useCallback, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
-import { Line, TimeValue } from '../common/timeSeries/models';
-
+import type { Line, TimeValue } from '../common/timeSeries/models';
 import { tooltipDataAtom } from './atoms';
 
 interface HoverBarProps {
@@ -67,7 +65,7 @@ export const useBarStack = ({
         domain: lineKeys,
         range: colors
       }),
-    [...lineKeys, ...colors]
+    [...lineKeys, ...colors, colors, lineKeys]
   );
 
   const commonBarStackProps = isHorizontal
@@ -96,12 +94,12 @@ export const useBarStack = ({
           index: barIndex
         });
       },
-    [lines, timeSeries]
+    [lines, timeSeries, setTooltipData]
   );
 
   const exitBar = useCallback((): void => {
     setTooltipData(null);
-  }, []);
+  }, [setTooltipData]);
 
   return {
     BarStackComponent,

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

@@ -1,7 +1,7 @@
 import numeral from 'numeral';
 
 import BarStack from './BarStack';
-import { BarStackProps, BarType } from './models';
+import type { BarStackProps, BarType } from './models';
 
 const defaultData = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -197,10 +197,10 @@ describe('Bar stack', () => {
 
   it('displays the bars within a small display', () => {
     initialize({
-      width: '120px',
+      displayLegend: true,
       height: '89px',
       title: 'host',
-      displayLegend: true
+      width: '120px'
     });
 
     cy.get('.visx-bar-rounded')