@centreon/ui 25.3.0 → 25.3.2

package/package.json

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

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

@@ -83,7 +83,7 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+      cy.findByTestId('stacked-bar-3-0-0.08084').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -96,7 +96,7 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+      cy.findByTestId('stacked-bar-3-0-0.08084').should('be.visible');
 
       cy.makeSnapshot();
     });

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

@@ -195,6 +195,45 @@ export const customBarStyle: Story = {
   render: Template
 };
 
+export const customBarStyleForABar: Story = {
+  args: {
+    ...defaultArgs,
+    barStyle: [
+      {
+        opacity: 0.5,
+        radius: 0.5,
+        metricId: 10
+      },
+      {
+        opacity: 0.2,
+        radius: 0.3,
+        metricId: 1
+      }
+    ]
+  },
+  render: Template
+};
+
+export const customBarStyleForABarStacked: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStacked,
+    barStyle: [
+      {
+        opacity: 0.5,
+        radius: 0.5,
+        metricId: 10
+      },
+      {
+        opacity: 0.2,
+        radius: 0.3,
+        metricId: 1
+      }
+    ]
+  },
+  render: Template
+};
+
 export const mixedStacked: Story = {
   args: {
     ...defaultArgs,

package/src/Graph/BarChart/BarStack.tsx

@@ -5,6 +5,7 @@ import { BarRounded } from '@visx/shape';
 import { dec, equals, gt, pick } from 'ramda';
 
 import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
+import { getStyle } from '../common/utils';
 import { BarStyle } from './models';
 import { UseBarStackProps, useBarStack } from './useBarStack';
 
@@ -112,6 +113,11 @@ const BarStack = ({
               [isHorizontal ? 'top' : 'right']: shouldApplyRadiusOnTop
             };
 
+            const style = getStyle({
+              style: barStyle,
+              metricId: Number(bar.key)
+            }) as BarStyle;
+
             return (
               <BarRounded
                 {...barRoundedProps}
@@ -133,8 +139,8 @@ const BarStack = ({
                   neutralValue
                 })}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={barStyle.opacity ?? 1}
-                radius={barWidth * barStyle.radius}
+                opacity={style?.opacity || 1}
+                radius={style?.radius ? barWidth * style.radius : 0}
                 width={isHorizontal ? barWidth : Math.abs(bar.width)}
                 x={
                   isHorizontal

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -87,14 +87,15 @@ const ResponsiveBarChart = ({
       secondUnit
     });
 
-  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
-    hasSecondUnit: Boolean(secondUnit),
-    height,
-    legendDisplay: legend?.display,
-    legendPlacement: legend?.placement,
-    width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
-  });
+  const { legendRef, graphWidth, graphHeight, titleRef } =
+    useComputeBaseChartDimensions({
+      hasSecondUnit: Boolean(secondUnit),
+      height,
+      legendDisplay: legend?.display,
+      legendPlacement: legend?.placement,
+      width,
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    });
 
   const thresholdValues = flatten([
     pluck('value', thresholds?.warning || []),
@@ -192,6 +193,7 @@ const ResponsiveBarChart = ({
       lines={linesGraph}
       setLines={setLinesGraph}
       title={title}
+      titleRef={titleRef}
     >
       <Tooltip
         classes={{

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

@@ -1,15 +1,31 @@
 import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { path, all, equals, isNil, map, not, nth, pipe, prop } from 'ramda';
+import {
+  path,
+  all,
+  equals,
+  isNil,
+  map,
+  not,
+  nth,
+  pipe,
+  prop,
+  type
+} from 'ramda';
 
 import { getDates, getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
+import {
+  getPointRadius,
+  getStrokeDashArray,
+  getStyle
+} from '../../../../common/utils';
 import StackedAnchorPoint, {
   getYAnchorPoint
 } from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
+import { LineStyle } from '../../../models';
 import Point from '../Point';
 
 interface Props {
@@ -26,6 +42,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  lineStyle: LineStyle | Array<LineStyle>;
 }
 
 const StackLines = ({
@@ -34,19 +51,13 @@ const StackLines = ({
   yScale,
   xScale,
   displayAnchor,
-  curve,
-  showPoints,
-  showArea,
-  areaTransparency,
-  lineWidth,
-  dashLength,
-  dashOffset,
-  dotOffset
+  lineStyle
 }: Props): JSX.Element => {
-  const curveType = getCurveFactory(curve);
-
-  const formattedLineWidth = lineWidth ?? 2;
-
+  const curveType = getCurveFactory(
+    (equals(type(lineStyle), 'Array')
+      ? lineStyle?.[0].curve
+      : lineStyle?.curve) || 'linear'
+  );
   return (
     <Shape.AreaStack
       curve={curveType}
@@ -69,15 +80,21 @@ const StackLines = ({
           const { areaColor, transparency, lineColor, highlight, metric_id } =
             nth(index, lines) as Line;
 
-          const formattedTransparency = isNil(areaTransparency)
+          const style = getStyle({
+            style: lineStyle,
+            metricId: metric_id
+          }) as LineStyle;
+          const formattedLineWidth = style?.lineWidth ?? 2;
+
+          const formattedTransparency = isNil(style?.areaTransparency)
             ? transparency || 80
-            : areaTransparency;
+            : style.areaTransparency;
 
           return (
             <g key={`stack-${prop('key', stack)}`}>
               {displayAnchor && (
                 <StackedAnchorPoint
-                  areaColor={areaColor}
+                  areaColor={style?.areaColor}
                   lineColor={lineColor}
                   stackValues={stack as unknown as Array<StackValue>}
                   timeSeries={timeSeries}
@@ -86,13 +103,13 @@ const StackLines = ({
                   yScale={yScale}
                 />
               )}
-              {showPoints &&
+              {style?.showPoints &&
                 getDates(timeSeries).map((timeTick) => (
                   <Point
                     key={timeTick.toString()}
                     lineColor={lineColor}
                     metric_id={metric_id}
-                    radius={getPointRadius(lineWidth)}
+                    radius={getPointRadius(style?.lineWidth)}
                     timeSeries={timeSeries}
                     timeTick={timeTick}
                     xScale={xScale}
@@ -108,7 +125,7 @@ const StackLines = ({
                 d={linePath(stack) || ''}
                 data-metric={metric_id}
                 fill={
-                  equals(showArea, false)
+                  equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
                         areaColor: areaColor || lineColor,
@@ -118,10 +135,10 @@ const StackLines = ({
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}
                 strokeDasharray={getStrokeDashArray({
-                  dashLength,
-                  dashOffset,
-                  dotOffset,
-                  lineWidth: formattedLineWidth
+                  dashLength: style?.dashLength,
+                  dashOffset: style?.dashOffset,
+                  dotOffset: style?.dotOffset,
+                  lineWidth: style?.lineWidth ?? 2
                 })}
                 strokeWidth={
                   highlight

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

@@ -9,13 +9,13 @@ import {
   getYScale
 } from '../../../common/timeSeries';
 import type { Line, TimeValue } from '../../../common/timeSeries/models';
-import { getPointRadius } from '../../../common/utils';
+import { getPointRadius, getStyle } from '../../../common/utils';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint, {
   getYAnchorPoint
 } from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
-import type { DisplayAnchor, GlobalAreaLines } from '../../models';
+import type { DisplayAnchor, GlobalAreaLines, LineStyle } from '../../models';
 
 import Point from './Point';
 import RegularLine from './RegularLines';
@@ -29,33 +29,24 @@ import {
 } from './Threshold/models';
 
 interface Props extends GlobalAreaLines {
-  areaTransparency?: number;
-  curve: 'linear' | 'step' | 'natural';
-  dashLength?: number;
-  dashOffset?: number;
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
-  dotOffset?: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   height: number;
-  lineWidth?: number;
   scale?: 'linear' | 'logarithmic';
   scaleLogarithmicBase?: number;
-  showArea?: boolean;
-  showPoints?: boolean;
   timeSeries: Array<TimeValue>;
   width: number;
   xScale: ScaleLinear<number, number>;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  lineStyle: LineStyle | Array<LineStyle>;
 }
 
 const Lines = ({
-  areaTransparency,
   height,
   graphSvgRef,
   width,
   displayAnchor,
-  curve,
   yScalesPerUnit,
   xScale,
   timeSeries,
@@ -63,14 +54,9 @@ const Lines = ({
   areaThresholdLines,
   areaStackedLines,
   areaRegularLines,
-  showArea,
-  showPoints,
-  lineWidth,
-  dotOffset,
-  dashLength,
-  dashOffset,
   scale,
-  scaleLogarithmicBase
+  scaleLogarithmicBase,
+  lineStyle
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -88,18 +74,10 @@ const Lines = ({
 
   const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
-    areaTransparency,
-    curve,
-    dashLength,
-    dashOffset,
     displayAnchor: displayGuidingLines,
-    dotOffset,
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
-    lineWidth,
-    showArea,
-    showPoints,
     xScale
   };
 
@@ -119,6 +97,7 @@ const Lines = ({
           {Object.entries(stackedLinesData).map(
             ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
               <StackedLines
+                lineStyle={lineStyle}
                 key={`stacked-${unit}`}
                 lines={lines}
                 timeSeries={stackedTimeSeries}
@@ -130,6 +109,7 @@ const Lines = ({
           {Object.entries(invertedStackedLinesData).map(
             ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
               <StackedLines
+                lineStyle={lineStyle}
                 key={`invert-stacked-${unit}`}
                 lines={lines}
                 timeSeries={stackedTimeSeries}
@@ -196,6 +176,11 @@ const Lines = ({
                 timeSeries
               });
 
+              const style = getStyle({
+                style: lineStyle,
+                metricId: metric_id
+              }) as LineStyle;
+
               return (
                 <g key={metric_id}>
                   {displayGuidingLines && (
@@ -209,13 +194,13 @@ const Lines = ({
                       yScale={yScale}
                     />
                   )}
-                  {showPoints &&
+                  {style?.showPoints &&
                     getDates(relatedTimeSeries).map((timeTick) => (
                       <Point
                         key={timeTick.toString()}
                         lineColor={lineColor}
                         metric_id={metric_id}
-                        radius={getPointRadius(lineWidth)}
+                        radius={getPointRadius(style?.lineWidth)}
                         timeSeries={relatedTimeSeries}
                         timeTick={timeTick}
                         xScale={xScale}
@@ -230,21 +215,21 @@ const Lines = ({
                     ))}
                   <RegularLine
                     areaColor={areaColor || lineColor}
-                    curve={curve}
-                    dashLength={dashLength}
-                    dashOffset={dashOffset}
-                    dotOffset={dotOffset}
-                    filled={isNil(showArea) ? filled : showArea}
+                    curve={style?.curve || 'linear'}
+                    dashLength={style?.dashLength}
+                    dashOffset={style?.dashOffset}
+                    dotOffset={style?.dotOffset}
+                    filled={isNil(style?.showArea) ? filled : style.showArea}
                     graphHeight={height}
                     highlight={highlight}
                     lineColor={lineColor}
-                    lineWidth={lineWidth}
+                    lineWidth={style?.lineWidth || 2}
                     metric_id={metric_id}
                     timeSeries={relatedTimeSeries}
                     transparency={
-                      isNil(areaTransparency)
+                      isNil(style?.areaTransparency)
                         ? transparency || 80
-                        : areaTransparency
+                        : style.areaTransparency
                     }
                     unit={unit}
                     xScale={xScale}

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

@@ -9,6 +9,7 @@ import dataCurvesWithSameColor from '../mockedData/curvesWithSameColor.json';
 import dataLastDay from '../mockedData/lastDay.json';
 import dataLastDayWithIncompleteValues from '../mockedData/lastDayWithIncompleteValues.json';
 import dataLastDayWithNullValues from '../mockedData/lastDayWithNullValues.json';
+import dataPingServiceLines from '../mockedData/pingService.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
@@ -19,7 +20,10 @@ import { LineChartProps } from './models';
 import WrapperChart from '.';
 
 interface Props
-  extends Pick<LineChartProps, 'legend' | 'tooltip' | 'axis' | 'lineStyle'> {
+  extends Pick<
+    LineChartProps,
+    'legend' | 'tooltip' | 'axis' | 'lineStyle' | 'barStyle' | 'additionalLines'
+  > {
   data?: LineChartData;
 }
 
@@ -63,7 +67,9 @@ const initialize = ({
   tooltip,
   legend,
   axis,
-  lineStyle
+  lineStyle,
+  barStyle,
+  additionalLines
 }: Props): void => {
   cy.adjustViewport();
 
@@ -84,7 +90,9 @@ const initialize = ({
           data={data as unknown as LineChartData}
           legend={legend}
           lineStyle={lineStyle}
+          barStyle={barStyle}
           tooltip={tooltip}
+          additionalLines={additionalLines}
         />
       </Provider>
     )
@@ -131,7 +139,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '393');
+    .and('equal', '376.203125');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -170,7 +178,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(230, 26);
 
       cy.get('[data-metric="querytime"]').should(
         'have.attr',
@@ -182,6 +190,11 @@ describe('Line chart', () => {
         'data-highlight',
         'false'
       );
+      cy.get('[data-metric="hitratio"]').should(
+        'have.attr',
+        'data-highlight',
+        'true'
+      );
 
       cy.makeSnapshot();
     });
@@ -215,25 +228,6 @@ describe('Line chart', () => {
       cy.makeSnapshot();
     });
 
-    it('displays the tooltip a single metric when the corresponding prop is set', () => {
-      initialize({ tooltip: { mode: 'single', sortOrder: 'name' } });
-
-      checkGraphWidth();
-
-      cy.contains('Min: 70.31').should('be.visible');
-
-      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
-
-      cy.get('[data-metric="hitratio"]').should(
-        'have.attr',
-        'data-highlight',
-        'true'
-      );
-      cy.get('[data-metric="querytime"]').should('not.exist');
-
-      cy.makeSnapshot();
-    });
-
     it('does not display the tooltip when the corresponding prop is set', () => {
       initialize({ tooltip: { mode: 'hidden', sortOrder: 'name' } });
 
@@ -443,7 +437,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 312.508173777963)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 145.04834208635688)"]').should(
         'be.visible'
       );
 
@@ -479,15 +473,14 @@ describe('Line chart', () => {
     });
 
     it('displays the curve in a step style when the prop is set', () => {
-      initialize({ lineStyle: { curve: 'step' } });
+      initialize({ lineStyle: { curve: 'step' }, data: dataPingServiceLines });
 
       checkGraphWidth();
 
       cy.contains(':00 AM').should('be.visible');
-      cy.get('[data-metric="13536"]').should('be.visible');
-      cy.get('[data-metric="13534"]').should('be.visible');
-      cy.get('[data-metric="13535"]').should('be.visible');
-      checkLegendInformation();
+      cy.get('[data-metric="1"]').should('be.visible');
+      cy.get('[data-metric="2"]').should('be.visible');
+      cy.get('[data-metric="3"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -525,7 +518,8 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="37.625"]').should('be.visible');
+      cy.get('circle[cx="250.83333333333334"]').should('be.visible');
+      cy.get('circle[cy="52.93597418085514"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -552,7 +546,7 @@ describe('Line chart', () => {
         .and('equals', '4 10');
     });
 
-    it('displays lines with dots width when the prop is set', () => {
+    it('displays lines with dashes width when props are set', () => {
       initialize({ lineStyle: { dashLength: 5, dashOffset: 8 } });
 
       checkGraphWidth();
@@ -562,6 +556,31 @@ describe('Line chart', () => {
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 8');
     });
+
+    it('displays only one line with custom style when props are set', () => {
+      initialize({
+        lineStyle: [
+          {
+            dashLength: 5,
+            dashOffset: 4,
+            lineWidth: 1,
+            showPoints: true,
+            showArea: true,
+            metricId: 13534
+          }
+        ]
+      });
+
+      checkGraphWidth();
+
+      cy.contains(':00 AM').should('be.visible');
+      cy.get('path.visx-area-closed')
+        .should('have.attr', 'stroke-dasharray')
+        .and('equals', '5 4');
+      cy.get('circle[cx="33.44444444444444"]').should('be.visible');
+
+      cy.makeSnapshot();
+    });
   });
 });
 
@@ -690,4 +709,58 @@ describe('Lines and bars', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays stacked lines and bars when a line and a bar are customized', () => {
+    initialize({
+      data: dataPingServiceLinesBarsStacked,
+      lineStyle: [
+        {
+          metricId: 1,
+          showArea: false,
+          dotOffset: 4,
+          lineWidth: 3
+        }
+      ],
+      barStyle: [
+        {
+          metricId: 10,
+          opacity: 0.5,
+          radius: 0.3
+        }
+      ]
+    });
+
+    checkGraphWidth();
+
+    cy.get(
+      'path[d="M7.501377410468319,273.3424587717121 h56.51239669421488 h1v1 v100.86066622828793 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.86066622828793 v-1h1z"]'
+    ).should('be.visible');
+    cy.get(
+      'path[d="M24.05509641873278,218.3663782225586 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.86864253262454 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.86864253262454 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+    ).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays additional lines when props are set', () => {
+    initialize({
+      data: dataPingServiceLines,
+      additionalLines: [
+        { color: 'pink', unit: '%', yValue: 3 },
+        { color: 'red', unit: 'ms', yValue: 0.15, text: 'some text' }
+      ]
+    });
+
+    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('some text').should('be.visible');
+    cy.findByTestId('pink-3').should('be.visible');
+    cy.findByTestId('red-0.15').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

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

@@ -22,6 +22,7 @@ import dataLastDayThreshold from '../mockedData/lastDayThreshold.json';
 import dataLastDayWithLotOfUnits from '../mockedData/lastDayWithLotOfUnits.json';
 import dataLastMonth from '../mockedData/lastMonth.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
+import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
@@ -536,7 +537,7 @@ export const customLinesAndBars: Story = {
   render: (args) => (
     <WrapperChart
       {...args}
-      data={dataPingServiceLinesBars as unknown as LineChartData}
+      data={dataPingService as unknown as LineChartData}
     />
   )
 };
@@ -565,7 +566,7 @@ export const linesAndBars: Story = {
   render: (args) => (
     <WrapperChart
       {...args}
-      data={dataPingServiceLinesBars as unknown as LineChartData}
+      data={dataPingServiceLinesBarsMixed as unknown as LineChartData}
     />
   )
 };
@@ -695,3 +696,24 @@ export const customYUnits: Story = {
   args: argumentsData,
   render: (args) => <CustomYUnits {...args} />
 };
+
+export const WithAdditionalLines: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    additionalLines: [
+      {
+        yValue: 3,
+        text: 'my text',
+        color: 'grey',
+        unit: '%'
+      }
+    ]
+  },
+  render: (args) => (
+    <WrapperChart
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/Chart/Chart.tsx

@@ -13,6 +13,7 @@ import { ClickAwayListener, Skeleton } from '@mui/material';
 
 import { useDeepCompare } from '../../utils';
 import BarGroup from '../BarChart/BarGroup';
+import AdditionalLine from '../common/BaseChart/AdditionalLine';
 import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
@@ -110,7 +111,8 @@ const Chart = ({
   thresholdUnit,
   limitLegend,
   skipIntersectionObserver,
-  transformMatrix
+  transformMatrix,
+  additionalLines
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -150,15 +152,16 @@ const Chart = ({
       secondUnit
     });
 
-  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
-    hasSecondUnit: Boolean(secondUnit),
-    height,
-    legendDisplay: legend?.display,
-    legendHeight: legend?.height,
-    legendPlacement: legend?.placement,
-    width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
-  });
+  const { legendRef, graphWidth, graphHeight, titleRef } =
+    useComputeBaseChartDimensions({
+      hasSecondUnit: Boolean(secondUnit),
+      height,
+      legendDisplay: legend?.display,
+      legendHeight: legend?.height,
+      legendPlacement: legend?.placement,
+      width,
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    });
 
   const xScale = useMemo(
     () =>
@@ -273,6 +276,7 @@ const Chart = ({
           lines={linesGraph}
           setLines={setLinesGraph}
           title={title}
+          titleRef={titleRef}
         >
           <GraphValueTooltip
             baseAxis={baseAxis}
@@ -312,20 +316,13 @@ const Chart = ({
                   )}
                   {!isEmpty(linesDisplayedAsLine) && (
                     <Lines
-                      areaTransparency={lineStyle?.areaTransparency}
-                      curve={lineStyle?.curve || 'linear'}
-                      dashLength={lineStyle?.dashLength}
-                      dashOffset={lineStyle?.dashOffset}
+                      lineStyle={lineStyle}
                       displayAnchor={displayAnchor}
                       displayedLines={linesDisplayedAsLine}
-                      dotOffset={lineStyle?.dotOffset}
                       graphSvgRef={graphSvgRef}
                       height={graphHeight - margin.top}
-                      lineWidth={lineStyle?.lineWidth}
                       scale={axis?.scale}
                       scaleLogarithmicBase={axis?.scaleLogarithmicBase}
-                      showArea={lineStyle?.showArea}
-                      showPoints={lineStyle?.showPoints}
                       timeSeries={timeSeries}
                       width={graphWidth}
                       xScale={xScale}
@@ -333,6 +330,14 @@ const Chart = ({
                       {...shapeLines}
                     />
                   )}
+                  {additionalLines?.map((additionalLine) => (
+                    <AdditionalLine
+                      key={additionalLine.yValue}
+                      {...additionalLine}
+                      graphWidth={graphWidth}
+                      yScale={yScalesPerUnit[additionalLine.unit]}
+                    />
+                  ))}
                   <InteractionWithGraph
                     annotationData={{ ...annotationEvent }}
                     commonData={{

package/src/Graph/Chart/index.tsx

@@ -70,6 +70,7 @@ const WrapperChart = ({
   limitLegend,
   getRef,
   transformMatrix,
+  additionalLines,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
@@ -126,6 +127,7 @@ const WrapperChart = ({
               width={width ?? responsiveWidth}
               zoomPreview={zoomPreview}
               skipIntersectionObserver={rest.skipIntersectionObserver}
+              additionalLines={additionalLines}
               transformMatrix={transformMatrix}
             />
           );

package/src/Graph/Chart/models.ts

@@ -8,7 +8,7 @@ import type {
   Axis as AxisYLeft,
   AxisYRight
 } from '../common/Axes/models';
-import type { LineChartData } from '../common/models';
+import type { AdditionalLineProps, LineChartData } from '../common/models';
 import type { Line, TimeValue } from '../common/timeSeries/models';
 
 import type { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
@@ -110,17 +110,18 @@ export interface LineStyle {
 export interface LineChartProps {
   annotationEvent?: AnnotationEvent;
   axis?: ChartAxis;
-  barStyle?: BarStyle;
+  barStyle?: BarStyle | Array<BarStyle & { metricId: number }>;
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;
   legend?: LegendModel;
-  lineStyle?: LineStyle;
+  lineStyle?: LineStyle | Array<LineStyle & { metricId: number }>;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;
   zoomPreview?: InteractedZone;
   skipIntersectionObserver?: boolean;
+  additionalLines?: Array<AdditionalLineProps>;
 }
 
 export interface Area {

package/src/Graph/Tree/Tree.stories.tsx

@@ -156,5 +156,8 @@ export const treeWithZoom: Story = {
       getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
-  render: TreeWithZoom
+  render: TreeWithZoom,
+  parameters: {
+    chromatic: { disableSnapshot: true }
+  }
 };

package/src/Graph/common/Axes/index.tsx

@@ -46,7 +46,7 @@ const Axes = ({
 
   const [, secondUnit] = getUnits(lines);
 
-  const xTickCount = Math.min(Math.ceil(width / 82), 12);
+  const xTickCount = Math.floor(Math.min(width / 100, 12));
 
   const domain = xScale.domain();
 

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { AdditionalLineProps } from '../models';
+
+interface Props extends AdditionalLineProps {
+  graphWidth: number;
+  yScale;
+}
+
+const AdditionalLine = ({
+  yValue,
+  color,
+  text,
+  graphWidth,
+  yScale
+}: Props): JSX.Element => {
+  const positionY = useMemo(() => yScale(yValue), [yValue, yScale]);
+
+  return (
+    <g>
+      {text && (
+        <text x={8} y={positionY - 8} fill={color} style={{ fontSize: '10px' }}>
+          {text}
+        </text>
+      )}
+      <line
+        x1={0}
+        x2={graphWidth}
+        y1={positionY}
+        y2={positionY}
+        stroke={color}
+        data-testid={`${color}-${yValue}`}
+      />
+    </g>
+  );
+};
+
+export default AdditionalLine;

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

@@ -23,6 +23,7 @@ interface Props {
     displayLegend: boolean;
     legendHeight?: number;
   };
+  titleRef: MutableRefObject<HTMLDivElement | null>;
   legendRef: MutableRefObject<HTMLDivElement | null>;
   limitLegend?: number | false;
   lines: Array<Line>;
@@ -42,6 +43,7 @@ const BaseChart = ({
   setLines,
   children,
   legendRef,
+  titleRef,
   title,
   header,
   isHorizontal = true
@@ -68,7 +70,9 @@ const BaseChart = ({
 
   return (
     <>
-      <Header header={header} title={title} />
+      <div ref={titleRef}>
+        <Header header={header} title={title} ref={titleRef} />
+      </div>
       <div className={classes.container}>
         <Stack
           direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -19,13 +19,11 @@ const Header = ({ title, header }: Props): JSX.Element => {
     Component: (
       <div className={classes.header}>
         <div />
-        <div>
-          {displayTitle && (
-            <Typography align="center" variant="body1">
-              {title}
-            </Typography>
-          )}
-        </div>
+        {displayTitle && (
+          <Typography align="center" variant="body1" className={classes.title}>
+            {title}
+          </Typography>
+        )}
         {header?.extraComponent}
       </div>
     ),

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -3,7 +3,11 @@ import { makeStyles } from 'tss-react/mui';
 export const ussHeaderChartStyles = makeStyles()({
   header: {
     display: 'grid',
-    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    gridTemplateColumns: 'auto 1fr auto',
     width: '100%'
+  },
+  title: {
+    whiteSpace: 'pre-wrap',
+    lineHeight: '1.2'
   }
 });

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

@@ -21,6 +21,7 @@ interface UseComputeBaseChartDimensionsState {
   graphHeight: number;
   graphWidth: number;
   legendRef: MutableRefObject<HTMLDivElement | null>;
+  titleRef: MutableRefObject<HTMLDivElement | null>;
 }
 
 export const useComputeBaseChartDimensions = ({
@@ -33,6 +34,7 @@ export const useComputeBaseChartDimensions = ({
   maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const legendRef = useRef<HTMLDivElement | null>(null);
+  const titleRef = useRef<HTMLDivElement | null>(null);
 
   const currentLegendHeight =
     legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
@@ -57,12 +59,17 @@ export const useComputeBaseChartDimensions = ({
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) - margin.top - 5 - legendBoundingHeight
+      ? (height || 0) -
+        margin.top -
+        legendBoundingHeight -
+        (titleRef.current?.getBoundingClientRect().height || 0) -
+        5
       : 0;
 
   return {
     graphHeight,
     graphWidth,
-    legendRef
+    legendRef,
+    titleRef
   };
 };

package/src/Graph/common/models.ts

@@ -16,3 +16,10 @@ export interface Thresholds {
   enabled: boolean;
   warning: Array<Threshold>;
 }
+
+export interface AdditionalLineProps {
+  yValue: number;
+  text?: string;
+  color: string;
+  unit: string;
+}

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

@@ -581,7 +581,7 @@ const formatMetricValue = ({
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/iB/g, unit);
+    .replace(/(iB|B)/g, unit);
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;

package/src/Graph/common/utils.ts

@@ -12,11 +12,14 @@ import {
   length,
   lt,
   lte,
-  pluck
+  pluck,
+  type
 } from 'ramda';
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
+import { BarStyle } from '../BarChart/models';
+import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
 import { formatMetricValue } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
@@ -182,6 +185,24 @@ export const commonTickLabelProps = {
   textAnchor: 'middle'
 };
 
+interface GetStyleProps {
+  metricId?: number;
+  style:
+    | LineStyle
+    | BarStyle
+    | Array<LineStyle & { metricId: number }>
+    | Array<BarStyle & { metricId: number }>;
+}
+
+export const getStyle = ({
+  style,
+  metricId
+}: GetStyleProps): BarStyle | LineStyle => {
+  return equals(type(style), 'Array')
+    ? style.find((metricStyle) => equals(metricId, metricStyle.metricId))
+    : style;
+};
+
 interface GetFormattedAxisValuesProps {
   thresholdUnit?: string;
   axisUnit: string;

package/src/Graph/mockedData/lastDayWithNullValues.json

@@ -329,20 +329,7 @@
         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,
@@ -667,18 +654,10 @@
         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,
@@ -1003,20 +982,7 @@
         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/pingService.json

@@ -62,7 +62,7 @@
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 1,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0
@@ -99,7 +99,7 @@
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 1,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0
@@ -144,7 +144,7 @@
         "ds_filled": false,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 2,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0

package/src/api/useGraphQuery/index.ts

@@ -130,7 +130,9 @@ const useGraphQuery = ({
         parameters: {
           search: {
             lists: resources.map((resource) => ({
-              field: resourceTypeQueryParameter[resource.resourceType],
+              field: equals(resource.resourceType, 'hostgroup')
+                ? resourceTypeQueryParameter[WidgetResourceType.hostGroup]
+                : resourceTypeQueryParameter[resource.resourceType],
               values: equals(resource.resourceType, 'service')
                 ? pluck('name', resource.resources)
                 : pluck('id', resource.resources)