@centreon/ui 26.3.4 → 26.3.6

package/src/Form/Inputs/models.ts

@@ -1,10 +1,10 @@
-import { FormikValues } from 'formik';
+import type { SvgIconProps, TypographyProps } from '@mui/material';
 
-import { SvgIconProps, TypographyProps } from '@mui/material';
+import type { FormikValues } from 'formik';
 
-import { SelectEntry } from '../../InputField/Select';
-import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
-import { QueryParameter } from '../../queryParameters/models';
+import type { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
+import type { SelectEntry } from '../../InputField/Select';
+import type { QueryParameter } from '../../queryParameters/models';
 
 export enum InputType {
   Switch = 0,

package/src/Form/Section/FormSection.tsx

@@ -1,31 +1,33 @@
-import { Box, TabsProps } from '@mui/material';
+import { Box, type TabsProps } from '@mui/material';
+
 import { isNil } from 'ramda';
 import { useMemo } from 'react';
+
 import { Tabs } from '../../components/Tabs';
-import { Group } from '../Inputs/models';
-import { groupToTab } from './PanelTabs';
+import type { Group } from '../Inputs/models';
 import { useNavigateToSection } from './navigateToSection';
+import { groupToTab } from './PanelTabs';
 
 export interface FormSectionProps extends TabsProps {
-  groups?: Group[];
+  groups?: Array<Group>;
 }
 
 const FormSection = ({ groups }: FormSectionProps) => {
+  const navigateToSection = useNavigateToSection();
+  const tabMemo = useMemo(() => groupToTab(groups), [groups]);
+
   if (isNil(groups) || groups.length < 4) {
     return null;
   }
 
-  const navigateToSection = useNavigateToSection();
-  const tabMemo = useMemo(() => groupToTab(groups), [groups]);
-
   return (
     <Box className="sticky top-0 bg-background-paper z-100">
       <Tabs
-        variant="scrollable"
-        scrollButtons={false}
-        tabs={tabMemo}
         defaultTab={tabMemo[0].value}
         onChange={navigateToSection}
+        scrollButtons={false}
+        tabs={tabMemo}
+        variant="scrollable"
       />
     </Box>
   );

package/src/Form/Section/PanelTabs.tsx

@@ -1,12 +1,16 @@
 import { prop, sortBy } from 'ramda';
-import { TabI } from 'src/components/Tabs/Tabs';
-import { Group } from '../Inputs/models';
+import type { TabI } from 'src/components/Tabs/Tabs';
 
-const groupToTab = (groups: Array<Group>): Array<TabI> => {
+import type { Group } from '../Inputs/models';
+
+const groupToTab = (groups?: Array<Group>): Array<TabI> => {
+  if (!groups) {
+    return [];
+  }
   const sortedGroups = sortBy(prop('order'), groups);
 
   return sortedGroups.map((group) => {
-    return { value: group.name, label: group.name };
+    return { label: group.name, value: group.name };
   });
 };
 

package/src/Form/storiesData.tsx

@@ -1,18 +1,17 @@
-import { FormikValues, useFormikContext } from 'formik';
-import { equals, prop } from 'ramda';
-
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import MailIcon from '@mui/icons-material/MailOutline';
 import { Typography } from '@mui/material';
 
-import { SelectEntry } from '../InputField/Select';
-import { Listing } from '../api/models';
-
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, prop } from 'ramda';
 import { array, boolean, mixed, number, object, string } from 'yup';
+
+import type { Listing } from '../api/models';
+import type { SelectEntry } from '../InputField/Select';
 import {
-  Group,
-  InputProps,
-  InputPropsWithoutGroup,
+  type Group,
+  type InputProps,
+  type InputPropsWithoutGroup,
   InputType
 } from './Inputs/models';
 
@@ -59,6 +58,7 @@ export const basicFormValidationSchema = object().shape({
   class: selectEntryValidationSchema.nullable().required('Required'),
   custom: string().required('Custom is required'),
   email: string().email('Invalid email').required('Email is required'),
+  file: mixed(),
   group: selectEntryValidationSchema.nullable().required('Required'),
   inviteUsers: array().of(
     object({
@@ -78,8 +78,7 @@ export const basicFormValidationSchema = object().shape({
     })
   ),
   scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required')),
-  file: mixed()
+  sports: array().of(selectEntryValidationSchema.required('Required'))
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -105,6 +104,7 @@ export const basicFormInitialValues = {
   class: { id: 0, name: 'Class 0' },
   custom: '',
   email: '',
+  file: null,
   group: null,
   inviteUsers: [],
   inviteUsers2: [],
@@ -112,7 +112,7 @@ export const basicFormInitialValues = {
   language: 'French',
   name: '',
   notifications: {
-    channels: { Icon: MailIcon, checked: true, label: 'mail' },
+    channels: { checked: true, Icon: MailIcon, label: 'mail' },
     hostevents: ['ok', 'warning'],
     includeServices: { checked: true, label: 'Include services for this host' }
   },
@@ -135,8 +135,7 @@ export const basicFormInitialValues = {
     }
   ],
   scopes: [],
-  sports: [],
-  file: null
+  sports: []
 };
 
 export const classOptions = [...Array(10).keys()].map((idx) => ({
@@ -156,9 +155,9 @@ export const basicFormGroups: Array<Group> = [
   },
   {
     EndIcon: () => <HelpOutlineIcon />,
-    TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Third group',
-    order: 3
+    order: 3,
+    TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>
   },
   {
     name: 'Second group',
@@ -459,13 +458,13 @@ export const basicFormInputs: Array<InputProps> = [
   },
   {
     fieldName: 'file',
-    group: 'First group',
-    label: 'File',
-    type: InputType.File,
     file: {
       accept: 'image/*',
       multiple: true
-    }
+    },
+    group: 'First group',
+    label: 'File',
+    type: InputType.File
   }
 ];
 

package/src/Graph/BarChart/Bar.tsx

@@ -0,0 +1,126 @@
+import { ScaleType } from '@visx/scale';
+import { BarRounded } from '@visx/shape';
+import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
+import { equals } from 'ramda';
+import { ReactElement } from 'react';
+
+import { getStyle } from '../common/utils';
+import { BarStyle } from './models';
+
+interface GetFirstBarHeightProps {
+  bar: Omit<BarGroupBar<StackKey>, 'key' | 'value'> & {
+    bar: SeriesPoint<unknown>;
+    key: StackKey;
+  };
+  isHorizontal: boolean;
+  barWidth: number;
+  y: number;
+  isFirstBar: boolean;
+  yScale: ScaleType;
+  neutralValue: number;
+}
+
+const getFirstBarHeight = ({
+  bar,
+  isHorizontal,
+  barWidth,
+  y,
+  isFirstBar,
+  yScale,
+  neutralValue
+}: GetFirstBarHeightProps): number => {
+  if (!isFirstBar || !isHorizontal) {
+    return isHorizontal ? Math.abs(bar.height) : barWidth;
+  }
+
+  if (equals(bar.height, 0)) {
+    return 0;
+  }
+
+  if (isHorizontal && bar.height < 0) {
+    return bar.height;
+  }
+
+  if (isHorizontal) {
+    return Math.abs(bar.width) - (y - yScale(neutralValue));
+  }
+
+  return barWidth;
+};
+
+const getPadding = ({ padding, size, isNegativeValue }): number => {
+  if (!isNegativeValue) {
+    return padding;
+  }
+
+  return padding + size;
+};
+
+export const Bar = ({
+  barRoundedProps,
+  bar,
+  isTooltipHidden,
+  isHorizontal,
+  shouldApplyRadiusOnBottom,
+  barPadding,
+  barWidth,
+  neutralValue,
+  isNegativeValue,
+  barIndex,
+  exitBar,
+  hoverBar,
+  barY,
+  barStyle,
+  yScale
+}): ReactElement => {
+  const style = getStyle({
+    metricId: Number(bar.key),
+    style: barStyle
+  }) as BarStyle;
+  return (
+    <BarRounded
+      {...barRoundedProps}
+      data-testid={`stacked-bar-${bar.key}-${bar.index}-${bar.bar[1]}`}
+      fill={bar.color}
+      height={getFirstBarHeight({
+        bar,
+        barWidth,
+        isFirstBar: shouldApplyRadiusOnBottom,
+        isHorizontal,
+        neutralValue,
+        y: isHorizontal
+          ? getPadding({
+              isNegativeValue,
+              padding: bar.y,
+              size: bar.height
+            })
+          : barPadding,
+        yScale
+      })}
+      onMouseEnter={
+        isTooltipHidden
+          ? undefined
+          : hoverBar({
+              barIndex,
+              highlightedMetric: Number(bar.key)
+            })
+      }
+      onMouseLeave={isTooltipHidden ? undefined : exitBar}
+      opacity={style?.opacity || 1}
+      radius={style?.radius ? barWidth * style.radius : 0}
+      width={isHorizontal ? barWidth : Math.abs(bar.width)}
+      x={
+        isHorizontal
+          ? barPadding
+          : getPadding({
+              isNegativeValue,
+              padding: bar.x,
+              size: bar.width
+            })
+      }
+      y={isHorizontal ? barY : barPadding}
+    />
+  );
+};
+
+export default Bar;

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

@@ -1,18 +1,17 @@
+import { userAtom } from '@centreon/ui-context';
+
 import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
 
-import { userAtom } from '@centreon/ui-context';
-
+import { labelAvg, labelMax, labelMin } from '../Chart/translatedLabels';
 import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
-
-import { labelAvg, labelMax, labelMin } from '../Chart/translatedLabels';
-import BarChart, { BarChartProps } from './BarChart';
+import BarChart, { type BarChartProps } from './BarChart';
 
 const defaultStart = new Date(
   dayjs(Date.now()).subtract(24, 'hour').toDate().getTime()
@@ -58,10 +57,10 @@ const initialize = ({
           barStyle={barStyle}
           data={data}
           legend={legend}
+          max={max}
+          min={min}
           orientation={orientation ?? 'horizontal'}
           tooltip={tooltip}
-          min={min}
-          max={max}
           {...defaultArgs}
         />
       </div>
@@ -278,8 +277,8 @@ describe('Bar chart', () => {
   it('displays the bar chart according to min and max boundaries', () => {
     initialize({
       data: dataLastWeek,
-      min: -0.05,
-      max: 1
+      max: 1,
+      min: -0.05
     });
 
     cy.contains('05/31/2023').should('be.visible');
@@ -308,16 +307,16 @@ describe('Bar chart', () => {
   it('does not displays corresponding calculations when props are set', () => {
     initialize({
       data: dataLastWeek,
-      orientation: 'horizontal',
       legend: {
-        placement: 'bottom',
         mode: 'grid',
+        placement: 'bottom',
         showCalculations: {
-          min: true,
+          avg: false,
           max: false,
-          avg: false
+          min: true
         }
-      }
+      },
+      orientation: 'horizontal'
     });
 
     cy.contains(labelMin).should('be.visible');

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -1,15 +1,16 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import dayjs from 'dayjs';
 import '../../ThemeProvider/tailwindcss.css';
 
-import { LineChartData } from '../common/models';
+import { ClickAwayListener } from '@mui/material';
+
+import { useState } from 'react';
+
+import type { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 import dataPingServiceStackeKey from '../mockedData/pingServiceWithStackedKeys.json';
-
-import { ClickAwayListener } from '@mui/material';
-import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -48,9 +49,9 @@ export const withCenteredZero: Story = {
       isCenteredZero: true
     },
     legend: {
-      showCalculations: { avg: true, max: false, min: false },
       mode: 'grid',
-      placement: 'bottom'
+      placement: 'bottom',
+      showCalculations: { avg: true, max: false, min: false }
     }
   },
   render: Template
@@ -122,7 +123,6 @@ export const stackedVerticalCenteredZero: Story = {
 export const thresholds: Story = {
   args: {
     ...defaultArgs,
-    thresholdUnit: 'ms',
     thresholds: {
       critical: [
         {
@@ -137,7 +137,8 @@ export const thresholds: Story = {
           value: 0.05
         }
       ]
-    }
+    },
+    thresholdUnit: 'ms'
   },
   render: Template
 };
@@ -149,7 +150,6 @@ export const thresholdsVertical: Story = {
       isCenteredZero: true
     },
     orientation: 'vertical',
-    thresholdUnit: 'ms',
     thresholds: {
       critical: [
         {
@@ -164,7 +164,8 @@ export const thresholdsVertical: Story = {
           value: 0.05
         }
       ]
-    }
+    },
+    thresholdUnit: 'ms'
   },
   render: Template
 };
@@ -173,7 +174,6 @@ export const thresholdStacked: Story = {
   args: {
     ...defaultArgs,
     data: dataPingServiceStacked,
-    thresholdUnit: 'ms',
     thresholds: {
       critical: [
         {
@@ -188,7 +188,8 @@ export const thresholdStacked: Story = {
           value: 0.05
         }
       ]
-    }
+    },
+    thresholdUnit: 'ms'
   },
   render: Template
 };
@@ -209,14 +210,14 @@ export const customBarStyleForABar: Story = {
     ...defaultArgs,
     barStyle: [
       {
+        metricId: 10,
         opacity: 0.5,
-        radius: 0.5,
-        metricId: 10
+        radius: 0.5
       },
       {
+        metricId: 1,
         opacity: 0.2,
-        radius: 0.3,
-        metricId: 1
+        radius: 0.3
       }
     ]
   },
@@ -226,19 +227,19 @@ export const customBarStyleForABar: Story = {
 export const customBarStyleForABarStacked: Story = {
   args: {
     ...defaultArgs,
-    data: dataPingServiceStacked,
     barStyle: [
       {
+        metricId: 10,
         opacity: 0.5,
-        radius: 0.5,
-        metricId: 10
+        radius: 0.5
       },
       {
+        metricId: 1,
         opacity: 0.2,
-        radius: 0.3,
-        metricId: 1
+        radius: 0.3
       }
-    ]
+    ],
+    data: dataPingServiceStacked
   },
   render: Template
 };
@@ -264,8 +265,8 @@ export const mixedStackedMinMax: Story = {
   args: {
     ...defaultArgs,
     data: dataPingServiceMixedStacked,
-    min: 10,
-    max: 20
+    max: 20,
+    min: 10
   },
   render: Template
 };
@@ -287,9 +288,9 @@ const LegendSecondaryClick = (args) => {
         <ClickAwayListener onClickAway={() => setPosition(null)}>
           <div
             className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
-            style={{ left: position?.[0], top: position?.[1] }}
-            open={Boolean(position)}
             onClose={() => setPosition(null)}
+            open={Boolean(position)}
+            style={{ left: position?.[0], top: position?.[1] }}
           >
             menu
           </div>
@@ -321,9 +322,9 @@ export const withControlledCalculations: Story = {
   args: {
     ...defaultArgs,
     legend: {
-      showCalculations: { avg: true, max: false, min: false },
       mode: 'grid',
-      placement: 'bottom'
+      placement: 'bottom',
+      showCalculations: { avg: true, max: false, min: false }
     }
   },
   render: Template

package/src/Graph/BarChart/BarChart.tsx

@@ -3,23 +3,23 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/pt';
+
+import { Box } from '@mui/material';
+
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { Provider } from 'jotai';
-
-import { Box } from '@mui/material';
+import type { ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
 
 import Loading from '../../LoadingSkeleton';
 import LoadingSkeleton from '../Chart/LoadingSkeleton';
-import { LineChartProps } from '../Chart/models';
+import type { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
-import { LineChartData, Thresholds } from '../common/models';
-
-import { ReactElement } from 'react';
-import useResizeObserver from 'use-resize-observer';
+import type { LineChartData, Thresholds } from '../common/models';
+import type { BarStyle } from './models';
 import ResponsiveBarChart from './ResponsiveBarChart';
-import { BarStyle } from './models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -66,9 +66,9 @@ const BarChart = ({
     mode: 'grid',
     placement: 'bottom',
     showCalculations: {
-      min: true,
+      avg: true,
       max: true,
-      avg: true
+      min: true
     }
   },
   loading,
@@ -89,7 +89,7 @@ const BarChart = ({
   timeShiftZones,
   annotationEvent
 }: BarChartProps): ReactElement => {
-  const { adjustedData } = useChartData({ data, end, start, min, max });
+  const { adjustedData } = useChartData({ data, end, max, min, start });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
 
   if (loading && !adjustedData) {
@@ -112,28 +112,28 @@ const BarChart = ({
           <Loading height={height || '100%'} width={width} />
         ) : (
           <ResponsiveBarChart
+            annotationEvent={annotationEvent}
             axis={axis}
             barStyle={barStyle}
+            boundariesUnit={boundariesUnit}
+            end={end}
             graphData={adjustedData}
             graphRef={ref}
             header={header}
             height={height || responsiveHeight || 0}
             legend={legend}
             limitLegend={limitLegend}
+            max={max}
+            min={min}
             orientation={orientation}
-            thresholdUnit={thresholdUnit}
+            skipIntersectionObserver={skipIntersectionObserver}
+            start={start}
             thresholds={thresholds}
+            thresholdUnit={thresholdUnit}
+            timeShiftZones={timeShiftZones}
             tooltip={tooltip}
             width={width || 0}
-            skipIntersectionObserver={skipIntersectionObserver}
-            min={min}
-            max={max}
-            boundariesUnit={boundariesUnit}
             zoomPreview={zoomPreview}
-            timeShiftZones={timeShiftZones}
-            annotationEvent={annotationEvent}
-            start={start}
-            end={end}
           />
         )}
       </Box>

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,6 +1,6 @@
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { difference, equals, keys, omit, pick } from 'ramda';
 import { memo, useMemo } from 'react';
 
@@ -12,9 +12,9 @@ import {
   getTimeSeriesForLines,
   getUnits
 } from '../common/timeSeries';
-import { Line, TimeValue } from '../common/timeSeries/models';
+import type { Line, TimeValue } from '../common/timeSeries/models';
 import MemoizedGroup from './MemoizedGroup';
-import { BarStyle } from './models';
+import type { BarStyle } from './models';
 
 // Minimum value for logarithmic scale to avoid log(0)
 const minLogScaleValue = 0.001;
@@ -103,7 +103,7 @@ const BarGroup = ({
         domain: lineKeys,
         range: colors
       }),
-    [...lineKeys, ...colors]
+    [...lineKeys, ...colors, colors, lineKeys]
   );
   const metricScale = useMemo(
     () =>
@@ -112,7 +112,7 @@ const BarGroup = ({
         padding: 0.1,
         range: [0, xScale.bandwidth()]
       }),
-    [...lineKeys, xScale.bandwidth()]
+    [lineKeys, xScale.bandwidth]
   );
 
   const placeholderScale = yScalesPerUnit[firstUnit];
@@ -149,19 +149,19 @@ const BarGroup = ({
         barGroups.map((barGroup, index) => {
           return (
             <MemoizedGroup
-              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
               barGroup={barGroup}
+              barIndex={index}
               barStyle={barStyle}
+              isHorizontal={isHorizontal}
+              isTooltipHidden={isTooltipHidden}
+              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+              neutralValue={neutralValue}
+              notStackedLines={notStackedLines}
+              notStackedTimeSeries={notStackedTimeSeries}
               stackedLinesTimeSeriesPerStackKeyAndUnit={
                 stackedLinesTimeSeriesPerStackKeyAndUnit
               }
-              notStackedTimeSeries={notStackedTimeSeries}
-              notStackedLines={notStackedLines}
-              isTooltipHidden={isTooltipHidden}
-              isHorizontal={isHorizontal}
-              neutralValue={neutralValue}
               yScalesPerUnit={yScalesPerUnit}
-              barIndex={index}
             />
           );
         })