@centreon/ui 23.10.44 → 23.10.46

package/src/Graph/BasicComponents/Lines/models.ts

@@ -0,0 +1,42 @@
+import { ScaleLinear } from 'd3-scale';
+
+import { GraphData } from '../../models';
+import { Line, TimeValue } from '../../timeSeries/models';
+
+import { FactorsVariation } from './Threshold/models';
+
+export interface ShapeGraphData {
+  [x: string]: unknown;
+  display: boolean;
+  leftScale?: ScaleLinear<number, number>;
+  rightScale?: ScaleLinear<number, number>;
+  xScale?: ScaleLinear<number, number>;
+  yScale?: ScaleLinear<number, number>;
+}
+
+export interface LinesData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface AreaStackedLines extends ShapeGraphData {
+  invertedStackedLinesData: LinesData;
+  stackedLinesData: LinesData;
+}
+
+export interface AreaRegularLines extends ShapeGraphData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface AreaThreshold extends AreaRegularLines {
+  dataExclusionPeriods?: Array<GraphData>;
+  factors?: FactorsVariation;
+  getCountDisplayedCircles?: (value: number) => void;
+}
+
+export interface Shape {
+  areaRegularLines: AreaRegularLines;
+  areaStackedLines: AreaStackedLines;
+  areaThreshold: AreaThreshold;
+}

package/src/Graph/BasicComponents/LoadingProgress.tsx

