Remove bounce rate when filtered for goal

This commit is contained in:
Uku Taht 2020-01-15 10:57:47 +02:00
parent 79e96189b8
commit 19281f91d1
2 changed files with 21 additions and 8 deletions

View File

@ -9,16 +9,23 @@ import {parseQuery} from '../../query'
class PagesModal extends React.Component {
constructor(props) {
super(props)
this.state = {loading: true}
this.state = {
loading: true,
query: parseQuery(props.location.search, props.site)
}
}
componentDidMount() {
const query = parseQuery(this.props.location.search, this.props.site)
const include = this.showBounceRate() ? 'bounce_rate' : null
api.get(`/api/stats/${this.props.site.domain}/pages`, query, {limit: 100, include: 'bounce_rate'})
api.get(`/api/stats/${this.props.site.domain}/pages`, this.state.query, {limit: 100, include: include})
.then((res) => this.setState({loading: false, pages: res}))
}
showBounceRate() {
return !this.state.query.filters.goal
}
formatBounceRate(page) {
if (page.bounce_rate) {
return page.bounce_rate + '%'
@ -32,7 +39,7 @@ class PagesModal extends React.Component {
<tr className="text-sm" key={page.name}>
<td className="p-2 truncate">{page.name}</td>
<td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.count)}</td>
<td className="p-2 w-32 font-medium" align="right">{this.formatBounceRate(page)}</td>
{this.showBounceRate() && <td className="p-2 w-32 font-medium" align="right">{this.formatBounceRate(page)}</td> }
</tr>
)
}
@ -56,7 +63,7 @@ class PagesModal extends React.Component {
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-grey-dark" align="left">Page url</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Pageviews</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Bounce rate</th>
{this.showBounceRate() && <th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Bounce rate</th>}
</tr>
</thead>
<tbody>

View File

@ -16,10 +16,16 @@ class ReferrerDrilldownModal extends React.Component {
}
componentDidMount() {
api.get(`/api/stats/${this.props.site.domain}/referrers/${this.props.match.params.referrer}`, this.state.query, {limit: 100, include: 'bounce_rate'})
const include = this.showBounceRate() ? 'bounce_rate' : null
api.get(`/api/stats/${this.props.site.domain}/referrers/${this.props.match.params.referrer}`, this.state.query, {limit: 100, include: include})
.then((res) => this.setState({loading: false, referrers: res.referrers, totalVisitors: res.total_visitors}))
}
showBounceRate() {
return !this.state.query.filters.goal
}
formatBounceRate(ref) {
if (ref.bounce_rate) {
return ref.bounce_rate + '%'
@ -35,7 +41,7 @@ class ReferrerDrilldownModal extends React.Component {
<a className="hover:underline" target="_blank" href={'//' + referrer.name}>{ referrer.name }</a>
</td>
<td className="p-2 w-32 font-medium" align="right">{numberFormatter(referrer.count)}</td>
<td className="p-2 w-32 font-medium" align="right">{this.formatBounceRate(referrer)}</td>
{this.showBounceRate() && <td className="p-2 w-32 font-medium" align="right">{this.formatBounceRate(referrer)}</td> }
</tr>
)
}
@ -70,7 +76,7 @@ class ReferrerDrilldownModal extends React.Component {
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-grey-dark" align="left">Referrer</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Visitors</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Bounce rate</th>
{this.showBounceRate() && <th className="p-2 w-32 text-xs tracking-wide font-bold text-grey-dark" align="right">Bounce rate</th>}
</tr>
</thead>
<tbody>