@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18-MON-17793-create-graph-component-centreon-ui.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.0",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.1",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Icon/index.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 const useStyles = makeStyles()((theme) => ({
   button: {

package/src/Button/Save/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/FileDropZone/index.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

package/src/Form/FormButtons.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import useMemoComponent from '../utils/useMemoComponent';
-import getNormalizedId from '../utils/getNormalizedId';
+import { useMemoComponent, getNormalizedId } from '../utils';
 
 import {
   labelReset,

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/Radio.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

package/src/Graph/{Axes → BasicComponents/Axes}/UnitLabel.tsx

@@ -1,4 +1,4 @@
-import { commonTickLabelProps } from '../common';
+import { commonTickLabelProps } from '../../common';
 
 interface UnitLabelProps {
   unit: string;

package/src/Graph/{Axes → BasicComponents/Axes}/index.tsx

@@ -1,14 +1,11 @@
 import { Axis } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
-import dayjs from 'dayjs';
-import { gte } from 'ramda';
 
-import useLocaleDateTimeFormat, {
-  dateFormat,
-  timeFormat
-} from '../../utils/useLocaleDateTimeFormat';
-import { GraphParameters } from '../models';
-import { getUnits } from '../timeSeries';
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { getUnits } from '../../timeSeries';
+import { getXAxisTickFormat } from '../../helpers';
+import { GraphInterval } from '../../models';
 
 import UnitLabel from './UnitLabel';
 import { Data } from './models';
@@ -16,9 +13,9 @@ import useAxisY from './useAxisY';
 
 interface Props {
   data: Data;
+  graphInterval: GraphInterval;
   height: number;
   leftScale: ScaleLinear<number, number>;
-  queryParameters?: GraphParameters;
   rightScale: ScaleLinear<number, number>;
   width: number;
   xScale: ScaleLinear<number, number>;
@@ -31,7 +28,7 @@ const Axes = ({
   rightScale,
   leftScale,
   xScale,
-  queryParameters
+  graphInterval
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines } = data;
@@ -42,20 +39,8 @@ const Axes = ({
 
   const xTickCount = Math.ceil(width / 82);
 
-  const getXAxisTickFormat = (): string => {
-    const parameters = queryParameters;
-    if (!parameters) {
-      return timeFormat;
-    }
-
-    const numberDays = dayjs
-      .duration(dayjs(parameters.end).diff(dayjs(parameters.start)))
-      .asDays();
-
-    return gte(numberDays, 2) ? dateFormat : timeFormat;
-  };
-
-  const tickFormat = data?.axisX?.xAxisTickFormat || getXAxisTickFormat();
+  const tickFormat =
+    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
 
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });

package/src/Graph/{Axes → BasicComponents/Axes}/models.ts

@@ -1,4 +1,4 @@
-import { Line, TimeValue } from '../timeSeries/models';
+import { Line, TimeValue } from '../../timeSeries/models';
 
 export interface LabelProps {
   [x: string]: unknown;

package/src/Graph/{Axes → BasicComponents/Axes}/useAxisY.ts

@@ -3,8 +3,8 @@ import { Axis } from '@visx/visx';
 
 import { useTheme } from '@mui/material';
 
-import { formatMetricValue, getUnits } from '../timeSeries';
-import { commonTickLabelProps } from '../common';
+import { formatMetricValue, getUnits } from '../../timeSeries';
+import { commonTickLabelProps } from '../../common';
 
 import { Data, LabelProps } from './models';
 

package/src/Graph/{Lines → BasicComponents/Lines}/RegularLines/index.tsx

@@ -4,9 +4,9 @@ import { Curve, Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals, isNil, prop } from 'ramda';
 
-import { getTime } from '../../timeSeries';
-import { TimeValue } from '../../timeSeries/models';
-import { getFillColor } from '../../common';
+import { getTime } from '../../../timeSeries';
+import { TimeValue } from '../../../timeSeries/models';
+import { getFillColor } from '../../../common';
 
 interface Props {
   areaColor: string;

package/src/Graph/{Lines → BasicComponents/Lines}/RegularLines/useRegularLines.ts

@@ -1,7 +1,7 @@
 import { difference } from 'ramda';
 
-import { Line } from '../../timeSeries/models';
-import { getSortedStackedLines } from '../../timeSeries';
+import { Line } from '../../../timeSeries/models';
+import { getSortedStackedLines } from '../../../timeSeries';
 
 interface RegularLines {
   regularLines: Array<Line>;

package/src/Graph/{Lines → BasicComponents/Lines}/StackedLines/index.tsx

@@ -4,10 +4,10 @@ import { map, nth, pipe, path, all, not, isNil, prop } from 'ramda';
 import { Shape, Curve } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { Line, TimeValue } from '../../timeSeries/models';
-import { getTime } from '../../timeSeries';
-import { getFillColor } from '../../common';
-import { StackedAnchorPoint } from '../../InteractionWithGraph/AnchorPoint/models';
+import { Line, TimeValue } from '../../../timeSeries/models';
+import { getTime } from '../../../timeSeries';
+import { getFillColor } from '../../../common';
+import { StackedAnchorPoint } from '../../../IntercatifsComponents/AnchorPoint/models';
 
 interface Props {
   lines: Array<Line>;

package/src/Graph/{Lines → BasicComponents/Lines}/StackedLines/useStackedLines.ts

@@ -2,7 +2,7 @@ import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
   getTimeSeriesForLines
-} from '../../timeSeries';
+} from '../../../timeSeries';
 import { LinesData } from '../models';
 
 interface StackedLines {

package/src/Graph/{Lines → BasicComponents/Lines}/index.tsx

@@ -2,12 +2,12 @@ import { ReactNode } from 'react';
 
 import { isEmpty, isNil } from 'ramda';
 
-import { getStackedYScale, getUnits, getYScale } from '../timeSeries';
-import { Line } from '../timeSeries/models';
+import { getStackedYScale, getUnits, getYScale } from '../../timeSeries';
+import { Line } from '../../timeSeries/models';
 import {
   RegularLinesAnchorPoint,
   StackedAnchorPoint
-} from '../InteractionWithGraph/AnchorPoint/models';
+} from '../../IntercatifsComponents/AnchorPoint/models';
 
 import RegularLine from './RegularLines';
 import StackedLines from './StackedLines';

package/src/Graph/{Lines → BasicComponents/Lines}/models.ts

@@ -1,6 +1,6 @@
 import { ScaleLinear } from 'd3-scale';
 
-import { Line, TimeValue } from '../timeSeries/models';
+import { Line, TimeValue } from '../../timeSeries/models';
 
 export interface ShapeGraphData {
   [x: string]: unknown;

package/src/Graph/Graph.styles.ts

@@ -0,0 +1,37 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  container: {
+    '& .visx-axis-bottom': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: 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'
+  }
+}));
+
+export { useStyles };

package/src/Graph/Graph.tsx

@@ -2,30 +2,36 @@ import { useMemo, useRef } from 'react';
 
 import { Group } from '@visx/visx';
 
-import Axes from './Axes';
-import Grids from './Grids';
+import { ClickAwayListener } from '@mui/material';
+
+import Axes from './BasicComponents/Axes';
+import Grids from './BasicComponents/Grids';
+import Lines from './BasicComponents/Lines';
+import useRegularLines from './BasicComponents/Lines/RegularLines/useRegularLines';
+import useStackedLines from './BasicComponents/Lines/StackedLines/useStackedLines';
+import LoadingProgress from './BasicComponents/LoadingProgress';
+import { margin } from './common';
+import { useStyles } from './Graph.styles';
 import Header from './Header';
-import InteractionWithGraph from './InteractionWithGraph';
-import RegularAnchorPoint from './InteractionWithGraph/AnchorPoint/RegularAnchorPoint';
-import StackedAnchorPoint from './InteractionWithGraph/AnchorPoint/StackedAnchorPoint';
+import InteractionWithGraph from './IntercatifsComponents';
 import {
   RegularLinesAnchorPoint,
-  StackValue,
-  StackedAnchorPoint as StackedAnchorPointModel
-} from './InteractionWithGraph/AnchorPoint/models';
-import useAnchorPoint from './InteractionWithGraph/AnchorPoint/useAnchorPoint';
-import Lines from './Lines';
-import useRegularLines from './Lines/RegularLines/useRegularLines';
-import useStackedLines from './Lines/StackedLines/useStackedLines';
-import LoadingProgress from './LoadingProgress';
-import { margin } from './common';
-import { Data, GlobalAreaLines, GraphProps } from './models';
+  StackedAnchorPoint as StackedAnchorPointModel,
+  StackValue
+} from './IntercatifsComponents/AnchorPoint/models';
+import RegularAnchorPoint from './IntercatifsComponents/AnchorPoint/RegularAnchorPoint';
+import StackedAnchorPoint from './IntercatifsComponents/AnchorPoint/StackedAnchorPoint';
+import useAnchorPoint from './IntercatifsComponents/AnchorPoint/useAnchorPoint';
+import GraphTooltip from './IntercatifsComponents/Tooltip';
+import useGraphTooltip from './IntercatifsComponents/Tooltip/useGraphTooltip';
+import { Data, GlobalAreaLines, GraphInterval, GraphProps } from './models';
 import { getLeftScale, getRightScale, getXScale } from './timeSeries';
 
 interface Props extends GraphProps {
   graphData: Data;
+  graphInterval: GraphInterval;
   loading: boolean;
-  shapeLines: GlobalAreaLines;
+  shapeLines?: GlobalAreaLines;
 }
 
 const Graph = ({
@@ -36,14 +42,20 @@ const Graph = ({
   axis,
   anchorPoint,
   loading,
-  zoomPreview
+  zoomPreview,
+  graphInterval,
+  timeShiftZones,
+  annotationEvent,
+  tooltip
 }: Props): JSX.Element => {
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
+  const { classes } = useStyles();
+
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight = height > 0 ? height - margin.top - margin.bottom : 0;
 
-  const { title, timeSeries, lines, baseAxis, queryParameters } = graphData;
+  const { title, timeSeries, lines, baseAxis } = graphData;
 
   const xScale = useMemo(
     () =>
@@ -87,6 +99,12 @@ const Graph = ({
 
   const { regularLines } = useRegularLines({ lines });
 
+  const graphTooltipData = useGraphTooltip({
+    graphWidth,
+    timeSeries,
+    xScale
+  });
+
   const commonLinesProps = {
     display: true,
     leftScale,
@@ -181,49 +199,56 @@ const Graph = ({
         timeTick={timeTick}
         title={title}
       />
-      <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,
-              timeSeries,
-              ...axis
-            }}
-            height={graphHeight}
-            leftScale={leftScale}
-            queryParameters={queryParameters}
-            rightScale={rightScale}
-            width={graphWidth}
-            xScale={xScale}
-          />
-
-          <Lines
-            anchorPoint={{
-              renderRegularLinesAnchorPoint,
-              renderStackedAnchorPoint
-            }}
-            height={graphHeight}
-            shape={{ areaRegularLines, areaStackedLines }}
-          />
-
-          <InteractionWithGraph
-            commonData={{ graphHeight, graphSvgRef, graphWidth }}
-            zoomData={{
-              xScale,
-              ...zoomPreview
-            }}
-          />
-        </Group.Group>
-      </svg>
+      <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,
+                  timeSeries,
+                  ...axis
+                }}
+                graphInterval={graphInterval}
+                height={graphHeight}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                width={graphWidth}
+                xScale={xScale}
+              />
+
+              <Lines
+                anchorPoint={{
+                  renderRegularLinesAnchorPoint,
+                  renderStackedAnchorPoint
+                }}
+                height={graphHeight}
+                shape={{ areaRegularLines, areaStackedLines }}
+              />
+
+              <InteractionWithGraph
+                annotationData={{ ...annotationEvent }}
+                commonData={{ graphHeight, graphSvgRef, graphWidth, xScale }}
+                timeShiftZonesData={{
+                  ...timeShiftZones,
+                  graphInterval,
+                  loading
+                }}
+                zoomData={{ ...zoomPreview }}
+              />
+            </Group.Group>
+          </svg>
+          <GraphTooltip {...tooltip} {...graphTooltipData} />
+        </div>
+      </ClickAwayListener>
     </>
   );
 };

package/src/Graph/Header/index.tsx

@@ -2,7 +2,7 @@ import { isNil } from 'ramda';
 
 import Typography from '@mui/material/Typography';
 
-import useLocaleDateTimeFormat from '../../utils/useLocaleDateTimeFormat';
+import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 interface Props {
   displayTimeTick?: boolean;

package/src/Graph/{InteractionWithGraph → IntercatifsComponents}/AnchorPoint/useAnchorPoint.ts

@@ -12,9 +12,7 @@ import {
   MousePosition,
   changeMousePositionAndTimeValueDerivedAtom,
   mousePositionAtom,
-  timeValueAtom
-} from '../mouseTimeValueAtoms';
-import {
+  timeValueAtom,
   eventMouseDownAtom,
   eventMouseMovingAtom
 } from '../interactionWithGraphAtoms';

package/src/Graph/IntercatifsComponents/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;