@centreon/ui 23.10.56 → 23.10.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.56",
+  "version": "23.10.58",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -107,7 +107,9 @@
     "@lexical/rich-text": "^0.11.3",
     "@lexical/selection": "0.11.3",
     "@lexical/utils": "0.11.3",
+    "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
+    "@visx/group": "^3.3.0",
     "@visx/pattern": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^2.12.2",

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -0,0 +1,87 @@
+import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
+import { useTransition, interpolate, animated } from '@react-spring/web';
+import { equals } from 'ramda';
+
+import { Metric } from '../common/timeSeries/models';
+
+import { ThresholdType } from './models';
+
+type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
+
+const fromLeaveTransition = (): AnimatedStyles => ({
+  endAngle: 0,
+  opacity: 0,
+  startAngle: 0
+});
+const enterUpdateTransition = <T,>({
+  startAngle,
+  endAngle
+}: PieArcDatum<T>): AnimatedStyles => ({
+  endAngle,
+  opacity: 1,
+  startAngle
+});
+
+type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
+  animate?: boolean;
+  delay?: number;
+  getColor: (d: PieArcDatum<Datum>) => string;
+  getKey: (d: PieArcDatum<Datum>) => string;
+  hideTooltip?: () => void;
+  metric?: Metric;
+  showTooltip?: (args) => void;
+  thresholdTooltipLabels?: Array<string>;
+};
+
+const AnimatedPie = <Datum,>({
+  animate,
+  arcs,
+  path,
+  getKey,
+  getColor,
+  showTooltip,
+  hideTooltip,
+  thresholdTooltipLabels = []
+}: AnimatedPieProps<Datum>): JSX.Element => {
+  const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
+    enter: enterUpdateTransition,
+    from: animate ? fromLeaveTransition : enterUpdateTransition,
+    keys: getKey,
+    leave: animate ? fromLeaveTransition : enterUpdateTransition,
+    update: enterUpdateTransition
+  });
+
+  return transitions((props, arc, { key }) => (
+    <g key={key}>
+      <animated.path
+        d={interpolate(
+          [props.startAngle, props.endAngle],
+          (startAngle, endAngle) =>
+            path({
+              ...arc,
+              endAngle,
+              startAngle
+            })
+        )}
+        data-testid={`${arc.data?.value || arc.data}-arc`}
+        fill={getColor(arc)}
+        onMouseEnter={(event) => {
+          const thresholdType = arc.data.name;
+
+          if (equals(thresholdType, ThresholdType.Success)) {
+            return;
+          }
+
+          showTooltip?.({
+            tooltipData: thresholdTooltipLabels[thresholdType],
+            tooltipLeft: event.clientX,
+            tooltipTop: event.clientY
+          });
+        }}
+        onMouseLeave={() => hideTooltip?.()}
+      />
+    </g>
+  ));
+};
+
+export default AnimatedPie;

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+
+import { Gauge } from './Gauge';
+
+const meta: Meta<typeof Gauge> = {
+  component: Gauge
+};
+
+export default meta;
+type Story = StoryObj<typeof Gauge>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ height: '500px', width: '500px' }}>
+    <Gauge {...props} />
+  </div>
+);
+
+export const success: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.5, 0.6]
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.2, 0.5]
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.13, 0.35]
+  },
+  render: Template
+};

package/src/Graph/Gauge/Gauge.tsx

@@ -0,0 +1,44 @@
+import { Responsive } from '@visx/visx';
+import { sort, subtract } from 'ramda';
+
+import { LineChartData } from '../common/models';
+import { getMetricWithLatestData } from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+
+import ResponsiveGauge from './ResponsiveGauge';
+
+interface Props {
+  data?: LineChartData;
+  disabledThresholds?: boolean;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
+}
+
+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;
+
+  return (
+    <Responsive.ParentSize>
+      {({ width, height }) => (
+        <ResponsiveGauge
+          disabledThresholds={disabledThresholds}
+          height={height}
+          metric={metric}
+          thresholdTooltipLabels={thresholdTooltipLabels}
+          thresholds={sortedThresholds}
+          width={width}
+        />
+      )}
+    </Responsive.ParentSize>
+  );
+};

package/src/Graph/Gauge/PieData.tsx

