diff --git a/components/PageviewsChart.js b/components/PageviewsChart.js index a672ce56..34cd55d9 100644 --- a/components/PageviewsChart.js +++ b/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 ( -
+
- + + {tooltip ? : null} + {children}
); } -const Tootip = ({ top, left, opacity, title, value, label, labelColor }) => ( -
+const Tooltip = ({ title, value, label, labelColor }) => ( +
{title}
diff --git a/components/PageviewsChart.module.css b/components/PageviewsChart.module.css index 2ffd0c0e..c378bcbb 100644 --- a/components/PageviewsChart.module.css +++ b/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; - text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; + color: #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; } diff --git a/components/WebsiteChart.js b/components/WebsiteChart.js index 45c7d83c..5512ebe8 100644 --- a/components/WebsiteChart.js +++ b/components/WebsiteChart.js @@ -75,7 +75,12 @@ export default function WebsiteChart({ />
- +