@centreon/ui 25.3.1 → 25.3.3

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('exist');
+    cy.findByTestId('red-0.15').should('exist');
+
+    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/SingleBar/ThresholdLine.tsx

@@ -63,7 +63,7 @@ export const ThresholdLine = ({
         strokeDasharray="6, 6"
         strokeWidth={2}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
             ? groupMargin - lineMargin + 6
@@ -80,7 +80,7 @@ export const ThresholdLine = ({
         stroke="transparent"
         strokeWidth={5}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
             ? groupMargin - lineMargin + 5

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'}