@centreon/ui 24.5.2 → 24.5.4

package/src/Graph/LineChart/Legend/models.ts

@@ -1,16 +0,0 @@
-export interface FormattedMetricData {
-  color: string;
-  formattedValue: string | null;
-  name: string;
-  unit: string;
-}
-
-export interface GetMetricValueProps {
-  unit: string;
-  value: number | null;
-}
-
-export enum LegendDisplayMode {
-  Compact = 'compact',
-  Normal = 'normal'
-}

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -1,104 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
-import {
-  equals,
-  find,
-  head,
-  isEmpty,
-  isNil,
-  map,
-  pipe,
-  propEq,
-  reject
-} from 'ramda';
-
-import { Line } from '../../common/timeSeries/models';
-
-interface LegendActions {
-  clearHighlight: () => void;
-  highlightLine: (metric_id: number) => void;
-  selectMetricLine: (metric_id: number) => void;
-  toggleMetricLine: (metric_id: number) => void;
-}
-
-interface Props {
-  lines: Array<Line>;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
-}
-
-const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq(false, 'display'), lines);
-  const getLineByMetric = (metric_id: number): Line =>
-    find(propEq(metric_id, 'metric_id'), lines) as Line;
-
-  const toggleMetricLine = (metric_id): void => {
-    const data = lines.map((line) => ({
-      ...line,
-      display: equals(line.metric_id, metric_id) ? !line.display : line.display
-    }));
-
-    setLinesGraph(data);
-  };
-
-  const highlightLine = (metric_id): void => {
-    const data = lines.map((line) => ({
-      ...line,
-      highlight: equals(line.metric_id, metric_id)
-    }));
-
-    setLinesGraph(data);
-  };
-
-  const clearHighlight = (): void => {
-    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
-  };
-
-  const selectMetricLine = (metric_id: number): void => {
-    const metricLine = getLineByMetric(metric_id);
-
-    const isLineDisplayed = pipe(head, equals(metricLine))(displayedLines);
-    const isOnlyLineDisplayed =
-      equals(displayedLines.length, 1) && isLineDisplayed;
-
-    if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
-      setLinesGraph(
-        map(
-          (line) => ({
-            ...line,
-            display: true
-          }),
-          lines
-        )
-      );
-
-      return;
-    }
-
-    setLinesGraph(
-      map(
-        (line) => ({
-          ...line,
-          display: equals(line, metricLine)
-        }),
-        lines
-      )
-    );
-  };
-
-  useEffect(() => {
-    if (isNil(lines) || isEmpty(lines)) {
-      return;
-    }
-
-    const newLines = lines.map((line) => ({
-      ...line,
-      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
-    }));
-
-    setLinesGraph(newLines);
-  }, [lines]);
-
-  return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
-};
-
-export default useLegend;

package/src/Graph/LineChart/LineChart.cypress.spec.tsx

