@centreon/ui 24.10.20 → 24.10.22

package/package.json

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

package/src/Graph/Chart/index.tsx

@@ -1,22 +1,23 @@
-import { RefCallback, memo, useEffect, useRef } from 'react';
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import "dayjs/locale/fr";
+import "dayjs/locale/pt";
+import { memo, useRef } from "react";
 
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/pt';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import Loading from '../../LoadingSkeleton';
-import type { LineChartData, Thresholds } from '../common/models';
+import { NoData } from "@centreon/ui";
 
-import useResizeObserver from 'use-resize-observer';
-import Chart from './Chart';
-import { useChartStyles } from './Chart.styles';
-import LoadingSkeleton from './LoadingSkeleton';
-import type { GlobalAreaLines, LineChartProps } from './models';
-import useChartData from './useChartData';
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezonePlugin from "dayjs/plugin/timezone";
+import utcPlugin from "dayjs/plugin/utc";
+import useResizeObserver from "use-resize-observer";
+import Loading from "../../LoadingSkeleton";
+import type { LineChartData, Thresholds } from "../common/models";
+import Chart from "./Chart";
+import { useChartStyles } from "./Chart.styles";
+import LoadingSkeleton from "./LoadingSkeleton";
+import type { GlobalAreaLines, LineChartProps } from "./models";
+import useChartData from "./useChartData";
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -31,8 +32,12 @@ interface Props extends Partial<LineChartProps> {
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
-  getRef?: (ref: RefCallback<Element>) => void;
+  getRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  };
 }
 
 const WrapperChart = ({
@@ -48,14 +53,14 @@ const WrapperChart = ({
   loading,
   timeShiftZones,
   tooltip = {
-    mode: 'all',
-    sortOrder: 'name'
+    mode: "all",
+    sortOrder: "name",
   },
   annotationEvent,
   legend = {
     display: true,
-    mode: 'grid',
-    placement: 'bottom'
+    mode: "grid",
+    placement: "bottom",
   },
   header,
   lineStyle,
@@ -64,18 +69,34 @@ const WrapperChart = ({
   thresholdUnit,
   limitLegend,
   getRef,
+  transformMatrix,
+  additionalLines,
+  min,
+  max,
+  boundariesUnit,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
-  const ref = useRef<HTMLDivElement | null>(null);
-
   const { adjustedData } = useChartData({ data, end, start });
-  const { width: responsiveWidth, height: responsiveHeight } =
-    useResizeObserver({ ref });
 
-  useEffect(() => {
-    getRef?.(ref);
-  }, [ref?.current]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const {
+    ref: resizeObserverRef,
+    width: responsiveWidth,
+    height: responsiveHeight,
+  } = useResizeObserver();
+
+  const combinedRef = (element: HTMLDivElement | null) => {
+    if (containerRef.current !== element) {
+      containerRef.current = element;
+      if (element) {
+        getRef?.(containerRef);
+      }
+    }
+    resizeObserverRef(element);
+  };
+
 
   if (loading && !adjustedData) {
     return (
@@ -86,13 +107,17 @@ const WrapperChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return <NoData />;
+  }
+
   return (
     <div
-      ref={ref}
+      ref={combinedRef}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
     >
       {!responsiveHeight || !data ? (
-        <Loading height={height || '100%'} width={width} />
+        <Loading height={height || "100%"} width={width} />
       ) : (
         <Chart
           annotationEvent={annotationEvent}
@@ -101,7 +126,7 @@ const WrapperChart = ({
           displayAnchor={displayAnchor}
           graphData={adjustedData}
           graphInterval={{ end, start }}
-          graphRef={ref}
+          graphRef={containerRef}
           header={header}
           height={height || responsiveHeight}
           legend={legend}
@@ -114,6 +139,12 @@ const WrapperChart = ({
           tooltip={tooltip}
           width={width || responsiveWidth || 0}
           zoomPreview={zoomPreview}
+          skipIntersectionObserver={rest.skipIntersectionObserver}
+          additionalLines={additionalLines}
+          transformMatrix={transformMatrix}
+          min={min}
+          max={max}
+          boundariesUnit={boundariesUnit}
         />
       )}
     </div>

package/src/Graph/Chart/translatedLabels.ts

@@ -7,3 +7,4 @@ export const labelDowntime = 'Downtime';
 export const labelMin = 'Min';
 export const labelMax = 'Max';
 export const labelAvg = 'Avg';
+export const labelNoDataForThisPeriod = 'No data available for this period';

package/src/Graph/common/Error/NoData.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material';
+
+import { useTranslation } from 'react-i18next';
+
+import { labelNoDataForThisPeriod } from '../../Chart/translatedLabels';
+
+const NoData = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={'flex items-center justify-center h-full'}>
+      <Typography align="center" variant="body1">
+        {t(labelNoDataForThisPeriod)}
+      </Typography>
+    </div>
+  );
+};
+
+export default NoData;

package/src/Graph/index.ts

@@ -1,20 +1,20 @@
-export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
-export { default as LineChart } from './Chart';
-export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
-export { default as useLineChartData } from './Chart/useChartData';
-export { default as BarChart } from './BarChart/BarChart';
-export { Gauge } from './Gauge';
-export { SingleBar } from './SingleBar';
-export { Text as GraphText } from './Text';
-export { default as Header } from './common/BaseChart/Header';
-
-export { HeatMap } from './HeatMap';
-export { BarStack } from './BarStack';
-export { PieChart } from './PieChart';
-export { Timeline } from './Timeline';
-export * from './Tree';
-export type { LineChartData, Threshold, Thresholds } from './common/models';
-export * from './common/timeSeries';
-export type { Metric } from './common/timeSeries/models';
-export * from './Chart/models';
-export * from './PieChart/models';
+export type { ParentSizeProps } from "@visx/responsive/lib/components/ParentSize";
+export { default as BarChart } from "./BarChart/BarChart";
+export { BarStack } from "./BarStack";
+export { default as LineChart } from "./Chart";
+export { default as ThresholdLines } from "./Chart/BasicComponents/Lines/Threshold";
+export * from "./Chart/models";
+export { default as useLineChartData } from "./Chart/useChartData";
+export { default as Header } from "./common/BaseChart/Header";
+export { default as NoData } from "./common/Error/NoData";
+export type { LineChartData, Threshold, Thresholds } from "./common/models";
+export * from "./common/timeSeries";
+export type { Metric } from "./common/timeSeries/models";
+export { Gauge } from "./Gauge";
+export { HeatMap } from "./HeatMap";
+export { PieChart } from "./PieChart";
+export * from "./PieChart/models";
+export { SingleBar } from "./SingleBar";
+export { Text as GraphText } from "./Text";
+export { Timeline } from "./Timeline";
+export * from "./Tree";