mirror of
https://github.com/kremalicious/umami.git
synced 2024-11-22 09:57:00 +01:00
Replaced tooltip in pageviews chart.
This commit is contained in:
parent
9c5762b8a2
commit
418793feaf
@ -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}>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user