@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,138 +0,0 @@
-import { equals, isNil } from 'ramda';
-
-import type { TimeValue } from '../../../../common/timeSeries/models';
-import { displayArea } from '../../../helpers/index';
-import {
-  type PatternThreshold,
-  ThresholdType,
-  type VariationThreshold
-} from '../../../models';
-
-import BasicThreshold from './BasicThreshold';
-import Circle from './Circle';
-import ThresholdWithPatternLines from './ThresholdWithPatternLines';
-import ThresholdWithVariation from './ThresholdWithVariation';
-import type { WrapperThresholdLinesModel } from './models';
-import useScaleThreshold from './useScaleThreshold';
-
-interface Props extends WrapperThresholdLinesModel {
-  curve: 'linear' | 'natural' | 'step';
-  graphHeight: number;
-  timeSeries: Array<TimeValue>;
-}
-
-const WrapperThresholdLines = ({
-  areaThresholdLines,
-  graphHeight,
-  lines,
-  timeSeries,
-  xScale,
-  curve,
-  yScalesPerUnit
-}: Props): JSX.Element | null => {
-  const data = useScaleThreshold({
-    areaThresholdLines,
-    lines,
-    xScale,
-    yScalesPerUnit
-  });
-
-  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) => {
-    const { type, id } = item;
-
-    if (equals(type, ThresholdType.basic)) {
-      return [
-        {
-          Component: BasicThreshold,
-          key: id,
-          props: { ...commonProps, getY0, getY1, id }
-        }
-      ];
-    }
-    if (equals(type, ThresholdType.variation)) {
-      const dataVariation = item as VariationThreshold;
-      if (!rest?.getY0Variation || !rest.getY1Variation || !rest.getYOrigin) {
-        return null;
-      }
-
-      return [
-        {
-          Component: ThresholdWithVariation,
-          key: dataVariation.id,
-          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, index) => ({
-        Component: ThresholdWithPatternLines,
-        key: index,
-        props: {
-          data: element,
-          graphHeight,
-          key: index,
-          orientation: dataPattern?.orientation,
-          xScale,
-          yScalesPerUnit
-        }
-      }));
-    }
-
-    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={props?.id ?? key} key={key} />
-        ))
-      )}
-    </g>
-  );
-};
-
-export default WrapperThresholdLines;

package/src/Graph/Chart/BasicComponents/Lines/Threshold/models.ts

