@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,137 +0,0 @@
-import {
-  Dispatch,
-  MutableRefObject,
-  ReactNode,
-  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 { 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: {
-    displayLegend: boolean;
-    legendHeight?: number;
-    mode?: 'grid' | 'list';
-    placement?: 'left' | 'right' | 'bottom';
-    renderExtraComponent?: ReactNode;
-  };
-  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

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

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

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

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

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

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

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

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

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

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

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

package/src/Graph/common/models.ts

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

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