@centreon/ui 24.9.1 → 24.9.3

package/package.json

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

package/src/Graph/PieChart/PieChart.styles.ts

@@ -1,8 +1,8 @@
 import { lt } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-export const usePieStyles = makeStyles<{ reverse: boolean; svgSize: number }>()(
-  (theme, { reverse, svgSize }) => ({
+export const usePieStyles = makeStyles<{ svgSize: number }>()(
+  (theme, { svgSize }) => ({
     container: {
       alignItems: 'center',
       display: 'flex',
@@ -25,7 +25,7 @@ export const usePieStyles = makeStyles<{ reverse: boolean; svgSize: number }>()(
     svgWrapper: {
       alignItems: 'center',
       display: 'flex',
-      flexDirection: reverse ? 'column-reverse' : 'column',
+      flexDirection: 'column',
       gap: theme.spacing(1),
       justifyContent: 'center'
     },

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -42,8 +42,6 @@ const getTooltipPlacement = ({ radianX, radianY }): Placement => {
 
 const ResponsivePie = ({
   title,
-  titlePosition,
-  displayTitle = true,
   variant = 'pie',
   width,
   height,
@@ -92,10 +90,7 @@ const ResponsivePie = ({
   const isSmall = lt(width, 130);
   const mustDisplayLegend = isTooSmallForLegend ? false : displayLegend;
 
-  const { classes } = usePieStyles({
-    reverse: equals(titlePosition, 'bottom'),
-    svgSize
-  });
+  const { classes } = usePieStyles({ svgSize });
 
   return (
     <div
@@ -110,16 +105,12 @@ const ResponsivePie = ({
           minHeight: equals(variant, 'donut') && isSmall ? 'auto' : height
         }}
       >
-        {(equals(variant, 'pie') ||
-          isSmall ||
-          (equals(variant, 'donut') && equals(titlePosition, 'bottom'))) &&
-          title &&
-          displayTitle && (
-            <div className={classes.title} data-testid="Title" ref={titleRef}>
-              {`${displayTotal ? numeral(total).format('0a').toUpperCase() : ''} `}
-              {t(title)}
-            </div>
-          )}
+        {(equals(variant, 'pie') || isSmall) && title && (
+          <div className={classes.title} data-testid="Title" ref={titleRef}>
+            {`${displayTotal ? numeral(total).format('0a').toUpperCase() : ''} `}
+            {t(title)}
+          </div>
+        )}
         <div
           className={classes.svgContainer}
           data-testid="pieChart"
@@ -232,31 +223,27 @@ const ResponsivePie = ({
                   });
                 }}
               </Pie>
-              {equals(variant, 'donut') &&
-                !isSmall &&
-                title &&
-                displayTitle &&
-                !equals(titlePosition, 'bottom') && (
-                  <>
-                    <Text
-                      className={classes.title}
-                      dy={lt(svgSize, 150) ? -10 : -15}
-                      fill={theme.palette.text.primary}
-                      textAnchor="middle"
-                    >
-                      {numeral(total).format('0a').toUpperCase()}
-                    </Text>
-                    <Text
-                      className={classes.title}
-                      data-testid="Title"
-                      dy={lt(svgSize, 150) ? 10 : 15}
-                      fill={theme.palette.text.primary}
-                      textAnchor="middle"
-                    >
-                      {t(title)}
-                    </Text>
-                  </>
-                )}
+              {equals(variant, 'donut') && !isSmall && title && (
+                <>
+                  <Text
+                    className={classes.title}
+                    dy={lt(svgSize, 150) ? -10 : -15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {numeral(total).format('0a').toUpperCase()}
+                  </Text>
+                  <Text
+                    className={classes.title}
+                    data-testid="Title"
+                    dy={lt(svgSize, 150) ? 10 : 15}
+                    fill={theme.palette.text.primary}
+                    textAnchor="middle"
+                  >
+                    {t(title)}
+                  </Text>
+                </>
+              )}
             </Group>
           </svg>
         </div>

package/src/Graph/PieChart/models.ts

@@ -9,7 +9,6 @@ export interface PieProps {
   TooltipContent?: (arcData) => JSX.Element | boolean | null;
   data: Array<ArcType>;
   displayLegend?: boolean;
-  displayTitle?: boolean;
   displayTotal?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
@@ -19,7 +18,6 @@ export interface PieProps {
   opacity: number;
   padAngle?: number;
   title?: string;
-  titlePosition?: 'default' | 'bottom';
   tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'pie' | 'donut';

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,9 +6,9 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType
+  type PopperPlacementType
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
+import type { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -80,7 +80,7 @@ const PopoverMenu = ({
   };
 
   useEffect(() => {
-    if (!canOpen) {
+    if (!canOpen && isOpen) {
       close();
     }
   }, [canOpen]);