import React from 'react'; import { Link } from 'react-router-dom' import FlipMove from 'react-flip-move' import Bar from '../bar' import PropBreakdown from './prop-breakdown' import numberFormatter from '../../util/number-formatter' import * as api from '../../api' import * as url from '../../util/url' import { escapeFilterValue } from '../../util/filters' import LazyLoader from '../../components/lazy-loader' const MOBILE_UPPER_WIDTH = 767 const DEFAULT_WIDTH = 1080 export default class Conversions extends React.Component { constructor(props) { super(props) this.htmlNode = React.createRef() this.state = { loading: true, viewport: DEFAULT_WIDTH, } this.onVisible = this.onVisible.bind(this) this.fetchConversions = this.fetchConversions.bind(this) this.handleResize = this.handleResize.bind(this); } componentDidMount() { window.addEventListener('resize', this.handleResize, false); this.handleResize(); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize, false); document.removeEventListener('tick', this.fetchConversions) } handleResize() { this.setState({ viewport: window.innerWidth }); } onVisible() { this.fetchConversions() if (this.props.query.period === 'realtime') { document.addEventListener('tick', this.fetchConversions) } } componentDidUpdate(prevProps) { if (this.props.query !== prevProps.query) { const height = this.htmlNode.current.element.offsetHeight this.setState({loading: true, goals: null, prevHeight: height}) this.fetchConversions() } } getBarMaxWidth() { const { viewport } = this.state; return viewport > MOBILE_UPPER_WIDTH ? "16rem" : "10rem"; } fetchConversions() { api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/conversions`, this.props.query) .then((res) => this.setState({loading: false, goals: res, prevHeight: null})) } renderGoal(goal) { const { viewport } = this.state; const renderProps = this.props.query.filters['goal'] == goal.name && goal.prop_names return (
{goal.name}
{numberFormatter(goal.unique_conversions)} {viewport > MOBILE_UPPER_WIDTH && {numberFormatter(goal.total_conversions)}} {goal.conversion_rate}%
{ renderProps && }
) } renderInner() { const { viewport } = this.state; if (this.state.loading) { return
} else if (this.state.goals) { return (
Goal
Uniques {viewport > MOBILE_UPPER_WIDTH && Total} CR
{ this.state.goals.map(this.renderGoal.bind(this)) }
) } } renderConversions() { return ( { this.renderInner() } ) } render() { return (
{ this.renderConversions() }
) } }