Replaced tooltip in pageviews chart.

components/PageviewsChart.js

@@ -1,10 +1,11 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import { format } from 'date-fns';
 import styles from './PageviewsChart.module.css';
 
-export default function PageviewsChart({ data, unit, className, children }) {
+export default function PageviewsChart({ websiteId, data, unit, className, children }) {
   const canvas = useRef();
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
@@ -30,17 +31,14 @@ export default function PageviewsChart({ data, unit, className, children }) {
   );
 
   const renderTooltip = model => {
-    const { caretX, caretY, opacity, title, body, labelColors } = model;
+    const { opacity, title, body, labelColors } = model;
 
     if (!opacity) {
-      setTooltip({ opacity });
+      setTooltip(null);
     } else {
       const [label, value] = body[0].lines[0].split(':');
 
       setTooltip({
-        top: caretY,
-        left: caretX,
-        opacity,
         title: title[0],
         value,
         label,
@@ -139,16 +137,22 @@ export default function PageviewsChart({ data, unit, className, children }) {
   }, [data]);
 
   return (
-    <div className={classNames(styles.chart, className)}>
+    <div
+      data-tip=""
+      data-for={`${websiteId}-tooltip`}
+      className={classNames(styles.chart, className)}
+    >
       <canvas ref={canvas} width={960} height={400} />
-      <Tootip {...tooltip} />
+      <ReactTooltip id={`${websiteId}-tooltip`}>
+        {tooltip ? <Tooltip {...tooltip} /> : null}
+      </ReactTooltip>
       {children}
     </div>
   );
 }
 
-const Tootip = ({ top, left, opacity, title, value, label, labelColor }) => (
+const Tooltip = ({ title, value, label, labelColor }) => (
-  <div className={styles.tooltip} style={{ top, left, opacity }}>
+  <div className={styles.tooltip}>
     <div className={styles.content}>
       <div className={styles.title}>{title}</div>
       <div className={styles.metric}>

components/PageviewsChart.module.css

@@ -3,8 +3,6 @@
 }
 
 .tooltip {
-  opacity: 0;
-  position: absolute;
   pointer-events: none;
   z-index: 1;
 }
@@ -14,26 +12,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #000;
+  color: #fff;
-  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
   text-align: center;
-  width: 150px;
-  height: 50px;
-  transform: translate(-50%, -60px);
-  backdrop-filter: blur(4px);
-}
-
-.content:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background: #000;
-  opacity: 0.05;
-  border-radius: 10px;
 }
 
 .title {
@@ -53,6 +33,6 @@
   width: 10px;
   height: 10px;
   border-radius: 100%;
-  border: 1px solid #fff;
+  border: 1px solid #b3b3b3;
   margin-right: 8px;
 }

components/WebsiteChart.js

@@ -75,7 +75,12 @@ export default function WebsiteChart({
         />
       </div>
       <div className="row">
-        <PageviewsChart className="col" data={{ pageviews, uniques }} unit={unit}>
+        <PageviewsChart
+          className="col"
+          websiteId={websiteId}
+          data={{ pageviews, uniques }}
+          unit={unit}
+        >
           <QuickButtons value={value} onChange={handleDateChange} />
         </PageviewsChart>
       </div>