@centreon/ui 25.10.21 → 25.10.22

package/package.json

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

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

@@ -4,11 +4,12 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
+import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
-import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
+import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -321,4 +322,13 @@ describe('Bar chart', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the stacked bar chart with bars stacked together', () => {
+    initialize({ data: dataPingServiceLinesStackKeys });
+
+    cy.findByTestId('stacked-bar-3-0-0.05336').should('be.visible');
+    cy.findByTestId('stacked-bar-4-0-0.06684').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

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

@@ -5,6 +5,7 @@ import { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
 
 import { ClickAwayListener } from '@mui/material';
 import { useState } from 'react';
@@ -301,3 +302,11 @@ export const withLegendSecondaryClick: Story = {
     />
   )
 };
+
+export const stackKey: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStackeKey
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,12 +1,13 @@
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
-import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { difference, equals, keys, omit, pick } from 'ramda';
 import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
   getSortedStackedLines,
+  getStackedLinesTimeSeriesPerStackAndUnit,
   getTime,
   getTimeSeriesForLines,
   getUnits
@@ -54,41 +55,18 @@ const BarGroup = ({
   );
 
   const stackedLines = getSortedStackedLines(lines);
-  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
-
-  const stackedKeys = stackedUnits.reduce(
-    (acc, unit) => ({
-      ...acc,
-      [`stacked-${unit}`]: null
-    }),
-    {}
-  );
-  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = stackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
-
   const notStackedTimeSeries = getTimeSeriesForLines({
     lines: notStackedLines,
     timeSeries
   });
 
+  const { stackedLinesTimeSeriesPerStackKeyAndUnit, stackedKeys } = useMemo(
+    () =>
+      getStackedLinesTimeSeriesPerStackAndUnit({ stackedLines, timeSeries }),
+    [stackedLines, timeSeries]
+  );
+
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
     ...stackedKeys
@@ -98,6 +76,16 @@ const BarGroup = ({
     deps: [normalizedTimeSeries],
     variable: keys(omit(['timeTick'], normalizedTimeSeries[0]))
   });
+  const sortedLineKeys = lineKeys.sort((lineKeyA: string, lineKeyB: string) => {
+    if (lineKeyA.startsWith('stacked-') && !lineKeyB.startsWith('stacked-')) {
+      return true;
+    }
+
+    const lineKeysA = lineKeyA.split('-');
+    const lineKeysB = lineKeyB.split('-');
+
+    return lineKeysA[2] === '' && lineKeysB[2] !== '';
+  });
   const colors = useDeepMemo({
     deps: [lineKeys, lines],
     variable: lineKeys.map((key) => {
@@ -154,7 +142,7 @@ const BarGroup = ({
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
-      keys={lineKeys}
+      keys={sortedLineKeys}
       {...barComponentBaseProps}
     >
       {(barGroups) =>
@@ -164,7 +152,9 @@ const BarGroup = ({
               key={`bar-group-${barGroup.index}-${barGroup.x0}`}
               barGroup={barGroup}
               barStyle={barStyle}
-              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              stackedLinesTimeSeriesPerStackKeyAndUnit={
+                stackedLinesTimeSeriesPerStackKeyAndUnit
+              }
               notStackedTimeSeries={notStackedTimeSeries}
               notStackedLines={notStackedLines}
               isTooltipHidden={isTooltipHidden}

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
   isTooltipHidden: boolean;
   barStyle: BarStyle;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-  stackedLinesTimeSeriesPerUnit: Record<
+  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
     string,
     { lines: Array<Line>; timeSeries: Array<TimeValue> }
   >;
@@ -25,7 +25,7 @@ interface Props {
 
 const MemoizedGroup = ({
   barGroup,
-  stackedLinesTimeSeriesPerUnit,
+  stackedLinesTimeSeriesPerStackKeyAndUnit,
   notStackedLines,
   notStackedTimeSeries,
   isHorizontal,
@@ -38,9 +38,7 @@ const MemoizedGroup = ({
   const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
     if (key.startsWith('stacked-')) {
       const timeValueBar =
-        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
-          barIndex
-        ];
+        stackedLinesTimeSeriesPerStackKeyAndUnit[key].timeSeries[barIndex];
 
       return Object.values(omit(['timeTick'], timeValueBar)).every(
         (value) => !value
@@ -59,13 +57,12 @@ const MemoizedGroup = ({
       {barGroup.bars.map((bar) => {
         const isStackedBar = bar.key.startsWith('stacked-');
         const linesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
               equals(metric_id, Number(bar.key))
             ) as Line);
         const timeSeriesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-              .timeSeries
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
               timeTick: timeSerie.timeTick,
               [bar.key]: timeSerie[Number(bar.key)]
@@ -82,7 +79,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            yScale={yScalesPerUnit[bar.key.split('-')[1] || undefined]}
             neutralValue={neutralValue}
           />
         ) : (
@@ -110,8 +107,8 @@ export default memo(
   (prevProps, nextProps) =>
     equals(prevProps.barGroup, nextProps.barGroup) &&
     equals(
-      prevProps.stackedLinesTimeSeriesPerUnit,
-      nextProps.stackedLinesTimeSeriesPerUnit
+      prevProps.stackedLinesTimeSeriesPerStackKeyAndUnit,
+      nextProps.stackedLinesTimeSeriesPerStackKeyAndUnit
     ) &&
     equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
     equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -1,9 +1,7 @@
-import { equals, pluck, uniq } from 'ramda';
-
 import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
-  getTimeSeriesForLines
+  getStackedLinesTimeSeriesPerStackAndUnit
 } from '../../../../common/timeSeries';
 import { LinesData } from '../models';
 
@@ -14,53 +12,28 @@ interface StackedLinesState {
 
 const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
   const regularStackedLines = getNotInvertedStackedLines(lines);
-  const regularStackedUnits = uniq(pluck('unit', regularStackedLines));
-  const regularStackedLinesTimeSeriesPerUnit = regularStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = regularStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      regularStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: regularStackedLines,
+    timeSeries
+  });
 
   const invertedStackedLines = getInvertedStackedLines(lines);
-  const invertedStackedUnits = uniq(pluck('unit', invertedStackedLines));
-  const invertedStackedLinesTimeSeriesPerUnit = invertedStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = invertedStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
 
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            invert: true,
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      invertedStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: invertedStackedLines,
+    timeSeries,
+    invert: true
+  });
 
   return {
-    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerUnit,
-    stackedLinesData: regularStackedLinesTimeSeriesPerUnit
+    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerStackKeyAndUnit,
+    stackedLinesData: regularStackedLinesTimeSeriesPerStackKeyAndUnit
   };
 };
 

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

@@ -101,34 +101,40 @@ const Lines = ({
       {(areaStackedLines?.display ?? true) && (
         <>
           {Object.entries(stackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={yScalesPerUnit[unit || undefined]}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
           {Object.entries(invertedStackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`invert-stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={getYScale({
-                  invert: '1',
-                  scale,
-                  scaleLogarithmicBase,
-                  unit,
-                  yScalesPerUnit
-                })}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`invert-stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={getYScale({
+                    invert: '1',
+                    scale,
+                    scaleLogarithmicBase,
+                    unit: unit || undefined,
+                    yScalesPerUnit
+                  })}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
         </>
       )}

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

@@ -26,6 +26,7 @@ import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
+import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 import dataZoomPreview from '../mockedData/zoomPreview.json';
 
 import { dateTimeFormat } from './common';
@@ -791,3 +792,11 @@ export const withLegendSecondaryClick: Story = {
     />
   )
 };
+
+export const stackedKey: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    data: dataPingServiceLinesStackKeys
+  }
+};

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

@@ -185,6 +185,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'black',
           display: true,
+          displayAs: undefined,
           filled: false,
           highlight: undefined,
           invert: null,
@@ -195,6 +196,7 @@ describe('timeSeries', () => {
           metric_id: 1,
           minimum_value: 0.5,
           name: 'Round-Trip-Time Average (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -204,6 +206,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'blue',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -214,6 +217,7 @@ describe('timeSeries', () => {
           metric_id: 2,
           minimum_value: 0.5,
           name: 'Time (ms)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -223,6 +227,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -233,6 +238,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -242,6 +248,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -252,6 +259,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -261,6 +269,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -271,6 +280,7 @@ describe('timeSeries', () => {
           metric_id: 5,
           minimum_value: 0.5,
           name: 'Packet Loss (%)',
+          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: '%'
@@ -331,6 +341,7 @@ describe('timeSeries', () => {
         average_value: 1,
         color: 'black',
         display: true,
+        displayAs: undefined,
         filled: false,
         highlight: undefined,
         invert: null,
@@ -341,6 +352,7 @@ describe('timeSeries', () => {
         metric_id: 1,
         minimum_value: 0.5,
         name: 'Round-Trip-Time Average (ms)',
+        stackKey: null,
         stackOrder: null,
         transparency: 80,
         unit: 'ms'
@@ -389,6 +401,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -399,6 +412,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -408,6 +422,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -418,6 +433,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -475,6 +491,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -485,6 +502,7 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
+          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -503,6 +521,7 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
+          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -513,6 +532,7 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
+          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'

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

@@ -26,6 +26,7 @@ import {
   map,
   negate,
   pipe,
+  pluck,
   prop,
   propEq,
   reduce,
@@ -139,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
 });
@@ -758,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;
@@ -56,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/mockedData/pingServiceWithStackedKeys.json

@@ -0,0 +1,205 @@
+{
+  "global": {
+    "base": 1000,
+    "title": "Ping service"
+  },
+  "metrics": [
+    {
+      "metric_id": 2,
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "%",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Packet Loss",
+      "stack": 0,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "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,
+        null,
+        null
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
+    {
+      "metric_id": 1,
+      "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_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.04508,
+        0.0242,
+        0.03592,
+        0.01304,
+        0.025,
+        0.02748,
+        0.05296,
+        0.01864,
+        0.02688,
+        0.03676,
+        0.03696,
+        null,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 3,
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#525256",
+        "ds_color_area": "#525256",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_stack_key": "test",
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.11372,
+        0.05604,
+        0.08556,
+        0.02548,
+        0.05352,
+        0.05336,
+        0.109,
+        0.04112,
+        0.05504,
+        0.06812,
+        0.08644,
+        null,
+        null
+      ],
+      "last_value": 0.09,
+      "minimum_value": null,
+      "maximum_value": 0.11,
+      "average_value": null
+    },
+    {
+      "metric_id": 4,
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#191777",
+        "ds_color_area": "#191777",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_stack_key": "test",
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.00984,
+        0.008,
+        0.00784,
+        0.00624,
+        0.00932,
+        0.01348,
+        0.01796,
+        0.0064,
+        0.01148,
+        0.01644,
+        0.01168,
+        null,
+        null
+      ],
+      "last_value": 0.01,
+      "minimum_value": 0.01,
+      "maximum_value": null,
+      "average_value": null
+    }
+  ],
+  "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"
+  ]
+}