mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-18 15:23:38 +01:00
BarChart component.
This commit is contained in:
Mike Cao
parent
5206622d5a
commit
5f47f328be
150
components/metrics/BarChart.js
Normal file
150
components/metrics/BarChart.js
Normal file
@ -0,0 +1,150 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
import classNames from 'classnames';
|
||||
import ChartJS from 'chart.js';
|
||||
import styles from './PageviewsChart.module.css';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export default function BarChart({
|
||||
chartId,
|
||||
datasets,
|
||||
unit,
|
||||
records,
|
||||
animationDuration = 300,
|
||||
className,
|
||||
onUpdate = () => {},
|
||||
}) {
|
||||
const canvas = useRef();
|
||||
const chart = useRef();
|
||||
const [tooltip, setTooltip] = useState({});
|
||||
|
||||
const renderLabel = (label, index, values) => {
|
||||
const d = new Date(values[index].value);
|
||||
const n = records;
|
||||
|
||||
switch (unit) {
|
||||
case 'hour':
|
||||
return format(d, 'ha');
|
||||
case 'day':
|
||||
if (n >= 15) {
|
||||
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
|
||||
}
|
||||
return format(d, 'EEE M/d');
|
||||
case 'month':
|
||||
return format(d, 'MMMM');
|
||||
default:
|
||||
return label;
|
||||
}
|
||||
};
|
||||
|
||||
const renderTooltip = model => {
|
||||
const { opacity, title, body, labelColors } = model;
|
||||
|
||||
if (!opacity) {
|
||||
setTooltip(null);
|
||||
} else {
|
||||
const [label, value] = body[0].lines[0].split(':');
|
||||
|
||||
setTooltip({
|
||||
title: title[0],
|
||||
value,
|
||||
label,
|
||||
labelColor: labelColors[0].backgroundColor,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function draw() {
|
||||
if (!chart.current) {
|
||||
chart.current = new ChartJS(canvas.current, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets,
|
||||
},
|
||||
options: {
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: renderTooltip,
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0,
|
||||
},
|
||||
responsiveAnimationDuration: 0,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
time: {
|
||||
unit,
|
||||
tooltipFormat: 'ddd MMMM DD YYYY',
|
||||
},
|
||||
ticks: {
|
||||
callback: renderLabel,
|
||||
minRotation: 0,
|
||||
maxRotation: 0,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
offset: true,
|
||||
stacked: true,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const { options } = chart.current;
|
||||
|
||||
options.scales.xAxes[0].time.unit = unit;
|
||||
options.scales.xAxes[0].ticks.callback = renderLabel;
|
||||
|
||||
onUpdate(chart.current);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (datasets) {
|
||||
draw();
|
||||
setTooltip(null);
|
||||
}
|
||||
}, [datasets]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tip=""
|
||||
data-for={`${chartId}-tooltip`}
|
||||
className={classNames(styles.chart, className)}
|
||||
>
|
||||
<canvas ref={canvas} width={960} height={400} />
|
||||
<ReactTooltip id={`${chartId}-tooltip`}>
|
||||
{tooltip ? <Tooltip {...tooltip} /> : null}
|
||||
</ReactTooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Tooltip = ({ title, value, label, labelColor }) => (
|
||||
<div className={styles.tooltip}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.metric}>
|
||||
<div className={styles.dot}>
|
||||
<div className={styles.color} style={{ backgroundColor: labelColor }} />
|
||||
</div>
|
||||
{value} {label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
174
components/metrics/EventsChart.js
Normal file
174
components/metrics/EventsChart.js
Normal file
@ -0,0 +1,174 @@
|
||||
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 './EventsChart.module.css';
|
||||
|
||||
export default function EventsChart({
|
||||
websiteId,
|
||||
data,
|
||||
unit,
|
||||
animationDuration = 300,
|
||||
className,
|
||||
children,
|
||||
}) {
|
||||
const canvas = useRef();
|
||||
const chart = useRef();
|
||||
const [tooltip, setTooltip] = useState({});
|
||||
|
||||
const renderLabel = useCallback(
|
||||
(label, index, values) => {
|
||||
const d = new Date(values[index].value);
|
||||
const n = data.pageviews.length;
|
||||
|
||||
switch (unit) {
|
||||
case 'day':
|
||||
if (n >= 15) {
|
||||
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
|
||||
}
|
||||
return format(d, 'EEE M/d');
|
||||
case 'month':
|
||||
return format(d, 'MMMM');
|
||||
default:
|
||||
return label;
|
||||
}
|
||||
},
|
||||
[unit, data],
|
||||
);
|
||||
|
||||
const renderTooltip = model => {
|
||||
const { opacity, title, body, labelColors } = model;
|
||||
|
||||
if (!opacity) {
|
||||
setTooltip(null);
|
||||
} else {
|
||||
const [label, value] = body[0].lines[0].split(':');
|
||||
|
||||
setTooltip({
|
||||
title: title[0],
|
||||
value,
|
||||
label,
|
||||
labelColor: labelColors[0].backgroundColor,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function draw() {
|
||||
if (!canvas.current) return;
|
||||
|
||||
if (!chart.current) {
|
||||
chart.current = new ChartJS(canvas.current, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'unique visitors',
|
||||
data: data.uniques,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.4)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.4)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
{
|
||||
label: 'page views',
|
||||
data: data.pageviews,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.2)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.2)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: renderTooltip,
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
time: {
|
||||
unit,
|
||||
tooltipFormat: 'ddd MMMM DD YYYY',
|
||||
},
|
||||
ticks: {
|
||||
callback: renderLabel,
|
||||
maxRotation: 0,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
offset: true,
|
||||
stacked: true,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const {
|
||||
data: { datasets },
|
||||
options,
|
||||
} = chart.current;
|
||||
|
||||
datasets[0].data = data.uniques;
|
||||
datasets[1].data = data.pageviews;
|
||||
options.scales.xAxes[0].time.unit = unit;
|
||||
options.scales.xAxes[0].ticks.callback = renderLabel;
|
||||
options.animation.duration = animationDuration;
|
||||
|
||||
chart.current.update();
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
draw();
|
||||
setTooltip(null);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tip=""
|
||||
data-for={`${websiteId}-tooltip`}
|
||||
className={classNames(styles.chart, className)}
|
||||
>
|
||||
<canvas ref={canvas} width={960} height={400} />
|
||||
<ReactTooltip id={`${websiteId}-tooltip`}>
|
||||
{tooltip ? <Tooltip {...tooltip} /> : null}
|
||||
</ReactTooltip>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Tooltip = ({ title, value, label, labelColor }) => (
|
||||
<div className={styles.tooltip}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.metric}>
|
||||
<div className={styles.dot}>
|
||||
<div className={styles.color} style={{ backgroundColor: labelColor }} />
|
||||
</div>
|
||||
{value} {label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
3
components/metrics/EventsChart.module.css
Normal file
3
components/metrics/EventsChart.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.chart {
|
||||
display: flex;
|
||||
}
|
||||
@ -1,174 +1,53 @@
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
import classNames from 'classnames';
|
||||
import ChartJS from 'chart.js';
|
||||
import BarChart from './BarChart';
|
||||
import { format } from 'date-fns';
|
||||
import styles from './PageviewsChart.module.css';
|
||||
|
||||
export default function PageviewsChart({
|
||||
websiteId,
|
||||
data,
|
||||
unit,
|
||||
animationDuration = 300,
|
||||
className,
|
||||
children,
|
||||
}) {
|
||||
const canvas = useRef();
|
||||
const chart = useRef();
|
||||
const [tooltip, setTooltip] = useState({});
|
||||
export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
|
||||
const handleUpdate = chart => {
|
||||
const {
|
||||
data: { datasets },
|
||||
options,
|
||||
} = chart;
|
||||
|
||||
const renderLabel = useCallback(
|
||||
(label, index, values) => {
|
||||
const d = new Date(values[index].value);
|
||||
const n = data.pageviews.length;
|
||||
datasets[0].data = data.uniques;
|
||||
datasets[1].data = data.pageviews;
|
||||
options.animation.duration = animationDuration;
|
||||
|
||||
switch (unit) {
|
||||
case 'day':
|
||||
if (n >= 15) {
|
||||
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
|
||||
}
|
||||
return format(d, 'EEE M/d');
|
||||
case 'month':
|
||||
return format(d, 'MMMM');
|
||||
default:
|
||||
return label;
|
||||
}
|
||||
},
|
||||
[unit, data],
|
||||
);
|
||||
|
||||
const renderTooltip = model => {
|
||||
const { opacity, title, body, labelColors } = model;
|
||||
|
||||
if (!opacity) {
|
||||
setTooltip(null);
|
||||
} else {
|
||||
const [label, value] = body[0].lines[0].split(':');
|
||||
|
||||
setTooltip({
|
||||
title: title[0],
|
||||
value,
|
||||
label,
|
||||
labelColor: labelColors[0].backgroundColor,
|
||||
});
|
||||
}
|
||||
chart.update();
|
||||
};
|
||||
|
||||
function draw() {
|
||||
if (!canvas.current) return;
|
||||
|
||||
if (!chart.current) {
|
||||
chart.current = new ChartJS(canvas.current, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'unique visitors',
|
||||
data: data.uniques,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.4)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.4)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
{
|
||||
label: 'page views',
|
||||
data: data.pageviews,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.2)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.2)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: renderTooltip,
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
time: {
|
||||
unit,
|
||||
tooltipFormat: 'ddd MMMM DD YYYY',
|
||||
},
|
||||
ticks: {
|
||||
callback: renderLabel,
|
||||
maxRotation: 0,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
offset: true,
|
||||
stacked: true,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const {
|
||||
data: { datasets },
|
||||
options,
|
||||
} = chart.current;
|
||||
|
||||
datasets[0].data = data.uniques;
|
||||
datasets[1].data = data.pageviews;
|
||||
options.scales.xAxes[0].time.unit = unit;
|
||||
options.scales.xAxes[0].ticks.callback = renderLabel;
|
||||
options.animation.duration = animationDuration;
|
||||
|
||||
chart.current.update();
|
||||
}
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
draw();
|
||||
setTooltip(null);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tip=""
|
||||
data-for={`${websiteId}-tooltip`}
|
||||
className={classNames(styles.chart, className)}
|
||||
>
|
||||
<canvas ref={canvas} width={960} height={400} />
|
||||
<ReactTooltip id={`${websiteId}-tooltip`}>
|
||||
{tooltip ? <Tooltip {...tooltip} /> : null}
|
||||
</ReactTooltip>
|
||||
{children}
|
||||
<div className={classNames(styles.chart, className)}>
|
||||
<BarChart
|
||||
chartId={websiteId}
|
||||
datasets={[
|
||||
{
|
||||
label: 'unique visitors',
|
||||
data: data.uniques,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.4)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.4)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
{
|
||||
label: 'page views',
|
||||
data: data.pageviews,
|
||||
lineTension: 0,
|
||||
backgroundColor: 'rgb(38, 128, 235, 0.2)',
|
||||
borderColor: 'rgb(13, 102, 208, 0.2)',
|
||||
borderWidth: 1,
|
||||
},
|
||||
]}
|
||||
unit={unit}
|
||||
records={data.pageviews.length}
|
||||
onUpdate={handleUpdate}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Tooltip = ({ title, value, label, labelColor }) => (
|
||||
<div className={styles.tooltip}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.metric}>
|
||||
<div className={styles.dot}>
|
||||
<div className={styles.color} style={{ backgroundColor: labelColor }} />
|
||||
</div>
|
||||
{value} {label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -76,14 +76,15 @@ export default function WebsiteChart({
|
||||
<div className="row">
|
||||
<CheckVisible className="col">
|
||||
{visible => (
|
||||
<PageviewsChart
|
||||
websiteId={websiteId}
|
||||
data={{ pageviews, uniques }}
|
||||
unit={unit}
|
||||
animationDuration={visible ? 300 : 0}
|
||||
>
|
||||
<>
|
||||
<PageviewsChart
|
||||
websiteId={websiteId}
|
||||
data={{ pageviews, uniques }}
|
||||
unit={unit}
|
||||
animationDuration={visible ? 300 : 0}
|
||||
/>
|
||||
<QuickButtons value={value} onChange={handleDateChange} />
|
||||
</PageviewsChart>
|
||||
</>
|
||||
)}
|
||||
</CheckVisible>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user