@centreon/ui 24.4.21 → 24.4.22

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

@@ -0,0 +1,76 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, map, pipe } from 'ramda';
+
+import { bisectDate } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/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/LineChart/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx

@@ -0,0 +1,96 @@
+import { Tooltip } from '@visx/visx';
+
+import { Typography, useTheme } from '@mui/material';
+
+import useTooltipAnchorPoint from './useTooltipAnchorPoint';
+import { TooltipAnchorModel } from './models';
+
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
+const TooltipAnchorPoint = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  leftScale,
+  rightScale,
+  graphWidth,
+  lines,
+  baseAxis
+}: TooltipAnchorModel): JSX.Element => {
+  const theme = useTheme();
+
+  const {
+    tooltipDataAxisX,
+    tooltipDataAxisYLeft,
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipTopAxisYLeft,
+    tooltipDataAxisYRight,
+    tooltipTopAxisYRight,
+    tooltipLeftAxisYRight
+  } = useTooltipAnchorPoint({
+    baseAxis,
+    graphHeight,
+    graphWidth,
+    leftScale,
+    lines,
+    rightScale,
+    timeSeries,
+    xScale
+  });
+
+  const cardStyles = {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: theme.spacing(0.25, 0.5)
+  };
+
+  return (
+    <>
+      {tooltipDataAxisX && (
+        <Tooltip.Tooltip
+          left={tooltipLeftAxisX}
+          style={{
+            ...baseStyles,
+            ...cardStyles,
+            transform: 'translateX(-70%)'
+          }}
+          top={0}
+        >
+          <Typography variant="caption">{tooltipDataAxisX}</Typography>
+        </Tooltip.Tooltip>
+      )}
+      {tooltipDataAxisYLeft && (
+        <Tooltip.Tooltip
+          left={tooltipLeftAxisYLeft}
+          style={{
+            ...baseStyles,
+            ...cardStyles,
+            transform: 'translateX(-70%) translateY(-100%)'
+          }}
+          top={tooltipTopAxisYLeft}
+        >
+          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
+        </Tooltip.Tooltip>
+      )}
+      {tooltipDataAxisYRight && (
+        <Tooltip.Tooltip
+          left={tooltipLeftAxisYRight}
+          style={{
+            ...baseStyles,
+            ...cardStyles,
+            transform: 'translateX(-70%)  translateY(-80%)'
+          }}
+          top={tooltipTopAxisYRight}
+        >
+          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
+        </Tooltip.Tooltip>
+      )}
+    </>
+  );
+};
+
+export default TooltipAnchorPoint;

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

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

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