@@ -1,91 +0,0 @@
-import { LineChartData } from '../common/models';
-
-import dataLastDay from './mockedData/lastDay.json';
-import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
-import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
-import { args as argumentsData } from './helpers/doc';
-
-import WrapperLineChart from '.';
-
-const initialize = (data = dataLastDay): void => {
-  cy.mount({
-    Component: (
-      <WrapperLineChart
-        {...argumentsData}
-        data={data as unknown as LineChartData}
-      />
-    )
-  });
-};
-
-describe('Line chart', () => {
-  describe('Tooltip', () => {
-    it('displays a tooltip when the graph is hovered', () => {
-      initialize();
-
-      cy.contains('oracle-buffer-hit-ratio graph on srv-oracle-users').should(
-        'be.visible'
-      );
-      cy.contains('hitratio').should('be.visible');
-      cy.contains('querytime').should('be.visible');
-      cy.contains('connTime').should('be.visible');
-      cy.contains('Min: 70.31').should('be.visible');
-
-      cy.findByTestId('graph-interaction-zone').realMouseMove(250, 70);
-
-      cy.contains('06/18/2023').should('be.visible');
-
-      cy.contains('0.45 s').should('be.visible');
-      cy.contains('75.93%').should('be.visible');
-      cy.contains('0.43 s').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays a metric highlighted when the graph is hovered and the metric is the nearest point', () => {
-      initialize();
-
-      cy.contains('Min: 70.31').should('be.visible');
-
-      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
-
-      cy.get('[data-metric="querytime"]').should(
-        'have.attr',
-        'data-highlight',
-        'true'
-      );
-      cy.get('[data-metric="connTime"]').should(
-        'have.attr',
-        'data-highlight',
-        'false'
-      );
-
-      cy.makeSnapshot();
-    });
-
-    it('does not display the tooltip when null values are hovered', () => {
-      initialize(dataLastDayWithNullValues);
-
-      cy.contains('Min: 70.31').should('be.visible');
-
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1160, 100);
-
-      cy.get('[data-metric="querytime"]').should('not.exist');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays the tooltip with defined values whent the graph is hovered', () => {
-      initialize(dataLastDayWithIncompleteValues);
-
-      cy.contains('Min: 70.31').should('be.visible');
-
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1150, 100);
-
-      cy.get('[data-metric="querytime"]').should('be.visible');
-      cy.get('[data-metric="hitratio"]').should('not.exist');
-
-      cy.makeSnapshot();
-    });
-  });
-});

package/src/Graph/LineChart/LineChart.styles.ts

