@centreon/ui 25.11.10 → 26.3.0

package/package.json

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

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

@@ -76,17 +76,72 @@ const checkWidth = (orientation): void => {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
       .should('have.attr', 'x2')
-      .and('equal', '1145');
+      .and('equal', '1133');
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
     .should('have.attr', 'x2')
-    .and('equal', '1180');
+    .and('equal', '1168');
 };
 
 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/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.cypress.spec.tsx

@@ -157,7 +157,7 @@ const checkGraphWidth = (): void => {
     .and('equal', '392');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
-    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1167);
   });
 };
 
@@ -180,8 +180,8 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.4 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('0.44 s').should('be.visible');
+      cy.contains('75.19%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -235,7 +235,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1170, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1100, 100);
 
       cy.get('[data-metric="querytime"]').should('be.visible');
       cy.get('[data-metric="hitratio"]').should('be.visible');
@@ -533,8 +533,8 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="248.33333333333334"]').should('be.visible');
-      cy.get('circle[cy="267.9948393443889"]').should('be.visible');
+      cy.get('circle[cx="245.83333333333334"]').should('be.visible');
+      cy.get('circle[cy="256.7205013298516"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -592,7 +592,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle[cx="33.11111111111111"]').should('be.visible');
+      cy.get('circle[cx="32.77777777777778"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -748,10 +748,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,289.92398616599974 h56.51239669421488 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
+      'path[d="M7.435261707988982,289.92398616599974 h55.91735537190083 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-55.91735537190083 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,73.57899638721061 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v137.44495707537567 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-137.44495707537567 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M23.81046831955923,235.36727985204413 h23.166942148760334 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,17.37520661157025 v19.806293090815103 v17.37520661157025h-17.37520661157025 h-23.166942148760334 h-17.37520661157025v-17.37520661157025 v-19.806293090815103 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,-17.37520661157025z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

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/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -69,11 +69,12 @@ export const useComputeYAxisMaxCharacters = ({
     ]
   );
 
+  // Always add a character space in case the algorithm does not compute the displayed value in axis.
   const maxLeftAxisCharacters = useMemo(
     () =>
       isEmpty(maxLeftValue)
         ? 2
-        : Math.max(...maxLeftValue.map((value) => value.length), 2),
+        : Math.max(...maxLeftValue.map((value) => value.length), 2) + 1,
     [maxLeftValue]
   );
 
@@ -81,7 +82,7 @@ export const useComputeYAxisMaxCharacters = ({
     () =>
       isEmpty(maxRightValue)
         ? 5
-        : Math.max(...maxRightValue.map((value) => value.length), 5),
+        : Math.max(...maxRightValue.map((value) => value.length), 5) + 1,
     [maxRightValue]
   );
 

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,

package/src/components/CopyCommand/CopyCommand.cypress.spec.tsx

@@ -131,6 +131,21 @@ echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
   });
 
   it('copies the command to the clipboard when the button is clicked', () => {
+    cy.wrap(
+      Cypress.automation('remote:debugger:protocol', {
+        command: 'Browser.grantPermissions',
+        params: {
+          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
+          origin: window.location.origin
+        }
+      })
+    );
+    cy.window()
+      .its('navigator.clipboard')
+      .then((clipboard) => {
+        cy.spy(clipboard, 'writeText').as('writeText');
+      });
+
     initialize({
       text: `# a simple command
 echo "hello" | grep "hel"`,
@@ -138,12 +153,6 @@ echo "hello" | grep "hel"`,
       commandToCopy: 'echo "hello" | grep "hel"'
     });
 
-    cy.window()
-      .its('navigator.clipboard')
-      .then((clipboard) => {
-        cy.spy(clipboard, 'writeText').as('writeText');
-      });
-
     cy.findByTestId('Copy command').click();
 
     cy.get('@writeText').should(