@centreon/ui 24.4.21 → 24.4.23

package/src/Graph/LineChart/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 '../LineChart.styles';
+import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
+import { LineChartHeader } from '../models';
+import { TimeValue } from '../../common/timeSeries/models';
+
+interface Props {
+  displayTimeTick?: boolean;
+  header?: LineChartHeader;
+  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 />
+        <div>
+          {displayTitle && (
+            <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/LineChart/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/LineChart/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/LineChart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

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

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;