@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Chart/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx

@@ -1,10 +1,9 @@
-import { curveBasis } from '@visx/curve';
-import { LinePath } from '@visx/shape';
-
 import { useTheme } from '@mui/material/styles';
 
-import { TimeValue } from '../../../../common/timeSeries/models';
+import { curveBasis } from '@visx/curve';
+import { LinePath } from '@visx/shape';
 
+import type { TimeValue } from '../../../../common/timeSeries/models';
 import BasicThreshold from './BasicThreshold';
 
 interface Props {

package/src/Graph/Chart/BasicComponents/Lines/Threshold/helpers/index.ts

@@ -1,6 +1,6 @@
 import { isNil } from 'ramda';
 
-import {
+import type {
   ArePointsOnline,
   EnvelopeVariationFormula,
   Online,

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

@@ -7,12 +7,11 @@ import {
   ThresholdType,
   type VariationThreshold
 } from '../../../models';
-
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
+import type { WrapperThresholdLinesModel } from './models';
 import ThresholdWithPatternLines from './ThresholdWithPatternLines';
 import ThresholdWithVariation from './ThresholdWithVariation';
-import type { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {

package/src/Graph/Chart/BasicComponents/Lines/Threshold/useCoordinateCircle.ts

@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
-
 import { isNil } from 'ramda';
+import { useEffect } from 'react';
 
 import { checkArePointsOnline } from './helpers';
-import { Circle, Point } from './models';
+import type { Circle, Point } from './models';
 
 const useCoordinateCircle = ({
   timeSeries,
@@ -38,7 +37,7 @@ const useCoordinateCircle = ({
       return;
     }
     getCountDisplayedCircles?.(coordinates.length);
-  }, [coordinates.length]);
+  }, [coordinates.length, coordinates, getCountDisplayedCircles]);
 
   return coordinates;
 };

package/src/Graph/Chart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -1,18 +1,17 @@
 import { equals, isNil, prop } from 'ramda';
 
 import { getTime, getYScale } from '../../../../common/timeSeries';
-import { TimeValue } from '../../../../common/timeSeries/models';
+import type { TimeValue } from '../../../../common/timeSeries/models';
 import { displayArea } from '../../../helpers/index';
-import { ThresholdType, VariationThreshold } from '../../../models';
-
+import { ThresholdType, type VariationThreshold } from '../../../models';
 import { envelopeVariationFormula } from './helpers';
 import {
-  LinesThreshold,
-  ScaleVariationThreshold,
-  WrapperThresholdLinesModel,
   findLineOfOriginMetricThreshold,
+  type LinesThreshold,
   lowerLineName,
-  upperLineName
+  type ScaleVariationThreshold,
+  upperLineName,
+  type WrapperThresholdLinesModel
 } from './models';
 
 interface Result extends Partial<ScaleVariationThreshold> {

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

@@ -1,7 +1,6 @@
-import type { MutableRefObject } from 'react';
-
 import type { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
+import type { MutableRefObject } from 'react';
 
 import {
   getDates,
@@ -10,13 +9,12 @@ import {
 } from '../../../common/timeSeries';
 import type { Line, TimeValue } from '../../../common/timeSeries/models';
 import { getPointRadius, getStyle } from '../../../common/utils';
+import { displayArea } from '../../helpers/index';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint, {
   getYAnchorPoint
 } from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
-import { displayArea } from '../../helpers/index';
 import type { DisplayAnchor, GlobalAreaLines, LineStyle } from '../../models';
-
 import Point from './Point';
 import RegularLine from './RegularLines';
 import useRegularLines from './RegularLines/useRegularLines';
@@ -82,9 +80,9 @@ const Lines = ({
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
-    xScale,
     hasSecondUnit,
-    maxLeftAxisCharacters
+    maxLeftAxisCharacters,
+    xScale
   };
 
   return (
@@ -110,8 +108,8 @@ const Lines = ({
 
               return (
                 <StackedLines
-                  lineStyle={lineStyle}
                   key={`stacked-${unit}`}
+                  lineStyle={lineStyle}
                   lines={lines}
                   timeSeries={stackedTimeSeries}
                   yScale={yScale}
@@ -125,8 +123,8 @@ const Lines = ({
               const [, unit] = stackedKey.split('-');
               return (
                 <StackedLines
-                  lineStyle={lineStyle}
                   key={`invert-stacked-${unit}`}
+                  lineStyle={lineStyle}
                   lines={lines}
                   timeSeries={stackedTimeSeries}
                   yScale={getYScale({
@@ -197,8 +195,8 @@ const Lines = ({
               });
 
               const style = getStyle({
-                style: lineStyle,
-                metricId: metric_id
+                metricId: metric_id,
+                style: lineStyle
               }) as LineStyle;
 
               return (
@@ -206,14 +204,14 @@ const Lines = ({
                   {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor || lineColor}
+                      hasSecondUnit={hasSecondUnit}
                       lineColor={lineColor}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
                       metric_id={metric_id}
                       timeSeries={relatedTimeSeries}
                       transparency={transparency}
                       xScale={xScale}
                       yScale={yScale}
-                      maxLeftAxisCharacters={maxLeftAxisCharacters}
-                      hasSecondUnit={hasSecondUnit}
                     />
                   )}
                   {style?.showPoints &&

package/src/Graph/Chart/BasicComponents/Lines/models.ts

@@ -1,9 +1,8 @@
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 
-import { LineChartData } from '../../../common/models';
-import { Line, TimeValue } from '../../../common/timeSeries/models';
-
-import { FactorsVariation } from './Threshold/models';
+import type { LineChartData } from '../../../common/models';
+import type { Line, TimeValue } from '../../../common/timeSeries/models';
+import type { FactorsVariation } from './Threshold/models';
 
 export interface ShapeGraphData {
   [x: string]: unknown;

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

@@ -1,10 +1,9 @@
-import { useState } from 'react';
-
-import { Provider, createStore } from 'jotai';
-
 import { userAtom } from '@centreon/ui-context';
 
-import { LineChartData } from '../common/models';
+import { createStore, Provider } from 'jotai';
+import { useState } from 'react';
+
+import type { LineChartData } from '../common/models';
 import dataCurvesWithSameColor from '../mockedData/curvesWithSameColor.json';
 import dataLastDay from '../mockedData/lastDay.json';
 import dataLastDayWithIncompleteValues from '../mockedData/lastDayWithIncompleteValues.json';
@@ -13,11 +12,9 @@ import dataPingServiceLines from '../mockedData/pingService.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
 import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
-
-import { args as argumentsData } from './helpers/doc';
-import { LineChartProps } from './models';
-
 import WrapperChart from '.';
+import { args as argumentsData } from './helpers/doc';
+import type { LineChartProps } from './models';
 import { labelAvg, labelMin } from './translatedLabels';
 
 interface Props
@@ -98,16 +95,16 @@ const initialize = ({
       <Provider store={store}>
         <WrapperChart
           {...argumentsData}
+          additionalLines={additionalLines}
           axis={axis}
+          barStyle={barStyle}
+          boundariesUnit={boundariesUnit}
           data={data as unknown as LineChartData}
           legend={legend}
           lineStyle={lineStyle}
-          barStyle={barStyle}
-          tooltip={tooltip}
-          additionalLines={additionalLines}
-          min={min}
           max={max}
-          boundariesUnit={boundariesUnit}
+          min={min}
+          tooltip={tooltip}
         />
       </Provider>
     )
@@ -488,7 +485,7 @@ describe('Line chart', () => {
     });
 
     it('displays the curve in a step style when the prop is set', () => {
-      initialize({ lineStyle: { curve: 'step' }, data: dataPingServiceLines });
+      initialize({ data: dataPingServiceLines, lineStyle: { curve: 'step' } });
 
       checkGraphWidth();
 
@@ -579,9 +576,9 @@ describe('Line chart', () => {
             dashLength: 5,
             dashOffset: 4,
             lineWidth: 1,
-            showPoints: true,
+            metricId: 13534,
             showArea: true,
-            metricId: 13534
+            showPoints: true
           }
         ]
       });
@@ -727,21 +724,21 @@ describe('Lines and bars', () => {
 
   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
         }
+      ],
+      data: dataPingServiceLinesBarsStacked,
+      lineStyle: [
+        {
+          dotOffset: 4,
+          lineWidth: 3,
+          metricId: 1,
+          showArea: false
+        }
       ]
     });
 
@@ -759,11 +756,11 @@ describe('Lines and bars', () => {
 
   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' }
-      ]
+        { color: 'red', text: 'some text', unit: 'ms', yValue: 0.15 }
+      ],
+      data: dataPingServiceLines
     });
 
     checkGraphWidth();
@@ -782,8 +779,8 @@ describe('Lines and bars', () => {
   it('displays graph according to min and max boundaries', () => {
     initialize({
       data: dataPingServiceLines,
-      min: 0.01,
-      max: 0.1
+      max: 0.1,
+      min: 0.01
     });
 
     checkGraphWidth();
@@ -800,10 +797,10 @@ describe('Lines and bars', () => {
 
   it('displays graph according to min and max boundaries for a unit', () => {
     initialize({
+      boundariesUnit: 'ms',
       data: dataPingServiceLines,
-      min: 0.01,
       max: 0.1,
-      boundariesUnit: 'ms'
+      min: 0.01
     });
 
     checkGraphWidth();
@@ -839,12 +836,12 @@ describe('Lines and bars', () => {
     initialize({
       data: dataPingServiceLines,
       legend: {
-        placement: 'bottom',
         mode: 'grid',
+        placement: 'bottom',
         showCalculations: {
-          min: true,
+          avg: false,
           max: false,
-          avg: false
+          min: true
         }
       }
     });