@centreon/ui 24.7.0 → 24.7.1

package/package.json

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

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

@@ -55,14 +55,14 @@ const WrapperThresholdLines = ({
   };
 
   const thresholdLines = areaThresholdLines?.map((item, index) => {
-    const { type } = item;
+    const { type, id } = item;
 
     if (equals(type, ThresholdType.basic)) {
       return [
         {
           Component: BasicThreshold,
           key: index,
-          props: { ...commonProps, getY0, getY1 }
+          props: { ...commonProps, getY0, getY1, id }
         }
       ];
     }
@@ -131,7 +131,7 @@ const WrapperThresholdLines = ({
     <g>
       {filteredThresholdLines.map((element) =>
         element?.map(({ Component, props, key }) => (
-          <Component {...props} id={key} key={key} />
+          <Component {...props} id={props?.id ?? key} key={key} />
         ))
       )}
     </g>

package/src/Graph/LineChart/LineChart.tsx

@@ -123,6 +123,7 @@ const LineChart = ({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
+    legendHeight: legend?.height,
     legendPlacement: legend?.placement,
     width
   });
@@ -229,6 +230,7 @@ const LineChart = ({
           height={height}
           legend={{
             displayLegend,
+            legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
             renderExtraComponent: legend?.renderExtraComponent

package/src/Graph/LineChart/index.tsx

@@ -11,6 +11,7 @@ import utcPlugin from 'dayjs/plugin/utc';
 
 import { ParentSize } from '../..';
 import { LineChartData, Thresholds } from '../common/models';
+import Loading from '../../LoadingSkeleton';
 
 import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -73,7 +74,7 @@ const WrapperLineChart = ({
   }
 
   if (!adjustedData) {
-    return null;
+    return <Loading height={height} width={width} />;
   }
 
   return (

package/src/Graph/LineChart/models.ts

@@ -154,6 +154,7 @@ export interface GlobalAreaLines {
 }
 export interface LegendModel {
   display?: boolean;
+  height?: number;
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;

package/src/Graph/common/Axes/index.tsx

@@ -45,12 +45,10 @@ const Axes = ({
 
   const xTickCount = Math.min(Math.ceil(width / 82), 12);
 
+  const [start, end] = xScale.domain();
+
   const tickFormat =
-    data?.axisX?.xAxisTickFormat ??
-    getXAxisTickFormat({
-      start: xScale.domain()[0],
-      start: xScale.domain()[-1]
-    });
+    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat({ end, start });
 
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -27,6 +27,7 @@ interface Props {
   isHorizontal?: boolean;
   legend: {
     displayLegend: boolean;
+    legendHeight?: number;
     mode?: 'grid' | 'list';
     placement?: 'left' | 'right' | 'bottom';
     renderExtraComponent?: ReactNode;
@@ -112,7 +113,10 @@ const BaseChart = ({
         </Stack>
       </div>
       {legend.displayLegend && displayLegendInBottom && (
-        <div ref={legendRef}>
+        <div
+          ref={legendRef}
+          style={{ height: legend?.legendHeight ?? 'undefined' }}
+        >
           <Legend
             base={base}
             height={height}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -4,10 +4,10 @@ import { Group } from '@visx/visx';
 import { equals } from 'ramda';
 
 import { margin } from '../../LineChart/common';
-import Grids from '../Grids';
+import { LineChartAxis } from '../../LineChart/models';
 import Axes from '../Axes';
+import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
-import { LineChartAxis } from '../../LineChart/models';
 
 import { extraMargin } from './useComputeBaseChartDimensions';
 

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -10,6 +10,7 @@ interface UseComputeBaseChartDimensionsProps {
   hasSecondUnit?: boolean;
   height: number | null;
   legendDisplay?: boolean;
+  legendHeight?: number;
   legendPlacement?: string;
   width: number;
 }
@@ -25,14 +26,18 @@ export const useComputeBaseChartDimensions = ({
   height,
   legendDisplay,
   legendPlacement,
-  hasSecondUnit
+  hasSecondUnit,
+  legendHeight
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const legendRef = useRef<HTMLDivElement | null>(null);
 
+  const currentLegendHeight =
+    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
     (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
-      ? legendRef.current?.getBoundingClientRect().height || 0
+      ? currentLegendHeight
       : 0;
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&

package/src/Graph/index.ts

@@ -1,4 +1,6 @@
 export { default as LineChart } from './LineChart';
+export { default as ThresholdLines } from './LineChart/BasicComponents/Lines/Threshold';
+export { default as useLineChartData } from './LineChart/useLineChartData';
 export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
@@ -8,3 +10,6 @@ export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
 export * from './Tree';
+export type { LineChartData } from './common/models';
+export * from './common/timeSeries';
+export * from './LineChart/models';

package/src/TimePeriods/index.tsx

@@ -9,6 +9,7 @@ import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
 import { ParentSize } from '..';
+import LoadingSkeleton from '../LoadingSkeleton';
 
 import { WrapperTimePeriodProps } from './models';
 import TimePeriods from './TimePeriods';
@@ -18,10 +19,17 @@ dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 dayjs.extend(duration);
 
-const WrapperTimePeriods = (props: WrapperTimePeriodProps): JSX.Element => (
+const WrapperTimePeriods = ({
+  skeletonHeight = 38,
+  ...rest
+}: WrapperTimePeriodProps): JSX.Element => (
   <ParentSize>
     {({ width }): JSX.Element => {
-      return <TimePeriods width={width} {...props} />;
+      return !width ? (
+        <LoadingSkeleton height={skeletonHeight} variant="rectangular" />
+      ) : (
+        <TimePeriods width={width} {...rest} />
+      );
     }}
   </ParentSize>
 );

package/src/TimePeriods/models.ts

@@ -109,4 +109,5 @@ export interface WrapperTimePeriodProps {
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;
+  skeletonHeight?: number;
 }

package/src/index.ts

@@ -158,8 +158,6 @@ export { default as FluidTypography } from './Typography/FluidTypography';
 export { default as EllipsisTypography } from './Typography/EllipsisTypography';
 export * from './Dashboard';
 export * from './Graph';
-export type { LineChartData } from './Graph/common/models';
-export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,60 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
-import { equals, propEq, reject } from 'ramda';
-
-import { Line } from '../../common/timeSeries/models';
-
-import {
-  findLineOfOriginMetricThreshold,
-  lowerLineName,
-  upperLineName
-} from './Lines/Threshold/models';
-
-interface UseFilterLines {
-  displayThreshold?: boolean;
-  lines: Array<Line>;
-  linesGraph: Array<Line> | null;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
-}
-
-interface Result {
-  displayedLines: Array<Line>;
-  newLines: Array<Line>;
-}
-
-const useFilterLines = ({
-  displayThreshold = false,
-  lines,
-  linesGraph,
-  setLinesGraph
-}: UseFilterLines): Result => {
-  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
-  const filterLines = (): Array<Line> => {
-    const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
-
-    const findLinesUpperLower = lines.map((line) =>
-      equals(line.name, lowerLineName) || equals(line.name, upperLineName)
-        ? line
-        : null
-    );
-
-    const linesUpperLower = reject((element) => !element, findLinesUpperLower);
-
-    return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
-  };
-
-  useEffect(() => {
-    const filteredLines = filterLines();
-    if (!lines || !displayThreshold) {
-      setLinesGraph(lines);
-
-      return;
-    }
-
-    setLinesGraph(filteredLines);
-  }, [lines, displayThreshold]);
-
-  return { displayedLines, newLines: linesGraph ?? lines };
-};
-
-export default useFilterLines;