@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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.21",
+  "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

@@ -3,9 +3,10 @@ import { MutableRefObject } from 'react';
 import { ScaleLinear } from 'd3-scale';
 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';
 
@@ -20,7 +21,7 @@ import {
 } from './Threshold/models';
 
 interface Props extends GlobalAreaLines {
-  displayAnchor: boolean;
+  displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   height: number;
@@ -64,8 +65,9 @@ const Lines = ({
     rightScale
   });
 
+  const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
-    displayAnchor,
+    displayAnchor: displayGuidingLines,
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
@@ -75,6 +77,15 @@ const Lines = ({
 
   return (
     <g>
+      {displayGuidingLines && (
+        <GuidingLines
+          graphHeight={height}
+          graphWidth={width}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
       {(areaStackedLines?.display ?? true) && (
         <>
           {displayArea(stackedLinesData.lines) && (
@@ -133,11 +144,9 @@ const Lines = ({
 
               return (
                 <g key={metric}>
-                  {displayAnchor && (
+                  {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
-                      graphHeight={height}
-                      graphWidth={width}
                       lineColor={lineColor}
                       metric={metric}
                       timeSeries={timeSeries}

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/{icons → Icons}/Downtime.tsx

@@ -1,6 +1,6 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-import { ReactComponent as IconDowntime } from './downtime.icon.svg';
+import { ReactComponent as IconDowntime } from '../../@assets/icons/downtime.icon.svg';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
   <SvgIcon component={IconDowntime} {...props} />

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

@@ -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="5,2"
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="5,2"
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </>
+  );
+};
+
+export default GuidingLines;

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

@@ -5,19 +5,15 @@ import { bisectDate, getDates } from '../../timeSeries';
 import { TimeValue } from '../../timeSeries/models';
 
 import useTickGraph from './useTickGraph';
+import { GetYAnchorPoint } from './models';
 
 import AnchorPoint from '.';
 
 interface Props {
   areaColor: string;
-  graphHeight: number;
-  graphWidth: number;
   lineColor: string;
   metric: string;
-  positionX?: number;
-  positionY?: number;
   timeSeries: Array<TimeValue>;
-  timeTick?: Date;
   transparency: number;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -28,7 +24,7 @@ const getYAnchorPoint = ({
   timeSeries,
   yScale,
   metric
-}: Pick<Props, 'timeTick' | 'timeSeries' | 'yScale' | 'metric'>): number => {
+}: GetYAnchorPoint): number => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
@@ -42,10 +38,9 @@ const RegularAnchorPoint = ({
   timeSeries,
   areaColor,
   transparency,
-  lineColor,
-  ...rest
+  lineColor
 }: Props): JSX.Element | null => {
-  const { timeTick, positionX, positionY } = useTickGraph({
+  const { tickAxisBottom: timeTick } = useTickGraph({
     timeSeries,
     xScale
   });
@@ -71,12 +66,9 @@ const RegularAnchorPoint = ({
     <AnchorPoint
       areaColor={areaColor}
       lineColor={lineColor}
-      positionX={positionX}
-      positionY={positionY}
       transparency={transparency}
       x={xAnchorPoint}
       y={yAnchorPoint}
-      {...rest}
     />
   );
 };

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/index.tsx

@@ -1,14 +1,6 @@
-import { Shape } from '@visx/visx';
-
-import { grey } from '@mui/material/colors';
-
 interface Props {
   areaColor: string;
-  graphHeight: number;
-  graphWidth: number;
   lineColor: string;
-  positionX?: number;
-  positionY?: number;
   transparency: number;
   x: number;
   y: number;
@@ -19,37 +11,17 @@ const Point = ({
   lineColor,
   transparency,
   x,
-  y,
-  ...rest
+  y
 }: Props): JSX.Element => {
-  const { positionX, positionY, graphHeight, graphWidth } = rest;
-
   return (
-    <g>
-      <circle
-        cx={x}
-        cy={y}
-        fill={areaColor}
-        fillOpacity={(1 - transparency * 0.01).toString()}
-        r={3}
-        stroke={lineColor}
-      />
-
-      <Shape.Line
-        from={{ x: positionX, y: 0 }}
-        pointerEvents="none"
-        stroke={grey[400]}
-        strokeWidth={1}
-        to={{ x: positionX, y: graphHeight }}
-      />
-      <Shape.Line
-        from={{ x: 0, y: positionY }}
-        pointerEvents="none"
-        stroke={grey[400]}
-        strokeWidth={1}
-        to={{ x: graphWidth, y: positionY }}
-      />
-    </g>
+    <circle
+      cx={x}
+      cy={y}
+      fill={areaColor}
+      fillOpacity={(1 - transparency * 0.01).toString()}
+      r={3}
+      stroke={lineColor}
+    />
   );
 };