@@ -0,0 +1,79 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { T, always, cond, gt, head, identity } from 'ramda';
+
+import { Theme, useTheme } from '@mui/material';
+
+import { thresholdThickness } from './Thresholds';
+import AnimatedPie from './AnimatedPie';
+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,
+  disabledThresholds
+}: Omit<
+  GaugeProps,
+  'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
+>): JSX.Element => {
+  const theme = useTheme();
+
+  const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
+  const pieColor = disabledThresholds
+    ? theme.palette.success.main
+    : getColorFromData({
+        data: metric.data[0],
+        theme,
+        thresholds
+      });
+
+  const getDataColor = scaleOrdinal({
+    domain: pieData,
+    range: [pieColor, 'transparent']
+  });
+
+  return (
+    <Pie
+      data={pieData}
+      endAngle={-Math.PI / 2}
+      innerRadius={radius - dataThickness}
+      outerRadius={radius - thresholdThickness * 1.3}
+      pieSortValues={() => -1}
+      pieValue={identity}
+      startAngle={Math.PI / 2}
+    >
+      {(pie) => (
+        <AnimatedPie<number>
+          {...pie}
+          animate
+          getColor={(arc) => getDataColor(arc.data)}
+          getKey={(arc) => `${arc.data}`}
+          thresholdTooltipLabels={[]}
+        />
+      )}
+    </Pie>
+  );
+};
+
+export default PieData;

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -0,0 +1,135 @@
+import { useRef } from 'react';
+
+import { Group } from '@visx/group';
+import { head } from 'ramda';
+import { Tooltip } from '@visx/visx';
+
+import { Box, Fade, useTheme } from '@mui/material';
+
+import { Metric } from '../common/timeSeries/models';
+import { formatMetricValue } from '../common/timeSeries';
+import { getColorFromDataAndTresholds } from '../common/utils';
+import { margins } from '../common/margins';
+
+import Thresholds from './Thresholds';
+import PieData from './PieData';
+
+interface Props {
+  disabledThresholds?: boolean;
+  height: number;
+  metric: Metric;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
+  width: number;
+}
+
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
+const ResponsiveGauge = ({
+  width,
+  height,
+  thresholds,
+  metric,
+  thresholdTooltipLabels,
+  disabledThresholds
+}: Props): JSX.Element => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const theme = useTheme();
+
+  const {
+    showTooltip,
+    hideTooltip,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData
+  } = Tooltip.useTooltip();
+
+  const innerWidth = width - margins.left - margins.right;
+  const innerHeight = height - margins.top - margins.bottom;
+  const centerY = innerHeight / 2;
+  const centerX = innerWidth / 2;
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const adaptedMaxValue = Math.max(
+    metric.maximum_value || 0,
+    Math.max(...thresholds) * 1.1,
+    head(metric.data) as number
+  );
+
+  const pieColor = disabledThresholds
+    ? 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 isSmallHeight = height < 250;
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <svg height={height} ref={svgRef} width={width}>
+        <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}
+          />
+        </Group>
+        <text
+          dominantBaseline="middle"
+          style={{
+            fill: pieColor,
+            ...theme.typography.h3,
+            fontSize: Math.min(width, height) / 7
+          }}
+          textAnchor="middle"
+          x="50%"
+          y={isSmallHeight ? 140 : 100 + Math.min(width, height) / 3}
+        >
+          {formatMetricValue({
+            base: 1000,
+            unit: metric.unit,
+            value: metric.data[0]
+          })}{' '}
+          {metric.unit}
+        </text>
+      </svg>
+      <Fade in={tooltipOpen && !disabledThresholds}>
+        <Tooltip.Tooltip
+          left={(tooltipLeft || 0) - svgLeft}
+          style={{
+            ...baseStyles,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+            transform: 'translate(-50%, 0)'
+          }}
+          top={(tooltipTop || 0) - svgTop + 20}
+        >
+          {tooltipData}
+        </Tooltip.Tooltip>
+      </Fade>
+    </Box>
+  );
+};
+
+export default ResponsiveGauge;

package/src/Graph/Gauge/Thresholds.tsx

