Add new features to custom tooltip

src/containers/PerfherderGraphContainer/index.jsx

@@ -25,6 +25,7 @@ class PerfherderGraphContainer extends Component {
   state = {
     data: null,
     tooltipModel: null,
+    tooltipIsLocked: false,
     canvas: null,
     isLoading: false,
   };
@@ -43,9 +44,12 @@ class PerfherderGraphContainer extends Component {
       this.setState(prevState => {
         const { options } = prevState;
 
+        options.onClick = this.handleChartClick;
         options.tooltips.custom = function custom(tooltipModel) {
-          // eslint-disable-next-line no-underscore-dangle
-          self.setState({ tooltipModel, canvas: this._chart.canvas });
+          if (!self.state.tooltipIsLocked) {
+            // eslint-disable-next-line no-underscore-dangle
+            self.setState({ tooltipModel, canvas: this._chart.canvas });
+          }
         };
 
         return { ...prevState, options };
@@ -55,6 +59,12 @@ class PerfherderGraphContainer extends Component {
     }
   }
 
+  handleChartClick = () => {
+    this.setState(prevState => ({
+      tooltipIsLocked: !prevState.tooltipIsLocked,
+    }));
+  };
+
   render() {
     const { classes, title } = this.props;
     const {
@@ -64,6 +74,7 @@ class PerfherderGraphContainer extends Component {
       canvas,
       tooltipModel,
       isLoading,
+      tooltipIsLocked,
     } = this.state;
 
     return (
@@ -87,6 +98,7 @@ class PerfherderGraphContainer extends Component {
             tooltipModel={tooltipModel}
             series={options.series}
             canvas={canvas}
+            isLocked={tooltipIsLocked}
           />
         )}
       </div>

src/utils/chartJs/CustomTooltip.jsx

@@ -1,57 +1,85 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 
+const topAligned = {
+  '--trans-y': 'var(--tip-size)',
+  '&::before': { bottom: '100%', borderBottomColor: 'var(--bg-color)' },
+  '&.xright': {
+    '--trans-x': 'calc(-100% + 2 * var(--tip-size))',
+    '&::before': { right: 'var(--tip-size)' },
+  },
+  '&.xcenter': {
+    '--trans-x': '-50%',
+    '&::before': { left: 'calc(50% - var(--tip-size))' },
+  },
+  '&.xleft': {
+    '--trans-x': 'calc(-2 * var(--tip-size))',
+    '&::before': { left: 'var(--tip-size)' },
+  },
+};
 const styles = {
   tooltip: {
+    '--bg-color': 'rgba(0, 0, 0, .8)',
+    '--tip-size': '6px',
     position: 'absolute',
     padding: '6px',
-    background: 'rgba(0, 0, 0, .8)',
+    background: 'var(--bg-color)',
     color: 'white',
     borderRadius: '4px',
     pointerEvents: 'none',
+    transform: 'translate(var(--trans-x), var(--trans-y))',
+    '& a': {
+      pointerEvents: 'auto',
+    },
+    '&::before': {
+      position: 'absolute',
+      content: '""',
+      borderWidth: 'var(--tip-size)',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+    },
+    '&.ytop': {
+      ...topAligned,
+    },
+    '&.ycenter': {
+      '--trans-y': '-50%',
+      '&::before': { top: 'calc(50% - var(--tip-size))' },
+      '&.xright': {
+        '--trans-x': 'calc(-1 * (100% + var(--tip-size)))',
+        '&::before': { left: '100%', borderLeftColor: 'var(--bg-color)' },
+      },
+      '&.xleft': {
+        '--trans-x': 'var(--tip-size)',
+        '&::before': { right: '100%', borderRightColor: 'var(--bg-color)' },
+      },
+    },
+    '&.ybottom': {
+      ...topAligned,
+      '--trans-y': 'calc(-100% - var(--tip-size))',
+      '&::before': { top: '100%', borderTopColor: 'var(--bg-color)' },
+    },
   },
   tooltipKey: {
     display: 'inline-block',
     width: '10px',
     height: '10px',
     marginRight: '10px',
   },
+  lockMessage: {
+    color: '#ccc',
+  },
 };
 
 class CustomTooltip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.tooltip = React.createRef();
-    this.state = { width: 0, height: 0 };
-  }
-
-  componentDidMount() {
-    this.setState({
-      width: this.tooltip.current.clientWidth,
-      height: this.tooltip.current.clientHeight,
-    });
-  }
-
   render() {
-    const { classes, tooltipModel, series, canvas } = this.props;
+    const { classes, tooltipModel, series, canvas, isLocked } = this.props;
 
     if (tooltipModel.opacity === 0) return null;
 
-    let top = canvas.offsetTop + tooltipModel.caretY;
-    let left = canvas.offsetLeft + tooltipModel.caretX;
-
-    if (tooltipModel.yAlign === 'bottom') {
-      top -= this.state.height;
-    } else if (tooltipModel.yAlign === 'center') {
-      top -= 0.5 * this.state.height;
-    }
-
-    if (tooltipModel.xAlign === 'right') {
-      left -= this.state.width;
-    } else if (tooltipModel.xAlign === 'center') {
-      left -= 0.5 * this.state.width;
-    }
-
+    const top = canvas.offsetTop + tooltipModel.caretY;
+    const left = canvas.offsetLeft + tooltipModel.caretX;
+    const alignments = [`x${tooltipModel.xAlign}`, `y${tooltipModel.yAlign}`];
+    // console.log(alignments);
     const inlineStyle = {
       top,
       left,
@@ -78,8 +106,10 @@ class CustomTooltip extends React.Component {
     }&selectedJob=${curr.job_id}&group_state=expanded`;
 
     return (
-      <div className={classes.tooltip} style={inlineStyle} ref={this.tooltip}>
-        <div>{currPoint.xLabel}</div>
+      <div
+        className={[classes.tooltip, ...alignments].join(' ')}
+        style={inlineStyle}>
+        <div className={classes.test}>{currPoint.xLabel}</div>
         <div>
           <span style={labelColor} className={classes.tooltipKey} />
           {currSeries.label}: {currPoint.yLabel}
@@ -110,6 +140,9 @@ class CustomTooltip extends React.Component {
           </a>
           )
         </div>
+        <div className={classes.lockMessage}>
+          {isLocked ? 'Click to unlock' : 'Click to lock'}
+        </div>
       </div>
     );
   }

src/utils/chartJs/generateOptions.js

@@ -6,6 +6,7 @@ const generateOptions = (options = {}) => {
     tooltipFormat,
     tooltips,
     ticksCallback,
+    onClick,
   } = options;
   const chartJsOptions = {
     legend: {
@@ -60,6 +61,10 @@ const generateOptions = (options = {}) => {
     };
   }
 
+  if (onClick) {
+    chartJsOptions.onClick = onClick;
+  }
+
   return chartJsOptions;
 };