@centreon/ui 24.4.1-MON-37085-fix-fullscreen.0 → 24.4.1-MON-34407-implement-the-status-chart-widget.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-37085-fix-fullscreen.0",
+  "version": "24.4.1-MON-34407-implement-the-status-chart-widget.12",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -35,7 +35,8 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column'
+  legendDirection = 'column',
+  labelNoDataFound = defaultlabelNoDataFound
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -90,7 +91,7 @@ const BarStack = ({
       >
         {title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
         )}
         <div
@@ -144,8 +145,9 @@ const BarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key}>
+                          <g data-testid={bar.key} onClick={onClick}>
                             <rect
+                              cursor="pointer"
                               fill={bar.color}
                               height={
                                 isVerticalBar ? bar.height - 1 : bar.height
@@ -155,7 +157,6 @@ const BarStack = ({
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
-                              onClick={onClick}
                             />
                             {displayValues &&
                               bar.height > 10 &&

package/src/Graph/BarStack/models.ts

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

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,7 +54,8 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column'
+  legendDirection = 'column',
+  labelNoDataFound = defaultlabelNoDataFound
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -109,7 +110,7 @@ const ResponsivePie = ({
       >
         {equals(variant, 'pie') && title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {title}
+            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
         )}
         <div
@@ -178,6 +179,7 @@ const ResponsivePie = ({
                       >
                         <g data-testid={arc.data.label} onClick={onClick}>
                           <path
+                            cursor="pointer"
                             d={pie.path(arc) as string}
                             fill={arc.data.color}
                           />
@@ -224,7 +226,7 @@ const ResponsivePie = ({
                     fill={theme.palette.text.primary}
                     textAnchor="middle"
                   >
-                    {title}
+                    {t(title)}
                   </Text>
                 </>
               )}

package/src/Graph/PieChart/models.ts

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

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -22,8 +22,6 @@ const ChildComponent = (): JSX.Element => {
       <Button onClick={() => toggleFullscreen(document.body)}>
         {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
       </Button>
-      <input id="input" />
-      <textarea id="textarea" />
     </div>
   );
 };
@@ -96,35 +94,16 @@ describe('Fullscreen', () => {
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['F']);
+    cy.get('#test').realPress(['Alt', 'F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'true')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['F']);
+    cy.get('#test').realPress(['Alt', 'F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
   });
-
-  ['input', 'textarea'].forEach((tag) => {
-    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
-      initialize();
-
-      cy.get('#test')
-        .should('have.attr', 'data-fullscreenActivated', 'false')
-        .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-      cy.get(`#${tag}`).focus();
-
-      cy.get('#test').realPress(['F']);
-
-      cy.get('#test')
-        .should('have.attr', 'data-fullscreenActivated', 'false')
-        .should('have.attr', 'data-fullscreenEnabled', 'true');
-      cy.get(`#${tag}`).should('have.value', 'F');
-    });
-  });
 });

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { equals, includes } from 'ramda';
+import { equals } from 'ramda';
 import { useSearchParams } from 'react-router-dom';
 
 import { useDeepCompare } from '../useMemoComponent';
@@ -16,10 +16,7 @@ export const useFullscreenListener = (): boolean => {
     useFullscreen();
 
   const toggle = (event: KeyboardEvent): void => {
-    if (
-      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
-      !equals(event.code, 'KeyF')
-    ) {
+    if (!event.altKey || !equals(event.code, 'KeyF')) {
       return;
     }