@centreon/ui 23.10.50 → 23.10.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.50",
+  "version": "23.10.52",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 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: {

package/src/Graph/index.tsx

@@ -1,6 +1,6 @@
 import { MutableRefObject, useRef } from 'react';
 
-import { Responsive } from '@visx/visx';
+import { Curve, Responsive } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -14,16 +14,19 @@ import Graph from './Graph';
 import LoadingSkeleton from './LoadingSkeleton';
 import { GlobalAreaLines, GraphData, GraphProps, LegendModel } from './models';
 import useGraphData from './useGraphData';
+import { CurveType } from './BasicComponents/Lines/models';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
 dayjs.extend(timezonePlugin);
 
 interface Props extends Partial<GraphProps> {
+  curve?: CurveType;
   data?: GraphData;
   end: string;
   legend: LegendModel;
   loading: boolean;
+  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
 }
@@ -43,7 +46,9 @@ const WrapperGraph = ({
   tooltip,
   annotationEvent,
   legend,
-  header
+  header,
+  curve = Curve.curveLinear,
+  marginBottom = 0
 }: Props): JSX.Element | null => {
   const { adjustedData } = useGraphData({ data, end, start });
   const graphRef = useRef<HTMLDivElement | null>(null);
@@ -52,36 +57,43 @@ const WrapperGraph = ({
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
-        graphHeight={height}
+        graphHeight={height || 200}
       />
     );
   }
 
   return (
-    <div ref={graphRef as MutableRefObject<HTMLDivElement>}>
+    <div
+      ref={graphRef as MutableRefObject<HTMLDivElement>}
+      style={{ height: '100%', width: '100%' }}
+    >
       <Responsive.ParentSize>
         {({
           height: responsiveHeight,
           width: responsiveWidth
-        }): JSX.Element => (
-          <Graph
-            annotationEvent={annotationEvent}
-            axis={axis}
-            displayAnchor={displayAnchor}
-            graphData={adjustedData}
-            graphInterval={{ end, start }}
-            graphRef={graphRef}
-            header={header}
-            height={height ?? responsiveHeight}
-            legend={legend}
-            loading={loading}
-            shapeLines={shapeLines}
-            timeShiftZones={timeShiftZones}
-            tooltip={tooltip}
-            width={width ?? responsiveWidth}
-            zoomPreview={zoomPreview}
-          />
-        )}
+        }): JSX.Element => {
+          return (
+            <Graph
+              annotationEvent={annotationEvent}
+              axis={axis}
+              curve={curve}
+              displayAnchor={displayAnchor}
+              graphData={adjustedData}
+              graphInterval={{ end, start }}
+              graphRef={graphRef}
+              header={header}
+              height={height || responsiveHeight}
+              legend={legend}
+              loading={loading}
+              marginBottom={marginBottom}
+              shapeLines={shapeLines}
+              timeShiftZones={timeShiftZones}
+              tooltip={tooltip}
+              width={width ?? responsiveWidth}
+              zoomPreview={zoomPreview}
+            />
+          );
+        }}
       </Responsive.ParentSize>
     </div>
   );

package/src/Graph/models.ts

