@centreon/ui 25.2.2 → 25.2.4

package/src/Graph/common/Axes/useAxisY.ts

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 
-import { Axis } from '@visx/visx';
+import type { Axis } from '@visx/visx';
 import { isNil } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import { formatMetricValue, getUnits } from '../timeSeries';
+import { formatMetricValueWithUnit, getUnits } from '../timeSeries';
 import { commonTickLabelProps } from '../utils';
 
-import { Data, LabelProps } from './models';
+import type { Data, LabelProps } from './models';
 
 interface AxisYData {
   displayUnit: boolean;
@@ -69,7 +69,11 @@ const useAxisY = ({
         return '';
       }
 
-      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
+      return formatMetricValueWithUnit({
+        base: data.baseAxis,
+        unit,
+        value
+      }) as string;
     };
 
   const labelProps = ({

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

@@ -9,8 +9,6 @@ import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
 
-import { extraMargin } from './useComputeBaseChartDimensions';
-
 interface Props {
   allUnits: Array<string>;
   axis?: ChartAxis;
@@ -27,6 +25,8 @@ interface Props {
   svgRef: MutableRefObject<SVGSVGElement | null>;
   timeSeries: Array<TimeValue>;
   xScale;
+  maxAxisCharacters?: number;
+  hasSecondUnit?: boolean;
 }
 
 const ChartSvgWrapper = ({
@@ -44,7 +44,9 @@ const ChartSvgWrapper = ({
   axis,
   children,
   orientation = 'horizontal',
-  allUnits
+  allUnits,
+  maxAxisCharacters = 0,
+  hasSecondUnit
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -55,7 +57,13 @@ const ChartSvgWrapper = ({
       ref={svgRef}
       width="100%"
     >
-      <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
+      <Group.Group
+        left={
+          maxAxisCharacters * 5 +
+          (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6)
+        }
+        top={margin.top}
+      >
         {showGridLines && (
           <Grids
             gridLinesType={gridLinesType}

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -3,6 +3,7 @@ import { MutableRefObject, useRef } from 'react';
 import { equals, isNil } from 'ramda';
 
 import { margin } from '../../Chart/common';
+import { margins } from '../margins';
 
 export const extraMargin = 10;
 
@@ -13,6 +14,7 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
+  maxAxisCharacters: number;
 }
 
 interface UseComputeBaseChartDimensionsState {
@@ -27,7 +29,8 @@ export const useComputeBaseChartDimensions = ({
   legendDisplay,
   legendPlacement,
   hasSecondUnit,
-  legendHeight
+  legendHeight,
+  maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const legendRef = useRef<HTMLDivElement | null>(null);
 
@@ -48,9 +51,8 @@ export const useComputeBaseChartDimensions = ({
   const graphWidth =
     width > 0
       ? width -
-        margin.left -
-        (hasSecondUnit ? margin.right : 8) -
-        extraMargin -
+        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
         legendBoundingWidth
       : 0;
   const graphHeight =

package/src/Graph/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -0,0 +1,92 @@
+import { isEmpty } from 'ramda';
+import { useMemo } from 'react';
+import { ChartAxis } from '../../Chart/models';
+import { Data } from '../Axes/models';
+import { Thresholds } from '../models';
+import { getFormattedAxisValues } from '../utils';
+
+interface UseComputeYAxisMaxCharactersProps {
+  firstUnit: string;
+  secondUnit: string;
+  thresholdUnit?: string;
+  thresholds?: Thresholds;
+  graphData: Data;
+  axis?: ChartAxis;
+}
+
+interface UseComputteYAxisMaxCharactersState {
+  maxLeftAxisCharacters: number;
+  maxRightAxisCharacters: number;
+}
+
+export const useComputeYAxisMaxCharacters = ({
+  thresholds,
+  firstUnit,
+  secondUnit,
+  graphData,
+  axis,
+  thresholdUnit
+}: UseComputeYAxisMaxCharactersProps): UseComputteYAxisMaxCharactersState => {
+  const maxLeftValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        threshold: thresholds?.critical ?? [],
+        axisUnit: axis?.axisYLeft?.unit ?? firstUnit,
+        timeSeries: graphData?.timeSeries ?? [],
+        thresholdUnit,
+        lines: graphData?.lines ?? [],
+        base: graphData?.baseAxis
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYLeft?.unit,
+      firstUnit,
+      graphData?.timeSeries,
+      thresholdUnit,
+      graphData?.lines,
+      graphData?.baseAxis
+    ]
+  );
+
+  const maxRightValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        threshold: thresholds?.critical ?? [],
+        axisUnit: axis?.axisYRight?.unit ?? secondUnit,
+        timeSeries: graphData.timeSeries ?? [],
+        thresholdUnit,
+        lines: graphData.lines ?? [],
+        base: graphData.baseAxis
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYRight?.unit,
+      secondUnit,
+      graphData.timeSeries,
+      thresholdUnit,
+      graphData.lines,
+      graphData.baseAxis
+    ]
+  );
+
+  const maxLeftAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxLeftValue)
+        ? 2
+        : Math.max(...maxLeftValue.map((value) => value.length), 2),
+    [maxLeftValue]
+  );
+
+  const maxRightAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxRightValue)
+        ? 5
+        : Math.max(...maxRightValue.map((value) => value.length), 5),
+    [maxRightValue]
+  );
+
+  return {
+    maxLeftAxisCharacters,
+    maxRightAxisCharacters
+  };
+};

package/src/Graph/common/models.ts

@@ -6,14 +6,13 @@ export interface LineChartData {
   times: Array<string>;
 }
 
+export interface Threshold {
+  label: string;
+  value: number;
+}
+
 export interface Thresholds {
-  critical: Array<{
-    label: string;
-    value: number;
-  }>;
+  critical: Array<Threshold>;
   enabled: boolean;
-  warning: Array<{
-    label: string;
-    value: number;
-  }>;
+  warning: Array<Threshold>;
 }

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

@@ -567,7 +567,7 @@ describe('Format value with unit', () => {
 
     if (unit === 'ms') {
       return {
-        expectedResult: '34.23 seconds',
+        expectedResult: '34.23k ms',
         unit,
         value: 34232
       };

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

@@ -523,13 +523,7 @@ const getYScalePerUnit = ({
 };
 
 const formatTime = (value: number): string => {
-  if (value < 1000) {
-    return `${numeral(value).format('0.[00]a')} ms`;
-  }
-
-  const t = numeral(value / 1000).format('0.[00]a');
-
-  return `${t} seconds`;
+  return `${numeral(value).format('0.[00]a')} ms`;
 };
 
 const registerMsUnitToNumeral = (): null => {

package/src/Graph/common/utils.ts

@@ -17,7 +17,9 @@ import {
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
-import { Thresholds } from './models';
+import { Threshold, Thresholds } from './models';
+import { formatMetricValue } from './timeSeries';
+import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
   baseColor?: string;
@@ -179,3 +181,49 @@ export const commonTickLabelProps = {
   fontSize: 10,
   textAnchor: 'middle'
 };
+
+interface GetFormattedAxisValuesProps {
+  thresholdUnit?: string;
+  axisUnit: string;
+  base?: number;
+  timeSeries: Array<TimeValue>;
+  threshold: Array<Threshold>;
+  lines: Array<Line>;
+}
+
+export const getFormattedAxisValues = ({
+  thresholdUnit,
+  axisUnit,
+  timeSeries,
+  base = 1000,
+  lines,
+  threshold
+}: GetFormattedAxisValuesProps): Array<string> => {
+  const metricId = (lines.find(({ unit }) => equals(unit, axisUnit)) as Line)
+    ?.metric_id;
+
+  if (isNil(metricId)) {
+    return [];
+  }
+  const formattedData = timeSeries.map((data) =>
+    formatMetricValue({
+      value: data[metricId],
+      unit: axisUnit,
+      base
+    })
+  );
+
+  const formattedThresholdValues = equals(thresholdUnit, axisUnit)
+    ? threshold.map(({ value }) =>
+        formatMetricValue({
+          value,
+          unit: axisUnit,
+          base
+        })
+      ) || []
+    : [];
+
+  return formattedData
+    .concat(formattedThresholdValues)
+    .filter((v) => v) as Array<string>;
+};

package/src/Graph/mockedData/lastDayWithNullValues.json

@@ -329,7 +329,20 @@
         0.32339333333,
         null
       ],
-      "prints": [["Last:0.32"], ["Min:0.03"], ["Max:0.97"], ["Average:0.51"]],
+      "prints": [
+        [
+          "Last:0.32"
+        ],
+        [
+          "Min:0.03"
+        ],
+        [
+          "Max:0.97"
+        ],
+        [
+          "Average:0.51"
+        ]
+      ],
       "last_value": 0.32,
       "minimum_value": 0.03,
       "maximum_value": 0.97,
@@ -654,10 +667,18 @@
         null
       ],
       "prints": [
-        ["Last:87.27"],
-        ["Min:70.31"],
-        ["Max:88.03"],
-        ["Average:78.07"]
+        [
+          "Last:87.27"
+        ],
+        [
+          "Min:70.31"
+        ],
+        [
+          "Max:88.03"
+        ],
+        [
+          "Average:78.07"
+        ]
       ],
       "last_value": 87.27,
       "minimum_value": 70.31,
@@ -974,15 +995,28 @@
         0.32092,
         0.23609333333,
         0.45102333333,
-        0.75873,
-        0.23588666667,
-        0.41906666667,
-        0.357,
-        0.32246333333,
-        0.64624666667,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
         null
       ],
-      "prints": [["Last:0.65"], ["Min:0.03"], ["Max:0.98"], ["Average:0.50"]],
+      "prints": [
+        [
+          "Last:0.65"
+        ],
+        [
+          "Min:0.03"
+        ],
+        [
+          "Max:0.98"
+        ],
+        [
+          "Average:0.50"
+        ]
+      ],
       "last_value": 0.65,
       "minimum_value": 0.03,
       "maximum_value": 0.98,

package/src/Graph/mockedData/pingServiceLinesBars.json

@@ -1,19 +1,19 @@
 {
   "global": {
     "base": 1000,
-    "title": "ping service"
+    "title": "Ping service"
   },
   "metrics": [
     {
       "metric_id": 2,
-      "metric": "centreon-server: pl",
-      "metric_legend": "centreon-server: pl",
-      "unit": "%",
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
-        "ds_color_line": "#f30b23",
-        "ds_color_area": "#f30b23",
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -23,7 +23,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "centreon-server: packet loss",
+      "legend": "Centreon-Server: Packet Loss",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -31,17 +31,17 @@
       "critical_low_threshold": 0.0,
       "ds_order": 1,
       "data": [
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        10.0,
-        20.0,
+        1243.0,
+        3562.0,
+        3532.0,
+        9843.0,
+        3332.0,
+        6576.0,
+        5647.0,
+        8763.0,
+        7487.0,
+        4783.0,
+        6835.0,
         null,
         null
       ],
@@ -52,9 +52,9 @@
     },
     {
       "metric_id": 10,
-      "metric": "space used",
-      "metric_legend": "space used",
-      "unit": "b",
+      "metric": "Space used",
+      "metric_legend": "Space used",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
@@ -69,7 +69,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "space used",
+      "legend": "Space used",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -90,14 +90,14 @@
     },
     {
       "metric_id": 1,
-      "metric": "centreon-server: rta",
-      "metric_legend": "centreon-server: rta",
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
       "unit": "ms",
       "min": 0.0,
       "max": null,
       "ds_data": {
-        "ds_color_line": "#29afee",
-        "ds_color_area": "#29afee",
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -107,7 +107,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip average time",
+      "legend": "Centreon-Server: Round-Trip Average Time",
       "stack": 0,
       "warning_high_threshold": 200.0,
       "critical_high_threshold": 400.0,
@@ -136,8 +136,8 @@
     },
     {
       "metric_id": 3,
-      "metric": "centreon-server: rtmax",
-      "metric_legend": "centreon-server: rtmax",
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -145,7 +145,7 @@
         "ds_color_line": "#525256",
         "ds_color_area": "#525256",
         "ds_filled": false,
-        "ds_invert": false,
+        "ds_invert": true,
         "ds_legend": null,
         "ds_stack": false,
         "ds_order": 2,
@@ -153,7 +153,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip maximum time",
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -182,8 +182,8 @@
     },
     {
       "metric_id": 4,
-      "metric": "centreon-server: rtmin",
-      "metric_legend": "centreon-server: rtmin",
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -199,7 +199,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip minimum time",
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -228,18 +228,18 @@
     }
   ],
   "times": [
-    "2024-06-19t10:50:00+02:00",
-    "2024-06-19t10:55:00+02:00",
-    "2024-06-19t11:00:00+02:00",
-    "2024-06-19t11:05:00+02:00",
-    "2024-06-19t11:10:00+02:00",
-    "2024-06-19t11:15:00+02:00",
-    "2024-06-19t11:20:00+02:00",
-    "2024-06-19t11:25:00+02:00",
-    "2024-06-19t11:30:00+02:00",
-    "2024-06-19t11:35:00+02:00",
-    "2024-06-19t11:40:00+02:00",
-    "2024-06-19t11:45:00+02:00",
-    "2024-06-19t11:50:00+02:00"
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
   ]
 }

package/src/components/Zoom/Zoom.tsx

@@ -1,6 +1,6 @@
-import { type MutableRefObject } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
 import { TransformMatrix } from '@visx/zoom/lib/types';
+import { type MutableRefObject } from 'react';
 
 import { ParentSize } from '../..';