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

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;

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

@@ -0,0 +1,76 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, map, pipe } from 'ramda';
+
+import { bisectDate } from '../../timeSeries';
+import { TimeValue } from '../../timeSeries/models';
+
+import { StackValue } from './models';
+import useTickGraph from './useTickGraph';
+
+import AnchorPoint from '.';
+
+interface Props {
+  lineColor: string;
+  stackValues: Array<StackValue>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+interface GetYAnchorPoint {
+  stackValues: Array<StackValue>;
+  timeTick: Date | null;
+  yScale: ScaleTime<number, number>;
+}
+
+const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
+  const toTimeTick = (stackValue): string => stackValue?.data?.timeTick;
+
+  const toDate = (tick: string): Date => new Date(tick);
+
+  return pipe(map(toTimeTick), map(toDate))(stackValues);
+};
+
+const getYAnchorPoint = ({
+  timeTick,
+  stackValues,
+  yScale
+}: GetYAnchorPoint): number => {
+  const index = bisectDate(getStackedDates(stackValues), timeTick);
+  const timeValue = stackValues[index];
+
+  return yScale(timeValue[1] as number);
+};
+
+const StackedAnchorPoint = ({
+  xScale,
+  yScale,
+  stackValues,
+  timeSeries,
+  lineColor
+}: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  if (isNil(timeTick)) {
+    return null;
+  }
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    stackValues,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
+  );
+};
+
+export default StackedAnchorPoint;

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

@@ -0,0 +1,70 @@
+import Paper from '@mui/material/Paper';
+import { Typography } from '@mui/material';
+
+import useTooltipAnchorPoint from './useTooltipAnchorPoint';
+import { useStyles } from './AnchorPoint.styles';
+import { TooltipAnchorModel } from './models';
+
+const TooltipAnchorPoint = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  leftScale,
+  rightScale,
+  graphWidth,
+  lines,
+  baseAxis
+}: TooltipAnchorModel): JSX.Element => {
+  const {
+    tooltipDataAxisX,
+    tooltipDataAxisYLeft,
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipTopAxisX,
+    tooltipTopAxisYLeft,
+    tooltipDataAxisYRight,
+    tooltipTopAxisYRight,
+    tooltipLeftAxisYRight
+  } = useTooltipAnchorPoint({
+    baseAxis,
+    graphHeight,
+    graphWidth,
+    leftScale,
+    lines,
+    rightScale,
+    timeSeries,
+    xScale
+  });
+  const { classes, cx } = useStyles({
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipLeftAxisYRight,
+    tooltipTopAxisX,
+    tooltipTopAxisYLeft,
+    tooltipTopAxisYRight
+  });
+
+  return (
+    <>
+      {tooltipDataAxisYLeft && (
+        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisLeftY)}>
+          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
+        </Paper>
+      )}
+      {tooltipDataAxisX && (
+        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisBottom)}>
+          <Typography variant="caption">{tooltipDataAxisX}</Typography>
+        </Paper>
+      )}
+      {tooltipDataAxisYRight && (
+        <Paper
+          className={cx(classes.tooltipAxis, classes.tooltipLeftAxisRightY)}
+        >
+          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
+        </Paper>
+      )}
+    </>
+  );
+};
+
+export default TooltipAnchorPoint;

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

@@ -0,0 +1,20 @@
+interface Props {
+  lineColor: string;
+  x: number;
+  y: number;
+}
+
+const Point = ({ lineColor, x, y }: Props): JSX.Element => {
+  return (
+    <circle
+      cx={x}
+      cy={y}
+      fill="white"
+      r={4}
+      stroke={lineColor}
+      strokeWidth={2}
+    />
+  );
+};
+
+export default Point;

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

@@ -0,0 +1,62 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { Line, TimeValue } from '../../timeSeries/models';
+
+interface AnchorPoint {
+  areaColor: string;
+  lineColor: string;
+  transparency: number;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface RegularLinesAnchorPoint extends AnchorPoint {
+  metric: string;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface StackedAnchorPoint extends AnchorPoint {
+  stack;
+}
+
+export interface StackData {
+  data: TimeValue;
+}
+export type StackValue = [number, number, StackData];
+
+export interface GuidingLines {
+  graphHeight: number;
+  graphWidth: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+export interface GetYAnchorPoint {
+  metric: string;
+  timeSeries: Array<TimeValue>;
+  timeTick: Date;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface UseTooltipAnchorPointResult {
+  tooltipDataAxisX?: string | null;
+  tooltipDataAxisYLeft?: number | null;
+  tooltipDataAxisYRight?: number | null;
+  tooltipLeftAxisX?: number;
+  tooltipLeftAxisYLeft?: number;
+  tooltipLeftAxisYRight?: number;
+  tooltipTopAxisX?: number;
+  tooltipTopAxisYLeft?: number;
+  tooltipTopAxisYRight?: number;
+}
+
+export interface TooltipAnchorModel {
+  baseAxis: number;
+  graphHeight: number;
+  graphWidth?: number;
+  leftScale?: ScaleLinear<number, number>;
+  lines: Array<Line>;
+  rightScale?: ScaleLinear<number, number>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}