@centreon/ui 23.10.109 → 23.10.110

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

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

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

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

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

@@ -0,0 +1,71 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { margin } from '../common';
+
+interface MakeStylesProps {
+  limitLegendRows?: boolean;
+}
+
+export const useStyles = makeStyles<MakeStylesProps>()(
+  (theme, { limitLegendRows }) => ({
+    highlight: {
+      color: theme.typography.body1.color
+    },
+    item: {
+      display: 'grid',
+      gridTemplateColumns: 'min-content minmax(50px, 1fr)',
+      marginBottom: theme.spacing(1)
+    },
+    items: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, max-content))',
+      marginLeft: theme.spacing(0.5),
+      maxHeight: limitLegendRows ? theme.spacing(14) : 'unset',
+      overflowY: 'auto',
+      width: '100%'
+    },
+    legend: {
+      marginLeft: margin.left,
+      marginRight: margin.right,
+      maxHeight: theme.spacing(24),
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    },
+    legendData: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    legendName: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'start',
+      marginRight: theme.spacing(0.5),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    legendUnit: {
+      justifyContent: 'start',
+      marginLeft: 'auto',
+      marginRight: theme.spacing(0.5),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    legendValue: {
+      fontWeight: theme.typography.body1.fontWeight
+    },
+    minMaxAvgContainer: {
+      columnGap: theme.spacing(0.5),
+      display: 'grid',
+      gridAutoRows: theme.spacing(2),
+      gridTemplateColumns: 'repeat(2, min-content)',
+      whiteSpace: 'nowrap'
+    },
+    minMaxAvgValue: { fontWeight: 600 },
+    normal: {
+      color: theme.palette.text.primary
+    },
+    toggable: {
+      cursor: 'pointer'
+    }
+  })
+);

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

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

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

@@ -0,0 +1,45 @@
+import { includes, isEmpty, split } from 'ramda';
+
+import { Tooltip, Typography } from '@mui/material';
+
+import { Line } from '../../common/timeSeries/models';
+
+import { useStyles } from './Legend.styles';
+
+interface Props {
+  line: Line;
+}
+
+const LegendHeader = ({ line }: Props): JSX.Element => {
+  const { classes } = useStyles({});
+  const { unit, name, legend } = line;
+
+  const legendName = legend || name;
+  const unitName = ` (${unit})`;
+  const metricName = includes('#', legendName)
+    ? split('#')(legendName)[1]
+    : legendName;
+
+  return (
+    <div className={classes.legendName}>
+      <Tooltip placement="top" title={legendName + unitName}>
+        <Typography
+          className={classes.legendName}
+          component="p"
+          variant="caption"
+        >
+          {metricName}
+        </Typography>
+      </Tooltip>
+      <Typography
+        className={classes.legendUnit}
+        component="p"
+        variant="caption"
+      >
+        {!isEmpty(line?.unit) && `(${line.unit})`}
+      </Typography>
+    </div>
+  );
+};
+
+export default LegendHeader;

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

@@ -0,0 +1,43 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+export enum LegendMarkerVariant {
+  'dot',
+  'bar'
+}
+
+interface StylesProps {
+  color?: string;
+  variant: LegendMarkerVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()((theme, { color, variant }) => ({
+  disabled: {
+    color: theme.palette.text.disabled
+  },
+  icon: {
+    backgroundColor: color,
+    borderRadius: equals(LegendMarkerVariant.dot, variant) ? '50%' : 0,
+    height: equals(LegendMarkerVariant.dot, variant) ? 9 : '100%',
+    marginRight: theme.spacing(0.5),
+    width: 9
+  }
+}));
+
+interface Props {
+  color: string;
+  disabled?: boolean;
+  variant?: LegendMarkerVariant;
+}
+
+const LegendMarker = ({
+  disabled,
+  color,
+  variant = LegendMarkerVariant.bar
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ color, variant });
+
+  return <div className={cx(classes.icon, { [classes.disabled]: disabled })} />;
+};
+
+export default LegendMarker;

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

@@ -0,0 +1,173 @@
+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 LegendMarker from './Marker';
+import { GetMetricValueProps } 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>>;
+  timeSeries: Array<TimeValue>;
+  toggable?: boolean;
+  xScale;
+}
+
+const MainLegend = ({
+  lines,
+  timeSeries,
+  base,
+  toggable = true,
+  limitLegendRows = true,
+  renderExtraComponent,
+  displayAnchor = true,
+  setLinesGraph,
+  xScale
+}: 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);
+  };
+
+  return (
+    <div className={classes.legend}>
+      <div className={classes.items}>
+        {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()}
+            >
+              <LegendMarker color={markerColor} disabled={!display} />
+              <div className={classes.legendData}>
+                <LegendHeader line={line} />
+                {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 } =
+    props;
+  const timeValue = useAtomValue(timeValueAtom);
+
+  return useMemoComponent({
+    Component: <MainLegend {...props} />,
+    memoProps: [
+      timeValue,
+      timeSeries,
+      lines,
+      base,
+      toggable,
+      limitLegendRows,
+      displayAnchor
+    ]
+  });
+};
+
+export default Legend;

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

@@ -0,0 +1,11 @@
+export interface FormattedMetricData {
+  color: string;
+  formattedValue: string | null;
+  name: string;
+  unit: string;
+}
+
+export interface GetMetricValueProps {
+  unit: string;
+  value: number | null;
+}