@centreon/ui 24.4.21 → 24.4.22

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

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

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

@@ -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/LineChart/Legend/LegendHeader.tsx

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

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

@@ -0,0 +1,16 @@
+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/useInteractiveValues.ts

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+
+import { useAtomValue } from 'jotai';
+import { equals, find, isNil } from 'ramda';
+
+import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
+import {
+  formatMetricValue,
+  getLineForMetric,
+  getMetrics,
+  getTimeValue
+} from '../../common/timeSeries';
+import { Line, TimeValue } from '../../common/timeSeries/models';
+
+import { FormattedMetricData } from './models';
+
+interface InteractiveValues {
+  getFormattedValue: (line: Line) => string | null | undefined;
+}
+
+interface Props {
+  base: number;
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+  xScale;
+}
+
+const useInteractiveValues = ({
+  timeSeries,
+  lines,
+  base,
+  xScale
+}: Props): InteractiveValues => {
+  const mousePosition = useAtomValue(mousePositionAtom);
+
+  const timeValue = getTimeValue({
+    timeSeries,
+    x: mousePosition?.[0],
+    xScale
+  });
+
+  const graphTimeValue = timeSeries?.find((item) =>
+    equals(item.timeTick, timeValue?.timeTick)
+  );
+
+  const getMetricsToDisplay = (): Array<number> => {
+    if (isNil(graphTimeValue)) {
+      return [];
+    }
+    const metricsData = getMetrics(graphTimeValue as TimeValue);
+
+    const metricsToDisplay = metricsData.filter((metric_id) => {
+      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
+
+      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
+    });
+
+    return metricsToDisplay.map(Number);
+  };
+
+  const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
+
+  const getFormattedMetricData = (
+    metric_id: number
+  ): FormattedMetricData | null => {
+    if (isNil(graphTimeValue)) {
+      return null;
+    }
+    const value = graphTimeValue[metric_id] as number;
+
+    const { color, name, unit } = getLineForMetric({
+      lines,
+      metric_id
+    }) as Line;
+
+    const formattedValue = formatMetricValue({
+      base,
+      unit,
+      value
+    });
+
+    return {
+      color,
+      formattedValue,
+      name,
+      unit
+    };
+  };
+
+  const getFormattedValue = (line: Line): string | undefined | null => {
+    const metric_id = find(equals(line.metric_id), metrics);
+
+    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
+  };
+
+  return { getFormattedValue };
+};
+
+export default useInteractiveValues;

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

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