analytics/assets/js/dashboard/stats/behaviours/conversions.js

62 lines
1.7 KiB
JavaScript

import React from 'react'
import * as api from '../../api'
import * as url from '../../util/url'
import * as metrics from '../reports/metrics'
import ListReport from '../reports/list'
import { useSiteContext } from '../../site-context'
import { useQueryContext } from '../../query-context'
import { conversionsRoute } from '../../router'
export default function Conversions({ afterFetchData, onGoalFilterClick }) {
const site = useSiteContext()
const { query } = useQueryContext()
function fetchConversions() {
return api.get(url.apiPath(site, '/conversions'), query, { limit: 9 })
}
function getFilterInfo(listItem) {
return {
prefix: 'goal',
filter: ['is', 'goal', [listItem.name]]
}
}
function chooseMetrics() {
return [
metrics.createVisitors({
renderLabel: (_query) => 'Uniques',
meta: { plot: true }
}),
metrics.createEvents({
renderLabel: (_query) => 'Total',
meta: { hiddenOnMobile: true }
}),
metrics.createConversionRate(),
BUILD_EXTRA &&
metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
BUILD_EXTRA &&
metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
].filter((metric) => !!metric)
}
/*global BUILD_EXTRA*/
return (
<ListReport
fetchData={fetchConversions}
afterFetchData={afterFetchData}
getFilterInfo={getFilterInfo}
keyLabel="Goal"
onClick={onGoalFilterClick}
metrics={chooseMetrics()}
detailsLinkProps={{
path: conversionsRoute.path,
search: (search) => search
}}
color="bg-red-50 group-hover/row:bg-red-100"
colMinWidth={90}
/>
)
}