@centreon/ui 24.11.10 → 24.11.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.11.10",
+  "version": "24.11.11",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/BarChart/BarGroup.tsx

@@ -18,6 +18,12 @@ import { Line, TimeValue } from '../common/timeSeries/models';
 import BarStack from './BarStack';
 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 +33,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  scaleType?: 'linear' | 'logarithmic';
 }
 
 const BarGroup = ({
@@ -37,7 +44,8 @@ const BarGroup = ({
   xScale,
   yScalesPerUnit,
   isTooltipHidden,
-  barStyle
+  barStyle,
+  scaleType
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -142,6 +150,8 @@ const BarGroup = ({
     [isHorizontal, placeholderScale, xScale, metricScale]
   );
 
+  const neutralValue = useMemo(() => getNeutralValue(scaleType), [scaleType]);
+
   return (
     <BarComponent<TimeValue>
       color={colorScale}
@@ -185,6 +195,7 @@ const BarGroup = ({
                   lines={linesBar}
                   timeSeries={timeSeriesBar}
                   yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+                  neutralValue={neutralValue}
                 />
               ) : (
                 <BarStack
@@ -198,6 +209,7 @@ const BarGroup = ({
                   lines={[linesBar]}
                   timeSeries={timeSeriesBar}
                   yScale={yScalesPerUnit[linesBar.unit]}
+                  neutralValue={neutralValue}
                 />
               );
             })}
@@ -215,7 +227,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/ResponsiveBarChart.tsx

@@ -39,6 +39,7 @@ interface Props
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
   width: number;
+  skipIntersectionObserver?: boolean;
 }
 
 const ResponsiveBarChart = ({
@@ -226,6 +227,7 @@ const ResponsiveBarChart = ({
                 timeSeries={timeSeries}
                 xScale={xScale}
                 yScalesPerUnit={yScalesPerUnit}
+                scaleType={axis?.scale}
               />
               {thresholds?.enabled && (
                 <Thresholds

package/src/Graph/Chart/Chart.tsx

@@ -59,7 +59,7 @@ interface Props extends LineChartProps {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
 const filterLines = (lines: Array<Line>, displayThreshold: boolean): Array<Line> => {