mirror of
https://github.com/plausible/analytics.git
synced 2025-01-03 07:08:04 +03:00
c95d375839
* chore(make): convenience commands for installation & dev server * docs: easier development env instructions * docs: add note about docker volumes * docs: detail pre-commit configuration * style: eslint and prettier changes * Allow for passing custom classes to fade-in * style: eslint & prettier for the details button component * style: react lifecycle methods to come first * docs: add instructions to disable pre-commit * style: devices components * Move render methods to the last (together) in the order list * Remove unused component import * React lifecycle to come first before our own methods * General styling and eslint changes * Cleaner renderContent method using switch/case (fixes an eslint error as well!) * Cleaner renderPill method with proper spacing + removing uncessary else * style: more eslint/prettier for pages components * Use newer Fragment syntax * Remove unnecessary else statement * Use backtick strings for concatenating strings * Remove unnecessary space * Remove unused imports and variable declarations * Bunch render methods together as last in the order list * fix: details button to drop to the bottom naturally on smaller screens This _mostly_ fixes one of the issues being tracked on #972, titled "Details button issue on Firefox specifically" * refactor: reduce usage of our CSS class in favor of tailwind's util classes * refactor: remove our css classes in favor of Tailwind's util classes
93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
|
|
import * as storage from '../../storage'
|
|
import Visits from './pages'
|
|
import EntryPages from './entry-pages'
|
|
import ExitPages from './exit-pages'
|
|
|
|
const labelFor = {
|
|
'pages': 'Top Pages',
|
|
'entry-pages': 'Entry Pages',
|
|
'exit-pages': 'Exit Pages',
|
|
}
|
|
|
|
export default class Pages extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
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})
|
|
}
|
|
}
|
|
|
|
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 <Visits site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
|
}
|
|
}
|
|
|
|
|
|
renderPill(name, mode) {
|
|
const isActive = this.state.mode === mode
|
|
|
|
if (isActive) {
|
|
return (
|
|
<li
|
|
className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500"
|
|
>
|
|
{name}
|
|
</li>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li
|
|
className="hover:text-indigo-600 cursor-pointer"
|
|
onClick={this.setMode(mode)}
|
|
>
|
|
{name}
|
|
</li>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
className="stats-item flex flex-col w-full mt-6 stats-item--has-header"
|
|
>
|
|
<div
|
|
className="stats-item__header flex flex-col flex-grow bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative"
|
|
>
|
|
{/* Header Container */}
|
|
<div className="w-full flex justify-between">
|
|
<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>
|
|
{/* Main Contents */}
|
|
{ this.renderContent() }
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|