2020-10-28 12:09:04 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { Link } from 'react-router-dom'
|
|
|
|
|
2021-04-28 11:31:10 +03:00
|
|
|
import * as storage from '../../storage'
|
2020-10-28 12:09:04 +03:00
|
|
|
import Bar from '../bar'
|
|
|
|
import numberFormatter from '../../number-formatter'
|
|
|
|
import * as api from '../../api'
|
|
|
|
|
2021-07-08 09:42:30 +03:00
|
|
|
const MOBILE_UPPER_WIDTH = 767
|
|
|
|
const DEFAULT_WIDTH = 1080
|
|
|
|
|
2020-10-30 11:49:41 +03:00
|
|
|
export default class PropertyBreakdown extends React.Component {
|
2020-10-28 12:09:04 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
2020-10-30 11:49:41 +03:00
|
|
|
let propKey = props.goal.prop_names[0]
|
|
|
|
this.storageKey = 'goalPropTab__' + props.site.domain + props.goal.name
|
2021-04-28 11:31:10 +03:00
|
|
|
const storedKey = storage.getItem(this.storageKey)
|
2020-10-30 11:49:41 +03:00
|
|
|
if (props.goal.prop_names.includes(storedKey)) {
|
|
|
|
propKey = storedKey
|
2020-10-29 16:33:37 +03:00
|
|
|
}
|
2020-10-30 11:49:41 +03:00
|
|
|
if (props.query.filters['props']) {
|
|
|
|
propKey = Object.keys(props.query.filters['props'])[0]
|
2020-10-29 16:33:37 +03:00
|
|
|
}
|
|
|
|
|
2020-10-28 12:09:04 +03:00
|
|
|
this.state = {
|
|
|
|
loading: true,
|
2021-07-08 09:42:30 +03:00
|
|
|
propKey: propKey,
|
|
|
|
viewport: DEFAULT_WIDTH,
|
2020-10-28 12:09:04 +03:00
|
|
|
}
|
2021-07-08 09:42:30 +03:00
|
|
|
|
|
|
|
this.handleResize = this.handleResize.bind(this);
|
2020-10-28 12:09:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2021-07-08 09:42:30 +03:00
|
|
|
window.addEventListener('resize', this.handleResize, false);
|
|
|
|
|
|
|
|
this.handleResize();
|
2020-10-30 11:49:41 +03:00
|
|
|
this.fetchPropBreakdown()
|
2020-10-28 12:09:04 +03:00
|
|
|
}
|
|
|
|
|
2021-07-08 09:42:30 +03:00
|
|
|
componentWillUnmount() {
|
|
|
|
window.removeEventListener('resize', this.handleResize, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleResize() {
|
|
|
|
this.setState({ viewport: window.innerWidth });
|
|
|
|
}
|
|
|
|
|
|
|
|
getBarMaxWidth() {
|
|
|
|
const { viewport } = this.state;
|
|
|
|
return viewport > MOBILE_UPPER_WIDTH ? "16rem" : "10rem";
|
|
|
|
}
|
|
|
|
|
2020-10-30 11:49:41 +03:00
|
|
|
fetchPropBreakdown() {
|
2020-10-28 12:09:04 +03:00
|
|
|
if (this.props.query.filters['goal']) {
|
2020-10-30 11:49:41 +03:00
|
|
|
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/property/${encodeURIComponent(this.state.propKey)}`, this.props.query)
|
2020-10-28 12:09:04 +03:00
|
|
|
.then((res) => this.setState({loading: false, breakdown: res}))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-04 14:35:05 +03:00
|
|
|
renderUrl(value) {
|
|
|
|
if (value.is_url) {
|
|
|
|
return (
|
|
|
|
<a target="_blank" href={value.name} className="hidden group-hover:block">
|
2020-12-16 12:57:28 +03:00
|
|
|
<svg className="inline h-4 w-4 ml-1 -mt-1 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg>
|
2020-11-04 14:35:05 +03:00
|
|
|
</a>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return null
|
|
|
|
}
|
2021-07-08 09:42:30 +03:00
|
|
|
|
|
|
|
renderPropContent(value, query) {
|
|
|
|
return (
|
|
|
|
<span className="flex px-2 py-1.5 group dark:text-gray-300 relative z-9 break-words">
|
|
|
|
<Link
|
|
|
|
to={{pathname: window.location.pathname, search: query.toString()}}
|
|
|
|
className="hover:underline block"
|
|
|
|
>
|
|
|
|
{ value.name }
|
|
|
|
</Link>
|
|
|
|
{ this.renderUrl(value) }
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-10-30 11:49:41 +03:00
|
|
|
renderPropValue(value) {
|
2020-10-28 12:09:04 +03:00
|
|
|
const query = new URLSearchParams(window.location.search)
|
2020-10-30 11:49:41 +03:00
|
|
|
query.set('props', JSON.stringify({[this.state.propKey]: value.name}))
|
2021-07-08 09:42:30 +03:00
|
|
|
const { viewport } = this.state;
|
2020-10-28 12:09:04 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="flex items-center justify-between my-2" key={value.name}>
|
2021-07-08 09:42:30 +03:00
|
|
|
<Bar
|
|
|
|
count={value.count}
|
|
|
|
all={this.state.breakdown}
|
|
|
|
bg="bg-red-50 dark:bg-gray-500 dark:bg-opacity-15"
|
|
|
|
maxWidthDeduction={this.getBarMaxWidth()}
|
|
|
|
>
|
|
|
|
{this.renderPropContent(value, query)}
|
|
|
|
</Bar>
|
2020-12-16 12:57:28 +03:00
|
|
|
<div className="dark:text-gray-200">
|
2020-10-28 12:09:04 +03:00
|
|
|
<span className="font-medium inline-block w-20 text-right">{numberFormatter(value.count)}</span>
|
2021-07-08 09:42:30 +03:00
|
|
|
{
|
|
|
|
viewport > MOBILE_UPPER_WIDTH ?
|
|
|
|
(
|
|
|
|
<span
|
|
|
|
className="font-medium inline-block w-20 text-right"
|
|
|
|
>{numberFormatter(value.total_count)}
|
|
|
|
</span>
|
|
|
|
)
|
|
|
|
: null
|
|
|
|
}
|
2020-10-30 12:26:16 +03:00
|
|
|
<span className="font-medium inline-block w-20 text-right">{numberFormatter(value.conversion_rate)}%</span>
|
2020-10-28 12:09:04 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-10-30 11:49:41 +03:00
|
|
|
changePropKey(newKey) {
|
2021-04-28 11:31:10 +03:00
|
|
|
storage.setItem(this.storageKey, newKey)
|
2020-10-30 11:49:41 +03:00
|
|
|
this.setState({propKey: newKey, loading: true}, this.fetchPropBreakdown)
|
2020-10-28 12:09:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
renderBody() {
|
|
|
|
if (this.state.loading) {
|
|
|
|
return <div className="px-4 py-2"><div className="loading sm mx-auto"><div></div></div></div>
|
|
|
|
} else {
|
2020-10-30 11:49:41 +03:00
|
|
|
return this.state.breakdown.map((propValue) => this.renderPropValue(propValue))
|
2020-10-28 12:09:04 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-29 16:33:37 +03:00
|
|
|
renderPill(key) {
|
2020-10-30 11:49:41 +03:00
|
|
|
const isActive = this.state.propKey === key
|
2020-10-29 16:33:37 +03:00
|
|
|
|
|
|
|
if (isActive) {
|
2020-12-16 12:57:28 +03:00
|
|
|
return <li key={key} className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500 ">{key}</li>
|
2020-10-29 16:33:37 +03:00
|
|
|
} else {
|
2020-12-16 12:57:28 +03:00
|
|
|
return <li key={key} className="hover:text-indigo-600 cursor-pointer" onClick={this.changePropKey.bind(this, key)}>{key}</li>
|
2020-10-29 16:33:37 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-28 12:09:04 +03:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="w-full pl-6 mt-4">
|
2020-10-29 16:33:37 +03:00
|
|
|
<div className="flex items-center pb-1">
|
2020-12-16 12:57:28 +03:00
|
|
|
<span className="text-xs font-bold text-gray-600 dark:text-gray-300">Breakdown by:</span>
|
|
|
|
<ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2 leading-5 pl-1">
|
2020-10-30 11:49:41 +03:00
|
|
|
{ this.props.goal.prop_names.map(this.renderPill.bind(this)) }
|
2020-10-29 16:33:37 +03:00
|
|
|
</ul>
|
2020-10-28 12:09:04 +03:00
|
|
|
</div>
|
|
|
|
{ this.renderBody() }
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|