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

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.25",
   "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/Graph.styles.ts

@@ -6,6 +6,9 @@ const useStyles = makeStyles()((theme) => ({
       '& .visx-axis-tick': {
         '& .visx-line': {
           stroke: theme.palette.text.primary
+        },
+        text: {
+          fill: theme.palette.text.primary
         }
       }
     },

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

@@ -10,11 +10,9 @@ import { GetYAnchorPoint } from './models';
 import AnchorPoint from '.';
 
 interface Props {
-  areaColor: string;
   lineColor: string;
   metric: string;
   timeSeries: Array<TimeValue>;
-  transparency: number;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
 }
@@ -36,8 +34,6 @@ const RegularAnchorPoint = ({
   yScale,
   metric,
   timeSeries,
-  areaColor,
-  transparency,
   lineColor
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
@@ -63,13 +59,7 @@ const RegularAnchorPoint = ({
   }
 
   return (
-    <AnchorPoint
-      areaColor={areaColor}
-      lineColor={lineColor}
-      transparency={transparency}
-      x={xAnchorPoint}
-      y={yAnchorPoint}
-    />
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
   );
 };
 

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

@@ -10,11 +10,9 @@ import useTickGraph from './useTickGraph';
 import AnchorPoint from '.';
 
 interface Props {
-  areaColor: string;
   lineColor: string;
   stackValues: Array<StackValue>;
   timeSeries: Array<TimeValue>;
-  transparency: number;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
 }
@@ -25,8 +23,7 @@ interface GetYAnchorPoint {
 }
 
 const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
-  const toTimeTick = (stackValue: StackValue): string =>
-    stackValue[2]?.data?.timeTick;
+  const toTimeTick = (stackValue): string => stackValue?.data?.timeTick;
 
   const toDate = (tick: string): Date => new Date(tick);
 
@@ -49,8 +46,6 @@ const StackedAnchorPoint = ({
   yScale,
   stackValues,
   timeSeries,
-  areaColor,
-  transparency,
   lineColor
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
@@ -74,13 +69,7 @@ const StackedAnchorPoint = ({
   }
 
   return (
-    <AnchorPoint
-      areaColor={areaColor}
-      lineColor={lineColor}
-      transparency={transparency}
-      x={xAnchorPoint}
-      y={yAnchorPoint}
-    />
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
   );
 };
 

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: {