@centreon/ui 24.5.2 → 24.5.4

package/src/Graph/LineChart/InteractiveComponents/index.tsx

@@ -1,283 +0,0 @@
-import { MutableRefObject } from 'react';
-
-import { Event } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
-import { useSetAtom } from 'jotai';
-import {
-  all,
-  equals,
-  find,
-  isEmpty,
-  isNil,
-  keys,
-  map,
-  pick,
-  pipe,
-  pluck,
-  reduce,
-  toPairs,
-  values
-} from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import {
-  AnnotationEvent,
-  GraphInterval,
-  InteractedZone,
-  InteractedZone as ZoomPreviewModel
-} from '../models';
-import {
-  formatMetricName,
-  getLineForMetric,
-  getLinesForMetrics,
-  getTimeValue,
-  getUnits,
-  getYScale
-} from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
-import { margin } from '../common';
-
-import Annotations from './Annotations';
-import { TimelineEvent } from './Annotations/models';
-import Bar from './Bar';
-import TimeShiftZones from './TimeShiftZones';
-import ZoomPreview from './ZoomPreview';
-import {
-  MousePosition,
-  changeMousePositionDerivedAtom,
-  eventMouseDownAtom,
-  eventMouseLeaveAtom,
-  eventMouseUpAtom,
-  graphTooltipDataAtom
-} from './interactionWithGraphAtoms';
-
-const useStyles = makeStyles()(() => ({
-  overlay: {
-    cursor: 'crosshair'
-  }
-}));
-
-interface CommonData {
-  graphHeight: number;
-  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
-  graphWidth: number;
-  leftScale;
-  lines;
-  rightScale;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-}
-
-interface TimeShiftZonesData extends InteractedZone {
-  graphInterval: GraphInterval;
-}
-
-interface Props {
-  annotationData?: AnnotationEvent;
-  commonData: CommonData;
-  timeShiftZonesData: TimeShiftZonesData;
-  zoomData: ZoomPreviewModel;
-}
-
-const InteractionWithGraph = ({
-  zoomData,
-  commonData,
-  annotationData,
-  timeShiftZonesData
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const setEventMouseDown = useSetAtom(eventMouseDownAtom);
-  const setEventMouseUp = useSetAtom(eventMouseUpAtom);
-  const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
-  const changeMousePosition = useSetAtom(changeMousePositionDerivedAtom);
-  const setGraphTooltipData = useSetAtom(graphTooltipDataAtom);
-
-  const {
-    graphHeight,
-    graphWidth,
-    graphSvgRef,
-    xScale,
-    timeSeries,
-    leftScale,
-    rightScale,
-    lines
-  } = commonData;
-
-  const displayZoomPreview = zoomData?.enable ?? true;
-
-  const displayEventAnnotations =
-    !isNil(annotationData?.data) && !isEmpty(annotationData?.data);
-  const displayTimeShiftZones = timeShiftZonesData?.enable ?? true;
-
-  const mouseLeave = (event): void => {
-    setEventMouseLeave(event);
-    setEventMouseDown(null);
-    updateMousePosition(null);
-    setGraphTooltipData(null);
-  };
-
-  const mouseUp = (event): void => {
-    setEventMouseUp(event);
-    setEventMouseDown(null);
-  };
-
-  const mouseMove = (event): void => {
-    const mousePoint = Event.localPoint(
-      graphSvgRef?.current as SVGSVGElement,
-      event
-    );
-    if (!mousePoint) {
-      return;
-    }
-    updateMousePosition([mousePoint.x, mousePoint.y]);
-  };
-
-  const mouseDown = (event): void => {
-    setEventMouseDown(event);
-  };
-
-  const updateMousePosition = (pointPosition: MousePosition): void => {
-    if (isNil(pointPosition)) {
-      changeMousePosition({
-        position: null
-      });
-      setGraphTooltipData(null);
-
-      return;
-    }
-    const timeValue = getTimeValue({
-      timeSeries,
-      x: pointPosition[0],
-      xScale
-    });
-
-    if (isNil(timeValue)) {
-      changeMousePosition({
-        position: null
-      });
-      setGraphTooltipData(null);
-
-      return;
-    }
-
-    const date = timeValue.timeTick;
-    const displayedMetricIds = pluck('metric_id', lines);
-    const filteredMetricsValue = pick(displayedMetricIds, timeValue);
-    const [, secondUnit, thirdUnit] = getUnits(lines as Array<Line>);
-    const areAllValuesEmpty = pipe(values, all(isNil))(filteredMetricsValue);
-
-    const linesData = getLinesForMetrics({
-      lines,
-      metricIds: keys(filteredMetricsValue).map(Number)
-    });
-
-    if (areAllValuesEmpty) {
-      changeMousePosition({ position: pointPosition });
-      setGraphTooltipData(null);
-
-      return;
-    }
-
-    const distanceWithPointPositionPerMetric = reduce(
-      (acc, [metricId, value]) => {
-        if (isNil(value)) {
-          return acc;
-        }
-
-        const lineData = getLineForMetric({
-          lines,
-          metric_id: Number(metricId)
-        });
-        const yScale = getYScale({
-          hasMoreThanTwoUnits: Boolean(thirdUnit),
-          invert: (lineData as Line).invert,
-          leftScale,
-          rightScale,
-          secondUnit,
-          unit: (lineData as Line).unit
-        });
-
-        const y0 = yScale(value);
-
-        const diffBetweenY0AndPointPosition = Math.abs(
-          y0 + margin.top - pointPosition[1]
-        );
-
-        return {
-          ...acc,
-          [metricId]: diffBetweenY0AndPointPosition
-        };
-      },
-      {},
-      Object.entries(filteredMetricsValue)
-    );
-
-    const nearestY0 = Math.min(...values(distanceWithPointPositionPerMetric));
-
-    const nearestLine = pipe(
-      toPairs,
-      find(([, y0]) => equals(y0, nearestY0)) as () => [string, number]
-    )(distanceWithPointPositionPerMetric);
-
-    changeMousePosition({ position: pointPosition });
-    setGraphTooltipData({
-      date,
-      highlightedMetricId: Number(nearestLine[0]),
-      metrics: map(
-        ({ metric_id, color, unit, legend, name }) => ({
-          color,
-          id: metric_id,
-          name: formatMetricName({ legend, name }),
-          unit,
-          value: timeValue?.[metric_id]
-        }),
-        linesData
-      ).filter(({ value }) => !isNil(value))
-    });
-  };
-
-  return (
-    <g>
-      {displayZoomPreview && (
-        <ZoomPreview
-          {...zoomData}
-          graphHeight={graphHeight}
-          graphWidth={graphWidth}
-          xScale={xScale}
-        />
-      )}
-      {displayEventAnnotations && (
-        <Annotations
-          data={annotationData?.data as Array<TimelineEvent>}
-          graphHeight={graphHeight}
-          graphSvgRef={graphSvgRef}
-          graphWidth={graphWidth}
-          xScale={xScale}
-        />
-      )}
-      {displayTimeShiftZones && (
-        <TimeShiftZones
-          graphHeight={graphHeight}
-          graphWidth={graphWidth}
-          {...timeShiftZonesData}
-        />
-      )}
-      <Bar
-        className={classes.overlay}
-        data-testid="graph-interaction-zone"
-        fill="transparent"
-        height={graphHeight - margin.bottom}
-        width={graphWidth}
-        x={0}
-        y={0}
-        onMouseDown={mouseDown}
-        onMouseLeave={mouseLeave}
-        onMouseMove={mouseMove}
-        onMouseUp={mouseUp}
-      />
-    </g>
-  );
-};
-
-export default InteractionWithGraph;

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -1,32 +0,0 @@
-import { atom } from 'jotai';
-import { isNil } from 'ramda';
-
-import { TimeValue } from '../../common/timeSeries/models';
-import { GraphTooltipData } from '../models';
-
-export const eventMouseDownAtom = atom<null | MouseEvent>(null);
-export const eventMouseUpAtom = atom<null | MouseEvent>(null);
-export const eventMouseLeaveAtom = atom<null | MouseEvent>(null);
-export const graphTooltipDataAtom = atom<GraphTooltipData | null>(null);
-
-export const timeValueAtom = atom<TimeValue | null>(null);
-export const mousePositionAtom = atom<MousePosition>(null);
-export const isListingGraphOpenAtom = atom(false);
-export type MousePosition = [number, number] | null;
-
-interface Position {
-  position: MousePosition;
-}
-
-export const changeMousePositionDerivedAtom = atom(
-  null,
-  (_, set, { position }: Position): void => {
-    if (isNil(position)) {
-      set(mousePositionAtom, null);
-
-      return;
-    }
-
-    set(mousePositionAtom, position);
-  }
-);

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

@@ -1,113 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { margin } from '../common';
-
-interface MakeStylesProps {
-  limitLegendRows?: boolean;
-}
-
-export const legendWidth = 21;
-const legendItemHeight = 5.25;
-const legendItemHeightCompact = 2;
-
-export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows }) => ({
-    highlight: {
-      color: theme.typography.body1.color
-    },
-    item: {
-      minWidth: theme.spacing(legendWidth)
-    },
-    items: {
-      '&[data-mode="compact"]': {
-        gridAutoRows: theme.spacing(legendItemHeightCompact),
-        height: limitLegendRows
-          ? theme.spacing(legendItemHeightCompact * 2 + 1.5)
-          : 'unset'
-      },
-      columnGap: theme.spacing(3),
-      display: 'grid',
-      gridAutoRows: theme.spacing(legendItemHeight),
-      gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(legendWidth)}, 1fr))`,
-      maxHeight: limitLegendRows
-        ? theme.spacing(legendItemHeight * 2 + 1)
-        : 'unset',
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      rowGap: theme.spacing(1),
-      width: '100%'
-    },
-    legend: {
-      marginLeft: margin.left,
-      marginRight: margin.right,
-      overflow: 'hidden'
-    },
-    minMaxAvgContainer: {
-      columnGap: theme.spacing(0.5),
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, min-content)',
-      whiteSpace: 'nowrap'
-    },
-    normal: {
-      color: theme.palette.text.primary
-    },
-    toggable: {
-      cursor: 'pointer'
-    }
-  })
-);
-
-interface StylesProps {
-  color?: string;
-}
-
-export const useLegendHeaderStyles = makeStyles<StylesProps>()(
-  (theme, { color }) => ({
-    container: {
-      width: '100%'
-    },
-    disabled: {
-      color: theme.palette.text.disabled
-    },
-    icon: {
-      backgroundColor: color,
-      borderRadius: theme.shape.borderRadius,
-      height: theme.spacing(1.5),
-      minWidth: theme.spacing(1.5),
-      width: theme.spacing(1.5)
-    },
-    legendName: {
-      maxWidth: '95%'
-    },
-    markerAndLegendName: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5)
-    },
-    minMaxAvgContainer: {
-      columnGap: theme.spacing(0.5),
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, min-content)',
-      whiteSpace: 'nowrap'
-    },
-    text: {
-      fontSize: '0.75rem',
-      fontWeight: theme.typography.fontWeightMedium,
-      lineHeight: 1
-    }
-  })
-);
-
-export const useLegendContentStyles = makeStyles()((theme) => ({
-  minMaxAvgValue: { fontWeight: theme.typography.fontWeightMedium },
-  text: {
-    lineHeight: 0.9
-  }
-}));
-
-export const useLegendValueStyles = makeStyles()({
-  text: {
-    lineHeight: 1.4
-  }
-});

package/src/Graph/LineChart/Legend/LegendContent.tsx

@@ -1,33 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-import { useLegendContentStyles } from './Legend.styles';
-
-interface Props {
-  data: string;
-  label: string;
-}
-
-const LegendContent = ({ data, label }: Props): JSX.Element => {
-  const { classes, cx } = useLegendContentStyles();
-
-  const { t } = useTranslation();
-
-  return (
-    <div className={classes.text} data-testid={label}>
-      <Typography className={classes.text} component="span" variant="caption">
-        {t(label)}:{' '}
-        <Typography
-          className={cx(classes.minMaxAvgValue, classes.text)}
-          component="span"
-          variant="caption"
-        >
-          {data}
-        </Typography>
-      </Typography>
-    </div>
-  );
-};
-
-export default LegendContent;

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -1,81 +0,0 @@
-import { Typography } from '@mui/material';
-
-import {
-  EllipsisTypography,
-  formatMetricName,
-  formatMetricValue
-} from '../../..';
-import { Line } from '../../common/timeSeries/models';
-import { Tooltip } from '../../../components';
-
-import { useLegendHeaderStyles } from './Legend.styles';
-import { LegendDisplayMode } from './models';
-import LegendContent from './LegendContent';
-
-interface Props {
-  color: string;
-  disabled?: boolean;
-  line: Line;
-  minMaxAvg?;
-  value?: string | null;
-}
-
-const LegendHeader = ({
-  line,
-  color,
-  disabled,
-  value,
-  minMaxAvg
-}: Props): JSX.Element => {
-  const { classes, cx } = useLegendHeaderStyles({ color });
-
-  const { name, legend } = line;
-
-  const metricName = formatMetricName({ legend, name });
-
-  const legendName = legend || name;
-
-  return (
-    <div className={classes.container}>
-      <Tooltip
-        followCursor={false}
-        label={
-          minMaxAvg ? (
-            <div>
-              <Typography>{legendName}</Typography>
-              <div className={classes.minMaxAvgContainer}>
-                {minMaxAvg.map(({ label, value: subValue }) => (
-                  <LegendContent
-                    data={formatMetricValue({
-                      unit: line.unit,
-                      value: subValue
-                    })}
-                    key={label}
-                    label={label}
-                  />
-                ))}
-              </div>
-            </div>
-          ) : (
-            legendName
-          )
-        }
-        placement="top"
-      >
-        <div className={classes.markerAndLegendName}>
-          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
-          <EllipsisTypography
-            className={cx(classes.text, classes.legendName)}
-            data-mode={
-              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
-            }
-          >
-            {metricName}
-          </EllipsisTypography>
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export default LegendHeader;

package/src/Graph/LineChart/Legend/index.tsx

@@ -1,163 +0,0 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-
-import { prop, slice, sortBy } from 'ramda';
-
-import { Box, alpha, useTheme } from '@mui/material';
-
-import { useMemoComponent } from '@centreon/ui';
-
-import { formatMetricValue } from '../../common/timeSeries';
-import { Line } from '../../common/timeSeries/models';
-import { labelAvg, labelMax, labelMin } from '../translatedLabels';
-
-import { useStyles } from './Legend.styles';
-import LegendHeader from './LegendHeader';
-import { GetMetricValueProps, LegendDisplayMode } from './models';
-import useLegend from './useLegend';
-import LegendContent from './LegendContent';
-
-interface Props {
-  base: number;
-  limitLegend?: false | number;
-  lines: Array<Line>;
-  renderExtraComponent?: ReactNode;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
-  shouldDisplayLegendInCompactMode: boolean;
-  toggable?: boolean;
-}
-
-const MainLegend = ({
-  lines,
-  base,
-  toggable = true,
-  limitLegend = false,
-  renderExtraComponent,
-  setLinesGraph,
-  shouldDisplayLegendInCompactMode
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
-  const theme = useTheme();
-
-  const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines, setLinesGraph });
-
-  const sortedData = sortBy(prop('metric_id'), lines);
-
-  const displayedLines = limitLegend
-    ? slice(0, limitLegend, sortedData)
-    : sortedData;
-
-  const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
-    formatMetricValue({
-      base,
-      unit,
-      value
-    }) || 'N/A';
-
-  const selectMetric = ({ event, metric_id }): void => {
-    if (!toggable) {
-      return;
-    }
-
-    if (event.ctrlKey || event.metaKey) {
-      toggleMetricLine(metric_id);
-
-      return;
-    }
-
-    selectMetricLine(metric_id);
-  };
-
-  const mode = shouldDisplayLegendInCompactMode
-    ? LegendDisplayMode.Compact
-    : LegendDisplayMode.Normal;
-
-  return (
-    <div className={classes.legend}>
-      <div className={classes.items} data-mode={mode}>
-        {displayedLines.map((line) => {
-          const { color, display, highlight, metric_id } = line;
-
-          const markerColor = display
-            ? color
-            : alpha(theme.palette.text.disabled, 0.2);
-
-          const minMaxAvg = [
-            {
-              label: labelMin,
-              value: line.minimum_value
-            },
-            {
-              label: labelMax,
-              value: line.maximum_value
-            },
-            {
-              label: labelAvg,
-              value: line.average_value
-            }
-          ];
-
-          return (
-            <Box
-              className={cx(
-                classes.item,
-                highlight ? classes.highlight : classes.normal,
-                toggable && classes.toggable
-              )}
-              key={metric_id}
-              onClick={(event): void => selectMetric({ event, metric_id })}
-              onMouseEnter={(): void => highlightLine(metric_id)}
-              onMouseLeave={(): void => clearHighlight()}
-            >
-              <LegendHeader
-                color={markerColor}
-                disabled={!display}
-                line={line}
-                minMaxAvg={
-                  shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
-                }
-              />
-              {!shouldDisplayLegendInCompactMode && (
-                <div>
-                  <div className={classes.minMaxAvgContainer}>
-                    {minMaxAvg.map(({ label, value }) => (
-                      <LegendContent
-                        data={getMetricValue({ unit: line.unit, value })}
-                        key={label}
-                        label={label}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )}
-            </Box>
-          );
-        })}
-      </div>
-      {renderExtraComponent}
-    </div>
-  );
-};
-
-const Legend = (props: Props): JSX.Element => {
-  const {
-    toggable,
-    limitLegend,
-    lines,
-    base,
-    shouldDisplayLegendInCompactMode
-  } = props;
-
-  return useMemoComponent({
-    Component: <MainLegend {...props} />,
-    memoProps: [
-      lines,
-      base,
-      toggable,
-      limitLegend,
-      shouldDisplayLegendInCompactMode
-    ]
-  });
-};
-
-export default Legend;