@centreon/ui 25.11.9 → 26.1.0

package/package.json

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

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

@@ -87,6 +87,61 @@ const checkWidth = (orientation): void => {
 };
 
 describe('Bar chart', () => {
+  it('displays a tooltip when a single bar is hovered', () => {
+    initialize({
+      orientation: 'horizontal'
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('7.47 KB').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a tooltip when a stacked bar is hovered', () => {
+    initialize({
+      data: dataPingServiceStacked,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'ascending'
+      }
+    });
+
+    checkWidth('horizontal');
+    cy.contains('0 ms').should('be.visible');
+    cy.contains('20').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Average Time').should(
+      'be.visible'
+    );
+    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
+      'be.visible'
+    );
+    cy.contains('0.05 ms').should('be.visible');
+    cy.contains('0.02 ms').should('be.visible');
+    cy.contains('0.11 ms').should('be.visible');
+
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
+  });
+
   ['horizontal', 'vertical'].forEach((orientation) => {
     it(`displays the bar chart ${orientation}ly`, () => {
       initialize({ orientation });
@@ -186,27 +241,6 @@ describe('Bar chart', () => {
     });
   });
 
-  it('displays a tooltip when a single bar is hovered', () => {
-    initialize({
-      orientation: 'horizontal'
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('7.47 KB').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('does not display a tooltip when a bar is hovered and a props is set', () => {
     initialize({
       data: dataPingServiceStacked,
@@ -231,68 +265,6 @@ describe('Bar chart', () => {
     cy.makeSnapshot();
   });
 
-  it('displays a tooltip when a stacked bar is hovered', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'all',
-        sortOrder: 'ascending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('Centreon-Server: Round-Trip Minimum Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-    cy.contains('0.02 ms').should('be.visible');
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-  });
-
-  it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {
-    initialize({
-      data: dataPingServiceStacked,
-      orientation: 'horizontal',
-      tooltip: {
-        mode: 'single',
-        sortOrder: 'descending'
-      }
-    });
-
-    checkWidth('horizontal');
-    cy.contains('0 ms').should('be.visible');
-    cy.contains('20').should('be.visible');
-    cy.contains(':40 AM').should('be.visible');
-
-    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
-
-    cy.contains('06/19/2024').should('be.visible');
-    cy.contains('Centreon-Server: Round-Trip Average Time').should(
-      'be.visible'
-    );
-    cy.contains('0.05 ms').should('be.visible');
-
-    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
   it('displays the bottom axis correctly when data starts from several days ago', () => {
     initialize({
       data: dataLastWeek,

package/src/Graph/BarChart/BarChart.tsx

@@ -101,6 +101,10 @@ const BarChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <div />;
+  }
+
   return (
     <Provider>
       <Box ref={ref} sx={{ height: '100%', overflow: 'hidden', width: '100%' }}>

package/src/Graph/BarChart/BarStack.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, ReactElement } from 'react';
 
 import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
@@ -22,6 +22,7 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   barWidth: number;
   isTooltipHidden: boolean;
   neutralValue: number;
+  isStacked?: boolean;
 }
 
 const getPadding = ({ padding, size, isNegativeValue }): number => {
@@ -83,8 +84,9 @@ const BarStack = ({
   barIndex,
   isTooltipHidden,
   barStyle = { opacity: 1, radius: 0.2 },
-  neutralValue
-}: Props): JSX.Element => {
+  neutralValue,
+  isStacked
+}: Props): ReactElement => {
   const {
     BarStackComponent,
     commonBarStackProps,
@@ -118,6 +120,15 @@ const BarStack = ({
               metricId: Number(bar.key)
             }) as BarStyle;
 
+            const barY =
+              isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
+                ? getPadding({
+                  isNegativeValue,
+                  padding: bar.y,
+                  size: bar.height
+                })
+                : bar.y;
+
             return (
               <BarRounded
                 {...barRoundedProps}
@@ -128,10 +139,10 @@ const BarStack = ({
                   barWidth,
                   y: isHorizontal
                     ? getPadding({
-                        isNegativeValue,
-                        padding: bar.y,
-                        size: bar.height
-                      })
+                      isNegativeValue,
+                      padding: bar.y,
+                      size: bar.height
+                    })
                     : barPadding,
                   isFirstBar: shouldApplyRadiusOnBottom,
                   isHorizontal,
@@ -146,19 +157,19 @@ const BarStack = ({
                   isHorizontal
                     ? barPadding
                     : getPadding({
-                        isNegativeValue,
-                        padding: bar.x,
-                        size: bar.width
-                      })
+                      isNegativeValue,
+                      padding: bar.x,
+                      size: bar.width
+                    })
                 }
-                y={isHorizontal ? bar.y : barPadding}
+                y={isHorizontal ? barY : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
                     : hoverBar({
-                        barIndex,
-                        highlightedMetric: Number(bar.key)
-                      })
+                      barIndex,
+                      highlightedMetric: Number(bar.key)
+                    })
                 }
                 onMouseLeave={isTooltipHidden ? undefined : exitBar}
               />

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -59,17 +59,18 @@ const MemoizedGroup = ({
         const linesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
-              equals(metric_id, Number(bar.key))
-            ) as Line);
+            equals(metric_id, Number(bar.key))
+          ) as Line);
         const timeSeriesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
-              timeTick: timeSerie.timeTick,
-              [bar.key]: timeSerie[Number(bar.key)]
-            }));
+            timeTick: timeSerie.timeTick,
+            [bar.key]: timeSerie[Number(bar.key)]
+          }));
 
         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}
@@ -79,7 +80,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.split('-')[1] || undefined]}
+            yScale={yScalesPerUnit[bar.key.split('-')[1] ?? undefined]}
             neutralValue={neutralValue}
           />
         ) : (
@@ -93,7 +94,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={[linesBar as Line]}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            yScale={yScalesPerUnit[(linesBar as Line).unit ?? undefined]}
             neutralValue={neutralValue}
           />
         );

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -27,6 +27,7 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
 import { LineStyle } from '../../../models';
 import Point from '../Point';
+import { ReactElement } from 'react';
 
 interface Props {
   areaTransparency?: number;
@@ -56,7 +57,7 @@ const StackLines = ({
   lineStyle,
   hasSecondUnit,
   maxLeftAxisCharacters
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
       ? lineStyle?.[0].curve
@@ -134,9 +135,9 @@ const StackLines = ({
                   equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
-                        areaColor: areaColor || lineColor,
-                        transparency: formattedTransparency
-                      })
+                      areaColor: areaColor || lineColor,
+                      transparency: formattedTransparency
+                    })
                 }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -109,7 +109,7 @@ const Lines = ({
                   key={`stacked-${unit}`}
                   lines={lines}
                   timeSeries={stackedTimeSeries}
-                  yScale={yScalesPerUnit[unit || undefined]}
+                  yScale={yScalesPerUnit[unit ?? undefined]}
                   {...commonStackedLinesProps}
                 />
               );
@@ -128,7 +128,7 @@ const Lines = ({
                     invert: '1',
                     scale,
                     scaleLogarithmicBase,
-                    unit: unit || undefined,
+                    unit: unit ?? undefined,
                     yScalesPerUnit
                   })}
                   {...commonStackedLinesProps}
@@ -152,107 +152,107 @@ const Lines = ({
 
       {displayAreaRegularLines
         ? regularLines.map(
-            ({
-              areaColor,
-              transparency,
-              lineColor,
-              filled,
+          ({
+            areaColor,
+            transparency,
+            lineColor,
+            filled,
+            unit,
+            highlight,
+            invert,
+            metric_id,
+            ...rest
+          }) => {
+            const yScale = getYScale({
+              invert,
+              scale,
+              scaleLogarithmicBase,
               unit,
-              highlight,
+              yScalesPerUnit
+            });
+            const relatedTimeSeries = getTimeSeriesForLines({
               invert,
-              metric_id,
-              ...rest
-            }) => {
-              const yScale = getYScale({
-                invert,
-                scale,
-                scaleLogarithmicBase,
-                unit,
-                yScalesPerUnit
-              });
-              const relatedTimeSeries = getTimeSeriesForLines({
-                invert,
-                lines: [
-                  {
-                    areaColor,
-                    filled,
-                    highlight,
-                    invert,
-                    lineColor,
-                    metric_id,
-                    transparency,
-                    unit,
-                    ...rest
-                  }
-                ],
-                timeSeries
-              });
+              lines: [
+                {
+                  areaColor,
+                  filled,
+                  highlight,
+                  invert,
+                  lineColor,
+                  metric_id,
+                  transparency,
+                  unit,
+                  ...rest
+                }
+              ],
+              timeSeries
+            });
 
-              const style = getStyle({
-                style: lineStyle,
-                metricId: metric_id
-              }) as LineStyle;
+            const style = getStyle({
+              style: lineStyle,
+              metricId: metric_id
+            }) as LineStyle;
 
-              return (
-                <g key={metric_id}>
-                  {displayGuidingLines && (
-                    <RegularAnchorPoint
-                      areaColor={areaColor || lineColor}
-                      lineColor={lineColor}
-                      metric_id={metric_id}
-                      timeSeries={relatedTimeSeries}
-                      transparency={transparency}
-                      xScale={xScale}
-                      yScale={yScale}
-                      maxLeftAxisCharacters={maxLeftAxisCharacters}
-                      hasSecondUnit={hasSecondUnit}
-                    />
-                  )}
-                  {style?.showPoints &&
-                    getDates(relatedTimeSeries).map((timeTick) => (
-                      <Point
-                        key={timeTick.toString()}
-                        lineColor={lineColor}
-                        metric_id={metric_id}
-                        radius={getPointRadius(style?.lineWidth)}
-                        timeSeries={relatedTimeSeries}
-                        timeTick={timeTick}
-                        xScale={xScale}
-                        yPoint={getYAnchorPoint({
-                          metric_id,
-                          timeSeries: relatedTimeSeries,
-                          timeTick,
-                          yScale
-                        })}
-                        yScale={yScale}
-                      />
-                    ))}
-                  <RegularLine
+            return (
+              <g key={metric_id}>
+                {displayGuidingLines && (
+                  <RegularAnchorPoint
                     areaColor={areaColor || lineColor}
-                    curve={style?.curve || 'linear'}
-                    dashLength={style?.dashLength}
-                    dashOffset={style?.dashOffset}
-                    dotOffset={style?.dotOffset}
-                    filled={isNil(style?.showArea) ? filled : style.showArea}
-                    graphHeight={height}
-                    highlight={highlight}
                     lineColor={lineColor}
-                    lineWidth={style?.lineWidth || 2}
                     metric_id={metric_id}
                     timeSeries={relatedTimeSeries}
-                    transparency={
-                      isNil(style?.areaTransparency)
-                        ? transparency || 80
-                        : style.areaTransparency
-                    }
-                    unit={unit}
+                    transparency={transparency}
                     xScale={xScale}
                     yScale={yScale}
+                    maxLeftAxisCharacters={maxLeftAxisCharacters}
+                    hasSecondUnit={hasSecondUnit}
                   />
-                </g>
-              );
-            }
-          )
+                )}
+                {style?.showPoints &&
+                  getDates(relatedTimeSeries).map((timeTick) => (
+                    <Point
+                      key={timeTick.toString()}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      radius={getPointRadius(style?.lineWidth)}
+                      timeSeries={relatedTimeSeries}
+                      timeTick={timeTick}
+                      xScale={xScale}
+                      yPoint={getYAnchorPoint({
+                        metric_id,
+                        timeSeries: relatedTimeSeries,
+                        timeTick,
+                        yScale
+                      })}
+                      yScale={yScale}
+                    />
+                  ))}
+                <RegularLine
+                  areaColor={areaColor || lineColor}
+                  curve={style?.curve || 'linear'}
+                  dashLength={style?.dashLength}
+                  dashOffset={style?.dashOffset}
+                  dotOffset={style?.dotOffset}
+                  filled={isNil(style?.showArea) ? filled : style.showArea}
+                  graphHeight={height}
+                  highlight={highlight}
+                  lineColor={lineColor}
+                  lineWidth={style?.lineWidth || 2}
+                  metric_id={metric_id}
+                  timeSeries={relatedTimeSeries}
+                  transparency={
+                    isNil(style?.areaTransparency)
+                      ? transparency || 80
+                      : style.areaTransparency
+                  }
+                  unit={unit}
+                  xScale={xScale}
+                  yScale={yScale}
+                />
+              </g>
+            );
+          }
+        )
         : null}
     </g>
   );

package/src/Graph/Chart/Chart.tsx

@@ -1,5 +1,6 @@
 import {
   type MutableRefObject,
+  ReactElement,
   useEffect,
   useMemo,
   useRef,
@@ -117,7 +118,7 @@ const Chart = ({
   min,
   max,
   boundariesUnit
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const { classes } = useChartStyles();
 
   const { title, timeSeries, baseAxis, lines } = graphData;
@@ -202,7 +203,8 @@ const Chart = ({
         valueGraphHeight: graphHeight - margin.bottom,
         min,
         max,
-        boundariesUnit
+        boundariesUnit,
+        isFilled: lineStyle?.showArea
       }),
     [
       linesGraph,

package/src/Graph/Chart/Legend/index.tsx

@@ -81,17 +81,17 @@ const MainLegend = ({
 
   const contextMenuClick =
     (metricId: number) =>
-    (event: MouseEvent): void => {
-      if (!secondaryClick) {
-        return;
-      }
-      event.preventDefault();
-      secondaryClick({
-        element: event.target,
-        metricId,
-        position: [event.pageX, event.pageY]
-      });
-    };
+      (event: MouseEvent): void => {
+        if (!secondaryClick) {
+          return;
+        }
+        event.preventDefault();
+        secondaryClick({
+          element: event.target,
+          metricId,
+          position: [event.pageX, event.pageY]
+        });
+      };
 
   const selectMetric = ({
     event,
@@ -120,16 +120,17 @@ const MainLegend = ({
 
   return (
     <div
-      className={`overflow-x-hidden overflow-y-auto ${!equals(placement, 'bottom') ? 'h-full mt-[15px]' : 'ml-[50px] mr-[40px]'} legend`}
+      className={`overflow-x-hidden overflow-y-auto ${!equals(placement, 'bottom') ? 'h-full mt-[15px]' : 'ml-[50px] mr-[40px]'}`}
       data-display-side={!equals(placement, 'bottom')}
     >
       <ul
-        className={`list-none flex gap-3 w-full ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${isListMode || !equals(placement, 'bottom') ? 'flex-col h-full w-fit' : ''} ${equals(placement, 'bottom') ? 'max-h-17' : 'max-h-0'}`}
+        className={`list-none flex gap-3 w-full overflow-y-auto ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${isListMode || !equals(placement, 'bottom') ? 'flex-col h-full w-fit' : ''} ${equals(placement, 'bottom') ? 'max-h-17' : 'max-h-fit'} ${!equals(placement, 'bottom') ? 'overflow-x-hidden' : ''}`}
         style={{
           height: equals(placement, 'bottom') ? 'auto' : `${graphHeight}px`
         }}
         data-as-list={isListMode || !equals(placement, 'bottom')}
         data-mode={itemMode}
+        data-legend
       >
         {displayedLines.map((line) => {
           const { color, display, metric_id, unit } = line;
@@ -155,7 +156,7 @@ const MainLegend = ({
 
           return (
             <li
-              className={`${!display ? 'text-text-disabled' : 'text-text-primary'} flex gap-1 ${toggable && 'cursor-pointer'}`}
+              className={`${!display ? 'text-text-disabled' : 'text-text-primary'} flex gap-1 ${toggable && 'cursor-pointer'} ${!equals(placement, 'bottom') ? 'w-fit' : ''}`}
               key={metric_id}
               onClick={(event): void => selectMetric({ event, metric_id })}
               onKeyUp={(event) =>

package/src/Graph/Chart/index.tsx

@@ -102,6 +102,10 @@ const WrapperChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <div />;
+  }
+
   return (
     <div
       ref={ref}

package/src/Graph/common/timeSeries/index.ts

@@ -33,7 +33,8 @@ import {
   reject,
   sortBy,
   split,
-  uniq
+  uniq,
+  isNotNil
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -160,8 +161,8 @@ const getMetrics = (timeValue: TimeValue): Array<string> =>
 
 const getValueForMetric =
   (timeValue: TimeValue) =>
-  (metric_id: number): number =>
-    prop(metric_id, timeValue) as number;
+    (metric_id: number): number =>
+      prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
   pipe(map(prop('unit')), uniq)(lines);
@@ -308,8 +309,8 @@ const getTimeSeriesForLines = ({
             ...acc,
             [metric_id]:
               invert &&
-              metricsValue[metric_id] &&
-              gt(metricsValue[metric_id], 0)
+                metricsValue[metric_id] &&
+                gt(metricsValue[metric_id], 0)
                 ? negate(metricsValue[metric_id])
                 : metricsValue[metric_id]
           };
@@ -342,10 +343,10 @@ const getYScale = ({
 
   return invert
     ? getScaleType(scale)({
-        base: scaleLogarithmicBase,
-        domain: yScale.domain().reverse(),
-        range: yScale.range().reverse()
-      })
+      base: scaleLogarithmicBase,
+      domain: yScale.domain().reverse(),
+      range: yScale.range().reverse()
+    })
     : yScale;
 };
 
@@ -382,6 +383,7 @@ const getScale = ({
   invert,
   hasDisplayAsBar,
   hasLineFilled,
+  hasStackedLines,
   min,
   max
 }): ScaleLinear<number, number> => {
@@ -389,30 +391,42 @@ const getScale = ({
   const sanitizedValuesForMinimum = min
     ? [min]
     : getSanitizedValues([
-        invert && graphValues.every(lt(0))
-          ? negate(getMax(graphValues))
-          : getMin(graphValues),
-        !isEmpty(stackedValues) &&
-          !equals(stackedValues, [0]) &&
-          getMin(stackedValues),
-        Math.min(...thresholds)
-      ]);
-  const minValue = Math.min(...sanitizedValuesForMinimum);
-  const minValueWithMargin =
-    (hasDisplayAsBar || hasLineFilled) && minValue > 0 && !min
-      ? 0
-      : minValue - Math.abs(minValue) * 0.05;
+      invert && graphValues.every(lt(0))
+        ? negate(getMax(graphValues))
+        : getMin(graphValues),
+      !isEmpty(stackedValues) &&
+      !equals(stackedValues, [0]) &&
+      getMin(stackedValues),
+      Math.min(...thresholds)
+    ]);
+  const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));
 
   const sanitizedValuesForMaximum = max
     ? [max]
     : getSanitizedValues([
-        getMax(graphValues),
-        getMax(stackedValues),
-        hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
-        Math.max(...thresholds)
-      ]);
-  const maxValue = Math.max(...sanitizedValuesForMaximum);
-  const maxValueWithMargin = maxValue + Math.abs(maxValue) * 0.05;
+      getMax(graphValues),
+      getMax(stackedValues),
+      hasOnlyZeroesHasValue(graphValues) ? 1 : null,
+      Math.max(...thresholds)
+    ]);
+  const maxValue = Math.max(...sanitizedValuesForMaximum.filter(isNotNil));
+
+  const minValueWithMargin =
+    (hasDisplayAsBar && minValue > 0) ||
+      (hasLineFilled &&
+        Math.max(maxValue, minValue) > minValue &&
+        minValue > 0) ||
+      (hasStackedLines && minValue > maxValue)
+      ? 0
+      : minValue - Math.abs(minValue) * 0.05;
+  const maxValueWithMargin =
+    (hasDisplayAsBar && maxValue < 0) ||
+      (hasLineFilled &&
+        Math.min(maxValue, minValue) < maxValue &&
+        maxValue < 0) ||
+      (hasStackedLines && minValue > maxValue)
+      ? 0
+      : maxValue + Math.abs(maxValue) * 0.05;
 
   const scaleType = getScaleType(scale);
 
@@ -479,7 +493,8 @@ const getYScaleUnit = ({
   min,
   max,
   isBarChart,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   invert?: boolean | string | null;
   unit: string;
@@ -487,6 +502,7 @@ const getYScaleUnit = ({
   min?: number;
   boundariesUnit?: string;
   isBarChart?: boolean;
+  isFilled?: boolean;
 }): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
@@ -505,12 +521,12 @@ const getYScaleUnit = ({
 
   const stackedValues = hasStackedLines
     ? getStackedMetricValues({
-        lines: getSortedStackedLines(dataLines).filter(
-          ({ unit: stackedUnit }) => equals(unit, stackedUnit)
-        ),
-        timeSeries: dataTimeSeries
-      })
-    : [0];
+      lines: getSortedStackedLines(dataLines).filter(
+        ({ unit: stackedUnit }) => equals(unit, stackedUnit)
+      ),
+      timeSeries: dataTimeSeries
+    })
+    : [];
 
   return getScale({
     graphValues,
@@ -520,8 +536,14 @@ const getYScaleUnit = ({
         ({ displayAs, unit: lineUnit }) =>
           equals(unit, lineUnit) && equals(displayAs, 'bar')
       ),
-    hasLineFilled: dataLines.some(
-      ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+    hasLineFilled: isNil(isFilled)
+      ? dataLines.some(
+        ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+      )
+      : isFilled,
+    hasStackedLines: dataLines.some(
+      ({ unit: lineUnit, stackKey, stackOrder }) =>
+        equals(unit, lineUnit) && (stackKey || stackOrder)
     ),
     height: valueGraphHeight,
     invert,
@@ -561,12 +583,14 @@ const getYScalePerUnit = ({
   isBarChart,
   min,
   max,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   min?: number;
   max?: number;
   isBarChart?: boolean;
   boundariesUnit?: string;
+  isFilled?: boolean;
 }): Record<string, ScaleLinear<number, number>> => {
   const units = getUnits(dataLines);
 
@@ -590,7 +614,8 @@ const getYScalePerUnit = ({
         min,
         max,
         isBarChart,
-        boundariesUnit
+        boundariesUnit,
+        isFilled
       })
     };
   }, {});

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -6,6 +6,7 @@
       "metric_id": 1,
       "legend": "count",
       "displayAs": "bar",
+      "unit": "",
       "ds_data": {
         "ds_stack": true,
         "ds_transparency": 0,
@@ -30,6 +31,7 @@
       "metric_id": 2,
       "legend": "count",
       "displayAs": "bar",
+      "unit": "",
       "ds_data": {
         "ds_stack": true,
         "ds_transparency": 0,