@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.21 → 23.10.18-MON-17793-create-graph-component-centreon-ui.23

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

@@ -1,6 +1,6 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { TimeValue } from '../../timeSeries/models';
+import { Line, TimeValue } from '../../timeSeries/models';
 
 interface AnchorPoint {
   areaColor: string;
@@ -23,3 +23,40 @@ 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>;
+}

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

@@ -4,24 +4,43 @@ 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 '../../timeSeries';
-import { TimeValue } from '../../timeSeries/models';
+import { Line, TimeValue } from '../../timeSeries/models';
 import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {
   positionX?: number;
   positionY?: number;
-  timeTick: Date | null;
+  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 }: Props): AnchorPointResult => {
-  const [timeTick, setTimeTick] = useState<Date | null>(null);
+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);
 
@@ -34,7 +53,9 @@ const useTickGraph = ({ timeSeries, xScale }: Props): AnchorPointResult => {
 
   useEffect(() => {
     if (!mousePosition) {
-      setTimeTick(null);
+      setTickAxisBottom(null);
+      setTickAxisLeft(null);
+      setTickAxisRight(null);
 
       return;
     }
@@ -45,13 +66,29 @@ const useTickGraph = ({ timeSeries, xScale }: Props): AnchorPointResult => {
       ? new Date(mousePositionTimeTick)
       : null;
 
-    setTimeTick(timeTickValue);
+    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,
-    timeTick
+    tickAxisBottom,
+    tickAxisLeft,
+    tickAxisRight
   };
 };
 export default useTickGraph;

package/src/Graph/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 / 2,
+      tooltipTop: graphHeight + margin.top / 2
+    });
+  }, [positionX, positionY, tickAxisBottom]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisLeft) {
+      return;
+    }
+    showTooltipAxisYLeft({
+      tooltipData: tickAxisLeft,
+      tooltipLeft: 40,
+      tooltipTop: positionY + margin.top / 2
+    });
+  }, [tickAxisLeft, positionX, positionY]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisRight) {
+      return;
+    }
+    showTooltipAxisYRight({
+      tooltipData: tickAxisRight,
+      tooltipLeft: graphWidth ? graphWidth + 40 : 0,
+      tooltipTop: positionY + margin.top / 2
+    });
+  }, [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/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useTheme } from '@mui/material';
 
-import IconDowntime from '../../../icons/Downtime';
+import IconDowntime from '../../../Icons/Downtime';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
 import { Args } from '../models';

package/src/Graph/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx

@@ -5,11 +5,14 @@ import { makeStyles } from 'tss-react/mui';
 
 import { useMemoComponent } from '@centreon/ui';
 
+import { TimeShiftDirection } from './models';
+
 export const timeShiftIconSize = 20;
 
 interface Props {
   Icon: ReactNode;
   ariaLabel: string;
+  directionHovered: TimeShiftDirection;
   xIcon: number;
   yIcon: number;
 }
@@ -24,7 +27,8 @@ const TimeShiftIcon = ({
   xIcon,
   yIcon,
   Icon,
-  ariaLabel
+  ariaLabel,
+  directionHovered
 }: Props): JSX.Element => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -51,7 +55,7 @@ const TimeShiftIcon = ({
         </svg>
       </g>
     ),
-    memoProps: [xIcon, ariaLabel]
+    memoProps: [xIcon, ariaLabel, directionHovered]
   });
 };
 

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

