diff --git a/assets/css/modal.css b/assets/css/modal.css index 2a36314ef..a87b55f76 100644 --- a/assets/css/modal.css +++ b/assets/css/modal.css @@ -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; } diff --git a/assets/js/dashboard/stats/modals/countries.js b/assets/js/dashboard/stats/modals/countries.js index 82da8faa2..396f86d4f 100644 --- a/assets/js/dashboard/stats/modals/countries.js +++ b/assets/js/dashboard/stats/modals/countries.js @@ -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 ( - + {country.full_country_name} @@ -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 (
) - } else if (this.state.countries) { + } + + if (this.state.countries) { return ( - + <>

Top countries

- +
- - + + @@ -67,7 +83,7 @@ class CountriesModal extends React.Component {
Country{this.label()} + Country + + {this.label()} +
-
+ ) } } diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js index fae48642f..0f381823d 100644 --- a/assets/js/dashboard/stats/modals/entry-pages.js +++ b/assets/js/dashboard/stats/modals/entry-pages.js @@ -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 ( - {page.name} + + {page.name} + {numberFormatter(page.count)} {numberFormatter(page.entries)} @@ -79,18 +97,34 @@ class EntryPagesModal extends React.Component { renderBody() { if (this.state.pages) { return ( - + <>

Entry Pages

- +
- - - - {} + + + + @@ -98,7 +132,7 @@ class EntryPagesModal extends React.Component {
Page urlUnique EntrancesTotal EntrancesVisit DurationPage url + Unique Entrances + Total Entrances + Visit Duration +
-
+ ) } } diff --git a/assets/js/dashboard/stats/modals/exit-pages.js b/assets/js/dashboard/stats/modals/exit-pages.js index a4e295a2b..d78260f71 100644 --- a/assets/js/dashboard/stats/modals/exit-pages.js +++ b/assets/js/dashboard/stats/modals/exit-pages.js @@ -80,7 +80,7 @@ class ExitPagesModal extends React.Component {
- +
diff --git a/assets/js/dashboard/stats/modals/google-keywords.js b/assets/js/dashboard/stats/modals/google-keywords.js index 35d8d0fe2..152e12ed3 100644 --- a/assets/js/dashboard/stats/modals/google-keywords.js +++ b/assets/js/dashboard/stats/modals/google-keywords.js @@ -81,7 +81,7 @@ class GoogleKeywordsModal extends React.Component { } } else if (this.state.searchTerms.length > 0) { return ( -
Page url
+
diff --git a/assets/js/dashboard/stats/modals/modal.js b/assets/js/dashboard/stats/modals/modal.js index cd6603baa..4cff28700 100644 --- a/assets/js/dashboard/stats/modals/modal.js +++ b/assets/js/dashboard/stats/modals/modal.js @@ -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(
-
+
{this.props.children}
diff --git a/assets/js/dashboard/stats/modals/pages.js b/assets/js/dashboard/stats/modals/pages.js index cd0c8d4b6..1a5e6aaf6 100644 --- a/assets/js/dashboard/stats/modals/pages.js +++ b/assets/js/dashboard/stats/modals/pages.js @@ -96,7 +96,7 @@ class PagesModal extends React.Component {
-
Search Term
+
diff --git a/assets/js/dashboard/stats/modals/referrer-drilldown.js b/assets/js/dashboard/stats/modals/referrer-drilldown.js index 499674adf..dab780712 100644 --- a/assets/js/dashboard/stats/modals/referrer-drilldown.js +++ b/assets/js/dashboard/stats/modals/referrer-drilldown.js @@ -149,7 +149,7 @@ class ReferrerDrilldownModal extends React.Component {

{this.state.totalVisitors} visitors from {decodeURIComponent(this.props.match.params.referrer)}
{toHuman(this.state.query)}

{this.renderGoalText()} -
Page url
+
diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js index 18c7ed8c5..1b0f8e288 100644 --- a/assets/js/dashboard/stats/modals/sources.js +++ b/assets/js/dashboard/stats/modals/sources.js @@ -125,7 +125,7 @@ class SourcesModal extends React.Component {
-
Referrer
+
Source