@centreon/ui 24.7.6 → 24.7.7

package/src/Graph/common/Grids/index.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { Grid } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { includes } from 'ramda';
+
+import { LineChartAxis } from '../../LineChart/models';
+
+interface Props extends Pick<LineChartAxis, 'gridLinesType'> {
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Grids = ({
+  height,
+  width,
+  leftScale,
+  xScale,
+  gridLinesType
+}: Props): JSX.Element => {
+  const displayRows = useMemo(
+    () => includes(gridLinesType, ['all', 'horizontal', undefined]),
+    [gridLinesType]
+  );
+  const displayColumns = useMemo(
+    () => includes(gridLinesType, ['all', 'vertical', undefined]),
+    [gridLinesType]
+  );
+
+  return (
+    <g>
+      {displayRows && (
+        <Grid.GridRows height={height} scale={leftScale} width={width} />
+      )}
+      {displayColumns && (
+        <Grid.GridColumns height={height} scale={xScale} width={width} />
+      )}
+    </g>
+  );
+};
+
+export default Grids;

package/src/Graph/common/Thresholds/ThresholdLine.tsx

@@ -0,0 +1,76 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { margin } from '../../LineChart/common';
+
+interface Props {
+  hideTooltip: () => void;
+  isHorizontal: boolean;
+  label: string;
+  showTooltip: (args) => void;
+  thresholdType: string;
+  value: number;
+  width: number;
+  yScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  yScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  width,
+  isHorizontal
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = yScale(value);
+
+  const onMouseEnter = (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: -(margin.left + margin.right),
+      tooltipTop: scaledValue
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  const coordinates = isHorizontal
+    ? {
+        x1: 0,
+        x2: width,
+        y1: scaledValue,
+        y2: scaledValue
+      }
+    : {
+        x1: scaledValue,
+        x2: scaledValue,
+        y1: 0,
+        y2: width
+      };
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="5,5"
+        strokeWidth={2}
+        {...coordinates}
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={hideTooltip}
+        {...coordinates}
+      />
+    </>
+  );
+};

package/src/Graph/common/Thresholds/Thresholds.tsx

@@ -0,0 +1,81 @@
+import { equals, isNil } from 'ramda';
+
+import { getUnits, getYScale } from '../timeSeries';
+import { Line } from '../timeSeries/models';
+import { Thresholds as ThresholdsModel } from '../models';
+
+import { ThresholdLine } from './ThresholdLine';
+
+interface Props {
+  displayedLines: Array<Line>;
+  hideTooltip: () => void;
+  isHorizontal?: boolean;
+  leftScale: (value: number) => number;
+  rightScale: (value: number) => number;
+  showTooltip: (props) => void;
+  thresholdUnit?: string;
+  thresholds: ThresholdsModel;
+  width: number;
+}
+
+const Thresholds = ({
+  thresholds,
+  leftScale,
+  rightScale,
+  width,
+  displayedLines,
+  thresholdUnit,
+  showTooltip,
+  hideTooltip,
+  isHorizontal = true
+}: Props): JSX.Element => {
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(
+    displayedLines as Array<Line>
+  );
+
+  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
+
+  const yScale = shouldUseRightScale
+    ? rightScale
+    : getYScale({
+        hasMoreThanTwoUnits: !isNil(thirdUnit),
+        invert: null,
+        leftScale,
+        rightScale,
+        secondUnit,
+        unit: firstUnit
+      });
+
+  return (
+    <>
+      {thresholds.warning.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          isHorizontal={isHorizontal}
+          key={`warning-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="warning"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
+      {thresholds.critical.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          isHorizontal={isHorizontal}
+          key={`critical-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="critical"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/common/margins.ts

@@ -0,0 +1 @@
+export const margins = { bottom: 20, left: 20, right: 20, top: 20 };

package/src/Graph/common/models.ts

@@ -0,0 +1,19 @@
+import { Metric } from './timeSeries/models';
+
+export interface LineChartData {
+  global;
+  metrics: Array<Metric>;
+  times: Array<string>;
+}
+
+export interface Thresholds {
+  critical: Array<{
+    label: string;
+    value: number;
+  }>;
+  enabled: boolean;
+  warning: Array<{
+    label: string;
+    value: number;
+  }>;
+}

package/src/Graph/common/testUtils.ts

@@ -0,0 +1,71 @@
+export const successThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};
+
+export const warningThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.4
+    }
+  ]
+};
+
+export const criticalThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.3
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.2
+    }
+  ]
+};
+
+export const rangedThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.55
+    },
+    {
+      label: 'Critical',
+      value: 0.65
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.13
+    },
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};