@@ -60,6 +60,7 @@ const TimeShiftZones = ({
         <TimeShiftIcon
           Icon={Icon}
           ariaLabel={ariaLabelIcon}
+          directionHovered={directionHovered}
           xIcon={xIcon}
           yIcon={yIcon}
         />

package/src/Graph/InteractiveComponents/Tooltip/useGraphTooltip.ts

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 
-import { ScaleLinear } from 'd3-scale';
 import { Event, Tooltip } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 
-import { getTimeValue } from '../../timeSeries';
-import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
+import { getDate } from '../../helpers/index';
 import { TimeValue } from '../../timeSeries/models';
 import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
+import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
 
 import { GraphTooltip, width } from './models';
 
@@ -36,16 +36,6 @@ const useGraphTooltip = ({
   const mouseUpEvent = useAtomValue(eventMouseUpAtom);
   const isZoomApplied = useAtomValue(applyingZoomAtomAtom);
 
-  const getDate = (positionX): Date => {
-    const { timeTick } = getTimeValue({
-      timeSeries,
-      x: positionX,
-      xScale
-    });
-
-    return new Date(timeTick);
-  };
-
   useEffect(() => {
     if (!mouseUpEvent || isZoomApplied) {
       return;
@@ -59,7 +49,7 @@ const useGraphTooltip = ({
     const displayLeft = graphWidth - x < tooltipWidth;
 
     showTooltip({
-      tooltipData: getDate(x),
+      tooltipData: getDate({ positionX: x, timeSeries, xScale }),
       tooltipLeft: displayLeft ? x - tooltipWidth : x,
       tooltipTop: y
     });

package/src/Graph/Legend/useLegend.ts

@@ -12,7 +12,9 @@ import {
   prop,
   propEq,
   reject,
-  sortBy
+  sortBy,
+  compose,
+  toLower
 } from 'ramda';
 
 import { linesGraphAtom } from '../graphAtoms';
@@ -52,7 +54,8 @@ const useLegend = ({ lines }: Props): LegendActions => {
       { ...getLineByMetric(metric), highlight: true }
     ];
 
-    const sortedData = sortBy(prop('name'), data);
+    const sortedData = sortBy(compose(toLower, prop('name')), data);
+
     setLines(sortedData);
   };
 

package/src/Graph/helpers/doc.ts

@@ -201,13 +201,38 @@ export const argTypes = {
       category: 'Graph data'
     }
   },
+
   displayAnchor: {
-    control: 'boolean',
-    description:
-      'displays or not the timing, circle, vertical and horizontal line for each point of the corresponding graph (line) according to the interaction of the mouse with the graph',
+    control: 'object',
+    description: getDescription({
+      sections: [
+        {
+          name: '',
+          props: [
+            {
+              displayGuidingLines: {
+                description: 'displays the guiding lines',
+                type: 'boolean'
+              }
+            },
+            {
+              displayTooltipsGuidingLines: {
+                description:
+                  'displays the tooltips (labels) on the axis bottom/left/right',
+                type: 'boolean'
+              }
+            }
+          ],
+          type: 'object'
+        }
+      ]
+    }),
     table: {
       category: 'Graph interaction',
-      type: { summary: 'boolean' }
+      type: {
+        summary:
+          'displays or not the guiding lines and the dots for each point of the corresponding graph (line) according to the interaction of the mouse with the graph'
+      }
     }
   },
   end: {

package/src/Graph/helpers/index.ts

@@ -3,8 +3,8 @@ import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
 
 import { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
-import { GraphData, GraphInterval } from '../models';
-import { getLineData, getTimeSeries } from '../timeSeries';
+import { GetDate, GraphData, GraphInterval } from '../models';
+import { getLineData, getTimeSeries, getTimeValue } from '../timeSeries';
 
 export const adjustGraphData = (graphData: GraphData): LinesData => {
   const lines = getLineData(graphData);
@@ -46,3 +46,13 @@ export const truncate = (content?: string): string => {
 
 export const displayArea = (data: unknown): boolean =>
   !isEmpty(data) && !isNil(data);
+
+export const getDate = ({ positionX, xScale, timeSeries }: GetDate): Date => {
+  const { timeTick } = getTimeValue({
+    timeSeries,
+    x: positionX,
+    xScale
+  });
+
+  return new Date(timeTick);
+};

package/src/Graph/index.stories.tsx

@@ -102,7 +102,7 @@ const ExternalComponent = (tooltipData): JSX.Element => {
       <br />
       <br />
       {format({
-        date: new Date(data),
+        date: data,
         formatString: dateTimeFormat
       })}
       <br />