@@ -0,0 +1,46 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { CircularProgress, alpha } from '@mui/material';
+
+interface StyleProps {
+  height: number;
+  width: number;
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
+  graphLoader: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.common.white, 0.5),
+    display: 'flex',
+    height,
+    justifyContent: 'center',
+    position: 'absolute',
+    width
+  }
+}));
+
+interface LoadingProgress {
+  display: boolean;
+  height: number;
+  width: number;
+}
+
+const LoadingProgress = ({
+  display,
+  height,
+  width
+}: LoadingProgress): JSX.Element | null => {
+  const { classes } = useStyles({ height, width });
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <div className={classes.graphLoader}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default LoadingProgress;

package/src/Graph/BasicComponents/useFilterLines.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
+
+import { linesGraphAtom } from '../graphAtoms';
+import { Line } from '../timeSeries/models';
+
+import {
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './Lines/Threshold/models';
+
+interface UseFilterLines {
+  displayThreshold?: boolean;
+  lines: Array<Line>;
+}
+
+interface Result {
+  displayedLines: Array<Line>;
+  newLines: Array<Line>;
+}
+
+const useFilterLines = ({
+  displayThreshold = false,
+  lines
+}: UseFilterLines): Result => {
+  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
+
+  const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
+  const filterLines = (): Array<Line> => {
+    const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
+
+    const findLinesUpperLower = lines.map((line) =>
+      equals(line.name, lowerLineName) || equals(line.name, upperLineName)
+        ? line
+        : null
+    );
+
+    const linesUpperLower = reject((element) => !element, findLinesUpperLower);
+
+    return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
+  };
+
+  useEffect(() => {
+    const filteredLines = filterLines();
+    if (!lines || !displayThreshold || filteredLines.length <= 0) {
+      return;
+    }
+
+    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
+
+    setLinesGraph(sortedLines);
+  }, [lines, displayThreshold]);
+
+  return { displayedLines, newLines: linesGraph ?? lines };
+};
+
+export default useFilterLines;

package/src/Graph/Graph.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/Graph.tsx

@@ -0,0 +1,217 @@
+import { MutableRefObject, useMemo, useRef } from 'react';
+
+import { Group } from '@visx/visx';
+import { isNil } from 'ramda';
+
+import { ClickAwayListener, Skeleton } from '@mui/material';
+
+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 './Graph.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,
+  GraphProps,
+  LegendModel
+} from './models';
+import { getLeftScale, getRightScale, getXScale } from './timeSeries';
+import { useIntersection } from './useGraphIntersection';
+
+interface Props extends GraphProps {
+  graphData: Data;
+  graphInterval: GraphInterval;
+  graphRef: MutableRefObject<HTMLDivElement | null>;
+  legend?: LegendModel;
+  shapeLines?: GlobalAreaLines;
+}
+
+const Graph = ({
+  graphData,
+  height = 500,
+  width,
+  shapeLines,
+  axis,
+  displayAnchor,
+  loading,
+  zoomPreview,
+  graphInterval,
+  timeShiftZones,
+  annotationEvent,
+  tooltip,
+  legend,
+  graphRef,
+  header
+}: Props): JSX.Element => {
+  const graphSvgRef = useRef<SVGSVGElement | null>(null);
+
+  const { classes } = useStyles();
+  const { isInViewport } = useIntersection({ element: graphRef?.current });
+
+  const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
+  const graphHeight = height > 0 ? height - margin.top - margin.bottom : 0;
+
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const { displayedLines, newLines } = useFilterLines({
+    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
+    lines
+  });
+
+  const xScale = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: graphWidth
+      }),
+    [timeSeries, graphWidth]
+  );
+
+  const leftScale = useMemo(
+    () =>
+      getLeftScale({
+        dataLines: displayedLines,
+        dataTimeSeries: timeSeries,
+        valueGraphHeight: graphHeight
+      }),
+    [displayedLines, timeSeries, graphHeight]
+  );
+
+  const rightScale = useMemo(
+    () =>
+      getRightScale({
+        dataLines: displayedLines,
+        dataTimeSeries: timeSeries,
+        valueGraphHeight: graphHeight
+      }),
+    [timeSeries, displayedLines, graphHeight]
+  );
+
+  const graphTooltipData = useGraphTooltip({
+    graphWidth,
+    timeSeries,
+    xScale
+  });
+
+  const displayLegend = legend?.display ?? true;
+  const displayTooltip = !isNil(tooltip?.renderComponent);
+
+  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={height} width={width} />
+          <svg height={height} ref={graphSvgRef} width="100%">
+            <Group.Group left={margin.left} top={margin.top}>
+              <Grids
+                height={graphHeight}
+                leftScale={leftScale}
+                width={graphWidth}
+                xScale={xScale}
+              />
+              <Axes
+                data={{
+                  baseAxis,
+                  lines: displayedLines,
+                  timeSeries,
+                  ...axis
+                }}
+                graphInterval={graphInterval}
+                height={graphHeight}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                width={graphWidth}
+                xScale={xScale}
+              />
+
+              <Lines
+                displayAnchor={displayAnchor}
+                displayedLines={displayedLines}
+                graphSvgRef={graphSvgRef}
+                height={graphHeight}
+                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 }}
+              />
+            </Group.Group>
+          </svg>
+          {displayTooltip && (
+            <GraphTooltip {...tooltip} {...graphTooltipData} />
+          )}
+          {(displayAnchor?.displayTooltipsGuidingLines ?? true) && (
+            <TooltipAnchorPoint
+              baseAxis={baseAxis}
+              graphHeight={graphHeight}
+              graphWidth={graphWidth}
+              leftScale={leftScale}
+              lines={displayedLines}
+              rightScale={rightScale}
+              timeSeries={timeSeries}
+              xScale={xScale}
+            />
+          )}
+
+          {displayLegend && (
+            <Legend
+              base={baseAxis}
+              displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+              lines={newLines}
+              renderExtraComponent={legend?.renderExtraComponent}
+              timeSeries={timeSeries}
+            />
+          )}
+        </div>
+      </ClickAwayListener>
+    </>
+  );
+};
+
+export default Graph;

package/src/Graph/Header/index.tsx

