@centreon/ui 26.3.7 → 26.3.9

package/package.json

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

package/src/Graph/Chart/index.tsx

@@ -5,6 +5,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/pt';
 
+import { NoData } from '@centreon/ui';
+
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
@@ -81,7 +83,6 @@ const WrapperChart = ({
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
-
   const { adjustedData } = useChartData({ data, end, start });
 
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -112,7 +113,7 @@ const WrapperChart = ({
   }
 
   if (!adjustedData) {
-    return <div />;
+    return <NoData />;
   }
 
   return (

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/Axes/index.tsx

@@ -73,7 +73,7 @@ const Axes = ({
         tickFormat={formatAxisTick}
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
-          dx: isHorizontal ? 16 : -4
+          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -4)
         })}
         top={isHorizontal ? height - margin.bottom : 0}
       />

package/src/Graph/common/Axes/models.ts

@@ -18,6 +18,7 @@ export interface AxisYRight extends Axis {
 
 export interface AxisX {
   xAxisTickFormat?: string;
+  dx?: number;
 }
 export interface Data
   extends Omit<ChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {

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

@@ -7,6 +7,7 @@ export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Thresho
 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';