Implement search in Details views

assets/js/dashboard/components/query-context-hoc.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect} from "react"
+import * as api from '../api'
+import { useMountedEffect } from '../custom-hooks'
+import { parseQuery } from "../query"
+
+// A Higher-Order component that tracks `query` state, and additional context
+// related to it, such as:
+
+// * `importedDataInView` - simple state with a `false` default. An
+//   `updateImportedDataInView` prop will be passed into the WrappedComponent
+//   and allows changing that according to responses from the API.
+
+// * `lastLoadTimestamp` - used for displaying a tooltip with time passed since
+//   the last update in realtime components.
+
+export default function withQueryContext(WrappedComponent) {
+  return (props) => {
+    const { site, location } = props
+
+    const [query, setQuery] = useState(parseQuery(location.search, site))
+    const [importedDataInView, setImportedDataInView] = useState(false)
+    const [lastLoadTimestamp, setLastLoadTimestamp] = useState(new Date())
+
+    const updateLastLoadTimestamp = () => { setLastLoadTimestamp(new Date()) }
+
+    useEffect(() => {
+      document.addEventListener('tick', updateLastLoadTimestamp)
+
+      return () => {
+        document.removeEventListener('tick', updateLastLoadTimestamp)
+      }
+    }, [])
+
+    useMountedEffect(() => {
+      api.cancelAll()
+      setQuery(parseQuery(location.search, site))
+      updateLastLoadTimestamp()
+    }, [location.search])
+
+    return (
+      <WrappedComponent
+        {...props}
+        query={query}
+        importedDataInView={importedDataInView}
+        updateImportedDataInView={setImportedDataInView}
+        lastLoadTimestamp={lastLoadTimestamp}
+      />
+    )
+  }
+}

assets/js/dashboard/custom-hooks.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 // A custom hook that behaves like `useEffect`, but
 // the function does not run on the initial render.
@@ -12,4 +12,16 @@ export function useMountedEffect(fn, deps) {
       mounted.current = true
     }
   }, deps)
+}
+
+// A custom hook that debounces the function calls by
+// a given delay. Cancels all function calls that have
+// a following call within `delay_ms`.
+export function useDebouncedEffect(fn, deps, delay_ms) {
+  const callback = useCallback(fn, deps)
+
+  useEffect(() => {
+    const timeout = setTimeout(callback, delay_ms)
+    return () => clearTimeout(timeout)
+  }, [callback, delay_ms])
 }

assets/js/dashboard/index.js

@@ -1,35 +1,22 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react'
 import { withRouter } from 'react-router-dom'
 
-import { useMountedEffect } from './custom-hooks';
 import Historical from './historical'
 import Realtime from './realtime'
-import {parseQuery} from './query'
-import * as api from './api'
+import withQueryContext from './components/query-context-hoc';
 
 export const statsBoxClass = "stats-item relative w-full mt-6 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded"
 
 function Dashboard(props) {
-  const { location, site, loggedIn, currentUserRole } = props
-  const [query, setQuery] = useState(parseQuery(location.search, site))
-  const [importedDataInView, setImportedDataInView] = useState(false)
-  const [lastLoadTimestamp, setLastLoadTimestamp] = useState(new Date())
-  const updateLastLoadTimestamp = () => { setLastLoadTimestamp(new Date()) }
-
-  useEffect(() => {
-    document.addEventListener('tick', updateLastLoadTimestamp)
-
-    return () => {
-      document.removeEventListener('tick', updateLastLoadTimestamp)
-    }
-  }, [])
-
-  useMountedEffect(() => {
-    api.cancelAll()
-    setQuery(parseQuery(location.search, site))
-    updateLastLoadTimestamp()
-  }, [location.search])
-
+  const {
+    site,
+    loggedIn,
+    currentUserRole,
+    query,
+    importedDataInView,
+    updateImportedDataInView,
+    lastLoadTimestamp
+  } = props
 
   if (query.period === 'realtime') {
     return (
@@ -50,10 +37,10 @@ function Dashboard(props) {
         query={query}
         lastLoadTimestamp={lastLoadTimestamp}
         importedDataInView={importedDataInView}
-        updateImportedDataInView={setImportedDataInView}
+        updateImportedDataInView={updateImportedDataInView}
       />
     )
   }
 }
 
-export default withRouter(Dashboard)
+export default withRouter(withQueryContext(Dashboard))

assets/js/dashboard/query.js

@@ -5,6 +5,7 @@ import { PlausibleSearchParams, updatedQuery } from './util/url'
 import { nowForSite } from './util/date'
 import * as storage from './util/storage'
 import { COMPARISON_DISABLED_PERIODS, getStoredComparisonMode, isComparisonEnabled, getStoredMatchDayOfWeek } from './comparison-input'
+import { getFiltersByKeyPrefix } from './util/filters'
 
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
@@ -48,6 +49,10 @@ export function parseQuery(querystring, site) {
   }
 }
 