@@ -1,104 +0,0 @@
-import type { ScaleLinear } from 'd3-scale';
-import { equals, reject } from 'ramda';
-
-import type { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { type GlobalAreaLines, ThresholdType } from '../../../models';
-
-export interface Data {
-  lineColor: string;
-  metric: string;
-  yScale: ScaleLinear<number, number>;
-}
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-export interface ArePointsOnline {
-  pointLower: Point;
-  pointOrigin: Point;
-  pointUpper: Point;
-}
-export interface Online extends ArePointsOnline {
-  maxDistance?: number;
-}
-
-export interface FactorsVariation {
-  currentFactorMultiplication: number;
-  simulatedFactorMultiplication: number;
-}
-
-export interface Result {
-  getX: (timeValue: TimeValue) => number;
-  getY0: (timeValue: TimeValue) => number;
-  getY1: (timeValue: TimeValue) => number;
-  lineColorY0: string;
-  lineColorY1: string;
-}
-
-export interface EnvelopeVariationFormula {
-  factorsData: FactorsVariation;
-  lowerRealValue: number;
-  upperRealValue: number;
-}
-
-export interface ThresholdLinesModel {
-  dataY0: Data;
-  dataY1: Data;
-  graphHeight: number;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
-}
-
-export interface LinesThreshold {
-  lineLower: Line;
-  lineOrigin: Line;
-  lineUpper: Line;
-}
-
-export interface WrapperThresholdLinesModel {
-  areaThresholdLines?: GlobalAreaLines['areaThresholdLines'];
-  lines: Array<Line>;
-  xScale: ScaleLinear<number, number>;
-  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-}
-
-export interface ScaleVariationThreshold {
-  getY0Variation: (timeValue: TimeValue) => number;
-  getY1Variation: (timeValue: TimeValue) => number;
-  getYOrigin: (timeValue: TimeValue) => number;
-}
-
-export interface Circle extends ScaleVariationThreshold {
-  getCountDisplayedCircles?: (value: number) => void;
-  getX: (timeValue: TimeValue) => number;
-  timeSeries: Array<TimeValue>;
-}
-
-export const lowerLineName = 'Lower Threshold';
-export const upperLineName = 'Upper Threshold';
-
-// upper,lower and origin
-export const requiredNumberLinesThreshold = 3;
-
-export const findLineOfOriginMetricThreshold = (
-  lines: Array<Line>
-): Array<Line> => {
-  const metrics = lines.map((line) => {
-    const { metric } = line;
-
-    return metric.includes('_upper_thresholds')
-      ? metric.replace('_upper_thresholds', '')
-      : null;
-  });
-
-  const originMetric = metrics.find((element) => element);
-
-  return reject((line: Line) => !equals(line.metric, originMetric), lines);
-};
-
-export const canDisplayThreshold = (
-  areaThresholdLines: GlobalAreaLines['areaThresholdLines']
-): boolean =>
-  !!areaThresholdLines?.find((item) => item && item.type in ThresholdType);

package/src/Graph/Chart/BasicComponents/Lines/Threshold/useCoordinateCircle.ts

@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-
-import { isNil } from 'ramda';
-
-import { checkArePointsOnline } from './helpers';
-import { Circle, Point } from './models';
-
-const useCoordinateCircle = ({
-  timeSeries,
-  getX,
-  getY0Variation,
-  getY1Variation,
-  getYOrigin,
-  getCountDisplayedCircles
-}: Circle): Array<Point> => {
-  const getCoordinate = (): Array<Point | null> => {
-    return timeSeries.map((timeValue) => {
-      const x = getX(timeValue);
-      const y = getYOrigin(timeValue);
-
-      const y0 = getY0Variation(timeValue);
-      const y1 = getY1Variation(timeValue);
-
-      return checkArePointsOnline({
-        pointLower: { x, y: y0 },
-        pointOrigin: { x, y },
-        pointUpper: { x, y: y1 }
-      });
-    });
-  };
-
-  const coordinates = getCoordinate()?.filter(
-    (element) => !isNil(element)
-  ) as Array<Point>;
-
-  useEffect(() => {
-    if (!coordinates) {
-      return;
-    }
-    getCountDisplayedCircles?.(coordinates.length);
-  }, [coordinates.length]);
-
-  return coordinates;
-};
-
-export default useCoordinateCircle;

package/src/Graph/Chart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -1,159 +0,0 @@
-import { equals, isNil, prop } from 'ramda';
-
-import { getTime, getYScale } from '../../../../common/timeSeries';
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { displayArea } from '../../../helpers/index';
-import { ThresholdType, VariationThreshold } from '../../../models';
-
-import { envelopeVariationFormula } from './helpers';
-import {
-  LinesThreshold,
-  ScaleVariationThreshold,
-  WrapperThresholdLinesModel,
-  findLineOfOriginMetricThreshold,
-  lowerLineName,
-  upperLineName
-} from './models';
-
-interface Result extends Partial<ScaleVariationThreshold> {
-  getX: (timeValue: TimeValue) => number;
-  getY0: (timeValue: TimeValue) => number;
-  getY1: (timeValue: TimeValue) => number;
-  lineColorY0: string;
-  lineColorY1: string;
-}
-
-const useScaleThreshold = ({
-  lines,
-  areaThresholdLines,
-  yScalesPerUnit,
-  xScale
-}: WrapperThresholdLinesModel): Result | null => {
-  const getLinesThreshold = (): LinesThreshold | null => {
-    const lineUpper = lines.find((line) => equals(line.name, upperLineName));
-
-    const lineLower = lines.find((line) => equals(line.name, lowerLineName));
-
-    const lineOrigin = findLineOfOriginMetricThreshold(lines)[0];
-    if (!lineLower || !lineOrigin || !lineUpper) {
-      return null;
-    }
-
-    return { lineLower, lineOrigin, lineUpper };
-  };
-
-  const linesThreshold = getLinesThreshold();
-  if (!linesThreshold) {
-    return null;
-  }
-
-  const { lineUpper, lineLower, lineOrigin } = linesThreshold;
-
-  const {
-    metric_id: metricY1,
-    unit: unitY1,
-    invert: invertY1,
-    lineColor: lineColorY1
-  } = lineUpper;
-
-  const {
-    metric_id: metricY0,
-    unit: unitY0,
-    invert: invertY0,
-    lineColor: lineColorY0
-  } = lineLower;
-
-  const {
-    metric_id: metricOrigin,
-    unit: unitYOrigin,
-    invert: invertYOrigin
-  } = lineOrigin;
-
-  const y1Scale = getYScale({
-    invert: invertY1,
-    unit: unitY1,
-    yScalesPerUnit
-  });
-
-  const y0Scale = getYScale({
-    invert: invertY0,
-    unit: unitY0,
-    yScalesPerUnit
-  });
-
-  const yScale = getYScale({
-    invert: invertYOrigin,
-    unit: unitYOrigin,
-    yScalesPerUnit
-  });
-
-  const getX = (timeValue: TimeValue): number => {
-    return xScale(getTime(timeValue)) ?? null;
-  };
-
-  const getY0 = (timeValue: TimeValue): number => {
-    return y0Scale(prop(metricY0, timeValue)) ?? null;
-  };
-  const getY1 = (timeValue: TimeValue): number => {
-    return y1Scale(prop(metricY1, timeValue)) ?? null;
-  };
-
-  const commonResult = { getX, getY0, getY1, lineColorY0, lineColorY1 };
-
-  const isVariationType = !!areaThresholdLines?.find(
-    (item) => item && equals(item.type, ThresholdType.variation)
-  );
-  if (isVariationType) {
-    const data = areaThresholdLines?.find((item) =>
-      equals(item.type, ThresholdType.variation) ? item : null
-    ) as VariationThreshold;
-
-    const variationFactorsExist =
-      displayArea(data?.factors) &&
-      !isNil(data?.factors?.simulatedFactorMultiplication) &&
-      !isNil(data?.factors?.currentFactorMultiplication);
-
-    if (!variationFactorsExist) {
-      return commonResult;
-    }
-
-    const getY0Variation = (timeValue: TimeValue): number => {
-      const upperRealValue = prop(metricY1, timeValue);
-      const lowerRealValue = prop(metricY0, timeValue);
-
-      const variation = envelopeVariationFormula({
-        factorsData: data.factors,
-        lowerRealValue,
-        upperRealValue
-      });
-
-      return y0Scale(prop(metricY0, timeValue) + variation) ?? null;
-    };
-
-    const getY1Variation = (timeValue: TimeValue): number => {
-      const upperRealValue = prop(metricY1, timeValue);
-      const lowerRealValue = prop(metricY0, timeValue);
-
-      const variation = envelopeVariationFormula({
-        factorsData: data.factors,
-        lowerRealValue,
-        upperRealValue
-      });
-
-      return y1Scale(prop(metricY1, timeValue) - variation) ?? null;
-    };
-    const getYOrigin = (timeValue: TimeValue): number =>
-      yScale(prop(metricOrigin, timeValue));
-
-    return {
-      getY0Variation,
-      getY1Variation,
-      getYOrigin,
-      ...commonResult
-    };
-  }
-
-  return commonResult;
-};
-
-export default useScaleThreshold;

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -1,262 +0,0 @@
-import type { MutableRefObject } from 'react';
-
-import type { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
-import {
-  getDates,
-  getTimeSeriesForLines,
-  getYScale
-} from '../../../common/timeSeries';
-import type { Line, TimeValue } from '../../../common/timeSeries/models';
-import { getPointRadius } from '../../../common/utils';
-import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
-import RegularAnchorPoint, {
-  getYAnchorPoint
-} from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
-import { displayArea } from '../../helpers/index';
-import type { DisplayAnchor, GlobalAreaLines } from '../../models';
-
-import Point from './Point';
-import RegularLine from './RegularLines';
-import useRegularLines from './RegularLines/useRegularLines';
-import StackedLines from './StackedLines';
-import useStackedLines from './StackedLines/useStackedLines';
-import WrapperThresholdLines from './Threshold';
-import {
-  canDisplayThreshold,
-  requiredNumberLinesThreshold
-} from './Threshold/models';
-
-interface Props extends GlobalAreaLines {
-  areaTransparency?: number;
-  curve: 'linear' | 'step' | 'natural';
-  dashLength?: number;
-  dashOffset?: number;
-  displayAnchor?: DisplayAnchor;
-  displayedLines: Array<Line>;
-  dotOffset?: number;
-  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
-  height: number;
-  lineWidth?: number;
-  scale?: 'linear' | 'logarithmic';
-  scaleLogarithmicBase?: number;
-  showArea?: boolean;
-  showPoints?: boolean;
-  timeSeries: Array<TimeValue>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-}
-
-const Lines = ({
-  areaTransparency,
-  height,
-  graphSvgRef,
-  width,
-  displayAnchor,
-  curve,
-  yScalesPerUnit,
-  xScale,
-  timeSeries,
-  displayedLines,
-  areaThresholdLines,
-  areaStackedLines,
-  areaRegularLines,
-  showArea,
-  showPoints,
-  lineWidth,
-  dotOffset,
-  dashLength,
-  dashOffset,
-  scale,
-  scaleLogarithmicBase
-}: Props): JSX.Element => {
-  const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
-    lines: displayedLines,
-    timeSeries
-  });
-
-  const { regularLines } = useRegularLines({ lines: displayedLines });
-
-  const displayThresholdArea =
-    displayedLines?.length >= requiredNumberLinesThreshold &&
-    canDisplayThreshold(areaThresholdLines);
-
-  const displayAreaRegularLines =
-    (areaRegularLines?.display ?? true) && displayArea(regularLines);
-
-  const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
-  const commonStackedLinesProps = {
-    areaTransparency,
-    curve,
-    dashLength,
-    dashOffset,
-    displayAnchor: displayGuidingLines,
-    dotOffset,
-    graphHeight: height,
-    graphSvgRef,
-    graphWidth: width,
-    lineWidth,
-    showArea,
-    showPoints,
-    xScale
-  };
-
-  return (
-    <g>
-      {displayGuidingLines && (
-        <GuidingLines
-          graphHeight={height}
-          graphWidth={width}
-          timeSeries={timeSeries}
-          xScale={xScale}
-        />
-      )}
-
-      {(areaStackedLines?.display ?? true) && (
-        <>
-          {Object.entries(stackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                key={`stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
-                {...commonStackedLinesProps}
-              />
-            )
-          )}
-          {Object.entries(invertedStackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                key={`invert-stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={getYScale({
-                  invert: '1',
-                  scale,
-                  scaleLogarithmicBase,
-                  unit,
-                  yScalesPerUnit
-                })}
-                {...commonStackedLinesProps}
-              />
-            )
-          )}
-        </>
-      )}
-
-      {displayThresholdArea && (
-        <WrapperThresholdLines
-          areaThresholdLines={areaThresholdLines}
-          graphHeight={height}
-          lines={displayedLines}
-          timeSeries={timeSeries}
-          xScale={xScale}
-          yScalesPerUnit={yScalesPerUnit}
-        />
-      )}
-
-      {displayAreaRegularLines
-        ? regularLines.map(
-            ({
-              areaColor,
-              transparency,
-              lineColor,
-              filled,
-              unit,
-              highlight,
-              invert,
-              metric_id,
-              ...rest
-            }) => {
-              const yScale = getYScale({
-                invert,
-                scale,
-                scaleLogarithmicBase,
-                unit,
-                yScalesPerUnit
-              });
-              const relatedTimeSeries = getTimeSeriesForLines({
-                invert,
-                lines: [
-                  {
-                    areaColor,
-                    filled,
-                    highlight,
-                    invert,
-                    lineColor,
-                    metric_id,
-                    transparency,
-                    unit,
-                    ...rest
-                  }
-                ],
-                timeSeries
-              });
-
-              return (
-                <g key={metric_id}>
-                  {displayGuidingLines && (
-                    <RegularAnchorPoint
-                      areaColor={areaColor || lineColor}
-                      lineColor={lineColor}
-                      metric_id={metric_id}
-                      timeSeries={relatedTimeSeries}
-                      transparency={transparency}
-                      xScale={xScale}
-                      yScale={yScale}
-                    />
-                  )}
-                  {showPoints &&
-                    getDates(relatedTimeSeries).map((timeTick) => (
-                      <Point
-                        key={timeTick.toString()}
-                        lineColor={lineColor}
-                        metric_id={metric_id}
-                        radius={getPointRadius(lineWidth)}
-                        timeSeries={relatedTimeSeries}
-                        timeTick={timeTick}
-                        xScale={xScale}
-                        yPoint={getYAnchorPoint({
-                          metric_id,
-                          timeSeries: relatedTimeSeries,
-                          timeTick,
-                          yScale
-                        })}
-                        yScale={yScale}
-                      />
-                    ))}
-                  <RegularLine
-                    areaColor={areaColor || lineColor}
-                    curve={curve}
-                    dashLength={dashLength}
-                    dashOffset={dashOffset}
-                    dotOffset={dotOffset}
-                    filled={isNil(showArea) ? filled : showArea}
-                    graphHeight={height}
-                    highlight={highlight}
-                    lineColor={lineColor}
-                    lineWidth={lineWidth}
-                    metric_id={metric_id}
-                    timeSeries={relatedTimeSeries}
-                    transparency={
-                      isNil(areaTransparency)
-                        ? transparency || 80
-                        : areaTransparency
-                    }
-                    unit={unit}
-                    xScale={xScale}
-                    yScale={yScale}
-                  />
-                </g>
-              );
-            }
-          )
-        : null}
-    </g>
-  );
-};
-
-export default Lines;