@centreon/ui 25.10.5 → 25.10.7

package/package.json

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

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

@@ -84,6 +84,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 });
@@ -183,27 +238,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,
@@ -228,68 +262,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

@@ -61,18 +61,19 @@ const MemoizedGroup = ({
         const linesBar = isStackedBar
           ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
           : (notStackedLines.find(({ metric_id }) =>
-              equals(metric_id, Number(bar.key))
-            ) as Line);
+            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)]
-            }));
+            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}
@@ -82,7 +83,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')] ?? undefined}
             neutralValue={neutralValue}
           />
         ) : (
@@ -96,7 +97,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

@@ -107,7 +107,7 @@ const Lines = ({
                 key={`stacked-${unit}`}
                 lines={lines}
                 timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
+                yScale={yScalesPerUnit[unit] ?? undefined}
                 {...commonStackedLinesProps}
               />
             )
@@ -123,7 +123,7 @@ const Lines = ({
                   invert: '1',
                   scale,
                   scaleLogarithmicBase,
-                  unit,
+                  unit: unit ?? undefined,
                   yScalesPerUnit
                 })}
                 {...commonStackedLinesProps}
@@ -146,107 +146,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
-              });
-
-              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
+              lines: [
+                {
+                  areaColor,
+                  filled,
+                  highlight,
+                  invert,
+                  lineColor,
+                  metric_id,
+                  transparency,
+                  unit,
+                  ...rest
+                }
+              ],
+              timeSeries
+            });
+
+            const style = getStyle({
+              style: lineStyle,
+              metricId: metric_id
+            }) as LineStyle;
+
+            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,
@@ -116,7 +117,7 @@ const Chart = ({
   min,
   max,
   boundariesUnit
-}: Props): JSX.Element => {
+}: Props): ReactElement => {
   const { classes } = useChartStyles();
 
   const { title, timeSeries, baseAxis, lines } = graphData;
@@ -197,7 +198,8 @@ const Chart = ({
         valueGraphHeight: graphHeight - margin.bottom,
         min,
         max,
-        boundariesUnit
+        boundariesUnit,
+        isFilled: lineStyle?.showArea
       }),
     [
       linesGraph,

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

@@ -32,7 +32,8 @@ import {
   reject,
   sortBy,
   split,
-  uniq
+  uniq,
+  isNotNil
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -158,8 +159,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);
@@ -303,8 +304,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]
           };
@@ -337,10 +338,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;
 };
 
@@ -377,6 +378,7 @@ const getScale = ({
   invert,
   hasDisplayAsBar,
   hasLineFilled,
+  hasStackedLines,
   min,
   max
 }): ScaleLinear<number, number> => {
@@ -384,30 +386,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);
 
@@ -474,7 +488,8 @@ const getYScaleUnit = ({
   min,
   max,
   isBarChart,
-  boundariesUnit
+  boundariesUnit,
+  isFilled
 }: AxeScale & {
   invert?: boolean | string | null;
   unit: string;
@@ -482,6 +497,7 @@ const getYScaleUnit = ({
   min?: number;
   boundariesUnit?: string;
   isBarChart?: boolean;
+  isFilled?: boolean;
 }): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
@@ -500,12 +516,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,
@@ -515,8 +531,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,
@@ -556,12 +578,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);
 
@@ -585,7 +609,8 @@ const getYScalePerUnit = ({
         min,
         max,
         isBarChart,
-        boundariesUnit
+        boundariesUnit,
+        isFilled
       })
     };
   }, {});

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -44,7 +44,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   field: string;
   getEndpoint: ({ search, page }) => string;
   decoder?;