@@ -0,0 +1,62 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { Line, TimeValue } from '../../../common/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_id: number;
+  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>;
+}

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+
+import { ScaleLinear } from 'd3-scale';
+import { useAtomValue } from 'jotai';
+import { isEmpty, isNil, not } from 'ramda';
+
+import useAxisY from '../../BasicComponents/Axes/useAxisY';
+import { margin } from '../../common';
+import { getMetrics, getTimeValue } from '../../../common/timeSeries';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
+
+interface AnchorPointResult {
+  positionX?: number;
+  positionY?: number;
+  tickAxisBottom: Date | null;
+  tickAxisLeft: string | null;
+  tickAxisRight: string | null;
+}
+
+interface Props {
+  baseAxis?: number;
+  leftScale?: ScaleLinear<number, number>;
+  lines?: Array<Line>;
+  rightScale?: ScaleLinear<number, number>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const useTickGraph = ({
+  timeSeries,
+  xScale,
+  leftScale,
+  rightScale,
+  lines = [],
+  baseAxis = 1000
+}: Props): AnchorPointResult => {
+  const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
+  const [tickAxisLeft, setTickAxisLeft] = useState<string | null>(null);
+  const [tickAxisRight, setTickAxisRight] = useState<string | null>(null);
+
+  const { axisRight, axisLeft } = useAxisY({ data: { baseAxis, lines } });
+
+  const mousePosition = useAtomValue(mousePositionAtom);
+  const timeValueData = useAtomValue(timeValueAtom);
+
+  const metrics = getMetrics(timeValueData as TimeValue);
+
+  const containsMetrics = not(isNil(metrics)) && not(isEmpty(metrics));
+
+  const positionX = mousePosition ? mousePosition[0] - margin.left : undefined;
+  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
+
+  useEffect(() => {
+    if (!mousePosition) {
+      setTickAxisBottom(null);
+      setTickAxisLeft(null);
+      setTickAxisRight(null);
+
+      return;
+    }
+    const mousePositionTimeTick = mousePosition
+      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
+      : 0;
+    const timeTickValue = containsMetrics
+      ? new Date(mousePositionTimeTick)
+      : null;
+
+    setTickAxisBottom(timeTickValue);
+
+    const valueTickAxisLeft = leftScale?.invert(positionY);
+    const formattedTickAxisLeft = axisLeft?.tickFormat?.(valueTickAxisLeft);
+
+    setTickAxisLeft(formattedTickAxisLeft);
+
+    if (!axisRight.display) {
+      setTickAxisRight(null);
+
+      return;
+    }
+    const valueTickAxisRight = rightScale?.invert(positionY);
+    const formattedTickAxisRight = axisRight?.tickFormat?.(valueTickAxisRight);
+    setTickAxisRight(formattedTickAxisRight);
+  }, [mousePosition]);
+
+  return {
+    positionX,
+    positionY,
+    tickAxisBottom,
+    tickAxisLeft,
+    tickAxisRight
+  };
+};
+export default useTickGraph;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -0,0 +1,107 @@
+import { useEffect } from 'react';
+
+import { Tooltip } from '@visx/visx';
+import { isNil } from 'ramda';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { margin, timeFormat } from '../../common/index';
+
+import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
+import useTickGraph from './useTickGraph';
+
+const useTooltipAnchorPoint = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  leftScale,
+  rightScale,
+  graphWidth,
+  lines,
+  baseAxis
+}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
+  const { format } = useLocaleDateTimeFormat();
+
+  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
+    useTickGraph({
+      baseAxis,
+      leftScale,
+      lines,
+      rightScale,
+      timeSeries,
+      xScale
+    });
+
+  const {
+    showTooltip: showTooltipAxisYLeft,
+    tooltipData: tooltipDataAxisYLeft,
+    tooltipLeft: tooltipLeftAxisYLeft,
+    tooltipTop: tooltipTopAxisYLeft
+  } = Tooltip.useTooltip();
+  const {
+    showTooltip: showTooltipAxisX,
+    tooltipData: tooltipDataAxisX,
+    tooltipLeft: tooltipLeftAxisX,
+    tooltipTop: tooltipTopAxisX
+  } = Tooltip.useTooltip();
+
+  const {
+    showTooltip: showTooltipAxisYRight,
+    tooltipData: tooltipDataAxisYRight,
+    tooltipLeft: tooltipLeftAxisYRight,
+    tooltipTop: tooltipTopAxisYRight
+  } = Tooltip.useTooltip();
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisBottom) {
+      return;
+    }
+
+    const dataAxisX = format({
+      date: tickAxisBottom,
+      formatString: timeFormat
+    });
+
+    showTooltipAxisX({
+      tooltipData: dataAxisX,
+      tooltipLeft: positionX + margin.left,
+      tooltipTop: graphHeight + margin.top
+    });
+  }, [positionX, positionY, tickAxisBottom]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisLeft) {
+      return;
+    }
+    showTooltipAxisYLeft({
+      tooltipData: tickAxisLeft,
+      tooltipLeft: margin.left,
+      tooltipTop: positionY + margin.top
+    });
+  }, [tickAxisLeft, positionX, positionY]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisRight) {
+      return;
+    }
+    showTooltipAxisYRight({
+      tooltipData: tickAxisRight,
+      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
+      tooltipTop: positionY + margin.top
+    });
+  }, [positionX, positionY, tickAxisRight]);
+
+  return {
+    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
+    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
+    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipLeftAxisYRight,
+    tooltipTopAxisX,
+    tooltipTopAxisYLeft,
+    tooltipTopAxisYRight
+  } as UseTooltipAnchorPointResult;
+};
+
+export default useTooltipAnchorPoint;

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/Area.tsx