+export function addFilter(query, filter) {
+  return {...query, filters: [...query.filters, filter]}
+}
+
 export function navigateToQuery(history, queryFrom, newData) {
   // if we update any data that we store in localstorage, make sure going back in history will
   // revert them
@@ -134,6 +139,26 @@ export function filtersBackwardsCompatibilityRedirect() {
   }
 }
 
+// Returns a boolean indicating whether the given query includes a
+// non-empty goal filterset containing a single, or multiple revenue
+// goals with the same currency. Used to decide whether to render
+// revenue metrics in a dashboard report or not.
+export function revenueAvailable(query, site) {
+  const revenueGoalsInFilter = site.revenueGoals.filter((rg) => {
+    const goalFilters = getFiltersByKeyPrefix(query, "goal")
+
+    return goalFilters.some(([_op, _key, clauses]) => {
+      return clauses.includes(rg.event_name)
+    })
+  })
+
+  const singleCurrency = revenueGoalsInFilter.every((rg) => {
+    return rg.currency === revenueGoalsInFilter[0].currency
+  })
+
+  return revenueGoalsInFilter.length > 0 && singleCurrency
+}
+
 function QueryLink(props) {
   const { query, history, to, className, children } = props
 

assets/js/dashboard/realtime.js

@@ -28,7 +28,7 @@ function Realtime(props) {
           <Datepicker site={site} query={query} />
         </div>
       </div>
-      <VisitorGraph site={site} query={query} lastLoadTimestamp={lastLoadTimestamp} />
+      <VisitorGraph site={site} query={query} lastLoadTimestamp={lastLoadTimestamp}/>
       <div className="w-full md:flex">
         <div className={ statsBoxClass }>
           <Sources site={site} query={query} />

assets/js/dashboard/router.js

@@ -8,11 +8,10 @@ import GoogleKeywordsModal from './stats/modals/google-keywords'
 import PagesModal from './stats/modals/pages'
 import EntryPagesModal from './stats/modals/entry-pages'
 import ExitPagesModal from './stats/modals/exit-pages'
-import ModalTable from './stats/modals/table'
+import LocationsModal from './stats/modals/locations-modal';
 import PropsModal from './stats/modals/props'
 import ConversionsModal from './stats/modals/conversions'
 import FilterModal from './stats/modals/filter-modal'
-import * as url from './util/url';
 
 function ScrollToTop() {
   const location = useLocation();
@@ -51,14 +50,8 @@ export default function Router({ site, loggedIn, currentUserRole }) {
           <Route path="/exit-pages">
             <ExitPagesModal site={site} />
           </Route>
-          <Route path="/countries">
-            <ModalTable title="Top countries" site={site} endpoint={url.apiPath(site, '/countries')} filterKey="country" keyLabel="Country" renderIcon={renderCountryIcon} showPercentage={true} />
-          </Route>
-          <Route path="/regions">
-            <ModalTable title="Top regions" site={site} endpoint={url.apiPath(site, '/regions')} filterKey="region" keyLabel="Region" renderIcon={renderRegionIcon} />
-          </Route>
-          <Route path="/cities">
-            <ModalTable title="Top cities" site={site} endpoint={url.apiPath(site, '/cities')} filterKey="city" keyLabel="City" renderIcon={renderCityIcon} />
+          <Route exact path={["/countries", "/regions", "/cities"]}>
+            <LocationsModal site={site} />
           </Route>
           <Route path="/custom-prop-values/:prop_key">
             <PropsModal site={site} />
@@ -74,15 +67,3 @@ export default function Router({ site, loggedIn, currentUserRole }) {
     </BrowserRouter >
   );
 }
-
-function renderCityIcon(city) {
-  return <span className="mr-1">{city.country_flag}</span>
-}
-
-function renderCountryIcon(country) {
-  return <span className="mr-1">{country.flag}</span>
-}
-
-function renderRegionIcon(region) {
-  return <span className="mr-1">{region.country_flag}</span>
-}

assets/js/dashboard/stats/behaviours/conversions.js

@@ -2,7 +2,7 @@ import React from 'react';
 import * as api from '../../api'
 import * as url from '../../util/url'
 
-import { CR_METRIC } from '../reports/metrics';
+import * as metrics from '../reports/metrics';
 import ListReport from '../reports/list';
 
 export default function Conversions(props) {
@@ -19,6 +19,16 @@ export default function Conversions(props) {
     }
   }
 
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: {plot: true}}),
+      metrics.createEvents({renderLabel: (_query) => "Total", meta: {hiddenOnMobile: true}}),
+      metrics.createConversionRate(),
+      BUILD_EXTRA && metrics.createTotalRevenue({meta: {hiddenOnMobile: true}}),
+      BUILD_EXTRA && metrics.createAverageRevenue({meta: {hiddenOnMobile: true}})
+    ].filter(metric => !!metric)
+  }
+
   /*global BUILD_EXTRA*/
   return (
     <ListReport
@@ -27,13 +37,7 @@ export default function Conversions(props) {
       getFilterFor={getFilterFor}
       keyLabel="Goal"
       onClick={props.onGoalFilterClick}
-      metrics={[
-        { name: 'visitors', label: "Uniques", plot: true },
-        { name: 'events', label: "Total", hiddenOnMobile: true },
-        CR_METRIC,
-        BUILD_EXTRA && { name: 'total_revenue', label: 'Revenue', hiddenOnMobile: true },
-        BUILD_EXTRA && { name: 'average_revenue', label: 'Average', hiddenOnMobile: true }
-      ]}
+      metrics={chooseMetrics()}
       detailsLink={url.sitePath('conversions')}
       maybeHideDetails={true}
       query={query}

assets/js/dashboard/stats/behaviours/goal-conversions.js

@@ -1,7 +1,7 @@
 import React from "react"
 import Conversions from './conversions'
 import ListReport from "../reports/list"
-import { CR_METRIC } from "../reports/metrics"
+import * as metrics from '../reports/metrics'
 import * as url from "../../util/url"
 import * as api from "../../api"
 import { EVENT_PROPS_PREFIX, getGoalFilter } from "../../util/filters"
@@ -53,17 +53,21 @@ function SpecialPropBreakdown(props) {
     }
   }
 
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: {plot: true}}),
+      metrics.createEvents({renderLabel: (_query) => "Events", meta: {hiddenOnMobile: true}}),
+      metrics.createConversionRate()
+    ].filter(metric => !!metric)
+  }
+
   return (
     <ListReport
       fetchData={fetchData}
       afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel={prop}
-      metrics={[
-        { name: 'visitors', label: 'Visitors', plot: true },
-        { name: 'events', label: 'Events', hiddenOnMobile: true },
-        CR_METRIC
-      ]}
+      metrics={chooseMetrics()}
       detailsLink={url.sitePath(`custom-prop-values/${prop}`)}
       externalLinkDest={externalLinkDest()}
       maybeHideDetails={true}

assets/js/dashboard/stats/behaviours/props.js

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react"
 import ListReport, { MIN_HEIGHT } from "../reports/list";
 import Combobox from '../../components/combobox'
+import * as metrics from '../reports/metrics'
 import * as api from '../../api'
 import * as url from '../../util/url'
-import { CR_METRIC, PERCENTAGE_METRIC } from "../reports/metrics";
 import * as storage from "../../util/storage";
 import { EVENT_PROPS_PREFIX, getGoalFilter, FILTER_OPERATIONS, hasGoalFilter } from "../../util/filters"
 import classNames from "classnames";
@@ -82,22 +82,27 @@ export default function Properties(props) {
       setPropKey(newPropKey)
     }
   }