-  getRenderedOptionText: (option: TData) => string;
+  getRenderedOptionText?: (option: TData) => ReactElement | string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
@@ -53,9 +53,9 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
 }
 
 const ConnectedAutocompleteField = (
-  AutocompleteField: (props) => JSX.Element,
+  AutocompleteField: (props) => ReactElement,
   multiple: boolean
-): ((props) => JSX.Element) => {
+): ((props) => ReactElement) => {
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
@@ -74,7 +74,7 @@ const ConnectedAutocompleteField = (
     changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
-    Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
+    Omit<AutocompleteFieldProps, 'options'>): ReactElement => {
     const [options, setOptions] = useState<Array<TData>>([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(initialPage);
@@ -221,7 +221,7 @@ const ConnectedAutocompleteField = (
       debounce(event.target.value);
     };
 
-    const renderOptions = (renderProps, option, { selected }): JSX.Element => {
+    const renderOptions = (renderProps, option, { selected }): ReactElement => {
       const { value } = props;
 
       const lastValue = Array.isArray(value) ? last(value) : value;

package/src/InputField/Select/Autocomplete/index.tsx

@@ -13,6 +13,7 @@ import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
 import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
@@ -33,6 +34,11 @@ export type Props = {
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
+  renderOption?: (
+    renderProps: HTMLAttributes<HTMLLIElement>,
+    option: SelectEntry,
+    state: AutocompleteRenderOptionState
+  ) => ReactElement;
   label: string;
   loading?: boolean;
   onTextChange?;
@@ -52,7 +58,7 @@ export type Props = {
 > &
   UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>;
 
-const LoadingIndicator = (): JSX.Element => {
+const LoadingIndicator = (): ReactElement => {
   const { classes } = useAutoCompleteStyles({});
 
   return (
@@ -90,10 +96,11 @@ const AutocompleteField = forwardRef(
       forceInputRenderValue = false,
       textFieldSlotsAndSlotProps,
       autocompleteSlotsAndSlotProps,
+      renderOption,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
+  ): ReactElement => {
     const { classes, cx } = useAutoCompleteStyles({ hideInput });
     const { t } = useTranslation();
     const theme = useTheme();
@@ -107,7 +114,24 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => {
+    const renderOptions = renderOption
+      ? renderOption
+      : (props, option): ReactElement => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
+            >
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        };
+
+    const renderInput = (params): ReactElement => {
       return (
         <TextField
           {...params}
@@ -202,20 +226,7 @@ const AutocompleteField = forwardRef(
         options={options}
         ref={ref}
         renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
-            >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
+        renderOption={renderOptions}
         size="small"
         slotProps={{
           ...autocompleteSlotsAndSlotProps?.slotProps,

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { ReactElement, RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
 
 interface Props {
   checkboxSelected?: boolean;
-  children: string;
+  children: string | ReactElement;
   thumbnailUrl?: string;
 }
 
 const Option = forwardRef(
-  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): JSX.Element => {
+  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): ReactElement => {
     const { classes } = useStyles();
 
     return (

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -8,6 +8,7 @@ import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
 import { Endpoints, Labels } from '../models';
 
+import { ReactElement } from 'react';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -18,18 +19,18 @@ interface Props {
   roles: Array<SelectEntry>;
 }
 
-const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
   const { t } = useTranslation();
   const { classes } = useShareInputStyles();
 
   const {
-    renderOption,
     selectedContact,
     getOptionDisabled,
     getEndpoint,
     selectContact,
     isContactGroup,
     selectedRole,
+    getRenderedOptionText,
     setSelectedRole,
     add,
     changeIdValue
@@ -46,6 +47,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           disableClearable={false}
           field="name"
           getEndpoint={getEndpoint}
+          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
           label={t(
             isContactGroup
@@ -53,7 +55,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               : t(labels.autocompleteContact)
           )}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
-          renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}
         />

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -1,10 +1,15 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState
+} from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
 
 import { SelectEntry, buildListingEndpoint } from '../../../..';
 import {
@@ -20,7 +25,7 @@ interface UseShareInputState {
   getEndpoint: (parameters) => string;
   getOptionDisabled: (option) => boolean;
   isContactGroup: boolean;
-  renderOption: (attr, option) => JSX.Element;
+  getRenderedOptionText: (option: unknown) => ReactElement | string;
   selectContact: (_, entry) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
@@ -40,7 +45,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
-    if (equals('editor', entry.most_permissive_role)) {
+    if (equals('editor', entry?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -71,14 +76,14 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const renderOption = (attr, option): JSX.Element => {
+  const getRenderedOptionText = (option): ReactElement => {
     return (
-      <MenuItem {...attr}>
-        <ListItemText>{option.name}</ListItemText>
-        {includes(option.id, accessRightIds) && (
+      <>
+        {option?.name}
+        {includes(option?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
-      </MenuItem>
+      </>
     );
   };
 
@@ -102,7 +107,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     getEndpoint,
     getOptionDisabled,
     isContactGroup,
-    renderOption,
+    getRenderedOptionText,
     selectContact,
     selectedContact,
     selectedRole,

package/src/components/Menu/Button/MenuButton.tsx

@@ -5,13 +5,12 @@ import {
   Menu as MenuIcon
 } from '@mui/icons-material';
 
+import { useStyles } from './MenuButton.styles';
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
 import { Button, ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
-import { useStyles } from './MenuButton.styles';
-
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;