@centreon/ui 24.5.5 → 24.5.6

package/package.json

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

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -6,12 +6,11 @@ import { equals, isNil, prop } from 'ramda';
 
 import { getTime } from '../../../../common/timeSeries';
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { getFillColor } from '../../../common';
-import { CurveType } from '../models';
+import { getCurveFactory, getFillColor } from '../../../common';
 
 interface Props {
   areaColor: string;
-  curve: CurveType;
+  curve: 'linear' | 'step' | 'natural';
   filled: boolean;
   graphHeight: number;
   highlight?: boolean;
@@ -40,8 +39,9 @@ const RegularLine = ({
   graphHeight,
   curve
 }: Props): JSX.Element => {
+  const curveType = getCurveFactory(curve);
   const props = {
-    curve,
+    curve: curveType,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric_id]),
     opacity: 1,
@@ -74,14 +74,16 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     graphHeight: prevGraphHeight,
     highlight: prevHighlight,
     xScale: prevXScale,
-    yScale: prevYScale
+    yScale: prevYScale,
+    curve: prevCurve
   } = prevProps;
   const {
     timeSeries: nextTimeSeries,
     graphHeight: nextGraphHeight,
     highlight: nextHighlight,
     xScale: nextXScale,
-    yScale: nextYScale
+    yScale: nextYScale,
+    curve: nextCurve
   } = nextProps;
 
   const prevXScaleRange = prevXScale.range();
@@ -94,6 +96,7 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     equals(prevGraphHeight, nextGraphHeight) &&
     equals(prevHighlight, nextHighlight) &&
     equals(prevXScaleRange, nextXScaleRange) &&
-    equals(prevYScaleDomain, nextYScaleDomain)
+    equals(prevYScaleDomain, nextYScaleDomain) &&
+    equals(prevCurve, nextCurve)
   );
 });

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

@@ -4,13 +4,12 @@ import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
 
 import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
