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

package/package.json

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

package/src/Graph/BasicComponents/Axes/index.tsx

@@ -61,7 +61,7 @@ const Axes = ({
       {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
 
       <Axis.AxisLeft
-        numTicks={axisLeft.numTicks}
+        numTicks={axisLeft?.numTicks}
         orientation="left"
         scale={leftScale}
         tickFormat={axisLeft.tickFormat}
@@ -72,7 +72,7 @@ const Axes = ({
       {displayAxisRight && (
         <Axis.AxisRight
           left={width}
-          numTicks={axisRight.numTicks}
+          numTicks={axisRight?.numTicks}
           orientation="right"
           scale={rightScale}
           tickFormat={axisRight.tickFormat}

package/src/Graph/BasicComponents/Axes/useAxisY.ts

@@ -10,8 +10,8 @@ import { Data, LabelProps } from './models';
 
 interface AxisYData {
   displayUnit: boolean;
-  numTicks: number;
-  tickFormat: Axis.TickFormatter<unknown>;
+  numTicks?: number;
+  tickFormat: (value: unknown) => string;
   tickLabelProps: Axis.TickLabelProps<unknown>;
 }
 
@@ -25,8 +25,8 @@ interface AxisY {
 }
 
 interface Props {
-  data: Data;
-  graphHeight: number;
+  data: Omit<Data, 'timeSeries'>;
+  graphHeight?: number;
 }
 
 const useAxisY = ({ data, graphHeight }: Props): AxisY => {
@@ -35,7 +35,7 @@ const useAxisY = ({ data, graphHeight }: Props): AxisY => {
   const { lines } = data;
   const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
 
-  const numTicks = Math.ceil(graphHeight / 30);
+  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
 
   const hasMoreThanTwoUnits = !isNil(thirdUnit);
   const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;

package/src/Graph/BasicComponents/Lines/RegularLines/index.tsx

@@ -37,13 +37,13 @@ const RegularLine = ({
   transparency,
   graphHeight
 }: Props): JSX.Element => {
-  const isHighlighted = highlight ? 2 : 1;
+  const isHighlighted = highlight ? 3 : 1;
 
   const props = {
     curve: Curve.curveLinear,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric]),
-    opacity: !highlight ? 0.7 : 1,
+    opacity: !highlight ? 1 : 3,
     stroke: lineColor,
     strokeWidth: isHighlighted,
     unit,

package/src/Graph/BasicComponents/Lines/StackedLines/index.tsx

@@ -4,15 +4,12 @@ import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
 
 import StackedAnchorPoint from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
-import useTickGraph from '../../../InteractiveComponents/AnchorPoint/useTickGraph';
 import { getFillColor } from '../../../common';
 import { getTime } from '../../../timeSeries';
 import { Line, TimeValue } from '../../../timeSeries/models';
 
 interface Props {
   displayAnchor: boolean;
-  graphHeight: number;
-  graphWidth: number;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
@@ -24,15 +21,8 @@ const StackLines = ({
   lines,
   yScale,
   xScale,
-  displayAnchor,
-  graphHeight,
-  graphWidth
+  displayAnchor
 }: Props): JSX.Element => {
-  const { timeTick, positionX, positionY } = useTickGraph({
-    timeSeries,
-    xScale
-  });
-
   return (
     <Shape.AreaStack
       curve={Curve.curveLinear}
@@ -60,13 +50,9 @@ const StackLines = ({
               {displayAnchor && (
                 <StackedAnchorPoint
                   areaColor={areaColor}
-                  graphHeight={graphHeight}
-                  graphWidth={graphWidth}
                   lineColor={lineColor}
-                  positionX={positionX}
-                  positionY={positionY}
                   stackValues={stack as unknown as Array<StackValue>}
-                  timeTick={timeTick}
+                  timeSeries={timeSeries}
                   transparency={transparency}
                   xScale={xScale}
                   yScale={yScale}

package/src/Graph/BasicComponents/Lines/index.tsx

@@ -6,7 +6,7 @@ import { isNil } from 'ramda';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
-import { GlobalAreaLines } from '../../models';
+import { DisplayAnchor, GlobalAreaLines } from '../../models';
 import { getStackedYScale, getUnits, getYScale } from '../../timeSeries';
 import { Line, TimeValue } from '../../timeSeries/models';
 
@@ -21,7 +21,7 @@ import {
 } from './Threshold/models';
 
 interface Props extends GlobalAreaLines {
-  displayAnchor: boolean;
+  displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   height: number;
@@ -65,8 +65,9 @@ const Lines = ({
     rightScale
   });
 
+  const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
-    displayAnchor,
+    displayAnchor: displayGuidingLines,
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
@@ -76,6 +77,15 @@ const Lines = ({
 
   return (
     <g>
+      {displayGuidingLines && (
+        <GuidingLines
+          graphHeight={height}
+          graphWidth={width}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
       {(areaStackedLines?.display ?? true) && (
         <>
           {displayArea(stackedLinesData.lines) && (
@@ -108,15 +118,6 @@ const Lines = ({
         />
       )}
 
-      {displayAnchor && (
-        <GuidingLines
-          graphHeight={height}
-          graphWidth={width}
-          timeSeries={timeSeries}
-          xScale={xScale}
-        />
-      )}
-
       {displayAreaRegularLines
         ? regularLines.map(
             ({
@@ -143,7 +144,7 @@ const Lines = ({
 
               return (
                 <g key={metric}>
-                  {displayAnchor && (
+                  {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
                       lineColor={lineColor}

package/src/Graph/BasicComponents/useFilterLines.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 import { useAtom } from 'jotai';
-import { equals, propEq, reject } from 'ramda';
+import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
 import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../timeSeries/models';
@@ -49,7 +49,9 @@ const useFilterLines = ({
       return;
     }
 
-    setLinesGraph(filterLines());
+    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
+
+    setLinesGraph(sortedLines);
   }, [lines, displayThreshold]);
 
   return { displayedLines, newLines: linesGraph ?? lines };

package/src/Graph/Graph.tsx

@@ -8,11 +8,13 @@ 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';
@@ -26,7 +28,6 @@ import {
 } from './models';
 import { getLeftScale, getRightScale, getXScale } from './timeSeries';
 import { useIntersection } from './useGraphIntersection';
-import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
 
 interface Props extends GraphProps {
   graphData: Data;
@@ -42,7 +43,7 @@ const Graph = ({
   width,
   shapeLines,
   axis,
-  displayAnchor = true,
+  displayAnchor,
   loading,
   zoomPreview,
   graphInterval,
@@ -119,7 +120,7 @@ const Graph = ({
   return (
     <>
       <Header
-        displayTimeTick={displayAnchor}
+        displayTimeTick={displayAnchor?.displayGuidingLines ?? true}
         header={header}
         timeSeries={timeSeries}
         title={title}
@@ -185,10 +186,23 @@ const Graph = ({
           {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}
+              displayAnchor={displayAnchor?.displayGuidingLines ?? true}
               lines={newLines}
               renderExtraComponent={legend?.renderExtraComponent}
               timeSeries={timeSeries}

package/src/Graph/Header/index.tsx

@@ -28,12 +28,14 @@ const Header = ({
   const { classes } = useStyles();
   const { toDateTime } = useLocaleDateTimeFormat();
 
-  const { timeTick } = useTickGraph({
+  const { tickAxisBottom } = useTickGraph({
     timeSeries,
     xScale
   });
   const time =
-    displayTimeTick && !isNil(timeTick) ? toDateTime(timeTick) : null;
+    displayTimeTick && !isNil(tickAxisBottom)
+      ? toDateTime(tickAxisBottom)
+      : null;
 
   const displayTitle = header?.displayTitle ?? true;
 

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

@@ -0,0 +1,52 @@
+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
+    }
+  ) => ({
+    tooltipAxisBottom: {
+      backgroundColor: theme.palette.background.listingHeader,
+      color: theme.palette.common.white,
+      left: tooltipLeftAxisX ?? 0,
+      minWidth: theme.spacing(5.5),
+      position: 'absolute',
+      textAlign: 'center',
+      top: tooltipTopAxisX ?? 0
+    },
+    tooltipAxisLeftY: {
+      backgroundColor: theme.palette.background.listingHeader,
+      color: theme.palette.common.white,
+      left: tooltipLeftAxisYLeft ?? 0,
+      minWidth: theme.spacing(3),
+      position: 'absolute',
+      textAlign: 'center',
+      top: tooltipTopAxisYLeft ?? 0
+    },
+    tooltipLeftAxisRightY: {
+      backgroundColor: theme.palette.background.listingHeader,
+      color: theme.palette.common.white,
+      left: tooltipLeftAxisYRight ?? 0,
+      minWidth: theme.spacing(3),
+      position: 'absolute',
+      textAlign: 'center',
+      top: tooltipTopAxisYRight ?? 0
+    }
+  })
+);

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

@@ -2,26 +2,31 @@ import { Shape } from '@visx/visx';
 
 import { grey } from '@mui/material/colors';
 
-import useTickGraph from './useTickGraph';
 import { GuidingLines } from './models';
+import useTickGraph from './useTickGraph';
 
 const GuidingLines = ({
   timeSeries,
   xScale,
   graphHeight,
   graphWidth
-}: GuidingLines): JSX.Element => {
+}: 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="5,2"
         strokeWidth={1}
         to={{ x: positionX, y: graphHeight }}
       />
@@ -29,6 +34,7 @@ const GuidingLines = ({
         from={{ x: 0, y: positionY }}
         pointerEvents="none"
         stroke={grey[400]}
+        strokeDasharray="5,2"
         strokeWidth={1}
         to={{ x: graphWidth, y: positionY }}
       />

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

@@ -40,7 +40,7 @@ const RegularAnchorPoint = ({
   transparency,
   lineColor
 }: Props): JSX.Element | null => {
-  const { timeTick } = useTickGraph({
+  const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
     xScale
   });

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

@@ -2,24 +2,27 @@ 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 {
   areaColor: string;
-  graphHeight: number;
-  graphWidth: number;
   lineColor: string;
-  positionX?: number;
-  positionY?: number;
   stackValues: Array<StackValue>;
-  timeTick: Date | null;
+  timeSeries: Array<TimeValue>;
   transparency: number;
   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: StackValue): string =>
@@ -34,7 +37,7 @@ const getYAnchorPoint = ({
   timeTick,
   stackValues,
   yScale
-}: Pick<Props, 'timeTick' | 'stackValues' | 'yScale'>): number => {
+}: GetYAnchorPoint): number => {
   const index = bisectDate(getStackedDates(stackValues), timeTick);
   const timeValue = stackValues[index];
 
@@ -45,12 +48,16 @@ const StackedAnchorPoint = ({
   xScale,
   yScale,
   stackValues,
-  timeTick,
+  timeSeries,
   areaColor,
   transparency,
-  lineColor,
-  ...rest
+  lineColor
 }: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
   if (isNil(timeTick)) {
     return null;
   }
@@ -73,7 +80,6 @@ const StackedAnchorPoint = ({
       transparency={transparency}
       x={xAnchorPoint}
       y={yAnchorPoint}
-      {...rest}
     />
   );
 };

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

@@ -0,0 +1,68 @@
+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 } = useStyles({
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipLeftAxisYRight,
+    tooltipTopAxisX,
+    tooltipTopAxisYLeft,
+    tooltipTopAxisYRight
+  });
+
+  return (
+    <>
+      {tooltipDataAxisYLeft && (
+        <Paper className={classes.tooltipAxisLeftY}>
+          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
+        </Paper>
+      )}
+      {tooltipDataAxisX && (
+        <Paper className={classes.tooltipAxisBottom}>
+          <Typography variant="caption">{tooltipDataAxisX}</Typography>
+        </Paper>
+      )}
+      {tooltipDataAxisYRight && (
+        <Paper className={classes.tooltipLeftAxisRightY}>
+          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
+        </Paper>
+      )}
+    </>
+  );
+};
+
+export default TooltipAnchorPoint;

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;
@@ -37,3 +37,26 @@ export interface GetYAnchorPoint {
   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;