@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,286 @@
+import type { MutableRefObject } from 'react';
+
+import { Event } from '@visx/visx';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
+import { useSetAtom } from 'jotai';
+import {
+  all,
+  equals,
+  find,
+  isEmpty,
+  isNil,
+  keys,
+  map,
+  negate,
+  pick,
+  pipe,
+  pluck,
+  reduce,
+  toPairs,
+  values
+} from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import {
+  formatMetricName,
+  getLineForMetric,
+  getLinesForMetrics,
+  getTimeValue,
+  getYScale
+} from '../../common/timeSeries';
+import type { Line, TimeValue } from '../../common/timeSeries/models';
+import { margin } from '../common';
+import type {
+  AnnotationEvent,
+  GraphInterval,
+  InteractedZone,
+  InteractedZone as ZoomPreviewModel
+} from '../models';
+
+import Annotations from './Annotations';
+import type { TimelineEvent } from './Annotations/models';
+import Bar from './Bar';
+import TimeShiftZones from './TimeShiftZones';
+import ZoomPreview from './ZoomPreview';
+import {
+  type MousePosition,
+  changeMousePositionDerivedAtom,
+  eventMouseDownAtom,
+  eventMouseLeaveAtom,
+  eventMouseUpAtom,
+  graphTooltipDataAtom
+} from './interactionWithGraphAtoms';
+
+const useStyles = makeStyles()(() => ({
+  overlay: {
+    cursor: 'crosshair'
+  }
+}));
+
+interface CommonData {
+  graphHeight: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+  lines;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<string, string>>;
+}
+
+interface TimeShiftZonesData extends InteractedZone {
+  graphInterval: GraphInterval;
+}
+
+interface Props {
+  annotationData?: AnnotationEvent;
+  commonData: CommonData;
+  timeShiftZonesData: TimeShiftZonesData;
+  zoomData: ZoomPreviewModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  };
+}
+
+const InteractionWithGraph = ({
+  zoomData,
+  commonData,
+  annotationData,
+  timeShiftZonesData,
+  transformMatrix
+}: 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,
+    lines,
+    yScalesPerUnit
+  } = 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([
+      transformMatrix?.fx?.(mousePoint.x) ?? mousePoint.x,
+      transformMatrix?.fy?.(mousePoint.y) ?? 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 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({
+          invert: (lineData as Line).invert,
+          unit: (lineData as Line).unit,
+          yScalesPerUnit
+        });
+
+        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, invert }) => ({
+          color,
+          id: metric_id,
+          name: formatMetricName({ legend, name }),
+          unit,
+          value: invert
+            ? negate(timeValue?.[metric_id])
+            : 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 - margin.bottom}
+          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/Chart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -0,0 +1,32 @@
+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/Chart/Legend/Legend.styles.ts

@@ -0,0 +1,151 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { equals, lt } from 'ramda';
+import { margin } from '../common';
+import type { LegendModel } from '../models';
+
+interface MakeStylesProps {
+  limitLegendRows?: boolean;
+  placement: Pick<LegendModel, 'placement'>;
+  height?: number | null;
+}
+
+export const legendWidth = 21;
+const legendItemHeight = 5.25;
+const legendItemHeightCompact = 2;
+
+const getLegendMaxHeight = ({ placement, height }) => {
+  if (!equals(placement, 'bottom')) {
+    return height || 0;
+  }
+
+  if (lt(height || 0, 220)) {
+    return 40;
+  }
+
+  return 90;
+};
+
+export const useStyles = makeStyles<MakeStylesProps>()(
+  (theme, { limitLegendRows, placement, height = 0 }) => ({
+    highlight: {
+      color: theme.typography.body1.color
+    },
+    item: {
+      width: '100%'
+    },
+    items: {
+      '&[data-as-list="true"]': {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: 'fit-content'
+      },
+      '&[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))`,
+      rowGap: theme.spacing(1),
+      width: '100%'
+    },
+    legend: {
+      '&[data-display-side="false"]': {
+        marginLeft: margin.left,
+        marginRight: margin.right
+      },
+      '&[data-display-side="true"]': {
+        height: '100%',
+        marginTop: `${margin.top / 2}px`
+      },
+      maxHeight: limitLegendRows
+        ? theme.spacing(legendItemHeight * 2 + 1)
+        : getLegendMaxHeight({ placement, height }),
+      overflowY: 'auto',
+      overflowX: '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%'
+    },
+    containerList: {
+      width: 'fit-content'
+    },
+    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: {
+      width: '91%'
+    },
+    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,
+      maxWidth: '250px'
+    },
+    textList: {
+      fontSize: '0.75rem',
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    textListBottom: {
+      width: 'auto'
+    }
+  })
+);
+
+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/Chart/Legend/LegendContent.tsx

@@ -0,0 +1,33 @@
+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/Chart/Legend/LegendHeader.tsx

@@ -0,0 +1,100 @@
+import { Typography } from '@mui/material';
+
+import {
+  EllipsisTypography,
+  formatMetricName,
+  formatMetricValue
+} from '../../..';
+import { Tooltip } from '../../../components';
+import { Line } from '../../common/timeSeries/models';
+
+import { useLegendHeaderStyles } from './Legend.styles';
+import LegendContent from './LegendContent';
+import { LegendDisplayMode } from './models';
+
+interface Props {
+  color: string;
+  disabled?: boolean;
+  isDisplayedOnSide: boolean;
+  isListMode: boolean;
+  line: Line;
+  minMaxAvg?;
+  unit: string;
+  value?: string | null;
+}
+
+const LegendHeader = ({
+  line,
+  color,
+  disabled,
+  value,
+  minMaxAvg,
+  isListMode,
+  isDisplayedOnSide,
+  unit
+}: Props): JSX.Element => {
+  const { classes, cx } = useLegendHeaderStyles({ color });
+
+  const { name, legend } = line;
+
+  const metricName = formatMetricName({ legend, name });
+
+  const legendName = legend || name;
+
+  return (
+    <div
+      className={cx(!isListMode ? classes.container : classes.containerList)}
+    >
+      <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={isListMode ? 'right' : 'top'}
+      >
+        <div className={classes.markerAndLegendName}>
+          <div
+            data-icon
+            className={cx(classes.icon, { [classes.disabled]: disabled })}
+          />
+          <EllipsisTypography
+            className={classes.text}
+            containerClassname={cx(
+              !isListMode && classes.legendName,
+              isListMode && !isDisplayedOnSide && classes.textListBottom,
+              isListMode && isDisplayedOnSide && classes.legendName
+            )}
+            data-mode={
+              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
+            }
+          >
+            {metricName}
+          </EllipsisTypography>
+          <Typography sx={{ lineHeight: 1.25 }} variant="caption">
+            {unit}
+          </Typography>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default LegendHeader;