@centreon/ui 23.10.1-MON-20802-fe-implement-new-visualization.3 → 23.10.1-MON-20803-RS-add-basic-filter.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-20802-fe-implement-new-visualization.3",
+  "version": "23.10.1-MON-20803-RS-add-basic-filter.1",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Dashboard.styles.ts

@@ -79,12 +79,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      '&[data-canMove="false"]': {
-        cursor: 'default'
-      },
-      '&[data-canMove="true"]': {
-        cursor: 'move'
-      },
+      cursor: 'move',
       padding: theme.spacing(0.5, 2)
     },
     widgetPadding: {

package/src/Dashboard/Item.tsx

@@ -15,7 +15,6 @@ import { useMemoComponent } from '../utils';
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
-  canMove?: boolean;
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
@@ -38,8 +37,7 @@ const Item = forwardRef(
       onMouseUp,
       onTouchEnd,
       id,
-      disablePadding = false,
-      canMove = false
+      disablePadding = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -68,7 +66,6 @@ const Item = forwardRef(
               <div
                 {...listeners}
                 className={classes.widgetHeader}
-                data-canMove={canMove}
                 data-testid={`${id}_move_panel`}
               >
                 {header}

package/src/Dashboard/Layout.tsx

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

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -134,13 +134,3 @@ export const withRangeThresholds: Story = {
   },
   render: Template
 };
-
-export const RawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 0.6]
-  },
-  render: Template
-};

package/src/Graph/Gauge/Gauge.tsx

@@ -7,18 +7,11 @@ import { Metric } from '../common/timeSeries/models';
 import ResponsiveGauge from './ResponsiveGauge';
 
 interface Props {
-  baseColor?: string;
   data?: LineChartData;
-  displayAsRaw?: boolean;
   thresholds: Thresholds;
 }
 