@@ -1,53 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = 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'
-  },
-  graphValueTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-    color: theme.palette.text.primary,
-    maxWidth: 'none',
-    padding: 0
-  },
-  header: {
-    display: 'grid',
-    gridTemplateColumns: '0.4fr 1fr 0.4fr',
-    width: '100%'
-  }
-}));
-
-export { useStyles };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,307 +0,0 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
-
-import { Group, Tooltip } from '@visx/visx';
-import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
-
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
-
-import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import { Tooltip as MuiTooltip } from '../../components/Tooltip';
-
-import Axes from './BasicComponents/Axes';
-import Grids from './BasicComponents/Grids';
-import Lines from './BasicComponents/Lines';
-import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './LineChart.styles';
-import Header from './Header';
-import InteractionWithGraph from './InteractiveComponents';
-import GraphTooltip from './InteractiveComponents/Tooltip';
-import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
-import Legend from './Legend';
-import { margin } from './common';
-import {
-  Data,
-  GlobalAreaLines,
-  GraphInterval,
-  LineChartProps,
-  LegendModel
-} from './models';
-import { useIntersection } from './useLineChartIntersection';
-import { CurveType } from './BasicComponents/Lines/models';
-import Thresholds from './BasicComponents/Thresholds';
-import { legendWidth } from './Legend/Legend.styles';
-import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
-
-const extraMargin = 10;
-
-interface Props extends LineChartProps {
-  curve: CurveType;
-  graphData: Data;
-  graphInterval: GraphInterval;
-  graphRef: MutableRefObject<HTMLDivElement | null>;
-  legend?: LegendModel;
-  limitLegend?: false | number;
-  shapeLines?: GlobalAreaLines;
-  thresholdUnit?: string;
-  thresholds?: ThresholdsModel;
-}
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const LineChart = ({
-  graphData,
-  height = 500,
-  width,
-  shapeLines,
-  axis,
-  displayAnchor,
-  zoomPreview,
-  graphInterval,
-  timeShiftZones,
-  annotationEvent,
-  tooltip,
-  legend,
-  graphRef,
-  header,
-  curve,
-  thresholds,
-  thresholdUnit,
-  limitLegend
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const theme = useTheme();
-
-  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
-  const graphSvgRef = useRef<SVGSVGElement | null>(null);
-
-  const { isInViewport } = useIntersection({ element: graphRef?.current });
-
-  const legendRef = useRef<HTMLDivElement | null>(null);
-
-  const {
-    tooltipOpen: thresholdTooltipOpen,
-    tooltipLeft: thresholdTooltipLeft,
-    tooltipTop: thresholdTooltipTop,
-    tooltipData: thresholdTooltipData,
-    hideTooltip: hideThresholdTooltip,
-    showTooltip: showThresholdTooltip
-  } = Tooltip.useTooltip();
-
-  const graphWidth =
-    width > 0 ? width - margin.left - margin.right - extraMargin : 0;
-  const graphHeight =
-    (height || 0) > 0
-      ? (height || 0) -
-        margin.top -
-        5 -
-        (legendRef.current?.getBoundingClientRect().height || 0)
-      : 0;
-
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
-  const thresholdValues = flatten([
-    pluck('value', thresholds?.warning || []),
-    pluck('value', thresholds?.critical || [])
-  ]);
-
-  const { displayedLines, newLines } = useFilterLines({
-    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines,
-    linesGraph,
-    setLinesGraph
-  });
-
-  const xScale = useMemo(
-    () =>
-      getXScale({
-        dataTime: timeSeries,
-        valueWidth: graphWidth
-      }),
-    [timeSeries, graphWidth]
-  );
-
-  const leftScale = useMemo(
-    () =>
-      getLeftScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
-      }),
-    [displayedLines, timeSeries, graphHeight, thresholdValues]
-  );
-
-  const rightScale = useMemo(
-    () =>
-      getRightScale({
-        dataLines: displayedLines,
-        dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - 35
-      }),
-    [timeSeries, displayedLines, graphHeight]
-  );
-
-  const graphTooltipData = useGraphTooltip({
-    graphWidth,
-    timeSeries,
-    xScale
-  });
-
-  const displayLegend = legend?.display ?? true;
-  const displayTooltip = !isNil(tooltip?.renderComponent);
-
-  const legendItemsWidth = reduce(
-    (acc) => acc + legendWidth * 8 + 24,
-    0,
-    displayedLines
-  );
-
-  const shouldDisplayLegendInCompactMode =
-    lte(graphWidth, 808) && gt(legendItemsWidth, graphWidth);
-
-  if (!isInViewport) {
-    return (
-      <Skeleton
-        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
-        variant="rectangular"
-        width="100%"
-      />
-    );
-  }
-
-  return (
-    <>
-      <Header header={header} title={title} />
-      <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <MuiTooltip
-          classes={{
-            tooltip: classes.graphValueTooltip
-          }}
-          placement="top-start"
-          title={<GraphValueTooltip base={baseAxis} />}
-        >
-          <div className={classes.container}>
-            <svg
-              height={graphHeight + margin.top}
-              ref={graphSvgRef}
-              width="100%"
-            >
-              <Group.Group
-                left={margin.left + extraMargin / 2}
-                top={margin.top}
-              >
-                <Grids
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  width={graphWidth}
-                  xScale={xScale}
-                />
-                <Axes
-                  data={{
-                    baseAxis,
-                    lines: displayedLines,
-                    timeSeries,
-                    ...axis
-                  }}
-                  graphInterval={graphInterval}
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  width={graphWidth}
-                  xScale={xScale}
-                />
-
-                <Lines
-                  curve={curve}
-                  displayAnchor={displayAnchor}
-                  displayedLines={displayedLines}
-                  graphSvgRef={graphSvgRef}
-                  height={graphHeight - margin.top}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  timeSeries={timeSeries}
-                  width={graphWidth}
-                  xScale={xScale}
-                  {...shapeLines}
-                />
-
-                <InteractionWithGraph
-                  annotationData={{ ...annotationEvent }}
-                  commonData={{
-                    graphHeight,
-                    graphSvgRef,
-                    graphWidth,
-                    leftScale,
-                    lines: displayedLines,
-                    rightScale,
-                    timeSeries,
-                    xScale
-                  }}
-                  timeShiftZonesData={{
-                    ...timeShiftZones,
-                    graphInterval
-                  }}
-                  zoomData={{ ...zoomPreview }}
-                />
-
-                {thresholds?.enabled && (
-                  <Thresholds
-                    displayedLines={displayedLines}
-                    hideTooltip={hideThresholdTooltip}
-                    leftScale={leftScale}
-                    rightScale={rightScale}
-                    showTooltip={showThresholdTooltip}
-                    thresholdUnit={thresholdUnit}
-                    thresholds={thresholds as ThresholdsModel}
-                    width={graphWidth}
-                  />
-                )}
-              </Group.Group>
-            </svg>
-            {displayTooltip && (
-              <GraphTooltip {...tooltip} {...graphTooltipData} />
-            )}
-            <Fade in={thresholdTooltipOpen}>
-              <Tooltip.Tooltip
-                left={thresholdTooltipLeft}
-                style={{
-                  ...baseStyles,
-                  backgroundColor: theme.palette.background.paper,
-                  color: theme.palette.text.primary,
-                  transform: `translate(${graphWidth / 2}px, -10px)`
-                }}
-                top={thresholdTooltipTop}
-              >
-                {thresholdTooltipData}
-              </Tooltip.Tooltip>
-            </Fade>
-          </div>
-        </MuiTooltip>
-      </ClickAwayListener>
-      {displayLegend && (
-        <div ref={legendRef}>
-          <Legend
-            base={baseAxis}
-            limitLegend={limitLegend}
-            lines={newLines}
-            renderExtraComponent={legend?.renderExtraComponent}
-            setLinesGraph={setLinesGraph}
-            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-          />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default LineChart;

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -1,44 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Skeleton } from '@mui/material';
-
-interface Props {
-  displayTitleSkeleton: boolean;
-  graphHeight: number;
-}
-
-const useSkeletonStyles = makeStyles<Props>()(
-  (theme, { graphHeight, displayTitleSkeleton }) => ({
-    loadingSkeleton: {
-      display: 'grid',
-      gridGap: theme.spacing(1),
-      gridTemplateRows: `${
-        displayTitleSkeleton ? '0.8fr' : ''
-      } ${graphHeight}px ${theme.spacing(2)}`,
-      height: '100%'
-    },
-    loadingSkeletonLine: {
-      paddingBottom: theme.spacing(1),
-      transform: 'none'
-    }
-  })
-);
-
-const LoadingSkeleton = ({
-  graphHeight,
-  displayTitleSkeleton
-}: Props): JSX.Element => {
-  const { classes } = useSkeletonStyles({ displayTitleSkeleton, graphHeight });
-
-  const skeletonLine = <Skeleton className={classes.loadingSkeletonLine} />;
-
-  return (
-    <div className={classes.loadingSkeleton}>
-      {displayTitleSkeleton && skeletonLine}
-      {skeletonLine}
-      {skeletonLine}
-    </div>
-  );
-};
-
-export default LoadingSkeleton;

package/src/Graph/LineChart/common/index.ts

@@ -1,35 +0,0 @@
-import { alpha } from '@mui/material';
-
-const commonTickLabelProps = {
-  fontFamily: 'Roboto, sans-serif',
-  fontSize: 10,
-  textAnchor: 'middle'
-};
-
-const margin = { bottom: 30, left: 55, right: 55, top: 30 };
-
-interface FillColor {
-  areaColor: string;
-  transparency: number;
-}
-
-const getFillColor = ({
-  transparency,
-  areaColor
-}: FillColor): string | undefined =>
-  transparency ? alpha(areaColor, 1 - transparency * 0.01) : undefined;
-
-const dateFormat = 'L';
-const timeFormat = 'LT';
-const dateTimeFormat = `${dateFormat} ${timeFormat}`;
-const maxLinesDisplayedLegend = 11;
-
-export {
-  commonTickLabelProps,
-  margin,
-  getFillColor,
-  dateFormat,
-  timeFormat,
-  dateTimeFormat,
-  maxLinesDisplayedLegend
-};

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const timeTickGraphAtom = atom<Date | null>(null);