mirror of
https://github.com/plausible/analytics.git
synced 2024-09-11 09:56:02 +03:00
Fix for details button misbehaving on mobile (#1114)
* 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
This commit is contained in:
parent
645069271a
commit
c95d375839
@ -1,3 +1,4 @@
|
||||
elixir 1.11.3-otp-23
|
||||
erlang 23.2.1
|
||||
nodejs 15.3.0
|
||||
python 3.9.4
|
@ -9,12 +9,13 @@ Make sure Docker, Elixir, Erlang and Node.js are all installed on your developme
|
||||
### Start the environment:
|
||||
|
||||
1. Run both `make postgres` and `make clickhouse`.
|
||||
2. Run `mix deps.get`. This will download the required Elixir dependencies.
|
||||
2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
|
||||
3. Run `mix ecto.migrate` to build the database schema.
|
||||
4. Run `npm ci --prefix assets` to install the required node dependencies.
|
||||
5. Run `mix phx.server` to start the Phoenix server.
|
||||
6. The system is now available on `localhost:8000`.
|
||||
2. You can then get set up with the following bits in one go with `make install`.
|
||||
1. Run `mix deps.get`. This will download the required Elixir dependencies.
|
||||
2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
|
||||
3. Run `mix ecto.migrate` to build the database schema.
|
||||
4. Run `npm ci --prefix assets` to install the required node dependencies.
|
||||
3. Run `make server` or `mix phx.server` to start the Phoenix server.
|
||||
4. The system is now available on `localhost:8000`.
|
||||
|
||||
### Creating an account
|
||||
|
||||
@ -30,3 +31,9 @@ Make sure Docker, Elixir, Erlang and Node.js are all installed on your developme
|
||||
2. Stop and remove the Clickhouse container with `make clickhouse-stop`.
|
||||
|
||||
Volumes are preserved. You'll find that the Postgres and Clickhouse state are retained when you bring them up again the next time: no need to re-register and so on.
|
||||
|
||||
Note: Since we are deleting the containers, be careful when deleting volumes with `docker volume prune`. You might accidentally delete the database and would have to go through re-registration process.
|
||||
|
||||
### Pre-commit hooks
|
||||
|
||||
`pre-commit` requires Python to be available locally and covers JavaScript and CSS. Set up with `pip install --user pre-commit` followed by `pre-commit install`. Conversely, if the prompts are far too bothersome, remove with `pre-commit uninstall`.
|
9
Makefile
9
Makefile
@ -1,3 +1,12 @@
|
||||
install:
|
||||
mix deps.get
|
||||
mix ecto.create
|
||||
mix ecto.migrate
|
||||
npm ci --prefix assets
|
||||
|
||||
server:
|
||||
mix phx.server
|
||||
|
||||
clickhouse:
|
||||
docker run --detach -p 8123:8123 --ulimit nofile=262144:262144 --volume=$$PWD/.clickhouse_db_vol:/var/lib/clickhouse --name plausible_clickhouse yandex/clickhouse-server:21.3.2.5
|
||||
|
||||
|
@ -247,8 +247,7 @@ blockquote {
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
@apply mt-6;
|
||||
width: 100%;
|
||||
min-height: 436px;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@ -257,6 +256,12 @@ blockquote {
|
||||
margin-right: 6px;
|
||||
width: calc(50% - 6px);
|
||||
position: relative;
|
||||
min-height: initial;
|
||||
height: 436px;
|
||||
}
|
||||
|
||||
.stats-item__header {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,8 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function FadeIn({show, children}) {
|
||||
const className = show ? "fade-enter-active" : "fade-enter"
|
||||
|
||||
return <div className={className}>{children}</div>
|
||||
export default function FadeIn({className, show, children}) {
|
||||
return (
|
||||
<div
|
||||
className={`${className || ''} ${show ? "fade-enter-active" : "fade-enter"}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -1,10 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
@ -24,7 +20,13 @@ export default class extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={(el) => this.element = el} className={this.props.className} style={this.props.style}>{this.props.children}</div>
|
||||
<div
|
||||
ref={(el) => { this.element = el }}
|
||||
className={this.props.className}
|
||||
style={this.props.style}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -148,7 +148,9 @@ class Countries extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
|
||||
<div
|
||||
className="relative p-4 bg-white rounded shadow-xl stats-item flex flex-col dark:bg-gray-825 mt-6 w-full"
|
||||
>
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
{ this.state.loading && <div className="mx-auto my-32 loading"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
|
@ -14,11 +14,6 @@ export default class Browsers extends React.Component {
|
||||
this.onVisible = this.onVisible.bind(this)
|
||||
}
|
||||
|
||||
onVisible() {
|
||||
this.fetchBrowsers()
|
||||
if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.query !== prevProps.query) {
|
||||
this.setState({loading: true, browsers: null})
|
||||
@ -26,6 +21,11 @@ export default class Browsers extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
onVisible() {
|
||||
this.fetchBrowsers()
|
||||
if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
|
||||
}
|
||||
|
||||
fetchBrowsers() {
|
||||
if (this.props.query.filters.browser) {
|
||||
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/browser-versions`, this.props.query)
|
||||
@ -84,9 +84,9 @@ export default class Browsers extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
<FadeIn show={!this.state.loading} className="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
</LazyLoader>
|
||||
|
@ -8,7 +8,6 @@ import OperatingSystems from './operating-systems'
|
||||
import FadeIn from '../../fade-in'
|
||||
import numberFormatter from '../../number-formatter'
|
||||
import Bar from '../bar'
|
||||
import MoreLink from '../more-link'
|
||||
import * as api from '../../api'
|
||||
|
||||
|
||||
@ -46,11 +45,6 @@ class ScreenSizes extends React.Component {
|
||||
this.onVisible = this.onVisible.bind(this)
|
||||
}
|
||||
|
||||
onVisible() {
|
||||
this.fetchScreenSizes()
|
||||
if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.query !== prevProps.query) {
|
||||
this.setState({loading: true, sizes: null})
|
||||
@ -58,11 +52,24 @@ class ScreenSizes extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
onVisible() {
|
||||
this.fetchScreenSizes()
|
||||
if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
|
||||
}
|
||||
|
||||
|
||||
fetchScreenSizes() {
|
||||
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`, this.props.query)
|
||||
api.get(
|
||||
`/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`,
|
||||
this.props.query
|
||||
)
|
||||
.then((res) => this.setState({loading: false, sizes: res}))
|
||||
}
|
||||
|
||||
label() {
|
||||
return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
|
||||
}
|
||||
|
||||
renderScreenSize(size) {
|
||||
const query = new URLSearchParams(window.location.search)
|
||||
query.set('screen', size.name)
|
||||
@ -70,43 +77,59 @@ class ScreenSizes extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={size.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
|
||||
<Bar count={size.count} all={this.state.sizes} bg="bg-green-50 dark:bg-gray-500 dark:bg-opacity-15" />
|
||||
<span tooltip={EXPLANATION[size.name]} className="flex px-2 dark:text-gray-300" style={{marginTop: '-26px'}} >
|
||||
<Bar
|
||||
count={size.count}
|
||||
all={this.state.sizes}
|
||||
bg="bg-green-50 dark:bg-gray-500 dark:bg-opacity-15"
|
||||
/>
|
||||
<span
|
||||
tooltip={EXPLANATION[size.name]}
|
||||
className="flex px-2 dark:text-gray-300"
|
||||
style={{marginTop: '-26px'}}
|
||||
>
|
||||
<Link className="block truncate hover:underline" to={{search: query.toString()}}>
|
||||
{iconFor(size.name)} {size.name}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium dark:text-gray-200">{numberFormatter(size.count)} <span className="inline-block w-8 text-xs text-right">({size.percentage}%)</span></span>
|
||||
<span
|
||||
className="font-medium dark:text-gray-200"
|
||||
>
|
||||
{numberFormatter(size.count)}
|
||||
<span className="inline-block w-8 text-xs text-right">({size.percentage}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
label() {
|
||||
return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
|
||||
}
|
||||
|
||||
renderList() {
|
||||
if (this.state.sizes && this.state.sizes.length > 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500">
|
||||
<div
|
||||
className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500"
|
||||
>
|
||||
<span>Screen size</span>
|
||||
<span>{ this.label() }</span>
|
||||
</div>
|
||||
{ this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
|
||||
</React.Fragment>
|
||||
)
|
||||
} else {
|
||||
return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
|
||||
>
|
||||
No data yet
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
<FadeIn show={!this.state.loading} class="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
</LazyLoader>
|
||||
@ -117,22 +140,13 @@ class ScreenSizes extends React.Component {
|
||||
export default class Devices extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.tabKey = 'deviceTab__' + props.site.domain
|
||||
this.tabKey = `deviceTab__${ props.site.domain}`
|
||||
const storedTab = storage.getItem(this.tabKey)
|
||||
this.state = {
|
||||
mode: storedTab || 'size'
|
||||
}
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
if (this.state.mode === 'size') {
|
||||
return <ScreenSizes site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
} else if (this.state.mode === 'browser') {
|
||||
return <Browsers site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
} else if (this.state.mode === 'os') {
|
||||
return <OperatingSystems site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
}
|
||||
}
|
||||
|
||||
setMode(mode) {
|
||||
return () => {
|
||||
@ -141,33 +155,70 @@ export default class Devices extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
switch (this.state.mode) {
|
||||
case 'browser':
|
||||
return <Browsers site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
case 'os':
|
||||
return (
|
||||
<OperatingSystems
|
||||
site={this.props.site}
|
||||
query={this.props.query}
|
||||
timer={this.props.timer}
|
||||
/>
|
||||
)
|
||||
case 'size':
|
||||
default:
|
||||
return (
|
||||
<ScreenSizes
|
||||
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 font-bold text-indigo-700 border-b-2 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500">{name}</li>
|
||||
} else {
|
||||
return <li className="cursor-pointer hover:text-indigo-600" onClick={this.setMode(mode)}>{name}</li>
|
||||
return (
|
||||
<li
|
||||
className="inline-block h-5 font-bold text-indigo-700 border-b-2 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500"
|
||||
>
|
||||
{name}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className="cursor-pointer hover:text-indigo-600"
|
||||
onClick={this.setMode(mode)}
|
||||
>
|
||||
{name}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="stats-item">
|
||||
<div className="relative p-4 bg-white rounded shadow-xl dark:bg-gray-825" style={{height: '436px'}}>
|
||||
|
||||
<div
|
||||
className="stats-item flex flex-col mt-6 stats-item--has-header w-full"
|
||||
>
|
||||
<div
|
||||
className="stats-item__header flex flex-col flex-grow relative p-4 bg-white rounded shadow-xl dark:bg-gray-825"
|
||||
>
|
||||
<div className="flex justify-between w-full">
|
||||
<h3 className="font-bold dark:text-gray-100">Devices</h3>
|
||||
|
||||
<ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
|
||||
{ this.renderPill('Size', 'size') }
|
||||
{ this.renderPill('Browser', 'browser') }
|
||||
{ this.renderPill('OS', 'os') }
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{ this.renderContent() }
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -83,9 +83,9 @@ export default class OperatingSystems extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
<FadeIn show={!this.state.loading} className="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
</LazyLoader>
|
||||
|
@ -4,9 +4,26 @@ import { Link } from 'react-router-dom'
|
||||
export default function MoreLink({site, list, endpoint}) {
|
||||
if (list.length > 0) {
|
||||
return (
|
||||
<div className="text-center w-full absolute bottom-0 left-0 pb-3">
|
||||
<Link to={`/${encodeURIComponent(site.domain)}/${endpoint}${window.location.search}`} className="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide">
|
||||
<svg className="feather mr-1" style={{marginTop: '-2px'}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||
<div className="text-center w-full py-3 md:pb-3 md:pt-0 md:absolute md:bottom-0 md:left-0">
|
||||
<Link
|
||||
to={`/${encodeURIComponent(site.domain)}/${endpoint}${window.location.search}`}
|
||||
// eslint-disable-next-line max-len
|
||||
className="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide"
|
||||
>
|
||||
<svg
|
||||
className="feather mr-1"
|
||||
style={{marginTop: '-2px'}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
{/* eslint-disable-next-line max-len */}
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
|
||||
</svg>
|
||||
DETAILS
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -42,9 +42,9 @@ export default class EntryPages extends React.Component {
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={page.name}>
|
||||
<div className="w-full h-8 truncate" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={page.count} all={this.state.pages} bg="bg-orange-50 dark:bg-gray-500 dark:bg-opacity-15" />
|
||||
<span className="flex px-2 group dark:text-gray-300" style={{marginTop: '-26px'}} >
|
||||
<span className="flex px-2 group dark:text-gray-300" style={{marginTop: '-26px'}}>
|
||||
<Link to={{pathname: window.location.pathname, search: query.toString()}} className="block hover:underline">{page.name}</Link>
|
||||
<a target="_blank" href={'http://' + this.props.site.domain + page.name} className="hidden group-hover:block">
|
||||
<a target="_blank" href={`http://${ this.props.site.domain }${page.name}`} className="hidden group-hover:block">
|
||||
<svg className="inline w-4 h-4 ml-1 -mt-1 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg>
|
||||
</a>
|
||||
</span>
|
||||
@ -57,7 +57,7 @@ export default class EntryPages extends React.Component {
|
||||
renderList() {
|
||||
if (this.state.pages && this.state.pages.length > 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
|
||||
<span>Page url</span>
|
||||
<span>Unique Entrances</span>
|
||||
@ -66,19 +66,24 @@ export default class EntryPages extends React.Component {
|
||||
<FlipMove>
|
||||
{ this.state.pages.map(this.renderPage.bind(this)) }
|
||||
</FlipMove>
|
||||
</React.Fragment>
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
|
||||
>
|
||||
No data yet
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!loading}>
|
||||
<FadeIn show={!loading} className="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="entry-pages" />}
|
||||
|
@ -76,9 +76,9 @@ export default class ExitPages extends React.Component {
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!loading}>
|
||||
<FadeIn show={!loading} className="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="exit-pages" />}
|
||||
|
@ -1,11 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import * as storage from '../../storage'
|
||||
import Visits from './pages'
|
||||
import EntryPages from './entry-pages'
|
||||
import ExitPages from './exit-pages'
|
||||
import FadeIn from '../../fade-in'
|
||||
|
||||
const labelFor = {
|
||||
'pages': 'Top Pages',
|
||||
@ -16,23 +14,13 @@ const labelFor = {
|
||||
export default class Pages extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.tabKey = 'pageTab__' + props.site.domain
|
||||
this.tabKey = `pageTab__${ props.site.domain}`
|
||||
const storedTab = storage.getItem(this.tabKey)
|
||||
this.state = {
|
||||
mode: storedTab || 'pages'
|
||||
}
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
if (this.state.mode === 'pages') {
|
||||
return <Visits site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
} else if (this.state.mode === 'entry-pages') {
|
||||
return <EntryPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
} else if (this.state.mode === 'exit-pages') {
|
||||
return <ExitPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
|
||||
}
|
||||
}
|
||||
|
||||
setMode(mode) {
|
||||
return () => {
|
||||
storage.setItem(this.tabKey, mode)
|
||||
@ -40,34 +28,63 @@ export default class Pages extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
} else {
|
||||
return <li className="hover:text-indigo-600 cursor-pointer" onClick={this.setMode(mode)}>{name}</li>
|
||||
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() {
|
||||
const filters = this.props.query.filters
|
||||
return (
|
||||
<div className="stats-item">
|
||||
<div className="bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative" style={{height: '436px'}}>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
)
|
||||
|
@ -87,9 +87,9 @@ export default class Visits extends React.Component {
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
return (
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!loading}>
|
||||
<FadeIn show={!loading} className="flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="pages" />}
|
||||
|
@ -94,20 +94,27 @@ export default class Referrers extends React.Component {
|
||||
renderList() {
|
||||
if (this.state.referrers.length > 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
|
||||
<div className="flex flex-col flex-grow">
|
||||
<div
|
||||
className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span>Referrer</span>
|
||||
<span>{ this.label() }</span>
|
||||
</div>
|
||||
|
||||
<FlipMove>
|
||||
<FlipMove className="flex-grow">
|
||||
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
||||
</FlipMove>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
|
||||
>
|
||||
No data yet
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
@ -123,13 +130,15 @@ export default class Referrers extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
|
||||
<LazyLoader onVisible={this.onVisible}>
|
||||
<div
|
||||
className="relative p-4 bg-white rounded shadow-xl stats-item flex flex-col dark:bg-gray-825 mt-6 w-full"
|
||||
>
|
||||
<LazyLoader onVisible={this.onVisible} className="flex flex-col flex-grow">
|
||||
<h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
|
||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
{ this.renderContent() }
|
||||
</FadeIn>
|
||||
<FadeIn show={!this.state.loading}>
|
||||
{ this.renderContent() }
|
||||
</FadeIn>
|
||||
</LazyLoader>
|
||||
</div>
|
||||
)
|
||||
|
@ -107,9 +107,11 @@ export default class SearchTerms extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="stats-item relative bg-white dark:bg-gray-825 shadow-xl rounded p-4" style={{height: '436px'}}>
|
||||
<div
|
||||
className="stats-item flex flex-col relative bg-white dark:bg-gray-825 shadow-xl rounded p-4 mt-6 w-full"
|
||||
>
|
||||
{ this.state.loading && <div className="loading mt-44 mx-auto"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
<FadeIn show={!this.state.loading} className="flex-grow">
|
||||
{ this.renderContent() }
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
@ -99,7 +99,9 @@ class AllSources extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
|
||||
<div
|
||||
className="relative p-4 bg-white rounded shadow-xl stats-item flex flex-col mt-6 w-full dark:bg-gray-825"
|
||||
>
|
||||
{ this.renderContent() }
|
||||
</div>
|
||||
)
|
||||
@ -166,17 +168,17 @@ class UTMSources extends React.Component {
|
||||
renderList() {
|
||||
if (this.state.referrers && this.state.referrers.length > 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div class="flex flex-col flex-grow">
|
||||
<div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
|
||||
<span>{UTM_TAGS[this.props.tab].label}</span>
|
||||
<span>{this.label()}</span>
|
||||
</div>
|
||||
|
||||
<FlipMove>
|
||||
<FlipMove className="flex-grow">
|
||||
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
||||
</FlipMove>
|
||||
<MoreLink site={this.props.site} list={this.state.referrers} endpoint={UTM_TAGS[this.props.tab].endpoint} />
|
||||
</React.Fragment>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
|
||||
@ -191,7 +193,7 @@ class UTMSources extends React.Component {
|
||||
{ this.props.renderTabs() }
|
||||
</div>
|
||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||
<FadeIn show={!this.state.loading}>
|
||||
<FadeIn show={!this.state.loading} className="flex flex-col flex-grow">
|
||||
{ this.renderList() }
|
||||
</FadeIn>
|
||||
</React.Fragment>
|
||||
@ -200,7 +202,9 @@ class UTMSources extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
|
||||
<div
|
||||
className="relative p-4 bg-white rounded shadow-xl stats-item flex flex-col dark:bg-gray-825 mt-6 w-full"
|
||||
>
|
||||
{ this.renderContent() }
|
||||
</div>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user