-export const Gauge = ({
-  thresholds,
-  data,
-  displayAsRaw,
-  baseColor
-}: Props): JSX.Element | null => {
+export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
@@ -29,8 +22,6 @@ export const Gauge = ({
     <Responsive.ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
-          baseColor={baseColor}
-          displayAsRaw={displayAsRaw}
           height={height}
           metric={metric}
           thresholds={thresholds}

package/src/Graph/Gauge/PieData.tsx

@@ -16,8 +16,7 @@ const PieData = ({
   metric,
   adaptedMaxValue,
   thresholds,
-  radius,
-  baseColor
+  radius
 }: Omit<
   GaugeProps,
   'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
@@ -25,12 +24,13 @@ const PieData = ({
   const theme = useTheme();
 
   const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
+  const pieColor = !thresholds.enabled
+    ? theme.palette.success.main
+    : getColorFromDataAndTresholds({
+        data: metric.data[0],
+        theme,
+        thresholds
+      });
 
   const getDataColor = scaleOrdinal({
     domain: pieData,

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -7,7 +7,7 @@ import { Tooltip } from '@visx/visx';
 import { Box, Fade, useTheme } from '@mui/material';
 
 import { Metric } from '../common/timeSeries/models';
-import { formatMetricValueWithUnit } from '../common/timeSeries';
+import { formatMetricValue } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
 
@@ -15,8 +15,7 @@ import Thresholds from './Thresholds';
 import PieData from './PieData';
 import { GaugeProps } from './models';
 
-interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
-  displayAsRaw?: boolean;
+interface Props extends Pick<GaugeProps, 'thresholds'> {
   height: number;
   metric: Metric;
   width: number;
@@ -31,9 +30,7 @@ const ResponsiveGauge = ({
   width,
   height,
   thresholds,
-  metric,
-  displayAsRaw,
-  baseColor
+  metric
 }: Props): JSX.Element => {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -53,36 +50,28 @@ const ResponsiveGauge = ({
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
   const radius = Math.min(innerWidth, innerHeight) / 2;
-  const thresholdValues = thresholds.enabled
-    ? flatten([
-        pluck('value', thresholds.warning),
-        pluck('value', thresholds.critical)
-      ])
-    : [0];
+  const thresholdValues = flatten([
+    pluck('value', thresholds.warning),
+    pluck('value', thresholds.critical)
+  ]);
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
     Math.max(...thresholdValues) * 1.1,
     head(metric.data) as number
   );
 
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
+  const pieColor = !thresholds.enabled
+    ? theme.palette.success.main
+    : getColorFromDataAndTresholds({
+        data: metric.data[0],
+        theme,
+        thresholds
+      });
 
   const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
   const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
 
-  const isSmallWidget = height < 240;
-
-  const gaugeValue = formatMetricValueWithUnit({
-    base: 1000,
-    isRaw: displayAsRaw,
-    unit: metric.unit,
-    value: metric.data[0]
-  });
+  const isSmallHeight = height < 250;
 
   return (
     <Box sx={{ position: 'relative' }}>
@@ -98,7 +87,6 @@ const ResponsiveGauge = ({
           />
           <PieData
             adaptedMaxValue={adaptedMaxValue}
-            baseColor={baseColor}
             metric={metric}
             radius={radius}
             thresholds={thresholds}
@@ -109,15 +97,18 @@ const ResponsiveGauge = ({
           style={{
             fill: pieColor,
             ...theme.typography.h3,
-            fontSize:
-              Math.min(width, height) / 7 -
-              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
+            fontSize: Math.min(width, height) / 7
           }}
           textAnchor="middle"
           x="50%"
-          y={isSmallWidget ? 130 : height - height / 2.3}
+          y={isSmallHeight ? 140 : 100 + Math.min(width, height) / 3}
         >
-          {gaugeValue}
+          {formatMetricValue({
+            base: 1000,
+            unit: metric.unit,
+            value: metric.data[0]
+          })}{' '}
+          {metric.unit}
         </text>
       </svg>
       <Fade in={tooltipOpen && thresholds.enabled}>

package/src/Graph/Gauge/Thresholds.tsx

@@ -16,7 +16,7 @@ const Thresholds = ({
   showTooltip,
   hideTooltip,
   metric
-}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
   const theme = useTheme();
 
   const criticalThresholdValues = pluck('value', thresholds.critical);
@@ -65,7 +65,30 @@ const Thresholds = ({
   });
 
   if (!thresholds.enabled) {
-    return null;
+    return (
+      <Pie
+        data={successThresholdArc}
+        endAngle={-Math.PI / 2}
+        innerRadius={radius - thresholdThickness}
+        outerRadius={radius}
+        pieSortValues={() => -1}
+        pieValue={(d) => d.value}
+        startAngle={Math.PI / 2}
+      >
+        {(pie) => (
+          <AnimatedPie<{ name: string; value: number }>
+            {...pie}
+            animate
+            getColor={(arc) => successThresholdScaleOrdinal(arc.data.name)}
+            getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+            hideTooltip={hideTooltip}
+            metric={metric}
+            showTooltip={showTooltip}
+            thresholds={thresholds}
+          />
+        )}
+      </Pie>
+    );
   }
 
   const arcs = [

package/src/Graph/Gauge/models.ts

@@ -3,7 +3,6 @@ import { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;
-  baseColor?: string;
   height: number;
   hideTooltip: () => void;
   metric: Metric;

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

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

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

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

package/src/Graph/SingleBar/Thresholds.tsx

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

package/src/Graph/SingleBar/models.ts

@@ -1,10 +1,6 @@
 import { LineChartData, Thresholds } from '../common/models';
 
 export interface SingleBarProps {
-  baseColor?: string;
   data?: LineChartData;
-  displayAsRaw?: boolean;
-  showLabels?: boolean;
-  size?: 'medium' | 'small';
   thresholds: Thresholds;
 }

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

@@ -52,16 +52,3 @@ export const critical: Story = {
   },
   render: Template
 };
-
-export const rawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: [0.5, 1.5]
-  },
-  render: Template
-};