From 69debac158e72a7e6d922c03cb12a180b887a684 Mon Sep 17 00:00:00 2001 From: hirusi Date: Fri, 9 Jul 2021 18:49:08 +0530 Subject: [PATCH 1/3] Format countries modal * Remove unused imports * Run ESLint and make related fixes --- assets/js/dashboard/stats/modals/countries.js | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/assets/js/dashboard/stats/modals/countries.js b/assets/js/dashboard/stats/modals/countries.js index 82da8faa2006..eb3355125f65 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,18 +46,16 @@ 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

@@ -58,8 +63,19 @@ class CountriesModal extends React.Component { - - + + @@ -67,7 +83,7 @@ class CountriesModal extends React.Component {
Country{this.label()} + Country + + {this.label()} +
- + ) } } From a5c481692dd56c22658652508d1badfdda37699c Mon Sep 17 00:00:00 2001 From: hirusi Date: Fri, 9 Jul 2021 18:53:43 +0530 Subject: [PATCH 2/3] ESlint formatting for entry pages modal --- .../js/dashboard/stats/modals/entry-pages.js | 64 ++++++++++++++----- 1 file changed, 49 insertions(+), 15 deletions(-) diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js index fae48642f7ca..d9976fe30d28 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,7 +97,7 @@ class EntryPagesModal extends React.Component { renderBody() { if (this.state.pages) { return ( - + <>

Entry Pages

@@ -87,10 +105,26 @@ class EntryPagesModal extends React.Component { - - - - {} + + + + @@ -98,7 +132,7 @@ class EntryPagesModal extends React.Component {
Page urlUnique EntrancesTotal EntrancesVisit DurationPage url + Unique Entrances + Total Entrances + Visit Duration +
- + ) } } From 5790580add306e9749c3857b5ca2cf0c8e3125ed Mon Sep 17 00:00:00 2001 From: hirusi Date: Tue, 27 Jul 2021 10:06:47 +0530 Subject: [PATCH 3/3] WIP: proof of concept for scrollable modals on mobile --- assets/css/modal.css | 2 +- assets/js/dashboard/stats/modals/countries.js | 2 +- .../js/dashboard/stats/modals/entry-pages.js | 2 +- .../js/dashboard/stats/modals/exit-pages.js | 2 +- .../dashboard/stats/modals/google-keywords.js | 2 +- assets/js/dashboard/stats/modals/modal.js | 22 ++++++++++++++++++- assets/js/dashboard/stats/modals/pages.js | 2 +- .../stats/modals/referrer-drilldown.js | 2 +- assets/js/dashboard/stats/modals/sources.js | 2 +- 9 files changed, 29 insertions(+), 9 deletions(-) diff --git a/assets/css/modal.css b/assets/css/modal.css index 2a36314ef6cb..a87b55f76f46 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 eb3355125f65..396f86d4f5eb 100644 --- a/assets/js/dashboard/stats/modals/countries.js +++ b/assets/js/dashboard/stats/modals/countries.js @@ -60,7 +60,7 @@ class CountriesModal extends React.Component {
- +
- +
- +
diff --git a/assets/js/dashboard/stats/modals/google-keywords.js b/assets/js/dashboard/stats/modals/google-keywords.js index 35d8d0fe2641..152e12ed31ac 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 cd6603baa575..4cff28700b15 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 cd0c8d4b6f3c..1a5e6aaf608d 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 499674adf74b..dab780712a7f 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 bf56277e403f..1b2ef63df2d3 100644 --- a/assets/js/dashboard/stats/modals/sources.js +++ b/assets/js/dashboard/stats/modals/sources.js @@ -126,7 +126,7 @@ class SourcesModal extends React.Component {
-
Referrer
+
Source