@@ -91,7 +91,7 @@ export interface GraphProps {
   axis?: Axis;
   displayAnchor?: DisplayAnchor;
   header?: GraphHeader;
-  height?: number;
+  height?: number | null;
   loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -37,6 +37,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
+  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -55,6 +56,7 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    queryKey,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -89,10 +91,16 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
+      getQueryKey: () => [
+        `autocomplete-${queryKey || props.label}`,
+        page,
+        searchParameter
+      ],
       isPaginated: true,
       queryOptions: {
+        cacheTime: 0,
         enabled: false,
+        staleTime: 0,
         suspense: false
       }
     });

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -34,12 +34,17 @@ export interface Props
       'multiple'
     > {
   disableSortedOptions?: boolean;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -52,7 +57,7 @@ const MultiAutocompleteField = ({
           root: classes.tag
         }}
         key={option.id}
-        label={option.name}
+        label={getTagLabel(option)}
         size="medium"
         {...getTagProps({ index })}
       />
@@ -84,7 +89,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{option.name}</Option>
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
       renderTags={renderTags}

package/src/Panel/index.tsx

@@ -226,7 +226,9 @@ const Panel = React.forwardRef(
               className={classes.contentContainer}
               ref={ref as React.RefObject<HTMLDivElement>}
             >
-              <div className={classes.content}>{selectedTab}</div>
+              <div className={classes.content} id="panel-content">
+                {selectedTab}
+              </div>
             </div>
           </div>
         </Paper>

package/src/api/useGraphQuery/index.ts

@@ -0,0 +1,92 @@
+import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
+import dayjs from 'dayjs';
+
+import { GraphData, useFetchQuery } from '../..';
+
+import { ServiceMetric } from './models';
+
+interface UseMetricsQueryProps {
+  baseEndpoint: string;
+  metrics: Array<ServiceMetric>;
+  timePeriod?: TimePeriod;
+}
+
+interface UseMetricsQueryState {
+  end: string;
+  graphData: GraphData | undefined;
+  isGraphLoading: boolean;
+  isMetricIdsEmpty: boolean;
+  start: string;
+}
+
+enum TimePeriod {
+  lastDay = 'last_day'
+}
+
+const getStartEndFromTimePeriod = (
+  timePeriod: TimePeriod
+): { end: string; start: string } => {
+  return cond([
+    [
+      T,
+      always({
+        end: dayjs().toISOString(),
+        start: dayjs().subtract(1, 'day').toISOString()
+      })
+    ]
+  ])(timePeriod);
+};
+
+interface PerformanceGraphData extends Omit<GraphData, 'global'> {
+  base: number;
+}
+
+const useGraphQuery = ({
+  metrics,
+  baseEndpoint,
+  timePeriod = TimePeriod.lastDay
+}: UseMetricsQueryProps): UseMetricsQueryState => {
+  const metricIds = pipe(
+    pluck('metrics'),
+    flatten,
+    pluck('id'),
+    join(',')
+  )(metrics);
+
+  const { end, start } = getStartEndFromTimePeriod(timePeriod);
+
+  const {
+    data: graphData,
+    isFetching,
+    isLoading
+  } = useFetchQuery<PerformanceGraphData>({
+    getEndpoint: () =>
+      `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`,
+    getQueryKey: () => ['graph', metricIds],
+    queryOptions: {
+      enabled: !isEmpty(metricIds),
+      suspense: false
+    }
+  });
+
+  const formattedGraphData = graphData
+    ? {
+        global: {
+          base: graphData.base,
+          title: ''
+        },
+        metrics: graphData.metrics,
+        times: graphData.times
+      }
+    : undefined;
+
+  return {
+    end,
+    graphData: formattedGraphData,
+    isGraphLoading: isFetching || (isLoading && !isEmpty(metricIds)),
+    isMetricIdsEmpty: isEmpty(metricIds),
+    start
+  };
+};
+
+export default useGraphQuery;

package/src/api/useGraphQuery/models.ts

@@ -0,0 +1,12 @@
+interface NamedEntity {
+  id: number;
+  name: string;
+}
+
+interface Metric extends NamedEntity {
+  unit: string;
+}
+
+export interface ServiceMetric extends NamedEntity {
+  metrics: Array<Metric>;
+}

package/src/components/ItemComposition/Item.tsx

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+
+import { IconButton } from '..';
+
+import { useItemStyles } from './ItemComposition.styles';
+
+type Props = {
+  children: Array<ReactElement>;
+  className?: string;
+  labelDelete: string;
+  onDeleteItem: () => void;
+};
+
+export const Item = ({
+  onDeleteItem,
+  children,
+  labelDelete,
+  className
+}: Props): JSX.Element => {
+  const { classes, cx } = useItemStyles();
+
+  return (
+    <div className={classes.itemContainer}>
+      <div className={cx(classes.itemContent, className)}>{children}</div>
+      <IconButton
+        aria-label={labelDelete}
+        data-testid={labelDelete}
+        icon={<CloseIcon />}
+        size="small"
+        variant="ghost"
+        onClick={onDeleteItem}
+      />
+    </div>
+  );
+};

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react/no-array-index-key */
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+
+import { SelectField } from '../..';
+
+import { ItemComposition } from '.';
+
+const meta: Meta<typeof ItemComposition> = {
+  component: ItemComposition
+};
+
+export default meta;
+type Story = StoryObj<typeof ItemComposition>;
+
+const stub = (): void => undefined;
+
+export const Default: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <Typography>Item 1</Typography>
+        <Typography>Item 2</Typography>
+      </ItemComposition.Item>
+    )),
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    children: [],
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};
+
+const options = [
+  {
+    id: 1,
+    name: 'Test select 1'
+  },
+  {
+    id: 2,
+    name: 'Test select 2'
+  },
+  {
+    id: 3,
+    name: 'Test select 3'
+  }
+];
+
+export const WithSelectInputs: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <SelectField
+          dataTestId="select 1"
+          label="select 1"
+          options={options}
+          selectedOptionId={1}
+          onChange={stub}
+        />
+        <SelectField
+          dataTestId="select 2"
+          label="select 2"
+          options={options}
+          selectedOptionId={2}
+          onChange={stub}
+        />
+      </ItemComposition.Item>
+    )),
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useItemCompositionStyles = makeStyles()((theme) => ({
+  itemCompositionContainer: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    width: '100%'
+  }
+}));
+
+export const useItemStyles = makeStyles()((theme) => ({
+  itemContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
+    width: '100%'
+  },
+  itemContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%'
+  }
+}));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+
+import { Button } from '..';
+
+import { useItemCompositionStyles } from './ItemComposition.styles';
+
+type Props = {
+  addbuttonDisabled?: boolean;
+  children: Array<ReactElement>;
+  labelAdd: string;
+  onAddItem: () => void;
+};
+
+export const ItemComposition = ({
+  onAddItem,
+  children,
+  labelAdd,
+  addbuttonDisabled
+}: Props): JSX.Element => {
+  const { classes } = useItemCompositionStyles();
+
+  return (
+    <div className={classes.itemCompositionContainer}>
+      {children}
+      <Button
+        aria-label={labelAdd}
+        data-testid={labelAdd}
+        disabled={addbuttonDisabled}
+        icon={<AddIcon />}
+        iconVariant="start"
+        size="small"
+        variant="ghost"
+        onClick={onAddItem}
+      >
+        {labelAdd}
+      </Button>
+    </div>
+  );
+};

