@centreon/ui 24.4.61 → 24.4.63

package/package.json

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

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -10,13 +10,6 @@ const defaultData = [
   { color: '#FF6666', label: 'Down', value: 62 }
 ];
 
-const dataWithNullValues = [
-  { color: '#88B922', label: 'Ok', value: 0 },
-  { color: '#999999', label: 'Unknown', value: 0 },
-  { color: '#F7931A', label: 'Warning', value: 0 },
-  { color: '#FF6666', label: 'Down', value: 0 }
-];
-
 const total = Math.floor(
   defaultData.reduce((acc, { value }) => acc + value, 0)
 );
@@ -143,12 +136,4 @@ describe('Bar stack', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays a message "No Data Available" when all values are null', () => {
-    initialize({ data: dataWithNullValues, title: 'host' });
-
-    cy.contains('No Data Available');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -7,13 +7,10 @@ import { Text } from '@visx/text';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
-import { Typography } from '@mui/material';
-
 import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -36,8 +33,7 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -56,8 +52,7 @@ const BarStack = ({
     yScale,
     svgWrapperWidth,
     svgContainerSize,
-    isVerticalBar,
-    areAllValuesNull
+    isVerticalBar
   } = useResponsiveBarStack({
     data,
     height,
@@ -73,14 +68,6 @@ const BarStack = ({
     ? BarStackVertical
     : BarStackHorizontal;
 
-  if (areAllValuesNull) {
-    return (
-      <div className={classes.container} style={{ height, width }}>
-        <Typography variant="h3">{t(labelNoDataFound)}</Typography>
-      </div>
-    );
-  }
-
   return (
     <div className={classes.container} style={{ height, width }}>
       <div

package/src/Graph/BarStack/models.ts

@@ -10,7 +10,6 @@ export type BarStackProps = {
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
   size?: number;

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,5 +1,5 @@
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, isEmpty, pluck, reject } from 'ramda';
+import { equals, pluck } from 'ramda';
 
 import { getValueByUnit } from '../common/utils';
 import { LegendScale } from '../Legend/models';
@@ -22,7 +22,6 @@ interface useBarStackProps {
   width: number;
 }
 interface useBarStackState {
-  areAllValuesNull: boolean;
   barSize: Size;
   colorScale;
   input;
@@ -114,12 +113,7 @@ const useResponsiveBarStack = ({
     return acc;
   }, {});
 
-  const values = pluck('value', data);
-
-  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
-
   return {
-    areAllValuesNull,
     barSize,
     colorScale,
     input,

package/src/Graph/PieChart/PieChart.cypress.spec.tsx

@@ -10,13 +10,6 @@ const defaultData = [
   { color: '#FF6666', label: 'Down', value: 62 }
 ];
 
-const dataWithNullValues = [
-  { color: '#88B922', label: 'Ok', value: 0 },
-  { color: '#999999', label: 'Unknown', value: 0 },
-  { color: '#F7931A', label: 'Warning', value: 0 },
-  { color: '#FF6666', label: 'Down', value: 0 }
-];
-
 const total = Math.floor(
   defaultData.reduce((acc, { value }) => acc + value, 0)
 );
@@ -158,12 +151,4 @@ describe('Pie chart', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays a message "No Data Available" when all values are null', () => {
-    initialize({ data: dataWithNullValues, title: 'host' });
-
-    cy.contains('No Data Available');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -7,13 +7,12 @@ import numeral from 'numeral';
 import { always, equals, gt, ifElse, lt } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 
 import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,8 +53,7 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -71,8 +69,7 @@ const ResponsivePie = ({
     svgWrapperWidth,
     total,
     innerRadius,
-    isContainsExactlyOneNonZeroValue,
-    areAllValuesNull
+    isContainsExactlyOneNonZeroValue
   } = useResponsivePie({
     data,
     defaultInnerRadius,
@@ -85,14 +82,6 @@ const ResponsivePie = ({
 
   const { classes } = usePieStyles({ svgSize });
 
-  if (areAllValuesNull) {
-    return (
-      <div className={classes.container} style={{ height, width }}>
-        <Typography variant="h3">{t(labelNoDataFound)}</Typography>
-      </div>
-    );
-  }
-
   return (
     <div
       className={classes.container}

package/src/Graph/PieChart/models.ts

@@ -11,7 +11,6 @@ export interface PieProps {
   displayLegend?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;

package/src/Graph/PieChart/useResponsivePie.ts

@@ -1,4 +1,4 @@
-import { equals, isEmpty, pluck, reject } from 'ramda';
+import { equals, pluck, reject } from 'ramda';
 
 import { LegendScale } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
@@ -16,7 +16,6 @@ interface ResponsivePieProps {
 }
 
 interface ResponsivePieState {
-  areAllValuesNull: boolean;
   half: number;
   innerRadius: number;
   isContainsExactlyOneNonZeroValue: boolean;
@@ -69,10 +68,7 @@ export const useResponsivePie = ({
     1
   );
 
-  const areAllValuesNull = isEmpty(reject((value) => equals(value, 0), values));
-
   return {
-    areAllValuesNull,
     half,
     innerRadius,
     isContainsExactlyOneNonZeroValue,

package/src/ThemeProvider/index.tsx

@@ -184,6 +184,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;

package/src/utils/useFullscreen/useFullscreen.ts

@@ -53,7 +53,7 @@ export const useFullscreen = (): UseFullscreenState => {
   };
 
   const toggleFullscreen = (element: HTMLElement | null): void => {
-    if (isFullscreenActivated) {
+    if (isFullscreenActivated || document.fullscreenElement) {
       exitFullscreen();
 
       return;

package/src/Graph/translatedLabels.ts

@@ -1 +0,0 @@
-export const labelNoDataFound = 'No Data Available';