@centreon/ui 23.10.42 → 23.10.44

package/src/Graph/Legend/index.tsx

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

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

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

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

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

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

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