@centreon/ui 23.10.68 → 23.10.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.68",
+  "version": "23.10.70",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Layout.tsx

@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <ResponsiveHeight>
+      <ResponsiveHeight margin={40}>
         <Responsive.ParentSize>
           {({ width, height }): JSX.Element => (
             <div className={classes.container}>

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -2,7 +2,7 @@ import { useMemo, useRef } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';
-import { flatten, head, pluck } from 'ramda';
+import { equals, flatten, head, pluck } from 'ramda';
 import { Bar } from '@visx/shape';
 import { useSpring, animated } from '@react-spring/web';
 
@@ -18,7 +18,7 @@ import { margins } from '../common/margins';
 
 import { SingleBarProps } from './models';
 import Thresholds, { groupMargin } from './Thresholds';
-import { barHeight, margin } from './ThresholdLine';
+import { barHeights } from './ThresholdLine';
 
 interface Props extends SingleBarProps {
   height: number;
@@ -36,7 +36,9 @@ const ResponsiveSingleBar = ({
   width,
   height,
   displayAsRaw,
-  baseColor
+  baseColor,
+  size = 'medium',
+  showLabels = true
 }: Props): JSX.Element => {
   const theme = useTheme();
 
@@ -55,9 +57,6 @@ const ResponsiveSingleBar = ({
     head(metric.data) as number
   );
 
-  const innerHeight = height;
-  const centerY = innerHeight / 4;
-
   const {
     showTooltip,
     hideTooltip,
@@ -79,13 +78,24 @@ const ResponsiveSingleBar = ({
     [latestMetricData, thresholds, theme]
   );
 
-  const text = (
+  const isSmall = equals(size, 'small');
+
+  const textStyle = isSmall
+    ? {
+        ...theme.typography.h6
+      }
+    : theme.typography.h3;
+
+  const text = showLabels && (
     <text
       dominantBaseline="middle"
-      style={{ fill: barColor, ...theme.typography.h3 }}
+      style={{
+        fill: barColor,
+        ...textStyle
+      }}
       textAnchor="middle"
       x="50%"
-      y={25}
+      y={isSmall ? 10 : 25}
     >
       {formatMetricValueWithUnit({
         base: 1000,
@@ -119,31 +129,32 @@ const ResponsiveSingleBar = ({
   return (
     <Box sx={{ position: 'relative' }}>
       <svg height={height} ref={svgRef} width={width}>
-        <Group.Group top={centerY - margins.bottom}>
+        <Group.Group>
           {text}
           <animated.rect
             data-testid={`${latestMetricData}-bar-${barColor}`}
             fill={barColor}
-            height={barHeight}
+            height={barHeights[size]}
             rx={4}
             style={springStyle}
             x={0}
-            y={groupMargin + margin}
+            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
           />
           <Bar
             fill="transparent"
-            height={barHeight}
+            height={barHeights[size]}
             rx={4}
             ry={4}
             stroke={alpha(theme.palette.text.primary, 0.3)}
             width={maxBarWidth}
             x={0}
-            y={groupMargin + margin}
+            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
           />
           {thresholds.enabled && (
             <Thresholds
               hideTooltip={hideTooltip}
               showTooltip={showTooltip}
+              size={size}
               thresholds={thresholds}
               xScale={xScale}
             />
@@ -157,7 +168,8 @@ const ResponsiveSingleBar = ({
             ...baseStyles,
             backgroundColor: theme.palette.background.paper,
             color: theme.palette.text.primary,
-            transform: 'translate(-50%, -20px)'
+            transform: `translate(-50%, ${isSmall ? -60 : -20}px)`,
+            zIndex: theme.zIndex.tooltip
           }}
           top={tooltipTop}
         >

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

@@ -161,8 +161,44 @@ export const RawValue: Story = {
   args: {
     data: dataLastWeek,
     displayAsRaw: true,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const Small: Story = {
+  args: {
+    data: dataLastWeek,
+    size: 'small',
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -2,18 +2,26 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
+import { margins } from '../common/margins';
+
 import { groupMargin } from './Thresholds';
 
-export const barHeight = 72;
+export const barHeights = {
+  medium: 72,
+  small: 22
+};
 export const margin = 40;
 
-const lineMargin = 10;
-const thresholdLineHeight = barHeight + 2 * lineMargin;
+const lineMargins = {
+  medium: 10,
+  small: 5
+};
 
 interface Props {
   hideTooltip: () => void;
   label: string;
   showTooltip: (args) => void;
+  size: 'small' | 'medium';
   thresholdType: string;
   value: number;
   xScale: (value: number) => number;
@@ -25,13 +33,20 @@ export const ThresholdLine = ({
   xScale,
   thresholdType,
   showTooltip,
-  hideTooltip
+  hideTooltip,
+  size
 }: Props): JSX.Element => {
   const theme = useTheme();
 
   const scaledValue = xScale(value) || 0;
 
-  const bottom = barHeight + margin * 2;
+  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 =>
     showTooltip({
@@ -49,12 +64,20 @@ export const ThresholdLine = ({
       <line
         data-testid={`${thresholdType}-line-${value}`}
         stroke={lineColor}
-        strokeDasharray={4}
+        strokeDasharray="6, 6"
         strokeWidth={2}
         x1={scaledValue}
         x2={scaledValue}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
       />
       <line
         data-testid={`${thresholdType}-line-${value}-tooltip`}
@@ -62,8 +85,16 @@ export const ThresholdLine = ({
         strokeWidth={5}
         x1={scaledValue}
         x2={scaledValue}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
         onMouseEnter={onMouseEnter(scaledValue)}
         onMouseLeave={hideTooltip}
       />

package/src/Graph/SingleBar/Thresholds.tsx

@@ -7,6 +7,7 @@ export const groupMargin = 25;
 interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
+  size: 'small' | 'medium';
   thresholds: Thresholds;
   xScale: (value: number) => number;
 }
@@ -15,7 +16,8 @@ const Thresholds = ({
   xScale,
   thresholds,
   showTooltip,
-  hideTooltip
+  hideTooltip,
+  size
 }: Props): JSX.Element => (
   <>
     {thresholds.warning.map(({ value, label }) => (
@@ -24,6 +26,7 @@ const Thresholds = ({
         key={`warning-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}
+        size={size}
         thresholdType="warning"
         value={value}
         xScale={xScale}
@@ -35,6 +38,7 @@ const Thresholds = ({
         key={`critical-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}
+        size={size}
         thresholdType="critical"
         value={value}
         xScale={xScale}

package/src/Graph/SingleBar/models.ts

@@ -4,5 +4,7 @@ export interface SingleBarProps {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;
+  showLabels?: boolean;
+  size?: 'medium' | 'small';
   thresholds: Thresholds;
 }

package/src/Graph/common/timeSeries/models.ts

@@ -16,8 +16,8 @@ export interface Metric {
   crit: number | null;
   critical_high_threshold: number | null;
   critical_low_threshold: number | null;
-  data: Array<number>;
-  ds_data: DsData;
+  data: Array<number | null>;
+  ds_data?: DsData;
   legend: string;
   maximum_value: number | null;
   metric: string;