@centreon/ui 25.7.2 → 25.8.0

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 && (