@centreon/ui 24.4.21 → 24.4.23

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('display', false), 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('metric_id', line.metric_id), lines)?.display ?? true
+    }));
+
+    setLinesGraph(newLines);
+  }, [lines]);
+
+  return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
+};
+
+export default useLegend;

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

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  container: {
+    '& .visx-axis-bottom': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        },
+        text: {
+          fill: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-axis-line': {
+      stroke: theme.palette.text.primary
+    },
+    '& .visx-axis-right': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-columns': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    '& .visx-rows': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    fill: theme.palette.text.primary,
+    position: 'relative'
+  },
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
+  }
+}));
+
+export { useStyles };

package/src/Graph/LineChart/LineChart.tsx

@@ -0,0 +1,317 @@
+import { MutableRefObject, useMemo, useRef, useState } from 'react';
+
+import { Group, Tooltip } from '@visx/visx';
+import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
+
+import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
+
+import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
+import { Line } from '../common/timeSeries/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
+
+import Axes from './BasicComponents/Axes';
+import Grids from './BasicComponents/Grids';
+import Lines from './BasicComponents/Lines';
+import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
+import LoadingProgress from './BasicComponents/LoadingProgress';
+import useFilterLines from './BasicComponents/useFilterLines';
+import { useStyles } from './LineChart.styles';
+import Header from './Header';
+import InteractionWithGraph from './InteractiveComponents';
+import TooltipAnchorPoint from './InteractiveComponents/AnchorPoint/TooltipAnchorPoint';
+import GraphTooltip from './InteractiveComponents/Tooltip';
+import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
+import Legend from './Legend';
+import { margin } from './common';
+import {
+  Data,
+  GlobalAreaLines,
+  GraphInterval,
+  LineChartProps,
+  LegendModel
+} from './models';
+import { useIntersection } from './useLineChartIntersection';
+import { CurveType } from './BasicComponents/Lines/models';
+import Thresholds from './BasicComponents/Thresholds';
+import { legendWidth } from './Legend/Legend.styles';
+
+const extraMargin = 10;
+
+interface Props extends LineChartProps {
+  curve: CurveType;
+  graphData: Data;
+  graphInterval: GraphInterval;
+  graphRef: MutableRefObject<HTMLDivElement | null>;
+  legend?: LegendModel;
+  marginBottom: number;
+  shapeLines?: GlobalAreaLines;
+  thresholdUnit?: string;
+  thresholds?: ThresholdsModel;
+}
+
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
+const LineChart = ({
+  graphData,
+  height = 500,
+  width,
+  shapeLines,
+  axis,
+  displayAnchor,
+  loading,
+  zoomPreview,
+  graphInterval,
+  timeShiftZones,
+  annotationEvent,
+  tooltip,
+  legend,
+  graphRef,
+  header,
+  curve,
+  marginBottom,
+  thresholds,
+  thresholdUnit
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const theme = useTheme();
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
+  const graphSvgRef = useRef<SVGSVGElement | null>(null);
+
+  const { isInViewport } = useIntersection({ element: graphRef?.current });
+
+  const legendRef = useRef<HTMLDivElement | null>(null);
+
+  const {
+    tooltipOpen: thresholdTooltipOpen,
+    tooltipLeft: thresholdTooltipLeft,
+    tooltipTop: thresholdTooltipTop,
+    tooltipData: thresholdTooltipData,
+    hideTooltip: hideThresholdTooltip,
+    showTooltip: showThresholdTooltip
+  } = Tooltip.useTooltip();
+
+  const graphWidth =
+    width > 0 ? width - margin.left - margin.right - extraMargin : 0;
+  const graphHeight =
+    (height || 0) > 0
+      ? (height || 0) -
+        margin.top -
+        margin.bottom -
+        marginBottom -
+        (legendRef.current?.getBoundingClientRect().height || 0)
+      : 0;
+
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const thresholdValues = flatten([
+    pluck('value', thresholds?.warning || []),
+    pluck('value', thresholds?.critical || [])
+  ]);
+
+  const { displayedLines, newLines } = useFilterLines({
+    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
+    lines,
+    linesGraph,
+    setLinesGraph
+  });
+
+  const xScale = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth]
+  );
+
+  const leftScale = useMemo(
+    () =>
+      getLeftScale({
+        dataLines: displayedLines,
+        dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight: graphHeight - 35
+      }),
+    [displayedLines, timeSeries, graphHeight, thresholdValues]
+  );
+
+  const rightScale = useMemo(
+    () =>
+      getRightScale({
+        dataLines: displayedLines,
+        dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (thresholds?.enabled && thresholdValues) || [],
+        valueGraphHeight: graphHeight - 35
+      }),
+    [timeSeries, displayedLines, graphHeight]
+  );
+
+  const graphTooltipData = useGraphTooltip({
+    graphWidth,
+    timeSeries,
+    xScale
+  });
+
+  const displayLegend = legend?.display ?? true;
+  const displayTooltip = !isNil(tooltip?.renderComponent);
+
+  const legendItemsWidth = reduce(
+    (acc) => acc + legendWidth * 8 + 24,
+    0,
+    displayedLines
+  );
+
+  const shouldDisplayLegendInCompactMode =
+    lte(graphWidth, 808) && gt(legendItemsWidth, graphWidth);
+
+  if (!isInViewport) {
+    return (
+      <Skeleton
+        height={graphSvgRef?.current?.clientHeight ?? graphHeight}
+        variant="rectangular"
+        width="100%"
+      />
+    );
+  }
+
+  return (
+    <>
+      <Header
+        displayTimeTick={displayAnchor?.displayGuidingLines ?? true}
+        header={header}
+        timeSeries={timeSeries}
+        title={title}
+        xScale={xScale}
+      />
+      <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
+        <div className={classes.container}>
+          <LoadingProgress
+            display={loading}
+            height={graphHeight}
+            width={width}
+          />
+          <svg height={graphHeight + margin.top} ref={graphSvgRef} width="100%">
+            <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
+              <Grids
+                height={graphHeight - margin.top}
+                leftScale={leftScale}
+                width={graphWidth}
+                xScale={xScale}
+              />
+              <Axes
+                data={{
+                  baseAxis,
+                  lines: displayedLines,
+                  timeSeries,
+                  ...axis
+                }}
+                graphInterval={graphInterval}
+                height={graphHeight - margin.top}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                width={graphWidth}
+                xScale={xScale}
+              />
+
+              <Lines
+                curve={curve}
+                displayAnchor={displayAnchor}
+                displayedLines={displayedLines}
+                graphSvgRef={graphSvgRef}
+                height={graphHeight - margin.top}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                timeSeries={timeSeries}
+                width={graphWidth}
+                xScale={xScale}
+                {...shapeLines}
+              />
+
+              <InteractionWithGraph
+                annotationData={{ ...annotationEvent }}
+                commonData={{
+                  graphHeight,
+                  graphSvgRef,
+                  graphWidth,
+                  timeSeries,
+                  xScale
+                }}
+                timeShiftZonesData={{
+                  ...timeShiftZones,
+                  graphInterval,
+                  loading
+                }}
+                zoomData={{ ...zoomPreview }}
+              />
+
+              {thresholds?.enabled && (
+                <Thresholds
+                  displayedLines={displayedLines}
+                  hideTooltip={hideThresholdTooltip}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  showTooltip={showThresholdTooltip}
+                  thresholdUnit={thresholdUnit}
+                  thresholds={thresholds as ThresholdsModel}
+                  width={graphWidth}
+                />
+              )}
+            </Group.Group>
+          </svg>
+          {displayTooltip && (
+            <GraphTooltip {...tooltip} {...graphTooltipData} />
+          )}
+          {(displayAnchor?.displayTooltipsGuidingLines ?? true) && (
+            <TooltipAnchorPoint
+              baseAxis={baseAxis}
+              graphHeight={graphHeight - 35}
+              graphWidth={graphWidth}
+              leftScale={leftScale}
+              lines={displayedLines}
+              rightScale={rightScale}
+              timeSeries={timeSeries}
+              xScale={xScale}
+            />
+          )}
+          <Fade in={thresholdTooltipOpen}>
+            <Tooltip.Tooltip
+              left={thresholdTooltipLeft}
+              style={{
+                ...baseStyles,
+                backgroundColor: theme.palette.background.paper,
+                color: theme.palette.text.primary,
+                transform: `translate(${graphWidth / 2}px, -10px)`
+              }}
+              top={thresholdTooltipTop}
+            >
+              {thresholdTooltipData}
+            </Tooltip.Tooltip>
+          </Fade>
+        </div>
+      </ClickAwayListener>
+      {displayLegend && (
+        <div ref={legendRef}>
+          <Legend
+            base={baseAxis}
+            displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+            lines={newLines}
+            renderExtraComponent={legend?.renderExtraComponent}
+            setLinesGraph={setLinesGraph}
+            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+            timeSeries={timeSeries}
+            xScale={xScale}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default LineChart;

package/src/Graph/LineChart/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/LineChart/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/LineChart/graphAtoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const timeTickGraphAtom = atom<Date | null>(null);