@centreon/ui 24.4.19 → 24.4.21

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

@@ -1,168 +0,0 @@
-import { MutableRefObject } from 'react';
-
-import { Event } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
-import { useSetAtom } from 'jotai';
-import { isEmpty, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import {
-  AnnotationEvent,
-  GraphInterval,
-  InteractedZone,
-  InteractedZone as ZoomPreviewModel
-} from '../models';
-import { getTimeValue } from '../../common/timeSeries';
-import { TimeValue } from '../../common/timeSeries/models';
-
-import Annotations from './Annotations';
-import { TimelineEvent } from './Annotations/models';
-import Bar from './Bar';
-import TimeShiftZones from './TimeShiftZones';
-import ZoomPreview from './ZoomPreview';
-import {
-  MousePosition,
-  changeMousePositionAndTimeValueDerivedAtom,
-  eventMouseDownAtom,
-  eventMouseLeaveAtom,
-  eventMouseUpAtom
-} from './interactionWithGraphAtoms';
-
-const useStyles = makeStyles()(() => ({
-  overlay: {
-    cursor: 'crosshair'
-  }
-}));
-
-interface CommonData {
-  graphHeight: number;
-  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
-  graphWidth: number;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-}
-
-interface TimeShiftZonesData extends InteractedZone {
-  graphInterval: GraphInterval;
-  loading: boolean;
-}
-
-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 changeMousePositionAndTimeValue = useSetAtom(
-    changeMousePositionAndTimeValueDerivedAtom
-  );
-
-  const { graphHeight, graphWidth, graphSvgRef, xScale, timeSeries } =
-    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);
-  };
-
-  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)) {
-      changeMousePositionAndTimeValue({
-        position: null,
-        timeValue: null
-      });
-
-      return;
-    }
-    const timeValue = getTimeValue({
-      timeSeries,
-      x: pointPosition[0],
-      xScale
-    });
-
-    changeMousePositionAndTimeValue({ position: pointPosition, timeValue });
-  };
-
-  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}
-        fill="transparent"
-        height={graphHeight}
-        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,52 +0,0 @@
-import { atom } from 'jotai';
-import { not, isNil } from 'ramda';
-
-import { TimeValue } from '../../common/timeSeries/models';
-
-export const eventMouseDownAtom = atom<null | MouseEvent>(null);
-export const eventMouseUpAtom = atom<null | MouseEvent>(null);
-export const eventMouseLeaveAtom = atom<null | MouseEvent>(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 PositionTimeValue {
-  position: MousePosition;
-  timeValue: TimeValue | null;
-}
-
-interface NewTimeValueInViewportState {
-  isInViewport?: boolean;
-  newTimeValue: TimeValue | null;
-}
-export const changeTimeValueDerivedAtom = atom(
-  null,
-  (
-    _,
-    set,
-    { newTimeValue, isInViewport }: NewTimeValueInViewportState
-  ): void => {
-    if (not(isInViewport)) {
-      return;
-    }
-    set(timeValueAtom, newTimeValue);
-  }
-);
-
-export const changeMousePositionAndTimeValueDerivedAtom = atom(
-  null,
-  (_, set, { position, timeValue }: PositionTimeValue): void => {
-    if (isNil(position) || isNil(timeValue)) {
-      set(mousePositionAtom, null);
-      set(timeValueAtom, null);
-
-      return;
-    }
-
-    set(mousePositionAtom, position);
-
-    set(timeValueAtom, timeValue);
-  }
-);

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

@@ -1,22 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useLegendValueStyles } from './Legend.styles';
-
-interface Props {
-  value?: string | null;
-}
-
-const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useLegendValueStyles({});
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <Typography className={classes.text} variant="h6">
-      {value}
-    </Typography>
-  );
-};
-
-export default InteractiveValue;

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

