mirror of
https://github.com/plausible/analytics.git
synced 2024-10-26 10:22:34 +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
|
elixir 1.11.3-otp-23
|
||||||
erlang 23.2.1
|
erlang 23.2.1
|
||||||
nodejs 15.3.0
|
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:
|
### Start the environment:
|
||||||
|
|
||||||
1. Run both `make postgres` and `make clickhouse`.
|
1. Run both `make postgres` and `make clickhouse`.
|
||||||
2. Run `mix deps.get`. This will download the required Elixir dependencies.
|
2. You can then get set up with the following bits in one go with `make install`.
|
||||||
2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
|
1. Run `mix deps.get`. This will download the required Elixir dependencies.
|
||||||
3. Run `mix ecto.migrate` to build the database schema.
|
2. Run `mix ecto.create`. This will create the required databases in both Postgres and Clickhouse.
|
||||||
4. Run `npm ci --prefix assets` to install the required node dependencies.
|
3. Run `mix ecto.migrate` to build the database schema.
|
||||||
5. Run `mix phx.server` to start the Phoenix server.
|
4. Run `npm ci --prefix assets` to install the required node dependencies.
|
||||||
6. The system is now available on `localhost:8000`.
|
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
|
### Creating an account
|
||||||
|
|
||||||
@ -29,4 +30,10 @@ Make sure Docker, Elixir, Erlang and Node.js are all installed on your developme
|
|||||||
1. Stop and remove the Postgres container with `make postgres-stop`.
|
1. Stop and remove the Postgres container with `make postgres-stop`.
|
||||||
2. Stop and remove the Clickhouse container with `make clickhouse-stop`.
|
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.
|
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:
|
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
|
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 {
|
.stats-item {
|
||||||
@apply mt-6;
|
min-height: 436px;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
@ -257,6 +256,12 @@ blockquote {
|
|||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
width: calc(50% - 6px);
|
width: calc(50% - 6px);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
min-height: initial;
|
||||||
|
height: 436px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-item__header {
|
||||||
|
height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,8 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default function FadeIn({show, children}) {
|
export default function FadeIn({className, show, children}) {
|
||||||
const className = show ? "fade-enter-active" : "fade-enter"
|
return (
|
||||||
|
<div
|
||||||
return <div className={className}>{children}</div>
|
className={`${className || ''} ${show ? "fade-enter-active" : "fade-enter"}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default class extends React.Component {
|
export default class extends React.Component {
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.observer = new IntersectionObserver((entries) => {
|
this.observer = new IntersectionObserver((entries) => {
|
||||||
if (entries[0].isIntersecting) {
|
if (entries[0].isIntersecting) {
|
||||||
@ -24,7 +20,13 @@ export default class extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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() {
|
render() {
|
||||||
return (
|
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}>
|
<LazyLoader onVisible={this.onVisible}>
|
||||||
{ this.state.loading && <div className="mx-auto my-32 loading"><div></div></div> }
|
{ this.state.loading && <div className="mx-auto my-32 loading"><div></div></div> }
|
||||||
<FadeIn show={!this.state.loading}>
|
<FadeIn show={!this.state.loading}>
|
||||||
|
@ -14,17 +14,17 @@ export default class Browsers extends React.Component {
|
|||||||
this.onVisible = this.onVisible.bind(this)
|
this.onVisible = this.onVisible.bind(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
onVisible() {
|
|
||||||
this.fetchBrowsers()
|
|
||||||
if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (this.props.query !== prevProps.query) {
|
if (this.props.query !== prevProps.query) {
|
||||||
this.setState({loading: true, browsers: null})
|
this.setState({loading: true, browsers: null})
|
||||||
this.fetchBrowsers()
|
this.fetchBrowsers()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onVisible() {
|
||||||
|
this.fetchBrowsers()
|
||||||
|
if (this.props.timer) this.props.timer.onTick(this.fetchBrowsers.bind(this))
|
||||||
|
}
|
||||||
|
|
||||||
fetchBrowsers() {
|
fetchBrowsers() {
|
||||||
if (this.props.query.filters.browser) {
|
if (this.props.query.filters.browser) {
|
||||||
@ -84,9 +84,9 @@ export default class Browsers extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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> }
|
{ 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() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</LazyLoader>
|
</LazyLoader>
|
||||||
|
@ -8,7 +8,6 @@ import OperatingSystems from './operating-systems'
|
|||||||
import FadeIn from '../../fade-in'
|
import FadeIn from '../../fade-in'
|
||||||
import numberFormatter from '../../number-formatter'
|
import numberFormatter from '../../number-formatter'
|
||||||
import Bar from '../bar'
|
import Bar from '../bar'
|
||||||
import MoreLink from '../more-link'
|
|
||||||
import * as api from '../../api'
|
import * as api from '../../api'
|
||||||
|
|
||||||
|
|
||||||
@ -46,11 +45,6 @@ class ScreenSizes extends React.Component {
|
|||||||
this.onVisible = this.onVisible.bind(this)
|
this.onVisible = this.onVisible.bind(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
onVisible() {
|
|
||||||
this.fetchScreenSizes()
|
|
||||||
if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (this.props.query !== prevProps.query) {
|
if (this.props.query !== prevProps.query) {
|
||||||
this.setState({loading: true, sizes: null})
|
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() {
|
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}))
|
.then((res) => this.setState({loading: false, sizes: res}))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label() {
|
||||||
|
return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
|
||||||
|
}
|
||||||
|
|
||||||
renderScreenSize(size) {
|
renderScreenSize(size) {
|
||||||
const query = new URLSearchParams(window.location.search)
|
const query = new URLSearchParams(window.location.search)
|
||||||
query.set('screen', size.name)
|
query.set('screen', size.name)
|
||||||
@ -70,43 +77,59 @@ class ScreenSizes extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between my-1 text-sm" key={size.name}>
|
<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)'}}>
|
<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" />
|
<Bar
|
||||||
<span tooltip={EXPLANATION[size.name]} className="flex px-2 dark:text-gray-300" style={{marginTop: '-26px'}} >
|
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()}}>
|
<Link className="block truncate hover:underline" to={{search: query.toString()}}>
|
||||||
{iconFor(size.name)} {size.name}
|
{iconFor(size.name)} {size.name}
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
label() {
|
|
||||||
return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
|
|
||||||
}
|
|
||||||
|
|
||||||
renderList() {
|
renderList() {
|
||||||
if (this.state.sizes && this.state.sizes.length > 0) {
|
if (this.state.sizes && this.state.sizes.length > 0) {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<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>Screen size</span>
|
||||||
<span>{ this.label() }</span>
|
<span>{ this.label() }</span>
|
||||||
</div>
|
</div>
|
||||||
{ this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
|
{ this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
|
||||||
</React.Fragment>
|
</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() {
|
render() {
|
||||||
return (
|
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> }
|
{ 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() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</LazyLoader>
|
</LazyLoader>
|
||||||
@ -117,57 +140,85 @@ class ScreenSizes extends React.Component {
|
|||||||
export default class Devices extends React.Component {
|
export default class Devices extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.tabKey = 'deviceTab__' + props.site.domain
|
this.tabKey = `deviceTab__${ props.site.domain}`
|
||||||
const storedTab = storage.getItem(this.tabKey)
|
const storedTab = storage.getItem(this.tabKey)
|
||||||
this.state = {
|
this.state = {
|
||||||
mode: storedTab || 'size'
|
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) {
|
setMode(mode) {
|
||||||
return () => {
|
return () => {
|
||||||
storage.setItem(this.tabKey, mode)
|
storage.setItem(this.tabKey, mode)
|
||||||
this.setState({mode})
|
this.setState({mode})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) {
|
renderPill(name, mode) {
|
||||||
const isActive = this.state.mode === mode
|
const isActive = this.state.mode === mode
|
||||||
|
|
||||||
if (isActive) {
|
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>
|
return (
|
||||||
} else {
|
<li
|
||||||
return <li className="cursor-pointer hover:text-indigo-600" onClick={this.setMode(mode)}>{name}</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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="stats-item">
|
<div
|
||||||
<div className="relative p-4 bg-white rounded shadow-xl dark:bg-gray-825" style={{height: '436px'}}>
|
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">
|
<div className="flex justify-between w-full">
|
||||||
<h3 className="font-bold dark:text-gray-100">Devices</h3>
|
<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">
|
<ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
|
||||||
{ this.renderPill('Size', 'size') }
|
{ this.renderPill('Size', 'size') }
|
||||||
{ this.renderPill('Browser', 'browser') }
|
{ this.renderPill('Browser', 'browser') }
|
||||||
{ this.renderPill('OS', 'os') }
|
{ this.renderPill('OS', 'os') }
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{ this.renderContent() }
|
{ this.renderContent() }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -83,9 +83,9 @@ export default class OperatingSystems extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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> }
|
{ 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() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</LazyLoader>
|
</LazyLoader>
|
||||||
|
@ -4,9 +4,26 @@ import { Link } from 'react-router-dom'
|
|||||||
export default function MoreLink({site, list, endpoint}) {
|
export default function MoreLink({site, list, endpoint}) {
|
||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center w-full absolute bottom-0 left-0 pb-3">
|
<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}`} 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">
|
<Link
|
||||||
<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>
|
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
|
DETAILS
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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="flex items-center justify-between my-1 text-sm" key={page.name}>
|
||||||
<div className="w-full h-8 truncate" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
<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" />
|
<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>
|
<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>
|
<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>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
@ -57,7 +57,7 @@ export default class EntryPages extends React.Component {
|
|||||||
renderList() {
|
renderList() {
|
||||||
if (this.state.pages && this.state.pages.length > 0) {
|
if (this.state.pages && this.state.pages.length > 0) {
|
||||||
return (
|
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 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>Page url</span>
|
||||||
<span>Unique Entrances</span>
|
<span>Unique Entrances</span>
|
||||||
@ -66,19 +66,24 @@ export default class EntryPages extends React.Component {
|
|||||||
<FlipMove>
|
<FlipMove>
|
||||||
{ this.state.pages.map(this.renderPage.bind(this)) }
|
{ this.state.pages.map(this.renderPage.bind(this)) }
|
||||||
</FlipMove>
|
</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() {
|
render() {
|
||||||
const { loading } = this.state;
|
const { loading } = this.state;
|
||||||
return (
|
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> }
|
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||||
<FadeIn show={!loading}>
|
<FadeIn show={!loading} className="flex-grow">
|
||||||
{ this.renderList() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="entry-pages" />}
|
{!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() {
|
render() {
|
||||||
const { loading } = this.state;
|
const { loading } = this.state;
|
||||||
return (
|
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> }
|
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||||
<FadeIn show={!loading}>
|
<FadeIn show={!loading} className="flex-grow">
|
||||||
{ this.renderList() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="exit-pages" />}
|
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="exit-pages" />}
|
||||||
|
@ -1,11 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
|
|
||||||
import * as storage from '../../storage'
|
import * as storage from '../../storage'
|
||||||
import Visits from './pages'
|
import Visits from './pages'
|
||||||
import EntryPages from './entry-pages'
|
import EntryPages from './entry-pages'
|
||||||
import ExitPages from './exit-pages'
|
import ExitPages from './exit-pages'
|
||||||
import FadeIn from '../../fade-in'
|
|
||||||
|
|
||||||
const labelFor = {
|
const labelFor = {
|
||||||
'pages': 'Top Pages',
|
'pages': 'Top Pages',
|
||||||
@ -16,23 +14,13 @@ const labelFor = {
|
|||||||
export default class Pages extends React.Component {
|
export default class Pages extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.tabKey = 'pageTab__' + props.site.domain
|
this.tabKey = `pageTab__${ props.site.domain}`
|
||||||
const storedTab = storage.getItem(this.tabKey)
|
const storedTab = storage.getItem(this.tabKey)
|
||||||
this.state = {
|
this.state = {
|
||||||
mode: storedTab || 'pages'
|
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) {
|
setMode(mode) {
|
||||||
return () => {
|
return () => {
|
||||||
storage.setItem(this.tabKey, mode)
|
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) {
|
renderPill(name, mode) {
|
||||||
const isActive = this.state.mode === mode
|
const isActive = this.state.mode === mode
|
||||||
|
|
||||||
if (isActive) {
|
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 (
|
||||||
} else {
|
<li
|
||||||
return <li className="hover:text-indigo-600 cursor-pointer" onClick={this.setMode(mode)}>{name}</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() {
|
render() {
|
||||||
const filters = this.props.query.filters
|
|
||||||
return (
|
return (
|
||||||
<div className="stats-item">
|
<div
|
||||||
<div className="bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative" style={{height: '436px'}}>
|
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">
|
<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">
|
<ul className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
|
||||||
{ this.renderPill('Top Pages', 'pages') }
|
{ this.renderPill('Top Pages', 'pages') }
|
||||||
{ this.renderPill('Entry Pages', 'entry-pages') }
|
{ this.renderPill('Entry Pages', 'entry-pages') }
|
||||||
{ this.renderPill('Exit Pages', 'exit-pages') }
|
{ this.renderPill('Exit Pages', 'exit-pages') }
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Main Contents */}
|
||||||
{ this.renderContent() }
|
{ this.renderContent() }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -87,9 +87,9 @@ export default class Visits extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { loading } = this.state;
|
const { loading } = this.state;
|
||||||
return (
|
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> }
|
{ loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||||
<FadeIn show={!loading}>
|
<FadeIn show={!loading} className="flex-grow">
|
||||||
{ this.renderList() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="pages" />}
|
{!loading && <MoreLink site={this.props.site} list={this.state.pages} endpoint="pages" />}
|
||||||
|
@ -94,20 +94,27 @@ export default class Referrers extends React.Component {
|
|||||||
renderList() {
|
renderList() {
|
||||||
if (this.state.referrers.length > 0) {
|
if (this.state.referrers.length > 0) {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<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">
|
<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>Referrer</span>
|
||||||
<span>{ this.label() }</span>
|
<span>{ this.label() }</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FlipMove>
|
<FlipMove className="flex-grow">
|
||||||
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
||||||
</FlipMove>
|
</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() {
|
renderContent() {
|
||||||
@ -123,13 +130,15 @@ export default class Referrers extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="relative p-4 bg-white rounded shadow-xl stats-item dark:bg-gray-825" style={{height: '436px'}}>
|
<div
|
||||||
<LazyLoader onVisible={this.onVisible}>
|
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>
|
<h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
|
||||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></div> }
|
||||||
<FadeIn show={!this.state.loading}>
|
<FadeIn show={!this.state.loading}>
|
||||||
{ this.renderContent() }
|
{ this.renderContent() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</LazyLoader>
|
</LazyLoader>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -107,9 +107,11 @@ export default class SearchTerms extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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> }
|
{ 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() }
|
{ this.renderContent() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</div>
|
</div>
|
||||||
|
@ -99,7 +99,9 @@ class AllSources extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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() }
|
{ this.renderContent() }
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -166,17 +168,17 @@ class UTMSources extends React.Component {
|
|||||||
renderList() {
|
renderList() {
|
||||||
if (this.state.referrers && this.state.referrers.length > 0) {
|
if (this.state.referrers && this.state.referrers.length > 0) {
|
||||||
return (
|
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">
|
<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>{UTM_TAGS[this.props.tab].label}</span>
|
||||||
<span>{this.label()}</span>
|
<span>{this.label()}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FlipMove>
|
<FlipMove className="flex-grow">
|
||||||
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
{this.state.referrers.map(this.renderReferrer.bind(this))}
|
||||||
</FlipMove>
|
</FlipMove>
|
||||||
<MoreLink site={this.props.site} list={this.state.referrers} endpoint={UTM_TAGS[this.props.tab].endpoint} />
|
<MoreLink site={this.props.site} list={this.state.referrers} endpoint={UTM_TAGS[this.props.tab].endpoint} />
|
||||||
</React.Fragment>
|
</div>
|
||||||
)
|
)
|
||||||
} else {
|
} 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>
|
||||||
@ -191,7 +193,7 @@ class UTMSources extends React.Component {
|
|||||||
{ this.props.renderTabs() }
|
{ this.props.renderTabs() }
|
||||||
</div>
|
</div>
|
||||||
{ this.state.loading && <div className="mx-auto loading mt-44"><div></div></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() }
|
{ this.renderList() }
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
@ -200,7 +202,9 @@ class UTMSources extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
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() }
|
{ this.renderContent() }
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user