@centreon/ui 24.4.21 → 24.4.22

package/src/Graph/LineChart/BasicComponents/Axes/UnitLabel.tsx

@@ -0,0 +1,20 @@
+import { commonTickLabelProps } from '../../common';
+
+interface UnitLabelProps {
+  unit: string;
+  x: number;
+  y?: number;
+}
+
+const UnitLabel = ({ x, y = 16, unit }: UnitLabelProps): JSX.Element => (
+  <text
+    fontFamily={commonTickLabelProps.fontFamily}
+    fontSize={commonTickLabelProps.fontSize}
+    x={x}
+    y={-y}
+  >
+    {unit}
+  </text>
+);
+
+export default UnitLabel;

package/src/Graph/LineChart/BasicComponents/Axes/index.tsx

@@ -0,0 +1,88 @@
+import { Axis } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { getXAxisTickFormat } from '../../helpers';
+import { GraphInterval } from '../../models';
+import { getUnits } from '../../../common/timeSeries';
+
+import UnitLabel from './UnitLabel';
+import { Data } from './models';
+import useAxisY from './useAxisY';
+
+interface Props {
+  data: Data;
+  graphInterval: GraphInterval;
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Axes = ({
+  height,
+  width,
+  data,
+  rightScale,
+  leftScale,
+  xScale,
+  graphInterval
+}: Props): JSX.Element => {
+  const { format } = useLocaleDateTimeFormat();
+  const { lines } = data;
+
+  const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
+
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+
+  const xTickCount = Math.min(Math.ceil(width / 82), 12);
+
+  const tickFormat =
+    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
+
+  const formatAxisTick = (tick): string =>
+    format({ date: new Date(tick), formatString: tickFormat });
+
+  const hasMoreThanTwoUnits = !isNil(thirdUnit);
+  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
+
+  return (
+    <g>
+      <Axis.AxisBottom
+        numTicks={xTickCount}
+        scale={xScale}
+        tickFormat={formatAxisTick}
+        top={height - 5}
+      />
+
+      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
+
+      <Axis.AxisLeft
+        numTicks={axisLeft?.numTicks}
+        orientation="left"
+        scale={leftScale}
+        tickFormat={axisLeft.tickFormat}
+        tickLabelProps={axisLeft.tickLabelProps}
+        tickLength={2}
+      />
+
+      {displayAxisRight && (
+        <Axis.AxisRight
+          left={width}
+          numTicks={axisRight?.numTicks}
+          orientation="right"
+          scale={rightScale}
+          tickFormat={axisRight.tickFormat}
+          tickLabelProps={axisRight.tickLabelProps}
+          tickLength={2}
+        />
+      )}
+      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
+    </g>
+  );
+};
+
+export default Axes;

package/src/Graph/LineChart/BasicComponents/Axes/models.ts

@@ -0,0 +1,26 @@
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+
+export interface LabelProps {
+  [x: string]: unknown;
+  textAnchor?: string;
+}
+
+export interface Axis {
+  displayUnit?: boolean;
+}
+
+export interface AxisYRight extends Axis {
+  display?: boolean;
+}
+
+export interface AxisX {
+  xAxisTickFormat?: string;
+}
+export interface Data {
+  axisX?: AxisX;
+  axisYLeft?: Axis;
+  axisYRight?: AxisYRight;
+  baseAxis: number;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}

package/src/Graph/LineChart/BasicComponents/Axes/useAxisY.ts

@@ -0,0 +1,100 @@
+import { isNil } from 'ramda';
+import { Axis } from '@visx/visx';
+
+import { useTheme } from '@mui/material';
+
+import { formatMetricValue, getUnits } from '../../../common/timeSeries';
+import { commonTickLabelProps } from '../../common';
+
+import { Data, LabelProps } from './models';
+
+interface AxisYData {
+  displayUnit: boolean;
+  numTicks?: number;
+  tickFormat: (value: unknown) => string;
+  tickLabelProps: Axis.TickLabelProps<unknown>;
+}
+
+interface AxisRightData extends AxisYData {
+  display: boolean;
+}
+
+interface AxisY {
+  axisLeft: AxisYData;
+  axisRight: AxisRightData;
+}
+
+interface Props {
+  data: Omit<Data, 'timeSeries'>;
+  graphHeight?: number;
+}
+
+const useAxisY = ({ data, graphHeight }: Props): AxisY => {
+  const theme = useTheme();
+
+  const { lines } = data;
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
+
+  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
+
+  const hasMoreThanTwoUnits = !isNil(thirdUnit);
+  const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;
+
+  const displayAxisRight = data?.axisYRight?.display ?? hasTwoUnits;
+  const displayUnitAxisRight = data?.axisYRight?.displayUnit ?? hasTwoUnits;
+  const displayUnitAxisLeft =
+    data?.axisYLeft?.displayUnit ?? !hasMoreThanTwoUnits;
+
+  const formatTick =
+    ({ unit }) =>
+    (value): string => {
+      if (isNil(value)) {
+        return '';
+      }
+
+      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
+    };
+
+  const labelProps = ({
+    textAnchor,
+    ...rest
+  }: LabelProps): Record<string, unknown> => ({
+    ...commonTickLabelProps,
+    textAnchor,
+    ...rest
+  });
+
+  const tickLabelPropsAxisLeft = (): Record<string, unknown> =>
+    labelProps({
+      dx: theme.spacing(-1),
+      dy: theme.spacing(0.5),
+      textAnchor: 'end'
+    });
+
+  const tickLabelPropsAxisRight = (): Record<string, unknown> =>
+    labelProps({
+      dx: theme.spacing(0.5),
+      dy: theme.spacing(0.5),
+      textAnchor: 'start'
+    });
+
+  return {
+    axisLeft: {
+      displayUnit: displayUnitAxisLeft,
+      numTicks,
+      tickFormat: formatTick({
+        unit: hasMoreThanTwoUnits ? '' : firstUnit
+      }),
+      tickLabelProps: tickLabelPropsAxisLeft
+    },
+    axisRight: {
+      display: displayAxisRight,
+      displayUnit: displayUnitAxisRight,
+      numTicks,
+      tickFormat: formatTick({ unit: secondUnit }),
+      tickLabelProps: tickLabelPropsAxisRight
+    }
+  };
+};
+
+export default useAxisY;

package/src/Graph/LineChart/BasicComponents/Grids/index.tsx

@@ -0,0 +1,20 @@
+import { Grid } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+
+interface Props {
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Grids = ({ height, width, leftScale, xScale }: Props): JSX.Element => {
+  return (
+    <g>
+      <Grid.GridRows height={height} scale={leftScale} width={width} />
+      <Grid.GridColumns height={height} scale={xScale} width={width} />
+    </g>
+  );
+};
+
+export default Grids;

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

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

@@ -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,81 @@
+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

@@ -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,53 @@
+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

@@ -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,78 @@
+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;