@centreon/ui 24.7.10 → 24.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.7.10",
+  "version": "24.7.11",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -106,8 +106,10 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
+  "peerDependencies": {
+    "@centreon/ui-context": "file:../ui-context"
+  },
   "dependencies": {
-    "@centreon/ui-context": "file:../ui-context",
     "@lexical/html": "^0.16.1",
     "@lexical/link": "^0.16.1",
     "@lexical/list": "^0.16.1",

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<{ svgSize: number }>()(
-  (theme, { svgSize }) => ({
+export const usePieStyles = makeStyles<{ reverse: boolean; svgSize: number }>()(
+  (theme, { reverse, svgSize }) => ({
     container: {
       alignItems: 'center',
       display: 'flex',
@@ -25,7 +25,7 @@ export const usePieStyles = makeStyles<{ svgSize: number }>()(
     svgWrapper: {
       alignItems: 'center',
       display: 'flex',
-      flexDirection: 'column',
+      flexDirection: reverse ? 'column-reverse' : 'column',
       gap: theme.spacing(1),
       justifyContent: 'center'
     },

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -18,7 +18,7 @@ import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
 import { useResponsivePie } from './useResponsivePie';
 
-const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
+const DefaultLegend = ({ scale, direction }: LegendProps): JSX.Element => (
   <LegendComponent direction={direction} scale={scale} />
 );
 
@@ -42,19 +42,25 @@ const getTooltipPlacement = ({ radianX, radianY }): Placement => {
 
 const ResponsivePie = ({
   title,
+  titlePosition,
+  displayTitle = true,
   variant = 'pie',
   width,
   height,
   data,
   unit = 'number',
-  Legend = DefaultLengd,
+  Legend = DefaultLegend,
   displayLegend = true,
+  displayTotal = true,
   innerRadius: defaultInnerRadius = 40,
+  innerRadiusNoLimit = false,
   onArcClick,
+  padAngle = 0,
   displayValues,
   TooltipContent,
   legendDirection = 'column',
-  tooltipProps = {}
+  tooltipProps = {},
+  opacity = 1
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -74,6 +80,7 @@ const ResponsivePie = ({
     data,
     defaultInnerRadius,
     height,
+    innerRadiusNoLimit,
     legendRef,
     titleRef,
     unit,
@@ -85,7 +92,10 @@ const ResponsivePie = ({
   const isSmall = lt(width, 130);
   const mustDisplayLegend = isTooSmallForLegend ? false : displayLegend;
 
-  const { classes } = usePieStyles({ svgSize });
+  const { classes } = usePieStyles({
+    reverse: equals(titlePosition, 'bottom'),
+    svgSize
+  });
 
   return (
     <div
@@ -100,11 +110,16 @@ const ResponsivePie = ({
           minHeight: equals(variant, 'donut') && isSmall ? 'auto' : height
         }}
       >
-        {(equals(variant, 'pie') || isSmall) && title && (
-          <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
-          </div>
-        )}
+        {(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>
+          )}
         <div
           className={classes.svgContainer}
           data-testid="pieChart"
@@ -123,9 +138,14 @@ const ResponsivePie = ({
                 cornerRadius={4}
                 data={data}
                 innerRadius={() => {
-                  return equals(variant, 'pie') ? 0 : half - innerRadius;
+                  const iRadius = innerRadiusNoLimit
+                    ? innerRadius
+                    : half - innerRadius;
+
+                  return equals(variant, 'pie') ? 0 : iRadius;
                 }}
                 outerRadius={half}
+                padAngle={padAngle}
                 pieValue={(items) => items.value}
               >
                 {(pie) => {
@@ -187,6 +207,7 @@ const ResponsivePie = ({
                                 data-testid="value"
                                 dy=".33em"
                                 fill="#000"
+                                fillOpacity={opacity}
                                 fontSize={12}
                                 fontWeight={600}
                                 pointerEvents="none"
@@ -207,27 +228,31 @@ const ResponsivePie = ({
                   });
                 }}
               </Pie>
-              {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>
-                </>
-              )}
+              {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>
+                  </>
+                )}
             </Group>
           </svg>
         </div>

package/src/Graph/PieChart/models.ts

@@ -9,11 +9,17 @@ export interface PieProps {
   TooltipContent?: (arcData) => JSX.Element | boolean | null;
   data: Array<ArcType>;
   displayLegend?: boolean;
+  displayTitle?: boolean;
+  displayTotal?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
+  innerRadiusNoLimit?: boolean;
   legendDirection?: 'row' | 'column';
-  onArcClick?: (ardata) => void;
+  onArcClick?: (arcData) => void;
+  opacity: number;
+  padAngle?: number;
   title?: string;
+  titlePosition?: 'default' | 'bottom';
   tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'pie' | 'donut';

package/src/Graph/PieChart/useResponsivePie.ts

@@ -9,6 +9,7 @@ interface ResponsivePieProps {
   data: Array<ArcType>;
   defaultInnerRadius: number;
   height: number;
+  innerRadiusNoLimit: boolean;
   legendRef;
   titleRef;
   unit: 'percentage' | 'number';
@@ -31,7 +32,8 @@ export const useResponsivePie = ({
   width,
   data,
   unit,
-  defaultInnerRadius
+  defaultInnerRadius,
+  innerRadiusNoLimit
 }: ResponsivePieProps): ResponsivePieState => {
   const heightOfTitle = titleRef.current?.offsetHeight || 0;
   const widthOfLegend = legendRef.current?.offsetWidth || 0;
@@ -52,7 +54,11 @@ export const useResponsivePie = ({
 
   const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
 
-  const innerRadius = Math.min(defaultInnerRadius, svgSize / 5);
+  let innerRadius = Math.min(defaultInnerRadius, svgSize / 5);
+
+  if (innerRadiusNoLimit) {
+    innerRadius = half * defaultInnerRadius * 0.01;
+  }
 
   const legendScale = {
     domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),