@@ -0,0 +1,87 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { pluck } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import AnimatedPie from './AnimatedPie';
+import { GaugeProps, ThresholdType } from './models';
+
+export const thresholdThickness = 12;
+
+const Thresholds = ({
+  thresholds,
+  radius,
+  adaptedMaxValue,
+  showTooltip,
+  hideTooltip,
+  metric,
+  thresholdTooltipLabels,
+  disabledThresholds
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
+  const theme = useTheme();
+
+  const namedThresholds = [
+    {
+      name: ThresholdType.Success,
+      value: thresholds[0]
+    },
+    {
+      name: ThresholdType.Warning,
+      value: thresholds[1]
+    },
+    {
+      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 (
+    <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>
+  );
+};
+
+export default Thresholds;

package/src/Graph/Gauge/index.ts

@@ -0,0 +1 @@
+export { Gauge } from './Gauge';

package/src/Graph/Gauge/models.ts

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

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

@@ -6,7 +6,7 @@ import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 import { getXAxisTickFormat } from '../../helpers';
 import { GraphInterval } from '../../models';
-import { getUnits } from '../../timeSeries';
+import { getUnits } from '../../../common/timeSeries';
 
 import UnitLabel from './UnitLabel';
 import { Data } from './models';

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

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

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

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

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/RegularLines/index.tsx

@@ -4,8 +4,8 @@ import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals, isNil, prop } from 'ramda';
 
-import { getTime } from '../../../timeSeries';
-import { TimeValue } from '../../../timeSeries/models';
+import { getTime } from '../../../../common/timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { getFillColor } from '../../../common';
 import { CurveType } from '../models';
 

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/RegularLines/useRegularLines.ts

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

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/StackedLines/index.tsx

@@ -5,8 +5,8 @@ import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
 import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getFillColor } from '../../../common';
-import { getTime } from '../../../timeSeries';
-import { Line, TimeValue } from '../../../timeSeries/models';
+import { getTime } from '../../../../common/timeSeries';
+import { Line, TimeValue } from '../../../../common/timeSeries/models';
 import { CurveType } from '../models';
 
 interface Props {

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/StackedLines/useStackedLines.ts

@@ -2,7 +2,7 @@ import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
   getTimeSeriesForLines
-} from '../../../timeSeries';
+} from '../../../../common/timeSeries';
 import { LinesData } from '../models';
 
 interface StackedLines {

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/BasicThreshold.tsx

@@ -1,6 +1,6 @@
 import { Threshold } from '@visx/threshold';
 
-import { TimeValue } from '../../../timeSeries/models';
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { CurveType } from '../models';
 
 interface Props {

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -4,15 +4,16 @@ import { ScaleLinear } from 'd3-scale';
 import { useTheme } from '@mui/material/styles';
 
 import { adjustGraphData } from '../../../helpers/index';
-import { GraphData, PatternOrientation } from '../../../models';
+import { PatternOrientation } from '../../../models';
 import { CurveType } from '../models';
+import { LineChartData } from '../../../../common/models';
 
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props {
   curve: CurveType;
-  data: GraphData;
+  data: LineChartData;
   graphHeight: number;
   id: string;
   leftScale: ScaleLinear<number, number>;

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/ThresholdWithVariation.tsx

@@ -3,7 +3,7 @@ import { LinePath } from '@visx/shape';
 
 import { useTheme } from '@mui/material/styles';
 
-import { TimeValue } from '../../../timeSeries/models';
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/index.tsx

@@ -6,7 +6,7 @@ import {
   ThresholdType,
   VariationThreshold
 } from '../../../models';
-import { TimeValue } from '../../../timeSeries/models';
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/models.ts

@@ -2,7 +2,7 @@ import { ScaleLinear } from 'd3-scale';
 import { equals, reject } from 'ramda';
 
 import { GlobalAreaLines, ThresholdType } from '../../../models';
-import { Line, TimeValue } from '../../../timeSeries/models';
+import { Line, TimeValue } from '../../../../common/timeSeries/models';
 
 export interface Data {
   lineColor: string;

package/src/Graph/{BasicComponents → LineChart/BasicComponents}/Lines/Threshold/useScaleThreshold.ts

@@ -1,8 +1,8 @@
 import { equals, isNil, prop } from 'ramda';
 
 import { ThresholdType, VariationThreshold } from '../../../models';
-import { TimeValue } from '../../../timeSeries/models';
-import { getTime, getUnits, getYScale } from '../../../timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { getTime, getUnits, getYScale } from '../../../../common/timeSeries';
 import { displayArea } from '../../../helpers/index';
 
 import { envelopeVariationFormula } from './helpers';