-import { getFillColor } from '../../../common';
+import { getCurveFactory, getFillColor } from '../../../common';
 import { getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
 
 interface Props {
-  curve: CurveType;
+  curve: 'linear' | 'step' | 'natural';
   displayAnchor: boolean;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
@@ -26,9 +25,11 @@ const StackLines = ({
   displayAnchor,
   curve
 }: Props): JSX.Element => {
+  const curveType = getCurveFactory(curve);
+
   return (
     <Shape.AreaStack
-      curve={curve}
+      curve={curveType}
       data={timeSeries}
       defined={(d): boolean => {
         return pipe(

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -1,10 +1,9 @@
 import { Threshold } from '@visx/threshold';
 
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
 
 interface Props {
-  curve: CurveType;
+  curve: 'linear' | 'natural' | 'step';
   fillAboveArea: string;
   fillBelowArea: string;
   fillOpacity?: number;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -5,14 +5,13 @@ import { useTheme } from '@mui/material/styles';
 
 import { adjustGraphData } from '../../../helpers/index';
 import { PatternOrientation } from '../../../models';
-import { CurveType } from '../models';
 import { LineChartData } from '../../../../common/models';
 
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props {
-  curve: CurveType;
+  curve: 'linear' | 'natural' | 'step';
   data: LineChartData;
   graphHeight: number;
   id: string;

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

@@ -4,12 +4,11 @@ import { LinePath } from '@visx/shape';
 import { useTheme } from '@mui/material/styles';
 
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 
 interface Props {
-  curve: CurveType;
+  curve: 'linear' | 'natural' | 'step';
   getX: (timeValue: TimeValue) => number;
   getY0Variation: (timeValue: TimeValue) => number;
   getY1Variation: (timeValue: TimeValue) => number;

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

@@ -7,7 +7,6 @@ import {
   VariationThreshold
 } from '../../../models';
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
@@ -17,7 +16,7 @@ import { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
-  curve: CurveType;
+  curve: 'linear' | 'natural' | 'step';
   graphHeight: number;
   timeSeries: Array<TimeValue>;
 }

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

@@ -23,10 +23,9 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
-import { CurveType } from './models';
 
 interface Props extends GlobalAreaLines {
-  curve: CurveType;
+  curve: 'linear' | 'step' | 'natural';
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;

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

@@ -1,5 +1,4 @@
 import { ScaleLinear } from 'd3-scale';
-import { curveBasis } from '@visx/curve';
 
 import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { LineChartData } from '../../../common/models';
@@ -41,5 +40,3 @@ export interface Shape {
   areaStackedLines: AreaStackedLines;
   areaThreshold: AreaThreshold;
 }
-
-export type CurveType = typeof curveBasis;

package/src/Graph/LineChart/LineChart.tsx

@@ -30,7 +30,6 @@ import {
   LegendModel
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
-import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
 import { legendWidth } from './Legend/Legend.styles';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
@@ -38,7 +37,7 @@ import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphVa
 const extraMargin = 10;
 
 interface Props extends LineChartProps {
-  curve: CurveType;
+  curve: 'linear' | 'step' | 'natural';
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;

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

@@ -1,3 +1,6 @@
+import * as Curve from '@visx/curve';
+import { always, cond, equals } from 'ramda';
+
 import { alpha } from '@mui/material';
 
 const commonTickLabelProps = {
@@ -24,6 +27,16 @@ const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 const maxLinesDisplayedLegend = 11;
 
+const getCurveFactory = (
+  curve: 'linear' | 'step' | 'natural'
+): typeof Curve.curveLinear => {
+  return cond([
+    [equals('linear'), always(Curve.curveLinear)],
+    [equals('step'), always(Curve.curveStep)],
+    [equals('natural'), always(Curve.curveCatmullRom)]
+  ])(curve);
+};
+
 export {
   commonTickLabelProps,
   margin,
@@ -31,5 +44,6 @@ export {
   dateFormat,
   timeFormat,
   dateTimeFormat,
-  maxLinesDisplayedLegend
+  maxLinesDisplayedLegend,
+  getCurveFactory
 };

package/src/Graph/LineChart/index.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import { Curve } from '@visx/visx';
 
 import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -342,7 +341,7 @@ export const LineChartWithStepCurve: Story = {
   argTypes,
   args: {
     ...argumentsData,
-    curve: Curve.curveStep
+    curve: 'step'
   }
 };
 

package/src/Graph/LineChart/index.tsx

@@ -1,6 +1,5 @@
 import { MutableRefObject, useRef } from 'react';
 
-import { Curve } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -17,14 +16,13 @@ import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, LineChartProps, LegendModel } from './models';
 import useLineChartData from './useLineChartData';
-import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<LineChartProps> {
-  curve?: CurveType;
+  curve?: 'linear' | 'step' | 'natural';
   data?: LineChartData;
   end: string;
   legend: LegendModel;
@@ -52,7 +50,7 @@ const WrapperLineChart = ({
   annotationEvent,
   legend,
   header,
-  curve = Curve.curveLinear,
+  curve = 'linear',
   thresholds,
   thresholdUnit,
   limitLegend

package/src/Listing/Cell/index.tsx

@@ -95,9 +95,6 @@ const useStyles = makeStyles<StylesProps>()(
     caretMore: {
       transform: 'rotate3d(0,0,1,180deg)'
     },
-    fakeCaret: {
-      marginLeft: theme.spacing(3)
-    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -198,26 +195,23 @@ const Cell = ({
         props
       )}
     >
-      {displaySubItemsCaret &&
-        (hasSubItems ? (
-          <IconButton
-            ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-              props.row.id
-            }`}
-            size="small"
-            onClick={click}
-          >
-            <ExpandMoreIcon
-              className={cx(
-                classes.caret,
-                isSubItemsExpanded ? classes.caretMore : classes.caretLess
-              )}
-              fontSize="small"
-            />
-          </IconButton>
-        ) : (
-          <div className={classes.fakeCaret} />
-        ))}
+      {displaySubItemsCaret && hasSubItems && (
+        <IconButton
+          ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+            props.row.id
+          }`}
+          size="small"
+          onClick={click}
+        >
+          <ExpandMoreIcon
+            className={cx(
+              classes.caret,
+              isSubItemsExpanded ? classes.caretMore : classes.caretLess
+            )}
+            fontSize="small"
+          />
+        </IconButton>
+      )}
       {children}
     </TableCell>
   );

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -68,6 +68,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           data-testid="add"
           disabled={isNil(selectedContact)}
           icon={<AddCircleIcon />}
+          size="small"
           onClick={add}
         />
       </div>