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

…ytics
plausible · Jul 27, 2021 · 87e9fb9 · 87e9fb9
2 parents beea6a0 + 5790580
commit 87e9fb9
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 35 deletions.
diff --git 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
@@ -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,14 +20,22 @@ 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)
 
     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,35 +46,44 @@ 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>
                 { this.state.countries.map(this.renderCountry.bind(this)) }
               </tbody>
             </table>
           </main>
-        </React.Fragment>
+        </>
       )
     }
   }

diff --git 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 (
       <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,26 +97,42 @@ 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>
                 { this.state.pages.map(this.renderPage.bind(this)) }
               </tbody>
             </table>
           </main>
-        </React.Fragment>
+        </>
       )
     }
   }

diff --git 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 {
 
           <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>

diff --git 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 (
-        <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>

diff --git 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(
       <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>
 

diff --git 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 {
 
           <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>

diff --git 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 {
             <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>

diff --git 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 {
         <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>