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

{this.showConversionRate() && } {this.showExtra() && } {this.showExtra() && } {this.showConversionRate() && } { this.state.referrers.map(this.renderReferrer.bind(this)) }
ReferrerTotal visitors{this.label()}Bounce rateVisit durationCR
) } } render() { return ( { this.renderBody() } ) } } export default withRouter(ReferrerDrilldownModal)