@centreon/ui 23.10.1-MON-21256-handle-range-thresholds.8 → 23.10.1-MON-20799-fe-implement-new-visualization.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-21256-handle-range-thresholds.8",
+  "version": "23.10.1-MON-20799-fe-implement-new-visualization.13",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -1,18 +1,17 @@
 import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
-import { useTransition, to, animated } from '@react-spring/web';
-import { equals, includes, pluck } from 'ramda';
-
-import { Typography } from '@mui/material';
+import { useTransition, interpolate, animated } from '@react-spring/web';
+import { equals } from 'ramda';
 
 import { Metric } from '../common/timeSeries/models';
-import { Thresholds } from '../common/models';
+
+import { ThresholdType } from './models';
 
 type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
 
-const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
-  endAngle,
+const fromLeaveTransition = (): AnimatedStyles => ({
+  endAngle: 0,
   opacity: 0,
-  startAngle: -(Math.PI / 2)
+  startAngle: 0
 });
 const enterUpdateTransition = <T,>({
   startAngle,
@@ -31,7 +30,7 @@ type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
   hideTooltip?: () => void;
   metric?: Metric;
   showTooltip?: (args) => void;
-  thresholds: Thresholds;
+  thresholdTooltipLabels?: Array<string>;
 };
 
 const AnimatedPie = <Datum,>({
@@ -42,7 +41,7 @@ const AnimatedPie = <Datum,>({
   getColor,
   showTooltip,
   hideTooltip,
-  thresholds
+  thresholdTooltipLabels = []
 }: AnimatedPieProps<Datum>): JSX.Element => {
   const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
     enter: enterUpdateTransition,
@@ -55,36 +54,26 @@ const AnimatedPie = <Datum,>({
   return transitions((props, arc, { key }) => (
     <g key={key}>
       <animated.path
-        d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-          path({
-            ...arc,
-            endAngle,
-            startAngle
-          })
+        d={interpolate(
+          [props.startAngle, props.endAngle],
+          (startAngle, endAngle) =>
+            path({
+              ...arc,
+              endAngle,
+              startAngle
+            })
         )}
         data-testid={`${arc.data?.value || arc.data}-arc`}
-        display={
-          includes('transparent', arc.data?.name || '') ? 'none' : 'inline'
-        }
         fill={getColor(arc)}
         onMouseEnter={(event) => {
-          const thresholdType = arc.data?.name as string;
+          const thresholdType = arc.data.name;
 
-          if (equals(thresholdType, 'success')) {
+          if (equals(thresholdType, ThresholdType.Success)) {
             return;
           }
 
           showTooltip?.({
-            tooltipData: (
-              <div>
-                {pluck(
-                  'label',
-                  thresholds[thresholdType as 'warning' | 'critical']
-                ).map((label) => (
-                  <Typography key={label}>{label}</Typography>
-                ))}
-              </div>
-            ),
+            tooltipData: thresholdTooltipLabels[thresholdType],
             tooltipLeft: event.clientX,
             tooltipTop: event.clientY
           });

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

@@ -20,21 +20,8 @@ const Template = (props): JSX.Element => (
 export const success: Story = {
   args: {
     data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.6
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.5, 0.6]
   },
   render: Template
 };
@@ -42,21 +29,8 @@ export const success: Story = {
 export const warning: Story = {
   args: {
     data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.6
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.2
-        }
-      ]
-    }
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.2, 0.5]
   },
   render: Template
 };
@@ -64,73 +38,8 @@ export const warning: Story = {
 export const critical: Story = {
   args: {
     data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.35
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.13
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const withCriticalLowerThanWarning: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.13
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const withRangeThresholds: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.55
-        },
-        {
-          label: 'Critical',
-          value: 0.65
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.13
-        },
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.13, 0.35]
   },
   render: Template
 };

package/src/Graph/Gauge/Gauge.tsx

@@ -1,6 +1,7 @@
 import { Responsive } from '@visx/visx';
+import { sort, subtract } from 'ramda';
 
-import { LineChartData, Thresholds } from '../common/models';
+import { LineChartData } from '../common/models';
 import { getMetricWithLatestData } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
 
@@ -8,13 +9,21 @@ import ResponsiveGauge from './ResponsiveGauge';
 
 interface Props {
   data?: LineChartData;
-  thresholds: Thresholds;
+  disabledThresholds?: boolean;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
 }
 
-export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
+export const Gauge = ({
+  thresholds,
+  data,
+  thresholdTooltipLabels,
+  disabledThresholds
+}: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
+  const sortedThresholds = sort(subtract, thresholds);
 
   const metric = getMetricWithLatestData(data) as Metric;
 
@@ -22,9 +31,11 @@ export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
     <Responsive.ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
+          disabledThresholds={disabledThresholds}
           height={height}
           metric={metric}
-          thresholds={thresholds}
+          thresholdTooltipLabels={thresholdTooltipLabels}
+          thresholds={sortedThresholds}
           width={width}
         />
       )}

package/src/Graph/Gauge/PieData.tsx

@@ -1,10 +1,8 @@
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
-import { identity } from 'ramda';
+import { T, always, cond, gt, head, identity } from 'ramda';
 
-import { useTheme } from '@mui/material';
-
-import { getColorFromDataAndTresholds } from '../common/utils';
+import { Theme, useTheme } from '@mui/material';
 
 import { thresholdThickness } from './Thresholds';
 import AnimatedPie from './AnimatedPie';
@@ -12,11 +10,29 @@ import { GaugeProps } from './models';
 
 const dataThickness = 45;
 
+interface GetColorFromDataProps {
+  data: number;
+  theme: Theme;
+  thresholds: Array<number>;
+}
+
+const getColorFromData = ({
+  data,
+  thresholds,
+  theme
+}: GetColorFromDataProps): string =>
+  cond([
+    [gt(head(thresholds) as number), always(theme.palette.success.main)],
+    [gt(thresholds[1]), always(theme.palette.warning.main)],
+    [T, always(theme.palette.error.main)]
+  ])(data);
+
 const PieData = ({
   metric,
   adaptedMaxValue,
   thresholds,
-  radius
+  radius,
+  disabledThresholds
 }: Omit<
   GaugeProps,
   'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
@@ -24,9 +40,9 @@ const PieData = ({
   const theme = useTheme();
 
   const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = !thresholds.enabled
+  const pieColor = disabledThresholds
     ? theme.palette.success.main
-    : getColorFromDataAndTresholds({
+    : getColorFromData({
         data: metric.data[0],
         theme,
         thresholds
@@ -53,7 +69,7 @@ const PieData = ({
           animate
           getColor={(arc) => getDataColor(arc.data)}
           getKey={(arc) => `${arc.data}`}
-          thresholds={thresholds}
+          thresholdTooltipLabels={[]}
         />
       )}
     </Pie>

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 
 import { Group } from '@visx/group';
-import { flatten, head, pluck } from 'ramda';
+import { head } from 'ramda';
 import { Tooltip } from '@visx/visx';
 
 import { Box, Fade, useTheme } from '@mui/material';
@@ -13,11 +13,13 @@ import { margins } from '../common/margins';
 
 import Thresholds from './Thresholds';
 import PieData from './PieData';
-import { GaugeProps } from './models';
 
-interface Props extends Pick<GaugeProps, 'thresholds'> {
+interface Props {
+  disabledThresholds?: boolean;
   height: number;
   metric: Metric;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
   width: number;
 }
 
@@ -30,7 +32,9 @@ const ResponsiveGauge = ({
   width,
   height,
   thresholds,
-  metric
+  metric,
+  thresholdTooltipLabels,
+  disabledThresholds
 }: Props): JSX.Element => {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -50,17 +54,13 @@ const ResponsiveGauge = ({
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
   const radius = Math.min(innerWidth, innerHeight) / 2;
-  const thresholdValues = flatten([
-    pluck('value', thresholds.warning),
-    pluck('value', thresholds.critical)
-  ]);
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
+    Math.max(...thresholds) * 1.1,
     head(metric.data) as number
   );
 
-  const pieColor = !thresholds.enabled
+  const pieColor = disabledThresholds
     ? theme.palette.success.main
     : getColorFromDataAndTresholds({
         data: metric.data[0],
@@ -79,14 +79,17 @@ const ResponsiveGauge = ({
         <Group left={centerX + margins.left} top={centerY + height / 6}>
           <Thresholds
             adaptedMaxValue={adaptedMaxValue}
+            disabledThresholds={disabledThresholds}
             hideTooltip={hideTooltip}
             metric={metric}
             radius={radius}
             showTooltip={showTooltip}
+            thresholdTooltipLabels={thresholdTooltipLabels}
             thresholds={thresholds}
           />
           <PieData
             adaptedMaxValue={adaptedMaxValue}
+            disabledThresholds={disabledThresholds}
             metric={metric}
             radius={radius}
             thresholds={thresholds}
@@ -111,7 +114,7 @@ const ResponsiveGauge = ({
           {metric.unit}
         </text>
       </svg>
-      <Fade in={tooltipOpen && thresholds.enabled}>
+      <Fade in={tooltipOpen && !disabledThresholds}>
         <Tooltip.Tooltip
           left={(tooltipLeft || 0) - svgLeft}
           style={{

package/src/Graph/Gauge/Thresholds.tsx

@@ -1,11 +1,11 @@
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
-import { equals, pluck } from 'ramda';
+import { pluck } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
 import AnimatedPie from './AnimatedPie';
-import { GaugeProps } from './models';
+import { GaugeProps, ThresholdType } from './models';
 
 export const thresholdThickness = 12;
 
@@ -15,125 +15,72 @@ const Thresholds = ({
   adaptedMaxValue,
   showTooltip,
   hideTooltip,
-  metric
+  metric,
+  thresholdTooltipLabels,
+  disabledThresholds
 }: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
   const theme = useTheme();
 
-  const criticalThresholdValues = pluck('value', thresholds.critical);
-  const warningThresholdValues = pluck('value', thresholds.warning);
-
-  const isCriticalLowerThanWarning =
-    criticalThresholdValues[0] < warningThresholdValues[0];
-
-  const criticalThreshold = isCriticalLowerThanWarning
-    ? [0, ...criticalThresholdValues, adaptedMaxValue]
-    : [...criticalThresholdValues, adaptedMaxValue];
-  const criticalThresholdArc = criticalThreshold.map((value, index) => {
-    return {
-      name: equals(1, index) ? 'critical' : `transparent-${index}-critical`,
-      value: value - (criticalThreshold[index - 1] || 0)
-    };
-  });
-  const criticalThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', criticalThresholdArc),
-    range: ['transparent', theme.palette.error.main, 'transparent']
-  });
-
-  const warningThreshold = isCriticalLowerThanWarning
-    ? [0, ...warningThresholdValues, adaptedMaxValue]
-    : [...warningThresholdValues, adaptedMaxValue];
-  const warningThresholdArc = warningThreshold.map((value, index) => {
-    return {
-      name: equals(1, index) ? 'warning' : `transparent-${index}-warning`,
-      value: value - (warningThreshold[index - 1] || 0)
-    };
-  });
-  const warningThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', warningThresholdArc),
-    range: ['transparent', theme.palette.warning.main, 'transparent']
-  });
-
-  const successThresholdArc = [adaptedMaxValue].map((value) => {
-    return {
-      name: 'success',
-      value
-    };
-  });
-  const successThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', successThresholdArc),
-    range: [theme.palette.success.main]
-  });
-
-  if (!thresholds.enabled) {
-    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 = [
+  const namedThresholds = [
     {
-      thresholdArc: successThresholdArc,
-      thresholdScaleOrdinal: successThresholdScaleOrdinal
+      name: ThresholdType.Success,
+      value: thresholds[0]
     },
     {
-      thresholdArc: warningThresholdArc,
-      thresholdScaleOrdinal: warningThresholdScaleOrdinal
+      name: ThresholdType.Warning,
+      value: thresholds[1]
     },
     {
-      thresholdArc: criticalThresholdArc,
-      thresholdScaleOrdinal: criticalThresholdScaleOrdinal
+      name: ThresholdType.Error,
+      value: adaptedMaxValue
     }
   ];
 
+  const adaptedThresholds = namedThresholds.map(({ name, value }, index) => {
+    return {
+      name,
+      value: value - (namedThresholds[index - 1]?.value || 0)
+    };
+  });
+
+  const getThresholdColor = scaleOrdinal({
+    domain: pluck('name', adaptedThresholds),
+    range: disabledThresholds
+      ? [
+          theme.palette.success.main,
+          theme.palette.success.main,
+          theme.palette.success.main
+        ]
+      : [
+          theme.palette.success.main,
+          theme.palette.warning.main,
+          theme.palette.error.main
+        ]
+  });
+
   return (
-    <>
-      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
-        <Pie
-          data={thresholdArc}
-          endAngle={-Math.PI / 2}
-          innerRadius={radius - thresholdThickness}
-          key={`arc-${thresholdArc[0].name}`}
-          outerRadius={radius}
-          pieSortValues={() => -1}
-          pieValue={(d) => d.value}
-          startAngle={Math.PI / 2}
-        >
-          {(pie) => (
-            <AnimatedPie<{ name: string; value: number }>
-              {...pie}
-              animate
-              getColor={(arc) => thresholdScaleOrdinal(arc.data.name)}
-              getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
-              hideTooltip={hideTooltip}
-              metric={metric}
-              showTooltip={showTooltip}
-              thresholds={thresholds}
-            />
-          )}
-        </Pie>
-      ))}
-    </>
+    <Pie
+      data={adaptedThresholds}
+      endAngle={-Math.PI / 2}
+      innerRadius={radius - thresholdThickness}
+      outerRadius={radius}
+      pieSortValues={() => -1}
+      pieValue={(d) => d.value}
+      startAngle={Math.PI / 2}
+    >
+      {(pie) => (
+        <AnimatedPie<{ name: ThresholdType; value: number }>
+          {...pie}
+          animate
+          getColor={(arc) => getThresholdColor(arc.data.name)}
+          getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+          hideTooltip={hideTooltip}
+          metric={metric}
+          showTooltip={showTooltip}
+          thresholdTooltipLabels={thresholdTooltipLabels}
+        />
+      )}
+    </Pie>
   );
 };
 

package/src/Graph/Gauge/models.ts

@@ -1,14 +1,15 @@
-import { Thresholds } from '../common/models';
 import { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;
+  disabledThresholds?: boolean;
   height: number;
   hideTooltip: () => void;
   metric: Metric;
   radius: number;
   showTooltip: (args) => void;
-  thresholds: Thresholds;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
   width: number;
 }
 

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,7 +1,9 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
+import { useAtom } from 'jotai';
 import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
+import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 import {
@@ -13,8 +15,6 @@ import {
 interface UseFilterLines {
   displayThreshold?: boolean;
   lines: Array<Line>;
-  linesGraph: Array<Line> | null;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
 interface Result {
@@ -24,10 +24,10 @@ interface Result {
 
 const useFilterLines = ({
   displayThreshold = false,
-  lines,
-  linesGraph,
-  setLinesGraph
+  lines
 }: UseFilterLines): Result => {
+  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
+
   const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
@@ -45,9 +45,7 @@ const useFilterLines = ({
 
   useEffect(() => {
     const filteredLines = filterLines();
-    if (!lines || !displayThreshold) {
-      setLinesGraph(lines);
-
+    if (!lines || !displayThreshold || filteredLines.length <= 0) {
       return;
     }
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/index.tsx

@@ -8,12 +8,14 @@ interface Props {
 
 const Point = ({ lineColor, x, y }: Props): JSX.Element => (
   <circle
-    cx={x}
-    cy={y}
     fill={alpha(lineColor, 0.5)}
     r={4}
     stroke={lineColor}
     strokeWidth={2}
+    style={{
+      transform: `translate(${x}px, ${y}px)`,
+      transition: 'transform 0.08s ease-out'
+    }}
   />
 );