@centreon/ui 24.4.55 → 24.4.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.55",
+  "version": "24.4.57",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -66,7 +66,7 @@
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
@@ -145,7 +145,7 @@
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
     "@tanstack/react-query": "5.x",
-    "axios": "0.x",
+    "axios": ">= 1.6.4",
     "dayjs": "1.x",
     "formik": "2.x",
     "jotai": "2.x",

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -58,11 +58,6 @@ export const WithoutTitle: Story = {
   render: Template
 };
 
-export const WithPencentage: Story = {
-  args: { data, title: 'hosts', unit: 'percentage' },
-  render: Template
-};
-
 export const WithoutLegend: Story = {
   args: { data, displayLegend: false, title: 'hosts' },
 
@@ -74,6 +69,11 @@ export const withDisplayedValues: Story = {
   render: Template
 };
 
+export const WithPencentage: Story = {
+  args: { data, displayValues: true, title: 'hosts', unit: 'percentage' },
+  render: Template
+};
+
 export const WithTooltip: Story = {
   args: { TooltipContent, data, title: 'hosts' },
   render: Template

package/src/Graph/BarStack/BarStack.styles.ts

@@ -16,7 +16,7 @@ export const useBarStackStyles = makeStyles()((theme) => ({
   svgContainer: {
     alignItems: 'center',
     backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: theme.spacing(1.25),
     display: 'flex',
     justifyContent: 'center'
   },
@@ -31,6 +31,7 @@ export const useBarStackStyles = makeStyles()((theme) => ({
     fontSize: theme.typography.h6.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
-    padding: 0
+    padding: 0,
+    textAlign: 'center'
   }
 }));

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -5,6 +5,7 @@ import { Group } from '@visx/group';
 import numeral from 'numeral';
 import { Text } from '@visx/text';
 import { useTranslation } from 'react-i18next';
+import { equals } from 'ramda';
 
 import { Typography } from '@mui/material';
 
@@ -12,7 +13,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 +36,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 +92,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
@@ -117,6 +119,20 @@ const BarStack = ({
                 {(barStacks) =>
                   barStacks.map((barStack) =>
                     barStack.bars.map((bar) => {
+                      const shouldDisplayValues = (): boolean => {
+                        if (bar.height < 10) {
+                          return false;
+                        }
+
+                        return (
+                          (equals(unit, 'number') && bar.width > 10) ||
+                          (equals(unit, 'percentage') && bar.width > 25)
+                        );
+                      };
+
+                      const TextX = bar.x + bar.width / 2;
+                      const TextY = bar.y + bar.height / 2;
+
                       const onClick = (): void => {
                         onSingleBarClick?.(bar);
                       };
@@ -144,40 +160,38 @@ 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
                               }
                               key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={5}
+                              ry={10}
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
-                              onClick={onClick}
                             />
-                            {displayValues &&
-                              bar.height > 10 &&
-                              bar.width > 10 && (
-                                <Text
-                                  cursor="pointer"
-                                  data-testid="value"
-                                  fill="#000"
-                                  fontSize={12}
-                                  textAnchor="middle"
-                                  verticalAnchor="middle"
-                                  x={bar.x + bar.width / 2}
-                                  y={bar.y + bar.height / 2}
-                                >
-                                  {getValueByUnit({
-                                    total,
-                                    unit,
-                                    value:
-                                      barStack.bars[0].bar.data[barStack.key]
-                                  })}
-                                </Text>
-                              )}
+                            {displayValues && shouldDisplayValues() && (
+                              <Text
+                                cursor="pointer"
+                                data-testid="value"
+                                fill="#000"
+                                fontSize={12}
+                                fontWeight={600}
+                                textAnchor="middle"
+                                verticalAnchor="middle"
+                                x={TextX}
+                                y={TextY}
+                              >
+                                {getValueByUnit({
+                                  total,
+                                  unit,
+                                  value: barStack.bars[0].bar.data[barStack.key]
+                                })}
+                              </Text>
+                            )}
                           </g>
                         </Tooltip>
                       );

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/BarStack/useResponsiveBarStack.ts

@@ -55,7 +55,7 @@ const useResponsiveBarStack = ({
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
   const svgWrapperWidth = isVerticalBar
-    ? size + 24
+    ? size + 36
     : width - widthOfLegend - horizontalGap;
 
   const svgContainerSize = {
@@ -72,8 +72,7 @@ const useResponsiveBarStack = ({
 
   const yScale = isVerticalBar
     ? scaleLinear({
-        domain: [0, total],
-        nice: true
+        domain: [0, total]
       })
     : scaleBand({
         domain: [0, 0],
@@ -86,8 +85,7 @@ const useResponsiveBarStack = ({
         padding: 0
       })
     : scaleLinear({
-        domain: [0, total],
-        nice: true
+        domain: [0, total]
       });
 
   const keys = pluck('label', data);

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}
                           />
@@ -189,6 +191,7 @@ const ResponsivePie = ({
                                 dy=".33em"
                                 fill="#000"
                                 fontSize={12}
+                                fontWeight={600}
                                 pointerEvents="none"
                                 textAnchor="middle"
                                 x={x}
@@ -224,7 +227,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/Graph/PieChart/useResponsivePie.ts

@@ -41,12 +41,11 @@ export const useResponsivePie = ({
   const horizontalGap = widthOfLegend > 0 ? 16 : 0;
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
-  const svgWrapperWidth = width - widthOfLegend - horizontalGap;
-
   const svgContainerSize = Math.min(
     height - heightOfTitle - verticalGap,
     width - widthOfLegend - horizontalGap
   );
+  const svgWrapperWidth = svgContainerSize;
 
   const outerRadius = Math.min(32, svgContainerSize / 6);
 

package/src/api/index.ts

@@ -30,7 +30,7 @@ const patchData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .patch(endpoint, data, {
+      .patch(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -40,7 +40,7 @@ const postData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .post(endpoint, data, {
+      .post(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -50,7 +50,7 @@ const putData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .put(endpoint, data, {
+      .put(endpoint, JSON.stringify(data), {
         cancelToken,
         headers: contentTypeHeaders
       })