2019-11-19 07:30:42 +03:00
|
|
|
import React from 'react';
|
2019-11-20 08:48:27 +03:00
|
|
|
import { Link } from 'react-router-dom'
|
2019-11-19 07:30:42 +03:00
|
|
|
|
|
|
|
import Bar from './bar'
|
|
|
|
import MoreLink from './more-link'
|
|
|
|
import numberFormatter from '../number-formatter'
|
|
|
|
import * as api from '../api'
|
|
|
|
|
|
|
|
export default class Conversions extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
this.state = {loading: true}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.fetchConversions()
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.query !== prevProps.query) {
|
|
|
|
this.setState({loading: true, goals: null})
|
|
|
|
this.fetchConversions()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchConversions() {
|
2020-02-04 16:44:13 +03:00
|
|
|
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/conversions`, this.props.query)
|
2019-11-19 07:30:42 +03:00
|
|
|
.then((res) => this.setState({loading: false, goals: res}))
|
|
|
|
}
|
|
|
|
|
|
|
|
renderGoal(goal) {
|
2019-11-20 08:48:27 +03:00
|
|
|
const query = new URLSearchParams(window.location.search)
|
|
|
|
query.set('goal', goal.name)
|
|
|
|
|
2019-11-19 07:30:42 +03:00
|
|
|
return (
|
2020-02-10 16:17:00 +03:00
|
|
|
<div className="flex items-center justify-between my-2 text-sm" key={goal.name}>
|
|
|
|
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
|
2020-03-26 15:22:48 +03:00
|
|
|
<Bar count={goal.count} all={this.state.goals} bg="bg-red-50" />
|
2020-03-06 12:11:38 +03:00
|
|
|
<Link to={{search: query.toString(), state: {scrollTop: true}}} style={{marginTop: '-26px'}} className="hover:underline block px-2">{ goal.name }</Link>
|
2019-11-19 07:30:42 +03:00
|
|
|
</div>
|
2020-02-10 16:17:00 +03:00
|
|
|
<span className="font-medium">{numberFormatter(goal.count)}</span>
|
|
|
|
</div>
|
2019-11-19 07:30:42 +03:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
if (this.state.loading) {
|
|
|
|
return (
|
2020-04-23 10:58:04 +03:00
|
|
|
<div className="w-full bg-white shadow-xl rounded p-4" style={{height: '94px'}}>
|
|
|
|
<div className="loading my-2 mx-auto"><div></div></div>
|
2019-11-19 07:30:42 +03:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
} else if (this.state.goals) {
|
|
|
|
return (
|
2020-02-10 16:17:00 +03:00
|
|
|
<div className="w-full bg-white shadow-xl rounded p-4">
|
2020-03-06 12:11:38 +03:00
|
|
|
<h3 className="font-bold">Goal Conversions</h3>
|
2020-03-26 16:43:55 +03:00
|
|
|
<div className="flex items-center mt-3 mb-2 justify-between text-gray-500 text-xs font-bold tracking-wide">
|
2020-02-10 16:17:00 +03:00
|
|
|
<span>Goal</span>
|
|
|
|
<span>Conversions</span>
|
2019-11-19 07:30:42 +03:00
|
|
|
</div>
|
|
|
|
|
2020-02-10 16:17:00 +03:00
|
|
|
{ this.state.goals.map(this.renderGoal.bind(this)) }
|
2019-11-19 07:30:42 +03:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|