@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import ResponsiveBarStack from './BarStack';
-import { BarType } from './models';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { BarStack } from '.';
+import ResponsiveBarStack from './BarStack';
+import type { BarType } from './models';
 
 const data = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -48,7 +47,7 @@ const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
 
 const Template = (args): JSX.Element => {
   return (
-    <div style={{ width: '400px', height: '400px' }}>
+    <div style={{ height: '400px', width: '400px' }}>
       <ResponsiveBarStack {...args} />
     </div>
   );
@@ -56,7 +55,7 @@ const Template = (args): JSX.Element => {
 
 const SmallTemplate = (args): JSX.Element => {
   return (
-    <div style={{ width: '150px', height: '90px' }}>
+    <div style={{ height: '90px', width: '150px' }}>
       <ResponsiveBarStack {...args} />
     </div>
   );
@@ -89,15 +88,15 @@ export const WithPencentage: Story = {
 };
 
 export const WithTooltip: Story = {
-  args: { TooltipContent, data, title: 'hosts' },
+  args: { data, TooltipContent, title: 'hosts' },
   render: Template
 };
 
 export const WithBigNumbers: Story = {
   args: {
-    TooltipContent,
     data: dataWithBigNumbers,
     displayValues: true,
+    TooltipContent,
     title: 'hosts'
   },
   render: Template
@@ -105,9 +104,9 @@ export const WithBigNumbers: Story = {
 
 export const WithSmallNumbers: Story = {
   args: {
-    TooltipContent,
     data: dataWithSmallNumber,
     displayValues: true,
+    TooltipContent,
     title: 'hosts'
   },
   render: Template
@@ -115,22 +114,22 @@ export const WithSmallNumbers: Story = {
 
 export const Horizontal: Story = {
   args: {
-    TooltipContent,
     data,
     displayValues: true,
+    legendDirection: 'row',
+    TooltipContent,
     title: 'hosts',
-    variant: 'horizontal',
-    legendDirection: 'row'
+    variant: 'horizontal'
   },
   render: Template
 };
 
 export const HorizontalWithoutLegend: Story = {
   args: {
-    TooltipContent,
     data,
     displayLegend: false,
     displayValues: true,
+    TooltipContent,
     title: 'hosts',
     variant: 'horizontal'
   },
@@ -139,9 +138,9 @@ export const HorizontalWithoutLegend: Story = {
 
 export const SmallDisplay: Story = {
   args: {
-    TooltipContent,
     data,
     displayValues: true,
+    TooltipContent,
     title: 'hosts',
     variant: 'horizontal'
   },

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

@@ -1,49 +1,50 @@
 import { makeStyles } from 'tss-react/mui';
+
 import { legendMaxHeight, legendMaxWidth } from './constants';
 
 export const useStyles = makeStyles()({
+  clippedTitle: {
+    overflow: 'hidden',
+    textOverflow: 'clip'
+  },
   container: {
-    display: 'grid',
     '&[data-has-title="false"]': {
       gridTemplateRows: 'auto'
     },
-    '&[data-title-variant="xs"]': {
-      gridTemplateRows: '40px auto'
+    '&[data-title-variant="md"]': {
+      gridTemplateRows: '36px auto',
+      overflow: 'hidden',
+      textOverflow: 'clip'
     },
     '&[data-title-variant="sm"]': {
       gridTemplateRows: '20px auto'
     },
-    '&[data-title-variant="md"]': {
-      gridTemplateRows: '36px auto',
-      textOverflow: 'clip',
-      overflow: 'hidden'
+    '&[data-title-variant="xs"]': {
+      gridTemplateRows: '40px auto'
     },
+    display: 'grid',
     height: '100%'
-  },
-  clippedTitle: {
-    textOverflow: 'clip',
-    overflow: 'hidden'
   }
 });
 
 export const useGraphAndLegendStyles = makeStyles()((theme) => ({
   graphAndLegend: {
-    height: '100%',
-    display: 'grid',
+    '&[data-display-legend="false"][data-is-vertical="false"]': {
+      gridTemplateRows: '1fr'
+    },
+    '&[data-display-legend="true"][data-is-vertical="false"]': {
+      gap: theme.spacing(0.5),
+      gridTemplateRows: `1fr ${legendMaxHeight}px`
+    },
     '&[data-is-vertical="true"][data-display-legend="false"]': {
       gridTemplateColumns: '1fr'
     },
     '&[data-is-vertical="true"][data-display-legend="true"]': {
-      gridTemplateColumns: `1fr ${legendMaxWidth}px`,
-      gap: theme.spacing(0.5)
+      gap: theme.spacing(0.5),
+      gridTemplateColumns: `1fr ${legendMaxWidth}px`
     },
-    '&[data-display-legend="false"][data-is-vertical="false"]': {
-      gridTemplateRows: '1fr'
-    },
-    '&[data-display-legend="true"][data-is-vertical="false"]': {
-      gridTemplateRows: `1fr ${legendMaxHeight}px`,
-      gap: theme.spacing(0.5)
-    }
+    display: 'grid',
+    height: '100%'
   },
   legend: {
     '&[data-is-vertical="false"]': {
@@ -58,8 +59,8 @@ export const useGraphAndLegendStyles = makeStyles()((theme) => ({
 export const useGraphStyles = makeStyles()((theme) => ({
   tooltip: {
     backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[3],
     color: theme.palette.text.primary,
-    padding: 0,
-    boxShadow: theme.shadows[3]
+    padding: 0
   }
 }));

package/src/Graph/BarStack/BarStack.tsx

@@ -1,7 +1,6 @@
 import { ParentSize } from '../..';
-
+import type { BarStackProps } from './models';
 import ResponsiveBarStack from './ResponsiveBarStack';
-import { BarStackProps } from './models';
 
 const Bar = (props: BarStackProps): JSX.Element => (
   <ParentSize>

package/src/Graph/BarStack/Graph.tsx

@@ -6,10 +6,11 @@ import {
 import { Text } from '@visx/text';
 import { equals, props } from 'ramda';
 import { memo, useMemo } from 'react';
+
 import { Tooltip } from '../../components';
 import { getValueByUnit } from '../common/utils';
 import { useGraphStyles } from './BarStack.styles';
-import { BarStackProps } from './models';
+import type { BarStackProps } from './models';
 import { useGraphAndLegend } from './useGraphAndLegend';
 
 interface Props
@@ -29,6 +30,33 @@ interface Props
   total: number;
 }
 
+const getFitsInBar = ({ isVerticalBar, bar, unit }): boolean => {
+  if (isVerticalBar) {
+    return bar.height >= 18;
+  }
+
+  return (
+    (equals(unit, 'number') && bar.width > 15) ||
+    (equals(unit, 'percentage') && bar.width > 35)
+  );
+};
+
+const getClick = ({
+  onSingleBarClick,
+  bar
+}): ((e: MouseEvent) => void) | undefined => {
+  if (onSingleBarClick) {
+    return (e: MouseEvent): void => {
+      if (!equals(e.button, 0)) {
+        return;
+      }
+      onSingleBarClick(bar);
+    };
+  }
+
+  return undefined;
+};
+
 const Graph = ({
   width,
   height,
@@ -53,14 +81,14 @@ const Graph = ({
 
   const { barStackData, xScale, yScale, keys } = useGraphAndLegend({
     data,
-    width,
     height: normalizedHeight,
     isVerticalBar,
-    total
+    total,
+    width
   });
 
   return (
-    <svg width="100%" height={normalizedHeight}>
+    <svg height={normalizedHeight} width="100%">
       <BarStackComponent
         color={colorScale}
         data={[barStackData]}
@@ -74,27 +102,17 @@ const Graph = ({
             barStack.bars.map((bar) => {
               const isFirstBar = equals(index, 0);
               const isLastBar = equals(index, barStacks.length - 1);
-              const fitsInBar = isVerticalBar
-                ? bar.height >= 18
-                : (equals(unit, 'number') && bar.width > 15) ||
-                  (equals(unit, 'percentage') && bar.width > 35);
+              const fitsInBar = getFitsInBar({ bar, isVerticalBar, unit });
 
               const textX = bar.x + bar.width / 2;
               const textY = bar.y + bar.height / 2;
 
-              const click = onSingleBarClick
-                ? (e: MouseEvent): void => {
-                    if (!equals(e.button, 0)) {
-                      return;
-                    }
-                    onSingleBarClick(bar);
-                  }
-                : undefined;
+              const click = getClick({ bar, onSingleBarClick });
 
               return (
                 <Tooltip
-                  followCursor={false}
                   classes={classes}
+                  followCursor={false}
                   key={`bar-stack-${barStack.index}-${bar.index}`}
                   label={
                     TooltipContent && (
@@ -111,19 +129,19 @@ const Graph = ({
                 >
                   <g data-testid={bar.key} key={bar.key}>
                     <BarRounded
-                      radius={8}
+                      bottom={isVerticalBar && isFirstBar}
                       cursor={onSingleBarClick ? 'pointer' : 'default'}
                       fill={bar.color}
                       height={bar.height}
                       key={`bar-stack-${barStack.index}-${bar.index}`}
-                      width={isVerticalBar ? bar.width - 10 : bar.width}
-                      x={bar.x}
-                      y={bar.y}
                       left={!isVerticalBar && isFirstBar}
+                      onMouseDown={click}
+                      radius={8}
                       right={!isVerticalBar && isLastBar}
-                      bottom={isVerticalBar && isFirstBar}
                       top={isVerticalBar && isLastBar}
-                      onMouseDown={click}
+                      width={isVerticalBar ? bar.width - 10 : bar.width}
+                      x={bar.x}
+                      y={bar.y}
                     />
                     {displayValues && fitsInBar && (
                       <Text
@@ -132,11 +150,11 @@ const Graph = ({
                         fill="#000"
                         fontSize={12}
                         fontWeight={600}
+                        onMouseUp={click}
                         textAnchor="middle"
                         verticalAnchor="middle"
                         x={textX}
                         y={textY}
-                        onMouseUp={click}
                       >
                         {getValueByUnit({
                           total,

package/src/Graph/BarStack/GraphAndLegend.tsx

@@ -1,9 +1,10 @@
 import { equals, props } from 'ramda';
 import { memo, useMemo } from 'react';
+
 import { useGraphAndLegendStyles } from './BarStack.styles';
-import Graph from './Graph';
 import { gap, legendMaxHeight, legendMaxWidth } from './constants';
-import { BarStackProps } from './models';
+import Graph from './Graph';
+import type { BarStackProps } from './models';
 
 interface Props
   extends Pick<
@@ -73,17 +74,17 @@ const GraphAndLegend = ({
       style={{ height }}
     >
       <Graph
-        isVerticalBar={isVerticalBar}
-        data={data}
-        width={graphWidth}
-        height={graphHeight}
         colorScale={colorScale}
-        unit={unit}
-        total={total}
+        data={data}
         displayValues={displayValues}
+        height={graphHeight}
+        isVerticalBar={isVerticalBar}
         onSingleBarClick={onSingleBarClick}
-        tooltipProps={tooltipProps}
         TooltipContent={TooltipContent}
+        tooltipProps={tooltipProps}
+        total={total}
+        unit={unit}
+        width={graphWidth}
       />
       {mustDisplayLegend && (
         <div

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -1,15 +1,16 @@
-import { Legend as LegendComponent } from '../Legend';
-import { LegendProps } from '../Legend/models';
-import { useStyles } from './BarStack.styles';
-
 import { Typography } from '@mui/material';
+
 import numeral from 'numeral';
 import { equals } from 'ramda';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import GraphAndLegend from './GraphAndLegend';
+
+import { Legend as LegendComponent } from '../Legend';
+import type { LegendProps } from '../Legend/models';
+import { useStyles } from './BarStack.styles';
 import { gap, smallTitleHeight, titleHeight } from './constants';
-import { BarStackProps } from './models';
+import GraphAndLegend from './GraphAndLegend';
+import type { BarStackProps } from './models';
 import useResponsiveBarStack from './useResponsiveBarStack';
 
 const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
@@ -44,10 +45,10 @@ const ResponsiveBarStack = ({
   } = useResponsiveBarStack({
     data,
     height,
-    width,
+    legendDirection,
     unit,
     variant,
-    legendDirection
+    width
   });
 
   const graphAndLegendHeight = useMemo(() => {
@@ -71,28 +72,22 @@ const ResponsiveBarStack = ({
     >
       {title && (
         <Typography
+          className={cx(equals(titleVariant, 'md') && classes.clippedTitle)}
           data-testid="Title"
-          variant={equals(titleVariant, 'md') ? 'h6' : 'body1'}
-          textAlign="center"
           fontWeight="bold"
-          className={cx(equals(titleVariant, 'md') && classes.clippedTitle)}
+          textAlign="center"
+          variant={equals(titleVariant, 'md') ? 'h6' : 'body1'}
         >
           {`${numeral(total).format('0a')}`} {t(title)}
         </Typography>
       )}
       <GraphAndLegend
-        height={graphAndLegendHeight}
-        width={width}
-        isVerticalBar={isVerticalBar}
-        displayLegend={displayLegend}
         colorScale={colorScale}
-        total={total}
         data={data}
-        unit={unit}
+        displayLegend={displayLegend}
         displayValues={displayValues}
-        onSingleBarClick={onSingleBarClick}
-        tooltipProps={tooltipProps}
-        TooltipContent={TooltipContent}
+        height={graphAndLegendHeight}
+        isVerticalBar={isVerticalBar}
         legend={
           <Legend
             data={data}
@@ -103,6 +98,12 @@ const ResponsiveBarStack = ({
             unit={unit}
           />
         }
+        onSingleBarClick={onSingleBarClick}
+        TooltipContent={TooltipContent}
+        tooltipProps={tooltipProps}
+        total={total}
+        unit={unit}
+        width={width}
       />
     </div>
   );

package/src/Graph/BarStack/useGraphAndLegend.ts

@@ -1,7 +1,8 @@
 import { scaleBand, scaleLinear } from '@visx/scale';
 import { pluck } from 'ramda';
 import { useMemo } from 'react';
-import { BarType } from './models';
+
+import type { BarType } from './models';
 
 interface UseGraphandLegendProps {
   data: Array<BarType>;
@@ -77,8 +78,8 @@ export const useGraphAndLegend = ({
 
   return {
     barStackData,
+    keys,
     xScale,
-    yScale,
-    keys
+    yScale
   };
 };

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,9 +1,10 @@
 import { scaleOrdinal } from '@visx/scale';
 import { equals, isNil, pluck } from 'ramda';
 import { useMemo } from 'react';
-import { LegendScale } from '../Legend/models';
+
 import { getValueByUnit } from '../common/utils';
-import { BarType } from './models';
+import type { LegendScale } from '../Legend/models';
+import type { BarType } from './models';
 
 interface UseBarStackProps {
   data: Array<BarType>;
@@ -39,10 +40,7 @@ const useResponsiveBarStack = ({
 
   const isVerticalBar = useMemo(() => equals(variant, 'vertical'), [variant]);
 
-  const isSmall = useMemo(
-    () => Math.floor(height) < 90,
-    [isVerticalBar, height]
-  );
+  const isSmall = useMemo(() => Math.floor(height) < 90, [height]);
 
   const titleVariant = useMemo(() => {
     if (width <= 105) {
@@ -74,7 +72,7 @@ const useResponsiveBarStack = ({
       domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
       range: colorsRange
     }),
-    [data, colorsRange]
+    [data, colorsRange, total, unit]
   );
 
   const formattedLegendDirection = useMemo(() => {
@@ -90,13 +88,13 @@ const useResponsiveBarStack = ({
   }, [legendDirection, variant]);
 
   return {
-    total,
+    colorScale,
+    formattedLegendDirection,
     isSmall,
     isVerticalBar,
-    titleVariant,
     legendScale,
-    colorScale,
-    formattedLegendDirection
+    titleVariant,
+    total
   };
 };
 

package/src/Graph/Chart/BasicComponents/Lines/RegularLines/index.tsx

@@ -1,11 +1,10 @@
-import { memo } from 'react';
-
 import { Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals, isNil, pick, prop } from 'ramda';
+import { memo } from 'react';
 
 import { getTime } from '../../../../common/timeSeries';
-import { TimeValue } from '../../../../common/timeSeries/models';
+import type { TimeValue } from '../../../../common/timeSeries/models';
 import { getStrokeDashArray } from '../../../../common/utils';
 import { getCurveFactory, getFillColor } from '../../../common';
 

package/src/Graph/Chart/BasicComponents/Lines/RegularLines/useRegularLines.ts

@@ -1,7 +1,7 @@
 import { difference } from 'ramda';
 
 import { getSortedStackedLines } from '../../../../common/timeSeries';
-import { Line } from '../../../../common/timeSeries/models';
+import type { Line } from '../../../../common/timeSeries/models';
 
 interface RegularLines {
   regularLines: Array<Line>;

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -1,32 +1,32 @@
 import { Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import {
-  path,
   all,
   equals,
   isNil,
   map,
   not,
   nth,
+  path,
   pipe,
   prop,
   type
 } from 'ramda';
+import type { ReactElement } from 'react';
 
-import { ReactElement } from 'react';
 import { getDates, getTime } from '../../../../common/timeSeries';
-import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import type { Line, TimeValue } from '../../../../common/timeSeries/models';
 import {
   getPointRadius,
   getStrokeDashArray,
   getStyle
 } from '../../../../common/utils';
+import { getCurveFactory, getFillColor } from '../../../common';
+import type { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import StackedAnchorPoint, {
   getYAnchorPoint
 } from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
-import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
-import { getCurveFactory, getFillColor } from '../../../common';
-import { LineStyle } from '../../../models';
+import type { LineStyle } from '../../../models';
 import Point from '../Point';
 
 interface Props {
@@ -86,8 +86,8 @@ const StackLines = ({
             nth(index, lines) as Line;
 
           const style = getStyle({
-            style: lineStyle,
-            metricId: metric_id
+            metricId: metric_id,
+            style: lineStyle
           }) as LineStyle;
           const formattedLineWidth = style?.lineWidth ?? 2;
 
@@ -100,14 +100,14 @@ const StackLines = ({
               {displayAnchor && (
                 <StackedAnchorPoint
                   areaColor={style?.areaColor}
+                  hasSecondUnit={hasSecondUnit}
                   lineColor={lineColor}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
                   stackValues={stack as unknown as Array<StackValue>}
                   timeSeries={timeSeries}
                   transparency={transparency}
                   xScale={xScale}
                   yScale={yScale}
-                  hasSecondUnit={hasSecondUnit}
-                  maxLeftAxisCharacters={maxLeftAxisCharacters}
                 />
               )}
               {style?.showPoints &&

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -3,7 +3,7 @@ import {
   getNotInvertedStackedLines,
   getStackedLinesTimeSeriesPerStackAndUnit
 } from '../../../../common/timeSeries';
-import { LinesData } from '../models';
+import type { LinesData } from '../models';
 
 interface StackedLinesState {
   invertedStackedLinesData: Record<string, LinesData>;
@@ -26,9 +26,9 @@ const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
     stackedLinesTimeSeriesPerStackKeyAndUnit:
       invertedStackedLinesTimeSeriesPerStackKeyAndUnit
   } = getStackedLinesTimeSeriesPerStackAndUnit({
+    invert: true,
     stackedLines: invertedStackedLines,
-    timeSeries,
-    invert: true
+    timeSeries
   });
 
   return {

package/src/Graph/Chart/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -1,6 +1,6 @@
 import { Threshold } from '@visx/threshold';
 
-import { TimeValue } from '../../../../common/timeSeries/models';
+import type { TimeValue } from '../../../../common/timeSeries/models';
 
 interface Props {
   curve: 'linear' | 'natural' | 'step';

package/src/Graph/Chart/BasicComponents/Lines/Threshold/Circle.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { isEmpty, isNil } from 'ramda';
 
-import { Circle as CircleModel } from './models';
+import type { Circle as CircleModel } from './models';
 import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({

package/src/Graph/Chart/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -1,12 +1,11 @@
-import { PatternLines } from '@visx/pattern';
-import { ScaleLinear } from 'd3-scale';
-
 import { useTheme } from '@mui/material/styles';
 
-import { LineChartData } from '../../../../common/models';
-import { adjustGraphData } from '../../../helpers/index';
-import { PatternOrientation } from '../../../models';
+import { PatternLines } from '@visx/pattern';
+import type { ScaleLinear } from 'd3-scale';
 
+import type { LineChartData } from '../../../../common/models';
+import { adjustGraphData } from '../../../helpers/index';
+import type { PatternOrientation } from '../../../models';
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';