@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.12 → 23.10.18-MON-17793-create-graph-component-centreon-ui.13

package/package.json

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

package/src/Graph/Graph.styles.ts

@@ -31,6 +31,11 @@ const useStyles = makeStyles()((theme) => ({
     },
     fill: theme.palette.text.primary,
     position: 'relative'
+  },
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
   }
 }));
 

package/src/Graph/Graph.tsx

@@ -41,7 +41,6 @@ interface Props extends GraphProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
-  loading: boolean;
   shapeLines?: GlobalAreaLines;
 }
 
@@ -59,7 +58,8 @@ const Graph = ({
   annotationEvent,
   tooltip,
   legend,
-  graphRef
+  graphRef,
+  header
 }: Props): JSX.Element => {
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
@@ -231,6 +231,7 @@ const Graph = ({
     <>
       <Header
         displayTimeTick={displayTimeTick}
+        header={header}
         timeTick={timeTick}
         title={title}
       />

package/src/Graph/Header/index.tsx

@@ -4,8 +4,12 @@ import Typography from '@mui/material/Typography';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
+import { useStyles } from '../Graph.styles';
+import { HeaderGraph } from '../models';
+
 interface Props {
   displayTimeTick?: boolean;
+  header?: HeaderGraph;
   timeTick?: Date;
   title: string;
 }
@@ -13,22 +17,32 @@ interface Props {
 const Header = ({
   title,
   timeTick,
-  displayTimeTick = true
+  displayTimeTick = true,
+  header
 }: Props): JSX.Element => {
+  const { classes } = useStyles();
   const { toDateTime } = useLocaleDateTimeFormat();
   const time =
     displayTimeTick && !isNil(timeTick) ? toDateTime(timeTick) : null;
 
+  const displayTitle = header?.displayTitle ?? true;
+
   return (
-    <>
-      <Typography align="center" variant="body1">
-        {title}
-      </Typography>
-
-      <Typography align="center" style={{ height: 20 }} variant="body1">
-        {time}
-      </Typography>
-    </>
+    <div className={classes.header}>
+      <div />
+      {displayTitle && (
+        <div>
+          <Typography align="center" variant="body1">
+            {title}
+          </Typography>
+
+          <Typography align="center" style={{ height: 20 }} variant="body1">
+            {time}
+          </Typography>
+        </div>
+      )}
+      {header?.extraComponent}
+    </div>
   );
 };
 export default Header;

package/src/Graph/index.tsx

@@ -42,13 +42,19 @@ const WrapperGraph = ({
   timeShiftZones,
   tooltip,
   annotationEvent,
-  legend
+  legend,
+  header
 }: Props): JSX.Element | null => {
   const { adjustedData } = useGraphData({ data, end, start });
   const graphRef = useRef<HTMLDivElement | null>(null);
 
   if (loading || !adjustedData) {
-    return <LoadingSkeleton displayTitleSkeleton graphHeight={height} />;
+    return (
+      <LoadingSkeleton
+        displayTitleSkeleton={header?.displayTitle ?? true}
+        graphHeight={height}
+      />
+    );
   }
 
   return (
@@ -65,6 +71,7 @@ const WrapperGraph = ({
             graphData={{ ...adjustedData }}
             graphInterval={{ end, start }}
             graphRef={graphRef}
+            header={header}
             height={height ?? responsiveHeight}
             legend={legend}
             loading={loading}

package/src/Graph/models.ts

@@ -84,11 +84,18 @@ export interface AnnotationEvent {
   data?: Array<TimelineEvent>;
 }
 
+export interface HeaderGraph {
+  displayTitle?: boolean;
+  extraComponent?: ReactNode;
+}
+
 export interface GraphProps {
   anchorPoint?: AreaAnchorPoint;
   annotationEvent?: AnnotationEvent;
   axis?: Axis;
+  header?: HeaderGraph;
   height?: number;
+  loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;