@centreon/ui 23.10.51 → 23.10.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.51",
+  "version": "23.10.53",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -102,7 +102,9 @@
   },
   "dependencies": {
     "@lexical/link": "0.11.3",
+    "@lexical/list": "^0.11.3",
     "@lexical/react": "0.11.3",
+    "@lexical/rich-text": "^0.11.3",
     "@lexical/selection": "0.11.3",
     "@lexical/utils": "0.11.3",
     "@visx/curve": "^2.1.0",

package/src/Dashboard/Layout.tsx

@@ -16,6 +16,7 @@ interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
   children: Array<JSX.Element>;
   displayGrid?: boolean;
+  isStatic?: boolean;
   layout: Array<T>;
 }
 
@@ -23,9 +24,10 @@ const Layout = <T extends Layout>({
   children,
   changeLayout,
   displayGrid,
-  layout
+  layout,
+  isStatic = false
 }: DashboardLayoutProps<T>): JSX.Element => {
-  const { classes } = useDashboardLayoutStyles();
+  const { classes } = useDashboardLayoutStyles(isStatic);
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
 

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

@@ -55,7 +55,7 @@ const Axes = ({
         numTicks={xTickCount}
         scale={xScale}
         tickFormat={formatAxisTick}
-        top={height}
+        top={height - 5}
       />
 
       {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}

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

@@ -1,15 +1,17 @@
 import { memo } from 'react';
 
-import { Curve, Shape } from '@visx/visx';
+import { 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 { CurveType } from '../models';
 
 interface Props {
   areaColor: string;
+  curve: CurveType;
   filled: boolean;
   graphHeight: number;
   highlight?: boolean;
@@ -35,10 +37,11 @@ const RegularLine = ({
   xScale,
   areaColor,
   transparency,
-  graphHeight
+  graphHeight,
+  curve
 }: Props): JSX.Element => {
   const props = {
-    curve: Curve.curveLinear,
+    curve,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric]),
     opacity: 1,

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

@@ -1,4 +1,4 @@
-import { Curve, Shape } from '@visx/visx';
+import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { all, isNil, map, not, nth, path, pipe, prop } from 'ramda';
 
@@ -7,8 +7,10 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getFillColor } from '../../../common';
 import { getTime } from '../../../timeSeries';
 import { Line, TimeValue } from '../../../timeSeries/models';
+import { CurveType } from '../models';
 
 interface Props {
+  curve: CurveType;
   displayAnchor: boolean;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
@@ -21,11 +23,12 @@ const StackLines = ({
   lines,
   yScale,
   xScale,
-  displayAnchor
+  displayAnchor,
+  curve
 }: Props): JSX.Element => {
   return (
     <Shape.AreaStack
-      curve={Curve.curveLinear}
+      curve={curve}
       data={timeSeries}
       defined={(d): boolean => {
         return pipe(

package/src/Graph/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -1,9 +1,10 @@
-import { curveBasis } from '@visx/curve';
 import { Threshold } from '@visx/threshold';
 
 import { TimeValue } from '../../../timeSeries/models';
+import { CurveType } from '../models';
 
 interface Props {
+  curve: CurveType;
   fillAboveArea: string;
   fillBelowArea: string;
   fillOpacity?: number;
@@ -24,7 +25,8 @@ const BasicThreshold = ({
   fillOpacity = 0.1,
   id,
   fillAboveArea,
-  fillBelowArea
+  fillBelowArea,
+  curve
 }: Props): JSX.Element => {
   return (
     <Threshold
@@ -38,7 +40,7 @@ const BasicThreshold = ({
       }}
       clipAboveTo={0}
       clipBelowTo={graphHeight}
-      curve={curveBasis}
+      curve={curve}
       data={timeSeries}
       id={id}
       x={getX}

package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -5,11 +5,13 @@ import { useTheme } from '@mui/material/styles';
 
 import { adjustGraphData } from '../../../helpers/index';
 import { GraphData, PatternOrientation } from '../../../models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props {
+  curve: CurveType;
   data: GraphData;
   graphHeight: number;
   id: string;
@@ -26,7 +28,8 @@ const ThresholdWithPatternLines = ({
   leftScale,
   rightScale,
   xScale,
-  id
+  id,
+  curve
 }: Props): JSX.Element | null => {
   const theme = useTheme();
 
@@ -47,6 +50,7 @@ const ThresholdWithPatternLines = ({
   return (
     <>
       <BasicThreshold
+        curve={curve}
         fillAboveArea={"url('#lines')"}
         fillBelowArea={"url('#lines')"}
         fillOpacity={0.8}

package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx

@@ -4,10 +4,12 @@ import { LinePath } from '@visx/shape';
 import { useTheme } from '@mui/material/styles';
 
 import { TimeValue } from '../../../timeSeries/models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 
 interface Props {
+  curve: CurveType;
   getX: (timeValue: TimeValue) => number;
   getY0Variation: (timeValue: TimeValue) => number;
   getY1Variation: (timeValue: TimeValue) => number;
@@ -24,7 +26,8 @@ const ThresholdWithVariation = ({
   getY1Variation,
   graphHeight,
   lineColorY1,
-  lineColorY0
+  lineColorY0,
+  curve
 }: Props): JSX.Element => {
   const theme = useTheme();
 
@@ -40,6 +43,7 @@ const ThresholdWithVariation = ({
   return (
     <>
       <BasicThreshold
+        curve={curve}
         fillAboveArea={lineColorY1}
         fillBelowArea={lineColorY0}
         getX={getX}

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

@@ -7,6 +7,7 @@ import {
   VariationThreshold
 } from '../../../models';
 import { TimeValue } from '../../../timeSeries/models';
+import { CurveType } from '../models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';
@@ -16,6 +17,7 @@ import { WrapperThresholdLinesModel } from './models';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
+  curve: CurveType;
   graphHeight: number;
   timeSeries: Array<TimeValue>;
 }
@@ -27,7 +29,8 @@ const WrapperThresholdLines = ({
   lines,
   rightScale,
   timeSeries,
-  xScale
+  xScale,
+  curve
 }: Props): JSX.Element | null => {
   const data = useScaleThreshold({
     areaThresholdLines,
@@ -44,6 +47,7 @@ const WrapperThresholdLines = ({
   const { getX, getY0, getY1, lineColorY0, lineColorY1, ...rest } = data;
 
   const commonProps = {
+    curve,
     fillAboveArea: lineColorY0,
     fillBelowArea: lineColorY1,
     getX,

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

@@ -19,8 +19,10 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
+import { CurveType } from './models';
 
 interface Props extends GlobalAreaLines {
+  curve: CurveType;
   displayAnchor?: DisplayAnchor;
   displayedLines: Array<Line>;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
@@ -44,7 +46,8 @@ const Lines = ({
   displayedLines,
   areaThresholdLines,
   areaStackedLines,
-  areaRegularLines
+  areaRegularLines,
+  curve
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -67,6 +70,7 @@ const Lines = ({
 
   const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
   const commonStackedLinesProps = {
+    curve,
     displayAnchor: displayGuidingLines,
     graphHeight: height,
     graphSvgRef,
@@ -157,6 +161,7 @@ const Lines = ({
                   )}
                   <RegularLine
                     areaColor={areaColor}
+                    curve={curve}
                     filled={filled}
                     graphHeight={height}
                     highlight={highlight}

package/src/Graph/BasicComponents/Lines/models.ts

@@ -1,4 +1,5 @@
 import { ScaleLinear } from 'd3-scale';
+import { curveBasis } from '@visx/curve';
 
 import { GraphData } from '../../models';
 import { Line, TimeValue } from '../../timeSeries/models';
@@ -40,3 +41,5 @@ export interface Shape {
   areaStackedLines: AreaStackedLines;
   areaThreshold: AreaThreshold;
 }
+
+export type CurveType = typeof curveBasis;

package/src/Graph/Graph.tsx

@@ -28,12 +28,15 @@ import {
 } from './models';
 import { getLeftScale, getRightScale, getXScale } from './timeSeries';
 import { useIntersection } from './useGraphIntersection';
+import { CurveType } from './BasicComponents/Lines/models';
 
 interface Props extends GraphProps {
+  curve: CurveType;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
+  marginBottom: number;
   shapeLines?: GlobalAreaLines;
 }
 
@@ -52,15 +55,26 @@ const Graph = ({
   tooltip,
   legend,
   graphRef,
-  header
+  header,
+  curve,
+  marginBottom
 }: Props): JSX.Element => {
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const { classes } = useStyles();
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
+  const legendRef = useRef<HTMLDivElement | null>(null);
+
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
-  const graphHeight = height > 0 ? height - margin.top - margin.bottom : 0;
+  const graphHeight =
+    (height || 0) > 0
+      ? (height || 0) -
+        margin.top -
+        margin.bottom -
+        marginBottom -
+        (legendRef.current?.getBoundingClientRect().height || 0)
+      : 0;
 
   const { title, timeSeries, baseAxis, lines } = graphData;
 
@@ -83,7 +97,7 @@ const Graph = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        valueGraphHeight: graphHeight
+        valueGraphHeight: graphHeight - 35
       }),
     [displayedLines, timeSeries, graphHeight]
   );
@@ -93,7 +107,7 @@ const Graph = ({
       getRightScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        valueGraphHeight: graphHeight
+        valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
   );
@@ -128,11 +142,15 @@ const Graph = ({
       />
       <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
         <div className={classes.container}>
-          <LoadingProgress display={loading} height={height} width={width} />
-          <svg height={height} ref={graphSvgRef} width="100%">
+          <LoadingProgress
+            display={loading}
+            height={graphHeight}
+            width={width}
+          />
+          <svg height={graphHeight + margin.top} ref={graphSvgRef} width="100%">
             <Group.Group left={margin.left} top={margin.top}>
               <Grids
-                height={graphHeight}
+                height={graphHeight - margin.top}
                 leftScale={leftScale}
                 width={graphWidth}
                 xScale={xScale}
@@ -145,7 +163,7 @@ const Graph = ({
                   ...axis
                 }}
                 graphInterval={graphInterval}
-                height={graphHeight}
+                height={graphHeight - margin.top}
                 leftScale={leftScale}
                 rightScale={rightScale}
                 width={graphWidth}
@@ -153,10 +171,11 @@ const Graph = ({
               />
 
               <Lines
+                curve={curve}
                 displayAnchor={displayAnchor}
                 displayedLines={displayedLines}
                 graphSvgRef={graphSvgRef}
-                height={graphHeight}
+                height={graphHeight - margin.top}
                 leftScale={leftScale}
                 rightScale={rightScale}
                 timeSeries={timeSeries}
@@ -189,7 +208,7 @@ const Graph = ({
           {(displayAnchor?.displayTooltipsGuidingLines ?? true) && (
             <TooltipAnchorPoint
               baseAxis={baseAxis}
-              graphHeight={graphHeight}
+              graphHeight={graphHeight - 35}
               graphWidth={graphWidth}
               leftScale={leftScale}
               lines={displayedLines}
@@ -198,18 +217,19 @@ const Graph = ({
               xScale={xScale}
             />
           )}
-
-          {displayLegend && (
-            <Legend
-              base={baseAxis}
-              displayAnchor={displayAnchor?.displayGuidingLines ?? true}
-              lines={newLines}
-              renderExtraComponent={legend?.renderExtraComponent}
-              timeSeries={timeSeries}
-            />
-          )}
         </div>
       </ClickAwayListener>
+      {displayLegend && (
+        <div ref={legendRef}>
+          <Legend
+            base={baseAxis}
+            displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+            lines={newLines}
+            renderExtraComponent={legend?.renderExtraComponent}
+            timeSeries={timeSeries}
+          />
+        </div>
+      )}
     </>
   );
 };

package/src/Graph/Header/index.tsx

@@ -43,17 +43,17 @@ const Header = ({
     Component: (
       <div className={classes.header}>
         <div />
-        {displayTitle && (
-          <div>
+        <div>
+          {displayTitle && (
             <Typography align="center" variant="body1">
               {title}
             </Typography>
+          )}
 
-            <Typography align="center" style={{ height: 20 }} variant="body1">
-              {time}
-            </Typography>
-          </div>
-        )}
+          <Typography align="center" style={{ height: 20 }} variant="body1">
+            {time}
+          </Typography>
+        </div>
         {header?.extraComponent}
       </div>
     ),

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

@@ -1,10 +1,15 @@
-import Paper from '@mui/material/Paper';
-import { Typography } from '@mui/material';
+import { Tooltip } from '@visx/visx';
+
+import { Typography, useTheme } from '@mui/material';
 
 import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { useStyles } from './AnchorPoint.styles';
 import { TooltipAnchorModel } from './models';
 
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
 const TooltipAnchorPoint = ({
   timeSeries,
   xScale,
@@ -15,12 +20,13 @@ const TooltipAnchorPoint = ({
   lines,
   baseAxis
 }: TooltipAnchorModel): JSX.Element => {
+  const theme = useTheme();
+
   const {
     tooltipDataAxisX,
     tooltipDataAxisYLeft,
     tooltipLeftAxisX,
     tooltipLeftAxisYLeft,
-    tooltipTopAxisX,
     tooltipTopAxisYLeft,
     tooltipDataAxisYRight,
     tooltipTopAxisYRight,
@@ -35,33 +41,53 @@ const TooltipAnchorPoint = ({
     timeSeries,
     xScale
   });
-  const { classes, cx } = useStyles({
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  });
+
+  const cardStyles = {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: theme.spacing(0.25, 0.5)
+  };
 
   return (
     <>
-      {tooltipDataAxisYLeft && (
-        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisLeftY)}>
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Paper>
-      )}
       {tooltipDataAxisX && (
-        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisBottom)}>
+        <Tooltip.Tooltip
+          left={tooltipLeftAxisX}
+          style={{
+            ...baseStyles,
+            ...cardStyles,
+            transform: 'translateX(-70%)'
+          }}
+          top={0}
+        >
           <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Paper>
+        </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 && (
-        <Paper
-          className={cx(classes.tooltipAxis, classes.tooltipLeftAxisRightY)}
+        <Tooltip.Tooltip
+          left={tooltipLeftAxisYRight}
+          style={{
+            ...baseStyles,
+            ...cardStyles,
+            transform: 'translateX(-70%)  translateY(-80%)'
+          }}
+          top={tooltipTopAxisYRight}
         >
           <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Paper>
+        </Tooltip.Tooltip>
       )}
     </>
   );

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

@@ -1,20 +1,22 @@
+import { alpha } from '@mui/system';
+
 interface Props {
   lineColor: string;
   x: number;
   y: number;
 }
 
-const Point = ({ lineColor, x, y }: Props): JSX.Element => {
-  return (
-    <circle
-      cx={x}
-      cy={y}
-      fill="white"
-      r={4}
-      stroke={lineColor}
-      strokeWidth={2}
-    />
-  );
-};
+const Point = ({ lineColor, x, y }: Props): JSX.Element => (
+  <circle
+    fill={alpha(lineColor, 0.5)}
+    r={4}
+    stroke={lineColor}
+    strokeWidth={2}
+    style={{
+      transform: `translate(${x}px, ${y}px)`,
+      transition: 'transform 0.08s ease-out'
+    }}
+  />
+);
 
 export default Point;

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

@@ -53,7 +53,7 @@ const TimeShiftZone = ({
       className={classes.translationZone}
       fill={
         equals(directionHovered, direction)
-          ? alpha(theme.palette.common.white, 0.5)
+          ? alpha(theme.palette.background.paper, 0.2)
           : 'transparent'
       }
       height={graphHeight}

package/src/Graph/index.stories.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
+import { Curve } from '@visx/visx';
 
 import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -335,6 +336,15 @@ export const Graph: Story = {
   args: argumentsData
 };
 
+export const GraphWithStepCurve: Story = {
+  ...Template,
+  argTypes,
+  args: {
+    ...argumentsData,
+    curve: Curve.curveStep
+  }
+};
+
 export const GraphWithTimePeriod: Story = {
   ...WithTimePeriod,
   args: {