@centreon/ui 24.7.6 → 24.7.7

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -0,0 +1,132 @@
+import { memo } from 'react';
+
+import { Shape } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { equals, isNil, pick, prop } from 'ramda';
+
+import { getTime } from '../../../../common/timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { getCurveFactory, getFillColor } from '../../../common';
+import { getStrokeDashArray } from '../../../../common/utils';
+
+interface Props {
+  areaColor: string;
+  curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
+  dotOffset?: number;
+  filled: boolean;
+  graphHeight: number;
+  highlight?: boolean;
+  lineColor: string;
+  lineWidth?: number;
+  metric_id: number;
+  shapeAreaClosed?: Record<string, unknown>;
+  shapeLinePath?: Record<string, unknown>;
+  timeSeries: Array<TimeValue>;
+  transparency: number;
+  unit: string;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const RegularLine = ({
+  filled,
+  timeSeries,
+  highlight,
+  metric_id,
+  lineColor,
+  unit,
+  yScale,
+  xScale,
+  areaColor,
+  transparency,
+  graphHeight,
+  curve,
+  lineWidth,
+  dotOffset,
+  dashLength,
+  dashOffset
+}: Props): JSX.Element => {
+  const curveType = getCurveFactory(curve);
+  const formattedLineWidth = lineWidth ?? 2;
+
+  const props = {
+    curve: curveType,
+    data: timeSeries,
+    defined: (value): boolean => !isNil(value[metric_id]),
+    opacity: 1,
+    stroke: lineColor,
+    strokeDasharray: getStrokeDashArray({
+      dashLength,
+      dashOffset,
+      dotOffset,
+      lineWidth: formattedLineWidth
+    }),
+    strokeWidth: highlight
+      ? Math.ceil((formattedLineWidth || 1) * 1.3)
+      : formattedLineWidth,
+    unit,
+    x: (timeValue): number => xScale(getTime(timeValue)) as number,
+    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
+  };
+
+  if (filled) {
+    return (
+      <Shape.AreaClosed<TimeValue>
+        data-metric={metric_id}
+        fill={getFillColor({ areaColor, transparency })}
+        fillRule="nonzero"
+        key={metric_id}
+        y0={Math.min(yScale(0), graphHeight)}
+        yScale={yScale}
+        {...props}
+      />
+    );
+  }
+
+  return <Shape.LinePath<TimeValue> data-metric={metric_id} {...props} />;
+};
+
+const memoizedProps = [
+  'curve',
+  'lineColor',
+  'areaColor',
+  'filled',
+  'transparency',
+  'lineWidth',
+  'dotOffset',
+  'dashLength',
+  'dashOffset'
+];
+
+export default memo(RegularLine, (prevProps, nextProps) => {
+  const {
+    timeSeries: prevTimeSeries,
+    graphHeight: prevGraphHeight,
+    highlight: prevHighlight,
+    xScale: prevXScale,
+    yScale: prevYScale
+  } = prevProps;
+  const {
+    timeSeries: nextTimeSeries,
+    graphHeight: nextGraphHeight,
+    highlight: nextHighlight,
+    xScale: nextXScale,
+    yScale: nextYScale
+  } = nextProps;
+
+  const prevXScaleRange = prevXScale.range();
+  const nextXScaleRange = nextXScale.range();
+  const prevYScaleDomain = prevYScale.domain();
+  const nextYScaleDomain = nextYScale.domain();
+
+  return (
+    equals(prevTimeSeries, nextTimeSeries) &&
+    equals(prevGraphHeight, nextGraphHeight) &&
+    equals(prevHighlight, nextHighlight) &&
+    equals(prevXScaleRange, nextXScaleRange) &&
+    equals(prevYScaleDomain, nextYScaleDomain) &&
+    equals(pick(memoizedProps, prevProps), pick(memoizedProps, nextProps))
+  );
+});

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/useRegularLines.ts

@@ -0,0 +1,15 @@
+import { difference } from 'ramda';
+
+import { Line } from '../../../../common/timeSeries/models';
+import { getSortedStackedLines } from '../../../../common/timeSeries';
+
+interface RegularLines {
+  regularLines: Array<Line>;
+}
+const useRegularLines = ({ lines }): RegularLines => {
+  const stackedLines = getSortedStackedLines(lines);
+
+  return { regularLines: difference(lines, stackedLines) };
+};
+
+export default useRegularLines;

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -0,0 +1,140 @@
+import { Shape } from '@visx/visx';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { all, equals, isNil, map, not, nth, path, pipe, prop } from 'ramda';
+
+import StackedAnchorPoint, {
+  getYAnchorPoint
+} from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
+import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
+import { getCurveFactory, getFillColor } from '../../../common';
+import { getDates, getTime } from '../../../../common/timeSeries';
+import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import Point from '../Point';
+import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
+
+interface Props {
+  areaTransparency?: number;
+  curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
+  displayAnchor: boolean;
+  dotOffset?: number;
+  lineWidth?: number;
+  lines: Array<Line>;
+  showArea?: boolean;
+  showPoints?: boolean;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const StackLines = ({
+  timeSeries,
+  lines,
+  yScale,
+  xScale,
+  displayAnchor,
+  curve,
+  showPoints,
+  showArea,
+  areaTransparency,
+  lineWidth,
+  dashLength,
+  dashOffset,
+  dotOffset
+}: Props): JSX.Element => {
+  const curveType = getCurveFactory(curve);
+
+  const formattedLineWidth = lineWidth ?? 2;
+
+  return (
+    <Shape.AreaStack
+      curve={curveType}
+      data={timeSeries}
+      defined={(d): boolean => {
+        return pipe(
+          map(prop('metric_id')) as unknown as (
+            displayedLines
+          ) => Array<string>,
+          all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
+        )(lines);
+      }}
+      keys={map(prop('metric_id'), lines)}
+      x={(d): number => xScale(getTime(d.data)) ?? 0}
+      y0={(d): number => yScale(d[0]) ?? 0}
+      y1={(d): number => yScale(d[1]) ?? 0}
+    >
+      {({ stacks, path: linePath }): Array<JSX.Element> => {
+        return stacks.map((stack, index) => {
+          const { areaColor, transparency, lineColor, highlight, metric_id } =
+            nth(index, lines) as Line;
+
+          const formattedTransparency = isNil(areaTransparency)
+            ? transparency || 80
+            : areaTransparency;
+
+          return (
+            <g key={`stack-${prop('key', stack)}`}>
+              {displayAnchor && (
+                <StackedAnchorPoint
+                  areaColor={areaColor}
+                  lineColor={lineColor}
+                  stackValues={stack as unknown as Array<StackValue>}
+                  timeSeries={timeSeries}
+                  transparency={transparency}
+                  xScale={xScale}
+                  yScale={yScale}
+                />
+              )}
+              {showPoints &&
+                getDates(timeSeries).map((timeTick) => (
+                  <Point
+                    key={timeTick.toString()}
+                    lineColor={lineColor}
+                    metric_id={metric_id}
+                    radius={getPointRadius(lineWidth)}
+                    timeSeries={timeSeries}
+                    timeTick={timeTick}
+                    xScale={xScale}
+                    yPoint={getYAnchorPoint({
+                      stackValues: stack as unknown as Array<StackValue>,
+                      timeTick,
+                      yScale
+                    })}
+                    yScale={yScale}
+                  />
+                ))}
+              <path
+                d={linePath(stack) || ''}
+                data-metric={metric_id}
+                fill={
+                  equals(showArea, false)
+                    ? 'transparent'
+                    : getFillColor({
+                        areaColor: areaColor || lineColor,
+                        transparency: formattedTransparency
+                      })
+                }
+                opacity={highlight === false ? 0.3 : 1}
+                stroke={lineColor}
+                strokeDasharray={getStrokeDashArray({
+                  dashLength,
+                  dashOffset,
+                  dotOffset,
+                  lineWidth: formattedLineWidth
+                })}
+                strokeWidth={
+                  highlight
+                    ? Math.ceil(formattedLineWidth * 1.3)
+                    : formattedLineWidth
+                }
+              />
+            </g>
+          );
+        });
+      }}
+    </Shape.AreaStack>
+  );
+};
+
+export default StackLines;

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -0,0 +1,39 @@
+import {
+  getInvertedStackedLines,
+  getNotInvertedStackedLines,
+  getTimeSeriesForLines
+} from '../../../../common/timeSeries';
+import { LinesData } from '../models';
+
+interface StackedLines {
+  invertedStackedLinesData: LinesData;
+  stackedLinesData: LinesData;
+}
+
+const useStackedLines = ({ lines, timeSeries }): StackedLines => {
+  const regularStackedLines = getNotInvertedStackedLines(lines);
+
+  const regularStackedTimeSeries = getTimeSeriesForLines({
+    lines: regularStackedLines,
+    timeSeries
+  });
+
+  const invertedStackedLines = getInvertedStackedLines(lines);
+  const invertedStackedTimeSeries = getTimeSeriesForLines({
+    lines: invertedStackedLines,
+    timeSeries
+  });
+
+  return {
+    invertedStackedLinesData: {
+      lines: invertedStackedLines,
+      timeSeries: invertedStackedTimeSeries
+    },
+    stackedLinesData: {
+      lines: regularStackedLines,
+      timeSeries: regularStackedTimeSeries
+    }
+  };
+};
+
+export default useStackedLines;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -0,0 +1,52 @@
+import { Threshold } from '@visx/threshold';
+
+import { TimeValue } from '../../../../common/timeSeries/models';
+
+interface Props {
+  curve: 'linear' | 'natural' | 'step';
+  fillAboveArea: string;
+  fillBelowArea: string;
+  fillOpacity?: number;
+  getX: (timeValue: TimeValue) => number;
+  getY0: (timeValue: TimeValue) => number;
+  getY1: (timeValue: TimeValue) => number;
+  graphHeight: number;
+  id: string;
+  timeSeries: Array<TimeValue>;
+}
+
+const BasicThreshold = ({
+  getX,
+  getY0,
+  getY1,
+  graphHeight,
+  timeSeries,
+  fillOpacity = 0.1,
+  id,
+  fillAboveArea,
+  fillBelowArea,
+  curve
+}: Props): JSX.Element => {
+  return (
+    <Threshold
+      aboveAreaProps={{
+        fill: fillAboveArea,
+        fillOpacity
+      }}
+      belowAreaProps={{
+        fill: fillBelowArea,
+        fillOpacity
+      }}
+      clipAboveTo={0}
+      clipBelowTo={graphHeight}
+      curve={curve}
+      data={timeSeries}
+      id={id}
+      x={getX}
+      y0={getY0}
+      y1={getY1}
+    />
+  );
+};
+
+export default BasicThreshold;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx

@@ -0,0 +1,43 @@
+import { Shape } from '@visx/visx';
+import { isEmpty, isNil } from 'ramda';
+
+import { Circle as CircleModel } from './models';
+import useCoordinateCircle from './useCoordinateCircle';
+
+const Circle = ({
+  getY0Variation,
+  getY1Variation,
+  getYOrigin,
+  timeSeries,
+  getX,
+  getCountDisplayedCircles
+}: CircleModel): JSX.Element | null => {
+  const coordinates = useCoordinateCircle({
+    getCountDisplayedCircles,
+    getX,
+    getY0Variation,
+    getY1Variation,
+    getYOrigin,
+    timeSeries
+  });
+
+  if (isEmpty(coordinates) || isNil(coordinates)) {
+    return null;
+  }
+
+  return (
+    <g>
+      {coordinates.map(({ x, y }) => (
+        <Shape.Circle
+          cx={x}
+          cy={y}
+          fill="red"
+          key={`${x.toString()}-${y.toString()}`}
+          r={2}
+        />
+      ))}
+    </g>
+  );
+};
+
+export default Circle;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -0,0 +1,77 @@
+import { PatternLines } from '@visx/pattern';
+import { ScaleLinear } from 'd3-scale';
+
+import { useTheme } from '@mui/material/styles';
+
+import { adjustGraphData } from '../../../helpers/index';
+import { PatternOrientation } from '../../../models';
+import { LineChartData } from '../../../../common/models';
+
+import BasicThreshold from './BasicThreshold';
+import useScaleThreshold from './useScaleThreshold';
+
+interface Props {
+  curve: 'linear' | 'natural' | 'step';
+  data: LineChartData;
+  graphHeight: number;
+  id: string;
+  leftScale: ScaleLinear<number, number>;
+  orientation?: Array<PatternOrientation>;
+  rightScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const ThresholdWithPatternLines = ({
+  graphHeight,
+  data,
+  orientation = ['diagonal'],
+  leftScale,
+  rightScale,
+  xScale,
+  id,
+  curve
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+
+  const { lines, timeSeries } = adjustGraphData(data);
+
+  const result = useScaleThreshold({
+    leftScale,
+    lines,
+    rightScale,
+    xScale
+  });
+  if (!result) {
+    return null;
+  }
+
+  const { getX, getY0, getY1 } = result;
+
+  return (
+    <>
+      <BasicThreshold
+        curve={curve}
+        fillAboveArea={"url('#lines')"}
+        fillBelowArea={"url('#lines')"}
+        fillOpacity={0.8}
+        getX={getX}
+        getY0={getY0}
+        getY1={getY1}
+        graphHeight={graphHeight}
+        id={id}
+        timeSeries={timeSeries}
+      />
+      <PatternLines
+        data-testid="patternLinesExclusionPeriods"
+        height={5}
+        id="lines"
+        orientation={orientation}
+        stroke={theme.palette.text.primary}
+        strokeWidth={1}
+        width={5}
+      />
+    </>
+  );
+};
+
+export default ThresholdWithPatternLines;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx

@@ -0,0 +1,62 @@
+import { curveBasis } from '@visx/curve';
+import { LinePath } from '@visx/shape';
+
+import { useTheme } from '@mui/material/styles';
+
+import { TimeValue } from '../../../../common/timeSeries/models';
+
+import BasicThreshold from './BasicThreshold';
+
+interface Props {
+  curve: 'linear' | 'natural' | 'step';
+  getX: (timeValue: TimeValue) => number;
+  getY0Variation: (timeValue: TimeValue) => number;
+  getY1Variation: (timeValue: TimeValue) => number;
+  graphHeight: number;
+  lineColorY0: string;
+  lineColorY1: string;
+  timeSeries: Array<TimeValue>;
+}
+
+const ThresholdWithVariation = ({
+  timeSeries,
+  getX,
+  getY0Variation,
+  getY1Variation,
+  graphHeight,
+  lineColorY1,
+  lineColorY0,
+  curve
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const props = {
+    curve: curveBasis,
+    data: timeSeries,
+    stroke: theme.palette.secondary.main,
+    strokeDasharray: 5,
+    strokeOpacity: 0.9,
+    x: getX
+  };
+
+  return (
+    <>
+      <BasicThreshold
+        curve={curve}
+        fillAboveArea={lineColorY1}
+        fillBelowArea={lineColorY0}
+        getX={getX}
+        getY0={getY0Variation}
+        getY1={getY1Variation}
+        graphHeight={graphHeight}
+        id="ThresholdWithVariation"
+        timeSeries={timeSeries}
+      />
+
+      <LinePath {...props} y={getY0Variation} />
+      <LinePath {...props} y={getY1Variation} />
+    </>
+  );
+};
+
+export default ThresholdWithVariation;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/helpers/index.ts

@@ -0,0 +1,69 @@
+import { isNil } from 'ramda';
+
+import {
+  ArePointsOnline,
+  EnvelopeVariationFormula,
+  Online,
+  Point
+} from '../models';
+
+export const checkArePointsOnline = ({
+  pointOrigin,
+  pointUpper,
+  pointLower
+}: ArePointsOnline): Point | null => {
+  const isPointDefined = ({ x, y }: Point): boolean => !isNil(x) && !isNil(y);
+
+  const arePointsDefined =
+    isPointDefined(pointOrigin) &&
+    isPointDefined(pointUpper) &&
+    isPointDefined(pointLower);
+
+  const isOnLine = ({
+    pointOrigin: origin,
+    pointLower: firstPoint,
+    pointUpper: secondPoint,
+    maxDistance = 0
+  }: Online): boolean => {
+    const { x, y } = origin;
+    const { x: x1, y: y1 } = firstPoint;
+    const { x: x2, y: y2 } = secondPoint;
+
+    const dxL = x2 - x1;
+    const dyL = y2 - y1;
+    const dxP = x - x1;
+    const dyP = y - y1;
+
+    const squareLen = dxL * dxL + dyL * dyL;
+    const dotProd = dxP * dxL + dyP * dyL;
+    const crossProd = dyP * dxL - dxP * dyL;
+
+    const distance = Math.abs(crossProd) / Math.sqrt(squareLen);
+
+    return distance <= maxDistance && dotProd >= 0 && dotProd <= squareLen;
+  };
+
+  const arePointsOnline = isOnLine({
+    pointLower,
+    pointOrigin,
+    pointUpper
+  });
+
+  return !arePointsOnline && arePointsDefined ? pointOrigin : null;
+};
+
+export const envelopeVariationFormula = ({
+  upperRealValue,
+  lowerRealValue,
+  factorsData
+}: EnvelopeVariationFormula): number => {
+  const { currentFactorMultiplication, simulatedFactorMultiplication } =
+    factorsData;
+
+  const variation = upperRealValue - lowerRealValue;
+
+  const factor =
+    1 - simulatedFactorMultiplication / currentFactorMultiplication;
+
+  return (variation / 2) * factor;
+};