analytics/assets/js/dashboard/stats/pages/index.js

163 lines
4.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
import * as storage from '../../util/storage'
import * as url from '../../util/url'
import * as api from '../../api'
import ListReport from './../reports/list'
function EntryPages({query, site}) {
function fetchData() {
return api.get(url.apiPath(site, '/entry-pages'), query, {limit: 9})
}
function externalLinkDest(page) {
return url.externalLinkForPage(site.domain, page.name)
}
return (
<ListReport
fetchData={fetchData}
filter={{entry_page: 'entry_page'}}
keyLabel="Entry page"
valueLabel="Unique Entrances"
valueKey="unique_entrances"
detailsLink={url.sitePath(site, '/entry-pages')}
query={query}
externalLinkDest={externalLinkDest}
color="bg-orange-50"
/>
)
}
function ExitPages({query, site}) {
function fetchData() {
return api.get(url.apiPath(site, '/exit-pages'), query, {limit: 9})
}
function externalLinkDest(page) {
return url.externalLinkForPage(site.domain, page.name)
}
return (
<ListReport
fetchData={fetchData}
filter={{exit_page: 'exit_page'}}
keyLabel="Exit page"
valueLabel="Unique Exits"
valueKey="unique_exits"
detailsLink={url.sitePath(site, '/exit-pages')}
query={query}
externalLinkDest={externalLinkDest}
color="bg-orange-50"
/>
)
}
function TopPages({query, site}) {
function fetchData() {
return api.get(url.apiPath(site, '/pages'), query, {limit: 9})
}
function externalLinkDest(page) {
return url.externalLinkForPage(site.domain, page.name)
}
return (
<ListReport
fetchData={fetchData}
filter={{page: 'page'}}
keyLabel="Page"
detailsLink={url.sitePath(site, '/pages')}
query={query}
externalLinkDest={externalLinkDest}
color="bg-orange-50"
/>
)
}
const labelFor = {
'pages': 'Top Pages',
'entry-pages': 'Entry Pages',
'exit-pages': 'Exit Pages',
}
export default class Pages extends React.Component {
constructor(props) {
super(props)
2021-06-15 10:34:43 +03:00
this.tabKey = `pageTab__${ props.site.domain}`
const storedTab = storage.getItem(this.tabKey)
this.state = {
mode: storedTab || 'pages'
}
}
setMode(mode) {
return () => {
storage.setItem(this.tabKey, mode)
this.setState({mode})
}
}
2021-06-15 10:34:43 +03:00
renderContent() {
switch(this.state.mode) {
case "entry-pages":
return <EntryPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
case "exit-pages":
return <ExitPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
case "pages":
default:
return <TopPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
2021-06-15 10:34:43 +03:00
}
}
renderPill(name, mode) {
const isActive = this.state.mode === mode
if (isActive) {
2021-06-15 10:34:43 +03:00
return (
<li
className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
2021-06-15 10:34:43 +03:00
>
{name}
</li>
)
}
2021-06-15 10:34:43 +03:00
return (
<li
className="hover:text-indigo-600 cursor-pointer"
onClick={this.setMode(mode)}
>
{name}
</li>
)
}
render() {
return (
2021-06-15 10:34:43 +03:00
<div
className="stats-item flex flex-col w-full mt-6 stats-item--has-header"
>
<div
2021-12-02 12:53:29 +03:00
className="stats-item-header flex flex-col flex-grow bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative"
2021-06-15 10:34:43 +03:00
>
{/* Header Container */}
<div className="w-full flex justify-between">
2021-06-15 10:34:43 +03:00
<h3 className="font-bold dark:text-gray-100">
{labelFor[this.state.mode] || 'Page Visits'}
</h3>
<ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
{ this.renderPill('Top Pages', 'pages') }
{ this.renderPill('Entry Pages', 'entry-pages') }
{ this.renderPill('Exit Pages', 'exit-pages') }
</ul>
</div>
2021-06-15 10:34:43 +03:00
{/* Main Contents */}
{ this.renderContent() }
</div>
</div>
)
}
}