Merge branch 'feature/details-modal-mobile' of github.com:hirusi/analytics

This commit is contained in:
hirusi 2021-07-27 10:46:13 +05:30
commit 87e9fb92d0
9 changed files with 105 additions and 35 deletions

View File

@ -31,7 +31,7 @@
bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 99;
overflow-x: hidden;
overflow-x: auto;
overflow-y: auto;
}

View File

@ -4,7 +4,6 @@ import { Link, withRouter } from 'react-router-dom'
import Modal from './modal'
import * as api from '../../api'
import numberFormatter from '../../number-formatter'
import Bar from '../bar'
import {parseQuery} from '../../query'
class CountriesModal extends React.Component {
@ -21,6 +20,10 @@ class CountriesModal extends React.Component {
.then((res) => this.setState({loading: false, countries: res}))
}
label() {
return this.state.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
}
renderCountry(country) {
const query = new URLSearchParams(window.location.search)
query.set('country', country.name)
@ -28,7 +31,11 @@ class CountriesModal extends React.Component {
return (
<tr className="text-sm dark:text-gray-200" key={country.name}>
<td className="p-2">
<Link className="hover:underline" to={{search: query.toString(), pathname: '/' + encodeURIComponent(this.props.site.domain)}}>
<Link
className="hover:underline"
to={{search: query.toString(),
pathname: `/${ encodeURIComponent(this.props.site.domain)}`}}
>
{country.full_country_name}
</Link>
</td>
@ -39,27 +46,36 @@ class CountriesModal extends React.Component {
)
}
label() {
return this.state.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
}
renderBody() {
if (this.state.loading) {
return (
<div className="loading mt-32 mx-auto"><div></div></div>
)
} else if (this.state.countries) {
}
if (this.state.countries) {
return (
<React.Fragment>
<>
<h1 className="text-xl font-bold dark:text-gray-100">Top countries</h1>
<div className="my-4 border-b border-gray-300 dark:border-gray-500"></div>
<main className="modal__content">
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Country</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">{this.label()}</th>
<th
className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="left"
>
Country
</th>
<th
// eslint-disable-next-line max-len
className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="right"
>
{this.label()}
</th>
</tr>
</thead>
<tbody>
@ -67,7 +83,7 @@ class CountriesModal extends React.Component {
</tbody>
</table>
</main>
</React.Fragment>
</>
)
}
}

View File

@ -1,6 +1,6 @@
import React from "react";
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import { Link , withRouter } from 'react-router-dom'
import Modal from './modal'
import * as api from '../../api'
@ -26,12 +26,23 @@ class EntryPagesModal extends React.Component {
loadPages() {
const {query, page, pages} = this.state;
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/entry-pages`, query, {limit: 100, page})
.then((res) => this.setState((state) => ({loading: false, pages: state.pages.concat(res), moreResultsAvailable: res.length === 100})))
api.get(
`/api/stats/${encodeURIComponent(this.props.site.domain)}/entry-pages`,
query,
{limit: 100, page}
)
.then(
(res) => this.setState((state) => ({
loading: false,
pages: state.pages.concat(res),
moreResultsAvailable: res.length === 100
}))
)
}
loadMore() {
this.setState({loading: true, page: this.state.page + 1}, this.loadPages.bind(this))
const { page } = this.state;
this.setState({loading: true, page: page + 1}, this.loadPages.bind(this))
}
showVisitDuration() {
@ -40,10 +51,9 @@ class EntryPagesModal extends React.Component {
formatBounceRate(page) {
if (typeof(page.bounce_rate) === 'number') {
return page.bounce_rate + '%'
} else {
return '-'
return `${page.bounce_rate}%`;
}
return '-';
}
renderPage(page) {
@ -53,7 +63,15 @@ class EntryPagesModal extends React.Component {
return (
<tr className="text-sm dark:text-gray-200" key={page.name}>
<td className="p-2">
<Link to={{pathname: `/${encodeURIComponent(this.props.site.domain)}`, search: query.toString()}} className="hover:underline">{page.name}</Link>
<Link
to={{
pathname: `/${encodeURIComponent(this.props.site.domain)}`,
search: query.toString()
}}
className="hover:underline"
>
{page.name}
</Link>
</td>
<td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.count)}</td>
<td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.entries)}</td>
@ -79,18 +97,34 @@ class EntryPagesModal extends React.Component {
renderBody() {
if (this.state.pages) {
return (
<React.Fragment>
<>
<h1 className="text-xl font-bold dark:text-gray-100">Entry Pages</h1>
<div className="my-4 border-b border-gray-300"></div>
<main className="modal__content">
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Page url</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Unique Entrances</th>
<th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Total Entrances</th>
{<th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visit Duration</th>}
<th
className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="left"
>Page url
</th>
<th
className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="right"
>Unique Entrances
</th>
<th
className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="right"
>Total Entrances
</th>
<th
className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
align="right"
>Visit Duration
</th>
</tr>
</thead>
<tbody>
@ -98,7 +132,7 @@ class EntryPagesModal extends React.Component {
</tbody>
</table>
</main>
</React.Fragment>
</>
)
}
}

View File

@ -80,7 +80,7 @@ class ExitPagesModal extends React.Component {
<div className="my-4 border-b border-gray-300"></div>
<main className="modal__content">
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Page url</th>

View File

@ -81,7 +81,7 @@ class GoogleKeywordsModal extends React.Component {
}
} else if (this.state.searchTerms.length > 0) {
return (
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Search Term</th>

View File

@ -42,12 +42,32 @@ class Modal extends React.Component {
this.props.history.push(`/${encodeURIComponent(this.props.site.domain)}${this.props.location.search}`)
}
/**
* @description
* Decide whether to set max-width, and if so, to what.
* If no max-width is available, set width instead to max-content.
*/
getStyle() {
const { maxWidth } = this.props;
const styleObject = {};
if (maxWidth) {
styleObject.maxWidth = maxWidth;
} else {
styleObject.width = "max-content";
}
return styleObject;
}
render() {
return createPortal(
<div className="modal is-open" onClick={this.props.onClick}>
<div className="modal__overlay">
<button className="modal__close"></button>
<div ref={this.node} className="modal__container dark:bg-gray-800" style={{maxWidth: this.props.maxWidth || '860px'}}>
<div
ref={this.node}
className="modal__container dark:bg-gray-800"
style={this.getStyle()}
>
{this.props.children}
</div>

View File

@ -96,7 +96,7 @@ class PagesModal extends React.Component {
<div className="my-4 border-b border-gray-300"></div>
<main className="modal__content">
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Page url</th>

View File

@ -149,7 +149,7 @@ class ReferrerDrilldownModal extends React.Component {
<h1 className="text-xl font-semibold mb-0 leading-none dark:text-gray-200">{this.state.totalVisitors} visitors from {decodeURIComponent(this.props.match.params.referrer)}<br /> {toHuman(this.state.query)}</h1>
{this.renderGoalText()}
<table className="w-full table-striped table-fixed mt-4">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed mt-4">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Referrer</th>

View File

@ -125,7 +125,7 @@ class SourcesModal extends React.Component {
<div className="my-4 border-b border-gray-300 dark:border-gray-500"></div>
<main className="modal__content">
<table className="w-full table-striped table-fixed">
<table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
<thead>
<tr>
<th className="p-2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Source</th>