@centreon/ui 24.6.0 → 24.6.2

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -66,7 +66,6 @@ const ResponsivePie = ({
     legendScale,
     svgContainerSize,
     svgSize,
-    svgWrapperWidth,
     total,
     innerRadius,
     isContainsExactlyOneNonZeroValue
@@ -80,24 +79,27 @@ const ResponsivePie = ({
     width
   });
 
+  const isTooSmallForLegend = lt(width, 170);
+
+  const isSmall = lt(width, 130);
+  const mustDisplayLegend = isTooSmallForLegend ? false : displayLegend;
+
   const { classes } = usePieStyles({ svgSize });
 
   return (
     <div
       className={classes.container}
       style={{
-        height,
-        width
+        height
       }}
     >
       <div
         className={classes.svgWrapper}
         style={{
-          minHeight: height,
-          width: svgWrapperWidth
+          minHeight: equals(variant, 'donut') && isSmall ? 'auto' : height
         }}
       >
-        {equals(variant, 'pie') && title && (
+        {(equals(variant, 'pie') || isSmall) && title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
             {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
@@ -110,7 +112,11 @@ const ResponsivePie = ({
             width: svgContainerSize
           }}
         >
-          <svg data-variant={variant} height={svgSize} width={svgSize}>
+          <svg
+            data-variant={variant}
+            height={Math.ceil(svgSize)}
+            width={Math.ceil(svgSize)}
+          >
             <Group left={half} top={half}>
               <Pie
                 cornerRadius={4}
@@ -199,7 +205,7 @@ const ResponsivePie = ({
                   });
                 }}
               </Pie>
-              {equals(variant, 'donut') && title && (
+              {equals(variant, 'donut') && !isSmall && title && (
                 <>
                   <Text
                     className={classes.title}
@@ -224,7 +230,7 @@ const ResponsivePie = ({
           </svg>
         </div>
       </div>
-      {displayLegend && (
+      {mustDisplayLegend && (
         <div data-testid="Legend" ref={legendRef}>
           <Legend
             data={data}

package/src/Graph/PieChart/useResponsivePie.ts

@@ -22,7 +22,6 @@ interface ResponsivePieState {
   legendScale: LegendScale;
   svgContainerSize: number;
   svgSize: number;
-  svgWrapperWidth: number;
   total: number;
 }
 export const useResponsivePie = ({
@@ -44,7 +43,6 @@ export const useResponsivePie = ({
     height - heightOfTitle - verticalGap,
     width - widthOfLegend - horizontalGap
   );
-  const svgWrapperWidth = svgContainerSize;
 
   const outerRadius = Math.min(32, svgContainerSize / 6);
 
@@ -75,7 +73,6 @@ export const useResponsivePie = ({
     legendScale,
     svgContainerSize,
     svgSize,
-    svgWrapperWidth,
     total
   };
 };

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -2,12 +2,13 @@ import { useMemo, useRef } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';
-import { equals, flatten, head, pluck } from 'ramda';
+import { equals, flatten, head, lt, pluck } from 'ramda';
 import { Bar } from '@visx/shape';
 import { useSpring, animated } from '@react-spring/web';
 
-import { alpha, Box, Fade, useTheme } from '@mui/material';
+import { alpha, Box, useTheme } from '@mui/material';
 
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 import {
   formatMetricValueWithUnit,
   getMetricWithLatestData
@@ -15,6 +16,7 @@ import {
 import { Metric } from '../common/timeSeries/models';
 import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
+import { useTooltipStyles } from '../common/useTooltipStyles';
 
 import { SingleBarProps } from './models';
 import Thresholds, { groupMargin } from './Thresholds';
@@ -25,11 +27,6 @@ interface Props extends SingleBarProps {
   width: number;
 }
 
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
 const ResponsiveSingleBar = ({
   data,
   thresholds,
@@ -40,8 +37,11 @@ const ResponsiveSingleBar = ({
   size = 'medium',
   showLabels = true
 }: Props): JSX.Element => {
+  const { classes } = useTooltipStyles();
   const theme = useTheme();
 
+  const isSmallHeight = lt(height, 150);
+
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
   const thresholdValues = thresholds.enabled
@@ -57,14 +57,8 @@ const ResponsiveSingleBar = ({
     head(metric.data) as number
   );
 
-  const {
-    showTooltip,
-    hideTooltip,
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData
-  } = Tooltip.useTooltip();
+  const { showTooltip, hideTooltip, tooltipOpen, tooltipData } =
+    Tooltip.useTooltip();
   const svgRef = useRef<SVGSVGElement | null>(null);
 
   const barColor = useMemo(
@@ -78,13 +72,11 @@ const ResponsiveSingleBar = ({
     [latestMetricData, thresholds, theme]
   );
 
-  const isSmall = equals(size, 'small');
+  const isSmall = equals(size, 'small') || isSmallHeight;
 
-  const textStyle = isSmall
-    ? {
-        ...theme.typography.h6
-      }
-    : theme.typography.h3;
+  const textStyle = isSmall ? theme.typography.h6 : theme.typography.h4;
+
+  const textHeight = isSmall ? 46 : 27;
 
   const text = showLabels && (
     <text
@@ -126,6 +118,15 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
+  const barHeight = isSmallHeight ? barHeights.small : barHeights[size];
+
+  const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
+
+  const realBarHeight =
+    !isSmall && textHeight + barHeight > height
+      ? height - textHeight - 2 * margins.top
+      : barHeight;
+
   return (
     <div
       style={{
@@ -141,55 +142,51 @@ const ResponsiveSingleBar = ({
           width: '100%'
         }}
       >
-        <svg height={height} ref={svgRef} width={width}>
-          <Group.Group>
-            {text}
-            <animated.rect
-              data-testid={`${latestMetricData}-bar-${barColor}`}
-              fill={barColor}
-              height={barHeights[size]}
-              rx={4}
-              style={springStyle}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            <Bar
-              fill="transparent"
-              height={barHeights[size]}
-              rx={4}
-              ry={4}
-              stroke={alpha(theme.palette.text.primary, 0.3)}
-              width={maxBarWidth}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            {thresholds.enabled && (
-              <Thresholds
-                hideTooltip={hideTooltip}
-                showTooltip={showTooltip}
-                size={size}
-                thresholds={thresholds}
-                xScale={xScale}
-              />
-            )}
-          </Group.Group>
-        </svg>
-      </Box>
-      <Fade in={tooltipOpen}>
-        <Tooltip.Tooltip
-          left={tooltipLeft}
-          style={{
-            ...baseStyles,
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.text.primary,
-            transform: `translate(-50%, ${isSmall ? -100 : -120}px)`,
-            zIndex: theme.zIndex.tooltip
+        <MuiTooltip
+          classes={{
+            tooltip: classes.tooltip
           }}
-          top={tooltipTop}
+          label={tooltipData}
+          open={tooltipOpen}
+          placement="top"
         >
-          {tooltipData}
-        </Tooltip.Tooltip>
-      </Fade>
+          <svg height={height} ref={svgRef} width={width}>
+            <Group.Group>
+              {text}
+              <animated.rect
+                data-testid={`${latestMetricData}-bar-${barColor}`}
+                fill={barColor}
+                height={realBarHeight}
+                rx={4}
+                style={springStyle}
+                x={5}
+                y={barY}
+              />
+              <Bar
+                fill="transparent"
+                height={realBarHeight}
+                rx={4}
+                ry={4}
+                stroke={alpha(theme.palette.text.primary, 0.3)}
+                width={maxBarWidth}
+                x={5}
+                y={barY}
+              />
+              {thresholds.enabled && (
+                <Thresholds
+                  barHeight={realBarHeight}
+                  hideTooltip={hideTooltip}
+                  isSmall={isSmall}
+                  showTooltip={showTooltip}
+                  size={size}
+                  thresholds={thresholds}
+                  xScale={xScale}
+                />
+              )}
+            </Group.Group>
+          </svg>
+        </MuiTooltip>
+      </Box>
     </div>
   );
 };

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -17,6 +17,12 @@ const Template = (props): JSX.Element => (
   </div>
 );
 
+const SmallTemplate = (props): JSX.Element => (
+  <div style={{ height: '130px', width: '130px' }}>
+    <SingleBar {...props} />
+  </div>
+);
+
 export const success: Story = {
   args: {
     data: dataLastWeek,
@@ -202,3 +208,25 @@ export const Small: Story = {
   },
   render: Template
 };
+
+export const smallDisplay: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: SmallTemplate
+};

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -18,7 +18,9 @@ const lineMargins = {
 };
 
 interface Props {
+  barHeight: number;
   hideTooltip: () => void;
+  isSmall: boolean;
   label: string;
   showTooltip: (args) => void;
   size: 'small' | 'medium';
@@ -34,7 +36,9 @@ export const ThresholdLine = ({
   thresholdType,
   showTooltip,
   hideTooltip,
-  size
+  size,
+  barHeight,
+  isSmall
 }: Props): JSX.Element => {
   const theme = useTheme();
 
@@ -42,17 +46,9 @@ export const ThresholdLine = ({
 
   const lineMargin = lineMargins[size];
 
-  const thresholdLineHeight = barHeights[size] + 2 * lineMargin;
-
-  const isSmall = equals(size, 'small');
-
-  const bottom = barHeights[size] + margin * 2;
-
-  const onMouseEnter = (left) => (): void =>
+  const onMouseEnter = (): void =>
     showTooltip({
-      tooltipData: label,
-      tooltipLeft: left,
-      tooltipTop: bottom
+      tooltipData: label
     });
 
   const lineColor = equals(thresholdType, 'warning')
@@ -70,13 +66,13 @@ export const ThresholdLine = ({
         x2={scaledValue}
         y1={
           isSmall
-            ? groupMargin - lineMargin
+            ? groupMargin - lineMargin + 6
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? thresholdLineHeight + groupMargin - lineMargin
-            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+            ? barHeight + groupMargin - lineMargin + margins.top - 2
+            : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
       />
       <line
@@ -87,15 +83,15 @@ export const ThresholdLine = ({
         x2={scaledValue}
         y1={
           isSmall
-            ? groupMargin - lineMargin
+            ? groupMargin - lineMargin + 5
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? thresholdLineHeight + groupMargin - lineMargin
-            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+            ? barHeight + groupMargin - lineMargin + margins.top + 5
+            : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
-        onMouseEnter={onMouseEnter(scaledValue)}
+        onMouseEnter={onMouseEnter}
         onMouseLeave={hideTooltip}
       />
     </>

package/src/Graph/SingleBar/Thresholds.tsx

@@ -5,7 +5,9 @@ import { ThresholdLine } from './ThresholdLine';
 export const groupMargin = 25;
 
 interface Props {
+  barHeight: number;
   hideTooltip: () => void;
+  isSmall: boolean;
   showTooltip: (args) => void;
   size: 'small' | 'medium';
   thresholds: ThresholdsModel;
@@ -17,12 +19,16 @@ const Thresholds = ({
   thresholds,
   showTooltip,
   hideTooltip,
-  size
+  size,
+  barHeight,
+  isSmall
 }: Props): JSX.Element => (
   <>
     {thresholds.warning.map(({ value, label }) => (
       <ThresholdLine
+        barHeight={barHeight}
         hideTooltip={hideTooltip}
+        isSmall={isSmall}
         key={`warning-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}
@@ -34,7 +40,9 @@ const Thresholds = ({
     ))}
     {thresholds.critical.map(({ value, label }) => (
       <ThresholdLine
+        barHeight={barHeight}
         hideTooltip={hideTooltip}
+        isSmall={isSmall}
         key={`critical-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}

package/src/Graph/Text/Text.stories.tsx

@@ -17,6 +17,12 @@ const Template = (props): JSX.Element => (
   </div>
 );
 
+const SmallTemplate = (props): JSX.Element => (
+  <div style={{ height: '100px', width: '200px' }}>
+    <Text {...props} />
+  </div>
+);
+
 export const success: Story = {
   args: {
     data: dataLastWeek,
@@ -121,3 +127,29 @@ export const rawValue: Story = {
   },
   render: Template
 };
+
+export const smallDisplay: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: SmallTemplate
+};

package/src/Graph/Text/Text.styles.ts

@@ -9,7 +9,6 @@ export const useTextStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(1),
-    height: '100%',
     justifyContent: 'center'
   },
   threshold: {

package/src/Graph/Text/Text.tsx

@@ -1,6 +1,6 @@
 import { isNil } from 'ramda';
 
-import { Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 
 import FluidTypography from '../../Typography/FluidTypography';
 import { LineChartData, Thresholds } from '../common/models';
@@ -64,15 +64,19 @@ export const Text = ({
 
   return (
     <div className={classes.graphText}>
-      <Typography sx={{ color }} variant="h2">
-        <strong>
-          {formatMetricValueWithUnit({
+      <FluidTypography
+        max="40px"
+        pref={16}
+        sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
+        text={
+          formatMetricValueWithUnit({
             isRaw: displayAsRaw,
             unit: metricUnit,
             value: metricValue
-          })}
-        </strong>
-      </Typography>
+          }) || ''
+        }
+        variant="h2"
+      />
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <FluidTypography

package/src/Graph/{LineChart/BasicComponents → common}/Axes/UnitLabel.tsx

@@ -1,4 +1,4 @@
-import { commonTickLabelProps } from '../../common';
+import { commonTickLabelProps } from '../utils';
 
 interface UnitLabelProps {
   unit: string;

package/src/Graph/{LineChart/BasicComponents → common}/Axes/index.tsx

@@ -4,9 +4,8 @@ import { isNil } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
-import { getXAxisTickFormat } from '../../helpers';
-import { GraphInterval } from '../../models';
-import { getUnits } from '../../../common/timeSeries';
+import { getXAxisTickFormat } from '../../LineChart/helpers';
+import { getUnits } from '../timeSeries';
 
 import UnitLabel from './UnitLabel';
 import { Data } from './models';
@@ -14,7 +13,6 @@ import useAxisY from './useAxisY';
 
 interface Props {
   data: Data;
-  graphInterval: GraphInterval;
   height: number;
   leftScale: ScaleLinear<number, number>;
   rightScale: ScaleLinear<number, number>;
@@ -28,8 +26,7 @@ const Axes = ({
   data,
   rightScale,
   leftScale,
-  xScale,
-  graphInterval
+  xScale
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines, showBorder, yAxisTickLabelRotation } = data;
@@ -41,7 +38,11 @@ const Axes = ({
   const xTickCount = Math.min(Math.ceil(width / 82), 12);
 
   const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
+    data?.axisX?.xAxisTickFormat ??
+    getXAxisTickFormat({
+      start: xScale.domain()[0],
+      start: xScale.domain()[-1]
+    });
 
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });

package/src/Graph/{LineChart/BasicComponents → common}/Axes/models.ts

@@ -1,5 +1,5 @@
-import { Line, TimeValue } from '../../../common/timeSeries/models';
-import { LineChartAxis } from '../../models';
+import { Line, TimeValue } from '../timeSeries/models';
+import { LineChartAxis } from '../../LineChart/models';
 
 export interface LabelProps {
   [x: string]: unknown;

package/src/Graph/{LineChart/BasicComponents → common}/Axes/useAxisY.ts

@@ -3,8 +3,8 @@ import { Axis } from '@visx/visx';
 
 import { useTheme } from '@mui/material';
 
-import { formatMetricValue, getUnits } from '../../../common/timeSeries';
-import { commonTickLabelProps } from '../../common';
+import { formatMetricValue, getUnits } from '../timeSeries';
+import { commonTickLabelProps } from '../utils';
 
 import { Data, LabelProps } from './models';