Replaced tooltip in pageviews chart.

This commit is contained in:
Mike Cao 2020-08-01 22:13:16 -07:00
parent 9c5762b8a2
commit 418793feaf
3 changed files with 22 additions and 33 deletions

View File

@ -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 }) => (
<div className={styles.tooltip} style={{ top, left, opacity }}>
const Tooltip = ({ title, value, label, labelColor }) => (
<div className={styles.tooltip}>
<div className={styles.content}>
<div className={styles.title}>{title}</div>
<div className={styles.metric}>

View File

@ -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;
}

View File

@ -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>