@@ -0,0 +1,65 @@
+import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import Typography from '@mui/material/Typography';
+
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
+import { useStyles } from '../Graph.styles';
+import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
+import { GraphHeader } from '../models';
+import { TimeValue } from '../timeSeries/models';
+
+interface Props {
+  displayTimeTick?: boolean;
+  header?: GraphHeader;
+  timeSeries: Array<TimeValue>;
+  title: string;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Header = ({
+  title,
+  displayTimeTick = true,
+  header,
+  timeSeries,
+  xScale
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { toDateTime } = useLocaleDateTimeFormat();
+
+  const { tickAxisBottom } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+  const time =
+    displayTimeTick && !isNil(tickAxisBottom)
+      ? toDateTime(tickAxisBottom)
+      : null;
+
+  const displayTitle = header?.displayTitle ?? true;
+
+  return useMemoComponent({
+    Component: (
+      <div className={classes.header}>
+        <div />
+        {displayTitle && (
+          <div>
+            <Typography align="center" variant="body1">
+              {title}
+            </Typography>
+
+            <Typography align="center" style={{ height: 20 }} variant="body1">
+              {time}
+            </Typography>
+          </div>
+        )}
+        {header?.extraComponent}
+      </div>
+    ),
+
+    memoProps: [time, timeSeries, xScale, displayTimeTick, title, header]
+  });
+};
+
+export default Header;

package/src/Graph/Icons/Downtime.tsx

@@ -0,0 +1,9 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+import { ReactComponent as IconDowntime } from '../../@assets/icons/downtime.icon.svg';
+
+const Downtime = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon component={IconDowntime} {...props} />
+);
+
+export default Downtime;

package/src/Graph/InteractiveComponents/AnchorPoint/AnchorPoint.styles.ts

@@ -0,0 +1,58 @@
+import { makeStyles } from 'tss-react/mui';
+
+interface StylesProps {
+  tooltipLeftAxisX?: number;
+  tooltipLeftAxisYLeft?: number;
+  tooltipLeftAxisYRight?: number;
+  tooltipTopAxisX?: number;
+  tooltipTopAxisYLeft?: number;
+  tooltipTopAxisYRight?: number;
+}
+
+export const useStyles = makeStyles<StylesProps>()(
+  (
+    theme,
+    {
+      tooltipLeftAxisX,
+      tooltipTopAxisX,
+      tooltipLeftAxisYLeft,
+      tooltipTopAxisYLeft,
+      tooltipLeftAxisYRight,
+      tooltipTopAxisYRight
+    }
+  ) => ({
+    tooltipAxis: {
+      '& > span': {
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        lineHeight: 'inherit'
+      },
+      backgroundColor: theme.palette.background.tooltip,
+      border: 'unset',
+      borderRadius: theme.spacing(0.25),
+      color: theme.palette.primary.contrastText,
+      fontSize: '10px',
+      fontWeight: 500,
+      letterSpacing: '0.15px',
+      lineHeight: '100%',
+      padding: theme.spacing(0.375, 0.5),
+      position: 'absolute',
+      textAlign: 'center',
+      transform: 'translate(-50%, -50%)',
+      transformOrigin: 'center center',
+      transition: 'unset'
+    },
+    tooltipAxisBottom: {
+      left: tooltipLeftAxisX ?? 0,
+      top: tooltipTopAxisX ?? 0
+    },
+    tooltipAxisLeftY: {
+      left: tooltipLeftAxisYLeft ?? 0,
+      top: tooltipTopAxisYLeft ?? 0
+    },
+    tooltipLeftAxisRightY: {
+      left: tooltipLeftAxisYRight ?? 0,
+      top: tooltipTopAxisYRight ?? 0
+    }
+  })
+);

package/src/Graph/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -0,0 +1,45 @@
+import { Shape } from '@visx/visx';
+
+import { grey } from '@mui/material/colors';
+
+import { GuidingLines } from './models';
+import useTickGraph from './useTickGraph';
+
+const GuidingLines = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  graphWidth
+}: GuidingLines): JSX.Element | null => {
+  const { positionX, positionY } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+  if (!positionX || !positionY) {
+    return null;
+  }
+
+  return (
+    <>
+      <Shape.Line
+        fill="dotted"
+        from={{ x: positionX, y: 0 }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </>
+  );
+};
+
+export default GuidingLines;

package/src/Graph/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -0,0 +1,66 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, prop } from 'ramda';
+
+import { bisectDate, getDates } from '../../timeSeries';
+import { TimeValue } from '../../timeSeries/models';
+
+import useTickGraph from './useTickGraph';
+import { GetYAnchorPoint } from './models';
+
+import AnchorPoint from '.';
+
+interface Props {
+  lineColor: string;
+  metric: string;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const getYAnchorPoint = ({
+  timeTick,
+  timeSeries,
+  yScale,
+  metric
+}: GetYAnchorPoint): number => {
+  const index = bisectDate(getDates(timeSeries), timeTick);
+  const timeValue = timeSeries[index];
+
+  return yScale(prop(metric, timeValue) as number);
+};
+
+const RegularAnchorPoint = ({
+  xScale,
+  yScale,
+  metric,
+  timeSeries,
+  lineColor
+}: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  if (isNil(timeTick)) {
+    return null;
+  }
+
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    metric,
+    timeSeries,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
+  );
+};
+
+export default RegularAnchorPoint;