@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -0,0 +1,128 @@
+import { Dispatch, MutableRefObject, SetStateAction, useMemo } from 'react';
+
+import { equals, gt, isNil, lte, reduce } from 'ramda';
+
+import { Stack } from '@mui/material';
+
+import Legend from '../../Chart/Legend';
+import { legendWidth } from '../../Chart/Legend/Legend.styles';
+import { LegendModel } from '../../Chart/models';
+import { Line } from '../timeSeries/models';
+import Header from './Header';
+import { LineChartHeader } from './Header/models';
+import { useBaseChartStyles } from './useBaseChartStyles';
+
+interface Props {
+  base?: number;
+  children: JSX.Element;
+  graphWidth: number;
+  header?: LineChartHeader;
+  height: number | null;
+  isHorizontal?: boolean;
+  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
+    displayLegend: boolean;
+    legendHeight?: number;
+  };
+  legendRef: MutableRefObject<HTMLDivElement | null>;
+  limitLegend?: number | false;
+  lines: Array<Line>;
+  setLines:
+    | Dispatch<SetStateAction<Array<Line> | null>>
+    | Dispatch<SetStateAction<Array<Line>>>;
+  title: string;
+}
+
+const BaseChart = ({
+  legend,
+  base = 1000,
+  height,
+  graphWidth,
+  lines,
+  limitLegend = false,
+  setLines,
+  children,
+  legendRef,
+  title,
+  header,
+  isHorizontal = true
+}: Props): JSX.Element => {
+  const { classes, cx } = useBaseChartStyles();
+
+  const legendItemsWidth = useMemo(
+    () => reduce((acc) => acc + legendWidth * 8 + 24, 0, lines),
+    [lines]
+  );
+
+  const displayLegendInBottom = useMemo(
+    () => isNil(legend.placement) || equals(legend.placement, 'bottom'),
+    [legend.placement]
+  );
+
+  const shouldDisplayLegendInCompactMode = useMemo(
+    () =>
+      lte(graphWidth, 808) &&
+      gt(legendItemsWidth, graphWidth) &&
+      displayLegendInBottom,
+    [graphWidth, displayLegendInBottom, legendItemsWidth]
+  );
+
+  return (
+    <>
+      <Header header={header} title={title} />
+      <div className={classes.container}>
+        <Stack
+          direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}
+        >
+          {legend.displayLegend &&
+            (equals(legend?.placement, 'left') ||
+              equals(legend?.placement, 'right')) && (
+              <div
+                className={cx(
+                  classes.legendContainer,
+                  equals(legend?.placement, 'right') &&
+                    !isHorizontal &&
+                    classes.legendContainerVerticalSide
+                )}
+                ref={legendRef}
+              >
+                <Legend
+                  base={base}
+                  height={height}
+                  limitLegend={limitLegend}
+                  lines={lines}
+                  mode={legend?.mode}
+                  placement="left"
+                  renderExtraComponent={legend?.renderExtraComponent}
+                  setLinesGraph={setLines}
+                  shouldDisplayLegendInCompactMode={
+                    shouldDisplayLegendInCompactMode
+                  }
+                />
+              </div>
+            )}
+          {children}
+        </Stack>
+      </div>
+      {legend.displayLegend && displayLegendInBottom && (
+        <div
+          ref={legendRef}
+          style={{ height: legend?.legendHeight ?? 'undefined' }}
+        >
+          <Legend
+            base={base}
+            height={height}
+            limitLegend={limitLegend}
+            lines={lines}
+            mode={legend.mode}
+            placement="bottom"
+            renderExtraComponent={legend.renderExtraComponent}
+            setLinesGraph={setLines}
+            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BaseChart;

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -0,0 +1,89 @@
+import { MutableRefObject } from 'react';
+
+import { Group } from '@visx/visx';
+import { equals } from 'ramda';
+
+import { margin } from '../../Chart/common';
+import { ChartAxis } from '../../Chart/models';
+import Axes from '../Axes';
+import Grids from '../Grids';
+import { Line, TimeValue } from '../timeSeries/models';
+
+import { extraMargin } from './useComputeBaseChartDimensions';
+
+interface Props {
+  allUnits: Array<string>;
+  axis?: ChartAxis;
+  base?: number;
+  children: JSX.Element;
+  displayedLines: Array<Line>;
+  graphHeight: number;
+  graphWidth: number;
+  gridLinesType?: string;
+  leftScale;
+  orientation?: 'horizontal' | 'vertical';
+  rightScale;
+  showGridLines: boolean;
+  svgRef: MutableRefObject<SVGSVGElement | null>;
+  timeSeries: Array<TimeValue>;
+  xScale;
+}
+
+const ChartSvgWrapper = ({
+  svgRef,
+  graphHeight,
+  leftScale,
+  rightScale,
+  xScale,
+  graphWidth,
+  showGridLines,
+  gridLinesType,
+  base = 1000,
+  displayedLines,
+  timeSeries,
+  axis,
+  children,
+  orientation = 'horizontal',
+  allUnits
+}: Props): JSX.Element => {
+  const isHorizontal = equals(orientation, 'horizontal');
+
+  return (
+    <svg
+      aria-label="graph"
+      height={graphHeight + margin.top}
+      ref={svgRef}
+      width="100%"
+    >
+      <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
+        {showGridLines && (
+          <Grids
+            gridLinesType={gridLinesType}
+            height={graphHeight - margin.top}
+            leftScale={isHorizontal ? leftScale : xScale}
+            width={graphWidth}
+            xScale={isHorizontal ? xScale : leftScale}
+          />
+        )}
+        <Axes
+          allUnits={allUnits}
+          data={{
+            baseAxis: base,
+            lines: displayedLines,
+            timeSeries,
+            ...axis
+          }}
+          height={graphHeight}
+          leftScale={leftScale}
+          orientation={orientation}
+          rightScale={rightScale}
+          width={graphWidth}
+          xScale={xScale}
+        />
+        {children}
+      </Group.Group>
+    </svg>
+  );
+};
+
+export default ChartSvgWrapper;

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -0,0 +1,37 @@
+import Typography from '@mui/material/Typography';
+
+import { useMemoComponent } from '@centreon/ui';
+
+import { LineChartHeader } from './models';
+import { ussHeaderChartStyles } from './useHeaderStyles';
+
+interface Props {
+  header?: LineChartHeader;
+  title: string;
+}
+
+const Header = ({ title, header }: Props): JSX.Element => {
+  const { classes } = ussHeaderChartStyles();
+
+  const displayTitle = header?.displayTitle ?? true;
+
+  return useMemoComponent({
+    Component: (
+      <div className={classes.header}>
+        <div />
+        <div>
+          {displayTitle && (
+            <Typography align="center" variant="body1">
+              {title}
+            </Typography>
+          )}
+        </div>
+        {header?.extraComponent}
+      </div>
+    ),
+
+    memoProps: [title, header]
+  });
+};
+
+export default Header;

package/src/Graph/common/BaseChart/Header/models.ts

@@ -0,0 +1,4 @@
+export interface LineChartHeader {
+  displayTitle?: boolean;
+  extraComponent?: ReactNode;
+}

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const ussHeaderChartStyles = makeStyles()({
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
+  }
+});

package/src/Graph/common/BaseChart/useBaseChartStyles.ts

@@ -0,0 +1,44 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBaseChartStyles = makeStyles()((theme) => ({
+  container: {
+    '& .visx-axis-bottom': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        },
+        text: {
+          fill: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-axis-line': {
+      stroke: theme.palette.text.primary
+    },
+    '& .visx-axis-right': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-columns': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    '& .visx-rows': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    fill: theme.palette.text.primary,
+    position: 'relative'
+  },
+  legendContainer: {
+    maxWidth: '60%'
+  },
+  legendContainerVerticalSide: {
+    marginRight: theme.spacing(6)
+  }
+}));

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -0,0 +1,66 @@
+import { MutableRefObject, useRef } from 'react';
+
+import { equals, isNil } from 'ramda';
+
+import { margin } from '../../Chart/common';
+
+export const extraMargin = 10;
+
+interface UseComputeBaseChartDimensionsProps {
+  hasSecondUnit?: boolean;
+  height: number | null;
+  legendDisplay?: boolean;
+  legendHeight?: number;
+  legendPlacement?: string;
+  width: number;
+}
+
+interface UseComputeBaseChartDimensionsState {
+  graphHeight: number;
+  graphWidth: number;
+  legendRef: MutableRefObject<HTMLDivElement | null>;
+}
+
+export const useComputeBaseChartDimensions = ({
+  width,
+  height,
+  legendDisplay,
+  legendPlacement,
+  hasSecondUnit,
+  legendHeight
+}: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
+  const legendRef = useRef<HTMLDivElement | null>(null);
+
+  const currentLegendHeight =
+    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+
+  const legendBoundingHeight =
+    !equals(legendDisplay, false) &&
+    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
+      ? currentLegendHeight
+      : 0;
+  const legendBoundingWidth =
+    !equals(legendDisplay, false) &&
+    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
+      ? legendRef.current?.getBoundingClientRect().width || 0
+      : 0;
+
+  const graphWidth =
+    width > 0
+      ? width -
+        margin.left -
+        (hasSecondUnit ? margin.right : 8) -
+        extraMargin -
+        legendBoundingWidth
+      : 0;
+  const graphHeight =
+    (height || 0) > 0
+      ? (height || 0) - margin.top - 5 - legendBoundingHeight
+      : 0;
+
+  return {
+    graphHeight,
+    graphWidth,
+    legendRef
+  };
+};

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 { ChartAxis } from '../../Chart/models';
+
+interface Props extends Pick<ChartAxis, '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 '../../Chart/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,76 @@
+import { ScaleLinear } from 'd3-scale';
+import { equals } from 'ramda';
+
+import { Thresholds as ThresholdsModel } from '../models';
+import { getUnits, getYScale } from '../timeSeries';
+import { Line } from '../timeSeries/models';
+
+import { ThresholdLine } from './ThresholdLine';
+
+interface Props {
+  displayedLines: Array<Line>;
+  hideTooltip: () => void;
+  isHorizontal?: boolean;
+  showTooltip: (props) => void;
+  thresholdUnit?: string;
+  thresholds: ThresholdsModel;
+  width: number;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+}
+
+const Thresholds = ({
+  thresholds,
+  width,
+  displayedLines,
+  thresholdUnit,
+  showTooltip,
+  hideTooltip,
+  yScalesPerUnit,
+  isHorizontal = true
+}: Props): JSX.Element => {
+  const [firstUnit, secondUnit] = getUnits(displayedLines as Array<Line>);
+
+  const shouldUseRightScale =
+    thresholdUnit && equals(thresholdUnit, secondUnit);
+
+  const yScale = shouldUseRightScale
+    ? yScalesPerUnit[secondUnit]
+    : getYScale({
+        invert: null,
+        unit: firstUnit,
+        yScalesPerUnit
+      });
+
+  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
+    }
+  ]
+};