@centreon/ui 24.9.0 → 24.9.2

package/package.json

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

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

@@ -1,18 +1,18 @@
 import { equals, isNil } from 'ramda';
 
-import { TimeValue } from '../../../../common/timeSeries/models';
+import type { TimeValue } from '../../../../common/timeSeries/models';
 import { displayArea } from '../../../helpers/index';
 import {
-  PatternThreshold,
+  type PatternThreshold,
   ThresholdType,
-  VariationThreshold
+  type VariationThreshold
 } from '../../../models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
 import ThresholdWithPatternLines from './ThresholdWithPatternLines';
 import ThresholdWithVariation from './ThresholdWithVariation';
-import { WrapperThresholdLinesModel } from './models';
+import type { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
@@ -52,14 +52,14 @@ const WrapperThresholdLines = ({
     timeSeries
   };
 
-  const thresholdLines = areaThresholdLines?.map((item, index) => {
+  const thresholdLines = areaThresholdLines?.map((item) => {
     const { type, id } = item;
 
     if (equals(type, ThresholdType.basic)) {
       return [
         {
           Component: BasicThreshold,
-          key: index,
+          key: id,
           props: { ...commonProps, getY0, getY1, id }
         }
       ];
@@ -73,7 +73,7 @@ const WrapperThresholdLines = ({
       return [
         {
           Component: ThresholdWithVariation,
-          key: index,
+          key: dataVariation.id,
           props: {
             factors: dataVariation.factors,
             ...commonProps,
@@ -101,13 +101,13 @@ const WrapperThresholdLines = ({
 
       const { data: pattern } = dataPattern;
 
-      return pattern.map((element, ind) => ({
+      return pattern.map((element, index) => ({
         Component: ThresholdWithPatternLines,
-        key: ind,
+        key: index,
         props: {
           data: element,
           graphHeight,
-          key: ind,
+          key: index,
           orientation: dataPattern?.orientation,
           xScale,
           yScalesPerUnit

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

@@ -1,8 +1,8 @@
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { equals, reject } from 'ramda';
 
-import { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { GlobalAreaLines, ThresholdType } from '../../../models';
+import type { Line, TimeValue } from '../../../../common/timeSeries/models';
+import { type GlobalAreaLines, ThresholdType } from '../../../models';
 
 export interface Data {
   lineColor: string;
@@ -95,7 +95,7 @@ export const findLineOfOriginMetricThreshold = (
 
   const originMetric = metrics.find((element) => element);
 
-  return reject((line: Line) => !equals(line.name, originMetric), lines);
+  return reject((line: Line) => !equals(line.metric, originMetric), lines);
 };
 
 export const canDisplayThreshold = (

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

@@ -1,6 +1,6 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
 
 import {
@@ -8,14 +8,14 @@ import {
   getTimeSeriesForLines,
   getYScale
 } from '../../../common/timeSeries';
-import { Line, TimeValue } from '../../../common/timeSeries/models';
+import type { Line, TimeValue } from '../../../common/timeSeries/models';
 import { getPointRadius } from '../../../common/utils';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint, {
   getYAnchorPoint
 } from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
-import { DisplayAnchor, GlobalAreaLines } from '../../models';
+import type { DisplayAnchor, GlobalAreaLines } from '../../models';
 
 import Point from './Point';
 import RegularLine from './RegularLines';

package/src/Graph/Chart/Chart.styles.ts

@@ -1,5 +1,13 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useChartStyles = makeStyles()({
-  tooltipChildren: { height: '100%', width: '100%' }
+  baseWrapper: {
+    position: 'relative'
+  },
+  tooltipChildren: { height: '100%', width: '100%' },
+  wrapperContainer: {
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden'
+  }
 });

package/src/Graph/Chart/Chart.tsx

@@ -1,4 +1,10 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 
 import { useAtom } from 'jotai';
 import { equals, flatten, isNil, pluck, reject } from 'ramda';
@@ -11,14 +17,14 @@ import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import Thresholds from '../common/Thresholds/Thresholds';
-import { Thresholds as ThresholdsModel } from '../common/models';
+import type { Thresholds as ThresholdsModel } from '../common/models';
 import {
   getUnits,
   getXScale,
   getXScaleBand,
   getYScalePerUnit
 } from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
+import type { Line } from '../common/timeSeries/models';
 
 import Lines from './BasicComponents/Lines';
 import {
@@ -34,7 +40,12 @@ import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import { margin } from './common';
 import { thresholdTooltipAtom } from './graphAtoms';
-import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
+import type {
+  Data,
+  GlobalAreaLines,
+  GraphInterval,
+  LineChartProps
+} from './models';
 import { useIntersection } from './useChartIntersection';
 
 interface Props extends LineChartProps {
@@ -95,6 +106,7 @@ const Chart = ({
   const [linesGraph, setLinesGraph] = useState<Array<Line>>(
     filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
   );
+
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const [thresholdTooltip, setThresholdTooltip] = useAtom(thresholdTooltipAtom);
@@ -190,7 +202,7 @@ const Chart = ({
         filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
       );
     },
-    useDeepCompare([lines])
+    useDeepCompare([lines, shapeLines?.areaThresholdLines])
   );
 
   const graphTooltipData = useGraphTooltip({
@@ -219,7 +231,7 @@ const Chart = ({
 
   return (
     <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-      <>
+      <div className={classes.baseWrapper}>
         <BaseChart
           base={baseAxis}
           graphWidth={graphWidth}
@@ -329,7 +341,7 @@ const Chart = ({
           </GraphValueTooltip>
         </BaseChart>
         {displayTooltip && <GraphTooltip {...tooltip} {...graphTooltipData} />}
-      </>
+      </div>
     </ClickAwayListener>
   );
 };

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -1,7 +1,7 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 
 import { Event } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { useSetAtom } from 'jotai';
 import {
   all,
@@ -28,9 +28,9 @@ import {
   getTimeValue,
   getYScale
 } from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
+import type { Line, TimeValue } from '../../common/timeSeries/models';
 import { margin } from '../common';
-import {
+import type {
   AnnotationEvent,
   GraphInterval,
   InteractedZone,
@@ -38,12 +38,12 @@ import {
 } from '../models';
 
 import Annotations from './Annotations';
-import { TimelineEvent } from './Annotations/models';
+import type { TimelineEvent } from './Annotations/models';
 import Bar from './Bar';
 import TimeShiftZones from './TimeShiftZones';
 import ZoomPreview from './ZoomPreview';
 import {
-  MousePosition,
+  type MousePosition,
   changeMousePositionDerivedAtom,
   eventMouseDownAtom,
   eventMouseLeaveAtom,
@@ -91,7 +91,6 @@ const InteractionWithGraph = ({
   const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
   const changeMousePosition = useSetAtom(changeMousePositionDerivedAtom);
   const setGraphTooltipData = useSetAtom(graphTooltipDataAtom);
-
   const {
     graphHeight,
     graphWidth,
@@ -246,7 +245,7 @@ const InteractionWithGraph = ({
       {displayEventAnnotations && (
         <Annotations
           data={annotationData?.data as Array<TimelineEvent>}
-          graphHeight={graphHeight}
+          graphHeight={graphHeight - margin.bottom}
           graphSvgRef={graphSvgRef}
           graphWidth={graphWidth}
           xScale={xScale}

package/src/Graph/Chart/index.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, memo, useRef } from 'react';
+import { type MutableRefObject, memo, useEffect, useRef } from 'react';
 
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
@@ -8,15 +8,15 @@ import 'dayjs/locale/pt';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
-import { equals } from 'ramda';
 
 import { ParentSize } from '../..';
 import Loading from '../../LoadingSkeleton';
-import { LineChartData, Thresholds } from '../common/models';
+import type { LineChartData, Thresholds } from '../common/models';
 
 import Chart from './Chart';
+import { useChartStyles } from './Chart.styles';
 import LoadingSkeleton from './LoadingSkeleton';
-import { GlobalAreaLines, LineChartProps } from './models';
+import type { GlobalAreaLines, LineChartProps } from './models';
 import useChartData from './useChartData';
 
 dayjs.extend(localizedFormat);
@@ -32,6 +32,8 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
+  getRef?: (ref: MutableRefObject<HTMLDivElement | null>) => void;
+  containerStyle?: string;
 }
 
 const WrapperChart = ({
@@ -61,11 +63,19 @@ const WrapperChart = ({
   barStyle,
   thresholds,
   thresholdUnit,
-  limitLegend
+  limitLegend,
+  getRef,
+  ...rest
 }: Props): JSX.Element | null => {
+  const { classes, cx } = useChartStyles();
+
   const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    getRef?.(lineChartRef);
+  }, [lineChartRef?.current]);
+
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
@@ -82,7 +92,7 @@ const WrapperChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
+      className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       <ParentSize>
         {({
@@ -118,4 +128,4 @@ const WrapperChart = ({
   );
 };
 
-export default memo(WrapperChart, equals);
+export default memo(WrapperChart);

package/src/Graph/Chart/models.ts

@@ -1,18 +1,22 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 
-import { BarStyle } from '../BarChart/models';
-import { AxisX, Axis as AxisYLeft, AxisYRight } from '../common/Axes/models';
-import { LineChartData } from '../common/models';
-import { Line, TimeValue } from '../common/timeSeries/models';
+import type { BarStyle } from '../BarChart/models';
+import type {
+  AxisX,
+  Axis as AxisYLeft,
+  AxisYRight
+} from '../common/Axes/models';
+import type { LineChartData } from '../common/models';
+import type { Line, TimeValue } from '../common/timeSeries/models';
 
-import { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
-import {
+import type { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
+import type {
   AreaRegularLines,
   AreaStackedLines
 } from './BasicComponents/Lines/models';
-import { TimelineEvent } from './InteractiveComponents/Annotations/models';
+import type { TimelineEvent } from './InteractiveComponents/Annotations/models';
 
 export interface LineChartEndpoint {
   baseUrl: string;
@@ -138,16 +142,18 @@ export interface PatternThreshold {
   data: Array<LineChartData>;
   orientation?: Array<PatternOrientation>;
   type: ThresholdType.pattern;
+  id: string;
 }
 export interface VariationThreshold {
   displayCircles?: boolean;
   factors: FactorsVariation;
   getCountDisplayedCircles?: (value: number) => void;
   type: ThresholdType.variation;
+  id: string;
 }
 
 export interface BasicThreshold {
-  id?: string;
+  id: string;
   type: ThresholdType.basic;
 }
 

package/src/Graph/Chart/useChartData.ts

@@ -13,11 +13,11 @@ import {
   toLower
 } from 'ramda';
 
-import { LineChartData } from '../common/models';
+import type { LineChartData } from '../common/models';
 import { emphasizeCurveColor } from '../common/utils';
 
 import { adjustGraphData } from './helpers';
-import { Data } from './models';
+import type { Data } from './models';
 
 interface GraphDataResult {
   adjustedData?: Data;

package/src/Graph/PieChart/PieChart.styles.ts

@@ -1,8 +1,8 @@
 import { lt } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-export const usePieStyles = makeStyles<{ reverse: boolean; svgSize: number }>()(
-  (theme, { reverse, svgSize }) => ({
+export const usePieStyles = makeStyles<{ svgSize: number }>()(
+  (theme, { svgSize }) => ({
     container: {
       alignItems: 'center',
       display: 'flex',
@@ -25,7 +25,7 @@ export const usePieStyles = makeStyles<{ reverse: boolean; svgSize: number }>()(
     svgWrapper: {
       alignItems: 'center',
       display: 'flex',
-      flexDirection: reverse ? 'column-reverse' : 'column',
+      flexDirection: 'column',
       gap: theme.spacing(1),
       justifyContent: 'center'
     },

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -42,8 +42,6 @@ const getTooltipPlacement = ({ radianX, radianY }): Placement => {
 
 const ResponsivePie = ({
   title,
-  titlePosition,
-  displayTitle = true,
   variant = 'pie',
   width,
   height,
@@ -92,10 +90,7 @@ const ResponsivePie = ({
   const isSmall = lt(width, 130);
   const mustDisplayLegend = isTooSmallForLegend ? false : displayLegend;
 
-  const { classes } = usePieStyles({
-    reverse: equals(titlePosition, 'bottom'),
-    svgSize
-  });
+  const { classes } = usePieStyles({ svgSize });
 
   return (
     <div
@@ -110,16 +105,12 @@ const ResponsivePie = ({
           minHeight: equals(variant, 'donut') && isSmall ? 'auto' : height
         }}
       >
-        {(equals(variant, 'pie') ||
-          isSmall ||
-          (equals(variant, 'donut') && equals(titlePosition, 'bottom'))) &&
-          title &&
-          displayTitle && (
-            <div className={classes.title} data-testid="Title" ref={titleRef}>
-              {`${displayTotal ? numeral(total).format('0a').toUpperCase() : ''} `}
-              {t(title)}
-            </div>
-          )}
+        {(equals(variant, 'pie') || isSmall) && title && (
+          <div className={classes.title} data-testid="Title" ref={titleRef}>
+            {`${displayTotal ? numeral(total).format('0a').toUpperCase() : ''} `}
+            {t(title)}
+          </div>
+        )}
         <div
           className={classes.svgContainer}
           data-testid="pieChart"
@@ -232,31 +223,27 @@ const ResponsivePie = ({
                   });
                 }}
               </Pie>
-              {equals(variant, 'donut') &&
-                !isSmall &&
-                title &&
-                displayTitle &&
-                !equals(titlePosition, 'bottom') && (
-                  <>
-                    <Text
-                      className={classes.title}
-                      dy={lt(svgSize, 150) ? -10 : -15}
-                      fill={theme.palette.text.primary}
-                      textAnchor="middle"
-                    >
-                      {numeral(total).format('0a').toUpperCase()}
-                    </Text>
-                    <Text
-                      className={classes.title}
-                      data-testid="Title"
-                      dy={lt(svgSize, 150) ? 10 : 15}
-                      fill={theme.palette.text.primary}
-                      textAnchor="middle"
-                    >
-                      {t(title)}
-                    </Text>
-                  </>
-                )}
+              {equals(variant, 'donut') && !isSmall && title && (
+                <>
+                  <Text
+                    className={classes.title}
+                    dy={lt(svgSize, 150) ? -10 : -15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {numeral(total).format('0a').toUpperCase()}
+                  </Text>
+                  <Text
+                    className={classes.title}
+                    data-testid="Title"
+                    dy={lt(svgSize, 150) ? 10 : 15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {t(title)}
+                  </Text>
+                </>
+              )}
             </Group>
           </svg>
         </div>

package/src/Graph/PieChart/models.ts

@@ -9,7 +9,6 @@ export interface PieProps {
   TooltipContent?: (arcData) => JSX.Element | boolean | null;
   data: Array<ArcType>;
   displayLegend?: boolean;
-  displayTitle?: boolean;
   displayTotal?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
@@ -19,7 +18,6 @@ export interface PieProps {
   opacity: number;
   padAngle?: number;
   title?: string;
-  titlePosition?: 'default' | 'bottom';
   tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'pie' | 'donut';

package/src/TimePeriods/TimePeriods.tsx

@@ -9,12 +9,12 @@ import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { lt } from 'ramda';
 
-import { Paper, Theme, useMediaQuery } from '@mui/material';
+import { Paper, type Theme, useMediaQuery } from '@mui/material';
 
 import CustomTimePeriod from './CustomTimePeriod';
 import SelectedTimePeriod from './SelectedTimePeriod';
 import { useStyles } from './TimePeriods.styles';
-import { WrapperTimePeriodProps } from './models';
+import type { WrapperTimePeriodProps } from './models';
 import useTimePeriod from './useTimePeriod';
 
 dayjs.extend(isSameOrAfter);

package/src/TimePeriods/index.tsx

@@ -11,8 +11,9 @@ import utcPlugin from 'dayjs/plugin/utc';
 import { ParentSize } from '..';
 import LoadingSkeleton from '../LoadingSkeleton';
 
+import { memo } from 'react';
 import TimePeriods from './TimePeriods';
-import { WrapperTimePeriodProps } from './models';
+import type { WrapperTimePeriodProps } from './models';
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(utcPlugin);
@@ -34,4 +35,4 @@ const WrapperTimePeriods = ({
   </ParentSize>
 );
 
-export default WrapperTimePeriods;
+export default memo(WrapperTimePeriods);

package/src/TimePeriods/models.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import dayjs from 'dayjs';
 
@@ -98,7 +98,7 @@ export interface EndStartInterval {
   start: string;
 }
 
-interface Parameters extends EndStartInterval {
+export interface Parameters extends EndStartInterval {
   timelineEventsLimit: number;
 }
 

package/src/index.ts

@@ -158,7 +158,6 @@ export { default as FluidTypography } from './Typography/FluidTypography';
 export { default as EllipsisTypography } from './Typography/EllipsisTypography';
 export * from './Dashboard';
 export * from './Graph';
-
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
 export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';

package/src/utils/index.ts

@@ -26,4 +26,5 @@ export * from './resourcesStatusURL';
 export * from '../Graph/Chart/helpers';
 export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZones';
 export * from '../TimePeriods/helpers';
+export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
 export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';