@@ -1,117 +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 = 1.75;
-
-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, ${theme.spacing(legendWidth)})`,
-      maxHeight: limitLegendRows
-        ? theme.spacing(legendItemHeight * 2 + 1)
-        : 'unset',
-      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: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
-      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: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
-    },
-    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: {
-      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,93 +0,0 @@
-import { includes, isEmpty, split } from 'ramda';
-
-import { Typography } from '@mui/material';
-
-import { EllipsisTypography, 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 { unit, name, legend } = line;
-
-  const legendName = legend || name;
-  const hasUnit = !isEmpty(unit);
-  const unitName = `(${unit})`;
-  const metricName = includes('#', legendName)
-    ? split('#')(legendName)[1]
-    : legendName;
-
-  const getEndText = (): string => {
-    if (value) {
-      return `${value}${hasUnit ? ` ${unit}` : ''}`;
-    }
-
-    return hasUnit ? ` ${unitName}` : '';
-  };
-
-  return (
-    <div className={classes.container}>
-      <Tooltip
-        followCursor={false}
-        label={
-          minMaxAvg ? (
-            <div>
-              <Typography>{`${legendName} ${unitName}`}</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} ${unitName}`
-          )
-        }
-        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>
-      {hasUnit && (
-        <Typography className={classes.text}>{getEndText()}</Typography>
-      )}
-    </div>
-  );
-};
-
-export default LegendHeader;

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

@@ -1,201 +0,0 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-
-import { prop, slice, sortBy } from 'ramda';
-import { useAtomValue } from 'jotai';
-
-import { Box, alpha, useTheme } from '@mui/material';
-
-import { useMemoComponent } from '@centreon/ui';
-
-import { maxLinesDisplayedLegend } from '../common';
-import { formatMetricValue } from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
-import { labelAvg, labelMax, labelMin } from '../translatedLabels';
-import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
-
-import InteractiveValue from './InteractiveValue';
-import { useStyles } from './Legend.styles';
-import LegendHeader from './LegendHeader';
-import { GetMetricValueProps, LegendDisplayMode } from './models';
-import useInteractiveValues from './useInteractiveValues';
-import useLegend from './useLegend';
-import LegendContent from './LegendContent';
-
-interface Props {
-  base: number;
-  displayAnchor?: boolean;
-  limitLegendRows?: boolean;
-  lines: Array<Line>;
-  renderExtraComponent?: ReactNode;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
-  shouldDisplayLegendInCompactMode: boolean;
-  timeSeries: Array<TimeValue>;
-  toggable?: boolean;
-  xScale;
-}
-
-const MainLegend = ({
-  lines,
-  timeSeries,
-  base,
-  toggable = true,
-  limitLegendRows = true,
-  renderExtraComponent,
-  displayAnchor = true,
-  setLinesGraph,
-  xScale,
-  shouldDisplayLegendInCompactMode
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows });
-  const theme = useTheme();
-
-  const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines, setLinesGraph });
-
-  const { getFormattedValue } = useInteractiveValues({
-    base,
-    lines,
-    timeSeries,
-    xScale
-  });
-
-  const sortedData = sortBy(prop('metric_id'), lines);
-
-  const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, 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 interactiveValue = displayAnchor
-            ? getFormattedValue(line)
-            : null;
-
-          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
-                }
-                value={
-                  shouldDisplayLegendInCompactMode
-                    ? interactiveValue
-                    : undefined
-                }
-              />
-              {!shouldDisplayLegendInCompactMode && (
-                <div>
-                  {displayAnchor && (
-                    <InteractiveValue value={interactiveValue} />
-                  )}
-                  {!interactiveValue && (
-                    <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,
-    limitLegendRows,
-    timeSeries,
-    lines,
-    base,
-    displayAnchor,
-    shouldDisplayLegendInCompactMode
-  } = props;
-  const timeValue = useAtomValue(timeValueAtom);
-
-  return useMemoComponent({
-    Component: <MainLegend {...props} />,
-    memoProps: [
-      timeValue,
-      timeSeries,
-      lines,
-      base,
-      toggable,
-      limitLegendRows,
-      displayAnchor,
-      shouldDisplayLegendInCompactMode
-    ]
-  });
-};
-
-export default Legend;

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'
-}