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

package/package.json

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

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

@@ -37,15 +37,13 @@ const RegularLine = ({
   transparency,
   graphHeight
 }: Props): JSX.Element => {
-  const isHighlighted = highlight ? 3 : 1;
-
   const props = {
     curve: Curve.curveLinear,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric]),
-    opacity: !highlight ? 1 : 3,
+    opacity: 1,
     stroke: lineColor,
-    strokeWidth: isHighlighted,
+    strokeWidth: !highlight ? 1 : 2,
     unit,
     x: (timeValue): number => xScale(getTime(timeValue)) as number,
     y: (timeValue): number => yScale(prop(metric, timeValue)) ?? null

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

@@ -21,31 +21,37 @@ export const useStyles = makeStyles<StylesProps>()(
       tooltipTopAxisYRight
     }
   ) => ({
-    tooltipAxisBottom: {
-      backgroundColor: theme.palette.background.listingHeader,
-      color: theme.palette.common.white,
-      left: tooltipLeftAxisX ?? 0,
-      minWidth: theme.spacing(5.5),
+    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: {
-      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

@@ -26,7 +26,7 @@ const GuidingLines = ({
         from={{ x: positionX, y: 0 }}
         pointerEvents="none"
         stroke={grey[400]}
-        strokeDasharray="5,2"
+        strokeDasharray="2 4"
         strokeWidth={1}
         to={{ x: positionX, y: graphHeight }}
       />
@@ -34,7 +34,7 @@ const GuidingLines = ({
         from={{ x: 0, y: positionY }}
         pointerEvents="none"
         stroke={grey[400]}
-        strokeDasharray="5,2"
+        strokeDasharray="2 4"
         strokeWidth={1}
         to={{ x: graphWidth, y: positionY }}
       />

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

@@ -35,7 +35,7 @@ const TooltipAnchorPoint = ({
     timeSeries,
     xScale
   });
-  const { classes } = useStyles({
+  const { classes, cx } = useStyles({
     tooltipLeftAxisX,
     tooltipLeftAxisYLeft,
     tooltipLeftAxisYRight,
@@ -47,17 +47,19 @@ const TooltipAnchorPoint = ({
   return (
     <>
       {tooltipDataAxisYLeft && (
-        <Paper className={classes.tooltipAxisLeftY}>
+        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisLeftY)}>
           <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
         </Paper>
       )}
       {tooltipDataAxisX && (
-        <Paper className={classes.tooltipAxisBottom}>
+        <Paper className={cx(classes.tooltipAxis, classes.tooltipAxisBottom)}>
           <Typography variant="caption">{tooltipDataAxisX}</Typography>
         </Paper>
       )}
       {tooltipDataAxisYRight && (
-        <Paper className={classes.tooltipLeftAxisRightY}>
+        <Paper
+          className={cx(classes.tooltipAxis, classes.tooltipLeftAxisRightY)}
+        >
           <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
         </Paper>
       )}

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

@@ -1,26 +1,18 @@
 interface Props {
-  areaColor: string;
   lineColor: string;
-  transparency: number;
   x: number;
   y: number;
 }
 
-const Point = ({
-  areaColor,
-  lineColor,
-  transparency,
-  x,
-  y
-}: Props): JSX.Element => {
+const Point = ({ lineColor, x, y }: Props): JSX.Element => {
   return (
     <circle
       cx={x}
       cy={y}
-      fill={areaColor}
-      fillOpacity={(1 - transparency * 0.01).toString()}
-      r={3}
+      fill="white"
+      r={4}
       stroke={lineColor}
+      strokeWidth={2}
     />
   );
 };

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

@@ -64,8 +64,8 @@ const useTooltipAnchorPoint = ({
 
     showTooltipAxisX({
       tooltipData: dataAxisX,
-      tooltipLeft: positionX + margin.left / 2,
-      tooltipTop: graphHeight + margin.top / 2
+      tooltipLeft: positionX + margin.left,
+      tooltipTop: graphHeight + margin.top
     });
   }, [positionX, positionY, tickAxisBottom]);
 
@@ -75,8 +75,8 @@ const useTooltipAnchorPoint = ({
     }
     showTooltipAxisYLeft({
       tooltipData: tickAxisLeft,
-      tooltipLeft: 40,
-      tooltipTop: positionY + margin.top / 2
+      tooltipLeft: margin.left,
+      tooltipTop: positionY + margin.top
     });
   }, [tickAxisLeft, positionX, positionY]);
 
@@ -86,8 +86,8 @@ const useTooltipAnchorPoint = ({
     }
     showTooltipAxisYRight({
       tooltipData: tickAxisRight,
-      tooltipLeft: graphWidth ? graphWidth + 40 : 0,
-      tooltipTop: positionY + margin.top / 2
+      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
+      tooltipTop: positionY + margin.top
     });
   }, [positionX, positionY, tickAxisRight]);
 

package/src/ThemeProvider/palettes.ts

@@ -18,8 +18,10 @@ declare module '@mui/material/styles' {
     background: {
       default: string;
       listingHeader: string;
+      panel: string;
       panelGroups: string;
       paper: string;
+      tooltip: string;
     };
     pending: {
       contrastText: string;
@@ -44,9 +46,12 @@ declare module '@mui/material/styles' {
   }
 
   interface TypeBackground {
+    default: string;
     listingHeader: string;
     panel: string;
     panelGroups: string;
+    paper: string;
+    tooltip: string;
   }
 }
 
@@ -84,7 +89,8 @@ export const lightPalette: PaletteOptions = {
     listingHeader: '#666666',
     panel: '#EDEDED',
     panelGroups: '#F5F5F5',
-    paper: '#FFFFFF'
+    paper: '#FFFFFF',
+    tooltip: '#434E5B'
   },
   divider: '#E3E3E3',
   error: {
@@ -155,7 +161,8 @@ export const darkPalette: PaletteOptions = {
     listingHeader: '#666666',
     panel: '#4a4a4a',
     panelGroups: '#252525',
-    paper: '#212121'
+    paper: '#212121',
+    tooltip: '#AAB4C0'
   },
   divider: '#666666',
   error: {