@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

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

@@ -20,13 +20,13 @@ import {
   includes,
   isEmpty,
   isNil,
-  isNotNil,
   keys,
   last,
   lt,
   map,
   negate,
   pipe,
+  pluck,
   prop,
   propEq,
   reduce,
@@ -73,7 +73,7 @@ const toTimeTickValue = (
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
     const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
       ...acc,
-      [metric_id]: data[timeIndex]
+      [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -140,6 +140,7 @@ const toLine = ({
     equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
       ? Number.parseInt(ds_data.ds_order || '0', 10)
       : null,
+  stackKey: ds_data.ds_stack_key || null,
   transparency: ds_data.ds_transparency,
   unit
 });
@@ -241,7 +242,10 @@ const getStackedMetricValues = ({
   timeSeries
 }: LinesTimeSeries): Array<number> => {
   const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
-    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
+    map(
+      (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
+      timeSeries
+    );
 
   const metricsValues = pipe(
     map(prop('metric_id')) as (metric) => Array<number>,
@@ -353,6 +357,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 +380,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 +420,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 +475,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 +514,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 +530,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 +557,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 +586,11 @@ const getYScalePerUnit = ({
         thresholdUnit,
         thresholds,
         unit,
-        valueGraphHeight
+        valueGraphHeight,
+        min,
+        max,
+        isBarChart,
+        boundariesUnit
       })
     };
   }, {});
@@ -522,15 +598,15 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = (value: number): string => {
-  return `${numeral(value).format('0.[00]a')} ms`;
+const formatTime = ({ value, unit }): string => {
+  return `${numeral(value).format('0.[00]a')} ${unit}`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime(value);
+        return formatTime({ value, unit: 'ms' });
       },
       regexps: {
         format: /(ms)/,
@@ -547,6 +623,27 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
+const registerSecondsUnitToNumeral = (): null => {
+  try {
+    numeral.register('format', 'seconds', {
+      format: (value) => {
+        return formatTime({ value, unit: 's' });
+      },
+      regexps: {
+        format: /(s)/,
+        unformat: /(s)/
+      },
+      unformat: () => ''
+    });
+
+    return null;
+  } catch (_) {
+    return null;
+  }
+};
+
+registerSecondsUnitToNumeral();
+
 const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
@@ -576,6 +673,7 @@ const formatMetricValue = ({
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
+    [equals('s'), always(' s')],
     [T, always(base1024 ? ' ib' : 'a')]
   ])(unit);
 
@@ -600,8 +698,6 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
-  const base1024 = getBase1024({ base, unit });
-
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -614,9 +710,7 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return base1024 || !unit || equals(unit, 'ms')
-    ? formattedMetricValue
-    : `${formattedMetricValue} ${unit}`;
+  return formattedMetricValue;
 };
 
 const bisectDate = bisector(identity).center;
@@ -666,6 +760,93 @@ export const formatMetricName = ({
   return metricName;
 };
 
+export const getStackedLinesTimeSeriesPerStackAndUnit = ({
+  stackedLines,
+  timeSeries,
+  invert
+}: {
+  stackedLines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  invert?: boolean;
+}): {
+  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
+    string,
+    { lines: Array<Line>; timeSeries: Array<TimeValue> }
+  >;
+  stackedKeys: Record<string, null>;
+} => {
+  const stackedKeys = stackedLines.reduce(
+    (acc, { unit, stackKey }) => ({
+      ...acc,
+      [`stacked-${unit || ''}-${stackKey ? stackKey : ''}`]: null
+    }),
+    {}
+  );
+  const stackedKeysWithOnlyStackKey = Object.keys(stackedKeys).filter(
+    (stackKey: string) => stackKey.split('-')[2]
+  );
+  const stackedKeysWithOnlyUnit = Object.keys(stackedKeys).filter(
+    (stackKey: string) => !stackKey.split('-')[2]
+  );
+
+  const stackedLinesTimeSeriesPerStackKey = stackedKeysWithOnlyStackKey.reduce(
+    (acc, stackedKey: string) => {
+      const [, stackUnit, stackKey] = stackedKey.split('-');
+      const relatedLines = stackedLines.filter(({ unit, stackKey: key }) => {
+        return stackUnit === (unit || '') && stackKey === key;
+      });
+
+      return {
+        ...acc,
+        [stackedKey]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            invert,
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
+  );
+  const affectedLinesPerStackKey = flatten(
+    pluck('lines', Object.values(stackedLinesTimeSeriesPerStackKey))
+  );
+  const stackedLinesTimeSeriesPerUnit = stackedKeysWithOnlyUnit.reduce(
+    (acc, stackedKey: string) => {
+      const [, stackUnit] = stackedKey.split('-');
+      const relatedLines = stackedLines.filter(
+        (line) =>
+          !affectedLinesPerStackKey.some(
+            (affectedLine) => line.metric_id === affectedLine.metric_id
+          ) && stackUnit === (line.unit || '')
+      );
+
+      return {
+        ...acc,
+        [stackedKey]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries,
+            invert
+          })
+        }
+      };
+    },
+    {}
+  );
+
+  return {
+    stackedLinesTimeSeriesPerStackKeyAndUnit: {
+      ...stackedLinesTimeSeriesPerStackKey,
+      ...stackedLinesTimeSeriesPerUnit
+    },
+    stackedKeys
+  };
+};
+
 export {
   getTimeSeries,
   getLineData,

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

@@ -9,7 +9,8 @@ interface DsData {
   ds_invert: string | null;
   ds_legend: string | null;
   ds_order: string | null;
-  ds_stack: string | null;
+  ds_stack: string | boolean | null;
+  ds_stack_key?: string | null;
   ds_transparency: number;
 }
 
@@ -20,7 +21,7 @@ export interface Metric {
   critical_low_threshold: number | null;
   data: Array<number | null>;
   displayAs?: 'line' | 'bar';
-  ds_data?: DsData;
+  ds_data: DsData;
   legend: string;
   maximum_value: number | null;
   metric: string;
@@ -29,6 +30,8 @@ export interface Metric {
   unit: string;
   warning_high_threshold: number | null;
   warning_low_threshold: number | null;
+  service_name: string | null;
+  host_name: string | null;
 }
 
 type TimeSeries = { timeTick: string };
@@ -54,6 +57,7 @@ export interface Line {
   minimum_value: number | null;
   name: string;
   stackOrder: number | null;
+  stackKey: string | null;
   transparency: number;
   unit: string;
 }

package/src/Graph/common/utils.ts

@@ -4,9 +4,11 @@ import {
   always,
   cond,
   equals,
+  flatten,
   gt,
   gte,
   head,
+  isEmpty,
   isNil,
   last,
   length,
@@ -18,10 +20,12 @@ 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';
+import { formatMetricValueWithUnit } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
@@ -220,23 +224,29 @@ export const getFormattedAxisValues = ({
   lines,
   threshold
 }: GetFormattedAxisValuesProps): Array<string> => {
-  const metricId = (lines.find(({ unit }) => equals(unit, axisUnit)) as Line)
-    ?.metric_id;
+  const filteredMetrics = lines.filter(({ unit }) => equals(unit, axisUnit));
 
-  if (isNil(metricId)) {
+  if (isEmpty(filteredMetrics)) {
     return [];
   }
-  const formattedData = timeSeries.map((data) =>
-    formatMetricValue({
-      value: data[metricId],
-      unit: axisUnit,
-      base
-    })
+
+  const metricIds = pluck('metric_id', filteredMetrics);
+
+  const formattedData = metricIds.map((metricId) =>
+    timeSeries.map((data) =>
+      formatMetricValueWithUnit({
+        value: data[metricId],
+        unit: axisUnit,
+        base
+      })
+    )
   );
 
+  const flattenedFormattedData = flatten(formattedData);
+
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
-        formatMetricValue({
+        formatMetricValueWithUnit({
           value,
           unit: axisUnit,
           base
@@ -244,7 +254,30 @@ export const getFormattedAxisValues = ({
       ) || []
     : [];
 
-  return formattedData
+  return flattenedFormattedData
     .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();
+
+  const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');
+
+  if (!hoursDiffInGraph) {
+    return 0;
+  }
+
+  return Math.round(8 / hoursDiffInGraph);
+};

package/src/Graph/index.ts

@@ -1,3 +1,4 @@
+export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
 export { default as LineChart } from './Chart';
 export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
 export { default as useLineChartData } from './Chart/useChartData';
@@ -5,13 +6,14 @@ export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+export { default as Header } from './common/BaseChart/Header';
 
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
 export { Timeline } from './Timeline';
 export * from './Tree';
-export type { LineChartData } from './common/models';
+export type { LineChartData, Threshold, Thresholds } from './common/models';
 export * from './common/timeSeries';
 export type { Metric } from './common/timeSeries/models';
 export * from './Chart/models';

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -0,0 +1,74 @@
+{
+  "global": {},
+  "metrics": [
+    {
+      "metric": "count",
+      "metric_id": 1,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#4269d0",
+        "ds_color_line": "#4269d0"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "severity_text:\"Fatal\" OR severity_text:\"Error\"",
+        "period": 3600
+      },
+      "data": [
+        217, 270, 293, 300, 303, 295, 298, 283, 299, 299, 297, 285, 270, 248,
+        274, 292, 284, 47
+      ]
+    },
+    {
+      "metric": "count",
+      "metric_id": 2,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#efb118",
+        "ds_color_line": "#efb118"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "",
+        "period": 3600
+      },
+      "data": [
+        32, 825, 939, 922, 918, 939, 943, 947, 946, 909, 931, 939, 883, 907,
+        928, 904, 923, 893, 139
+      ]
+    }
+  ],
+  "times": [
+    "2025-10-04T16:19:30.000Z",
+    "2025-10-04T16:20:00.000Z",
+    "2025-10-04T16:20:30.000Z",
+    "2025-10-04T16:21:00.000Z",
+    "2025-10-04T16:21:30.000Z",
+    "2025-10-04T16:22:00.000Z",
+    "2025-10-04T16:22:30.000Z",
+    "2025-10-04T16:23:00.000Z",
+    "2025-10-04T16:23:30.000Z",
+    "2025-10-04T16:24:00.000Z",
+    "2025-10-04T16:24:30.000Z",
+    "2025-10-04T16:25:00.000Z",
+    "2025-10-04T16:25:30.000Z",
+    "2025-10-04T16:26:00.000Z",
+    "2025-10-04T16:26:30.000Z",
+    "2025-10-04T16:27:00.000Z",
+    "2025-10-04T16:27:30.000Z",
+    "2025-10-04T16:28:00.000Z",
+    "2025-10-04T16:28:30.000Z"
+  ]
+}