@centreon/ui 25.7.1 → 25.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.7.1",
+  "version": "25.7.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -12,10 +12,10 @@
     "test": "jest",
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
-    "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:run:updateSnapshots": "cypress run --component --browser=chrome --env updateSnapshots=true",
-    "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
-    "cypress:run": "cypress run --component --browser=chrome",
+    "cypress:ui": "cypress open --component --browser=chromium",
+    "cypress:run:updateSnapshots": "cypress run --component --browser=chromium --env updateSnapshots=true",
+    "cypress:run:coverage": "cypress run --component --browser=chromium --env codeCoverageTasksRegistered=true",
+    "cypress:run": "cypress run --component --browser=chromium",
     "cypress:install": "cypress install",
     "cypress:cli": "./cypress/scripts/cypress-cli.sh",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts",

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

@@ -30,10 +30,20 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle
+  barStyle,
+  min,
+  max
 }: Pick<
   BarChartProps,
-  'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'
+  | 'data'
+  | 'legend'
+  | 'axis'
+  | 'barStyle'
+  | 'orientation'
+  | 'tooltip'
+  | 'start'
+  | 'min'
+  | 'max'
 >): void => {
   cy.adjustViewport();
 
@@ -47,6 +57,8 @@ const initialize = ({
           legend={legend}
           orientation={orientation ?? 'horizontal'}
           tooltip={tooltip}
+          min={min}
+          max={max}
           {...defaultArgs}
         />
       </div>
@@ -138,8 +150,6 @@ describe('Bar chart', () => {
       cy.contains(':40 AM').should('be.visible');
 
       cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data centered in zero`, () => {
@@ -289,4 +299,17 @@ describe('Bar chart', () => {
     cy.contains('05/31/2023').should('be.visible');
     cy.contains('06/07/2023').should('be.visible');
   });
+
+  it('displays the bar chart according to min and max boundaries', () => {
+    initialize({
+      data: dataLastWeek,
+      min: -0.05,
+      max: 1
+    });
+
+    cy.contains('05/31/2023').should('be.visible');
+    cy.contains('06/07/2023').should('be.visible');
+    cy.contains('1 s').should('be.visible');
+    cy.contains('1%').should('be.visible');
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -250,3 +250,13 @@ export const mixedStackedVertical: Story = {
   },
   render: Template
 };
+
+export const mixedStackedMinMax: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceMixedStacked,
+    min: 10,
+    max: 20
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -10,11 +10,11 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
+import Loading from '../../LoadingSkeleton';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
 import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
-import Loading from '../../LoadingSkeleton';
 
 import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
@@ -26,7 +26,17 @@ dayjs.extend(timezonePlugin);
 
 export interface BarChartProps
   extends Partial<
-    Pick<LineChartProps, 'tooltip' | 'legend' | 'height' | 'axis' | 'header'>
+    Pick<
+      LineChartProps,
+      | 'tooltip'
+      | 'legend'
+      | 'height'
+      | 'axis'
+      | 'header'
+      | 'min'
+      | 'max'
+      | 'boundariesUnit'
+    >
   > {
   barStyle?: BarStyle;
   data?: LineChartData;
@@ -58,7 +68,10 @@ const BarChart = ({
     opacity: 1,
     radius: 0.2
   },
-  skipIntersectionObserver
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
@@ -93,6 +106,9 @@ const BarChart = ({
             tooltip={tooltip}
             width={width || 0}
             skipIntersectionObserver={skipIntersectionObserver}
+            min={min}
+            max={max}
+            boundariesUnit={boundariesUnit}
           />
         )}
       </Box>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -40,6 +40,9 @@ interface Props
   thresholds?: ThresholdsModel;
   width: number;
   skipIntersectionObserver?: boolean;
+  min?: number;
+  max?: number;
+  boundariesUnit?: string;
 }
 
 const ResponsiveBarChart = ({
@@ -56,7 +59,10 @@ const ResponsiveBarChart = ({
   orientation,
   tooltip,
   barStyle,
-  skipIntersectionObserver
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit
 }: Props): JSX.Element => {
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
@@ -131,7 +137,11 @@ const ResponsiveBarChart = ({
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight:
-          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom,
+        min,
+        max,
+        isBarChart: true,
+        boundariesUnit
       }),
     [
       displayedLines,

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

@@ -43,6 +43,8 @@ interface Props {
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
   lineStyle: LineStyle | Array<LineStyle>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const StackLines = ({
@@ -51,7 +53,9 @@ const StackLines = ({
   yScale,
   xScale,
   displayAnchor,
-  lineStyle
+  lineStyle,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
@@ -101,6 +105,8 @@ const StackLines = ({
                   transparency={transparency}
                   xScale={xScale}
                   yScale={yScale}
+                  hasSecondUnit={hasSecondUnit}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
                 />
               )}
               {style?.showPoints &&

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

@@ -40,6 +40,8 @@ interface Props extends GlobalAreaLines {
   xScale: ScaleLinear<number, number>;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
   lineStyle: LineStyle | Array<LineStyle>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const Lines = ({
@@ -56,7 +58,9 @@ const Lines = ({
   areaRegularLines,
   scale,
   scaleLogarithmicBase,
-  lineStyle
+  lineStyle,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -78,7 +82,9 @@ const Lines = ({
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
-    xScale
+    xScale,
+    hasSecondUnit,
+    maxLeftAxisCharacters
   };
 
   return (
@@ -192,6 +198,8 @@ const Lines = ({
                       transparency={transparency}
                       xScale={xScale}
                       yScale={yScale}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
+                      hasSecondUnit={hasSecondUnit}
                     />
                   )}
                   {style?.showPoints &&

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

@@ -22,7 +22,15 @@ import WrapperChart from '.';
 interface Props
   extends Pick<
     LineChartProps,
-    'legend' | 'tooltip' | 'axis' | 'lineStyle' | 'barStyle' | 'additionalLines'
+    | 'legend'
+    | 'tooltip'
+    | 'axis'
+    | 'lineStyle'
+    | 'barStyle'
+    | 'additionalLines'
+    | 'min'
+    | 'max'
+    | 'boundariesUnit'
   > {
   data?: LineChartData;
 }
@@ -69,7 +77,10 @@ const initialize = ({
   axis,
   lineStyle,
   barStyle,
-  additionalLines
+  additionalLines,
+  min,
+  max,
+  boundariesUnit
 }: Props): void => {
   cy.adjustViewport();
 
@@ -93,6 +104,9 @@ const initialize = ({
           barStyle={barStyle}
           tooltip={tooltip}
           additionalLines={additionalLines}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
         />
       </Provider>
     )
@@ -165,8 +179,8 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.45 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('0.4 s').should('be.visible');
+      cy.contains('75.64%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -188,12 +202,12 @@ describe('Line chart', () => {
       cy.get('[data-metric="connTime"]').should(
         'have.attr',
         'data-highlight',
-        'false'
+        'true'
       );
       cy.get('[data-metric="hitratio"]').should(
         'have.attr',
         'data-highlight',
-        'true'
+        'false'
       );
 
       cy.makeSnapshot();
@@ -437,7 +451,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 241.23251487506278)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 198.7929601526369)"]').should(
         'be.visible'
       );
 
@@ -451,8 +465,8 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.contains('0.9').should('be.visible');
-      cy.contains('-0.9').should('be.visible');
+      cy.contains('0.8').should('be.visible');
+      cy.contains('-0.8').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -519,7 +533,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="250.83333333333334"]').should('be.visible');
-      cy.get('circle[cy="52.90739222860398"]').should('be.visible');
+      cy.get('circle[cy="246.2421135204699"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -733,10 +747,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,273.1948717814711 h56.51239669421488 h1v1 v100.80512821852892 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.80512821852892 v-1h1z"]'
-    ).should('be.visible');
+      'path[d="M7.501377410468319,278.09035407759154 h56.51239669421488 h1v1 v95.90964592240846 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-95.90964592240846 v-1h1z'
+    );
     cy.get(
-      'path[d="M24.05509641873278,218.2484747081302 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.83895905681195 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.83895905681195 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M24.05509641873278,225.7604521029811 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v17.222463958081512 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-17.222463958081512 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();
@@ -763,4 +777,43 @@ describe('Lines and bars', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays graph according to min and max boundaries', () => {
+    initialize({
+      data: dataPingServiceLines,
+      min: 0.01,
+      max: 0.1
+    });
+
+    checkGraphWidth();
+
+    cy.get('path[data-metric="1"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+
+    cy.contains('0.1 ms').should('be.visible');
+    cy.contains('0.1%').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays graph according to min and max boundaries for a unit', () => {
+    initialize({
+      data: dataPingServiceLines,
+      min: 0.01,
+      max: 0.1,
+      boundariesUnit: 'ms'
+    });
+
+    checkGraphWidth();
+
+    cy.get('path[data-metric="1"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+    cy.get('path[data-metric="3"]').should('be.visible');
+
+    cy.contains('0.1 ms').should('be.visible');
+    cy.contains('2%').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/Chart/Chart.stories.tsx

@@ -717,3 +717,44 @@ export const WithAdditionalLines: Story = {
     />
   )
 };
+
+export const linesAndBarsMinMax: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    min: 10,
+    max: 30,
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};
+
+export const linesAndBarsMinMaxForUnit: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    min: 10,
+    max: 30,
+    boundariesUnit: '%',
+    lineStyle: {
+      curve: 'natural',
+      lineWidth: 2,
+      showPoints: true
+    }
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/Chart/Chart.tsx

@@ -112,7 +112,10 @@ const Chart = ({
   limitLegend,
   skipIntersectionObserver,
   transformMatrix,
-  additionalLines
+  additionalLines,
+  min,
+  max,
+  boundariesUnit
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -191,7 +194,10 @@ const Chart = ({
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - margin.bottom
+        valueGraphHeight: graphHeight - margin.bottom,
+        min,
+        max,
+        boundariesUnit
       }),
     [
       linesGraph,
@@ -246,6 +252,8 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
+  const hasSecondUnit = useMemo(() => Boolean(secondUnit), [secondUnit]);
+
   if ((!isInViewport && !skipIntersectionObserver) || !height) {
     return (
       <Skeleton
@@ -299,7 +307,7 @@ const Chart = ({
                 timeSeries={timeSeries}
                 xScale={xScale}
                 maxAxisCharacters={maxLeftAxisCharacters}
-                hasSecondUnit={Boolean(secondUnit)}
+                hasSecondUnit={hasSecondUnit}
               >
                 <>
                   {!isEmpty(linesDisplayedAsBar) && (
@@ -327,6 +335,8 @@ const Chart = ({
                       width={graphWidth}
                       xScale={xScale}
                       yScalesPerUnit={yScalesPerUnit}
+                      hasSecondUnit={hasSecondUnit}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
                       {...shapeLines}
                     />
                   )}
@@ -355,6 +365,8 @@ const Chart = ({
                     }}
                     zoomData={{ ...zoomPreview }}
                     transformMatrix={transformMatrix}
+                    hasSecondUnit={hasSecondUnit}
+                    maxLeftAxisCharacters={maxLeftAxisCharacters}
                   />
                   {thresholds?.enabled && (
                     <Thresholds

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -15,6 +15,8 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 export const getYAnchorPoint = ({
@@ -38,11 +40,15 @@ const RegularAnchorPoint = ({
   yScale,
   metric_id,
   timeSeries,
-  lineColor
+  lineColor,
+  maxLeftAxisCharacters,
+  hasSecondUnit
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
-    xScale
+    xScale,
+    maxLeftAxisCharacters,
+    hasSecondUnit
   });
 
   if (isNil(timeTick)) {

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -15,7 +15,10 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
+
 interface GetYAnchorPoint {
   stackValues: Array<StackValue>;
   timeTick: Date | null;
@@ -51,11 +54,15 @@ const StackedAnchorPoint = ({
   yScale,
   stackValues,
   timeSeries,
-  lineColor
+  lineColor,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
-    xScale
+    xScale,
+    hasSecondUnit,
+    maxLeftAxisCharacters
   });
 
   if (isNil(timeTick)) {

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -6,6 +6,10 @@ import { useAtomValue } from 'jotai';
 import useAxisY from '../../../common/Axes/useAxisY';
 import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
+import {
+  computPixelsToShiftMouse,
+  computeGElementMarginLeft
+} from '../../../common/utils';
 import { margin } from '../../common';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
@@ -25,6 +29,8 @@ interface Props {
   rightScale?: ScaleLinear<number, number>;
   timeSeries: Array<TimeValue>;
   xScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const useTickGraph = ({
@@ -33,7 +39,9 @@ const useTickGraph = ({
   leftScale,
   rightScale,
   lines = [],
-  baseAxis = 1000
+  baseAxis = 1000,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): AnchorPointResult => {
   const guidingLinesRef = useRef<SVGGElement | null>(null);
   const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
@@ -69,8 +77,17 @@ const useTickGraph = ({
 
       return;
     }
+    const pixelToShift = computPixelsToShiftMouse(xScale);
     const mousePositionTimeTick = mousePosition
-      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale })?.timeTick
+      ? getTimeValue({
+          timeSeries,
+          x: mousePosition[0] - pixelToShift,
+          xScale,
+          marginLeft: computeGElementMarginLeft({
+            maxCharacters: maxLeftAxisCharacters,
+            hasSecondUnit
+          })
+        })?.timeTick
       : 0;
     const timeTickValue = mousePosition
       ? new Date(mousePositionTimeTick || 0)

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

@@ -37,6 +37,10 @@ import type {
   InteractedZone as ZoomPreviewModel
 } from '../models';
 
+import {
+  computPixelsToShiftMouse,
+  computeGElementMarginLeft
+} from '../../common/utils';
 import Annotations from './Annotations';
 import type { TimelineEvent } from './Annotations/models';
 import Bar from './Bar';
@@ -80,6 +84,8 @@ interface Props {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
   };
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const InteractionWithGraph = ({
@@ -87,7 +93,9 @@ const InteractionWithGraph = ({
   commonData,
   annotationData,
   timeShiftZonesData,
-  transformMatrix
+  transformMatrix,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -151,10 +159,15 @@ const InteractionWithGraph = ({
 
       return;
     }
+    const pixelToShift = computPixelsToShiftMouse(xScale);
     const timeValue = getTimeValue({
       timeSeries,
-      x: pointPosition[0],
-      xScale
+      x: pointPosition[0] - pixelToShift,
+      xScale,
+      marginLeft: computeGElementMarginLeft({
+        maxCharacters: maxLeftAxisCharacters,
+        hasSecondUnit
+      })
     });
 
     if (isNil(timeValue)) {

package/src/Graph/Chart/index.tsx

@@ -70,6 +70,9 @@ const WrapperChart = ({
   getRef,
   transformMatrix,
   additionalLines,
+  min,
+  max,
+  boundariesUnit,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
@@ -125,6 +128,9 @@ const WrapperChart = ({
           skipIntersectionObserver={rest.skipIntersectionObserver}
           additionalLines={additionalLines}
           transformMatrix={transformMatrix}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
         />
       )}
     </div>

package/src/Graph/Chart/models.ts

@@ -122,6 +122,9 @@ export interface LineChartProps {
   zoomPreview?: InteractedZone;
   skipIntersectionObserver?: boolean;
   additionalLines?: Array<AdditionalLineProps>;
+  min?: number;
+  max?: number;
+  boundariesUnit?: string;
 }
 
 export interface Area {

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -8,6 +8,7 @@ import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
+import { computeGElementMarginLeft } from '../utils';
 
 interface Props {
   allUnits: Array<string>;
@@ -58,10 +59,10 @@ const ChartSvgWrapper = ({
       width="100%"
     >
       <Group.Group
-        left={
-          maxAxisCharacters * 5 +
-          (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6)
-        }
+        left={computeGElementMarginLeft({
+          maxCharacters: maxAxisCharacters,
+          hasSecondUnit
+        })}
         top={margin.top}
       >
         {showGridLines && (

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

@@ -20,7 +20,6 @@ import {
   includes,
   isEmpty,
   isNil,
-  isNotNil,
   keys,
   last,
   lt,
@@ -353,6 +352,19 @@ const getScaleType = (
 const hasOnlyZeroesHasValue = (graphValues: Array<number>): boolean =>
   graphValues.every((value) => equals(value, 0) || equals(value, null));
 
+const getSanitizedValues = reject(
+  (
+    value:
+      | number
+      | boolean
+      | typeof Number.POSITIVE_INFINITY
+      | typeof Number.NEGATIVE_INFINITY
+  ) =>
+    equals(value, false) ||
+    equals(value, Number.POSITIVE_INFINITY) ||
+    equals(value, Number.NEGATIVE_INFINITY)
+);
+
 const getScale = ({
   graphValues,
   height,
@@ -363,23 +375,39 @@ const getScale = ({
   scaleLogarithmicBase,
   isHorizontal,
   invert,
-  hasDisplayAsBar
+  hasDisplayAsBar,
+  hasLineFilled,
+  min,
+  max
 }): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
-  const minValue = Math.min(
-    hasDisplayAsBar && 0,
-    invert && graphValues.every(lt(0))
-      ? negate(getMax(graphValues))
-      : getMin(graphValues),
-    getMin(stackedValues),
-    Math.min(...thresholds)
-  );
-  const maxValue = Math.max(
-    getMax(graphValues),
-    getMax(stackedValues),
-    hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
-    Math.max(...thresholds)
-  );
+  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;
+
+  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;
 
   const scaleType = getScaleType(scale);
 
@@ -387,21 +415,26 @@ const getScale = ({
   const range = [height, upperRangeValue];
 
   if (isCenteredZero) {
-    const greatestValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
+    const greatestValue = Math.max(
+      Math.abs(maxValueWithMargin),
+      Math.abs(minValueWithMargin)
+    );
 
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
       domain: [-greatestValue, greatestValue],
-      range: isHorizontal ? range : range.reverse()
+      range: isHorizontal ? range : range.reverse(),
+      clamp: min || max
     });
   }
 
-  const domain = [isLogScale ? 0.001 : minValue, maxValue];
+  const domain = [isLogScale ? 0.001 : minValueWithMargin, maxValueWithMargin];
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
     domain,
-    range: isHorizontal ? range : range.reverse()
+    range: isHorizontal ? range : range.reverse(),
+    clamp: min || max
   });
 };
 
@@ -437,11 +470,19 @@ const getYScaleUnit = ({
   scaleLogarithmicBase,
   isHorizontal = true,
   unit,
-  invert
-}: AxeScale & { invert?: boolean | string | null; unit: string }): ScaleLinear<
-  number,
-  number
-> => {
+  invert,
+  min,
+  max,
+  isBarChart,
+  boundariesUnit
+}: AxeScale & {
+  invert?: boolean | string | null;
+  unit: string;
+  max?: number;
+  min?: number;
+  boundariesUnit?: string;
+  isBarChart?: boolean;
+}): ScaleLinear<number, number> => {
   const [firstUnit] = getUnits(dataLines);
   const shouldApplyThresholds =
     equals(unit, thresholdUnit) || (!thresholdUnit && equals(firstUnit, unit));
@@ -468,11 +509,14 @@ const getYScaleUnit = ({
 
   return getScale({
     graphValues,
-    hasDisplayAsBar: dataLines.some(
-      ({ displayAs, unit: lineUnit, stackOrder }) =>
-        equals(unit, lineUnit) &&
-        equals(displayAs, 'bar') &&
-        isNotNil(stackOrder)
+    hasDisplayAsBar:
+      isBarChart ||
+      dataLines.some(
+        ({ displayAs, unit: lineUnit }) =>
+          equals(unit, lineUnit) && equals(displayAs, 'bar')
+      ),
+    hasLineFilled: dataLines.some(
+      ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
     ),
     height: valueGraphHeight,
     invert,
@@ -481,10 +525,24 @@ const getYScaleUnit = ({
     scale,
     scaleLogarithmicBase,
     stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : []
+    thresholds: shouldApplyThresholds ? thresholds : [],
+    min: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: min }),
+    max: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: max })
   });
 };
 
+const boundaryToApplyToUnit = ({
+  boundary,
+  boundariesUnit,
+  unit
+}): number | undefined => {
+  if (!boundariesUnit) {
+    return boundary;
+  }
+
+  return equals(boundariesUnit, unit) ? boundary : undefined;
+};
+
 const getYScalePerUnit = ({
   dataLines,
   dataTimeSeries,
@@ -494,8 +552,17 @@ const getYScalePerUnit = ({
   isCenteredZero,
   scale,
   scaleLogarithmicBase,
-  isHorizontal = true
-}: AxeScale): Record<string, ScaleLinear<number, number>> => {
+  isHorizontal = true,
+  isBarChart,
+  min,
+  max,
+  boundariesUnit
+}: AxeScale & {
+  min?: number;
+  max?: number;
+  isBarChart?: boolean;
+  boundariesUnit?: string;
+}): Record<string, ScaleLinear<number, number>> => {
   const units = getUnits(dataLines);
 
   const scalePerUnit = units.reduce((acc, unit) => {
@@ -514,7 +581,11 @@ const getYScalePerUnit = ({
         thresholdUnit,
         thresholds,
         unit,
-        valueGraphHeight
+        valueGraphHeight,
+        min,
+        max,
+        isBarChart,
+        boundariesUnit
       })
     };
   }, {});

package/src/Graph/common/utils.ts

@@ -20,7 +20,9 @@ import {
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
+import dayjs from 'dayjs';
 import { BarStyle } from '../BarChart/models';
+import { margin } from '../Chart/common';
 import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
 import { formatMetricValue } from './timeSeries';
@@ -256,3 +258,20 @@ export const getFormattedAxisValues = ({
     .concat(formattedThresholdValues)
     .filter((v) => v) as Array<string>;
 };
+
+interface ComputeGElementMarginLeftProps {
+  maxCharacters: number;
+  hasSecondUnit?: boolean;
+}
+
+export const computeGElementMarginLeft = ({
+  maxCharacters,
+  hasSecondUnit
+}: ComputeGElementMarginLeftProps): number =>
+  maxCharacters * 5 + (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6);
+
+export const computPixelsToShiftMouse = (xScale): number => {
+  const domain = xScale.domain();
+
+  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
+};

package/src/Icon/RegexIcon.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material';
+import { ReactElement } from 'react';
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g transform="translate(2 2)">
+    <path
+      d="M19.468,8.107,17.2,6.8l2.264-1.307a.8.8,0,0,0-.8-1.386L16.4,5.414V2.8a.8.8,0,1,0-1.6,0V5.414L12.54,4.107a.8.8,0,1,0-.8,1.386L14,6.8,11.74,8.107a.8.8,0,1,0,.8,1.386L14.8,8.186V10.8a.8.8,0,1,0,1.6,0V8.186l2.264,1.307a.789.789,0,0,0,.4.107.8.8,0,0,0,.4-1.493"
+      transform="translate(-1.868)"
+    />
+    <path
+      d="M5.2,20.4a3.2,3.2,0,1,1,3.2-3.2,3.2,3.2,0,0,1-3.2,3.2m0-4.8a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6"
+      transform="translate(0 -2.4)"
+    />
+  </g>
+);
+
+export const RegexIcon = (props: SvgIconProps): ReactElement => (
+  <BaseIcon {...props} Icon={icon} dataTestId="RegexIcon" />
+);

package/src/Icon/index.ts

@@ -8,3 +8,4 @@ export { HostGroupIcon } from './HostGroupIcon';
 export { ServiceGroupIcon } from './ServiceGroupIcon';
 export { MetaServiceIcon } from './MetaServiceIcon';
 export { ContainerIcon } from './ContainerIcon';
+export { RegexIcon } from './RegexIcon';

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

@@ -17,7 +17,7 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import { ListingModel, ListingMapModel, SelectEntry } from '../../../..';
+import { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
 import {
   ConditionsSearchParameter,
   SearchParameter
@@ -122,26 +122,31 @@ const ConnectedAutocompleteField = (
       }
     });
 
-    const getOptionResult = useCallback((
-      newOptions: ListingModel<TData> | ListingMapModel<TData>
-    ): OptionResult<TData> => {
-      if ('result' in newOptions) return {
-        result: newOptions.result || [],
-        total: newOptions.meta.total || 1,
-        limit: newOptions.meta.limit || 1,
-      };
-      if ('content' in newOptions) return {
-        result: newOptions.content || [],
-        total: newOptions.totalElements || 1,
-        limit: newOptions.size || 1,
-      };
-
-      return {
-        result: [],
-        total: 1,
-        limit: 1,
-      }
-    }, []);
+    const getOptionResult = useCallback(
+      (
+        newOptions: ListingModel<TData> | ListingMapModel<TData>
+      ): OptionResult<TData> => {
+        if ('result' in newOptions)
+          return {
+            result: newOptions.result || [],
+            total: newOptions.meta.total || 1,
+            limit: newOptions.meta.limit || 1
+          };
+        if ('content' in newOptions)
+          return {
+            result: newOptions.content || [],
+            total: newOptions.totalElements || 1,
+            limit: newOptions.size || 1
+          };
+
+        return {
+          result: [],
+          total: 1,
+          limit: 1
+        };
+      },
+      []
+    );
 
     const lastOptionRef = useIntersectionObserver({
       action: () => setPage(page + 1),

package/src/ThemeProvider/palettes.ts

@@ -297,7 +297,7 @@ export const lightPalette: PaletteOptions = {
     contrastText: '#000',
     main: '#FD9B27',
     light: '#FCC481',
-    dark: '#FC7E00',
+    dark: '#FC7E00'
   }
 };
 

package/src/api/models.ts

@@ -10,10 +10,10 @@ export interface Listing<TEntity> {
 }
 
 export interface ListingMap<TEntity> {
-    content: Array<TEntity>;
-    totalPages: number;
-    totalElements: number;
-    size: number;
-    number: number;
-    numberOfElements: number;
+  content: Array<TEntity>;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  numberOfElements: number;
 }

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -19,6 +19,7 @@ export interface ConfirmationModalProps<TAtom> {
   onCancel?: (atomData: Awaited<TAtom> | null) => void;
   onClose?: (atomData: Awaited<TAtom> | null) => void;
   onConfirm?: (atomData: Awaited<TAtom> | null) => void;
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
 }
 
 interface GetLabelProps<TAtom> {
@@ -39,7 +40,8 @@ export const ConfirmationModal = <TAtom,>({
   onClose,
   hasCloseButton = true,
   isDanger,
-  disabled
+  disabled,
+  size
 }: ConfirmationModalProps<TAtom>): JSX.Element => {
   const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
 
@@ -72,6 +74,7 @@ export const ConfirmationModal = <TAtom,>({
       hasCloseButton={hasCloseButton}
       open={Boolean(atomData)}
       onClose={closeModal}
+      size={size}
     >
       <Modal.Header>{formattedLabels.title}</Modal.Header>
       <Modal.Body>{formattedLabels.description}</Modal.Body>