package/src/components/ItemComposition/index.ts

@@ -0,0 +1,6 @@
+import { ItemComposition as ItemCompositionRoot } from './ItemComposition';
+import { Item } from './Item';
+
+export const ItemComposition = Object.assign(ItemCompositionRoot, {
+  Item
+});

package/src/components/Modal/Modal.styles.ts

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
       width: '400px'
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
-      maxWidth: '1200px',
+      maxWidth: '1400px',
       width: 'calc(100% - 64px)'
     }
   },

package/src/components/index.ts

@@ -7,3 +7,4 @@ export * from './Layout';
 export * from './Tooltip';
 export * from './Menu';
 export * from './List';
+export * from './ItemComposition';

package/src/index.ts

@@ -123,6 +123,7 @@ export type {
 export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
+export { default as useGraphQuery } from './api/useGraphQuery';
 export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
@@ -143,3 +144,5 @@ export type { ResponseError, CatchErrorProps } from './api/customFetch';
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';
+export { default as Graph } from './Graph';
+export type { GraphData } from './Graph/models';

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

@@ -1,58 +0,0 @@
-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
-    }
-  ) => ({
-    tooltipAxis: {
-      '& > span': {
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit'
-      },
-      backgroundColor: theme.palette.background.tooltip,
-      border: 'unset',
-      borderRadius: theme.spacing(0.25),
-      color: theme.palette.primary.contrastText,
-      fontSize: '10px',
-      fontWeight: 500,
-      letterSpacing: '0.15px',
-      lineHeight: '100%',
-      padding: theme.spacing(0.375, 0.5),
-      position: 'absolute',
-      textAlign: 'center',
-      transform: 'translate(-50%, -50%)',
-      transformOrigin: 'center center',
-      transition: 'unset'
-    },
-    tooltipAxisBottom: {
-      left: tooltipLeftAxisX ?? 0,
-      top: tooltipTopAxisX ?? 0
-    },
-    tooltipAxisLeftY: {
-      left: tooltipLeftAxisYLeft ?? 0,
-      top: tooltipTopAxisYLeft ?? 0
-    },
-    tooltipLeftAxisRightY: {
-      left: tooltipLeftAxisYRight ?? 0,
-      top: tooltipTopAxisYRight ?? 0
-    }
-  })
-);