@centreon/ui 24.4.13 → 24.4.14

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

@@ -1,99 +0,0 @@
-import { memo } from 'react';
-
-import { Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { equals, isNil, prop } from 'ramda';
-
-import { getTime } from '../../../../common/timeSeries';
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { getFillColor } from '../../../common';
-import { CurveType } from '../models';
-
-interface Props {
-  areaColor: string;
-  curve: CurveType;
-  filled: boolean;
-  graphHeight: number;
-  highlight?: boolean;
-  lineColor: string;
-  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
-}: Props): JSX.Element => {
-  const props = {
-    curve,
-    data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric_id]),
-    opacity: 1,
-    stroke: lineColor,
-    strokeWidth: !highlight ? 2 : 3,
-    unit,
-    x: (timeValue): number => xScale(getTime(timeValue)) as number,
-    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
-  };
-
-  if (filled) {
-    return (
-      <Shape.AreaClosed<TimeValue>
-        fill={getFillColor({ areaColor, transparency })}
-        fillRule="nonzero"
-        key={metric_id}
-        y0={Math.min(yScale(0), graphHeight)}
-        yScale={yScale}
-        {...props}
-      />
-    );
-  }
-
-  return <Shape.LinePath<TimeValue> {...props} />;
-};
-
-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)
-  );
-});

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

@@ -1,15 +0,0 @@
-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

@@ -1,81 +0,0 @@
-import { Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-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 '../../../../common/timeSeries';
-import { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
-
-interface Props {
-  curve: CurveType;
-  displayAnchor: boolean;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-
-const StackLines = ({
-  timeSeries,
-  lines,
-  yScale,
-  xScale,
-  displayAnchor,
-  curve
-}: Props): JSX.Element => {
-  return (
-    <Shape.AreaStack
-      curve={curve}
-      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 } = nth(
-            index,
-            lines
-          ) as Line;
-
-          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}
-                />
-              )}
-              <path
-                d={linePath(stack) || ''}
-                fill={getFillColor({ areaColor, transparency })}
-                opacity={highlight === false ? 0.3 : 1}
-                stroke={lineColor}
-                strokeWidth={highlight ? 2 : 1}
-              />
-            </g>
-          );
-        });
-      }}
-    </Shape.AreaStack>
-  );
-};
-
-export default StackLines;

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

@@ -1,39 +0,0 @@
-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

@@ -1,53 +0,0 @@
-import { Threshold } from '@visx/threshold';
-
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
-
-interface Props {
-  curve: CurveType;
-  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

@@ -1,43 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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 { CurveType } from '../models';
-import { LineChartData } from '../../../../common/models';
-
-import BasicThreshold from './BasicThreshold';
-import useScaleThreshold from './useScaleThreshold';
-
-interface Props {
-  curve: CurveType;
-  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

@@ -1,63 +0,0 @@
-import { curveBasis } from '@visx/curve';
-import { LinePath } from '@visx/shape';
-
-import { useTheme } from '@mui/material/styles';
-
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
-
-import BasicThreshold from './BasicThreshold';
-
-interface Props {
-  curve: CurveType;
-  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

@@ -1,69 +0,0 @@
-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;
-};

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

@@ -1,143 +0,0 @@
-import { equals, isNil } from 'ramda';
-
-import { displayArea } from '../../../helpers/index';
-import {
-  PatternThreshold,
-  ThresholdType,
-  VariationThreshold
-} from '../../../models';
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { CurveType } from '../models';
-
-import BasicThreshold from './BasicThreshold';
-import Circle from './Circle';
-import ThresholdWithPatternLines from './ThresholdWithPatternLines';
-import ThresholdWithVariation from './ThresholdWithVariation';
-import { WrapperThresholdLinesModel } from './models';
-import useScaleThreshold from './useScaleThreshold';
-
-interface Props extends WrapperThresholdLinesModel {
-  curve: CurveType;
-  graphHeight: number;
-  timeSeries: Array<TimeValue>;
-}
-
-const WrapperThresholdLines = ({
-  areaThresholdLines,
-  graphHeight,
-  leftScale,
-  lines,
-  rightScale,
-  timeSeries,
-  xScale,
-  curve
-}: Props): JSX.Element | null => {
-  const data = useScaleThreshold({
-    areaThresholdLines,
-    leftScale,
-    lines,
-    rightScale,
-    xScale
-  });
-
-  if (!data) {
-    return null;
-  }
-
-  const { getX, getY0, getY1, lineColorY0, lineColorY1, ...rest } = data;
-
-  const commonProps = {
-    curve,
-    fillAboveArea: lineColorY0,
-    fillBelowArea: lineColorY1,
-    getX,
-    graphHeight,
-    timeSeries
-  };
-
-  const thresholdLines = areaThresholdLines?.map((item, index) => {
-    const { type } = item;
-
-    if (equals(type, ThresholdType.basic)) {
-      return [
-        {
-          Component: BasicThreshold,
-          key: index,
-          props: { ...commonProps, getY0, getY1 }
-        }
-      ];
-    }
-    if (equals(type, ThresholdType.variation)) {
-      const dataVariation = item as VariationThreshold;
-      if (!rest?.getY0Variation || !rest.getY1Variation || !rest.getYOrigin) {
-        return null;
-      }
-
-      return [
-        {
-          Component: ThresholdWithVariation,
-          key: index,
-          props: {
-            factors: dataVariation.factors,
-            ...commonProps,
-            ...rest
-          }
-        },
-        {
-          Component: Circle,
-          key: 'circle',
-          props: {
-            ...rest,
-            getCountDisplayedCircles: dataVariation?.getCountDisplayedCircles,
-            getX,
-            timeSeries
-          }
-        }
-      ];
-    }
-    if (equals(type, ThresholdType.pattern)) {
-      const dataPattern = item as PatternThreshold;
-
-      if (!displayArea(dataPattern?.data)) {
-        return null;
-      }
-
-      const { data: pattern } = dataPattern;
-
-      return pattern.map((element, ind) => ({
-        Component: ThresholdWithPatternLines,
-        key: ind,
-        props: {
-          data: element,
-          graphHeight,
-          key: ind,
-          leftScale,
-          orientation: dataPattern?.orientation,
-          rightScale,
-          xScale
-        }
-      }));
-    }
-
-    return null;
-  });
-
-  const filteredThresholdLines = thresholdLines?.filter((item) => !isNil(item));
-
-  if (!filteredThresholdLines) {
-    return null;
-  }
-
-  return (
-    <g>
-      {filteredThresholdLines.map(
-        (element) =>
-          element?.map(({ Component, props, key }) => (
-            <Component {...props} id={key} key={key} />
-          ))
-      )}
-    </g>
-  );
-};
-
-export default WrapperThresholdLines;