@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/Graph/Legend/index.tsx

@@ -0,0 +1,166 @@
+import { ReactNode } from 'react';
+
+import { slice } 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 '../timeSeries';
+import { Line, TimeValue } from '../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;
+  timeSeries: Array<TimeValue>;
+  toggable?: boolean;
+}
+
+const MainLegend = ({
+  lines,
+  timeSeries,
+  base,
+  toggable = true,
+  limitLegendRows = true,
+  renderExtraComponent,
+  displayAnchor = true
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ limitLegendRows });
+  const theme = useTheme();
+
+  const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
+    useLegend({ lines });
+
+  const { getFormattedValue } = useInteractiveValues({
+    base,
+    lines,
+    timeSeries
+  });
+
+  const displayedLines = limitLegendRows
+    ? slice(0, maxLinesDisplayedLegend, lines)
+    : lines;
+
+  const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
+    formatMetricValue({
+      base,
+      unit,
+      value
+    }) || 'N/A';
+
+  const selectMetric = ({ event, metric }): void => {
+    if (!toggable) {
+      return;
+    }
+
+    if (event.ctrlKey || event.metaKey) {
+      toggleMetricLine(metric);
+
+      return;
+    }
+
+    selectMetricLine(metric);
+  };
+
+  return (
+    <div className={classes.legend}>
+      <div className={classes.items}>
+        {displayedLines.map((line) => {
+          const { color, name, display, metric, highlight } = 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={name}
+              onClick={(event): void => selectMetric({ event, metric })}
+              onMouseEnter={(): void => highlightLine(metric)}
+              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/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;
+}

package/src/Graph/Legend/useInteractiveValues.ts

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

package/src/Graph/Legend/useLegend.ts

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+
+import { useSetAtom } from 'jotai';
+import {
+  equals,
+  find,
+  head,
+  isEmpty,
+  isNil,
+  map,
+  pipe,
+  prop,
+  propEq,
+  reject,
+  sortBy,
+  compose,
+  toLower
+} from 'ramda';
+
+import { linesGraphAtom } from '../graphAtoms';
+import { Line } from '../timeSeries/models';
+
+interface LegendActions {
+  clearHighlight: () => void;
+  highlightLine: (metric: string) => void;
+  selectMetricLine: (metric: string) => void;
+  toggleMetricLine: (metric: string) => void;
+}
+
+interface Props {
+  lines: Array<Line>;
+}
+
+const useLegend = ({ lines }: Props): LegendActions => {
+  const setLines = useSetAtom(linesGraphAtom);
+
+  const displayedLines = reject(propEq('display', false), lines);
+  const getLineByMetric = (metric: string): Line =>
+    find(propEq('metric', metric), lines) as Line;
+
+  const toggleMetricLine = (metric): void => {
+    const line = getLineByMetric(metric);
+
+    setLines([
+      ...reject(propEq('metric', metric), lines),
+      { ...line, display: !line.display }
+    ]);
+  };
+
+  const highlightLine = (metric): void => {
+    const fadedLines = map((line) => ({ ...line, highlight: false }), lines);
+    const data = [
+      ...reject(propEq('metric', metric), fadedLines),
+      { ...getLineByMetric(metric), highlight: true }
+    ];
+
+    const sortedData = sortBy(compose(toLower, prop('name')), data);
+
+    setLines(sortedData);
+  };
+
+  const clearHighlight = (): void => {
+    setLines(map((line) => ({ ...line, highlight: undefined }), lines));
+  };
+
+  const selectMetricLine = (metric: string): void => {
+    const metricLine = getLineByMetric(metric);
+
+    const isLineDisplayed = pipe(head, equals(metricLine))(displayedLines);
+    const isOnlyLineDisplayed =
+      equals(displayedLines.length, 1) && isLineDisplayed;
+
+    if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
+      setLines(
+        map(
+          (line) => ({
+            ...line,
+            display: true
+          }),
+          lines
+        )
+      );
+
+      return;
+    }
+
+    setLines(
+      map(
+        (line) => ({
+          ...line,
+          display: equals(line, metricLine)
+        }),
+        lines
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (isNil(lines) || isEmpty(lines)) {
+      return;
+    }
+
+    const newLines = lines.map((line) => ({
+      ...line,
+      display: find(propEq('name', line.name), lines)?.display ?? true
+    }));
+
+    setLines(newLines);
+  }, []);
+
+  return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
+};
+
+export default useLegend;

package/src/Graph/LoadingSkeleton.tsx

@@ -0,0 +1,44 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { Skeleton } from '@mui/material';
+
+interface Props {
+  displayTitleSkeleton: boolean;
+  graphHeight: number;
+}
+
+const useSkeletonStyles = makeStyles<Props>()(
+  (theme, { graphHeight, displayTitleSkeleton }) => ({
+    loadingSkeleton: {
+      display: 'grid',
+      gridGap: theme.spacing(1),
+      gridTemplateRows: `${
+        displayTitleSkeleton ? '1fr' : ''
+      } ${graphHeight}px ${theme.spacing(7)}`,
+      height: '100%'
+    },
+    loadingSkeletonLine: {
+      paddingBottom: theme.spacing(1),
+      transform: 'none'
+    }
+  })
+);
+
+const LoadingSkeleton = ({
+  graphHeight,
+  displayTitleSkeleton
+}: Props): JSX.Element => {
+  const { classes } = useSkeletonStyles({ displayTitleSkeleton, graphHeight });
+
+  const skeletonLine = <Skeleton className={classes.loadingSkeletonLine} />;
+
+  return (
+    <div className={classes.loadingSkeleton}>
+      {displayTitleSkeleton && skeletonLine}
+      {skeletonLine}
+      {skeletonLine}
+    </div>
+  );
+};
+
+export default LoadingSkeleton;

package/src/Graph/common/index.ts

@@ -0,0 +1,35 @@
+import { alpha } from '@mui/material';
+
+const commonTickLabelProps = {
+  fontFamily: 'Roboto, sans-serif',
+  fontSize: 10,
+  textAnchor: 'middle'
+};
+
+const margin = { bottom: 30, left: 55, right: 55, top: 30 };
+
+interface FillColor {
+  areaColor: string;
+  transparency: number;
+}
+
+const getFillColor = ({
+  transparency,
+  areaColor
+}: FillColor): string | undefined =>
+  transparency ? alpha(areaColor, 1 - transparency * 0.01) : undefined;
+
+const dateFormat = 'L';
+const timeFormat = 'LT';
+const dateTimeFormat = `${dateFormat} ${timeFormat}`;
+const maxLinesDisplayedLegend = 11;
+
+export {
+  commonTickLabelProps,
+  margin,
+  getFillColor,
+  dateFormat,
+  timeFormat,
+  dateTimeFormat,
+  maxLinesDisplayedLegend
+};

package/src/Graph/graphAtoms.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+import { Line } from './timeSeries/models';
+
+export const linesGraphAtom = atom<Array<Line> | null>(null);
+export const timeTickGraphAtom = atom<Date | null>(null);