@centreon/ui 24.10.12 → 24.10.13

package/src/Graph/BarChart/BarChart.tsx

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -12,12 +10,13 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
-import { ParentSize } from '../../ParentSize';
+import Loading from '../../LoadingSkeleton';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
 import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
 
+import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
 import { BarStyle } from './models';
 
@@ -38,7 +37,6 @@ export interface BarChartProps
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  skipIntersectionObserver?: boolean;
 }
 
 const BarChart = ({
@@ -58,11 +56,10 @@ const BarChart = ({
   barStyle = {
     opacity: 1,
     radius: 0.2
-  },
-  skipIntersectionObserver
+  }
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
-  const lineChartRef = useRef<HTMLDivElement | null>(null);
+  const { ref, width, height: responsiveHeight } = useResizeObserver();
 
   if (loading && !adjustedData) {
     return (
@@ -75,30 +72,26 @@ const BarChart = ({
 
   return (
     <Provider>
-      <Box
-        ref={lineChartRef}
-        sx={{ height: '100%', overflow: 'hidden', width: '100%' }}
-      >
-        <ParentSize>
-          {({ height: responsiveHeight, width }) => (
-            <ResponsiveBarChart
-              axis={axis}
-              barStyle={barStyle}
-              graphData={adjustedData}
-              graphRef={lineChartRef}
-              header={header}
-              height={height || responsiveHeight}
-              legend={legend}
-              limitLegend={limitLegend}
-              orientation={orientation}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
-              tooltip={tooltip}
-              width={width}
-              skipIntersectionObserver={skipIntersectionObserver}
-            />
-          )}
-        </ParentSize>
+      <Box ref={ref} sx={{ height: '100%', overflow: 'hidden', width: '100%' }}>
+        {!responsiveHeight ? (
+          <Loading height={height || '100%'} width={width} />
+        ) : (
+          <ResponsiveBarChart
+            axis={axis}
+            barStyle={barStyle}
+            graphData={adjustedData}
+            graphRef={ref}
+            header={header}
+            height={height || responsiveHeight}
+            legend={legend}
+            limitLegend={limitLegend}
+            orientation={orientation}
+            thresholdUnit={thresholdUnit}
+            thresholds={thresholds}
+            tooltip={tooltip}
+            width={width || 0}
+          />
+        )}
       </Box>
     </Provider>
   );

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,10 +1,8 @@
-import { memo, useMemo } from 'react';
-
-import { Group } from '@visx/group';
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
 import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
@@ -14,10 +12,15 @@ import {
   getUnits
 } from '../common/timeSeries';
 import { Line, TimeValue } from '../common/timeSeries/models';
-
-import BarStack from './BarStack';
+import MemoizedGroup from './MemoizedGroup';
 import { BarStyle } from './models';
 
+// Minimum value for logarithmic scale to avoid log(0)
+const minLogScaleValue = 0.001;
+
+const getNeutralValue = (scaleType?: 'linear' | 'logarithmic') =>
+  equals(scaleType, 'logarithmic') ? minLogScaleValue : 0;
+
 interface Props {
   barStyle: BarStyle;
   isTooltipHidden: boolean;
@@ -27,6 +30,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  scaleType?: 'linear' | 'logarithmic';
 }
 
 const BarGroup = ({
@@ -37,7 +41,8 @@ const BarGroup = ({
   xScale,
   yScalesPerUnit,
   isTooltipHidden,
-  barStyle
+  barStyle,
+  scaleType
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -142,6 +147,8 @@ const BarGroup = ({
     [isHorizontal, placeholderScale, xScale, metricScale]
   );
 
+  const neutralValue = useMemo(() => getNeutralValue(scaleType), [scaleType]);
+
   return (
     <BarComponent<TimeValue>
       color={colorScale}
@@ -151,58 +158,23 @@ const BarGroup = ({
       {...barComponentBaseProps}
     >
       {(barGroups) =>
-        barGroups.map((barGroup) => (
-          <Group
-            key={`bar-group-${barGroup.index}-${barGroup.x0}`}
-            left={barGroup.x0}
-            top={barGroup.y0}
-          >
-            {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
-                  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}
-                  lines={linesBar}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
-                />
-              ) : (
-                <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}
-                  lines={[linesBar]}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[linesBar.unit]}
-                />
-              );
-            })}
-          </Group>
-        ))
+        barGroups.map((barGroup, index) => {
+          return (
+            <MemoizedGroup
+              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+              barGroup={barGroup}
+              barStyle={barStyle}
+              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              notStackedTimeSeries={notStackedTimeSeries}
+              notStackedLines={notStackedLines}
+              isTooltipHidden={isTooltipHidden}
+              isHorizontal={isHorizontal}
+              neutralValue={neutralValue}
+              yScalesPerUnit={yScalesPerUnit}
+              barIndex={index}
+            />
+          );
+        })
       }
     </BarComponent>
   );
@@ -215,7 +187,8 @@ const propsToMemoize = [
   'lines',
   'secondUnit',
   'isCenteredZero',
-  'barStyle'
+  'barStyle',
+  'scaleType'
 ];
 
 export default memo(BarGroup, (prevProps, nextProps) => {

package/src/Graph/BarChart/BarStack.tsx

@@ -1,9 +1,10 @@
 import { memo } from 'react';
 
-import { scaleBand } from '@visx/scale';
+import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
 import { dec, equals, gt, pick } from 'ramda';
 
+import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
 import { BarStyle } from './models';
 import { UseBarStackProps, useBarStack } from './useBarStack';
 
@@ -19,6 +20,7 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barStyle: BarStyle;
   barWidth: number;
   isTooltipHidden: boolean;
+  neutralValue: number;
 }
 
 const getPadding = ({ padding, size, isNegativeValue }): number => {
@@ -29,6 +31,47 @@ 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,
@@ -38,7 +81,8 @@ const BarStack = ({
   barPadding,
   barIndex,
   isTooltipHidden,
-  barStyle = { opacity: 1, radius: 0.2 }
+  barStyle = { opacity: 1, radius: 0.2 },
+  neutralValue
 }: Props): JSX.Element => {
   const {
     BarStackComponent,
@@ -73,7 +117,21 @@ const BarStack = ({
                 {...barRoundedProps}
                 data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
                 fill={bar.color}
-                height={isHorizontal ? Math.abs(bar.height) : barWidth}
+                height={getFirstBarHeight({
+                  bar,
+                  barWidth,
+                  y: isHorizontal
+                    ? getPadding({
+                        isNegativeValue,
+                        padding: bar.y,
+                        size: bar.height
+                      })
+                    : barPadding,
+                  isFirstBar: shouldApplyRadiusOnBottom,
+                  isHorizontal,
+                  yScale,
+                  neutralValue
+                })}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
                 opacity={barStyle.opacity ?? 1}
                 radius={barWidth * barStyle.radius}
@@ -87,15 +145,7 @@ const BarStack = ({
                         size: bar.width
                       })
                 }
-                y={
-                  isHorizontal
-                    ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
-                    : barPadding
-                }
+                y={isHorizontal ? bar.y : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
@@ -122,7 +172,8 @@ const propsToMemoize = [
   'barPadding',
   'barIndex',
   'isTooltipHidden',
-  'barStyle'
+  'barStyle',
+  'neutralValue'
 ];
 
 export default memo(BarStack, (prevProps, nextProps) => {

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -0,0 +1,123 @@
+import { Group } from '@visx/group';
+import { BarGroup } from '@visx/shape/lib/types';
+import { ScaleLinear } from 'd3-scale';
+import { equals, omit } from 'ramda';
+import { memo } from 'react';
+import { Line, TimeValue } from '../common/timeSeries/models';
+import BarStack from './BarStack';
+import { BarStyle } from './models';
+
+interface Props {
+  neutralValue: number;
+  isTooltipHidden: boolean;
+  barStyle: BarStyle;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  stackedLinesTimeSeriesPerUnit: Record<
+    string,
+    { lines: Array<Line>; timeSeries: Array<TimeValue> }
+  >;
+  notStackedLines: Array<Line>;
+  notStackedTimeSeries: Array<TimeValue>;
+  isHorizontal: boolean;
+  barGroup: BarGroup<'id'>;
+  barIndex: number;
+}
+
+const MemoizedGroup = ({
+  barGroup,
+  stackedLinesTimeSeriesPerUnit,
+  notStackedLines,
+  notStackedTimeSeries,
+  isHorizontal,
+  barStyle,
+  isTooltipHidden,
+  neutralValue,
+  yScalesPerUnit,
+  barIndex
+}: Props): JSX.Element | null => {
+  const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
+    if (key.startsWith('stacked-')) {
+      const timeValueBar =
+        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
+          barIndex
+        ];
+
+      return Object.values(omit(['timeTick'], timeValueBar)).every(
+        (value) => !value
+      );
+    }
+
+    return !value;
+  });
+
+  if (hasEmptyValues) {
+    return null;
+  }
+
+  return (
+    <Group left={barGroup.x0} top={barGroup.y0}>
+      {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
+            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}
+            lines={linesBar as Array<Line>}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            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}
+            lines={[linesBar as Line]}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            neutralValue={neutralValue}
+          />
+        );
+      })}
+    </Group>
+  );
+};
+
+export default memo(
+  MemoizedGroup,
+  (prevProps, nextProps) =>
+    equals(prevProps.barGroup, nextProps.barGroup) &&
+    equals(
+      prevProps.stackedLinesTimeSeriesPerUnit,
+      nextProps.stackedLinesTimeSeriesPerUnit
+    ) &&
+    equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
+    equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&
+    equals(prevProps.isHorizontal, nextProps.isHorizontal) &&
+    equals(prevProps.barStyle, nextProps.barStyle) &&
+    equals(prevProps.isTooltipHidden, nextProps.isTooltipHidden) &&
+    equals(prevProps.neutralValue, nextProps.neutralValue) &&
+    equals(prevProps.barIndex, nextProps.barIndex)
+);

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -13,6 +13,7 @@ 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 Thresholds from '../common/Thresholds/Thresholds';
 import { Thresholds as ThresholdsModel } from '../common/models';
 import {
@@ -22,7 +23,6 @@ import {
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
-
 import BarGroup from './BarGroup';
 import BarChartTooltip from './Tooltip/BarChartTooltip';
 import { tooltipDataAtom } from './atoms';
@@ -39,6 +39,7 @@ interface Props
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
   width: number;
+  skipIntersectionObserver?: boolean;
 }
 
 const ResponsiveBarChart = ({
@@ -54,10 +55,9 @@ const ResponsiveBarChart = ({
   limitLegend,
   orientation,
   tooltip,
-  barStyle,
-  skipIntersectionObserver
+  barStyle
 }: Props): JSX.Element => {
-  const { title, timeSeries, baseAxis, lines } = graphData;
+  const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
 
@@ -69,19 +69,30 @@ const ResponsiveBarChart = ({
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
+    () => (linesGraph || []).filter(({ display }) => display),
     [linesGraph]
   );
 
   const [firstUnit, secondUnit] = getUnits(displayedLines);
   const allUnits = getUnits(lines);
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      graphData,
+      thresholds,
+      thresholdUnit,
+      axis,
+      firstUnit,
+      secondUnit
+    });
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
     legendPlacement: legend?.placement,
-    width
+    width,
+    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
   });
 
   const thresholdValues = flatten([
@@ -150,7 +161,7 @@ const ResponsiveBarChart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport && !skipIntersectionObserver) {
+  if (!isInViewport) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}
@@ -215,6 +226,8 @@ const ResponsiveBarChart = ({
             svgRef={graphSvgRef}
             timeSeries={timeSeries}
             xScale={xScale}
+            maxAxisCharacters={maxLeftAxisCharacters}
+            hasSecondUnit={Boolean(secondUnit)}
           >
             <>
               <BarGroup
@@ -226,6 +239,7 @@ const ResponsiveBarChart = ({
                 timeSeries={timeSeries}
                 xScale={xScale}
                 yScalesPerUnit={yScalesPerUnit}
+                scaleType={axis?.scale}
               />
               {thresholds?.enabled && (
                 <Thresholds