analytics/assets/js/dashboard/stats/visitor-graph.js

359 lines
11 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { withRouter } from 'react-router-dom'
2019-11-19 07:43:28 +03:00
import Chart from 'chart.js'
import { eventName, navigateToQuery } from '../query'
import numberFormatter, {durationFormatter} from '../number-formatter'
import * as api from '../api'
import {ThemeContext} from '../theme-context'
function buildDataSet(plot, present_index, ctx, label) {
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(101,116,205, 0.2)');
gradient.addColorStop(1, 'rgba(101,116,205, 0)');
if (present_index) {
var dashedPart = plot.slice(present_index - 1);
var dashedPlot = (new Array(plot.length - dashedPart.length)).concat(dashedPart)
for(var i = present_index; i < plot.length; i++) {
plot[i] = undefined
}
return [{
label: label,
data: plot,
borderWidth: 3,
borderColor: 'rgba(101,116,205)',
pointBackgroundColor: 'rgba(101,116,205)',
backgroundColor: gradient,
},
{
label: label,
data: dashedPlot,
borderWidth: 3,
borderDash: [5, 10],
borderColor: 'rgba(101,116,205)',
pointBackgroundColor: 'rgba(101,116,205)',
backgroundColor: gradient,
}]
} else {
return [{
label: label,
2019-11-25 06:37:50 +03:00
data: plot,
borderWidth: 3,
borderColor: 'rgba(101,116,205)',
pointBackgroundColor: 'rgba(101,116,205)',
backgroundColor: gradient,
}]
}
}
const MONTHS = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
]
const MONTHS_ABBREV = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]
const DAYS_ABBREV = [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
]
function dateFormatter(interval, longForm) {
return function(isoDate) {
2020-07-14 12:15:23 +03:00
let date = new Date(isoDate)
if (interval === 'month') {
return MONTHS[date.getUTCMonth()];
} else if (interval === 'date') {
var day = DAYS_ABBREV[date.getUTCDay()];
var date_ = date.getUTCDate();
var month = MONTHS_ABBREV[date.getUTCMonth()];
return day + ', ' + date_ + ' ' + month;
} else if (interval === 'hour') {
2020-07-14 12:15:23 +03:00
const parts = isoDate.split(/[^0-9]/);
date = new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5])
var hours = date.getHours(); // Not sure why getUTCHours doesn't work here
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
return hours + ampm;
} else if (interval === 'minute') {
if (longForm) {
const minutesAgo = Math.abs(isoDate)
return minutesAgo === 1 ? '1 minute ago' : minutesAgo + ' minutes ago'
} else {
return isoDate + 'm'
}
}
}
}
class LineGraph extends React.Component {
constructor(props) {
super(props);
this.regenerateChart = this.regenerateChart.bind(this);
}
regenerateChart() {
const {graphData} = this.props
this.ctx = document.getElementById("main-graph-canvas").getContext('2d');
const label = this.props.query.filters.goal ? 'Converted visitors' : graphData.interval === 'minute' ? 'Pageviews' : 'Visitors'
const dataSet = buildDataSet(graphData.plot, graphData.present_index, this.ctx, label)
return new Chart(this.ctx, {
type: 'line',
data: {
labels: graphData.labels,
datasets: dataSet
},
options: {
animation: false,
legend: {display: false},
responsive: true,
elements: {line: {tension: 0}, point: {radius: 0}},
onClick: this.onClick.bind(this),
tooltips: {
mode: 'index',
intersect: false,
xPadding: 10,
yPadding: 10,
titleFontSize: 18,
footerFontSize: 14,
bodyFontSize: 14,
backgroundColor: 'rgba(25, 30, 56)',
titleMarginBottom: 8,
bodySpacing: 6,
footerMarginTop: 8,
xPadding: 16,
yPadding: 12,
multiKeyBackground: 'none',
callbacks: {
title: function(dataPoints) {
const data = dataPoints[0]
return dateFormatter(graphData.interval, true)(data.xLabel)
},
beforeBody: function() {
this.drawnLabels = {}
},
label: function(item) {
const dataset = this._data.datasets[item.datasetIndex]
if (!this.drawnLabels[dataset.label]) {
this.drawnLabels[dataset.label] = true
const pluralizedLabel = item.yLabel === 1 ? dataset.label.slice(0, -1) : dataset.label
return ` ${item.yLabel} ${pluralizedLabel}`
}
},
footer: function(dataPoints) {
if (graphData.interval === 'month') {
return 'Click to view month'
} else if (graphData.interval === 'date') {
return 'Click to view day'
}
}
}
},
scales: {
yAxes: [{
ticks: {
callback: numberFormatter,
beginAtZero: true,
autoSkip: true,
maxTicksLimit: 8,
fontColor: this.props.darkTheme ? 'rgb(243, 244, 246)' : undefined
},
gridLines: {
zeroLineColor: 'transparent',
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
},
ticks: {
autoSkip: true,
maxTicksLimit: 8,
callback: dateFormatter(graphData.interval),
fontColor: this.props.darkTheme ? 'rgb(243, 244, 246)' : undefined
}
}]
}
}
});
}
componentDidMount() {
this.chart = this.regenerateChart();
}
componentDidUpdate(prevProps) {
if (this.props.graphData !== prevProps.graphData) {
const label = this.props.query.filters.goal ? 'Converted visitors' : this.props.graphData.interval === 'minute' ? 'Pageviews' : 'Visitors'
const newDataset = buildDataSet(this.props.graphData.plot, this.props.graphData.present_index, this.ctx, label)
for (let i = 0; i < newDataset[0].data.length; i++) {
this.chart.data.datasets[0].data[i] = newDataset[0].data[i]
}
this.chart.update()
}
if (prevProps.darkTheme !== this.props.darkTheme) {
this.chart = this.regenerateChart();
this.chart.update();
}
}
onClick(e) {
const element = this.chart.getElementsAtEventForMode(e, 'index', {intersect: false})[0]
const date = element._chart.config.data.labels[element._index]
if (this.props.graphData.interval === 'month') {
navigateToQuery(
this.props.history,
this.props.query,
{
period: 'month',
date,
}
)
} else if (this.props.graphData.interval === 'date') {
navigateToQuery(
this.props.history,
this.props.query,
{
period: 'day',
date,
}
)
}
}
2019-12-20 06:22:37 +03:00
renderComparison(name, comparison) {
const formattedComparison = numberFormatter(Math.abs(comparison))
if (comparison > 0) {
const color = name === 'Bounce rate' ? 'text-red-400' : 'text-green-500'
return <span className="text-xs dark:text-gray-100"><span className={color + ' font-bold'}>&uarr;</span> {formattedComparison}%</span>
} else if (comparison < 0) {
const color = name === 'Bounce rate' ? 'text-green-500' : 'text-red-400'
return <span className="text-xs dark:text-gray-100"><span className={color + ' font-bold'}>&darr;</span> {formattedComparison}%</span>
} else if (comparison === 0) {
return <span className="text-xs text-gray-700 dark:text-gray-300">&#12336; N/A</span>
}
}
renderTopStatNumber(stat) {
2020-07-17 11:31:39 +03:00
if (stat.name === 'Visit duration') {
return durationFormatter(stat.count)
} else if (typeof(stat.count) == 'number') {
return numberFormatter(stat.count)
} else {
return stat.percentage + '%'
}
}
renderTopStats() {
const {graphData} = this.props
const stats = this.props.graphData.top_stats.map((stat, index) => {
let border = index > 0 ? 'lg:border-l border-gray-300' : ''
2019-12-20 06:22:37 +03:00
border = index % 2 === 0 ? border + ' border-r lg:border-r-0' : border
return (
<div className={`px-8 w-1/2 my-4 lg:w-auto ${border}`} key={stat.name}>
<div className="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">{stat.name}</div>
<div className="flex items-center justify-between my-1">
<b className="mr-4 text-2xl dark:text-gray-100">{ this.renderTopStatNumber(stat) }</b>
{this.renderComparison(stat.name, stat.change)}
</div>
</div>
)
})
if (graphData.interval === 'minute') {
stats.push(<div key="dot" className="block pulsating-circle" style={{left: '125px', top: '52px'}}></div>)
}
return stats
}
downloadLink() {
const endpoint = `/${encodeURIComponent(this.props.site.domain)}/visitors.csv${api.serializeQuery(this.props.query)}`
return (
<a href={endpoint} download>
<svg className="absolute w-4 h-5 text-gray-700 feather dark:text-gray-300" style={{right: '2rem', top: '-2rem'}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
</a>
)
}
render() {
const extraClass = this.props.graphData.interval === 'hour' ? '' : 'cursor-pointer'
return (
<div className="graph-inner">
<div className="flex flex-wrap">
{ this.renderTopStats() }
</div>
<div className="relative px-2">
{ this.downloadLink() }
<canvas id="main-graph-canvas" className={'mt-4 ' + extraClass} width="1054" height="342"></canvas>
</div>
</div>
)
}
}
LineGraph = withRouter(LineGraph)
export default class VisitorGraph extends React.Component {
constructor(props) {
super(props)
this.state = {loading: true}
}
componentDidMount() {
this.fetchGraphData()
if (this.props.timer) this.props.timer.onTick(this.fetchGraphData.bind(this))
}
componentDidUpdate(prevProps) {
if (this.props.query !== prevProps.query) {
this.setState({loading: true, graphData: null})
this.fetchGraphData()
}
}
fetchGraphData() {
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/main-graph`, this.props.query)
.then((res) => {
this.setState({loading: false, graphData: res})
return res
})
}
renderInner() {
if (this.state.graphData) {
return (
<ThemeContext.Consumer>
{theme => (
<LineGraph graphData={this.state.graphData} site={this.props.site} query={this.props.query} darkTheme={theme}/>
)}
</ThemeContext.Consumer>
)
}
}
render() {
return (
<div className="relative w-full mt-6 bg-white rounded shadow-xl dark:bg-gray-825 main-graph">
{ this.state.loading && <div className="graph-inner"><div className="pt-24 mx-auto loading sm:pt-32 md:pt-48"><div></div></div></div> }
{ this.renderInner() }
</div>
)
}
}