@centreon/ui 24.8.7 → 24.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.8.7",
+  "version": "24.9.1",
   "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/Listing/index.tsx

@@ -9,6 +9,7 @@ import {
   findIndex,
   gt,
   gte,
+  identity,
   includes,
   isNil,
   last,
@@ -75,9 +76,9 @@ const getVisibleColumns = ({
     return columns;
   }
 
-  return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
-  ) as Array<Column>;
+  return selectedColumnIds
+    .map((id) => columns.find(propEq(id, 'id')))
+    .filter(identity) as Array<Column>;
 };
 
 interface CustomStyle {

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