-
+  
   /*global BUILD_EXTRA*/
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: {plot: true}}),
+      metrics.createEvents({renderLabel: (_query) => "Events", meta: {hiddenOnMobile: true}}),
+      hasGoalFilter(query) && metrics.createConversionRate(),
+      !hasGoalFilter(query) && metrics.createPercentage(),
+      BUILD_EXTRA && metrics.createTotalRevenue({meta: {hiddenOnMobile: true}}),
+      BUILD_EXTRA && metrics.createAverageRevenue({meta: {hiddenOnMobile: true}})
+    ].filter(metric => !!metric)
+  }
+
   function renderBreakdown() {
     return (
       <ListReport
         fetchData={fetchProps}
         afterFetchData={props.afterFetchData}
         getFilterFor={getFilterFor}
         keyLabel={propKey}
-        metrics={[
-          { name: 'visitors', label: 'Visitors', plot: true },
-          { name: 'events', label: 'Events', hiddenOnMobile: true },
-          hasGoalFilter(query) ? CR_METRIC : PERCENTAGE_METRIC,
-          BUILD_EXTRA && { name: 'total_revenue', label: 'Revenue', hiddenOnMobile: true },
-          BUILD_EXTRA && { name: 'average_revenue', label: 'Average', hiddenOnMobile: true }
-        ]}
+        metrics={chooseMetrics()}
         detailsLink={url.sitePath(`custom-prop-values/${propKey}`)}
         maybeHideDetails={true}
         query={query}