import React from "react";
import { Link, withRouter } from 'react-router-dom'
import Modal from './modal'
import * as api from '../../api'
import numberFormatter, {durationFormatter} from '../../util/number-formatter'
import {parseQuery} from '../../query'
class ReferrerDrilldownModal extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
query: parseQuery(props.location.search, props.site)
}
}
componentDidMount() {
const detailed = this.showExtra()
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/${this.props.match.params.referrer}`, this.state.query, {limit: 100, detailed})
.then((res) => this.setState({loading: false, referrers: res.referrers, totalVisitors: res.total_visitors}))
}
showExtra() {
return this.state.query.period !== 'realtime' && !this.state.query.filters.goal
}
showConversionRate() {
return !!this.state.query.filters.goal
}
label() {
if (this.state.query.period === 'realtime') {
return 'Current visitors'
}
if (this.showConversionRate()) {
return 'Conversions'
}
return 'Visitors'
}
formatBounceRate(ref) {
if (typeof(ref.bounce_rate) === 'number') {
return ref.bounce_rate + '%'
} else {
return '-'
}
}
formatDuration(referrer) {
if (typeof(referrer.visit_duration) === 'number') {
return durationFormatter(referrer.visit_duration)
} else {
return '-'
}
}
renderExternalLink(name) {
if (name !== 'Direct / None') {
return (
)
}
}
renderReferrerName(referrer) {
const query = new URLSearchParams(window.location.search)
query.set('referrer', referrer.name)
return (
{referrer.name}
{ this.renderExternalLink(referrer.name) }
)
}
renderReferrer(referrer) {
return (
{ this.renderReferrerName(referrer) }
|
{this.showConversionRate() && {numberFormatter(referrer.total_visitors)} | }
{numberFormatter(referrer.visitors)} |
{this.showExtra() && {this.formatBounceRate(referrer)} | }
{this.showExtra() && {this.formatDuration(referrer)} | }
{this.showConversionRate() && {referrer.conversion_rate}% | }
)
}
renderBody() {
if (this.state.loading) {
return (
)
} else if (this.state.referrers) {
return (
Referrer drilldown
Referrer |
{this.showConversionRate() && Total visitors | }
{this.label()} |
{this.showExtra() && Bounce rate | }
{this.showExtra() && Visit duration | }
{this.showConversionRate() && CR | }
{ this.state.referrers.map(this.renderReferrer.bind(this)) }
)
}
}
render() {
return (
{ this.renderBody() }
)
}
}
export default withRouter(ReferrerDrilldownModal)