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' function Money({ formatted }) { if (formatted) { return {formatted.short} } else { return "-" } } export default class Conversions extends React.Component { constructor(props) { super(props) this.htmlNode = React.createRef() this.state = { loading: true, } this.onVisible = this.onVisible.bind(this) this.fetchConversions = this.fetchConversions.bind(this) } componentWillUnmount() { document.removeEventListener('tick', this.fetchConversions) } 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() } } 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, renderRevenueColumn) { const renderProps = this.props.query.filters['goal'] == goal.name && goal.prop_names return (