@@ -0,0 +1,114 @@
+import { Shape } from '@visx/visx';
+import { ScaleTime } from 'd3-scale';
+import { max, pick, prop } from 'ramda';
+import { useAtom, useAtomValue } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
+
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
+import { labelFrom, labelTo } from '../../../translatedLabels';
+import {
+  annotationHoveredAtom,
+  getFillColorDerivedAtom,
+  getIconColorDerivedAtom
+} from '../annotationsAtoms';
+
+import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
+
+type Props = {
+  Icon: (props) => JSX.Element | null;
+  ariaLabel: string;
+  color: string;
+  endDate: string;
+  graphHeight: number;
+  startDate: string;
+  xScale: ScaleTime<number, number>;
+} & Omit<AnnotationProps, 'marker' | 'xIcon' | 'header' | 'icon'>;
+
+const useStyles = makeStyles()((theme) => ({
+  icon: {
+    transition: theme.transitions.create('color', {
+      duration: theme.transitions.duration.shortest
+    })
+  }
+}));
+
+const AreaAnnotation = ({
+  Icon,
+  ariaLabel,
+  color,
+  graphHeight,
+  xScale,
+  startDate,
+  endDate,
+  ...props
+}: Props): JSX.Element => {
+  const { toDateTime } = useLocaleDateTimeFormat();
+
+  const { classes } = useStyles();
+
+  const [annotationHovered, setAnnotationHovered] = useAtom(
+    annotationHoveredAtom
+  );
+  const getFillColor = useAtomValue(getFillColorDerivedAtom);
+  const getIconColor = useAtomValue(getIconColorDerivedAtom);
+
+  const xIconMargin = -iconSize / 2;
+
+  const xStart = max(xScale(new Date(startDate)), 0);
+  const xEnd = endDate ? xScale(new Date(endDate)) : xScale.range()[1];
+
+  const annotation = pick(['event', 'annotationHoveredId'], props);
+
+  const area = (
+    <Shape.Bar
+      fill={getFillColor({ annotation, color })}
+      height={graphHeight + iconSize / 2}
+      width={xEnd - xStart}
+      x={xStart}
+      y={yMargin + iconSize + 2}
+      onMouseEnter={(): void =>
+        setAnnotationHovered(() => ({
+          annotation,
+          annotationHoveredId: prop('annotationHoveredId', props)
+        }))
+      }
+      onMouseLeave={(): void => setAnnotationHovered(() => undefined)}
+    />
+  );
+
+  const from = `${labelFrom} ${toDateTime(startDate)}`;
+  const to = endDate ? ` ${labelTo} ${toDateTime(endDate)}` : '';
+
+  const header = `${from}${to}`;
+
+  const icon = (
+    <Icon
+      aria-label={ariaLabel}
+      className={classes.icon}
+      height={iconSize}
+      style={{
+        color: getIconColor({
+          annotation,
+          color
+        })
+      }}
+      width={iconSize}
+    />
+  );
+
+  return useMemoComponent({
+    Component: (
+      <Annotation
+        header={header}
+        icon={icon}
+        marker={area}
+        xIcon={xStart + (xEnd - xStart) / 2 + xIconMargin}
+        {...props}
+      />
+    ),
+    memoProps: [annotationHovered, xStart, xEnd]
+  });
+};
+
+export default AreaAnnotation;

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/Line.tsx

@@ -0,0 +1,103 @@
+import { Shape } from '@visx/visx';
+import { ScaleTime } from 'd3-scale';
+import { pick } from 'ramda';
+import { useAtomValue } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
+
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
+import {
+  annotationHoveredAtom,
+  getIconColorDerivedAtom,
+  getStrokeOpacityDerivedAtom,
+  getStrokeWidthDerivedAtom
+} from '../annotationsAtoms';
+
+import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
+
+type Props = {
+  Icon: (props) => JSX.Element | null;
+  ariaLabel: string;
+  color: string;
+  date: string;
+  graphHeight: number;
+  xScale: ScaleTime<number, number>;
+} & Omit<
+  AnnotationProps,
+  'marker' | 'xIcon' | 'header' | 'icon' | 'setAnnotationHovered' | 'resourceId'
+>;
+
+const useStyles = makeStyles()((theme) => ({
+  icon: {
+    transition: theme.transitions.create('color', {
+      duration: theme.transitions.duration.shortest
+    })
+  }
+}));
+
+const LineAnnotation = ({
+  color,
+  graphHeight,
+  xScale,
+  date,
+  Icon,
+  ariaLabel,
+  ...props
+}: Props): JSX.Element => {
+  const { toDateTime } = useLocaleDateTimeFormat();
+
+  const { classes } = useStyles();
+
+  const annotationHovered = useAtomValue(annotationHoveredAtom);
+  const getStrokeWidth = useAtomValue(getStrokeWidthDerivedAtom);
+  const getStrokeOpacity = useAtomValue(getStrokeOpacityDerivedAtom);
+  const getIconColor = useAtomValue(getIconColorDerivedAtom);
+
+  const xIconMargin = -iconSize / 2;
+
+  const xIcon = xScale(new Date(date));
+
+  const header = toDateTime(date);
+
+  const annotation = pick(['event', 'annotationHoveredId'], props);
+
+  const line = (
+    <Shape.Line
+      from={{ x: xIcon, y: yMargin + iconSize + 2 }}
+      stroke={color}
+      strokeOpacity={getStrokeOpacity(annotation)}
+      strokeWidth={getStrokeWidth(annotation)}
+      to={{ x: xIcon, y: graphHeight }}
+    />
+  );
+
+  const icon = (
+    <Icon
+      aria-label={ariaLabel}
+      className={classes.icon}
+      height={iconSize}
+      style={{
+        color: getIconColor({
+          annotation,
+          color
+        })
+      }}
+      width={iconSize}
+    />
+  );
+
+  return useMemoComponent({
+    Component: (
+      <Annotation
+        header={header}
+        icon={icon}
+        marker={line}
+        xIcon={xIcon + xIconMargin}
+        {...props}
+      />
+    ),
+    memoProps: [annotationHovered, xIcon]
+  });
+};
+
+export default LineAnnotation;