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

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -44,7 +44,6 @@ export const changeMousePositionAndTimeValueDerivedAtom = atom(
 
       return;
     }
-
     set(mousePositionAtom, position);
 
     set(timeValueAtom, timeValue);

package/src/Graph/LineChart/Legend/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 
 import { slice } from 'ramda';
 import { useAtomValue } from 'jotai';
@@ -28,10 +28,8 @@ interface Props {
   limitLegendRows?: boolean;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
-  xScale;
 }
 
 const MainLegend = ({
@@ -41,21 +39,18 @@ const MainLegend = ({
   toggable = true,
   limitLegendRows = true,
   renderExtraComponent,
-  displayAnchor = true,
-  setLinesGraph,
-  xScale
+  displayAnchor = true
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines, setLinesGraph });
+    useLegend({ lines });
 
   const { getFormattedValue } = useInteractiveValues({
     base,
     lines,
-    timeSeries,
-    xScale
+    timeSeries
   });
 
   const displayedLines = limitLegendRows

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -3,12 +3,11 @@ import { useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { equals, find, isNil } from 'ramda';
 
-import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
+import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
   formatMetricValue,
   getLineForMetric,
-  getMetrics,
-  getTimeValue
+  getMetrics
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 
@@ -22,22 +21,14 @@ interface Props {
   base: number;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
-  xScale;
 }
 
 const useInteractiveValues = ({
   timeSeries,
   lines,
-  base,
-  xScale
+  base
 }: Props): InteractiveValues => {
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const timeValue = getTimeValue({
-    timeSeries,
-    x: mousePosition?.[0],
-    xScale
-  });
+  const timeValue = useAtomValue(timeValueAtom);
 
   const graphTimeValue = timeSeries?.find((item) =>
     equals(item.timeTick, timeValue?.timeTick)

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -1,5 +1,6 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
+import { useSetAtom } from 'jotai';
 import {
   equals,
   find,
@@ -16,6 +17,7 @@ import {
   toLower
 } from 'ramda';
 
+import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
@@ -27,10 +29,11 @@ interface LegendActions {
 
 interface Props {
   lines: Array<Line>;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
-const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
+const useLegend = ({ lines }: Props): LegendActions => {
+  const setLines = useSetAtom(linesGraphAtom);
+
   const displayedLines = reject(propEq('display', false), lines);
   const getLineByMetric = (metric: string): Line =>
     find(propEq('metric', metric), lines) as Line;
@@ -38,7 +41,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const toggleMetricLine = (metric): void => {
     const line = getLineByMetric(metric);
 
-    setLinesGraph([
+    setLines([
       ...reject(propEq('metric', metric), lines),
       { ...line, display: !line.display }
     ]);
@@ -53,11 +56,11 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const sortedData = sortBy(compose(toLower, prop('name')), data);
 
-    setLinesGraph(sortedData);
+    setLines(sortedData);
   };
 
   const clearHighlight = (): void => {
-    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
+    setLines(map((line) => ({ ...line, highlight: undefined }), lines));
   };
 
   const selectMetricLine = (metric: string): void => {
@@ -68,7 +71,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       equals(displayedLines.length, 1) && isLineDisplayed;
 
     if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
-      setLinesGraph(
+      setLines(
         map(
           (line) => ({
             ...line,
@@ -81,7 +84,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       return;
     }
 
-    setLinesGraph(
+    setLines(
       map(
         (line) => ({
           ...line,
@@ -102,8 +105,8 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       display: find(propEq('name', line.name), lines)?.display ?? true
     }));
 
-    setLinesGraph(newLines);
-  }, [lines]);
+    setLines(newLines);
+  }, []);
 
   return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,13 +1,11 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useMemo, useRef } from 'react';
 
-import { Group, Tooltip } from '@visx/visx';
-import { flatten, isNil, pluck } from 'ramda';
+import { Group } from '@visx/visx';
+import { isNil } from 'ramda';
 
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
+import { ClickAwayListener, Skeleton } from '@mui/material';
 
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -32,7 +30,6 @@ import {
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
-import Thresholds from './BasicComponents/Thresholds';
 
 interface Props extends LineChartProps {
   curve: CurveType;
@@ -42,15 +39,8 @@ interface Props extends LineChartProps {
   legend?: LegendModel;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
-  thresholdUnit?: string;
-  thresholds?: ThresholdsModel;
 }
 
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
 const LineChart = ({
   graphData,
   height = 500,
@@ -68,30 +58,15 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
-  thresholds,
-  thresholdUnit
+  marginBottom
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const theme = useTheme();
-
-  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
+  const { classes } = useStyles();
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const legendRef = useRef<HTMLDivElement | null>(null);
 
-  const {
-    tooltipOpen: thresholdTooltipOpen,
-    tooltipLeft: thresholdTooltipLeft,
-    tooltipTop: thresholdTooltipTop,
-    tooltipData: thresholdTooltipData,
-    hideTooltip: hideThresholdTooltip,
-    showTooltip: showThresholdTooltip
-  } = Tooltip.useTooltip();
-
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight =
     (height || 0) > 0
@@ -104,16 +79,9 @@ const LineChart = ({
 
   const { title, timeSeries, baseAxis, lines } = graphData;
 
-  const thresholdValues = flatten([
-    pluck('value', thresholds?.warning || []),
-    pluck('value', thresholds?.critical || [])
-  ]);
-
   const { displayedLines, newLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines,
-    linesGraph,
-    setLinesGraph
+    lines
   });
 
   const xScale = useMemo(
@@ -130,11 +98,9 @@ const LineChart = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight: graphHeight - 35
       }),
-    [displayedLines, timeSeries, graphHeight, thresholdValues]
+    [displayedLines, timeSeries, graphHeight]
   );
 
   const rightScale = useMemo(
@@ -142,8 +108,6 @@ const LineChart = ({
       getRightScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
@@ -237,19 +201,6 @@ const LineChart = ({
                 }}
                 zoomData={{ ...zoomPreview }}
               />
-
-              {thresholds?.enabled && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={hideThresholdTooltip}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  showTooltip={showThresholdTooltip}
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
-                  width={graphWidth}
-                />
-              )}
             </Group.Group>
           </svg>
           {displayTooltip && (
@@ -267,20 +218,6 @@ const LineChart = ({
               xScale={xScale}
             />
           )}
-          <Fade in={thresholdTooltipOpen}>
-            <Tooltip.Tooltip
-              left={thresholdTooltipLeft}
-              style={{
-                ...baseStyles,
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.primary,
-                transform: `translate(${graphWidth / 2}px, -10px)`
-              }}
-              top={thresholdTooltipTop}
-            >
-              {thresholdTooltipData}
-            </Tooltip.Tooltip>
-          </Fade>
         </div>
       </ClickAwayListener>
       {displayLegend && (
@@ -290,9 +227,7 @@ const LineChart = ({
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
-            setLinesGraph={setLinesGraph}
             timeSeries={timeSeries}
-            xScale={xScale}
           />
         </div>
       )}

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,3 +1,6 @@
 import { atom } from 'jotai';
 
+import { Line } from '../common/timeSeries/models';
+
+export const linesGraphAtom = atom<Array<Line> | null>(null);
 export const timeTickGraphAtom = atom<Date | null>(null);

package/src/Graph/LineChart/index.stories.tsx

@@ -29,11 +29,10 @@ import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.
 import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
 import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
 import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDayThreshold from './mockedData/lastDayThreshold.json';
+import dataLastDay from './mockedData/lastDayThreshold.json';
 import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
-import dataLastDay from './mockedData/lastDay.json';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -76,7 +75,7 @@ const Threshold = (args): JSX.Element => {
 
       <WrapperLineChart
         {...args}
-        data={dataLastDayThreshold}
+        data={dataLastDay}
         shapeLines={{
           areaThresholdLines: [
             { type: ThresholdType.basic },
@@ -124,7 +123,7 @@ const LineChartAndCLS = (args): JSX.Element => {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      setData(dataLastDayThreshold as unknown as LineChartData);
+      setData(dataLastDay as unknown as LineChartData);
     }, 100000);
   }, []);
 
@@ -188,7 +187,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
     }
 
     if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDayThreshold as unknown as LineChartData);
+      setCurrentData(dataLastDay as unknown as LineChartData);
 
       return;
     }
@@ -282,7 +281,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
       </ButtonGroup>
       <WrapperLineChart
         {...args}
-        data={dataLastDayThreshold as unknown as LineChartData}
+        data={dataLastDay as unknown as LineChartData}
         shapeLines={{
           areaThresholdLines: [
             {
@@ -304,7 +303,7 @@ const Template: Story = {
   render: (args) => (
     <WrapperLineChart
       {...args}
-      data={dataLastDayThreshold as unknown as LineChartData}
+      data={dataLastDay as unknown as LineChartData}
       shapeLines={{
         areaThresholdLines: [
           {
@@ -382,97 +381,3 @@ export const withCLS: Story = {
     start: defaultStart
   }
 };
-
-export const withThresholds: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholds: {
-      critical: [
-        {
-          label: 'critical',
-          value: 350
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning',
-          value: 300
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const withThresholdsAndUnit: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdUnit: '%',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical',
-          value: 79
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning',
-          value: 65
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const thresholdsRange: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdUnit: '%',
-    thresholds: {
-      critical: [
-        {
-          label: 'critical 1',
-          value: 60
-        },
-        {
-          label: 'critical 2',
-          value: 79
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'warning 1',
-          value: 20
-        },
-        {
-          label: 'warning 2',
-          value: 30
-        }
-      ]
-    }
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};

package/src/Graph/LineChart/index.tsx

@@ -10,7 +10,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
-import { LineChartData, Thresholds } from '../common/models';
+import { LineChartData } from '../common/models';
 
 import LineChart from './LineChart';
 import LoadingSkeleton from './LoadingSkeleton';
@@ -31,8 +31,6 @@ interface Props extends Partial<LineChartProps> {
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
-  thresholdUnit?: string;
-  thresholds?: Thresholds;
 }
 
 const WrapperLineChart = ({
@@ -52,14 +50,12 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0,
-  thresholds,
-  thresholdUnit
+  marginBottom = 0
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
-  if (loading && !adjustedData) {
+  if (loading || !adjustedData) {
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
@@ -68,10 +64,6 @@ const WrapperLineChart = ({
     );
   }
 
-  if (!adjustedData) {
-    return null;
-  }
-
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
@@ -97,8 +89,6 @@ const WrapperLineChart = ({
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
               timeShiftZones={timeShiftZones}
               tooltip={tooltip}
               width={width ?? responsiveWidth}

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 { head } from 'ramda';
 import { Bar } from '@visx/shape';
 import { useSpring, animated } from '@react-spring/web';
 
@@ -17,8 +17,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
 
 import { SingleBarProps } from './models';
-import Thresholds, { groupMargin } from './Thresholds';
-import { barHeight, margin } from './ThresholdLine';
+import Thresholds, { barHeight, groupMargin, margin } from './Thresholds';
 
 interface Props extends SingleBarProps {
   height: number;
@@ -32,21 +31,19 @@ const baseStyles = {
 
 const ResponsiveSingleBar = ({
   data,
+  thresholdTooltipLabels,
   thresholds,
   width,
-  height
+  height,
+  disabledThresholds
 }: Props): JSX.Element => {
   const theme = useTheme();
 
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
-  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
   );
 
@@ -134,10 +131,11 @@ const ResponsiveSingleBar = ({
             x={0}
             y={groupMargin + margin}
           />
-          {thresholds.enabled && (
+          {!disabledThresholds && (
             <Thresholds
               hideTooltip={hideTooltip}
               showTooltip={showTooltip}
+              thresholdTooltipLabels={thresholdTooltipLabels}
               thresholds={thresholds}
               xScale={xScale}
             />