From ce1df315d3a0669ba96a244e96f49c190cd8dbb8 Mon Sep 17 00:00:00 2001
From: Artur Pata <artur.pata@gmail.com>
Date: Tue, 25 Mar 2025 12:16:54 +0200
Subject: [PATCH] Remove format pragma, run prettier on /assets (#5237)

---
 assets/.prettierignore                        |   1 +
 assets/.prettierrc.json                       |   1 -
 assets/css/app.css                            |   2 -
 assets/css/chartjs.css                        |   1 -
 assets/css/flatpickr-colors.css               |   1 -
 assets/css/loader.css                         |   1 -
 assets/css/modal.css                          |   1 -
 assets/css/storybook.css                      |   6 +-
 assets/css/tooltip.css                        |   1 -
 assets/js/app.js                              |  31 +-
 assets/js/dashboard.tsx                       |   2 -
 assets/js/dashboard/api.ts                    |   1 -
 assets/js/dashboard/components/combobox.js    |   2 -
 .../dashboard/components/drilldown-link.tsx   |   2 -
 .../js/dashboard/components/error-panel.tsx   |   2 -
 .../components/filter-operator-selector.js    |   2 -
 assets/js/dashboard/components/lazy-loader.js |  10 +-
 assets/js/dashboard/components/notice.js      |  59 ++-
 assets/js/dashboard/components/popover.tsx    |   1 -
 .../js/dashboard/components/search-input.tsx  |   2 -
 .../js/dashboard/components/sort-button.tsx   |   2 -
 assets/js/dashboard/components/table.tsx      |   2 -
 assets/js/dashboard/custom-hooks.js           |  23 +-
 assets/js/dashboard/dashboard-keybinds.tsx    |   1 -
 .../dashboard/error/error-boundary.test.tsx   |   2 -
 assets/js/dashboard/error/error-boundary.tsx  |   2 -
 .../error/something-went-wrong.test.tsx       |   2 -
 .../dashboard/error/something-went-wrong.tsx  |   2 -
 assets/js/dashboard/extra/funnel-tooltip.js   |  14 +-
 assets/js/dashboard/extra/funnel.js           | 137 +++--
 assets/js/dashboard/fade-in.js                |   8 +-
 .../filtering/segments-context.test.tsx       |   2 -
 .../dashboard/filtering/segments-context.tsx  |   1 -
 .../js/dashboard/filtering/segments.test.ts   |   2 -
 assets/js/dashboard/filtering/segments.ts     |   2 -
 assets/js/dashboard/hooks/api-client.ts       |   2 -
 .../js/dashboard/hooks/use-order-by.test.ts   |   2 -
 assets/js/dashboard/hooks/use-order-by.ts     |   2 -
 assets/js/dashboard/hooks/use-previous.ts     |  12 +-
 assets/js/dashboard/index.tsx                 |   2 -
 assets/js/dashboard/keybinding.tsx            |   1 -
 assets/js/dashboard/last-load-context.tsx     |   1 -
 assets/js/dashboard/nav-menu/filter-menu.tsx  |   2 -
 assets/js/dashboard/nav-menu/filter-pill.tsx  |   2 -
 .../dashboard/nav-menu/filter-pills-list.tsx  |   2 -
 .../dashboard/nav-menu/filters-bar.test.tsx   |   2 -
 assets/js/dashboard/nav-menu/filters-bar.tsx  |   2 -
 .../nav-menu/nav-menu-components.tsx          |   2 -
 .../query-periods/comparison-period-menu.tsx  |   2 -
 .../date-range-calendar.test.tsx              |   2 -
 .../query-periods/date-range-calendar.tsx     |   1 -
 .../query-periods/move-period-arrows.tsx      |   1 -
 .../query-periods/query-dates.test.tsx        |   2 -
 .../query-periods/query-period-menu.tsx       |   2 -
 .../query-periods/query-periods-picker.tsx    |   2 -
 .../query-periods/shared-menu-items.tsx       |   2 -
 .../segments/searchable-segments-section.tsx  |   2 -
 .../nav-menu/segments/segment-menu.tsx        |   2 -
 assets/js/dashboard/nav-menu/top-bar.test.tsx |   2 -
 assets/js/dashboard/nav-menu/top-bar.tsx      |   2 -
 .../navigation/routeless-modals-context.tsx   |   1 -
 .../dashboard/navigation/use-app-navigate.tsx |   1 -
 .../use-definite-location-state.tsx           |   2 -
 assets/js/dashboard/query-context.tsx         |   1 -
 .../js/dashboard/query-time-periods.test.ts   |   2 -
 assets/js/dashboard/query-time-periods.ts     |   1 -
 assets/js/dashboard/query.ts                  |   2 -
 assets/js/dashboard/router.tsx                |   1 -
 .../segments/routeless-segment-modals.tsx     |   2 -
 .../segments/segment-authorship.test.tsx      |   2 -
 .../dashboard/segments/segment-authorship.tsx |   2 -
 .../segments/segment-modals.test.tsx          |   2 -
 .../js/dashboard/segments/segment-modals.tsx  |   2 -
 assets/js/dashboard/site-context.test.tsx     |   1 -
 assets/js/dashboard/site-context.tsx          |   1 -
 assets/js/dashboard/stats/bar.js              |  29 +-
 .../dashboard/stats/behaviours/conversions.js |  45 +-
 .../stats/behaviours/goal-conversions.js      |  68 ++-
 assets/js/dashboard/stats/behaviours/index.js | 258 +++++++---
 assets/js/dashboard/stats/behaviours/props.js | 116 +++--
 assets/js/dashboard/stats/current-visitors.js |   2 -
 assets/js/dashboard/stats/devices/index.js    | 239 ++++++---
 .../dashboard/stats/graph/date-formatter.js   |  25 +-
 .../js/dashboard/stats/graph/graph-tooltip.js | 141 ++++--
 assets/js/dashboard/stats/graph/graph-util.js | 113 +++--
 .../dashboard/stats/graph/interval-picker.js  |  78 +--
 assets/js/dashboard/stats/graph/line-graph.js | 127 +++--
 .../dashboard/stats/graph/sampling-notice.js  |  28 +-
 .../js/dashboard/stats/graph/stats-export.js  |  53 +-
 assets/js/dashboard/stats/graph/top-stats.js  |   2 -
 .../js/dashboard/stats/graph/visitor-graph.js | 129 +++--
 .../stats/graph/with-imported-switch.js       |  30 +-
 .../imported-query-unsupported-warning.js     |  26 +-
 .../stats/locations/geolocation-notice.tsx    |   1 -
 assets/js/dashboard/stats/locations/index.js  | 479 ++++++++++--------
 .../dashboard/stats/locations/map-tooltip.tsx |   1 -
 assets/js/dashboard/stats/locations/map.tsx   |   1 -
 .../stats/modals/breakdown-modal.tsx          |   2 -
 .../stats/modals/breakdown-table.tsx          |   2 -
 .../js/dashboard/stats/modals/conversions.js  |  64 ++-
 .../modals/devices/browser-versions-modal.js  |  58 ++-
 .../stats/modals/devices/browsers-modal.js    |  58 ++-
 .../stats/modals/devices/choose-metrics.js    |  17 +-
 .../operating-system-versions-modal.js        |  53 +-
 .../modals/devices/operating-systems-modal.js |  53 +-
 .../stats/modals/devices/screen-sizes.js      |  44 +-
 .../js/dashboard/stats/modals/entry-pages.js  |  69 ++-
 .../js/dashboard/stats/modals/exit-pages.js   |  69 ++-
 .../stats/modals/filter-modal-group.js        |  39 +-
 .../stats/modals/filter-modal-props-row.js    |   2 -
 .../stats/modals/filter-modal-row.js          |   2 -
 .../js/dashboard/stats/modals/filter-modal.js |  74 ++-
 .../stats/modals/google-keywords.tsx          |   2 -
 .../dashboard/stats/modals/locations-modal.js |  98 ++--
 assets/js/dashboard/stats/modals/modal.js     |  72 +--
 assets/js/dashboard/stats/modals/pages.js     |  64 ++-
 assets/js/dashboard/stats/modals/props.js     |  70 ++-
 .../stats/modals/referrer-drilldown.js        |  82 +--
 .../js/dashboard/stats/modals/rocket-icon.js  |  24 +-
 assets/js/dashboard/stats/modals/sources.js   | 129 +++--
 assets/js/dashboard/stats/more-link.js        |   4 +-
 assets/js/dashboard/stats/pages/index.js      | 103 ++--
 .../stats/reports/change-arrow.test.tsx       |   2 -
 .../dashboard/stats/reports/change-arrow.tsx  |   2 -
 assets/js/dashboard/stats/reports/list.tsx    |   2 -
 .../stats/reports/metric-formatter.ts         |   2 -
 .../stats/reports/metric-value.test.tsx       |   2 -
 .../dashboard/stats/reports/metric-value.tsx  |   2 -
 assets/js/dashboard/stats/reports/metrics.js  |   2 -
 assets/js/dashboard/stats/sources/index.js    |  20 +-
 .../dashboard/stats/sources/referrer-list.js  |  53 +-
 .../dashboard/stats/sources/search-terms.tsx  |   2 -
 .../js/dashboard/stats/sources/source-list.js | 179 ++++---
 assets/js/dashboard/theme-context.tsx         |   1 -
 assets/js/dashboard/user-context.tsx          |   1 -
 assets/js/dashboard/util/date.js              |   2 -
 assets/js/dashboard/util/date.test.ts         |   2 -
 assets/js/dashboard/util/filter-text.test.tsx |  22 +-
 assets/js/dashboard/util/filter-text.tsx      |   2 -
 assets/js/dashboard/util/filters.js           |   2 -
 assets/js/dashboard/util/filters.test.ts      |   2 -
 assets/js/dashboard/util/money.ts             |   8 +-
 .../dashboard/util/number-formatter.test.ts   |   6 +-
 assets/js/dashboard/util/number-formatter.ts  |  18 +-
 .../dashboard/util/realtime-update-timer.js   |   6 +-
 .../dashboard/util/seconds-since-last-load.js |   4 +-
 assets/js/dashboard/util/storage.js           |  12 +-
 assets/js/dashboard/util/tooltip.tsx          |  70 ++-
 .../js/dashboard/util/url-search-params-v1.ts |   2 -
 .../util/url-search-params-v2.test.ts         |   2 -
 .../js/dashboard/util/url-search-params-v2.ts |   1 -
 .../dashboard/util/url-search-params.test.ts  |   2 -
 assets/js/dashboard/util/url-search-params.ts |   1 -
 assets/js/dashboard/util/url.test.ts          |   2 -
 assets/js/dashboard/util/url.ts               |   1 -
 assets/js/embed.content.js                    |   6 +-
 assets/js/embed.host.js                       |  13 +-
 assets/js/liveview/combo-box.js               |  34 +-
 assets/js/liveview/dropdown.js                |   4 +-
 assets/js/liveview/live_socket.js             |  38 +-
 assets/js/liveview/phx_events.js              |   8 +-
 assets/js/polyfills/closest.js                |  25 +-
 assets/js/storybook.js                        |  37 +-
 assets/package.json                           |   2 +-
 assets/test-utils/app-context-providers.tsx   |   2 -
 assets/test-utils/extend-expect.ts            |   2 +-
 assets/test-utils/index.ts                    |   2 -
 assets/test-utils/mock-api.ts                 |   2 -
 assets/test-utils/reset-state.ts              |   2 -
 169 files changed, 2602 insertions(+), 1667 deletions(-)

diff --git a/assets/.prettierignore b/assets/.prettierignore
index 3c40ba6b1d..74a2872d27 100644
--- a/assets/.prettierignore
+++ b/assets/.prettierignore
@@ -4,3 +4,4 @@ static/images/
 .*rc
 *.json
 *.config.js
+js/types/query-api.d.ts
diff --git a/assets/.prettierrc.json b/assets/.prettierrc.json
index 5c42a1aa9b..81c51f9894 100644
--- a/assets/.prettierrc.json
+++ b/assets/.prettierrc.json
@@ -1,6 +1,5 @@
 {
   "singleQuote": true,
-  "insertPragma": true,
   "trailingComma": "none",
   "semi": false
 }
diff --git a/assets/css/app.css b/assets/css/app.css
index 0e1401d092..eb78a69a13 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,5 +1,3 @@
-/* @format */
-
 @import 'tailwindcss/base';
 @import 'flatpickr/dist/flatpickr.min.css';
 @import './modal.css';
diff --git a/assets/css/chartjs.css b/assets/css/chartjs.css
index 4c417bce39..569d39dd96 100644
--- a/assets/css/chartjs.css
+++ b/assets/css/chartjs.css
@@ -1,4 +1,3 @@
-/* @format */
 #chartjs-tooltip {
   background-color: rgb(25 30 56);
   position: absolute;
diff --git a/assets/css/flatpickr-colors.css b/assets/css/flatpickr-colors.css
index 44dbdf34c9..8336029144 100644
--- a/assets/css/flatpickr-colors.css
+++ b/assets/css/flatpickr-colors.css
@@ -1,4 +1,3 @@
-/* @format */
 /* stylelint-disable media-feature-range-notation */
 /* stylelint-disable selector-class-pattern */
 
diff --git a/assets/css/loader.css b/assets/css/loader.css
index 010266d7af..2c041f35e1 100644
--- a/assets/css/loader.css
+++ b/assets/css/loader.css
@@ -1,4 +1,3 @@
-/* @format */
 .loading {
   width: 50px;
   height: 50px;
diff --git a/assets/css/modal.css b/assets/css/modal.css
index e89898a4d7..500ffab9a0 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -1,4 +1,3 @@
-/* @format */
 /* stylelint-disable selector-class-pattern */
 .modal {
   display: none;
diff --git a/assets/css/storybook.css b/assets/css/storybook.css
index e245aca2aa..e78c04fc7d 100644
--- a/assets/css/storybook.css
+++ b/assets/css/storybook.css
@@ -1,6 +1,6 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 /*
  * Put your component styling within the Tailwind utilities layer.
diff --git a/assets/css/tooltip.css b/assets/css/tooltip.css
index 9f54f47a08..124d89dad2 100644
--- a/assets/css/tooltip.css
+++ b/assets/css/tooltip.css
@@ -1,4 +1,3 @@
-/* @format */
 [tooltip] {
   position: relative;
   display: inline-block;
diff --git a/assets/js/app.js b/assets/js/app.js
index ac96c343bc..4224829b81 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,10 +1,10 @@
-import "./polyfills/closest"
+import './polyfills/closest'
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import Alpine from 'alpinejs'
-import "./liveview/live_socket"
-import comboBox from "./liveview/combo-box"
-import dropdown from "./liveview/dropdown"
-import "./liveview/phx_events"
+import './liveview/live_socket'
+import comboBox from './liveview/combo-box'
+import dropdown from './liveview/dropdown'
+import './liveview/phx_events'
 
 Alpine.data('dropdown', dropdown)
 Alpine.data('comboBox', comboBox)
@@ -30,14 +30,14 @@ if (document.querySelectorAll('[data-modal]').length > 0) {
 const triggers = document.querySelectorAll('[data-dropdown-trigger]')
 
 for (const trigger of triggers) {
-  trigger.addEventListener('click', function(e) {
+  trigger.addEventListener('click', function (e) {
     e.stopPropagation()
     e.currentTarget.nextElementSibling.classList.remove('hidden')
   })
 }
 
 if (triggers.length > 0) {
-  document.addEventListener('click', function(e) {
+  document.addEventListener('click', function (e) {
     const dropdown = e.target.closest('[data-dropdown]')
 
     if (dropdown && e.target.tagName === 'A') {
@@ -45,7 +45,7 @@ if (triggers.length > 0) {
     }
   })
 
-  document.addEventListener('click', function(e) {
+  document.addEventListener('click', function (e) {
     const clickedInDropdown = e.target.closest('[data-dropdown]')
 
     if (!clickedInDropdown) {
@@ -61,7 +61,9 @@ const changelogNotification = document.getElementById('changelog-notification')
 if (changelogNotification) {
   showChangelogNotification(changelogNotification)
 
-  fetch('https://plausible.io/changes.txt', { headers: { 'Content-Type': 'text/plain' } })
+  fetch('https://plausible.io/changes.txt', {
+    headers: { 'Content-Type': 'text/plain' }
+  })
     .then((res) => res.text())
     .then((res) => {
       localStorage.lastChangelogUpdate = new Date(res).getTime()
@@ -87,9 +89,11 @@ function showChangelogNotification(el) {
       </a>
       `
     const link = el.getElementsByTagName('a')[0]
-    link.addEventListener('click', function() {
+    link.addEventListener('click', function () {
       localStorage.lastChangelogClick = Date.now()
-      setTimeout(() => { link.remove() }, 100)
+      setTimeout(() => {
+        link.remove()
+      }, 100)
     })
   }
 }
@@ -97,7 +101,7 @@ function showChangelogNotification(el) {
 const embedButton = document.getElementById('generate-embed')
 
 if (embedButton) {
-  embedButton.addEventListener('click', function(_e) {
+  embedButton.addEventListener('click', function (_e) {
     const baseUrl = document.getElementById('base-url').value
     const embedCode = document.getElementById('embed-code')
     const theme = document.getElementById('theme').value.toLowerCase()
@@ -116,7 +120,8 @@ if (embedButton) {
 <script async src="${baseUrl}/js/embed.host.js"></script>`
     } catch (e) {
       console.error(e)
-      embedCode.value = 'ERROR: Please enter a valid URL in the shared link field'
+      embedCode.value =
+        'ERROR: Please enter a valid URL in the shared link field'
     }
   })
 }
diff --git a/assets/js/dashboard.tsx b/assets/js/dashboard.tsx
index 5232786a1e..8232cb50ae 100644
--- a/assets/js/dashboard.tsx
+++ b/assets/js/dashboard.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
 import 'url-search-params-polyfill'
diff --git a/assets/js/dashboard/api.ts b/assets/js/dashboard/api.ts
index 85aebbfe48..570ffed152 100644
--- a/assets/js/dashboard/api.ts
+++ b/assets/js/dashboard/api.ts
@@ -1,4 +1,3 @@
-/** @format */
 import { DashboardQuery } from './query'
 import { formatISO } from './util/date'
 import { serializeApiFilters } from './util/filters'
diff --git a/assets/js/dashboard/components/combobox.js b/assets/js/dashboard/components/combobox.js
index 2a194185a3..c414ad8c88 100644
--- a/assets/js/dashboard/components/combobox.js
+++ b/assets/js/dashboard/components/combobox.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, {
   Fragment,
   useState,
diff --git a/assets/js/dashboard/components/drilldown-link.tsx b/assets/js/dashboard/components/drilldown-link.tsx
index 76d218ba5d..7e66ab643e 100644
--- a/assets/js/dashboard/components/drilldown-link.tsx
+++ b/assets/js/dashboard/components/drilldown-link.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import {
   AppNavigationLink,
diff --git a/assets/js/dashboard/components/error-panel.tsx b/assets/js/dashboard/components/error-panel.tsx
index 39832ae115..f010aacc60 100644
--- a/assets/js/dashboard/components/error-panel.tsx
+++ b/assets/js/dashboard/components/error-panel.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import classNames from 'classnames'
 import {
diff --git a/assets/js/dashboard/components/filter-operator-selector.js b/assets/js/dashboard/components/filter-operator-selector.js
index f9289d85d9..c7afb46526 100644
--- a/assets/js/dashboard/components/filter-operator-selector.js
+++ b/assets/js/dashboard/components/filter-operator-selector.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { Fragment, useRef } from 'react'
 
 import {
diff --git a/assets/js/dashboard/components/lazy-loader.js b/assets/js/dashboard/components/lazy-loader.js
index e0832c97db..774774c368 100644
--- a/assets/js/dashboard/components/lazy-loader.js
+++ b/assets/js/dashboard/components/lazy-loader.js
@@ -4,7 +4,7 @@ import { useInView } from 'react-intersection-observer'
 export default function LazyLoader(props) {
   const [hasBecomeVisibleYet, setHasBecomeVisibleYet] = useState(false)
   const { ref, inView } = useInView({
-    threshold: 0,
+    threshold: 0
   })
 
   useEffect(() => {
@@ -12,12 +12,8 @@ export default function LazyLoader(props) {
       setHasBecomeVisibleYet(true)
       if (props.onVisible) props.onVisible()
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inView])
 
-  return (
-    <div ref={ref}>
-      {props.children}
-    </div>
-  )
+  return <div ref={ref}>{props.children}</div>
 }
diff --git a/assets/js/dashboard/components/notice.js b/assets/js/dashboard/components/notice.js
index 9a90a16b90..1089f42579 100644
--- a/assets/js/dashboard/components/notice.js
+++ b/assets/js/dashboard/components/notice.js
@@ -1,27 +1,57 @@
-import React from "react"
-import { sectionTitles } from "../stats/behaviours"
+import React from 'react'
+import { sectionTitles } from '../stats/behaviours'
 import * as api from '../api'
-import { useSiteContext } from "../site-context"
+import { useSiteContext } from '../site-context'
 
-export function FeatureSetupNotice({ feature, title, info, callToAction, onHideAction }) {
+export function FeatureSetupNotice({
+  feature,
+  title,
+  info,
+  callToAction,
+  onHideAction
+}) {
   const site = useSiteContext()
   const sectionTitle = sectionTitles[feature]
 
   const requestHideSection = () => {
-    if (window.confirm(`Are you sure you want to hide ${sectionTitle}? You can make it visible again in your site settings later.`)) {
-      api.mutation(`/api/${encodeURIComponent(site.domain)}/disable-feature`, { method: 'PUT', body: { feature: feature } })
+    if (
+      window.confirm(
+        `Are you sure you want to hide ${sectionTitle}? You can make it visible again in your site settings later.`
+      )
+    ) {
+      api
+        .mutation(`/api/${encodeURIComponent(site.domain)}/disable-feature`, {
+          method: 'PUT',
+          body: { feature: feature }
+        })
         .then(() => onHideAction())
-        .catch((error) => {if (!(error instanceof api.ApiError)) {throw error}})
-      
+        .catch((error) => {
+          if (!(error instanceof api.ApiError)) {
+            throw error
+          }
+        })
     }
   }
 
   function renderCallToAction() {
     return (
       <a href={callToAction.link} className="ml-2 sm:ml-4 button px-2 sm:px-4">
-        <p className="flex flex-col justify-center text-xs sm:text-sm">{callToAction.action}</p>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="ml-2 w-5 h-5">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
+        <p className="flex flex-col justify-center text-xs sm:text-sm">
+          {callToAction.action}
+        </p>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="ml-2 w-5 h-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
+          />
         </svg>
       </a>
     )
@@ -31,14 +61,15 @@ export function FeatureSetupNotice({ feature, title, info, callToAction, onHideA
     return (
       <button
         onClick={requestHideSection}
-        className="inline-block px-2 sm:px-4 py-2 border border-gray-300 dark:border-gray-500 leading-5 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+        className="inline-block px-2 sm:px-4 py-2 border border-gray-300 dark:border-gray-500 leading-5 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition ease-in-out duration-150"
+      >
         Hide this report
       </button>
     )
   }
 
   return (
-    <div className="sm:mx-32 mt-6 mb-3" >
+    <div className="sm:mx-32 mt-6 mb-3">
       <div className="py-3">
         <div className="text-center mt-2 text-gray-800 dark:text-gray-200">
           {title}
@@ -55,4 +86,4 @@ export function FeatureSetupNotice({ feature, title, info, callToAction, onHideA
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/assets/js/dashboard/components/popover.tsx b/assets/js/dashboard/components/popover.tsx
index 0d9d859dff..55738abb66 100644
--- a/assets/js/dashboard/components/popover.tsx
+++ b/assets/js/dashboard/components/popover.tsx
@@ -1,4 +1,3 @@
-/** @format */
 import { TransitionClasses } from '@headlessui/react'
 import classNames from 'classnames'
 
diff --git a/assets/js/dashboard/components/search-input.tsx b/assets/js/dashboard/components/search-input.tsx
index 245dd8533e..50a1e204d6 100644
--- a/assets/js/dashboard/components/search-input.tsx
+++ b/assets/js/dashboard/components/search-input.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ChangeEventHandler, useCallback, useState, useRef } from 'react'
 import { isModifierPressed, Keybind } from '../keybinding'
 import { useDebounce } from '../custom-hooks'
diff --git a/assets/js/dashboard/components/sort-button.tsx b/assets/js/dashboard/components/sort-button.tsx
index 21cd21e80c..eaf5561933 100644
--- a/assets/js/dashboard/components/sort-button.tsx
+++ b/assets/js/dashboard/components/sort-button.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 import { cycleSortDirection, SortDirection } from '../hooks/use-order-by'
 import classNames from 'classnames'
diff --git a/assets/js/dashboard/components/table.tsx b/assets/js/dashboard/components/table.tsx
index d8486bae6a..d3b204093c 100644
--- a/assets/js/dashboard/components/table.tsx
+++ b/assets/js/dashboard/components/table.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import { SortDirection } from '../hooks/use-order-by'
diff --git a/assets/js/dashboard/custom-hooks.js b/assets/js/dashboard/custom-hooks.js
index bcd53af9e1..08db25a195 100644
--- a/assets/js/dashboard/custom-hooks.js
+++ b/assets/js/dashboard/custom-hooks.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback } from 'react'
 
 // A custom hook that behaves like `useEffect`, but
 // the function does not run on the initial render.
@@ -22,15 +22,20 @@ export function useDebounce(fn, delay = DEBOUNCE_DELAY) {
 
   useEffect(() => {
     return () => {
-      if (timerRef.current) { clearTimeout(timerRef.current) }
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
     }
   }, [])
 
-  return useCallback((...args) => {
-    clearTimeout(timerRef.current)
+  return useCallback(
+    (...args) => {
+      clearTimeout(timerRef.current)
 
-    timerRef.current = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }, [fn, delay])
-}
\ No newline at end of file
+      timerRef.current = setTimeout(() => {
+        fn(...args)
+      }, delay)
+    },
+    [fn, delay]
+  )
+}
diff --git a/assets/js/dashboard/dashboard-keybinds.tsx b/assets/js/dashboard/dashboard-keybinds.tsx
index b4d3ceb468..ad4afee625 100644
--- a/assets/js/dashboard/dashboard-keybinds.tsx
+++ b/assets/js/dashboard/dashboard-keybinds.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React from 'react'
 import { NavigateKeybind } from './keybinding'
 import { useRoutelessModalsContext } from './navigation/routeless-modals-context'
diff --git a/assets/js/dashboard/error/error-boundary.test.tsx b/assets/js/dashboard/error/error-boundary.test.tsx
index b86980d1f1..37676a1cc7 100644
--- a/assets/js/dashboard/error/error-boundary.test.tsx
+++ b/assets/js/dashboard/error/error-boundary.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useState } from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/assets/js/dashboard/error/error-boundary.tsx b/assets/js/dashboard/error/error-boundary.tsx
index 914b33e20b..e116401b00 100644
--- a/assets/js/dashboard/error/error-boundary.tsx
+++ b/assets/js/dashboard/error/error-boundary.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode, ReactElement } from 'react'
 
 type ErrorBoundaryProps = {
diff --git a/assets/js/dashboard/error/something-went-wrong.test.tsx b/assets/js/dashboard/error/something-went-wrong.test.tsx
index 387286d6c3..e5ee0d0a72 100644
--- a/assets/js/dashboard/error/something-went-wrong.test.tsx
+++ b/assets/js/dashboard/error/something-went-wrong.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { GoToSites, SomethingWentWrongMessage } from './something-went-wrong'
diff --git a/assets/js/dashboard/error/something-went-wrong.tsx b/assets/js/dashboard/error/something-went-wrong.tsx
index 436ab8a70b..252b6da2f1 100644
--- a/assets/js/dashboard/error/something-went-wrong.tsx
+++ b/assets/js/dashboard/error/something-went-wrong.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 import RocketIcon from '../stats/modals/rocket-icon'
 import { useInRouterContext } from 'react-router-dom'
diff --git a/assets/js/dashboard/extra/funnel-tooltip.js b/assets/js/dashboard/extra/funnel-tooltip.js
index 296d28d456..0ad20afb95 100644
--- a/assets/js/dashboard/extra/funnel-tooltip.js
+++ b/assets/js/dashboard/extra/funnel-tooltip.js
@@ -2,7 +2,7 @@ export default function FunnelTooltip(palette, funnel) {
   return (context) => {
     const tooltipModel = context.tooltip
     const dataIndex = tooltipModel.dataPoints[0].dataIndex
-    const offset = document.getElementById("funnel").getBoundingClientRect()
+    const offset = document.getElementById('funnel').getBoundingClientRect()
     let tooltipEl = document.getElementById('chartjs-tooltip')
 
     if (!tooltipEl) {
@@ -14,7 +14,8 @@ export default function FunnelTooltip(palette, funnel) {
     }
 
     if (tooltipEl && offset && window.innerWidth < 768) {
-      tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
+      tooltipEl.style.top =
+        offset.y + offset.height + window.scrollY + 15 + 'px'
       tooltipEl.style.left = offset.x + 'px'
       tooltipEl.style.right = null
       tooltipEl.style.opacity = 1
@@ -25,15 +26,14 @@ export default function FunnelTooltip(palette, funnel) {
       return
     }
 
-
     if (tooltipModel.body) {
       const currentStep = funnel.steps[dataIndex]
-      const previousStep = (dataIndex > 0) ? funnel.steps[dataIndex - 1] : null
+      const previousStep = dataIndex > 0 ? funnel.steps[dataIndex - 1] : null
 
       tooltipEl.innerHTML = `
         <aside class="text-gray-100 flex flex-col">
           <div class="flex justify-between items-center border-b-2 border-gray-700 pb-2">
-            <span class="font-semibold mr-4 text-lg">${previousStep ? `<span class="mr-2">${previousStep.label}</span>` : ""}
+            <span class="font-semibold mr-4 text-lg">${previousStep ? `<span class="mr-2">${previousStep.label}</span>` : ''}
               <span class="text-gray-500 mr-2">→</span>
               ${tooltipModel.title}
             </span>
@@ -45,7 +45,7 @@ export default function FunnelTooltip(palette, funnel) {
                 <span class="flex items-center mr-4">
                   <div class="w-3 h-3 mr-1 rounded-full ${palette.visitorsLegendClass}"></div>
                   <span>
-                    ${dataIndex == 0 ? "Entered the funnel" : "Visitors"}
+                    ${dataIndex == 0 ? 'Entered the funnel' : 'Visitors'}
                   </span>
                 </span>
               </th>
@@ -65,7 +65,7 @@ export default function FunnelTooltip(palette, funnel) {
                 <span class="flex items-center">
                   <div class="w-3 h-3 mr-1 rounded-full ${palette.dropoffLegendClass}"></div>
                   <span>
-                    ${dataIndex == 0 ? "Never entered the funnel" : "Dropoff"}
+                    ${dataIndex == 0 ? 'Never entered the funnel' : 'Dropoff'}
                   </span>
                 </span>
               </th>
diff --git a/assets/js/dashboard/extra/funnel.js b/assets/js/dashboard/extra/funnel.js
index c64da5c2e0..f889ed3ab4 100644
--- a/assets/js/dashboard/extra/funnel.js
+++ b/assets/js/dashboard/extra/funnel.js
@@ -1,22 +1,21 @@
-import React, { useEffect, useState, useRef } from 'react';
-import FlipMove from 'react-flip-move';
-import Chart from 'chart.js/auto';
-import FunnelTooltip from './funnel-tooltip';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { numberShortFormatter } from '../util/number-formatter';
-import Bar from '../stats/bar';
+import React, { useEffect, useState, useRef } from 'react'
+import FlipMove from 'react-flip-move'
+import Chart from 'chart.js/auto'
+import FunnelTooltip from './funnel-tooltip'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { numberShortFormatter } from '../util/number-formatter'
+import Bar from '../stats/bar'
 
-import RocketIcon from '../stats/modals/rocket-icon';
-
-import * as api from '../api';
-import LazyLoader from '../components/lazy-loader';
-import { useQueryContext } from '../query-context';
-import { useSiteContext } from '../site-context';
+import RocketIcon from '../stats/modals/rocket-icon'
 
+import * as api from '../api'
+import LazyLoader from '../components/lazy-loader'
+import { useQueryContext } from '../query-context'
+import { useSiteContext } from '../site-context'
 
 export default function Funnel({ funnelName, tabs }) {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   const [loading, setLoading] = useState(true)
   const [visible, setVisible] = useState(false)
   const [error, setError] = useState(undefined)
@@ -46,25 +45,25 @@ export default function Funnel({ funnelName, tabs }) {
         }
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query, funnelName, visible, isSmallScreen])
 
   useEffect(() => {
     if (canvasRef.current && funnel && visible && !isSmallScreen) {
       initialiseChart()
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [funnel, visible])
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 768px)')
     setSmallScreen(mediaQuery.matches)
     const handleScreenChange = (e) => {
-      setSmallScreen(e.matches);
+      setSmallScreen(e.matches)
     }
-    mediaQuery.addEventListener("change", handleScreenChange);
+    mediaQuery.addEventListener('change', handleScreenChange)
     return () => {
-      mediaQuery.removeEventListener("change", handleScreenChange)
+      mediaQuery.removeEventListener('change', handleScreenChange)
     }
   }, [])
 
@@ -110,7 +109,9 @@ export default function Funnel({ funnelName, tabs }) {
   }
 
   const calcOffset = (ctx) => {
-    const conversionRate = parseFloat(funnel.steps[ctx.dataIndex].conversion_rate)
+    const conversionRate = parseFloat(
+      funnel.steps[ctx.dataIndex].conversion_rate
+    )
     if (conversionRate > 90) {
       return -64
     } else if (conversionRate > 20) {
@@ -129,7 +130,10 @@ export default function Funnel({ funnelName, tabs }) {
     if (typeof funnelMeta === 'undefined') {
       throw new Error('Could not fetch the funnel. Perhaps it was deleted?')
     } else {
-      return api.get(`/api/stats/${encodeURIComponent(site.domain)}/funnels/${funnelMeta.id}`, query)
+      return api.get(
+        `/api/stats/${encodeURIComponent(site.domain)}/funnels/${funnelMeta.id}`,
+        query
+      )
     }
   }
 
@@ -149,7 +153,7 @@ export default function Funnel({ funnelName, tabs }) {
 
       c.fillStyle = color1
       c.strokeStyle = color2
-      c.fillRect(0, 0, shape.width, shape.height);
+      c.fillRect(0, 0, shape.width, shape.height)
 
       c.beginPath()
       c.moveTo(2, 0)
@@ -168,7 +172,7 @@ export default function Funnel({ funnelName, tabs }) {
     const stepData = funnel.steps.map((step) => step.visitors)
 
     const dropOffData = funnel.steps.map((step) => step.dropoff)
-    const ctx = canvasRef.current.getContext("2d")
+    const ctx = canvasRef.current.getContext('2d')
 
     const calcBarThickness = (ctx) => {
       if (ctx.dataset.data.length <= 3) {
@@ -179,11 +183,12 @@ export default function Funnel({ funnelName, tabs }) {
     }
 
     // passing those verbatim to make sure canvas rendering picks them up
-    var fontFamily = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+    var fontFamily =
+      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
 
-    var gradient = ctx.createLinearGradient(900, 0, 900, 900);
-    gradient.addColorStop(1, palette.dropoffBackground);
-    gradient.addColorStop(0, palette.visitorsBackground);
+    var gradient = ctx.createLinearGradient(900, 0, 900, 900)
+    gradient.addColorStop(1, palette.dropoffBackground)
+    gradient.addColorStop(0, palette.visitorsBackground)
 
     const data = {
       labels: labels,
@@ -194,17 +199,20 @@ export default function Funnel({ funnelName, tabs }) {
           backgroundColor: gradient,
           hoverBackgroundColor: gradient,
           borderRadius: 4,
-          stack: 'Stack 0',
+          stack: 'Stack 0'
         },
         {
           label: 'Dropoff',
           data: dropOffData,
-          backgroundColor: createDiagonalPattern(palette.dropoffBackground, palette.dropoffStripes),
+          backgroundColor: createDiagonalPattern(
+            palette.dropoffBackground,
+            palette.dropoffStripes
+          ),
           hoverBackgroundColor: palette.dropoffBackground,
           borderRadius: 4,
-          stack: 'Stack 0',
-        },
-      ],
+          stack: 'Stack 0'
+        }
+      ]
     }
 
     const config = {
@@ -216,7 +224,7 @@ export default function Funnel({ funnelName, tabs }) {
         barThickness: calcBarThickness,
         plugins: {
           legend: {
-            display: false,
+            display: false
           },
           tooltip: {
             enabled: false,
@@ -234,10 +242,15 @@ export default function Funnel({ funnelName, tabs }) {
             color: palette.dataLabelTextColor,
             borderRadius: 4,
             clip: true,
-            font: { size: 12, weight: 'normal', lineHeight: 1.6, family: fontFamily },
+            font: {
+              size: 12,
+              weight: 'normal',
+              lineHeight: 1.6,
+              family: fontFamily
+            },
             textAlign: 'center',
-            padding: { top: 8, bottom: 8, right: 8, left: 8 },
-          },
+            padding: { top: 8, bottom: 8, right: 8, left: 8 }
+          }
         },
         scales: {
           y: { display: false },
@@ -250,10 +263,10 @@ export default function Funnel({ funnelName, tabs }) {
               padding: 8,
               font: { weight: 'bold', family: fontFamily, size: 14 },
               color: palette.stepNameLegendColor
-            },
-          },
-        },
-      },
+            }
+          }
+        }
+      }
     }
 
     chartRef.current = new Chart(ctx, config)
@@ -274,7 +287,9 @@ export default function Funnel({ funnelName, tabs }) {
       return (
         <>
           {header()}
-          <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">{error.message}</div>
+          <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">
+            {error.message}
+          </div>
         </>
       )
     } else {
@@ -284,8 +299,12 @@ export default function Funnel({ funnelName, tabs }) {
           <div className="text-center text-gray-900 dark:text-gray-100 mt-16">
             <RocketIcon />
             <div className="text-lg font-bold">Oops! Something went wrong</div>
-            <div className="text-lg">{error.message ? error.message : 'Failed to render funnel'}</div>
-            <div className="text-xs mt-8">Please try refreshing your browser or selecting the funnel again.</div>
+            <div className="text-lg">
+              {error.message ? error.message : 'Failed to render funnel'}
+            </div>
+            <div className="text-xs mt-8">
+              Please try refreshing your browser or selecting the funnel again.
+            </div>
           </div>
         </>
       )
@@ -294,16 +313,24 @@ export default function Funnel({ funnelName, tabs }) {
 
   const renderInner = () => {
     if (loading) {
-      return <div className="mx-auto loading pt-44"><div></div></div>
+      return (
+        <div className="mx-auto loading pt-44">
+          <div></div>
+        </div>
+      )
     } else if (error) {
       return renderError()
     } else if (funnel) {
-      const conversionRate = funnel.steps[funnel.steps.length - 1].conversion_rate
+      const conversionRate =
+        funnel.steps[funnel.steps.length - 1].conversion_rate
 
       return (
         <div className="mb-8">
           {header()}
-          <p className="mt-1 text-gray-500 text-sm">{funnel.steps.length}-step funnel • {conversionRate}% conversion rate</p>
+          <p className="mt-1 text-gray-500 text-sm">
+            {funnel.steps.length}-step funnel • {conversionRate}% conversion
+            rate
+          </p>
           {isSmallScreen && <div className="mt-4">{renderBars(funnel)}</div>}
         </div>
       )
@@ -320,16 +347,18 @@ export default function Funnel({ funnelName, tabs }) {
             count={step.visitors}
             all={funnel.steps}
             bg={palette.smallBarClass}
-            maxWidthDeduction={"5rem"}
+            maxWidthDeduction={'5rem'}
             plot={'visitors'}
           >
-
             <span className="flex px-2 py-1.5 group dark:text-gray-100 relative z-9 break-all">
               {step.label}
             </span>
           </Bar>
 
-          <span className="font-medium dark:text-gray-200 w-20 text-right" tooltip={step.visitors.toLocaleString()}>
+          <span
+            className="font-medium dark:text-gray-200 w-20 text-right"
+            tooltip={step.visitors.toLocaleString()}
+          >
             {numberShortFormatter(step.visitors)}
           </span>
         </div>
@@ -346,9 +375,7 @@ export default function Funnel({ funnelName, tabs }) {
             <span className="inline-block w-20">Visitors</span>
           </span>
         </div>
-        <FlipMove>
-          {funnel.steps.map(renderBar)}
-        </FlipMove>
+        <FlipMove>{funnel.steps.map(renderBar)}</FlipMove>
       </>
     )
   }
@@ -358,7 +385,9 @@ export default function Funnel({ funnelName, tabs }) {
       <LazyLoader onVisible={() => setVisible(true)}>
         {renderInner()}
       </LazyLoader>
-      {!isSmallScreen && <canvas className="" id="funnel" ref={canvasRef}></canvas>}
+      {!isSmallScreen && (
+        <canvas className="" id="funnel" ref={canvasRef}></canvas>
+      )}
     </div>
   )
 }
diff --git a/assets/js/dashboard/fade-in.js b/assets/js/dashboard/fade-in.js
index 021ed8bf19..65fe4d6e58 100644
--- a/assets/js/dashboard/fade-in.js
+++ b/assets/js/dashboard/fade-in.js
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from 'react'
 
-export default function FadeIn({className, show, children}) {
+export default function FadeIn({ className, show, children }) {
   return (
     <div
-      className={`${className || ''} ${show ? "fade-enter-active" : "fade-enter"}`}
+      className={`${className || ''} ${show ? 'fade-enter-active' : 'fade-enter'}`}
     >
       {children}
     </div>
-)
+  )
 }
diff --git a/assets/js/dashboard/filtering/segments-context.test.tsx b/assets/js/dashboard/filtering/segments-context.test.tsx
index af3309955a..01889aa5d3 100644
--- a/assets/js/dashboard/filtering/segments-context.test.tsx
+++ b/assets/js/dashboard/filtering/segments-context.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { SegmentsContextProvider, useSegmentsContext } from './segments-context'
diff --git a/assets/js/dashboard/filtering/segments-context.tsx b/assets/js/dashboard/filtering/segments-context.tsx
index 0037aab22b..cbc15233e3 100644
--- a/assets/js/dashboard/filtering/segments-context.tsx
+++ b/assets/js/dashboard/filtering/segments-context.tsx
@@ -1,4 +1,3 @@
-/** @format */
 import React, {
   createContext,
   ReactNode,
diff --git a/assets/js/dashboard/filtering/segments.test.ts b/assets/js/dashboard/filtering/segments.test.ts
index d896fefeca..c8c3ba602a 100644
--- a/assets/js/dashboard/filtering/segments.test.ts
+++ b/assets/js/dashboard/filtering/segments.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { remapToApiFilters } from '../util/filters'
 import {
   formatSegmentIdAsLabelKey,
diff --git a/assets/js/dashboard/filtering/segments.ts b/assets/js/dashboard/filtering/segments.ts
index 37750e5b41..791fc8e2a0 100644
--- a/assets/js/dashboard/filtering/segments.ts
+++ b/assets/js/dashboard/filtering/segments.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { DashboardQuery, Filter } from '../query'
 import { cleanLabels, remapFromApiFilters } from '../util/filters'
 import { plainFilterText } from '../util/filter-text'
diff --git a/assets/js/dashboard/hooks/api-client.ts b/assets/js/dashboard/hooks/api-client.ts
index 628d43a19f..7db4063436 100644
--- a/assets/js/dashboard/hooks/api-client.ts
+++ b/assets/js/dashboard/hooks/api-client.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { useEffect } from 'react'
 import {
   useQueryClient,
diff --git a/assets/js/dashboard/hooks/use-order-by.test.ts b/assets/js/dashboard/hooks/use-order-by.test.ts
index 71ba2f5743..40e63fcf42 100644
--- a/assets/js/dashboard/hooks/use-order-by.test.ts
+++ b/assets/js/dashboard/hooks/use-order-by.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { Metric } from '../stats/reports/metrics'
 import {
   OrderBy,
diff --git a/assets/js/dashboard/hooks/use-order-by.ts b/assets/js/dashboard/hooks/use-order-by.ts
index d9c2773b56..28bde044af 100644
--- a/assets/js/dashboard/hooks/use-order-by.ts
+++ b/assets/js/dashboard/hooks/use-order-by.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Metric } from '../stats/reports/metrics'
 import { getDomainScopedStorageKey, getItem, setItem } from '../util/storage'
diff --git a/assets/js/dashboard/hooks/use-previous.ts b/assets/js/dashboard/hooks/use-previous.ts
index 84de4c36c6..24ab85ad42 100644
--- a/assets/js/dashboard/hooks/use-previous.ts
+++ b/assets/js/dashboard/hooks/use-previous.ts
@@ -1,15 +1,15 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react'
 
 function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T | undefined>(undefined);
+  const ref = useRef<T | undefined>(undefined)
 
   useEffect(() => {
     // Update the ref with the current value after render
-    ref.current = value;
-  }, [value]);
+    ref.current = value
+  }, [value])
 
   // Return the previous value
-  return ref.current;
+  return ref.current
 }
 
-export default usePrevious;
+export default usePrevious
diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx
index a815451243..f4c51038cf 100644
--- a/assets/js/dashboard/index.tsx
+++ b/assets/js/dashboard/index.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo, useState } from 'react'
 import VisitorGraph from './stats/graph/visitor-graph'
 import Sources from './stats/sources'
diff --git a/assets/js/dashboard/keybinding.tsx b/assets/js/dashboard/keybinding.tsx
index 52199ec27b..ddcc9e9db1 100644
--- a/assets/js/dashboard/keybinding.tsx
+++ b/assets/js/dashboard/keybinding.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { ReactNode, RefObject, useCallback, useEffect } from 'react'
 import {
   AppNavigationTarget,
diff --git a/assets/js/dashboard/last-load-context.tsx b/assets/js/dashboard/last-load-context.tsx
index 65bf9595a3..0f043c9a30 100644
--- a/assets/js/dashboard/last-load-context.tsx
+++ b/assets/js/dashboard/last-load-context.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, {
   createContext,
   useEffect,
diff --git a/assets/js/dashboard/nav-menu/filter-menu.tsx b/assets/js/dashboard/nav-menu/filter-menu.tsx
index f4580d4712..50e9ee36b7 100644
--- a/assets/js/dashboard/nav-menu/filter-menu.tsx
+++ b/assets/js/dashboard/nav-menu/filter-menu.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo, useRef } from 'react'
 import {
   FILTER_MODAL_TO_FILTER_GROUP,
diff --git a/assets/js/dashboard/nav-menu/filter-pill.tsx b/assets/js/dashboard/nav-menu/filter-pill.tsx
index 690477a44d..916441da6d 100644
--- a/assets/js/dashboard/nav-menu/filter-pill.tsx
+++ b/assets/js/dashboard/nav-menu/filter-pill.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 import {
   AppNavigationLink,
diff --git a/assets/js/dashboard/nav-menu/filter-pills-list.tsx b/assets/js/dashboard/nav-menu/filter-pills-list.tsx
index d501b290d0..746d5a908f 100644
--- a/assets/js/dashboard/nav-menu/filter-pills-list.tsx
+++ b/assets/js/dashboard/nav-menu/filter-pills-list.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { useQueryContext } from '../query-context'
 import { FilterPill, FilterPillProps } from './filter-pill'
diff --git a/assets/js/dashboard/nav-menu/filters-bar.test.tsx b/assets/js/dashboard/nav-menu/filters-bar.test.tsx
index e8d86e970b..3c08dc5de8 100644
--- a/assets/js/dashboard/nav-menu/filters-bar.test.tsx
+++ b/assets/js/dashboard/nav-menu/filters-bar.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '../../../test-utils'
 import userEvent from '@testing-library/user-event'
diff --git a/assets/js/dashboard/nav-menu/filters-bar.tsx b/assets/js/dashboard/nav-menu/filters-bar.tsx
index 20ab9ef121..69baf56716 100644
--- a/assets/js/dashboard/nav-menu/filters-bar.tsx
+++ b/assets/js/dashboard/nav-menu/filters-bar.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
 import classNames from 'classnames'
 import React, { useRef, useState, useLayoutEffect, ReactNode } from 'react'
diff --git a/assets/js/dashboard/nav-menu/nav-menu-components.tsx b/assets/js/dashboard/nav-menu/nav-menu-components.tsx
index 71607ab147..2f82c63ff4 100644
--- a/assets/js/dashboard/nav-menu/nav-menu-components.tsx
+++ b/assets/js/dashboard/nav-menu/nav-menu-components.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 
 export const MenuSeparator = () => (
diff --git a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
index 875a8a365d..5ca9d47492 100644
--- a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useRef } from 'react'
 import { clearedComparisonSearch } from '../../query'
 import classNames from 'classnames'
diff --git a/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.test.tsx b/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.test.tsx
index bb33ed3e2c..6d16e8560a 100644
--- a/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.test.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { DateRangeCalendar } from './date-range-calendar'
diff --git a/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.tsx b/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.tsx
index 88be90ea10..b7da0621ee 100644
--- a/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/date-range-calendar.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { useLayoutEffect, useRef } from 'react'
 import DatePicker from 'react-flatpickr'
 
diff --git a/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx b/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx
index 7df7613699..78a73ee8a7 100644
--- a/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { useMemo } from 'react'
 import { shiftQueryPeriod, getDateForShiftedPeriod } from '../../query'
 import classNames from 'classnames'
diff --git a/assets/js/dashboard/nav-menu/query-periods/query-dates.test.tsx b/assets/js/dashboard/nav-menu/query-periods/query-dates.test.tsx
index ee0581259c..116d078fda 100644
--- a/assets/js/dashboard/nav-menu/query-periods/query-dates.test.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/query-dates.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx
index c4bfb342dc..6f6ad86979 100644
--- a/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo, useRef } from 'react'
 import classNames from 'classnames'
 import { useQueryContext } from '../../query-context'
diff --git a/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx b/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx
index 684f4a12f5..ce5960368f 100644
--- a/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useRef } from 'react'
 import classNames from 'classnames'
 import { useQueryContext } from '../../query-context'
diff --git a/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx b/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx
index a7844091d6..813e188d09 100644
--- a/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx
+++ b/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode, RefObject } from 'react'
 import classNames from 'classnames'
 import { popover } from '../../components/popover'
diff --git a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
index d2dfb30135..8985370288 100644
--- a/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
+++ b/assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useEffect, useState } from 'react'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
diff --git a/assets/js/dashboard/nav-menu/segments/segment-menu.tsx b/assets/js/dashboard/nav-menu/segments/segment-menu.tsx
index 187cc7441a..b52d9eb515 100644
--- a/assets/js/dashboard/nav-menu/segments/segment-menu.tsx
+++ b/assets/js/dashboard/nav-menu/segments/segment-menu.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useEffect } from 'react'
 import classNames from 'classnames'
 import { Popover, Transition } from '@headlessui/react'
diff --git a/assets/js/dashboard/nav-menu/top-bar.test.tsx b/assets/js/dashboard/nav-menu/top-bar.test.tsx
index 762e080c35..735f9feb2e 100644
--- a/assets/js/dashboard/nav-menu/top-bar.test.tsx
+++ b/assets/js/dashboard/nav-menu/top-bar.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import {
   render,
diff --git a/assets/js/dashboard/nav-menu/top-bar.tsx b/assets/js/dashboard/nav-menu/top-bar.tsx
index 3116e6879e..5aef3e0deb 100644
--- a/assets/js/dashboard/nav-menu/top-bar.tsx
+++ b/assets/js/dashboard/nav-menu/top-bar.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode, useRef } from 'react'
 import SiteSwitcher from '../site-switcher'
 import { useSiteContext } from '../site-context'
diff --git a/assets/js/dashboard/navigation/routeless-modals-context.tsx b/assets/js/dashboard/navigation/routeless-modals-context.tsx
index 32e43aef35..a88d5a0449 100644
--- a/assets/js/dashboard/navigation/routeless-modals-context.tsx
+++ b/assets/js/dashboard/navigation/routeless-modals-context.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { createContext, ReactNode, useContext, useState } from 'react'
 import { RoutelessSegmentModal } from '../segments/routeless-segment-modals'
 
diff --git a/assets/js/dashboard/navigation/use-app-navigate.tsx b/assets/js/dashboard/navigation/use-app-navigate.tsx
index d809404c93..fa2fe9257f 100644
--- a/assets/js/dashboard/navigation/use-app-navigate.tsx
+++ b/assets/js/dashboard/navigation/use-app-navigate.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { forwardRef, useCallback } from 'react'
 import {
   Link,
diff --git a/assets/js/dashboard/navigation/use-definite-location-state.tsx b/assets/js/dashboard/navigation/use-definite-location-state.tsx
index db66d6e5f5..c39fefbdf0 100644
--- a/assets/js/dashboard/navigation/use-definite-location-state.tsx
+++ b/assets/js/dashboard/navigation/use-definite-location-state.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useAppNavigate } from './use-app-navigate'
diff --git a/assets/js/dashboard/query-context.tsx b/assets/js/dashboard/query-context.tsx
index fb0f37cc0d..27144258db 100644
--- a/assets/js/dashboard/query-context.tsx
+++ b/assets/js/dashboard/query-context.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { createContext, useMemo, useContext, ReactNode } from 'react'
 import { useLocation } from 'react-router'
 import { useMountedEffect } from './custom-hooks'
diff --git a/assets/js/dashboard/query-time-periods.test.ts b/assets/js/dashboard/query-time-periods.test.ts
index a8244c6b0b..b002bc2dbe 100644
--- a/assets/js/dashboard/query-time-periods.test.ts
+++ b/assets/js/dashboard/query-time-periods.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import {
   ComparisonMode,
   getDashboardTimeSettings,
diff --git a/assets/js/dashboard/query-time-periods.ts b/assets/js/dashboard/query-time-periods.ts
index cdc2d25fb8..5463dc482b 100644
--- a/assets/js/dashboard/query-time-periods.ts
+++ b/assets/js/dashboard/query-time-periods.ts
@@ -1,4 +1,3 @@
-/* @format */
 import { useEffect } from 'react'
 import {
   clearedComparisonSearch,
diff --git a/assets/js/dashboard/query.ts b/assets/js/dashboard/query.ts
index ab0154d42a..b76951ff50 100644
--- a/assets/js/dashboard/query.ts
+++ b/assets/js/dashboard/query.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import {
   nowForSite,
   formatISO,
diff --git a/assets/js/dashboard/router.tsx b/assets/js/dashboard/router.tsx
index 95136faed7..eff35b3e73 100644
--- a/assets/js/dashboard/router.tsx
+++ b/assets/js/dashboard/router.tsx
@@ -1,4 +1,3 @@
-/** @format */
 import React from 'react'
 import { createBrowserRouter, Outlet, useRouteError } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
diff --git a/assets/js/dashboard/segments/routeless-segment-modals.tsx b/assets/js/dashboard/segments/routeless-segment-modals.tsx
index f99a129247..6053bc9692 100644
--- a/assets/js/dashboard/segments/routeless-segment-modals.tsx
+++ b/assets/js/dashboard/segments/routeless-segment-modals.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import {
   CreateSegmentModal,
diff --git a/assets/js/dashboard/segments/segment-authorship.test.tsx b/assets/js/dashboard/segments/segment-authorship.test.tsx
index af7eb65ba0..a366ecd6d6 100644
--- a/assets/js/dashboard/segments/segment-authorship.test.tsx
+++ b/assets/js/dashboard/segments/segment-authorship.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { SegmentAuthorship } from './segment-authorship'
diff --git a/assets/js/dashboard/segments/segment-authorship.tsx b/assets/js/dashboard/segments/segment-authorship.tsx
index 605cc2bb3d..b3b561022a 100644
--- a/assets/js/dashboard/segments/segment-authorship.tsx
+++ b/assets/js/dashboard/segments/segment-authorship.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { SavedSegmentPublic, SavedSegment } from '../filtering/segments'
 import { dateForSite, formatDayShort } from '../util/date'
diff --git a/assets/js/dashboard/segments/segment-modals.test.tsx b/assets/js/dashboard/segments/segment-modals.test.tsx
index cf0b7f636d..3adc096d31 100644
--- a/assets/js/dashboard/segments/segment-modals.test.tsx
+++ b/assets/js/dashboard/segments/segment-modals.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { SegmentModal } from './segment-modals'
diff --git a/assets/js/dashboard/segments/segment-modals.tsx b/assets/js/dashboard/segments/segment-modals.tsx
index a1c372fb82..9714e07470 100644
--- a/assets/js/dashboard/segments/segment-modals.tsx
+++ b/assets/js/dashboard/segments/segment-modals.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode, useState } from 'react'
 import ModalWithRouting from '../stats/modals/modal'
 import {
diff --git a/assets/js/dashboard/site-context.test.tsx b/assets/js/dashboard/site-context.test.tsx
index 71309c173f..58fe05213c 100644
--- a/assets/js/dashboard/site-context.test.tsx
+++ b/assets/js/dashboard/site-context.test.tsx
@@ -1,4 +1,3 @@
-/** @format */
 import React, { HTMLAttributes } from 'react'
 import { render, screen } from '@testing-library/react'
 import { parseSiteFromDataset, PlausibleSite } from './site-context'
diff --git a/assets/js/dashboard/site-context.tsx b/assets/js/dashboard/site-context.tsx
index 406c4a1763..56c97dc6dd 100644
--- a/assets/js/dashboard/site-context.tsx
+++ b/assets/js/dashboard/site-context.tsx
@@ -1,4 +1,3 @@
-/** @format */
 import React, { createContext, ReactNode, useContext } from 'react'
 
 export function parseSiteFromDataset(dataset: DOMStringMap): PlausibleSite {
diff --git a/assets/js/dashboard/stats/bar.js b/assets/js/dashboard/stats/bar.js
index 6146e682c1..b6848a0ba3 100644
--- a/assets/js/dashboard/stats/bar.js
+++ b/assets/js/dashboard/stats/bar.js
@@ -1,29 +1,34 @@
-import React from 'react';
+import React from 'react'
 
 function barWidth(count, all, plot) {
-  let maxVal = all[0][plot];
+  let maxVal = all[0][plot]
 
   for (const val of all) {
     if (val > maxVal) maxVal = val[plot]
   }
 
-  return count / maxVal * 100
+  return (count / maxVal) * 100
 }
 
-export default function Bar({count, all, bg, maxWidthDeduction, children, plot = "visitors"}) {
+export default function Bar({
+  count,
+  all,
+  bg,
+  maxWidthDeduction,
+  children,
+  plot = 'visitors'
+}) {
   const width = barWidth(count, all, plot)
-  const style = maxWidthDeduction ? {maxWidth: `calc(100% - ${maxWidthDeduction})`} : {}
+  const style = maxWidthDeduction
+    ? { maxWidth: `calc(100% - ${maxWidthDeduction})` }
+    : {}
 
   return (
-    <div
-      className="w-full h-full relative"
-      style={style}
-    >
+    <div className="w-full h-full relative" style={style}>
       <div
         className={`absolute top-0 left-0 h-full ${bg || ''}`}
-        style={{width: `${width}%`}}
-      >
-      </div>
+        style={{ width: `${width}%` }}
+      ></div>
       {children}
     </div>
   )
diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 5e32b00e65..37c00517ae 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import * as api from '../../api';
-import * as url from '../../util/url';
+import React from 'react'
+import * as api from '../../api'
+import * as url from '../../util/url'
 
-import * as metrics from '../reports/metrics';
-import ListReport from '../reports/list';
-import { useSiteContext } from '../../site-context';
-import { useQueryContext } from '../../query-context';
-import { conversionsRoute } from '../../router';
+import * as metrics from '../reports/metrics'
+import ListReport from '../reports/list'
+import { useSiteContext } from '../../site-context'
+import { useQueryContext } from '../../query-context'
+import { conversionsRoute } from '../../router'
 
 export default function Conversions({ afterFetchData, onGoalFilterClick }) {
-  const site = useSiteContext();
+  const site = useSiteContext()
   const { query } = useQueryContext()
 
   function fetchConversions() {
@@ -18,19 +18,27 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
 
   function getFilterInfo(listItem) {
     return {
-      prefix: "goal",
-      filter: ["is", "goal", [listItem.name]],
+      prefix: 'goal',
+      filter: ['is', 'goal', [listItem.name]]
     }
   }
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: { plot: true } }),
-      metrics.createEvents({ renderLabel: (_query) => "Total", meta: { hiddenOnMobile: true } }),
+      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)
+      BUILD_EXTRA &&
+        metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
+      BUILD_EXTRA &&
+        metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
+    ].filter((metric) => !!metric)
   }
 
   /*global BUILD_EXTRA*/
@@ -42,7 +50,10 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       keyLabel="Goal"
       onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: conversionsRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: conversionsRoute.path,
+        search: (search) => search
+      }}
       color="bg-red-50"
       colMinWidth={90}
     />
diff --git a/assets/js/dashboard/stats/behaviours/goal-conversions.js b/assets/js/dashboard/stats/behaviours/goal-conversions.js
index 8350d1fc14..d2dda5cc92 100644
--- a/assets/js/dashboard/stats/behaviours/goal-conversions.js
+++ b/assets/js/dashboard/stats/behaviours/goal-conversions.js
@@ -1,21 +1,28 @@
-import React from "react"
+import React from 'react'
 import Conversions from './conversions'
-import ListReport from "../reports/list"
+import ListReport from '../reports/list'
 import * as metrics from '../reports/metrics'
-import * as url from "../../util/url"
-import * as api from "../../api"
-import { EVENT_PROPS_PREFIX, getGoalFilter, FILTER_OPERATIONS } from "../../util/filters"
-import { useSiteContext } from "../../site-context"
-import { useQueryContext } from "../../query-context"
-import { customPropsRoute } from "../../router"
+import * as url from '../../util/url'
+import * as api from '../../api'
+import {
+  EVENT_PROPS_PREFIX,
+  getGoalFilter,
+  FILTER_OPERATIONS
+} from '../../util/filters'
+import { useSiteContext } from '../../site-context'
+import { useQueryContext } from '../../query-context'
+import { customPropsRoute } from '../../router'
 
 export const SPECIAL_GOALS = {
-  '404': { title: '404 Pages', prop: 'path' },
+  404: { title: '404 Pages', prop: 'path' },
   'Outbound Link: Click': { title: 'Outbound Links', prop: 'url' },
   'Cloaked Link: Click': { title: 'Cloaked Links', prop: 'url' },
   'File Download': { title: 'File Downloads', prop: 'url' },
-  'WP Search Queries': { title: 'WordPress Search Queries', prop: 'search_query' },
-  'WP Form Completions': { title: 'WordPress Form Completions', prop: 'path' },
+  'WP Search Queries': {
+    title: 'WordPress Search Queries',
+    prop: 'search_query'
+  },
+  'WP Form Completions': { title: 'WordPress Form Completions', prop: 'path' }
 }
 
 function getSpecialGoal(query) {
@@ -28,7 +35,6 @@ function getSpecialGoal(query) {
     return SPECIAL_GOALS[clauses[0]] || null
   }
   return null
-
 }
 
 export function specialTitleWhenGoalFilter(query, defaultTitle) {
@@ -36,8 +42,8 @@ export function specialTitleWhenGoalFilter(query, defaultTitle) {
 }
 
 function SpecialPropBreakdown({ prop, afterFetchData }) {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
 
   function fetchData() {
     return api.get(url.apiPath(site, `/custom-prop-values/${prop}`), query)
@@ -54,16 +60,22 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: EVENT_PROPS_PREFIX,
-      filter: ["is", `${EVENT_PROPS_PREFIX}${prop}`, [listItem['name']]]
+      filter: ['is', `${EVENT_PROPS_PREFIX}${prop}`, [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: { plot: true } }),
-      metrics.createEvents({ renderLabel: (_query) => "Events", meta: { hiddenOnMobile: true } }),
+      metrics.createVisitors({
+        renderLabel: (_query) => 'Visitors',
+        meta: { plot: true }
+      }),
+      metrics.createEvents({
+        renderLabel: (_query) => 'Events',
+        meta: { hiddenOnMobile: true }
+      }),
       metrics.createConversionRate()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -73,7 +85,11 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel={prop}
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: customPropsRoute.path, params: {propKey: url.maybeEncodeRouteParam(prop)}, search: (search) => search }}
+      detailsLinkProps={{
+        path: customPropsRoute.path,
+        params: { propKey: url.maybeEncodeRouteParam(prop) },
+        search: (search) => search
+      }}
       getExternalLinkUrl={getExternalLinkUrlFactory()}
       maybeHideDetails={true}
       color="bg-red-50"
@@ -87,8 +103,18 @@ export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
 
   const specialGoal = getSpecialGoal(query)
   if (specialGoal) {
-    return <SpecialPropBreakdown prop={specialGoal.prop} afterFetchData={afterFetchData} />
+    return (
+      <SpecialPropBreakdown
+        prop={specialGoal.prop}
+        afterFetchData={afterFetchData}
+      />
+    )
   } else {
-    return <Conversions onGoalFilterClick={onGoalFilterClick} afterFetchData={afterFetchData} />
+    return (
+      <Conversions
+        onGoalFilterClick={onGoalFilterClick}
+        afterFetchData={afterFetchData}
+      />
+    )
   }
 }
diff --git a/assets/js/dashboard/stats/behaviours/index.js b/assets/js/dashboard/stats/behaviours/index.js
index 72d7cccd9f..43d8b8c74d 100644
--- a/assets/js/dashboard/stats/behaviours/index.js
+++ b/assets/js/dashboard/stats/behaviours/index.js
@@ -1,10 +1,19 @@
-import React, { Fragment, useState, useEffect, useCallback, useRef } from 'react'
+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  useCallback,
+  useRef
+} from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import classNames from 'classnames'
 import * as storage from '../../util/storage'
 import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
-import GoalConversions, { specialTitleWhenGoalFilter, SPECIAL_GOALS } from './goal-conversions'
+import GoalConversions, {
+  specialTitleWhenGoalFilter,
+  SPECIAL_GOALS
+} from './goal-conversions'
 import Properties from './props'
 import { FeatureSetupNotice } from '../../components/notice'
 import { hasConversionGoalFilter } from '../../util/filters'
@@ -26,7 +35,8 @@ function maybeRequire() {
 
 const Funnel = maybeRequire().default
 
-const ACTIVE_CLASS = 'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading truncate text-left'
+const ACTIVE_CLASS =
+  'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading truncate text-left'
 const DEFAULT_CLASS = 'hover:text-indigo-600 cursor-pointer truncate text-left'
 
 export const CONVERSIONS = 'conversions'
@@ -40,21 +50,29 @@ export const sectionTitles = {
 }
 
 export default function Behaviours({ importedDataInView }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
-  const user = useUserContext();
-  const buttonRef = useRef();
-  const adminAccess = ['owner', 'admin', 'editor', 'super_admin'].includes(user.role)
+  const { query } = useQueryContext()
+  const site = useSiteContext()
+  const user = useUserContext()
+  const buttonRef = useRef()
+  const adminAccess = ['owner', 'admin', 'editor', 'super_admin'].includes(
+    user.role
+  )
   const tabKey = storage.getDomainScopedStorageKey('behavioursTab', site.domain)
-  const funnelKey = storage.getDomainScopedStorageKey('behavioursTabFunnel', site.domain)
+  const funnelKey = storage.getDomainScopedStorageKey(
+    'behavioursTabFunnel',
+    site.domain
+  )
   const [enabledModes, setEnabledModes] = useState(getEnabledModes())
   const [mode, setMode] = useState(defaultMode())
   const [loading, setLoading] = useState(true)
 
-  const [funnelNames, _setFunnelNames] = useState(site.funnels.map(({ name }) => name))
+  const [funnelNames, _setFunnelNames] = useState(
+    site.funnels.map(({ name }) => name)
+  )
   const [selectedFunnel, setSelectedFunnel] = useState(defaultSelectedFunnel())
 
-  const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] = useState(false)
+  const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] =
+    useState(false)
 
   const [skipImportedReason, setSkipImportedReason] = useState(null)
 
@@ -63,11 +81,16 @@ export default function Behaviours({ importedDataInView }) {
     const isSpecialGoal = Object.keys(SPECIAL_GOALS).includes(goalName)
     const isPageviewGoal = goalName.startsWith('Visit ')
 
-    if (!isSpecialGoal && !isPageviewGoal && enabledModes.includes(PROPS) && site.hasProps) {
+    if (
+      !isSpecialGoal &&
+      !isPageviewGoal &&
+      enabledModes.includes(PROPS) &&
+      site.hasProps
+    ) {
       setShowingPropsForGoalFilter(true)
       setMode(PROPS)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -76,18 +99,22 @@ export default function Behaviours({ importedDataInView }) {
       setShowingPropsForGoalFilter(false)
       setMode(CONVERSIONS)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasConversionGoalFilter(query)])
 
   useEffect(() => {
     setMode(defaultMode())
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabledModes])
 
   useEffect(() => setLoading(true), [query, mode])
 
   function disableMode(mode) {
-    setEnabledModes(enabledModes.filter((m) => { return m !== mode }))
+    setEnabledModes(
+      enabledModes.filter((m) => {
+        return m !== mode
+      })
+    )
   }
 
   function setFunnel(selectedFunnel) {
@@ -118,52 +145,69 @@ export default function Behaviours({ importedDataInView }) {
   }
 
   function tabFunnelPicker() {
-    return <Menu as="div" className="relative inline-block text-left">
-      <BlurMenuButtonOnEscape targetRef={buttonRef}/>
-      <div>
-        <Menu.Button ref={buttonRef} className="inline-flex justify-between focus:outline-none">
-          <span className={(mode == FUNNELS) ? ACTIVE_CLASS : DEFAULT_CLASS}>Funnels</span>
-          <ChevronDownIcon className="-mr-1 ml-1 h-4 w-4" aria-hidden="true" />
-        </Menu.Button>
-      </div>
+    return (
+      <Menu as="div" className="relative inline-block text-left">
+        <BlurMenuButtonOnEscape targetRef={buttonRef} />
+        <div>
+          <Menu.Button
+            ref={buttonRef}
+            className="inline-flex justify-between focus:outline-none"
+          >
+            <span className={mode == FUNNELS ? ACTIVE_CLASS : DEFAULT_CLASS}>
+              Funnels
+            </span>
+            <ChevronDownIcon
+              className="-mr-1 ml-1 h-4 w-4"
+              aria-hidden="true"
+            />
+          </Menu.Button>
+        </div>
 
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
-        <Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-96 max-h-72 overflow-auto rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-          <div className="py-1">
-            {funnelNames.map((funnelName) => {
-              return (
-                <Menu.Item key={funnelName}>
-                  {({ active }) => (
-                    <span
-                      onClick={setFunnel(funnelName)}
-                      className={classNames(
-                        active ? 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer' : 'text-gray-700 dark:text-gray-200',
-                        'block px-4 py-2 text-sm',
-                        (mode === FUNNELS && selectedFunnel === funnelName) ? 'font-bold text-gray-500' : ''
-                      )}
-                    >
-                      {funnelName}
-                    </span>
-                  )}
-                </Menu.Item>
-              )
-            })}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+        >
+          <Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-96 max-h-72 overflow-auto rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+            <div className="py-1">
+              {funnelNames.map((funnelName) => {
+                return (
+                  <Menu.Item key={funnelName}>
+                    {({ active }) => (
+                      <span
+                        onClick={setFunnel(funnelName)}
+                        className={classNames(
+                          active
+                            ? 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer'
+                            : 'text-gray-700 dark:text-gray-200',
+                          'block px-4 py-2 text-sm',
+                          mode === FUNNELS && selectedFunnel === funnelName
+                            ? 'font-bold text-gray-500'
+                            : ''
+                        )}
+                      >
+                        {funnelName}
+                      </span>
+                    )}
+                  </Menu.Item>
+                )
+              })}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    )
   }
 
   function tabSwitcher(toMode, displayName) {
-    const className = classNames({ [ACTIVE_CLASS]: mode == toMode, [DEFAULT_CLASS]: mode !== toMode })
+    const className = classNames({
+      [ACTIVE_CLASS]: mode == toMode,
+      [DEFAULT_CLASS]: mode !== toMode
+    })
     const setTab = () => {
       storage.setItem(tabKey, toMode)
       setMode(toMode)
@@ -181,7 +225,9 @@ export default function Behaviours({ importedDataInView }) {
       <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
         {isEnabled(CONVERSIONS) && tabSwitcher(CONVERSIONS, 'Goals')}
         {isEnabled(PROPS) && tabSwitcher(PROPS, 'Properties')}
-        {isEnabled(FUNNELS) && Funnel && (hasFunnels() ? tabFunnelPicker() : tabSwitcher(FUNNELS, 'Funnels'))}
+        {isEnabled(FUNNELS) &&
+          Funnel &&
+          (hasFunnels() ? tabFunnelPicker() : tabSwitcher(FUNNELS, 'Funnels'))}
       </div>
     )
   }
@@ -193,37 +239,45 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderConversions() {
     if (site.hasGoals) {
-      return <GoalConversions onGoalFilterClick={onGoalFilterClick} afterFetchData={afterFetchData} />
-    }
-    else if (adminAccess) {
+      return (
+        <GoalConversions
+          onGoalFilterClick={onGoalFilterClick}
+          afterFetchData={afterFetchData}
+        />
+      )
+    } else if (adminAccess) {
       return (
         <FeatureSetupNotice
           feature={CONVERSIONS}
           title={'Measure how often visitors complete specific actions'}
-          info={'Goals allow you to track registrations, button clicks, form completions, external link clicks, file downloads, 404 error pages and more.'}
+          info={
+            'Goals allow you to track registrations, button clicks, form completions, external link clicks, file downloads, 404 error pages and more.'
+          }
           callToAction={{
-            action: "Set up goals",
+            action: 'Set up goals',
             link: `/${encodeURIComponent(site.domain)}/settings/goals`
           }}
           onHideAction={onHideAction(CONVERSIONS)}
         />
       )
+    } else {
+      return noDataYet()
     }
-    else { return noDataYet() }
   }
 
   function renderFunnels() {
     if (Funnel === null) {
       return featureUnavailable()
-    }
-    else if (Funnel && selectedFunnel && site.funnelsAvailable) {
+    } else if (Funnel && selectedFunnel && site.funnelsAvailable) {
       return <Funnel funnelName={selectedFunnel} />
-    }
-    else if (Funnel && adminAccess) {
+    } else if (Funnel && adminAccess) {
       let callToAction
 
       if (site.funnelsAvailable) {
-        callToAction = { action: 'Set up funnels', link: `/${encodeURIComponent(site.domain)}/settings/funnels` }
+        callToAction = {
+          action: 'Set up funnels',
+          link: `/${encodeURIComponent(site.domain)}/settings/funnels`
+        }
       } else {
         callToAction = { action: 'Upgrade', link: '/billing/choose-plan' }
       }
@@ -232,13 +286,16 @@ export default function Behaviours({ importedDataInView }) {
         <FeatureSetupNotice
           feature={FUNNELS}
           title={'Follow the visitor journey from entry to conversion'}
-          info={'Funnels allow you to analyze the user flow through your website, uncover possible issues, optimize your site and increase the conversion rate.'}
+          info={
+            'Funnels allow you to analyze the user flow through your website, uncover possible issues, optimize your site and increase the conversion rate.'
+          }
           callToAction={callToAction}
           onHideAction={onHideAction(FUNNELS)}
         />
       )
+    } else {
+      return noDataYet()
     }
-    else { return noDataYet() }
   }
 
   function renderProps() {
@@ -248,7 +305,10 @@ export default function Behaviours({ importedDataInView }) {
       let callToAction
 
       if (site.propsAvailable) {
-        callToAction = { action: 'Set up props', link: `/${encodeURIComponent(site.domain)}/settings/properties` }
+        callToAction = {
+          action: 'Set up props',
+          link: `/${encodeURIComponent(site.domain)}/settings/properties`
+        }
       } else {
         callToAction = { action: 'Upgrade', link: '/billing/choose-plan' }
       }
@@ -257,12 +317,16 @@ export default function Behaviours({ importedDataInView }) {
         <FeatureSetupNotice
           feature={PROPS}
           title={'Send custom data to create your own metrics'}
-          info={'You can attach custom properties when sending a pageview or event. This allows you to create custom metrics and analyze stats we don\'t track automatically.'}
+          info={
+            "You can attach custom properties when sending a pageview or event. This allows you to create custom metrics and analyze stats we don't track automatically."
+          }
           callToAction={callToAction}
           onHideAction={onHideAction(PROPS)}
         />
       )
-    } else { return noDataYet() }
+    } else {
+      return noDataYet()
+    }
   }
 
   function noDataYet() {
@@ -282,7 +346,9 @@ export default function Behaviours({ importedDataInView }) {
   }
 
   function onHideAction(mode) {
-    return () => { disableMode(mode) }
+    return () => {
+      disableMode(mode)
+    }
   }
 
   function renderContent() {
@@ -297,13 +363,21 @@ export default function Behaviours({ importedDataInView }) {
   }
 
   function defaultMode() {
-    if (enabledModes.length === 0) { return null }
+    if (enabledModes.length === 0) {
+      return null
+    }
 
     const storedMode = storage.getItem(tabKey)
-    if (storedMode && enabledModes.includes(storedMode)) { return storedMode }
+    if (storedMode && enabledModes.includes(storedMode)) {
+      return storedMode
+    }
 
-    if (enabledModes.includes(CONVERSIONS)) { return CONVERSIONS }
-    if (enabledModes.includes(PROPS)) { return PROPS }
+    if (enabledModes.includes(CONVERSIONS)) {
+      return CONVERSIONS
+    }
+    if (enabledModes.includes(PROPS)) {
+      return PROPS
+    }
     return FUNNELS
   }
 
@@ -317,7 +391,7 @@ export default function Behaviours({ importedDataInView }) {
       // If the feature is not supported by the site owner's subscription,
       // it only makes sense to display the feature tab to the owner itself
       // as only they can upgrade to make the feature available.
-      const callToActionIsMissing = !isAvailable &&  user.role !== 'owner'
+      const callToActionIsMissing = !isAvailable && user.role !== 'owner'
 
       if (!isOptedOut && !callToActionIsMissing) {
         enabledModes.push(feature)
@@ -345,11 +419,27 @@ export default function Behaviours({ importedDataInView }) {
 
   function renderImportedQueryUnsupportedWarning() {
     if (mode === CONVERSIONS) {
-      return <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
+      return (
+        <ImportedQueryUnsupportedWarning
+          loading={loading}
+          skipImportedReason={skipImportedReason}
+        />
+      )
     } else if (mode === PROPS) {
-      return <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} message="Imported data is unavailable in this view" />
+      return (
+        <ImportedQueryUnsupportedWarning
+          loading={loading}
+          skipImportedReason={skipImportedReason}
+          message="Imported data is unavailable in this view"
+        />
+      )
     } else {
-      return <ImportedQueryUnsupportedWarning altCondition={importedDataInView} message="Imported data is unavailable in this view" />
+      return (
+        <ImportedQueryUnsupportedWarning
+          altCondition={importedDataInView}
+          message="Imported data is unavailable in this view"
+        />
+      )
     }
   }
 
diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js
index f7625dc776..11ccdf7b5b 100644
--- a/assets/js/dashboard/stats/behaviours/props.js
+++ b/assets/js/dashboard/stats/behaviours/props.js
@@ -1,20 +1,24 @@
-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 * as storage from "../../util/storage";
-import { EVENT_PROPS_PREFIX, getGoalFilter, FILTER_OPERATIONS, hasConversionGoalFilter } from "../../util/filters";
-import classNames from "classnames";
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { customPropsRoute } from "../../router";
-
+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 * as storage from '../../util/storage'
+import {
+  EVENT_PROPS_PREFIX,
+  getGoalFilter,
+  FILTER_OPERATIONS,
+  hasConversionGoalFilter
+} from '../../util/filters'
+import classNames from 'classnames'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { customPropsRoute } from '../../router'
 
 export default function Properties({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const propKeyStorageName = `prop_key__${site.domain}`
   const propKeyStorageNameForGoal = () => {
@@ -39,8 +43,8 @@ export default function Properties({ afterFetchData }) {
     setPropKeyLoading(true)
     setPropKey(null)
 
-    fetchPropKeyOptions()("").then((propKeys) => {
-      const propKeyValues = propKeys.map(entry => entry.value)
+    fetchPropKeyOptions()('').then((propKeys) => {
+      const propKeyValues = propKeys.map((entry) => entry.value)
 
       if (propKeyValues.length > 0) {
         const storedPropKey = getPropKeyFromStorage()
@@ -54,35 +58,45 @@ export default function Properties({ afterFetchData }) {
 
       setPropKeyLoading(false)
     })
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query])
 
   function getPropKeyFromStorage() {
     if (singleGoalFilterApplied()) {
       const storedForGoal = storage.getItem(propKeyStorageNameForGoal())
-      if (storedForGoal) { return storedForGoal }
+      if (storedForGoal) {
+        return storedForGoal
+      }
     }
 
     return storage.getItem(propKeyStorageName)
   }
 
   function fetchProps() {
-    return api.get(url.apiPath(site, `/custom-prop-values/${encodeURIComponent(propKey)}`), query)
+    return api.get(
+      url.apiPath(site, `/custom-prop-values/${encodeURIComponent(propKey)}`),
+      query
+    )
   }
 
   const fetchPropKeyOptions = useCallback(() => {
     return (input) => {
-      return api.get(url.apiPath(site, "/suggestions/prop_key"), query, { q: input.trim() })
+      return api.get(url.apiPath(site, '/suggestions/prop_key'), query, {
+        q: input.trim()
+      })
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query])
 
   function onPropKeySelect() {
     return (selectedOptions) => {
-      const newPropKey = selectedOptions.length === 0 ? null : selectedOptions[0].value
+      const newPropKey =
+        selectedOptions.length === 0 ? null : selectedOptions[0].value
 
       if (newPropKey) {
-        const storageName = singleGoalFilterApplied() ? propKeyStorageNameForGoal() : propKeyStorageName
+        const storageName = singleGoalFilterApplied()
+          ? propKeyStorageNameForGoal()
+          : propKeyStorageName
         storage.setItem(storageName, newPropKey)
       }
 
@@ -93,13 +107,21 @@ export default function Properties({ afterFetchData }) {
   /*global BUILD_EXTRA*/
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors", meta: { plot: true } }),
-      metrics.createEvents({ renderLabel: (_query) => "Events", meta: { hiddenOnMobile: true } }),
+      metrics.createVisitors({
+        renderLabel: (_query) => 'Visitors',
+        meta: { plot: true }
+      }),
+      metrics.createEvents({
+        renderLabel: (_query) => 'Events',
+        meta: { hiddenOnMobile: true }
+      }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage(),
-      BUILD_EXTRA && metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
-      BUILD_EXTRA && metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
-    ].filter(metric => !!metric)
+      BUILD_EXTRA &&
+        metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
+      BUILD_EXTRA &&
+        metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
+    ].filter((metric) => !!metric)
   }
 
   function renderBreakdown() {
@@ -110,7 +132,11 @@ export default function Properties({ afterFetchData }) {
         getFilterInfo={getFilterInfo}
         keyLabel={propKey}
         metrics={chooseMetrics()}
-        detailsLinkProps={{ path: customPropsRoute.path, params: { propKey }, search: (search) => search }}
+        detailsLinkProps={{
+          path: customPropsRoute.path,
+          params: { propKey },
+          search: (search) => search
+        }}
         maybeHideDetails={true}
         color="bg-red-50"
         colMinWidth={90}
@@ -120,22 +146,38 @@ export default function Properties({ afterFetchData }) {
 
   const getFilterInfo = (listItem) => ({
     prefix: `${EVENT_PROPS_PREFIX}${propKey}`,
-    filter: ["is", `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
+    filter: ['is', `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
   })
 
   const comboboxDisabled = !propKeyLoading && !propKey
-  const comboboxPlaceholder = comboboxDisabled ? 'No custom properties found' : ''
+  const comboboxPlaceholder = comboboxDisabled
+    ? 'No custom properties found'
+    : ''
   const comboboxValues = propKey ? [{ value: propKey, label: propKey }] : []
-  const boxClass = classNames('pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:border-gray-500', {
-    'pointer-events-none': comboboxDisabled
-  })
+  const boxClass = classNames(
+    'pl-2 pr-8 py-1 bg-transparent dark:text-gray-300 rounded-md shadow-sm border border-gray-300 dark:border-gray-500',
+    {
+      'pointer-events-none': comboboxDisabled
+    }
+  )
 
   const COMBOBOX_HEIGHT = 40
 
   return (
-    <div className="w-full mt-4" style={{ minHeight: `${COMBOBOX_HEIGHT + MIN_HEIGHT}px` }}>
+    <div
+      className="w-full mt-4"
+      style={{ minHeight: `${COMBOBOX_HEIGHT + MIN_HEIGHT}px` }}
+    >
       <div style={{ minHeight: `${COMBOBOX_HEIGHT}px` }}>
-        <Combobox boxClass={boxClass} forceLoading={propKeyLoading} fetchOptions={fetchPropKeyOptions()} singleOption={true} values={comboboxValues} onSelect={onPropKeySelect()} placeholder={comboboxPlaceholder} />
+        <Combobox
+          boxClass={boxClass}
+          forceLoading={propKeyLoading}
+          fetchOptions={fetchPropKeyOptions()}
+          singleOption={true}
+          values={comboboxValues}
+          onSelect={onPropKeySelect()}
+          placeholder={comboboxPlaceholder}
+        />
       </div>
       {propKey && renderBreakdown()}
     </div>
diff --git a/assets/js/dashboard/stats/current-visitors.js b/assets/js/dashboard/stats/current-visitors.js
index e6c8985411..4df0bc23c4 100644
--- a/assets/js/dashboard/stats/current-visitors.js
+++ b/assets/js/dashboard/stats/current-visitors.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useCallback, useEffect, useState } from 'react'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
 import * as api from '../api'
diff --git a/assets/js/dashboard/stats/devices/index.js b/assets/js/dashboard/stats/devices/index.js
index 1452ab5bcd..ca9dd8ae2f 100644
--- a/assets/js/dashboard/stats/devices/index.js
+++ b/assets/js/dashboard/stats/devices/index.js
@@ -1,32 +1,36 @@
-import React, { useEffect, useState } from 'react';
-import * as storage from '../../util/storage';
-import { getFiltersByKeyPrefix, hasConversionGoalFilter, isFilteringOnFixedValue } from '../../util/filters';
-import ListReport from '../reports/list';
-import * as metrics from '../reports/metrics';
-import * as api from '../../api';
-import * as url from '../../util/url';
-import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
+import React, { useEffect, useState } from 'react'
+import * as storage from '../../util/storage'
+import {
+  getFiltersByKeyPrefix,
+  hasConversionGoalFilter,
+  isFilteringOnFixedValue
+} from '../../util/filters'
+import ListReport from '../reports/list'
+import * as metrics from '../reports/metrics'
+import * as api from '../../api'
+import * as url from '../../util/url'
+import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
 import {
   browsersRoute,
   browserVersionsRoute,
   operatingSystemsRoute,
   operatingSystemVersionsRoute,
   screenSizesRoute
-} from '../../router';
+} from '../../router'
 
 // Icons copied from https://github.com/alrra/browser-logos
 const BROWSER_ICONS = {
-  'Chrome': 'chrome.svg',
-  'curl': 'curl.svg',
-  'Safari': 'safari.png',
-  'Firefox': 'firefox.svg',
+  Chrome: 'chrome.svg',
+  curl: 'curl.svg',
+  Safari: 'safari.png',
+  Firefox: 'firefox.svg',
   'Microsoft Edge': 'edge.svg',
-  'Vivaldi': 'vivaldi.svg',
-  'Opera': 'opera.svg',
+  Vivaldi: 'vivaldi.svg',
+  Opera: 'opera.svg',
   'Samsung Browser': 'samsung-internet.svg',
-  'Chromium': 'chromium.svg',
+  Chromium: 'chromium.svg',
   'UC Browser': 'uc.svg',
   'Yandex Browser': 'yandex.png', // Only PNG available in browser-logos
   // Logos underneath this line are not available in browser-logos. Grabbed from random places on the internets.
@@ -34,7 +38,7 @@ const BROWSER_ICONS = {
   'MIUI Browser': 'miui.webp',
   'Huawei Browser Mobile': 'huawei.png',
   'QQ Browser': 'qq.png',
-  'Ecosia': 'ecosia.png',
+  Ecosia: 'ecosia.png',
   'vivo Browser': 'vivo.png'
 }
 
@@ -51,8 +55,8 @@ export function browserIconFor(browser) {
 }
 
 function Browsers({ afterFetchData }) {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/browsers'), query)
   }
@@ -60,7 +64,7 @@ function Browsers({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'browser',
-      filter: ["is", "browser", [listItem['name']]]
+      filter: ['is', 'browser', [listItem['name']]]
     }
   }
 
@@ -73,7 +77,7 @@ function Browsers({ afterFetchData }) {
       metrics.createVisitors({ meta: { plot: true } }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -84,14 +88,17 @@ function Browsers({ afterFetchData }) {
       keyLabel="Browser"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{ path: browsersRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: browsersRoute.path,
+        search: (search) => search
+      }}
     />
   )
 }
 
 function BrowserVersions({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/browser-versions'), query)
   }
@@ -101,12 +108,12 @@ function BrowserVersions({ afterFetchData }) {
   }
 
   function getFilterInfo(listItem) {
-    if (getSingleFilter(query, "browser") == '(not set)') {
+    if (getSingleFilter(query, 'browser') == '(not set)') {
       return null
     }
     return {
       prefix: 'browser_version',
-      filter: ["is", "browser_version", [listItem.version]]
+      filter: ['is', 'browser_version', [listItem.version]]
     }
   }
 
@@ -115,7 +122,7 @@ function BrowserVersions({ afterFetchData }) {
       metrics.createVisitors({ meta: { plot: true } }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -126,46 +133,45 @@ function BrowserVersions({ afterFetchData }) {
       keyLabel="Browser version"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{ path: browserVersionsRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: browserVersionsRoute.path,
+        search: (search) => search
+      }}
     />
   )
 }
 
 // Icons copied from https://github.com/ngeenx/operating-system-logos
 const OS_ICONS = {
-  'iOS': 'ios.png',
-  'Mac': 'mac.png',
-  'Windows': 'windows.png',
+  iOS: 'ios.png',
+  Mac: 'mac.png',
+  Windows: 'windows.png',
   'Windows Phone': 'windows.png',
-  'Android': 'android.png',
+  Android: 'android.png',
   'GNU/Linux': 'gnu_linux.png',
-  'Ubuntu': 'ubuntu.png',
+  Ubuntu: 'ubuntu.png',
   'Chrome OS': 'chrome_os.png',
-  'iPadOS': 'ipad_os.png',
+  iPadOS: 'ipad_os.png',
   'Fire OS': 'fire_os.png',
-  'HarmonyOS': 'harmony_os.png',
-  'Tizen': 'tizen.png',
-  'PlayStation': 'playstation.png',
-  'KaiOS': 'kai_os.png',
-  'Fedora': 'fedora.png',
-  'FreeBSD': 'freebsd.png',
+  HarmonyOS: 'harmony_os.png',
+  Tizen: 'tizen.png',
+  PlayStation: 'playstation.png',
+  KaiOS: 'kai_os.png',
+  Fedora: 'fedora.png',
+  FreeBSD: 'freebsd.png'
 }
 
 export function osIconFor(os) {
   const filename = OS_ICONS[os] || 'fallback.svg'
 
   return (
-    <img
-      alt=""
-      src={`/images/icon/os/${filename}`}
-      className="w-4 h-4 mr-2"
-    />
+    <img alt="" src={`/images/icon/os/${filename}`} className="w-4 h-4 mr-2" />
   )
 }
 
 function OperatingSystems({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/operating-systems'), query)
   }
@@ -173,7 +179,7 @@ function OperatingSystems({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'os',
-      filter: ["is", "os", [listItem['name']]]
+      filter: ['is', 'os', [listItem['name']]]
     }
   }
 
@@ -181,8 +187,9 @@ function OperatingSystems({ afterFetchData }) {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
-      !hasConversionGoalFilter(query) && metrics.createPercentage({ meta: { hiddenonMobile: true } })
-    ].filter(metric => !!metric)
+      !hasConversionGoalFilter(query) &&
+        metrics.createPercentage({ meta: { hiddenonMobile: true } })
+    ].filter((metric) => !!metric)
   }
 
   function renderIcon(listItem) {
@@ -197,14 +204,17 @@ function OperatingSystems({ afterFetchData }) {
       renderIcon={renderIcon}
       keyLabel="Operating system"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: operatingSystemsRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: operatingSystemsRoute.path,
+        search: (search) => search
+      }}
     />
   )
 }
 
 function OperatingSystemVersions({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   function fetchData() {
     return api.get(url.apiPath(site, '/operating-system-versions'), query)
@@ -215,12 +225,12 @@ function OperatingSystemVersions({ afterFetchData }) {
   }
 
   function getFilterInfo(listItem) {
-    if (getSingleFilter(query, "os") == '(not set)') {
+    if (getSingleFilter(query, 'os') == '(not set)') {
       return null
     }
     return {
       prefix: 'os_version',
-      filter: ["is", "os_version", [listItem.version]]
+      filter: ['is', 'os_version', [listItem.version]]
     }
   }
 
@@ -229,7 +239,7 @@ function OperatingSystemVersions({ afterFetchData }) {
       metrics.createVisitors({ meta: { plot: true } }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -240,15 +250,17 @@ function OperatingSystemVersions({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Operating System Version"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: operatingSystemVersionsRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: operatingSystemVersionsRoute.path,
+        search: (search) => search
+      }}
     />
   )
-
 }
 
 function ScreenSizes({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   function fetchData() {
     return api.get(url.apiPath(site, '/screen-sizes'), query)
@@ -261,7 +273,7 @@ function ScreenSizes({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'screen',
-      filter: ["is", "screen", [listItem['name']]]
+      filter: ['is', 'screen', [listItem['name']]]
     }
   }
 
@@ -270,7 +282,7 @@ function ScreenSizes({ afterFetchData }) {
       metrics.createVisitors({ meta: { plot: true } }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -281,7 +293,10 @@ function ScreenSizes({ afterFetchData }) {
       keyLabel="Screen size"
       metrics={chooseMetrics()}
       renderIcon={renderIcon}
-      detailsLinkProps={{ path: screenSizesRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: screenSizesRoute.path,
+        search: (search) => search
+      }}
     />
   )
 }
@@ -290,21 +305,94 @@ export function screenSizeIconFor(screenSize) {
   let svg = null
 
   if (screenSize === 'Mobile') {
-    svg = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="-mt-px feather"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12" y2="18" /></svg>
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="-mt-px feather"
+      >
+        <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+        <line x1="12" y1="18" x2="12" y2="18" />
+      </svg>
+    )
   } else if (screenSize === 'Tablet') {
-    svg = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="-mt-px feather"><rect x="4" y="2" width="16" height="20" rx="2" ry="2" transform="rotate(180 12 12)" /><line x1="12" y1="18" x2="12" y2="18" /></svg>
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="-mt-px feather"
+      >
+        <rect
+          x="4"
+          y="2"
+          width="16"
+          height="20"
+          rx="2"
+          ry="2"
+          transform="rotate(180 12 12)"
+        />
+        <line x1="12" y1="18" x2="12" y2="18" />
+      </svg>
+    )
   } else if (screenSize === 'Laptop') {
-    svg = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="-mt-px feather"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="2" y1="20" x2="22" y2="20" /></svg>
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="-mt-px feather"
+      >
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+        <line x1="2" y1="20" x2="22" y2="20" />
+      </svg>
+    )
   } else if (screenSize === 'Desktop') {
-    svg = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="-mt-px feather"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>
+    svg = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="-mt-px feather"
+      >
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+        <line x1="8" y1="21" x2="16" y2="21" />
+        <line x1="12" y1="17" x2="12" y2="21" />
+      </svg>
+    )
   }
 
   return <span className="mr-1.5">{svg}</span>
 }
 
 export default function Devices() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const tabKey = `deviceTab__${site.domain}`
   const storedTab = storage.getItem(tabKey)
@@ -347,9 +435,7 @@ export default function Devices() {
 
     if (isActive) {
       return (
-        <button
-          className="inline-block h-5 font-bold text-indigo-700 active-prop-heading dark:text-indigo-500"
-        >
+        <button className="inline-block h-5 font-bold text-indigo-700 active-prop-heading dark:text-indigo-500">
           {name}
         </button>
       )
@@ -370,7 +456,10 @@ export default function Devices() {
       <div className="flex justify-between w-full">
         <div className="flex gap-x-1">
           <h3 className="font-bold dark:text-gray-100">Devices</h3>
-          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning
+            loading={loading}
+            skipImportedReason={skipImportedReason}
+          />
         </div>
         <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
           {renderPill('Browser', 'browser')}
diff --git a/assets/js/dashboard/stats/graph/date-formatter.js b/assets/js/dashboard/stats/graph/date-formatter.js
index 2d3a5def4a..690dc36f5a 100644
--- a/assets/js/dashboard/stats/graph/date-formatter.js
+++ b/assets/js/dashboard/stats/graph/date-formatter.js
@@ -1,6 +1,8 @@
-import {parseUTCDate, formatMonthYYYY, formatDayShort} from '../../util/date'
+import { parseUTCDate, formatMonthYYYY, formatDayShort } from '../../util/date'
 
-const browserDateFormat = Intl.DateTimeFormat(navigator.language, { hour: 'numeric' })
+const browserDateFormat = Intl.DateTimeFormat(navigator.language, {
+  hour: 'numeric'
+})
 
 const is12HourClock = function () {
   return browserDateFormat.resolvedOptions().hour12
@@ -19,7 +21,9 @@ const monthIntervalFormatter = {
 const weekIntervalFormatter = {
   long(isoDate, options) {
     const formatted = this.short(isoDate, options)
-    return options.isBucketPartial ? `Partial week of ${formatted}` : `Week of ${formatted}`
+    return options.isBucketPartial
+      ? `Partial week of ${formatted}`
+      : `Week of ${formatted}`
   },
   short(isoDate, options) {
     return formatDayShort(parseUTCDate(isoDate), options.shouldShowYear)
@@ -98,9 +102,20 @@ const factory = {
  * @param {boolean} config.shouldShowYear - Should the year be appended to the date?
  * Defaults to false. Rendering year string is a newer opt-in feature to be enabled where needed.
  */
-export default function dateFormatter({ interval, longForm, period, isPeriodFull, shouldShowYear = false }) {
+export default function dateFormatter({
+  interval,
+  longForm,
+  period,
+  isPeriodFull,
+  shouldShowYear = false
+}) {
   const displayMode = longForm ? 'long' : 'short'
-  const options = { period: period, interval: interval, isBucketPartial: !isPeriodFull, shouldShowYear }
+  const options = {
+    period: period,
+    interval: interval,
+    isBucketPartial: !isPeriodFull,
+    shouldShowYear
+  }
   return function (isoDate, _index, _ticks) {
     return factory[interval][displayMode](isoDate, options)
   }
diff --git a/assets/js/dashboard/stats/graph/graph-tooltip.js b/assets/js/dashboard/stats/graph/graph-tooltip.js
index c022db5137..2dfb0ce9ab 100644
--- a/assets/js/dashboard/stats/graph/graph-tooltip.js
+++ b/assets/js/dashboard/stats/graph/graph-tooltip.js
@@ -5,64 +5,101 @@ import { METRIC_LABELS } from './graph-util'
 import { MetricFormatterShort } from '../reports/metric-formatter'
 import { ChangeArrow } from '../reports/change-arrow'
 
-const renderBucketLabel = function(query, graphData, label, comparison = false) {
+const renderBucketLabel = function (
+  query,
+  graphData,
+  label,
+  comparison = false
+) {
   let isPeriodFull = graphData.full_intervals?.[label]
   if (comparison) isPeriodFull = true
 
   const formattedLabel = dateFormatter({
-    interval: graphData.interval, longForm: true, period: query.period, isPeriodFull,
+    interval: graphData.interval,
+    longForm: true,
+    period: query.period,
+    isPeriodFull
   })(label)
 
   if (query.period === 'realtime') {
     return dateFormatter({
-      interval: graphData.interval, longForm: true, period: query.period,
+      interval: graphData.interval,
+      longForm: true,
+      period: query.period
     })(label)
   }
 
   if (graphData.interval === 'hour' || graphData.interval == 'minute') {
-    const date = dateFormatter({ interval: "day", longForm: true, period: query.period })(label)
+    const date = dateFormatter({
+      interval: 'day',
+      longForm: true,
+      period: query.period
+    })(label)
     return `${date}, ${formattedLabel}`
   }
 
   return formattedLabel
 }
 
-const calculatePercentageDifference = function(oldValue, newValue) {
+const calculatePercentageDifference = function (oldValue, newValue) {
   if (oldValue == 0 && newValue > 0) {
     return 100
   } else if (oldValue == 0 && newValue == 0) {
     return 0
   } else {
-    return Math.round((newValue - oldValue) / oldValue * 100)
+    return Math.round(((newValue - oldValue) / oldValue) * 100)
   }
 }
 
-const buildTooltipData = function(query, graphData, metric, tooltipModel) {
-  const data = tooltipModel.dataPoints.find((dataPoint) => dataPoint.dataset.yAxisID == "y")
-  const comparisonData = tooltipModel.dataPoints.find((dataPoint) => dataPoint.dataset.yAxisID == "yComparison")
+const buildTooltipData = function (query, graphData, metric, tooltipModel) {
+  const data = tooltipModel.dataPoints.find(
+    (dataPoint) => dataPoint.dataset.yAxisID == 'y'
+  )
+  const comparisonData = tooltipModel.dataPoints.find(
+    (dataPoint) => dataPoint.dataset.yAxisID == 'yComparison'
+  )
 
-  const label = data && renderBucketLabel(query, graphData, graphData.labels[data.dataIndex])
-  const comparisonLabel = comparisonData && renderBucketLabel(query, graphData, graphData.comparison_labels[comparisonData.dataIndex], true)
+  const label =
+    data &&
+    renderBucketLabel(query, graphData, graphData.labels[data.dataIndex])
+  const comparisonLabel =
+    comparisonData &&
+    renderBucketLabel(
+      query,
+      graphData,
+      graphData.comparison_labels[comparisonData.dataIndex],
+      true
+    )
 
   const value = graphData.plot[data.dataIndex]
 
   const formatter = MetricFormatterShort[metric]
   const comparisonValue = graphData.comparison_plot?.[comparisonData.dataIndex]
-  const comparisonDifference = label && comparisonData && calculatePercentageDifference(comparisonValue, value)
+  const comparisonDifference =
+    label &&
+    comparisonData &&
+    calculatePercentageDifference(comparisonValue, value)
 
   const formattedValue = formatter(value)
   const formattedComparisonValue = comparisonData && formatter(comparisonValue)
 
-  return { label, formattedValue, comparisonLabel, formattedComparisonValue, comparisonDifference }
+  return {
+    label,
+    formattedValue,
+    comparisonLabel,
+    formattedComparisonValue,
+    comparisonDifference
+  }
 }
 
-
 let tooltipRoot
 
 export default function GraphTooltip(graphData, metric, query) {
   return (context) => {
     const tooltipModel = context.tooltip
-    const offset = document.getElementById("main-graph-canvas").getBoundingClientRect()
+    const offset = document
+      .getElementById('main-graph-canvas')
+      .getBoundingClientRect()
     let tooltipEl = document.getElementById('chartjs-tooltip')
 
     if (!tooltipEl) {
@@ -75,7 +112,8 @@ export default function GraphTooltip(graphData, metric, query) {
     }
 
     if (tooltipEl && offset && window.innerWidth < 768) {
-      tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
+      tooltipEl.style.top =
+        offset.y + offset.height + window.scrollY + 15 + 'px'
       tooltipEl.style.left = offset.x + 'px'
       tooltipEl.style.right = null
       tooltipEl.style.opacity = 1
@@ -87,41 +125,64 @@ export default function GraphTooltip(graphData, metric, query) {
     }
 
     if (tooltipModel.body) {
-      const tooltipData = buildTooltipData(query, graphData, metric, tooltipModel)
+      const tooltipData = buildTooltipData(
+        query,
+        graphData,
+        metric,
+        tooltipModel
+      )
 
       tooltipRoot.render(
         <aside className="text-gray-100 flex flex-col">
           <div className="flex justify-between items-center">
-            <span className="font-semibold mr-4 text-lg">{METRIC_LABELS[metric]}</span>
+            <span className="font-semibold mr-4 text-lg">
+              {METRIC_LABELS[metric]}
+            </span>
             {tooltipData.comparisonDifference ? (
-            <div className="inline-flex items-center space-x-1">
-              <ChangeArrow metric={metric} change={tooltipData.comparisonDifference} />
-            </div>) : null}
+              <div className="inline-flex items-center space-x-1">
+                <ChangeArrow
+                  metric={metric}
+                  change={tooltipData.comparisonDifference}
+                />
+              </div>
+            ) : null}
           </div>
 
           {tooltipData.label ? (
-          <div className="flex flex-col">
-            <div className="flex flex-row justify-between items-center">
-              <span className="flex items-center mr-4">
-                <div className="w-3 h-3 mr-1 rounded-full" style={{ backgroundColor: "rgba(101,116,205)" }}></div>
-                <span>{tooltipData.label}</span>
-              </span>
-              <span className="text-base font-bold">{tooltipData.formattedValue}</span>
-            </div>
+            <div className="flex flex-col">
+              <div className="flex flex-row justify-between items-center">
+                <span className="flex items-center mr-4">
+                  <div
+                    className="w-3 h-3 mr-1 rounded-full"
+                    style={{ backgroundColor: 'rgba(101,116,205)' }}
+                  ></div>
+                  <span>{tooltipData.label}</span>
+                </span>
+                <span className="text-base font-bold">
+                  {tooltipData.formattedValue}
+                </span>
+              </div>
 
-            {tooltipData.comparisonLabel ? (
-            <div className="flex flex-row justify-between items-center">
-              <span className="flex items-center mr-4">
-                <div className="w-3 h-3 mr-1 rounded-full bg-gray-500"></div>
-                <span>{tooltipData.comparisonLabel}</span>
-              </span>
-              <span className="text-base font-bold">{tooltipData.formattedComparisonValue}</span>
-            </div>) : null}
-          </div>
+              {tooltipData.comparisonLabel ? (
+                <div className="flex flex-row justify-between items-center">
+                  <span className="flex items-center mr-4">
+                    <div className="w-3 h-3 mr-1 rounded-full bg-gray-500"></div>
+                    <span>{tooltipData.comparisonLabel}</span>
+                  </span>
+                  <span className="text-base font-bold">
+                    {tooltipData.formattedComparisonValue}
+                  </span>
+                </div>
+              ) : null}
+            </div>
           ) : null}
 
-          {graphData.interval === "month" ? (<span className="font-semibold italic">Click to view month</span>) : null}
-          {graphData.interval === "day" ? (<span className="font-semibold italic">Click to view day</span>) : null}
+          {graphData.interval === 'month' ? (
+            <span className="font-semibold italic">Click to view month</span>
+          ) : null}
+          {graphData.interval === 'day' ? (
+            <span className="font-semibold italic">Click to view day</span>
+          ) : null}
         </aside>
       )
     }
diff --git a/assets/js/dashboard/stats/graph/graph-util.js b/assets/js/dashboard/stats/graph/graph-util.js
index cdac657387..a51226b062 100644
--- a/assets/js/dashboard/stats/graph/graph-util.js
+++ b/assets/js/dashboard/stats/graph/graph-util.js
@@ -1,17 +1,17 @@
 export const METRIC_LABELS = {
-  'visitors': 'Visitors',
-  'pageviews': 'Pageviews',
-  'events': 'Total Conversions',
-  'views_per_visit': 'Views per Visit',
-  'visits': 'Visits',
-  'bounce_rate': 'Bounce Rate',
-  'visit_duration': 'Visit Duration',
-  'conversions': 'Converted Visitors',
-  'conversion_rate': 'Conversion Rate',
-  'average_revenue': 'Average Revenue',
-  'total_revenue': 'Total Revenue',
-  'scroll_depth': 'Scroll Depth',
-  'time_on_page': 'Time on Page',
+  visitors: 'Visitors',
+  pageviews: 'Pageviews',
+  events: 'Total Conversions',
+  views_per_visit: 'Views per Visit',
+  visits: 'Visits',
+  bounce_rate: 'Bounce Rate',
+  visit_duration: 'Visit Duration',
+  conversions: 'Converted Visitors',
+  conversion_rate: 'Conversion Rate',
+  average_revenue: 'Average Revenue',
+  total_revenue: 'Total Revenue',
+  scroll_depth: 'Scroll Depth',
+  time_on_page: 'Time on Page'
 }
 
 function plottable(dataArray) {
@@ -25,54 +25,73 @@ function plottable(dataArray) {
   })
 }
 
-const buildComparisonDataset = function(comparisonPlot) {
+const buildComparisonDataset = function (comparisonPlot) {
   if (!comparisonPlot) return []
 
-  return [{
-    data: plottable(comparisonPlot),
-    borderColor: 'rgba(60,70,110,0.2)',
-    pointBackgroundColor: 'rgba(60,70,110,0.2)',
-    pointHoverBackgroundColor: 'rgba(60, 70, 110)',
-    yAxisID: 'yComparison',
-  }]
+  return [
+    {
+      data: plottable(comparisonPlot),
+      borderColor: 'rgba(60,70,110,0.2)',
+      pointBackgroundColor: 'rgba(60,70,110,0.2)',
+      pointHoverBackgroundColor: 'rgba(60, 70, 110)',
+      yAxisID: 'yComparison'
+    }
+  ]
 }
 
-const buildDashedDataset = function(plot, presentIndex) {
+const buildDashedDataset = function (plot, presentIndex) {
   if (!presentIndex) return []
 
-  const dashedPart = plot.slice(presentIndex - 1, presentIndex + 1);
-  const dashedPlot = (new Array(presentIndex - 1)).concat(dashedPart)
+  const dashedPart = plot.slice(presentIndex - 1, presentIndex + 1)
+  const dashedPlot = new Array(presentIndex - 1).concat(dashedPart)
 
-  return [{
-    data: plottable(dashedPlot),
-    borderDash: [3, 3],
-    borderColor: 'rgba(101,116,205)',
-    pointHoverBackgroundColor: 'rgba(71, 87, 193)',
-    yAxisID: 'y',
-  }]
+  return [
+    {
+      data: plottable(dashedPlot),
+      borderDash: [3, 3],
+      borderColor: 'rgba(101,116,205)',
+      pointHoverBackgroundColor: 'rgba(71, 87, 193)',
+      yAxisID: 'y'
+    }
+  ]
 }
 
-const buildMainPlotDataset = function(plot, presentIndex) {
+const buildMainPlotDataset = function (plot, presentIndex) {
   const data = presentIndex ? plot.slice(0, presentIndex) : plot
 
-  return [{
-    data: plottable(data),
-    borderColor: 'rgba(101,116,205)',
-    pointBackgroundColor: 'rgba(101,116,205)',
-    pointHoverBackgroundColor: 'rgba(71, 87, 193)',
-    yAxisID: 'y',
-  }]
+  return [
+    {
+      data: plottable(data),
+      borderColor: 'rgba(101,116,205)',
+      pointBackgroundColor: 'rgba(101,116,205)',
+      pointHoverBackgroundColor: 'rgba(71, 87, 193)',
+      yAxisID: 'y'
+    }
+  ]
 }
 
-export const buildDataSet = (plot, comparisonPlot, present_index, ctx, label) => {
-  var gradient = ctx.createLinearGradient(0, 0, 0, 300);
-  var prev_gradient = ctx.createLinearGradient(0, 0, 0, 300);
-  gradient.addColorStop(0, 'rgba(101,116,205, 0.2)');
-  gradient.addColorStop(1, 'rgba(101,116,205, 0)');
-  prev_gradient.addColorStop(0, 'rgba(101,116,205, 0.075)');
-  prev_gradient.addColorStop(1, 'rgba(101,116,205, 0)');
+export const buildDataSet = (
+  plot,
+  comparisonPlot,
+  present_index,
+  ctx,
+  label
+) => {
+  var gradient = ctx.createLinearGradient(0, 0, 0, 300)
+  var prev_gradient = ctx.createLinearGradient(0, 0, 0, 300)
+  gradient.addColorStop(0, 'rgba(101,116,205, 0.2)')
+  gradient.addColorStop(1, 'rgba(101,116,205, 0)')
+  prev_gradient.addColorStop(0, 'rgba(101,116,205, 0.075)')
+  prev_gradient.addColorStop(1, 'rgba(101,116,205, 0)')
 
-  const defaultOptions = { label, borderWidth: 3, pointBorderColor: "transparent", pointHoverRadius: 4, backgroundColor: gradient, fill: true }
+  const defaultOptions = {
+    label,
+    borderWidth: 3,
+    pointBorderColor: 'transparent',
+    pointHoverRadius: 4,
+    backgroundColor: gradient,
+    fill: true
+  }
 
   const dataset = [
     ...buildMainPlotDataset(plot, present_index),
diff --git a/assets/js/dashboard/stats/graph/interval-picker.js b/assets/js/dashboard/stats/graph/interval-picker.js
index c1a07e0007..c5c4b89e08 100644
--- a/assets/js/dashboard/stats/graph/interval-picker.js
+++ b/assets/js/dashboard/stats/graph/interval-picker.js
@@ -1,21 +1,26 @@
-import React, { Fragment, useRef } from 'react';
-import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import classNames from 'classnames';
-import * as storage from '../../util/storage';
-import { BlurMenuButtonOnEscape, isModifierPressed, isTyping, Keybind } from '../../keybinding';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
-import { useMatch } from 'react-router-dom';
-import { rootRoute } from '../../router';
-import { popover } from '../../components/popover';
+import React, { Fragment, useRef } from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import classNames from 'classnames'
+import * as storage from '../../util/storage'
+import {
+  BlurMenuButtonOnEscape,
+  isModifierPressed,
+  isTyping,
+  Keybind
+} from '../../keybinding'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { useMatch } from 'react-router-dom'
+import { rootRoute } from '../../router'
+import { popover } from '../../components/popover'
 
 const INTERVAL_LABELS = {
-  'minute': 'Minutes',
-  'hour': 'Hours',
-  'day': 'Days',
-  'week': 'Weeks',
-  'month': 'Months'
+  minute: 'Minutes',
+  hour: 'Hours',
+  day: 'Days',
+  week: 'Weeks',
+  month: 'Months'
 }
 
 function validIntervals(site, query) {
@@ -36,11 +41,11 @@ function validIntervals(site, query) {
 
 function getDefaultInterval(query, validIntervals) {
   const defaultByPeriod = {
-    'day': 'hour',
+    day: 'hour',
     '7d': 'day',
     '6mo': 'month',
     '12mo': 'month',
-    'year': 'month'
+    year: 'month'
   }
 
   if (query.period === 'custom') {
@@ -74,7 +79,7 @@ function storeInterval(period, domain, interval) {
   storage.setItem(`interval__${period}__${domain}`, interval)
 }
 
-export const getCurrentInterval = function(site, query) {
+export const getCurrentInterval = function (site, query) {
   const options = validIntervals(site, query)
 
   const storedInterval = getStoredInterval(query.period, site.domain)
@@ -89,16 +94,15 @@ export const getCurrentInterval = function(site, query) {
 
 export function IntervalPicker({ onIntervalUpdate }) {
   const menuElement = useRef(null)
-  const {query} = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   const dashboardRouteMatch = useMatch(rootRoute.path)
-  
+
   if (query.period == 'realtime') return null
 
   const options = validIntervals(site, query)
   const currentInterval = getCurrentInterval(site, query)
 
-
   function updateInterval(interval) {
     storeInterval(query.period, site.domain, interval)
     onIntervalUpdate(interval)
@@ -106,13 +110,23 @@ export function IntervalPicker({ onIntervalUpdate }) {
 
   function renderDropdownItem(option) {
     return (
-      <Menu.Item onClick={() => updateInterval(option)} key={option} disabled={option == currentInterval}>
+      <Menu.Item
+        onClick={() => updateInterval(option)}
+        key={option}
+        disabled={option == currentInterval}
+      >
         {({ active }) => (
-          <span className={classNames({
-            'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer': active,
-            'text-gray-700 dark:text-gray-200': !active,
-            'font-bold cursor-none select-none': option == currentInterval,
-          }, 'block px-4 py-2 text-sm')}>
+          <span
+            className={classNames(
+              {
+                'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer':
+                  active,
+                'text-gray-700 dark:text-gray-200': !active,
+                'font-bold cursor-none select-none': option == currentInterval
+              },
+              'block px-4 py-2 text-sm'
+            )}
+          >
             {INTERVAL_LABELS[option]}
           </span>
         )}
@@ -144,11 +158,7 @@ export function IntervalPicker({ onIntervalUpdate }) {
             <ChevronDownIcon className="ml-1 h-4 w-4" aria-hidden="true" />
           </Menu.Button>
 
-          <Transition
-            as={Fragment}
-            show={open}
-            {...popover.transition.props}
-          >
+          <Transition as={Fragment} show={open} {...popover.transition.props}>
             <Menu.Items
               className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
               static
diff --git a/assets/js/dashboard/stats/graph/line-graph.js b/assets/js/dashboard/stats/graph/line-graph.js
index 9b5db4db60..5fbb3b05dc 100644
--- a/assets/js/dashboard/stats/graph/line-graph.js
+++ b/assets/js/dashboard/stats/graph/line-graph.js
@@ -1,16 +1,16 @@
-import React from 'react';
-import { useAppNavigate } from '../../navigation/use-app-navigate';
-import { useQueryContext } from '../../query-context';
-import Chart from 'chart.js/auto';
+import React from 'react'
+import { useAppNavigate } from '../../navigation/use-app-navigate'
+import { useQueryContext } from '../../query-context'
+import Chart from 'chart.js/auto'
 import GraphTooltip from './graph-tooltip'
 import { buildDataSet, METRIC_LABELS } from './graph-util'
-import dateFormatter from './date-formatter';
-import FadeIn from '../../fade-in';
-import classNames from 'classnames';
-import { hasConversionGoalFilter } from '../../util/filters';
+import dateFormatter from './date-formatter'
+import FadeIn from '../../fade-in'
+import classNames from 'classnames'
+import { hasConversionGoalFilter } from '../../util/filters'
 import { MetricFormatterShort } from '../reports/metric-formatter'
 
-const calculateMaximumY = function(dataset) {
+const calculateMaximumY = function (dataset) {
   const yAxisValues = dataset
     .flatMap((item) => item.data)
     .map((item) => item || 0)
@@ -24,9 +24,9 @@ const calculateMaximumY = function(dataset) {
 
 class LineGraph extends React.Component {
   constructor(props) {
-    super(props);
-    this.regenerateChart = this.regenerateChart.bind(this);
-    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+    super(props)
+    this.regenerateChart = this.regenerateChart.bind(this)
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
   }
 
   getGraphMetric() {
@@ -42,9 +42,15 @@ class LineGraph extends React.Component {
   regenerateChart() {
     const { graphData, query } = this.props
     const metric = this.getGraphMetric()
-    const graphEl = document.getElementById("main-graph-canvas")
-    this.ctx = graphEl.getContext('2d');
-    const dataSet = buildDataSet(graphData.plot, graphData.comparison_plot, graphData.present_index, this.ctx, METRIC_LABELS[metric])
+    const graphEl = document.getElementById('main-graph-canvas')
+    this.ctx = graphEl.getContext('2d')
+    const dataSet = buildDataSet(
+      graphData.plot,
+      graphData.comparison_plot,
+      graphData.present_index,
+      this.ctx,
+      METRIC_LABELS[metric]
+    )
 
     return new Chart(this.ctx, {
       type: 'line',
@@ -62,7 +68,7 @@ class LineGraph extends React.Component {
             intersect: false,
             position: 'average',
             external: GraphTooltip(graphData, metric, query)
-          },
+          }
         },
         responsive: true,
         maintainAspectRatio: false,
@@ -82,41 +88,42 @@ class LineGraph extends React.Component {
             },
             grid: {
               zeroLineColor: 'transparent',
-              drawBorder: false,
+              drawBorder: false
             }
           },
           yComparison: {
             min: 0,
             suggestedMax: calculateMaximumY(dataSet),
             display: false,
-            grid: { display: false },
+            grid: { display: false }
           },
           x: {
             grid: { display: false },
             ticks: {
-              callback: function(val, _index, _ticks) {
-                if (this.getLabelForValue(val) == "__blank__") return ""
+              callback: function (val, _index, _ticks) {
+                if (this.getLabelForValue(val) == '__blank__') return ''
 
                 const hasMultipleYears =
                   graphData.labels
                     .filter((date) => typeof date === 'string')
-                    .map(date => date.split('-')[0])
-                    .filter((value, index, list) => list.indexOf(value) === index)
-                    .length > 1
+                    .map((date) => date.split('-')[0])
+                    .filter(
+                      (value, index, list) => list.indexOf(value) === index
+                    ).length > 1
 
                 if (graphData.interval === 'hour' && query.period !== 'day') {
                   const date = dateFormatter({
-                    interval: "day",
+                    interval: 'day',
                     longForm: false,
                     period: query.period,
-                    shouldShowYear: hasMultipleYears,
+                    shouldShowYear: hasMultipleYears
                   })(this.getLabelForValue(val))
 
                   const hour = dateFormatter({
                     interval: graphData.interval,
                     longForm: false,
                     period: query.period,
-                    shouldShowYear: hasMultipleYears,
+                    shouldShowYear: hasMultipleYears
                   })(this.getLabelForValue(val))
 
                   // Returns a combination of date and hour. This is because
@@ -125,14 +132,22 @@ class LineGraph extends React.Component {
                   return `${date}, ${hour}`
                 }
 
-                if (graphData.interval === 'minute' && query.period !== 'realtime') {
+                if (
+                  graphData.interval === 'minute' &&
+                  query.period !== 'realtime'
+                ) {
                   return dateFormatter({
-                    interval: "hour", longForm: false, period: query.period,
+                    interval: 'hour',
+                    longForm: false,
+                    period: query.period
                   })(this.getLabelForValue(val))
                 }
 
                 return dateFormatter({
-                  interval: graphData.interval, longForm: false, period: query.period, shouldShowYear: hasMultipleYears,
+                  interval: graphData.interval,
+                  longForm: false,
+                  period: query.period,
+                  shouldShowYear: hasMultipleYears
                 })(this.getLabelForValue(val))
               },
               color: this.props.darkTheme ? 'rgb(243, 244, 246)' : undefined
@@ -141,73 +156,73 @@ class LineGraph extends React.Component {
         },
         interaction: {
           mode: 'index',
-          intersect: false,
+          intersect: false
         }
       }
-    });
+    })
   }
 
   repositionTooltip(e) {
-    const tooltipEl = document.getElementById('chartjs-tooltip');
+    const tooltipEl = document.getElementById('chartjs-tooltip')
     if (tooltipEl && window.innerWidth >= 768) {
       if (e.clientX > 0.66 * window.innerWidth) {
-        tooltipEl.style.right = (window.innerWidth - e.clientX) + window.pageXOffset + 'px'
-        tooltipEl.style.left = null;
+        tooltipEl.style.right =
+          window.innerWidth - e.clientX + window.pageXOffset + 'px'
+        tooltipEl.style.left = null
       } else {
-        tooltipEl.style.right = null;
+        tooltipEl.style.right = null
         tooltipEl.style.left = e.clientX + window.pageXOffset + 'px'
       }
       tooltipEl.style.top = e.clientY + window.pageYOffset + 'px'
-      tooltipEl.style.opacity = 1;
+      tooltipEl.style.opacity = 1
     }
   }
 
   componentDidMount() {
     if (this.props.graphData) {
-      this.chart = this.regenerateChart();
+      this.chart = this.regenerateChart()
     }
-    window.addEventListener('mousemove', this.repositionTooltip);
+    window.addEventListener('mousemove', this.repositionTooltip)
   }
 
   componentDidUpdate(prevProps) {
-    const { graphData, darkTheme } = this.props;
-    const tooltip = document.getElementById('chartjs-tooltip');
+    const { graphData, darkTheme } = this.props
+    const tooltip = document.getElementById('chartjs-tooltip')
 
     if (
       graphData !== prevProps.graphData ||
       darkTheme !== prevProps.darkTheme
     ) {
-
       if (graphData) {
         if (this.chart) {
-          this.chart.destroy();
+          this.chart.destroy()
         }
-        this.chart = this.regenerateChart();
-        this.chart.update();
+        this.chart = this.regenerateChart()
+        this.chart.update()
       }
 
       if (tooltip) {
-        tooltip.style.display = 'none';
+        tooltip.style.display = 'none'
       }
     }
 
     if (!graphData) {
       if (this.chart) {
-        this.chart.destroy();
+        this.chart.destroy()
       }
 
       if (tooltip) {
-        tooltip.style.display = 'none';
+        tooltip.style.display = 'none'
       }
     }
   }
 
   componentWillUnmount() {
     // Ensure that the tooltip doesn't hang around when we are loading more data
-    const tooltip = document.getElementById('chartjs-tooltip');
+    const tooltip = document.getElementById('chartjs-tooltip')
     if (tooltip) {
-      tooltip.style.opacity = 0;
-      tooltip.style.display = 'none';
+      tooltip.style.opacity = 0
+      tooltip.style.display = 'none'
     }
     window.removeEventListener('mousemove', this.repositionTooltip)
   }
@@ -222,8 +237,12 @@ class LineGraph extends React.Component {
   }
 
   maybeHopToHoveredPeriod(e) {
-    const element = this.chart.getElementsAtEventForMode(e, 'index', { intersect: false })[0]
-    const date = this.props.graphData.labels[element.index] || this.props.graphData.comparison_labels[element.index]
+    const element = this.chart.getElementsAtEventForMode(e, 'index', {
+      intersect: false
+    })[0]
+    const date =
+      this.props.graphData.labels[element.index] ||
+      this.props.graphData.comparison_labels[element.index]
 
     if (this.props.graphData.interval === 'month') {
       this.props.navigate({
@@ -238,7 +257,9 @@ class LineGraph extends React.Component {
 
   render() {
     const { graphData } = this.props
-    const canvasClass = classNames('mt-4 select-none', { 'cursor-pointer': !['minute', 'hour'].includes(graphData?.interval) })
+    const canvasClass = classNames('mt-4 select-none', {
+      'cursor-pointer': !['minute', 'hour'].includes(graphData?.interval)
+    })
 
     return (
       <FadeIn show={graphData}>
diff --git a/assets/js/dashboard/stats/graph/sampling-notice.js b/assets/js/dashboard/stats/graph/sampling-notice.js
index 03181e321d..93728a932e 100644
--- a/assets/js/dashboard/stats/graph/sampling-notice.js
+++ b/assets/js/dashboard/stats/graph/sampling-notice.js
@@ -1,17 +1,31 @@
-import React from "react"
+import React from 'react'
 
-export default function SamplingNotice({topStatData}) {
+export default function SamplingNotice({ topStatData }) {
   const samplePercent = topStatData?.samplePercent
-  
+
   if (samplePercent && samplePercent < 100) {
     return (
-      <div tooltip={`Stats based on a ${samplePercent}% sample of all visitors`} className="cursor-pointer w-4 h-4 mx-2">
-        <svg className="absolute w-4 h-4 dark:text-gray-300 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <div
+        tooltip={`Stats based on a ${samplePercent}% sample of all visitors`}
+        className="cursor-pointer w-4 h-4 mx-2"
+      >
+        <svg
+          className="absolute w-4 h-4 dark:text-gray-300 text-gray-700"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
         </svg>
       </div>
     )
   } else {
     return null
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/dashboard/stats/graph/stats-export.js b/assets/js/dashboard/stats/graph/stats-export.js
index 2094bf512d..ffff70d99b 100644
--- a/assets/js/dashboard/stats/graph/stats-export.js
+++ b/assets/js/dashboard/stats/graph/stats-export.js
@@ -1,17 +1,17 @@
-import React, { useState } from "react";
-import * as api from '../../api';
-import { getCurrentInterval } from "./interval-picker";
-import { useSiteContext } from "../../site-context";
-import { useQueryContext } from "../../query-context";
+import React, { useState } from 'react'
+import * as api from '../../api'
+import { getCurrentInterval } from './interval-picker'
+import { useSiteContext } from '../../site-context'
+import { useQueryContext } from '../../query-context'
 
 export default function StatsExport() {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   const [exporting, setExporting] = useState(false)
 
   function startExport() {
     setExporting(true)
-    document.cookie = "exporting="
+    document.cookie = 'exporting='
     pollExportReady()
   }
 
@@ -25,21 +25,48 @@ export default function StatsExport() {
 
   function renderLoading() {
     return (
-      <svg className="animate-spin h-4 w-4 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      <svg
+        className="animate-spin h-4 w-4 text-indigo-500"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
       </svg>
     )
   }
 
   function renderExportLink() {
     const interval = getCurrentInterval(site, query)
-    const queryParams = api.queryToSearchParams(query, [{ interval, comparison: undefined }])
+    const queryParams = api.queryToSearchParams(query, [
+      { interval, comparison: undefined }
+    ])
     const endpoint = `/${encodeURIComponent(site.domain)}/export?${queryParams}`
 
     return (
       <a href={endpoint} download onClick={startExport}>
-        <svg className="absolute text-gray-700 feather dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg
+          className="absolute text-gray-700 feather dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
           <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
           <polyline points="7 10 12 15 17 10"></polyline>
           <line x1="12" y1="15" x2="12" y2="3"></line>
diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js
index bc8c0b09d5..396a26140d 100644
--- a/assets/js/dashboard/stats/graph/top-stats.js
+++ b/assets/js/dashboard/stats/graph/top-stats.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { Tooltip } from '../../util/tooltip'
 import { SecondsSinceLastLoad } from '../../util/seconds-since-last-load'
diff --git a/assets/js/dashboard/stats/graph/visitor-graph.js b/assets/js/dashboard/stats/graph/visitor-graph.js
index 7930d41df0..87b81f2c43 100644
--- a/assets/js/dashboard/stats/graph/visitor-graph.js
+++ b/assets/js/dashboard/stats/graph/visitor-graph.js
@@ -1,18 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import * as api from '../../api';
-import * as storage from '../../util/storage';
-import TopStats from './top-stats';
-import { IntervalPicker, getCurrentInterval } from './interval-picker';
-import StatsExport from './stats-export';
-import WithImportedSwitch from './with-imported-switch';
-import SamplingNotice from './sampling-notice';
-import FadeIn from '../../fade-in';
-import * as url from '../../util/url';
-import { isComparisonEnabled } from '../../query-time-periods';
-import LineGraphWithRouter from './line-graph';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import * as api from '../../api'
+import * as storage from '../../util/storage'
+import TopStats from './top-stats'
+import { IntervalPicker, getCurrentInterval } from './interval-picker'
+import StatsExport from './stats-export'
+import WithImportedSwitch from './with-imported-switch'
+import SamplingNotice from './sampling-notice'
+import FadeIn from '../../fade-in'
+import * as url from '../../util/url'
+import { isComparisonEnabled } from '../../query-time-periods'
+import LineGraphWithRouter from './line-graph'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 
 function fetchTopStats(site, query) {
@@ -31,11 +31,12 @@ function fetchMainGraph(site, query, metric, interval) {
 }
 
 export default function VisitorGraph({ updateImportedDataInView }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const isRealtime = query.period === 'realtime'
-  const isDarkTheme = document.querySelector('html').classList.contains('dark') || false
+  const isDarkTheme =
+    document.querySelector('html').classList.contains('dark') || false
 
   const topStatsBoundary = useRef(null)
 
@@ -50,18 +51,23 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   // long as new graph data is fetched.
   const [graphRefreshing, setGraphRefreshing] = useState(false)
 
+  const onIntervalUpdate = useCallback(
+    (newInterval) => {
+      setGraphData(null)
+      setGraphRefreshing(true)
+      fetchGraphData(getStoredMetric(), newInterval)
+    },
+    [query]
+  )
 
-  const onIntervalUpdate = useCallback((newInterval) => {
-    setGraphData(null)
-    setGraphRefreshing(true)
-    fetchGraphData(getStoredMetric(), newInterval)
-  }, [query])
-
-  const onMetricUpdate = useCallback((newMetric) => {
-    setGraphData(null)
-    setGraphRefreshing(true)
-    fetchGraphData(newMetric, getCurrentInterval(site, query))
-  }, [query])
+  const onMetricUpdate = useCallback(
+    (newMetric) => {
+      setGraphData(null)
+      setGraphRefreshing(true)
+      fetchGraphData(newMetric, getCurrentInterval(site, query))
+    },
+    [query]
+  )
 
   useEffect(() => {
     setTopStatData(null)
@@ -80,12 +86,14 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   }, [query])
 
   useEffect(() => {
-    if (topStatData) { storeTopStatsContainerHeight() }
+    if (topStatData) {
+      storeTopStatsContainerHeight()
+    }
   }, [topStatData])
 
   async function fetchTopStatsAndGraphData() {
     const response = await fetchTopStats(site, query)
-    
+
     let metric = getStoredMetric()
     const availableMetrics = response.graphable_metrics
 
@@ -95,11 +103,11 @@ export default function VisitorGraph({ updateImportedDataInView }) {
     }
 
     const interval = getCurrentInterval(site, query)
-    
+
     if (response.updateImportedDataInView) {
       updateImportedDataInView(response.includes_imported)
     }
-    
+
     setTopStatData(response)
     setTopStatsLoading(false)
 
@@ -107,12 +115,11 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   }
 
   function fetchGraphData(metric, interval) {
-    fetchMainGraph(site, query, metric, interval)
-      .then((res) => {
-        setGraphData(res)
-        setGraphLoading(false)
-        setGraphRefreshing(false)
-      })
+    fetchMainGraph(site, query, metric, interval).then((res) => {
+      setGraphData(res)
+      setGraphLoading(false)
+      setGraphRefreshing(false)
+    })
   }
 
   function getStoredMetric() {
@@ -120,7 +127,10 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   }
 
   function storeTopStatsContainerHeight() {
-    storage.setItem(`topStatsHeight__${site.domain}`, document.getElementById('top-stats-container').clientHeight)
+    storage.setItem(
+      `topStatsHeight__${site.domain}`,
+      document.getElementById('top-stats-container').clientHeight
+    )
   }
 
   // This function is used for maintaining the main-graph/top-stats container height in the
@@ -136,16 +146,25 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   }
 
   function importedSwitchVisible() {
-    return !!topStatData?.with_imported_switch && topStatData?.with_imported_switch.visible
+    return (
+      !!topStatData?.with_imported_switch &&
+      topStatData?.with_imported_switch.visible
+    )
   }
 
   function renderImportedIntervalUnsupportedWarning() {
-    const unsupportedInterval = ['hour', 'minute'].includes(getCurrentInterval(site, query))
-    const showingImported = importedSwitchVisible() && query.with_imported === true
+    const unsupportedInterval = ['hour', 'minute'].includes(
+      getCurrentInterval(site, query)
+    )
+    const showingImported =
+      importedSwitchVisible() && query.with_imported === true
 
     return (
-      <FadeIn show={showingImported && unsupportedInterval} className="h-6 mr-1">
-        <span tooltip={"Interval is too short to graph imported data"}>
+      <FadeIn
+        show={showingImported && unsupportedInterval}
+        className="h-6 mr-1"
+      >
+        <span tooltip={'Interval is too short to graph imported data'}>
           <ExclamationCircleIcon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
         </span>
       </FadeIn>
@@ -153,10 +172,19 @@ export default function VisitorGraph({ updateImportedDataInView }) {
   }
 
   return (
-    <div className={"relative w-full mt-2 bg-white rounded shadow-xl dark:bg-gray-825"}>
+    <div
+      className={
+        'relative w-full mt-2 bg-white rounded shadow-xl dark:bg-gray-825'
+      }
+    >
       {(topStatsLoading || graphLoading) && renderLoader()}
       <FadeIn show={!(topStatsLoading || graphLoading)}>
-        <div id="top-stats-container" className="flex flex-wrap" ref={topStatsBoundary} style={{ height: getTopStatsHeight() }}>
+        <div
+          id="top-stats-container"
+          className="flex flex-wrap"
+          ref={topStatsBoundary}
+          style={{ height: getTopStatsHeight() }}
+        >
           <TopStats
             graphableMetrics={topStatData?.graphable_metrics || []}
             data={topStatData}
@@ -170,16 +198,19 @@ export default function VisitorGraph({ updateImportedDataInView }) {
             {renderImportedIntervalUnsupportedWarning()}
             {!isRealtime && <StatsExport />}
             <SamplingNotice samplePercent={topStatData} />
-            {importedSwitchVisible() &&
+            {importedSwitchVisible() && (
               <WithImportedSwitch
                 tooltipMessage={topStatData.with_imported_switch.tooltip_msg}
                 disabled={!topStatData.with_imported_switch.togglable}
               />
-            }
+            )}
             <IntervalPicker onIntervalUpdate={onIntervalUpdate} />
           </div>
           <LineGraphWithRouter
-            graphData={{...graphData, interval: getCurrentInterval(site, query)}}
+            graphData={{
+              ...graphData,
+              interval: getCurrentInterval(site, query)
+            }}
             darkTheme={isDarkTheme}
           />
         </div>
diff --git a/assets/js/dashboard/stats/graph/with-imported-switch.js b/assets/js/dashboard/stats/graph/with-imported-switch.js
index 5a56a03284..f6d64dcb00 100644
--- a/assets/js/dashboard/stats/graph/with-imported-switch.js
+++ b/assets/js/dashboard/stats/graph/with-imported-switch.js
@@ -1,23 +1,29 @@
-import React from "react"
+import React from 'react'
 import { BarsArrowUpIcon } from '@heroicons/react/20/solid'
-import classNames from "classnames"
-import { useQueryContext } from "../../query-context"
-import { AppNavigationLink } from "../../navigation/use-app-navigate"
+import classNames from 'classnames'
+import { useQueryContext } from '../../query-context'
+import { AppNavigationLink } from '../../navigation/use-app-navigate'
 
 export default function WithImportedSwitch({ tooltipMessage, disabled }) {
-  const { query } = useQueryContext();
-  const importsSwitchedOn = query.with_imported;
-    
-  const iconClass = classNames("mt-0.5", {
-    "dark:text-gray-300 text-gray-700": importsSwitchedOn,
-    "dark:text-gray-500 text-gray-400": !importsSwitchedOn,
+  const { query } = useQueryContext()
+  const importsSwitchedOn = query.with_imported
+
+  const iconClass = classNames('mt-0.5', {
+    'dark:text-gray-300 text-gray-700': importsSwitchedOn,
+    'dark:text-gray-500 text-gray-400': !importsSwitchedOn
   })
 
   return (
     <div tooltip={tooltipMessage} className="w-4 h-4 mx-2">
-      <AppNavigationLink search={disabled ? (search) => search : (search) => ({...search, with_imported: !importsSwitchedOn}) }>
+      <AppNavigationLink
+        search={
+          disabled
+            ? (search) => search
+            : (search) => ({ ...search, with_imported: !importsSwitchedOn })
+        }
+      >
         <BarsArrowUpIcon className={iconClass} />
       </AppNavigationLink>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/assets/js/dashboard/stats/imported-query-unsupported-warning.js b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
index 70d7bc81eb..a6aab6128c 100644
--- a/assets/js/dashboard/stats/imported-query-unsupported-warning.js
+++ b/assets/js/dashboard/stats/imported-query-unsupported-warning.js
@@ -1,12 +1,22 @@
-import React from "react";
+import React from 'react'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import FadeIn from "../fade-in";
-import { useQueryContext } from "../query-context";
+import FadeIn from '../fade-in'
+import { useQueryContext } from '../query-context'
 
-export default function ImportedQueryUnsupportedWarning({ loading, skipImportedReason, altCondition, message }) {
-  const { query } = useQueryContext();
-  const tooltipMessage = message || "Imported data is excluded due to applied filters"
-  const show = query && query.with_imported && skipImportedReason === "unsupported_query" && query.period !== 'realtime'
+export default function ImportedQueryUnsupportedWarning({
+  loading,
+  skipImportedReason,
+  altCondition,
+  message
+}) {
+  const { query } = useQueryContext()
+  const tooltipMessage =
+    message || 'Imported data is excluded due to applied filters'
+  const show =
+    query &&
+    query.with_imported &&
+    skipImportedReason === 'unsupported_query' &&
+    query.period !== 'realtime'
 
   if (show || altCondition) {
     return (
@@ -19,4 +29,4 @@ export default function ImportedQueryUnsupportedWarning({ loading, skipImportedR
   } else {
     return null
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/dashboard/stats/locations/geolocation-notice.tsx b/assets/js/dashboard/stats/locations/geolocation-notice.tsx
index 4b44bf2f05..a0e9ac53c8 100644
--- a/assets/js/dashboard/stats/locations/geolocation-notice.tsx
+++ b/assets/js/dashboard/stats/locations/geolocation-notice.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React from 'react'
 
 export const GeolocationNotice = () => {
diff --git a/assets/js/dashboard/stats/locations/index.js b/assets/js/dashboard/stats/locations/index.js
index a75006f50c..ec95cf2662 100644
--- a/assets/js/dashboard/stats/locations/index.js
+++ b/assets/js/dashboard/stats/locations/index.js
@@ -1,260 +1,299 @@
-import React from 'react';
+import React from 'react'
 
-import * as storage from '../../util/storage';
-import CountriesMap from './map';
+import * as storage from '../../util/storage'
+import CountriesMap from './map'
 
-import * as api from '../../api';
-import { apiPath } from '../../util/url';
-import ListReport from '../reports/list';
-import * as metrics from '../reports/metrics';
-import { hasConversionGoalFilter, getFiltersByKeyPrefix } from '../../util/filters';
-import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
-import { citiesRoute, countriesRoute, regionsRoute } from '../../router';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
+import * as api from '../../api'
+import { apiPath } from '../../util/url'
+import ListReport from '../reports/list'
+import * as metrics from '../reports/metrics'
+import {
+  hasConversionGoalFilter,
+  getFiltersByKeyPrefix
+} from '../../util/filters'
+import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
+import { citiesRoute, countriesRoute, regionsRoute } from '../../router'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
 
 function Countries({ query, site, onClick, afterFetchData }) {
-	function fetchData() {
-		return api.get(apiPath(site, '/countries'), query, { limit: 9 })
-	}
-
-	function renderIcon(country) {
-		return <span className="mr-2">{country.flag}</span>
-	}
-
-	function getFilterInfo(listItem) {
-		return {
-			prefix: "country",
-			filter: ["is", "country", [listItem['code']]],
-			labels: { [listItem['code']]: listItem['name'] }
-		}
-	}
-
-	function chooseMetrics() {
-    return [
-      metrics.createVisitors({ meta: {plot: true}}),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+  function fetchData() {
+    return api.get(apiPath(site, '/countries'), query, { limit: 9 })
   }
 
-	return (
-		<ListReport
-			fetchData={fetchData}
-			afterFetchData={afterFetchData}
-			getFilterInfo={getFilterInfo}
-			onClick={onClick}
-			keyLabel="Country"
-			metrics={chooseMetrics()}
-			detailsLinkProps={{ path: countriesRoute.path, search: (search) => search }}
-			renderIcon={renderIcon}
-			color="bg-orange-50"
-		/>
-	)
+  function renderIcon(country) {
+    return <span className="mr-2">{country.flag}</span>
+  }
+
+  function getFilterInfo(listItem) {
+    return {
+      prefix: 'country',
+      filter: ['is', 'country', [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
+  }
+
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ meta: { plot: true } }),
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
+  }
+
+  return (
+    <ListReport
+      fetchData={fetchData}
+      afterFetchData={afterFetchData}
+      getFilterInfo={getFilterInfo}
+      onClick={onClick}
+      keyLabel="Country"
+      metrics={chooseMetrics()}
+      detailsLinkProps={{
+        path: countriesRoute.path,
+        search: (search) => search
+      }}
+      renderIcon={renderIcon}
+      color="bg-orange-50"
+    />
+  )
 }
 
 function Regions({ query, site, onClick, afterFetchData }) {
-	function fetchData() {
-		return api.get(apiPath(site, '/regions'), query, { limit: 9 })
-	}
-
-	function renderIcon(region) {
-		return <span className="mr-2">{region.country_flag}</span>
-	}
-
-	function getFilterInfo(listItem) {
-		return {
-			prefix: "region",
-			filter: ["is", "region", [listItem['code']]],
-			labels: { [listItem['code']]: listItem['name'] }
-		}
-	}
-
-	function chooseMetrics() {
-    return [
-      metrics.createVisitors({ meta: {plot: true}}),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+  function fetchData() {
+    return api.get(apiPath(site, '/regions'), query, { limit: 9 })
   }
 
-	return (
-		<ListReport
-			fetchData={fetchData}
-			afterFetchData={afterFetchData}
-			getFilterInfo={getFilterInfo}
-			onClick={onClick}
-			keyLabel="Region"
-			metrics={chooseMetrics()}
-			detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
-			renderIcon={renderIcon}
-			color="bg-orange-50"
-		/>
-	)
+  function renderIcon(region) {
+    return <span className="mr-2">{region.country_flag}</span>
+  }
+
+  function getFilterInfo(listItem) {
+    return {
+      prefix: 'region',
+      filter: ['is', 'region', [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
+  }
+
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ meta: { plot: true } }),
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
+  }
+
+  return (
+    <ListReport
+      fetchData={fetchData}
+      afterFetchData={afterFetchData}
+      getFilterInfo={getFilterInfo}
+      onClick={onClick}
+      keyLabel="Region"
+      metrics={chooseMetrics()}
+      detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
+      renderIcon={renderIcon}
+      color="bg-orange-50"
+    />
+  )
 }
 
 function Cities({ query, site, afterFetchData }) {
-	function fetchData() {
-		return api.get(apiPath(site, '/cities'), query, { limit: 9 })
-	}
-
-	function renderIcon(city) {
-		return <span className="mr-2">{city.country_flag}</span>
-	}
-
-	function getFilterInfo(listItem) {
-		return {
-			prefix: "city",
-			filter: ["is", "city", [listItem['code']]],
-			labels: { [listItem['code']]: listItem['name'] }
-		}
-	}
-
-	function chooseMetrics() {
-    return [
-      metrics.createVisitors({ meta: {plot: true}}),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+  function fetchData() {
+    return api.get(apiPath(site, '/cities'), query, { limit: 9 })
   }
 
-	return (
-		<ListReport
-			fetchData={fetchData}
-			afterFetchData={afterFetchData}
-			getFilterInfo={getFilterInfo}
-			keyLabel="City"
-			metrics={chooseMetrics()}
-			detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
-			renderIcon={renderIcon}
-			color="bg-orange-50"
-		/>
-	)
+  function renderIcon(city) {
+    return <span className="mr-2">{city.country_flag}</span>
+  }
+
+  function getFilterInfo(listItem) {
+    return {
+      prefix: 'city',
+      filter: ['is', 'city', [listItem['code']]],
+      labels: { [listItem['code']]: listItem['name'] }
+    }
+  }
+
+  function chooseMetrics() {
+    return [
+      metrics.createVisitors({ meta: { plot: true } }),
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
+  }
+
+  return (
+    <ListReport
+      fetchData={fetchData}
+      afterFetchData={afterFetchData}
+      getFilterInfo={getFilterInfo}
+      keyLabel="City"
+      metrics={chooseMetrics()}
+      detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
+      renderIcon={renderIcon}
+      color="bg-orange-50"
+    />
+  )
 }
 
-
 const labelFor = {
-	'countries': 'Countries',
-	'regions': 'Regions',
-	'cities': 'Cities',
+  countries: 'Countries',
+  regions: 'Regions',
+  cities: 'Cities'
 }
 
 class Locations extends React.Component {
-	constructor(props) {
-		super(props)
-		this.onCountryFilter = this.onCountryFilter.bind(this)
-		this.onRegionFilter = this.onRegionFilter.bind(this)
-		this.afterFetchData = this.afterFetchData.bind(this)
-		this.tabKey = `geoTab__${props.site.domain}`
-		const storedTab = storage.getItem(this.tabKey)
-		this.state = {
-			mode: storedTab || 'map',
-			loading: true,
-			skipImportedReason: null
-		}
-	}
+  constructor(props) {
+    super(props)
+    this.onCountryFilter = this.onCountryFilter.bind(this)
+    this.onRegionFilter = this.onRegionFilter.bind(this)
+    this.afterFetchData = this.afterFetchData.bind(this)
+    this.tabKey = `geoTab__${props.site.domain}`
+    const storedTab = storage.getItem(this.tabKey)
+    this.state = {
+      mode: storedTab || 'map',
+      loading: true,
+      skipImportedReason: null
+    }
+  }
 
-	componentDidUpdate(prevProps, prevState) {
-		const isRemovingFilter = (filterName) => {
-			return getFiltersByKeyPrefix(prevProps.query, filterName).length > 0 &&
-				getFiltersByKeyPrefix(this.props.query, filterName).length == 0
-		}
+  componentDidUpdate(prevProps, prevState) {
+    const isRemovingFilter = (filterName) => {
+      return (
+        getFiltersByKeyPrefix(prevProps.query, filterName).length > 0 &&
+        getFiltersByKeyPrefix(this.props.query, filterName).length == 0
+      )
+    }
 
-		if (this.state.mode === 'cities' && isRemovingFilter('region')) {
-			this.setMode('regions')()
-		}
+    if (this.state.mode === 'cities' && isRemovingFilter('region')) {
+      this.setMode('regions')()
+    }
 
-		if (this.state.mode === 'regions' && isRemovingFilter('country')) {
-			this.setMode(this.countriesRestoreMode || 'countries')()
-		}
+    if (this.state.mode === 'regions' && isRemovingFilter('country')) {
+      this.setMode(this.countriesRestoreMode || 'countries')()
+    }
 
-		if (this.props.query !== prevProps.query || this.state.mode !== prevState.mode) {
-			this.setState({ loading: true })
-		}
-	}
+    if (
+      this.props.query !== prevProps.query ||
+      this.state.mode !== prevState.mode
+    ) {
+      this.setState({ loading: true })
+    }
+  }
 
-	setMode(mode) {
-		return () => {
-			storage.setItem(this.tabKey, mode)
-			this.setState({ mode })
-		}
-	}
+  setMode(mode) {
+    return () => {
+      storage.setItem(this.tabKey, mode)
+      this.setState({ mode })
+    }
+  }
 
-	onCountryFilter(mode) {
-		return () => {
-			this.countriesRestoreMode = mode
-			this.setMode('regions')()
-		}
-	}
+  onCountryFilter(mode) {
+    return () => {
+      this.countriesRestoreMode = mode
+      this.setMode('regions')()
+    }
+  }
 
-	onRegionFilter() {
-		this.setMode('cities')()
-	}
+  onRegionFilter() {
+    this.setMode('cities')()
+  }
 
-	afterFetchData(apiResponse) {
-		this.setState({ loading: false, skipImportedReason: apiResponse.skip_imported_reason })
-	}
+  afterFetchData(apiResponse) {
+    this.setState({
+      loading: false,
+      skipImportedReason: apiResponse.skip_imported_reason
+    })
+  }
 
-	renderContent() {
-		switch (this.state.mode) {
-			case "cities":
-				return <Cities site={this.props.site} query={this.props.query} afterFetchData={this.afterFetchData} />
-			case "regions":
-				return <Regions onClick={this.onRegionFilter} site={this.props.site} query={this.props.query} afterFetchData={this.afterFetchData} />
-			case "countries":
-				return <Countries onClick={this.onCountryFilter('countries')} site={this.props.site} query={this.props.query} afterFetchData={this.afterFetchData} />
-			case "map":
-			default:
-				return <CountriesMap onCountrySelect={this.onCountryFilter('map')} afterFetchData={this.afterFetchData} />
-		}
-	}
+  renderContent() {
+    switch (this.state.mode) {
+      case 'cities':
+        return (
+          <Cities
+            site={this.props.site}
+            query={this.props.query}
+            afterFetchData={this.afterFetchData}
+          />
+        )
+      case 'regions':
+        return (
+          <Regions
+            onClick={this.onRegionFilter}
+            site={this.props.site}
+            query={this.props.query}
+            afterFetchData={this.afterFetchData}
+          />
+        )
+      case 'countries':
+        return (
+          <Countries
+            onClick={this.onCountryFilter('countries')}
+            site={this.props.site}
+            query={this.props.query}
+            afterFetchData={this.afterFetchData}
+          />
+        )
+      case 'map':
+      default:
+        return (
+          <CountriesMap
+            onCountrySelect={this.onCountryFilter('map')}
+            afterFetchData={this.afterFetchData}
+          />
+        )
+    }
+  }
 
-	renderPill(name, mode) {
-		const isActive = this.state.mode === mode
+  renderPill(name, mode) {
+    const isActive = this.state.mode === mode
 
-		if (isActive) {
-			return (
-				<button
-					className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
-				>
-					{name}
-				</button>
-			)
-		}
+    if (isActive) {
+      return (
+        <button className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading">
+          {name}
+        </button>
+      )
+    }
 
-		return (
-			<button
-				className="hover:text-indigo-600 cursor-pointer"
-				onClick={this.setMode(mode)}
-			>
-				{name}
-			</button>
-		)
-	}
+    return (
+      <button
+        className="hover:text-indigo-600 cursor-pointer"
+        onClick={this.setMode(mode)}
+      >
+        {name}
+      </button>
+    )
+  }
 
-	render() {
-		return (
-			<div>
-				<div className="w-full flex justify-between">
-					<div className="flex gap-x-1">
-						<h3 className="font-bold dark:text-gray-100">
-							{labelFor[this.state.mode] || 'Locations'}
-						</h3>
-						<ImportedQueryUnsupportedWarning loading={this.state.loading} skipImportedReason={this.state.skipImportedReason} />
-					</div>
-					<div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
-						{this.renderPill('Map', 'map')}
-						{this.renderPill('Countries', 'countries')}
-						{this.renderPill('Regions', 'regions')}
-						{this.renderPill('Cities', 'cities')}
-					</div>
-				</div>
-				{this.renderContent()}
-			</div>
-		)
-	}
+  render() {
+    return (
+      <div>
+        <div className="w-full flex justify-between">
+          <div className="flex gap-x-1">
+            <h3 className="font-bold dark:text-gray-100">
+              {labelFor[this.state.mode] || 'Locations'}
+            </h3>
+            <ImportedQueryUnsupportedWarning
+              loading={this.state.loading}
+              skipImportedReason={this.state.skipImportedReason}
+            />
+          </div>
+          <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
+            {this.renderPill('Map', 'map')}
+            {this.renderPill('Countries', 'countries')}
+            {this.renderPill('Regions', 'regions')}
+            {this.renderPill('Cities', 'cities')}
+          </div>
+        </div>
+        {this.renderContent()}
+      </div>
+    )
+  }
 }
 
 function LocationsWithContext() {
-	const { query } = useQueryContext();
-	const site = useSiteContext();
-	return <Locations site={site} query={query} />
+  const { query } = useQueryContext()
+  const site = useSiteContext()
+  return <Locations site={site} query={query} />
 }
 export default LocationsWithContext
diff --git a/assets/js/dashboard/stats/locations/map-tooltip.tsx b/assets/js/dashboard/stats/locations/map-tooltip.tsx
index b60e62829f..7a36a9a8f8 100644
--- a/assets/js/dashboard/stats/locations/map-tooltip.tsx
+++ b/assets/js/dashboard/stats/locations/map-tooltip.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import classNames from 'classnames'
 import React from 'react'
 
diff --git a/assets/js/dashboard/stats/locations/map.tsx b/assets/js/dashboard/stats/locations/map.tsx
index de2b07c37a..8107dfb703 100644
--- a/assets/js/dashboard/stats/locations/map.tsx
+++ b/assets/js/dashboard/stats/locations/map.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as d3 from 'd3'
 import classNames from 'classnames'
diff --git a/assets/js/dashboard/stats/modals/breakdown-modal.tsx b/assets/js/dashboard/stats/modals/breakdown-modal.tsx
index 1a9bd08ccb..ad98e8034e 100644
--- a/assets/js/dashboard/stats/modals/breakdown-modal.tsx
+++ b/assets/js/dashboard/stats/modals/breakdown-modal.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useState, ReactNode, useMemo } from 'react'
 
 import { useQueryContext } from '../../query-context'
diff --git a/assets/js/dashboard/stats/modals/breakdown-table.tsx b/assets/js/dashboard/stats/modals/breakdown-table.tsx
index 31b6e0cbab..4a5281768d 100644
--- a/assets/js/dashboard/stats/modals/breakdown-table.tsx
+++ b/assets/js/dashboard/stats/modals/breakdown-table.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 
 import { SearchInput } from '../../components/search-input'
diff --git a/assets/js/dashboard/stats/modals/conversions.js b/assets/js/dashboard/stats/modals/conversions.js
index 104f553046..ff1365d7a4 100644
--- a/assets/js/dashboard/stats/modals/conversions.js
+++ b/assets/js/dashboard/stats/modals/conversions.js
@@ -1,43 +1,54 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState } from 'react'
 
 import Modal from './modal'
-import BreakdownModal from "./breakdown-modal";
-import * as metrics from "../reports/metrics";
-import * as url from '../../util/url';
-import { useSiteContext } from "../../site-context";
-import { addFilter } from "../../query";
+import BreakdownModal from './breakdown-modal'
+import * as metrics from '../reports/metrics'
+import * as url from '../../util/url'
+import { useSiteContext } from '../../site-context'
+import { addFilter } from '../../query'
 
 /*global BUILD_EXTRA*/
 function ConversionsModal() {
   const [showRevenue, setShowRevenue] = useState(false)
-  const site = useSiteContext();
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Goal Conversions',
     dimension: 'goal',
     endpoint: url.apiPath(site, '/conversions'),
-    dimensionLabel: "Goal"
+    dimensionLabel: 'Goal'
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Uniques" }),
-      metrics.createEvents({ renderLabel: (_query) => "Total" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Uniques' }),
+      metrics.createEvents({ renderLabel: (_query) => 'Total' }),
       metrics.createConversionRate(),
       showRevenue && metrics.createAverageRevenue(),
-      showRevenue && metrics.createTotalRevenue(),
-    ].filter(metric => !!metric)
+      showRevenue && metrics.createTotalRevenue()
+    ].filter((metric) => !!metric)
   }
 
   // After a successful API response, we want to scan the rows of the
@@ -49,9 +60,14 @@ function ConversionsModal() {
 
   // After fetching the next page, we never want to set `showRevenue` to
   // `false` as revenue metrics might exist in previously loaded data.
-  const afterFetchNextPage = useCallback((res) => {
-    if (!showRevenue && revenueInResponse(res)) { setShowRevenue(true) }
-  }, [showRevenue])
+  const afterFetchNextPage = useCallback(
+    (res) => {
+      if (!showRevenue && revenueInResponse(res)) {
+        setShowRevenue(true)
+      }
+    },
+    [showRevenue]
+  )
 
   function revenueInResponse(apiResponse) {
     return apiResponse.results.some((item) => item.total_revenue)
diff --git a/assets/js/dashboard/stats/modals/devices/browser-versions-modal.js b/assets/js/dashboard/stats/modals/devices/browser-versions-modal.js
index d0e11e299b..7fa8bfb48f 100644
--- a/assets/js/dashboard/stats/modals/devices/browser-versions-modal.js
+++ b/assets/js/dashboard/stats/modals/devices/browser-versions-modal.js
@@ -1,38 +1,52 @@
-import React, { useCallback } from "react";
-import Modal from './../modal';
+import React, { useCallback } from 'react'
+import Modal from './../modal'
 import { addFilter } from '../../../query'
-import BreakdownModal from "./../breakdown-modal";
-import * as url from '../../../util/url';
-import { useQueryContext } from "../../../query-context";
-import { useSiteContext } from "../../../site-context";
-import { browserIconFor } from "../../devices";
-import chooseMetrics from './choose-metrics';
-import { SortDirection } from "../../../hooks/use-order-by";
+import BreakdownModal from './../breakdown-modal'
+import * as url from '../../../util/url'
+import { useQueryContext } from '../../../query-context'
+import { useSiteContext } from '../../../site-context'
+import { browserIconFor } from '../../devices'
+import chooseMetrics from './choose-metrics'
+import { SortDirection } from '../../../hooks/use-order-by'
 
 function BrowserVersionsModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Browser Versions',
     dimension: 'browser_version',
     endpoint: url.apiPath(site, '/browser-versions'),
     dimensionLabel: 'Browser version',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
-  const renderIcon = useCallback((listItem) => browserIconFor(listItem.browser), [])
+  const renderIcon = useCallback(
+    (listItem) => browserIconFor(listItem.browser),
+    []
+  )
 
   return (
     <Modal>
diff --git a/assets/js/dashboard/stats/modals/devices/browsers-modal.js b/assets/js/dashboard/stats/modals/devices/browsers-modal.js
index 9b600514bd..45ed6d5065 100644
--- a/assets/js/dashboard/stats/modals/devices/browsers-modal.js
+++ b/assets/js/dashboard/stats/modals/devices/browsers-modal.js
@@ -1,38 +1,52 @@
-import React, { useCallback } from "react";
-import Modal from './../modal';
+import React, { useCallback } from 'react'
+import Modal from './../modal'
 import { addFilter } from '../../../query'
-import BreakdownModal from "./../breakdown-modal";
-import * as url from '../../../util/url';
-import { useQueryContext } from "../../../query-context";
-import { useSiteContext } from "../../../site-context";
-import { browserIconFor } from "../../devices";
-import chooseMetrics from './choose-metrics';
-import { SortDirection } from "../../../hooks/use-order-by";
+import BreakdownModal from './../breakdown-modal'
+import * as url from '../../../util/url'
+import { useQueryContext } from '../../../query-context'
+import { useSiteContext } from '../../../site-context'
+import { browserIconFor } from '../../devices'
+import chooseMetrics from './choose-metrics'
+import { SortDirection } from '../../../hooks/use-order-by'
 
 function BrowsersModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Browsers',
     dimension: 'browser',
     endpoint: url.apiPath(site, '/browsers'),
     dimensionLabel: 'Browser',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
-  const renderIcon = useCallback((listItem) => browserIconFor(listItem.name), [])
+  const renderIcon = useCallback(
+    (listItem) => browserIconFor(listItem.name),
+    []
+  )
 
   return (
     <Modal>
diff --git a/assets/js/dashboard/stats/modals/devices/choose-metrics.js b/assets/js/dashboard/stats/modals/devices/choose-metrics.js
index b2ca3b8a04..018866a6a8 100644
--- a/assets/js/dashboard/stats/modals/devices/choose-metrics.js
+++ b/assets/js/dashboard/stats/modals/devices/choose-metrics.js
@@ -1,24 +1,33 @@
-import { hasConversionGoalFilter, isRealTimeDashboard } from "../../../util/filters";
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../../util/filters'
 import * as metrics from '../../reports/metrics'
 
 export default function chooseMetrics(query) {
   if (hasConversionGoalFilter(query)) {
     return [
       metrics.createTotalVisitors(),
-      metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+      metrics.createVisitors({
+        renderLabel: (_query) => 'Conversions',
+        width: 'w-28'
+      }),
       metrics.createConversionRate()
     ]
   }
 
   if (isRealTimeDashboard(query)) {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36' }),
+      metrics.createVisitors({
+        renderLabel: (_query) => 'Current visitors',
+        width: 'w-36'
+      }),
       metrics.createPercentage()
     ]
   }
 
   return [
-    metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
+    metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
     metrics.createPercentage(),
     metrics.createBounceRate(),
     metrics.createVisitDuration()
diff --git a/assets/js/dashboard/stats/modals/devices/operating-system-versions-modal.js b/assets/js/dashboard/stats/modals/devices/operating-system-versions-modal.js
index 9c5622b48d..0749cc84de 100644
--- a/assets/js/dashboard/stats/modals/devices/operating-system-versions-modal.js
+++ b/assets/js/dashboard/stats/modals/devices/operating-system-versions-modal.js
@@ -1,36 +1,47 @@
-import React, { useCallback } from "react";
-import Modal from './../modal';
+import React, { useCallback } from 'react'
+import Modal from './../modal'
 import { addFilter } from '../../../query'
-import BreakdownModal from "./../breakdown-modal";
-import * as url from '../../../util/url';
-import { useQueryContext } from "../../../query-context";
-import { useSiteContext } from "../../../site-context";
-import { osIconFor } from "../../devices";
-import chooseMetrics from './choose-metrics';
-import { SortDirection } from "../../../hooks/use-order-by";
+import BreakdownModal from './../breakdown-modal'
+import * as url from '../../../util/url'
+import { useQueryContext } from '../../../query-context'
+import { useSiteContext } from '../../../site-context'
+import { osIconFor } from '../../devices'
+import chooseMetrics from './choose-metrics'
+import { SortDirection } from '../../../hooks/use-order-by'
 
 function OperatingSystemVersionsModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Operating System Versions',
     dimension: 'os_version',
     endpoint: url.apiPath(site, '/operating-system-versions'),
     dimensionLabel: 'Operating system version',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   const renderIcon = useCallback((listItem) => osIconFor(listItem.os), [])
 
diff --git a/assets/js/dashboard/stats/modals/devices/operating-systems-modal.js b/assets/js/dashboard/stats/modals/devices/operating-systems-modal.js
index 9df8a6c7c7..d8f5e72bd8 100644
--- a/assets/js/dashboard/stats/modals/devices/operating-systems-modal.js
+++ b/assets/js/dashboard/stats/modals/devices/operating-systems-modal.js
@@ -1,36 +1,47 @@
-import React, { useCallback } from "react";
-import Modal from './../modal';
+import React, { useCallback } from 'react'
+import Modal from './../modal'
 import { addFilter } from '../../../query'
-import BreakdownModal from "./../breakdown-modal";
-import * as url from '../../../util/url';
-import { useQueryContext } from "../../../query-context";
-import { useSiteContext } from "../../../site-context";
-import { osIconFor } from "../../devices";
-import chooseMetrics from './choose-metrics';
-import { SortDirection } from "../../../hooks/use-order-by";
+import BreakdownModal from './../breakdown-modal'
+import * as url from '../../../util/url'
+import { useQueryContext } from '../../../query-context'
+import { useSiteContext } from '../../../site-context'
+import { osIconFor } from '../../devices'
+import chooseMetrics from './choose-metrics'
+import { SortDirection } from '../../../hooks/use-order-by'
 
 function OperatingSystemsModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Operating Systems',
     dimension: 'os',
     endpoint: url.apiPath(site, '/operating-systems'),
     dimensionLabel: 'Operating system',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   const renderIcon = useCallback((listItem) => osIconFor(listItem.name), [])
 
diff --git a/assets/js/dashboard/stats/modals/devices/screen-sizes.js b/assets/js/dashboard/stats/modals/devices/screen-sizes.js
index 30e6cd447c..0663c40f53 100644
--- a/assets/js/dashboard/stats/modals/devices/screen-sizes.js
+++ b/assets/js/dashboard/stats/modals/devices/screen-sizes.js
@@ -1,33 +1,39 @@
-import React, { useCallback } from "react";
-import Modal from './../modal';
-import BreakdownModal from "./../breakdown-modal";
-import * as url from '../../../util/url';
-import { useQueryContext } from "../../../query-context";
-import { useSiteContext } from "../../../site-context";
-import { screenSizeIconFor } from "../../devices";
-import chooseMetrics from './choose-metrics';
-import { SortDirection } from "../../../hooks/use-order-by";
+import React, { useCallback } from 'react'
+import Modal from './../modal'
+import BreakdownModal from './../breakdown-modal'
+import * as url from '../../../util/url'
+import { useQueryContext } from '../../../query-context'
+import { useSiteContext } from '../../../site-context'
+import { screenSizeIconFor } from '../../devices'
+import chooseMetrics from './choose-metrics'
+import { SortDirection } from '../../../hooks/use-order-by'
 
 function ScreenSizesModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Screen Sizes',
     dimension: 'screen',
     endpoint: url.apiPath(site, '/screen-sizes'),
     dimensionLabel: 'Screen size',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const renderIcon = useCallback((listItem) => screenSizeIconFor(listItem.name), [])
+  const renderIcon = useCallback(
+    (listItem) => screenSizeIconFor(listItem.name),
+    []
+  )
 
   return (
     <Modal>
diff --git a/assets/js/dashboard/stats/modals/entry-pages.js b/assets/js/dashboard/stats/modals/entry-pages.js
index 77c5364dd1..ad61f3d61d 100644
--- a/assets/js/dashboard/stats/modals/entry-pages.js
+++ b/assets/js/dashboard/stats/modals/entry-pages.js
@@ -1,55 +1,78 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react'
 import Modal from './modal'
-import { hasConversionGoalFilter, isRealTimeDashboard } from "../../util/filters";
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
 import { addFilter } from '../../query'
-import BreakdownModal from "./breakdown-modal";
+import BreakdownModal from './breakdown-modal'
 import * as metrics from '../reports/metrics'
-import * as url from '../../util/url';
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from "../../hooks/use-order-by";
+import * as url from '../../util/url'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 function EntryPagesModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Entry Pages',
     dimension: 'entry_page',
     endpoint: url.apiPath(site, '/entry-pages'),
     dimensionLabel: 'Entry page',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (isRealTimeDashboard(query)) {
       return [
-        metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36' })
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
-      metrics.createVisits({ renderLabel: (_query) => "Total Entrances", width: 'w-36' }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
+      metrics.createVisits({
+        renderLabel: (_query) => 'Total Entrances',
+        width: 'w-36'
+      }),
       metrics.createVisitDuration()
     ]
   }
diff --git a/assets/js/dashboard/stats/modals/exit-pages.js b/assets/js/dashboard/stats/modals/exit-pages.js
index 57e6568d85..039efadbd7 100644
--- a/assets/js/dashboard/stats/modals/exit-pages.js
+++ b/assets/js/dashboard/stats/modals/exit-pages.js
@@ -1,55 +1,78 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react'
 import Modal from './modal'
-import { hasConversionGoalFilter } from "../../util/filters";
+import { hasConversionGoalFilter } from '../../util/filters'
 import { addFilter } from '../../query'
-import BreakdownModal from "./breakdown-modal";
+import BreakdownModal from './breakdown-modal'
 import * as metrics from '../reports/metrics'
-import * as url from '../../util/url';
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from "../../hooks/use-order-by";
+import * as url from '../../util/url'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 function ExitPagesModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Exit Pages',
     dimension: 'exit_page',
     endpoint: url.apiPath(site, '/exit-pages'),
     dimensionLabel: 'Page url',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (query.period === 'realtime') {
       return [
-        metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36'})
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors", sortable: true }),
-      metrics.createVisits({ renderLabel: (_query) => "Total Exits", sortable: true }),
+      metrics.createVisitors({
+        renderLabel: (_query) => 'Visitors',
+        sortable: true
+      }),
+      metrics.createVisits({
+        renderLabel: (_query) => 'Total Exits',
+        sortable: true
+      }),
       metrics.createExitRate()
     ]
   }
diff --git a/assets/js/dashboard/stats/modals/filter-modal-group.js b/assets/js/dashboard/stats/modals/filter-modal-group.js
index 63c5f832a0..2458e35757 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-group.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-group.js
@@ -1,7 +1,11 @@
-import React, { useMemo } from "react"
-import FilterModalRow from "./filter-modal-row"
-import { formattedFilters, getFilterGroup, getPropertyKeyFromFilterKey } from '../../util/filters'
-import FilterModalPropsRow from "./filter-modal-props-row"
+import React, { useMemo } from 'react'
+import FilterModalRow from './filter-modal-row'
+import {
+  formattedFilters,
+  getFilterGroup,
+  getPropertyKeyFromFilterKey
+} from '../../util/filters'
+import FilterModalPropsRow from './filter-modal-props-row'
 
 export default function FilterModalGroup({
   filterGroup,
@@ -12,11 +16,19 @@ export default function FilterModalGroup({
   onDeleteRow
 }) {
   const rows = useMemo(
-    () => Object.entries(filterState).filter(([_, filter]) => getFilterGroup(filter) == filterGroup).map(([id, filter]) => ({ id, filter })),
+    () =>
+      Object.entries(filterState)
+        .filter(([_, filter]) => getFilterGroup(filter) == filterGroup)
+        .map(([id, filter]) => ({ id, filter })),
     [filterGroup, filterState]
   )
   const disabledOptions = useMemo(
-    () => (filterGroup == 'props') ? rows.map(({ filter }) => ({ value: getPropertyKeyFromFilterKey(filter[1]) })) : null,
+    () =>
+      filterGroup == 'props'
+        ? rows.map(({ filter }) => ({
+            value: getPropertyKeyFromFilterKey(filter[1])
+          }))
+        : null,
     [filterGroup, rows]
   )
 
@@ -26,7 +38,11 @@ export default function FilterModalGroup({
   return (
     <>
       <div className="mt-6">
-        {showTitle && (<div className="text-sm font-medium text-gray-700 dark:text-gray-300">{formattedFilters[filterGroup]}</div>)}
+        {showTitle && (
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {formattedFilters[filterGroup]}
+          </div>
+        )}
         {rows.map(({ id, filter }) =>
           filterGroup === 'props' ? (
             <FilterModalPropsRow
@@ -44,7 +60,9 @@ export default function FilterModalGroup({
               labels={labels}
               canDelete={showAddRow}
               showDelete={rows.length > 1}
-              onUpdate={(newFilter, labelUpdate) => onUpdateRowValue(id, newFilter, labelUpdate)}
+              onUpdate={(newFilter, labelUpdate) =>
+                onUpdateRowValue(id, newFilter, labelUpdate)
+              }
               onDelete={() => onDeleteRow(id)}
             />
           )
@@ -53,7 +71,10 @@ export default function FilterModalGroup({
       {showAddRow && (
         <div className="mt-2">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a className="underline text-indigo-500 text-sm cursor-pointer" onClick={() => onAddRow(filterGroup)}>
+          <a
+            className="underline text-indigo-500 text-sm cursor-pointer"
+            onClick={() => onAddRow(filterGroup)}
+          >
             + Add another
           </a>
         </div>
diff --git a/assets/js/dashboard/stats/modals/filter-modal-props-row.js b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
index 89ed40f0af..18666aa337 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-props-row.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-props-row.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo } from 'react'
 import { TrashIcon } from '@heroicons/react/20/solid'
 
diff --git a/assets/js/dashboard/stats/modals/filter-modal-row.js b/assets/js/dashboard/stats/modals/filter-modal-row.js
index dc9b4699c1..2914b151f4 100644
--- a/assets/js/dashboard/stats/modals/filter-modal-row.js
+++ b/assets/js/dashboard/stats/modals/filter-modal-row.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo } from 'react'
 import { TrashIcon } from '@heroicons/react/20/solid'
 import classNames from 'classnames'
diff --git a/assets/js/dashboard/stats/modals/filter-modal.js b/assets/js/dashboard/stats/modals/filter-modal.js
index 65d542022c..60be135ce6 100644
--- a/assets/js/dashboard/stats/modals/filter-modal.js
+++ b/assets/js/dashboard/stats/modals/filter-modal.js
@@ -1,17 +1,26 @@
 import React from 'react'
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom'
 
-import Modal from './modal';
-import { EVENT_PROPS_PREFIX, FILTER_GROUP_TO_MODAL_TYPE, formatFilterGroup, FILTER_OPERATIONS, getFilterGroup, FILTER_MODAL_TO_FILTER_GROUP, cleanLabels, getAvailableFilterModals } from '../../util/filters';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
-import { isModifierPressed, isTyping } from '../../keybinding';
-import FilterModalGroup from "./filter-modal-group";
-import { rootRoute } from '../../router';
-import { useAppNavigate } from '../../navigation/use-app-navigate';
-import { SegmentModal } from '../../segments/segment-modals';
-import { TrashIcon } from '@heroicons/react/24/outline';
-import { findAppliedSegmentFilter } from '../../filtering/segments';
+import Modal from './modal'
+import {
+  EVENT_PROPS_PREFIX,
+  FILTER_GROUP_TO_MODAL_TYPE,
+  formatFilterGroup,
+  FILTER_OPERATIONS,
+  getFilterGroup,
+  FILTER_MODAL_TO_FILTER_GROUP,
+  cleanLabels,
+  getAvailableFilterModals
+} from '../../util/filters'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { isModifierPressed, isTyping } from '../../keybinding'
+import FilterModalGroup from './filter-modal-group'
+import { rootRoute } from '../../router'
+import { useAppNavigate } from '../../navigation/use-app-navigate'
+import { SegmentModal } from '../../segments/segment-modals'
+import { TrashIcon } from '@heroicons/react/24/outline'
+import { findAppliedSegmentFilter } from '../../filtering/segments'
 
 function partitionFilters(modalType, filters) {
   const otherFilters = []
@@ -21,7 +30,9 @@ function partitionFilters(modalType, filters) {
   filters.forEach((filter, index) => {
     const filterGroup = getFilterGroup(filter)
     if (FILTER_GROUP_TO_MODAL_TYPE[filterGroup] === modalType) {
-      const key = filterState[filterGroup] ? `${filterGroup}:${index}` : filterGroup
+      const key = filterState[filterGroup]
+        ? `${filterGroup}:${index}`
+        : filterGroup
       filterState[key] = filter
       hasRelevantFilters = true
     } else {
@@ -51,10 +62,19 @@ class FilterModal extends React.Component {
     const modalType = this.props.modalType
 
     const query = this.props.query
-    const { filterState, otherFilters, hasRelevantFilters } = partitionFilters(modalType, query.filters)
+    const { filterState, otherFilters, hasRelevantFilters } = partitionFilters(
+      modalType,
+      query.filters
+    )
 
     this.handleKeydown = this.handleKeydown.bind(this)
-    this.state = { query, filterState, labelState: query.labels, otherFilters, hasRelevantFilters }
+    this.state = {
+      query,
+      filterState,
+      labelState: query.labels,
+      otherFilters,
+      hasRelevantFilters
+    }
   }
 
   componentDidMount() {
@@ -83,7 +103,9 @@ class FilterModal extends React.Component {
   }
 
   isDisabled() {
-    return Object.values(this.state.filterState).every(([_operation, _key, clauses]) => clauses.length === 0)
+    return Object.values(this.state.filterState).every(
+      ([_operation, _key, clauses]) => clauses.length === 0
+    )
   }
 
   selectFiltersAndCloseModal(filters) {
@@ -99,7 +121,7 @@ class FilterModal extends React.Component {
   }
 
   onUpdateRowValue(id, newFilter, newLabels) {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const [_operation, filterKey, _clauses] = newFilter
       return {
         filterState: {
@@ -107,7 +129,9 @@ class FilterModal extends React.Component {
           [id]: newFilter
         },
         labelState: cleanLabels(
-          Object.values(this.state.filterState).concat(this.state.query.filters),
+          Object.values(this.state.filterState).concat(
+            this.state.query.filters
+          ),
           prevState.labelState,
           filterKey,
           newLabels
@@ -131,7 +155,7 @@ class FilterModal extends React.Component {
   }
 
   onDeleteRow(id) {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const filterState = { ...prevState.filterState }
       delete filterState[id]
       return { filterState }
@@ -152,7 +176,10 @@ class FilterModal extends React.Component {
 
         <div className="mt-4 border-b border-gray-300"></div>
         <main className="modal__content">
-          <form className="flex flex-col" onSubmit={this.handleSubmit.bind(this)}>
+          <form
+            className="flex flex-col"
+            onSubmit={this.handleSubmit.bind(this)}
+          >
             {this.getFilterGroups().map((filterGroup) => (
               <FilterModalGroup
                 key={filterGroup}
@@ -183,7 +210,10 @@ class FilterModal extends React.Component {
                   }}
                 >
                   <TrashIcon className="w-4 h-4 mr-2" />
-                  Remove filter{FILTER_MODAL_TO_FILTER_GROUP[this.props.modalType].length > 1 ? 's' : ''}
+                  Remove filter
+                  {FILTER_MODAL_TO_FILTER_GROUP[this.props.modalType].length > 1
+                    ? 's'
+                    : ''}
                 </button>
               )}
             </div>
@@ -195,7 +225,7 @@ class FilterModal extends React.Component {
 }
 
 export default function FilterModalWithRouter(props) {
-  const navigate = useAppNavigate();
+  const navigate = useAppNavigate()
   const { field } = useParams()
   const { query } = useQueryContext()
   const site = useSiteContext()
diff --git a/assets/js/dashboard/stats/modals/google-keywords.tsx b/assets/js/dashboard/stats/modals/google-keywords.tsx
index f3f0ddecaf..31979bac47 100644
--- a/assets/js/dashboard/stats/modals/google-keywords.tsx
+++ b/assets/js/dashboard/stats/modals/google-keywords.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo, useState } from 'react'
 
 import Modal from './modal'
diff --git a/assets/js/dashboard/stats/modals/locations-modal.js b/assets/js/dashboard/stats/modals/locations-modal.js
index 5563484e73..b81ea88c7b 100644
--- a/assets/js/dashboard/stats/modals/locations-modal.js
+++ b/assets/js/dashboard/stats/modals/locations-modal.js
@@ -1,59 +1,97 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react'
 
-import Modal from "./modal";
-import { hasConversionGoalFilter } from "../../util/filters";
-import BreakdownModal from "./breakdown-modal";
-import * as metrics from "../reports/metrics";
-import * as url from "../../util/url";
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { addFilter } from "../../query";
-import { SortDirection } from "../../hooks/use-order-by";
+import Modal from './modal'
+import { hasConversionGoalFilter } from '../../util/filters'
+import BreakdownModal from './breakdown-modal'
+import * as metrics from '../reports/metrics'
+import * as url from '../../util/url'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { addFilter } from '../../query'
+import { SortDirection } from '../../hooks/use-order-by'
 
 const VIEWS = {
-  countries: { title: 'Top Countries', dimension: 'country', endpoint: '/countries', dimensionLabel: 'Country', defaultOrder: ["visitors", SortDirection.desc] },
-  regions: { title: 'Top Regions', dimension: 'region', endpoint: '/regions', dimensionLabel: 'Region', defaultOrder: ["visitors", SortDirection.desc] },
-  cities: { title: 'Top Cities', dimension: 'city', endpoint: '/cities', dimensionLabel: 'City', defaultOrder: ["visitors", SortDirection.desc] },
+  countries: {
+    title: 'Top Countries',
+    dimension: 'country',
+    endpoint: '/countries',
+    dimensionLabel: 'Country',
+    defaultOrder: ['visitors', SortDirection.desc]
+  },
+  regions: {
+    title: 'Top Regions',
+    dimension: 'region',
+    endpoint: '/regions',
+    dimensionLabel: 'Region',
+    defaultOrder: ['visitors', SortDirection.desc]
+  },
+  cities: {
+    title: 'Top Cities',
+    dimension: 'city',
+    endpoint: '/cities',
+    dimensionLabel: 'City',
+    defaultOrder: ['visitors', SortDirection.desc]
+  }
 }
 
 function LocationsModal({ currentView }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   let reportInfo = VIEWS[currentView]
-  reportInfo = {...reportInfo, endpoint: url.apiPath(site, reportInfo.endpoint)}
+  reportInfo = {
+    ...reportInfo,
+    endpoint: url.apiPath(site, reportInfo.endpoint)
+  }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.code]],
-      labels: { [listItem.code]: listItem.name }
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.code]],
+        labels: { [listItem.code]: listItem.name }
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', `${reportInfo.dimension}_name`, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        `${reportInfo.dimension}_name`,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (query.period === 'realtime') {
       return [
-        metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36' })
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
       currentView === 'countries' && metrics.createPercentage()
-    ].filter(metric => !!metric)
+    ].filter((metric) => !!metric)
   }
 
   const renderIcon = useCallback((listItem) => {
diff --git a/assets/js/dashboard/stats/modals/modal.js b/assets/js/dashboard/stats/modals/modal.js
index ec911983f4..97e166bcad 100644
--- a/assets/js/dashboard/stats/modals/modal.js
+++ b/assets/js/dashboard/stats/modals/modal.js
@@ -1,20 +1,19 @@
-import React, { useEffect } from "react";
-import { createPortal } from "react-dom";
-import { isModifierPressed, isTyping, Keybind } from "../../keybinding"
-import { rootRoute } from "../../router";
-import { useAppNavigate } from "../../navigation/use-app-navigate";
+import React, { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { isModifierPressed, isTyping, Keybind } from '../../keybinding'
+import { rootRoute } from '../../router'
+import { useAppNavigate } from '../../navigation/use-app-navigate'
 
 // This corresponds to the 'md' breakpoint on TailwindCSS.
-const MD_WIDTH = 768;
+const MD_WIDTH = 768
 // We assume that the dashboard is by default opened on a desktop. This is also a fall-back for when, for any reason, the width is not ascertained.
-const DEFAULT_WIDTH = 1080;
-
+const DEFAULT_WIDTH = 1080
 
 class Modal extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      viewport: DEFAULT_WIDTH,
+      viewport: DEFAULT_WIDTH
     }
     this.node = React.createRef()
     this.handleClickOutside = this.handleClickOutside.bind(this)
@@ -22,30 +21,30 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
-    document.body.style.overflow = 'hidden';
-    document.body.style.height = '100vh';
-    document.addEventListener("mousedown", this.handleClickOutside);
-    window.addEventListener('resize', this.handleResize, false);
-    this.handleResize();
+    document.body.style.overflow = 'hidden'
+    document.body.style.height = '100vh'
+    document.addEventListener('mousedown', this.handleClickOutside)
+    window.addEventListener('resize', this.handleResize, false)
+    this.handleResize()
   }
 
   componentWillUnmount() {
-    document.body.style.overflow = null;
-    document.body.style.height = null;
-    document.removeEventListener("mousedown", this.handleClickOutside);
-    window.removeEventListener('resize', this.handleResize, false);
+    document.body.style.overflow = null
+    document.body.style.height = null
+    document.removeEventListener('mousedown', this.handleClickOutside)
+    window.removeEventListener('resize', this.handleResize, false)
   }
 
   handleClickOutside(e) {
     if (this.node.current.contains(e.target)) {
-      return;
+      return
     }
 
     this.props.onClose()
   }
 
   handleResize() {
-    this.setState({ viewport: window.innerWidth });
+    this.setState({ viewport: window.innerWidth })
   }
 
   /**
@@ -56,21 +55,27 @@ class Modal extends React.Component {
    * Note that When a max-width comes from the parent component, we rely on that *always*.
    */
   getStyle() {
-    const { maxWidth } = this.props;
-    const { viewport } = this.state;
-    const styleObject = {};
+    const { maxWidth } = this.props
+    const { viewport } = this.state
+    const styleObject = {}
     if (maxWidth) {
-      styleObject.maxWidth = maxWidth;
+      styleObject.maxWidth = maxWidth
     } else {
-      styleObject.width = viewport <= MD_WIDTH ? "min-content" : "860px";
+      styleObject.width = viewport <= MD_WIDTH ? 'min-content' : '860px'
     }
-    return styleObject;
+    return styleObject
   }
 
   render() {
     return createPortal(
       <>
-        <Keybind keyboardKey="Escape" type="keyup" handler={this.props.onClose} targetRef="document" shouldIgnoreWhen={[isModifierPressed, isTyping]} />
+        <Keybind
+          keyboardKey="Escape"
+          type="keyup"
+          handler={this.props.onClose}
+          targetRef="document"
+          shouldIgnoreWhen={[isModifierPressed, isTyping]}
+        />
         <div className="modal is-open" onClick={this.props.onClick}>
           <div className="modal__overlay">
             <button className="modal__close"></button>
@@ -86,20 +91,21 @@ class Modal extends React.Component {
             </div>
           </div>
         </div>
-      </>
-,
-      document.getElementById("modal_root"),
-    );
+      </>,
+      document.getElementById('modal_root')
+    )
   }
 }
 
 export default function ModalWithRouting(props) {
   const navigate = useAppNavigate()
-  const onClose = props.onClose ?? (() => navigate({ path: rootRoute.path, search: (s) => s }))
+  const onClose =
+    props.onClose ??
+    (() => navigate({ path: rootRoute.path, search: (s) => s }))
   return <Modal {...props} onClose={onClose} />
 }
 
-const FocusOnMount = ({focusableRef}) => {
+const FocusOnMount = ({ focusableRef }) => {
   useEffect(() => {
     if (typeof focusableRef.current?.focus === 'function') {
       focusableRef.current.focus()
diff --git a/assets/js/dashboard/stats/modals/pages.js b/assets/js/dashboard/stats/modals/pages.js
index 3204422770..18c679c938 100644
--- a/assets/js/dashboard/stats/modals/pages.js
+++ b/assets/js/dashboard/stats/modals/pages.js
@@ -1,54 +1,74 @@
-import React, {useCallback} from "react";
+import React, { useCallback } from 'react'
 import Modal from './modal'
-import { hasConversionGoalFilter, isRealTimeDashboard } from "../../util/filters";
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
 import { addFilter } from '../../query'
-import BreakdownModal from "./breakdown-modal";
+import BreakdownModal from './breakdown-modal'
 import * as metrics from '../reports/metrics'
-import * as url from '../../util/url';
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from "../../hooks/use-order-by";
+import * as url from '../../util/url'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 function PagesModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
     title: 'Top Pages',
     dimension: 'page',
     endpoint: url.apiPath(site, '/pages'),
     dimensionLabel: 'Page url',
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({renderLabel: (_query) => 'Conversions', width: 'w-28'}),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (isRealTimeDashboard(query)) {
       return [
-        metrics.createVisitors({renderLabel: (_query) => 'Current visitors', width: 'w-36'})
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({renderLabel: (_query) => "Visitors" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
       metrics.createPageviews(),
       metrics.createBounceRate(),
       metrics.createTimeOnPage(),
diff --git a/assets/js/dashboard/stats/modals/props.js b/assets/js/dashboard/stats/modals/props.js
index 62de2ad820..371a053a92 100644
--- a/assets/js/dashboard/stats/modals/props.js
+++ b/assets/js/dashboard/stats/modals/props.js
@@ -1,21 +1,21 @@
-import React, { useCallback } from "react";
-import { useParams } from "react-router-dom";
+import React, { useCallback } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Modal from './modal'
 import { addFilter, revenueAvailable } from '../../query'
-import { specialTitleWhenGoalFilter } from "../behaviours/goal-conversions";
-import { EVENT_PROPS_PREFIX, hasConversionGoalFilter } from "../../util/filters"
-import BreakdownModal from "./breakdown-modal";
-import * as metrics from "../reports/metrics";
-import * as url from "../../util/url";
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from "../../hooks/use-order-by";
+import { specialTitleWhenGoalFilter } from '../behaviours/goal-conversions'
+import { EVENT_PROPS_PREFIX, hasConversionGoalFilter } from '../../util/filters'
+import BreakdownModal from './breakdown-modal'
+import * as metrics from '../reports/metrics'
+import * as url from '../../util/url'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 function PropsModal() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
-  const { propKey } = useParams();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
+  const { propKey } = useParams()
 
   /*global BUILD_EXTRA*/
   const showRevenueMetrics = BUILD_EXTRA && revenueAvailable(query, site)
@@ -23,31 +23,45 @@ function PropsModal() {
   const reportInfo = {
     title: specialTitleWhenGoalFilter(query, 'Custom Property Breakdown'),
     dimension: propKey,
-    endpoint: url.apiPath(site, `/custom-prop-values/${url.maybeEncodeRouteParam(propKey)}`),
+    endpoint: url.apiPath(
+      site,
+      `/custom-prop-values/${url.maybeEncodeRouteParam(propKey)}`
+    ),
     dimensionLabel: propKey,
-    defaultOrder: ["visitors", SortDirection.desc]
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: `${EVENT_PROPS_PREFIX}${propKey}`,
-      filter: ["is", `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
-    }
-  }, [propKey])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: `${EVENT_PROPS_PREFIX}${propKey}`,
+        filter: ['is', `${EVENT_PROPS_PREFIX}${propKey}`, [listItem.name]]
+      }
+    },
+    [propKey]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', `${EVENT_PROPS_PREFIX}${propKey}`, [searchString], { case_sensitive: false }])
-  }, [propKey])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        `${EVENT_PROPS_PREFIX}${propKey}`,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [propKey]
+  )
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
-      metrics.createEvents({ renderLabel: (_query) => "Events" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
+      metrics.createEvents({ renderLabel: (_query) => 'Events' }),
       hasConversionGoalFilter(query) && metrics.createConversionRate(),
       !hasConversionGoalFilter(query) && metrics.createPercentage(),
       showRevenueMetrics && metrics.createAverageRevenue(),
-      showRevenueMetrics && metrics.createTotalRevenue(),
-    ].filter(metric => !!metric)
+      showRevenueMetrics && metrics.createTotalRevenue()
+    ].filter((metric) => !!metric)
   }
 
   return (
diff --git a/assets/js/dashboard/stats/modals/referrer-drilldown.js b/assets/js/dashboard/stats/modals/referrer-drilldown.js
index 23ee6ec5f3..023c63cfb6 100644
--- a/assets/js/dashboard/stats/modals/referrer-drilldown.js
+++ b/assets/js/dashboard/stats/modals/referrer-drilldown.js
@@ -1,58 +1,80 @@
 import React, { useCallback } from 'react'
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom'
 
 import Modal from './modal'
-import { hasConversionGoalFilter, isRealTimeDashboard } from "../../util/filters";
-import BreakdownModal from "./breakdown-modal";
-import * as metrics from "../reports/metrics";
-import * as url from "../../util/url";
-import { addFilter } from "../../query";
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from '../../hooks/use-order-by';
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
+import BreakdownModal from './breakdown-modal'
+import * as metrics from '../reports/metrics'
+import * as url from '../../util/url'
+import { addFilter } from '../../query'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 function ReferrerDrilldownModal() {
-  const { referrer } = useParams();
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { referrer } = useParams()
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const reportInfo = {
-    title: "Referrer Drilldown",
+    title: 'Referrer Drilldown',
     dimension: 'referrer',
-    endpoint: url.apiPath(site, `/referrers/${url.maybeEncodeRouteParam(referrer)}`
-  ),
-    dimensionLabel: "Referrer",
-    defaultOrder: ["visitors", SortDirection.desc]
+    endpoint: url.apiPath(
+      site,
+      `/referrers/${url.maybeEncodeRouteParam(referrer)}`
+    ),
+    dimensionLabel: 'Referrer',
+    defaultOrder: ['visitors', SortDirection.desc]
   }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ['is', reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (isRealTimeDashboard(query)) {
       return [
-        metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36' })
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
       metrics.createBounceRate(),
       metrics.createVisitDuration()
     ]
@@ -69,7 +91,7 @@ function ReferrerDrilldownModal() {
   }, [])
 
   const getExternalLinkURL = useCallback((listItem) => {
-    if (listItem.name !== "Direct / None") {
+    if (listItem.name !== 'Direct / None') {
       return '//' + listItem.name
     }
   }, [])
diff --git a/assets/js/dashboard/stats/modals/rocket-icon.js b/assets/js/dashboard/stats/modals/rocket-icon.js
index b1563a81fd..d335303ec0 100644
--- a/assets/js/dashboard/stats/modals/rocket-icon.js
+++ b/assets/js/dashboard/stats/modals/rocket-icon.js
@@ -2,6 +2,28 @@ import React from 'react'
 
 export default function RocketIcon() {
   return (
-    <svg className="inline fill-current" xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style={{enableBackground: 'new 0 0 100 100'}} xmlSpace="preserve"><g><path d="M35.6830368,38.7263184c2.7299805,0,4.9511719-2.2211914,4.9511719-4.9511719s-2.2211914-4.9511719-4.9511719-4.9511719   c-2.7304688,0-4.9516602,2.2211914-4.9516602,4.9511719S32.9525681,38.7263184,35.6830368,38.7263184z M35.6830368,30.8239746   c1.6274414,0,2.9511719,1.3237305,2.9511719,2.9511719s-1.3237305,2.9511719-2.9511719,2.9511719   s-2.9516602-1.3237305-2.9516602-2.9511719S34.0555954,30.8239746,35.6830368,30.8239746z"/><path d="M43.4540329,27.4133301c2.1630859,0,3.9228516-1.7597656,3.9228516-3.9228516s-1.7597656-3.9228516-3.9228516-3.9228516   c-2.1625977,0-3.9223633,1.7597656-3.9223633,3.9228516S41.2914352,27.4133301,43.4540329,27.4133301z M43.4540329,21.567627   c1.0600586,0,1.9228516,0.862793,1.9228516,1.9228516s-0.862793,1.9228516-1.9228516,1.9228516   s-1.9223633-0.862793-1.9223633-1.9228516S42.3939743,21.567627,43.4540329,21.567627z"/><path d="M80.2762985,41.4973145c3.6635742,0,6.6445313-2.980957,6.6445313-6.6445313s-2.980957-6.6445313-6.6445313-6.6445313   c-3.6640625,0-6.6450195,2.980957-6.6450195,6.6445313S76.612236,41.4973145,80.2762985,41.4973145z M80.2762985,30.208252   c2.5610352,0,4.6445313,2.0834961,4.6445313,4.6445313s-2.0834961,4.6445313-4.6445313,4.6445313   s-4.6450195-2.0834961-4.6450195-4.6445313S77.7152634,30.208252,80.2762985,30.208252z"/><path d="M86.4340134,28.1555176c1.9663086,0,3.565918-1.5996094,3.565918-3.565918s-1.5996094-3.565918-3.565918-3.565918   c-1.9658203,0-3.5654297,1.5996094-3.5654297,3.565918S84.4681931,28.1555176,86.4340134,28.1555176z M86.4340134,23.0236816   c0.8632813,0,1.565918,0.7026367,1.565918,1.565918s-0.7026367,1.565918-1.565918,1.565918   s-1.5654297-0.7026367-1.5654297-1.565918S85.5707321,23.0236816,86.4340134,23.0236816z"/><path d="M79.9183884,48.1384277l-0.5896606,0.1737061c0.1333618-0.4435425,0.2112427-0.9072266,0.2112427-1.3841553   c0-0.4707031-0.0678711-0.9375-0.2045898-1.3950195c-0.78125-2.5327148-3.4887695-3.9741211-6.0366211-3.2119141   l-1.7001953,0.5170898c-0.3798828,0.1108398-0.7299805,0.1855469-1.0664063,0.2265625   c-0.003479,0.0004272-0.006897,0.000061-0.010376,0.0004883c-0.0266113,0.0028076-0.0534058-0.0014648-0.0794678,0.00354   c-0.6416626,0.0675659-1.277771,0.0505981-1.8896484-0.0645752l-4.8505859-0.8999023   c-3.8491211-0.7124023-7.8662109-0.4970703-11.6201172,0.6259766l-11.3138428,3.4025879   c-0.0564575-0.0429077-0.1116943-0.0877075-0.1778564-0.1184082l-13.7036133-6.3583984   c-0.230957-0.1069336-0.4951172-0.121582-0.7353516-0.0419922l-8.2226563,2.7250977   c-0.309082,0.1025391-0.5488281,0.3486328-0.6425781,0.6601563c-0.0942383,0.3110352-0.03125,0.6489258,0.1694336,0.9052734   l5.8516235,7.4795532l-2.1152954,0.6361694c-0.2539063,0.0761719-0.4672852,0.2504883-0.5927734,0.4838867   c-0.1254883,0.2338867-0.1533203,0.5078125-0.0766602,0.7617188l0.3309326,1.0892944   c-0.2720337,0.0733643-0.5426636,0.1504517-0.8016357,0.250061c-4.4667969,1.7197266-6.3505859,7.1894531-6.4287109,7.4213867   c-0.1542969,0.4580078,0.0415039,0.9609375,0.4648438,1.1943359c0.1640625,0.0908203,3.1762695,1.7246094,6.574707,1.7246094   c1.0532227,0,2.144043-0.1572266,3.1977539-0.5654297c0.0115356-0.0044556,0.022644-0.010437,0.0341797-0.0149536   l0.0750732,0.2472534l-1.4403076,0.4239502c-0.2548828,0.0751953-0.4692383,0.2485352-0.5961914,0.4819336   s-0.1557617,0.5073242-0.0800781,0.762207l0.2781982,0.9320679c-1.5239868-0.0391846-2.9415283,0.1781616-4.2181396,0.6724243   c-5.4560547,2.1005859-7.7651367,8.8061523-7.8608398,9.090332c-0.1176758,0.3505859-0.0327148,0.7373047,0.2211914,1.0058594   c0.2539063,0.269043,0.6376953,0.3745117,0.9916992,0.2773438c1.5864258-0.4365234,3.1904297-0.6772461,4.7919922-0.7211914   l-1.0683594,1.046875c-0.269043,0.2631836-0.3671875,0.6552734-0.2543945,1.0141602s0.4174805,0.6240234,0.7880859,0.6865234   c0.0708008,0.0117188,0.9082031,0.1474609,2.121582,0.1474609c1.3310547,0,3.1152344-0.1635742,4.8369141-0.8339844   c0.9935913-0.385376,1.942627-0.9547729,2.8378296-1.6859131l0.4258423,1.4300537   c0.1289063,0.434082,0.5268555,0.715332,0.9580078,0.715332c0.09375,0,0.1889648-0.0136719,0.2832031-0.0415039l3.6088257-1.064209   c0.5294189,0.4693604,1.2138062,0.7355957,1.9185181,0.7355957c0.2729492,0,0.5488281-0.0395508,0.8183594-0.1206055   l2.612793-0.7680664c0.6903687-0.1968994,1.2542114-0.6436157,1.6234131-1.2183228   c0.3770752,0.1716309,0.7831421,0.2798462,1.2032471,0.2798462c0.2666016,0,0.5361328-0.0366211,0.8007813-0.1132813   l2.6342773-0.7744141c0.6880493-0.2131348,1.241272-0.6553345,1.6037598-1.2210083   c0.3721924,0.1687622,0.7717285,0.2756958,1.1843262,0.2756958c0.2724609,0,0.5478516-0.0395508,0.8178711-0.1206055   l2.612793-0.7675781c0.980957-0.2804565,1.713623-1.0597534,1.9748535-2.0108032l33.9655762-10.0023804   c3.3706055-1.003418,5.6347656-4.0170898,5.6347656-7.4985352c0-0.7524414-0.1083984-1.4975586-0.3222656-2.2167969   C88.4432907,49.2814941,84.0643845,46.9157715,79.9183884,48.1384277z M26.4042282,41.6369629l10.9301758,5.0717773   l-12.3256836,3.6044922l-5.1030273-6.5224609L26.4042282,41.6369629z M63.3373337,44.0710449l2.6757202,0.4962769   l-6.4960327,2.1526489c-0.3745117,0.121582-0.7783203-0.0761719-0.9013672-0.4448242l-0.8479614-2.5335693   C59.6291428,43.6253662,61.5039597,43.730957,63.3373337,44.0710449z M52.6566696,44.645752   c1.0076294-0.3015137,2.0372925-0.5230713,3.0765381-0.6818237l0.9859619,2.9459839   c0.3779297,1.1303711,1.4384766,1.847168,2.5737305,1.8466797c0.2832031,0,0.5708008-0.0444336,0.8535156-0.1381836   l10.8579102-3.5981445c0.0090942-0.0029907,0.0158081-0.0096436,0.0247192-0.0128784   c0.3674316-0.0574341,0.7401123-0.1351929,1.1417847-0.2532349l1.7055664-0.5185547   c1.4975586-0.4467773,3.0883789,0.3989258,3.5454102,1.878418c0.078125,0.2631836,0.1181641,0.5371094,0.1181641,0.8139648   c0,0.8886719-0.4160156,1.7143555-1.1201172,2.2368164l-28.8650513,8.5059814l-0.8562622,0.2522583   c-0.2514038-0.196106-0.5341187-0.3519897-0.8377686-0.4598999c-0.0093384-0.0098267-0.0202637-0.0175781-0.0297241-0.0272827   c-0.038208-0.0392456-0.079895-0.0735474-0.1200562-0.1102905c-0.0634155-0.0580444-0.1269531-0.1153564-0.1948242-0.1671143   c-0.0471191-0.0359497-0.0963745-0.067749-0.1453857-0.1005859c-0.0665283-0.0444946-0.1335449-0.0876465-0.2033081-0.1263428   c-0.0535278-0.0297241-0.1080322-0.0564575-0.163269-0.0827026c-0.0698853-0.0332031-0.1405029-0.0636597-0.2127686-0.0911255   c-0.0580444-0.0220947-0.1160889-0.0426025-0.1754761-0.0609131c-0.0736694-0.0227051-0.1481323-0.0411987-0.2234497-0.0580444   c-0.0602417-0.0134888-0.1199341-0.0269775-0.1810303-0.0365601c-0.0789795-0.0123901-0.1585693-0.0187988-0.2385254-0.0245972   c-0.0588379-0.0043335-0.1170044-0.0105591-0.1762085-0.0112305c-0.0892334-0.0009766-0.1785889,0.0061035-0.2682495,0.0134888   c-0.0505371,0.0042114-0.1008911,0.0043335-0.1514893,0.0112305c-0.1401367,0.019043-0.2800293,0.0469971-0.4185791,0.0874023   l-2.6254883,0.7714844c-0.1715088,0.0514526-0.335022,0.1169434-0.4894409,0.1948242   c-0.1483154,0.0748291-0.2871094,0.1623535-0.4178467,0.258667c-0.0053711,0.0039673-0.0119019,0.0066528-0.0172729,0.0106812   c-0.1115723,0.083374-0.2116089,0.1785278-0.3088379,0.2757568c-0.020752,0.020752-0.0458374,0.0375366-0.0658569,0.0588379   c-0.0830688,0.0883789-0.1534424,0.1865234-0.2243042,0.2841187c-0.0264282,0.036377-0.0588379,0.0684204-0.0834961,0.105957   c-0.0002441,0.0003662-0.0006104,0.0007324-0.0008545,0.0010986c-0.008728-0.0039673-0.0183105-0.0056763-0.0270996-0.0095215   c-0.0830688-0.0366821-0.1703491-0.0613403-0.2565308-0.0900269c-0.0712891-0.0236816-0.1404419-0.0530396-0.213501-0.0710449   c-0.0961914-0.0238037-0.1952515-0.0338135-0.2938232-0.0474854c-0.0670166-0.0093384-0.1325073-0.0254517-0.2003174-0.0299683   c-0.1109619-0.0073853-0.2233276,0.0008545-0.3355103,0.0066528c-0.0574341,0.0029907-0.1143188-0.0018921-0.171875,0.0046387   c-0.1697998,0.0193481-0.3398438,0.0536499-0.5081787,0.1049194l-2.6225586,0.7709961   c-0.1702271,0.0504761-0.3327026,0.1159668-0.4865723,0.194458c-0.0361938,0.0184937-0.0670166,0.0443115-0.1022339,0.064209   c-0.114624,0.0647583-0.2285767,0.1306152-0.3320923,0.2097778c-0.0396729,0.0302734-0.0722656,0.0681152-0.1102295,0.1004028   c-0.0912476,0.0775757-0.1833496,0.1543579-0.263916,0.2424927c-0.0459595,0.0502319-0.0822754,0.1082764-0.1245728,0.1616211   c-0.0603638,0.0762329-0.1253662,0.1488647-0.1779175,0.230957c-0.4283447-0.1953125-0.90625-0.2789307-1.394104-0.2468872   c-0.0344849,0.0022583-0.0682373-0.0021362-0.1028442,0.0013428c-0.1741333,0.0176392-0.3493042,0.0509033-0.5236816,0.100708   l-2.6259766,0.7719727c-0.1636353,0.0493164-0.3181763,0.1143799-0.4664307,0.1885986   c-0.0487671,0.0244141-0.0928955,0.0542603-0.1398315,0.0811157c-0.0963745,0.0551758-0.1904907,0.1124878-0.2788086,0.1773682   c-0.0499268,0.0366821-0.0962524,0.0762939-0.1435547,0.1159058c-0.0778809,0.0652466-0.1521606,0.1329956-0.2223511,0.2055054   c-0.0435181,0.0449219-0.0854492,0.09021-0.1258545,0.1376343c-0.0662231,0.0778198-0.1264648,0.1592407-0.18396,0.2432251   c-0.03302,0.0482788-0.0672607,0.0950928-0.09729,0.1452026c-0.0593262,0.098999-0.1095581,0.2024536-0.1566162,0.3079224   c-0.0180054,0.0402222-0.0400391,0.078186-0.0561523,0.1193237c-0.0580444,0.1479492-0.1044922,0.300354-0.137207,0.4569702   c-0.007019,0.0336914-0.0078735,0.0687256-0.0136719,0.1027222c-0.0180664,0.1057129-0.0368042,0.2113647-0.0427246,0.3195801   l-0.2138062-0.7027588c0.012085-0.1270142,0.0072021-0.2562256-0.0317993-0.3841553l-1.1140137-3.6674194l-0.322998-1.0791626   c-0.0026855-0.0089111-0.0092773-0.015564-0.012207-0.024353l-0.9248047-3.0444946   c-0.0401001-0.1308594-0.1096802-0.2437134-0.1931763-0.3440552l-0.2487183-0.8175659L52.6566696,44.645752z    M22.3425827,59.2571411l0.0478516,0.1574097c-0.1259155,0.0722656-0.2521362,0.1400757-0.3763428,0.1901855   c-0.253418,0.0957031-0.5390625,0.1601563-0.8525391,0.1923828c0.2495117-0.1816406,0.5009766-0.3227539,0.7504883-0.4189453   C22.0441818,59.3267212,22.1913376,59.2897949,22.3425827,59.2571411z M23.1390915,62.5144043   c-2.6728516,1.0361328-5.8369141-0.0449219-7.2880859-0.668457c0.6430664-1.4326172,2.2358398-4.3408203,4.9189453-5.3740234   c0.213562-0.0823975,0.4368286-0.1488037,0.6634521-0.2074585l0.3309937,1.0894775   c-0.1945801,0.0488892-0.3952637,0.0895996-0.5745239,0.1589966c-1.090332,0.421875-2.1020508,1.2758789-3.0068359,2.5380859   c-0.1958008,0.2734375-0.2412109,0.6269531-0.1206055,0.940918s0.3911133,0.5463867,0.7197266,0.6186523   c0.6391602,0.1396484,1.2744141,0.2109375,1.8881836,0.2109375c0.7543945,0,1.4448242-0.1166992,2.0698242-0.3535156   c0.0811157-0.0325317,0.1576538-0.0828857,0.2376709-0.1199341l0.3328857,1.0957642   C23.2537155,62.4679565,23.1967697,62.4923706,23.1390915,62.5144043z M23.5314255,72.725647l0.0012207,0.0040894   c-0.5898438,0.7407227-1.1948242,1.3237305-1.8076172,1.7416992c-0.5957031-0.9111328-1.5537109-1.5366211-2.6308594-1.7211914   c0.199707-0.1118164,0.4003906-0.2060547,0.6015625-0.2827148c1.0146484-0.387207,2.3012695-0.4477539,3.6938477-0.2143555   L23.5314255,72.725647z M21.756279,77.7346191c-1.2910156,0.5024414-2.6557617,0.6630859-3.7475586,0.6904297l1.1201172-1.0976563   c0.2788086-0.2729492,0.3730469-0.6831055,0.2421875-1.050293s-0.4633789-0.625-0.8515625-0.6601563   c-0.6420898-0.0581055-1.2861328-0.0869141-1.9301758-0.0869141c-1.2963867,0-2.5947266,0.1171875-3.8862305,0.3515625   c0.9746094-1.9414063,2.9125977-4.96875,5.9301758-6.1308594c1.1391602-0.440918,2.434082-0.6181641,3.8476563-0.5322266   l0.2842407,0.9488525c-1.3863525-0.1206055-2.680603,0.0112915-3.7837524,0.4320068   c-1.2207031,0.4672852-2.3857422,1.3544922-3.4614258,2.6357422c-0.2607422,0.3105469-0.3085938,0.7480469-0.1201172,1.1069336   c0.1879883,0.3588867,0.5737305,0.5717773,0.9785156,0.5317383l1.8959961-0.1762695   c0.0302734-0.003418,0.0610352-0.0043945,0.0913086-0.0043945c0.784668,0.0019531,1.4975586,0.4169922,1.831543,1.1416016   c0.0463867,0.0922852,0.0771484,0.1743164,0.097168,0.2583008c0.0678711,0.2875977,0.2592773,0.5307617,0.5229492,0.6635742   c0.1416016,0.0712891,0.2958984,0.1069336,0.4501953,0.1069336c0.1342773,0,0.2685547-0.0268555,0.3945313-0.0810547   c0.8795776-0.3776855,1.7250366-1.0009155,2.534668-1.8171997l0.3041992,1.0198364   C23.6381149,76.7746582,22.7172165,77.3615723,21.756279,77.7346191z M25.7430954,72.3293457   c-0.0053711-0.0239258-0.0117188-0.0478516-0.0185547-0.0712891l-1.6694336-5.5859375l0.6426392-0.1890869   c0.1815186,0.1630859,0.4124756,0.2652588,0.6615601,0.2652588c0.0947266,0,0.190918-0.0136719,0.2866211-0.0424805   l0.7924194-0.2364502l2.1046753,7.0847168l1.0675659,3.6032104l-2.2332153,0.6588745L25.7430954,72.3293457z    M35.3881149,76.8781738l-2.6269531,0.7719727c-0.3734741,0.1134644-0.7839355-0.0386963-0.998291-0.3710938   c-0.0044556-0.0070801-0.0038452-0.0159912-0.0085449-0.0229492c-0.0307617-0.0463867-0.0595703-0.1108398-0.0820313-0.1914063   l-1.4168701-4.7697754l-2.2486572-7.5876465l-0.2172852-0.7382813c-0.0527344-0.4150391,0.2158203-0.8164063,0.6328125-0.9418945   l2.6118164-0.7680664c0.4311523-0.1245117,0.8818359,0.0771484,1.0400391,0.4121094l3.5966187,12.0499268l0.3242798,1.0936279   c0.0015259,0.0049438,0.0045166,0.0084229,0.0061035,0.0133667l0.0114746,0.0383911   c0.0001221,0.0003052,0.0003662,0.001709,0.0004883,0.0020752c0.0063477,0.031189,0.0131836,0.0750122,0.0131836,0.145874   c0,0.0057373,0.0036621,0.0105591,0.0037842,0.0162964C36.0345993,76.4204712,35.773613,76.7678833,35.3881149,76.8781738z    M41.6283493,75.0583496l-2.6157227,0.7685547c-0.3842773,0.1107788-0.7797852-0.0397949-1.0014038-0.3787842   c-0.0003052-0.0004883-0.0002441-0.0010986-0.0005493-0.0015869c-0.0240479-0.0377808-0.0378418-0.0718384-0.053833-0.1066895   c-0.0119019-0.026001-0.0247803-0.0489502-0.0344238-0.0758057c-0.0065308-0.0221558-0.0131226-0.0442505-0.0206299-0.06604   c-0.001709-0.005127-0.0059204-0.0084839-0.0077515-0.0136108l-3.7139282-12.5259399l-0.1210938-0.4052734   c-0.0109863-0.0336914-0.0181274-0.0585327-0.0230103-0.0740356c-0.0022583-0.0072632-0.005188-0.0172729-0.0057983-0.0172729   c-0.0004883,0-0.0004883,0.0014648-0.0004883,0.0048828c-0.0610352-0.4277344,0.2119141-0.8452148,0.6318359-0.9697266   l2.6289063-0.7724609c0.40625-0.125,0.8422852,0.0654297,1.034668,0.4501953   c0.0029297,0.0058594,0.0058594,0.0112305,0.0087891,0.0170898c0.0043945,0.0102539,0.0087891,0.0205078,0.0131836,0.0302734   c0.015625,0.034668,0.0341797,0.0708008,0.0463867,0.1069336l3.8374023,12.9326172   c0.0012207,0.0040894,0.0032349,0.0079956,0.0044556,0.012085l0.0062866,0.0211182   c0.0129395,0.0390625,0.0126953,0.0739746,0.0166626,0.107666c0.0024414,0.0253906,0.0077515,0.0415649,0.0077515,0.0773926   c0,0.0050049,0.0032349,0.0092163,0.0032959,0.0142212C42.2725143,74.5970459,42.0161667,74.9381714,41.6283493,75.0583496z    M48.509697,72.3605957c0.0048828,0.3955078-0.2558594,0.7475586-0.6416016,0.8579102l-2.6264648,0.7714844   c-0.3828125,0.1132813-0.7822266-0.0351563-0.9838867-0.3564453c-0.0009155-0.0015259-0.0010376-0.0028076-0.0019531-0.0043335   c-0.003479-0.0057983-0.0027466-0.0128784-0.0063477-0.0186157c-0.0113525-0.0181274-0.015686-0.0336304-0.0253296-0.0511475   c-0.026001-0.0504761-0.0529175-0.1010132-0.0684204-0.1506348c-0.0031128-0.0101929-0.0059204-0.0204468-0.0092773-0.0306396   c-0.0010376-0.0032349-0.0037231-0.0053711-0.0047607-0.008606l-3.7252197-12.5631714l-0.1323242-0.456543   c-0.0039063-0.0375977-0.0102539-0.074707-0.0185547-0.1113281c-0.0249023-0.3901367,0.2368164-0.7514648,0.6362305-0.8710938   l2.6176758-0.7695313c0.3603516-0.1015625,0.7441406,0.0283203,0.9614258,0.3271484   c0.0151367,0.0214844,0.0566406,0.078125,0.0737305,0.0981445c0.0341797,0.0678711,0.0683594,0.1425781,0.0791016,0.1674805   l3.8598633,13.0180664c0.0068359,0.0180664,0.0161133,0.0527344,0.0161133,0.1391602   C48.509697,72.3522949,48.509697,72.3562012,48.509697,72.3605957z M83.7972946,61.208252L50.2455368,71.088623   L46.943779,59.935791l33.5390625-9.8789063c3.0947266-0.909668,6.3588867,0.8496094,7.2783203,3.9257813   c0.1582031,0.5327148,0.2387695,1.0859375,0.2387695,1.6450195C87.9999313,58.2175293,86.3099899,60.4602051,83.7972946,61.208252z   "/><path d="M82.1522751,50.5427246c-0.4902344,0-0.9799805,0.0712891-1.456543,0.2124023   c-0.5292969,0.1572266-0.831543,0.7133789-0.6748047,1.2431641c0.1572266,0.5292969,0.7143555,0.8310547,1.2431641,0.6748047   c1.6289063-0.4804688,3.3920898,0.496582,3.8676758,2.0874023c0.1293945,0.4335938,0.5273438,0.7138672,0.9575195,0.7138672   c0.0952148,0,0.1914063-0.0136719,0.2871094-0.0424805c0.5288086-0.1582031,0.8295898-0.715332,0.6713867-1.2446289   C86.4061813,52.0412598,84.3929977,50.5427246,82.1522751,50.5427246z"/><path d="M78.2572556,51.4729004l-2.8793945,0.847168c-0.5297852,0.15625-0.8330078,0.7119141-0.6772461,1.2416992   c0.128418,0.4355469,0.5268555,0.7182617,0.9589844,0.7182617c0.09375,0,0.1884766-0.0136719,0.2827148-0.0410156   l2.8793945-0.847168c0.5297852-0.15625,0.8330078-0.7119141,0.6772461-1.2416992   C79.3427048,51.6203613,78.784111,51.3190918,78.2572556,51.4729004z"/><path d="M72.7758102,53.0856934l-23.9584961,7.0512695c-0.5297852,0.15625-0.8330078,0.7119141-0.6772461,1.2416992   c0.128418,0.4355469,0.5268555,0.7182617,0.9589844,0.7182617c0.09375,0,0.1884766-0.0136719,0.2827148-0.0410156   l23.9584961-7.0512695c0.5297852-0.15625,0.8330078-0.7119141,0.6772461-1.2416992   C73.8607712,53.232666,73.303154,52.932373,72.7758102,53.0856934z"/></g></svg>
+    <svg
+      className="inline fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100"
+      height="100"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 125"
+      style={{ enableBackground: 'new 0 0 100 100' }}
+      xmlSpace="preserve"
+    >
+      <g>
+        <path d="M35.6830368,38.7263184c2.7299805,0,4.9511719-2.2211914,4.9511719-4.9511719s-2.2211914-4.9511719-4.9511719-4.9511719   c-2.7304688,0-4.9516602,2.2211914-4.9516602,4.9511719S32.9525681,38.7263184,35.6830368,38.7263184z M35.6830368,30.8239746   c1.6274414,0,2.9511719,1.3237305,2.9511719,2.9511719s-1.3237305,2.9511719-2.9511719,2.9511719   s-2.9516602-1.3237305-2.9516602-2.9511719S34.0555954,30.8239746,35.6830368,30.8239746z" />
+        <path d="M43.4540329,27.4133301c2.1630859,0,3.9228516-1.7597656,3.9228516-3.9228516s-1.7597656-3.9228516-3.9228516-3.9228516   c-2.1625977,0-3.9223633,1.7597656-3.9223633,3.9228516S41.2914352,27.4133301,43.4540329,27.4133301z M43.4540329,21.567627   c1.0600586,0,1.9228516,0.862793,1.9228516,1.9228516s-0.862793,1.9228516-1.9228516,1.9228516   s-1.9223633-0.862793-1.9223633-1.9228516S42.3939743,21.567627,43.4540329,21.567627z" />
+        <path d="M80.2762985,41.4973145c3.6635742,0,6.6445313-2.980957,6.6445313-6.6445313s-2.980957-6.6445313-6.6445313-6.6445313   c-3.6640625,0-6.6450195,2.980957-6.6450195,6.6445313S76.612236,41.4973145,80.2762985,41.4973145z M80.2762985,30.208252   c2.5610352,0,4.6445313,2.0834961,4.6445313,4.6445313s-2.0834961,4.6445313-4.6445313,4.6445313   s-4.6450195-2.0834961-4.6450195-4.6445313S77.7152634,30.208252,80.2762985,30.208252z" />
+        <path d="M86.4340134,28.1555176c1.9663086,0,3.565918-1.5996094,3.565918-3.565918s-1.5996094-3.565918-3.565918-3.565918   c-1.9658203,0-3.5654297,1.5996094-3.5654297,3.565918S84.4681931,28.1555176,86.4340134,28.1555176z M86.4340134,23.0236816   c0.8632813,0,1.565918,0.7026367,1.565918,1.565918s-0.7026367,1.565918-1.565918,1.565918   s-1.5654297-0.7026367-1.5654297-1.565918S85.5707321,23.0236816,86.4340134,23.0236816z" />
+        <path d="M79.9183884,48.1384277l-0.5896606,0.1737061c0.1333618-0.4435425,0.2112427-0.9072266,0.2112427-1.3841553   c0-0.4707031-0.0678711-0.9375-0.2045898-1.3950195c-0.78125-2.5327148-3.4887695-3.9741211-6.0366211-3.2119141   l-1.7001953,0.5170898c-0.3798828,0.1108398-0.7299805,0.1855469-1.0664063,0.2265625   c-0.003479,0.0004272-0.006897,0.000061-0.010376,0.0004883c-0.0266113,0.0028076-0.0534058-0.0014648-0.0794678,0.00354   c-0.6416626,0.0675659-1.277771,0.0505981-1.8896484-0.0645752l-4.8505859-0.8999023   c-3.8491211-0.7124023-7.8662109-0.4970703-11.6201172,0.6259766l-11.3138428,3.4025879   c-0.0564575-0.0429077-0.1116943-0.0877075-0.1778564-0.1184082l-13.7036133-6.3583984   c-0.230957-0.1069336-0.4951172-0.121582-0.7353516-0.0419922l-8.2226563,2.7250977   c-0.309082,0.1025391-0.5488281,0.3486328-0.6425781,0.6601563c-0.0942383,0.3110352-0.03125,0.6489258,0.1694336,0.9052734   l5.8516235,7.4795532l-2.1152954,0.6361694c-0.2539063,0.0761719-0.4672852,0.2504883-0.5927734,0.4838867   c-0.1254883,0.2338867-0.1533203,0.5078125-0.0766602,0.7617188l0.3309326,1.0892944   c-0.2720337,0.0733643-0.5426636,0.1504517-0.8016357,0.250061c-4.4667969,1.7197266-6.3505859,7.1894531-6.4287109,7.4213867   c-0.1542969,0.4580078,0.0415039,0.9609375,0.4648438,1.1943359c0.1640625,0.0908203,3.1762695,1.7246094,6.574707,1.7246094   c1.0532227,0,2.144043-0.1572266,3.1977539-0.5654297c0.0115356-0.0044556,0.022644-0.010437,0.0341797-0.0149536   l0.0750732,0.2472534l-1.4403076,0.4239502c-0.2548828,0.0751953-0.4692383,0.2485352-0.5961914,0.4819336   s-0.1557617,0.5073242-0.0800781,0.762207l0.2781982,0.9320679c-1.5239868-0.0391846-2.9415283,0.1781616-4.2181396,0.6724243   c-5.4560547,2.1005859-7.7651367,8.8061523-7.8608398,9.090332c-0.1176758,0.3505859-0.0327148,0.7373047,0.2211914,1.0058594   c0.2539063,0.269043,0.6376953,0.3745117,0.9916992,0.2773438c1.5864258-0.4365234,3.1904297-0.6772461,4.7919922-0.7211914   l-1.0683594,1.046875c-0.269043,0.2631836-0.3671875,0.6552734-0.2543945,1.0141602s0.4174805,0.6240234,0.7880859,0.6865234   c0.0708008,0.0117188,0.9082031,0.1474609,2.121582,0.1474609c1.3310547,0,3.1152344-0.1635742,4.8369141-0.8339844   c0.9935913-0.385376,1.942627-0.9547729,2.8378296-1.6859131l0.4258423,1.4300537   c0.1289063,0.434082,0.5268555,0.715332,0.9580078,0.715332c0.09375,0,0.1889648-0.0136719,0.2832031-0.0415039l3.6088257-1.064209   c0.5294189,0.4693604,1.2138062,0.7355957,1.9185181,0.7355957c0.2729492,0,0.5488281-0.0395508,0.8183594-0.1206055   l2.612793-0.7680664c0.6903687-0.1968994,1.2542114-0.6436157,1.6234131-1.2183228   c0.3770752,0.1716309,0.7831421,0.2798462,1.2032471,0.2798462c0.2666016,0,0.5361328-0.0366211,0.8007813-0.1132813   l2.6342773-0.7744141c0.6880493-0.2131348,1.241272-0.6553345,1.6037598-1.2210083   c0.3721924,0.1687622,0.7717285,0.2756958,1.1843262,0.2756958c0.2724609,0,0.5478516-0.0395508,0.8178711-0.1206055   l2.612793-0.7675781c0.980957-0.2804565,1.713623-1.0597534,1.9748535-2.0108032l33.9655762-10.0023804   c3.3706055-1.003418,5.6347656-4.0170898,5.6347656-7.4985352c0-0.7524414-0.1083984-1.4975586-0.3222656-2.2167969   C88.4432907,49.2814941,84.0643845,46.9157715,79.9183884,48.1384277z M26.4042282,41.6369629l10.9301758,5.0717773   l-12.3256836,3.6044922l-5.1030273-6.5224609L26.4042282,41.6369629z M63.3373337,44.0710449l2.6757202,0.4962769   l-6.4960327,2.1526489c-0.3745117,0.121582-0.7783203-0.0761719-0.9013672-0.4448242l-0.8479614-2.5335693   C59.6291428,43.6253662,61.5039597,43.730957,63.3373337,44.0710449z M52.6566696,44.645752   c1.0076294-0.3015137,2.0372925-0.5230713,3.0765381-0.6818237l0.9859619,2.9459839   c0.3779297,1.1303711,1.4384766,1.847168,2.5737305,1.8466797c0.2832031,0,0.5708008-0.0444336,0.8535156-0.1381836   l10.8579102-3.5981445c0.0090942-0.0029907,0.0158081-0.0096436,0.0247192-0.0128784   c0.3674316-0.0574341,0.7401123-0.1351929,1.1417847-0.2532349l1.7055664-0.5185547   c1.4975586-0.4467773,3.0883789,0.3989258,3.5454102,1.878418c0.078125,0.2631836,0.1181641,0.5371094,0.1181641,0.8139648   c0,0.8886719-0.4160156,1.7143555-1.1201172,2.2368164l-28.8650513,8.5059814l-0.8562622,0.2522583   c-0.2514038-0.196106-0.5341187-0.3519897-0.8377686-0.4598999c-0.0093384-0.0098267-0.0202637-0.0175781-0.0297241-0.0272827   c-0.038208-0.0392456-0.079895-0.0735474-0.1200562-0.1102905c-0.0634155-0.0580444-0.1269531-0.1153564-0.1948242-0.1671143   c-0.0471191-0.0359497-0.0963745-0.067749-0.1453857-0.1005859c-0.0665283-0.0444946-0.1335449-0.0876465-0.2033081-0.1263428   c-0.0535278-0.0297241-0.1080322-0.0564575-0.163269-0.0827026c-0.0698853-0.0332031-0.1405029-0.0636597-0.2127686-0.0911255   c-0.0580444-0.0220947-0.1160889-0.0426025-0.1754761-0.0609131c-0.0736694-0.0227051-0.1481323-0.0411987-0.2234497-0.0580444   c-0.0602417-0.0134888-0.1199341-0.0269775-0.1810303-0.0365601c-0.0789795-0.0123901-0.1585693-0.0187988-0.2385254-0.0245972   c-0.0588379-0.0043335-0.1170044-0.0105591-0.1762085-0.0112305c-0.0892334-0.0009766-0.1785889,0.0061035-0.2682495,0.0134888   c-0.0505371,0.0042114-0.1008911,0.0043335-0.1514893,0.0112305c-0.1401367,0.019043-0.2800293,0.0469971-0.4185791,0.0874023   l-2.6254883,0.7714844c-0.1715088,0.0514526-0.335022,0.1169434-0.4894409,0.1948242   c-0.1483154,0.0748291-0.2871094,0.1623535-0.4178467,0.258667c-0.0053711,0.0039673-0.0119019,0.0066528-0.0172729,0.0106812   c-0.1115723,0.083374-0.2116089,0.1785278-0.3088379,0.2757568c-0.020752,0.020752-0.0458374,0.0375366-0.0658569,0.0588379   c-0.0830688,0.0883789-0.1534424,0.1865234-0.2243042,0.2841187c-0.0264282,0.036377-0.0588379,0.0684204-0.0834961,0.105957   c-0.0002441,0.0003662-0.0006104,0.0007324-0.0008545,0.0010986c-0.008728-0.0039673-0.0183105-0.0056763-0.0270996-0.0095215   c-0.0830688-0.0366821-0.1703491-0.0613403-0.2565308-0.0900269c-0.0712891-0.0236816-0.1404419-0.0530396-0.213501-0.0710449   c-0.0961914-0.0238037-0.1952515-0.0338135-0.2938232-0.0474854c-0.0670166-0.0093384-0.1325073-0.0254517-0.2003174-0.0299683   c-0.1109619-0.0073853-0.2233276,0.0008545-0.3355103,0.0066528c-0.0574341,0.0029907-0.1143188-0.0018921-0.171875,0.0046387   c-0.1697998,0.0193481-0.3398438,0.0536499-0.5081787,0.1049194l-2.6225586,0.7709961   c-0.1702271,0.0504761-0.3327026,0.1159668-0.4865723,0.194458c-0.0361938,0.0184937-0.0670166,0.0443115-0.1022339,0.064209   c-0.114624,0.0647583-0.2285767,0.1306152-0.3320923,0.2097778c-0.0396729,0.0302734-0.0722656,0.0681152-0.1102295,0.1004028   c-0.0912476,0.0775757-0.1833496,0.1543579-0.263916,0.2424927c-0.0459595,0.0502319-0.0822754,0.1082764-0.1245728,0.1616211   c-0.0603638,0.0762329-0.1253662,0.1488647-0.1779175,0.230957c-0.4283447-0.1953125-0.90625-0.2789307-1.394104-0.2468872   c-0.0344849,0.0022583-0.0682373-0.0021362-0.1028442,0.0013428c-0.1741333,0.0176392-0.3493042,0.0509033-0.5236816,0.100708   l-2.6259766,0.7719727c-0.1636353,0.0493164-0.3181763,0.1143799-0.4664307,0.1885986   c-0.0487671,0.0244141-0.0928955,0.0542603-0.1398315,0.0811157c-0.0963745,0.0551758-0.1904907,0.1124878-0.2788086,0.1773682   c-0.0499268,0.0366821-0.0962524,0.0762939-0.1435547,0.1159058c-0.0778809,0.0652466-0.1521606,0.1329956-0.2223511,0.2055054   c-0.0435181,0.0449219-0.0854492,0.09021-0.1258545,0.1376343c-0.0662231,0.0778198-0.1264648,0.1592407-0.18396,0.2432251   c-0.03302,0.0482788-0.0672607,0.0950928-0.09729,0.1452026c-0.0593262,0.098999-0.1095581,0.2024536-0.1566162,0.3079224   c-0.0180054,0.0402222-0.0400391,0.078186-0.0561523,0.1193237c-0.0580444,0.1479492-0.1044922,0.300354-0.137207,0.4569702   c-0.007019,0.0336914-0.0078735,0.0687256-0.0136719,0.1027222c-0.0180664,0.1057129-0.0368042,0.2113647-0.0427246,0.3195801   l-0.2138062-0.7027588c0.012085-0.1270142,0.0072021-0.2562256-0.0317993-0.3841553l-1.1140137-3.6674194l-0.322998-1.0791626   c-0.0026855-0.0089111-0.0092773-0.015564-0.012207-0.024353l-0.9248047-3.0444946   c-0.0401001-0.1308594-0.1096802-0.2437134-0.1931763-0.3440552l-0.2487183-0.8175659L52.6566696,44.645752z    M22.3425827,59.2571411l0.0478516,0.1574097c-0.1259155,0.0722656-0.2521362,0.1400757-0.3763428,0.1901855   c-0.253418,0.0957031-0.5390625,0.1601563-0.8525391,0.1923828c0.2495117-0.1816406,0.5009766-0.3227539,0.7504883-0.4189453   C22.0441818,59.3267212,22.1913376,59.2897949,22.3425827,59.2571411z M23.1390915,62.5144043   c-2.6728516,1.0361328-5.8369141-0.0449219-7.2880859-0.668457c0.6430664-1.4326172,2.2358398-4.3408203,4.9189453-5.3740234   c0.213562-0.0823975,0.4368286-0.1488037,0.6634521-0.2074585l0.3309937,1.0894775   c-0.1945801,0.0488892-0.3952637,0.0895996-0.5745239,0.1589966c-1.090332,0.421875-2.1020508,1.2758789-3.0068359,2.5380859   c-0.1958008,0.2734375-0.2412109,0.6269531-0.1206055,0.940918s0.3911133,0.5463867,0.7197266,0.6186523   c0.6391602,0.1396484,1.2744141,0.2109375,1.8881836,0.2109375c0.7543945,0,1.4448242-0.1166992,2.0698242-0.3535156   c0.0811157-0.0325317,0.1576538-0.0828857,0.2376709-0.1199341l0.3328857,1.0957642   C23.2537155,62.4679565,23.1967697,62.4923706,23.1390915,62.5144043z M23.5314255,72.725647l0.0012207,0.0040894   c-0.5898438,0.7407227-1.1948242,1.3237305-1.8076172,1.7416992c-0.5957031-0.9111328-1.5537109-1.5366211-2.6308594-1.7211914   c0.199707-0.1118164,0.4003906-0.2060547,0.6015625-0.2827148c1.0146484-0.387207,2.3012695-0.4477539,3.6938477-0.2143555   L23.5314255,72.725647z M21.756279,77.7346191c-1.2910156,0.5024414-2.6557617,0.6630859-3.7475586,0.6904297l1.1201172-1.0976563   c0.2788086-0.2729492,0.3730469-0.6831055,0.2421875-1.050293s-0.4633789-0.625-0.8515625-0.6601563   c-0.6420898-0.0581055-1.2861328-0.0869141-1.9301758-0.0869141c-1.2963867,0-2.5947266,0.1171875-3.8862305,0.3515625   c0.9746094-1.9414063,2.9125977-4.96875,5.9301758-6.1308594c1.1391602-0.440918,2.434082-0.6181641,3.8476563-0.5322266   l0.2842407,0.9488525c-1.3863525-0.1206055-2.680603,0.0112915-3.7837524,0.4320068   c-1.2207031,0.4672852-2.3857422,1.3544922-3.4614258,2.6357422c-0.2607422,0.3105469-0.3085938,0.7480469-0.1201172,1.1069336   c0.1879883,0.3588867,0.5737305,0.5717773,0.9785156,0.5317383l1.8959961-0.1762695   c0.0302734-0.003418,0.0610352-0.0043945,0.0913086-0.0043945c0.784668,0.0019531,1.4975586,0.4169922,1.831543,1.1416016   c0.0463867,0.0922852,0.0771484,0.1743164,0.097168,0.2583008c0.0678711,0.2875977,0.2592773,0.5307617,0.5229492,0.6635742   c0.1416016,0.0712891,0.2958984,0.1069336,0.4501953,0.1069336c0.1342773,0,0.2685547-0.0268555,0.3945313-0.0810547   c0.8795776-0.3776855,1.7250366-1.0009155,2.534668-1.8171997l0.3041992,1.0198364   C23.6381149,76.7746582,22.7172165,77.3615723,21.756279,77.7346191z M25.7430954,72.3293457   c-0.0053711-0.0239258-0.0117188-0.0478516-0.0185547-0.0712891l-1.6694336-5.5859375l0.6426392-0.1890869   c0.1815186,0.1630859,0.4124756,0.2652588,0.6615601,0.2652588c0.0947266,0,0.190918-0.0136719,0.2866211-0.0424805   l0.7924194-0.2364502l2.1046753,7.0847168l1.0675659,3.6032104l-2.2332153,0.6588745L25.7430954,72.3293457z    M35.3881149,76.8781738l-2.6269531,0.7719727c-0.3734741,0.1134644-0.7839355-0.0386963-0.998291-0.3710938   c-0.0044556-0.0070801-0.0038452-0.0159912-0.0085449-0.0229492c-0.0307617-0.0463867-0.0595703-0.1108398-0.0820313-0.1914063   l-1.4168701-4.7697754l-2.2486572-7.5876465l-0.2172852-0.7382813c-0.0527344-0.4150391,0.2158203-0.8164063,0.6328125-0.9418945   l2.6118164-0.7680664c0.4311523-0.1245117,0.8818359,0.0771484,1.0400391,0.4121094l3.5966187,12.0499268l0.3242798,1.0936279   c0.0015259,0.0049438,0.0045166,0.0084229,0.0061035,0.0133667l0.0114746,0.0383911   c0.0001221,0.0003052,0.0003662,0.001709,0.0004883,0.0020752c0.0063477,0.031189,0.0131836,0.0750122,0.0131836,0.145874   c0,0.0057373,0.0036621,0.0105591,0.0037842,0.0162964C36.0345993,76.4204712,35.773613,76.7678833,35.3881149,76.8781738z    M41.6283493,75.0583496l-2.6157227,0.7685547c-0.3842773,0.1107788-0.7797852-0.0397949-1.0014038-0.3787842   c-0.0003052-0.0004883-0.0002441-0.0010986-0.0005493-0.0015869c-0.0240479-0.0377808-0.0378418-0.0718384-0.053833-0.1066895   c-0.0119019-0.026001-0.0247803-0.0489502-0.0344238-0.0758057c-0.0065308-0.0221558-0.0131226-0.0442505-0.0206299-0.06604   c-0.001709-0.005127-0.0059204-0.0084839-0.0077515-0.0136108l-3.7139282-12.5259399l-0.1210938-0.4052734   c-0.0109863-0.0336914-0.0181274-0.0585327-0.0230103-0.0740356c-0.0022583-0.0072632-0.005188-0.0172729-0.0057983-0.0172729   c-0.0004883,0-0.0004883,0.0014648-0.0004883,0.0048828c-0.0610352-0.4277344,0.2119141-0.8452148,0.6318359-0.9697266   l2.6289063-0.7724609c0.40625-0.125,0.8422852,0.0654297,1.034668,0.4501953   c0.0029297,0.0058594,0.0058594,0.0112305,0.0087891,0.0170898c0.0043945,0.0102539,0.0087891,0.0205078,0.0131836,0.0302734   c0.015625,0.034668,0.0341797,0.0708008,0.0463867,0.1069336l3.8374023,12.9326172   c0.0012207,0.0040894,0.0032349,0.0079956,0.0044556,0.012085l0.0062866,0.0211182   c0.0129395,0.0390625,0.0126953,0.0739746,0.0166626,0.107666c0.0024414,0.0253906,0.0077515,0.0415649,0.0077515,0.0773926   c0,0.0050049,0.0032349,0.0092163,0.0032959,0.0142212C42.2725143,74.5970459,42.0161667,74.9381714,41.6283493,75.0583496z    M48.509697,72.3605957c0.0048828,0.3955078-0.2558594,0.7475586-0.6416016,0.8579102l-2.6264648,0.7714844   c-0.3828125,0.1132813-0.7822266-0.0351563-0.9838867-0.3564453c-0.0009155-0.0015259-0.0010376-0.0028076-0.0019531-0.0043335   c-0.003479-0.0057983-0.0027466-0.0128784-0.0063477-0.0186157c-0.0113525-0.0181274-0.015686-0.0336304-0.0253296-0.0511475   c-0.026001-0.0504761-0.0529175-0.1010132-0.0684204-0.1506348c-0.0031128-0.0101929-0.0059204-0.0204468-0.0092773-0.0306396   c-0.0010376-0.0032349-0.0037231-0.0053711-0.0047607-0.008606l-3.7252197-12.5631714l-0.1323242-0.456543   c-0.0039063-0.0375977-0.0102539-0.074707-0.0185547-0.1113281c-0.0249023-0.3901367,0.2368164-0.7514648,0.6362305-0.8710938   l2.6176758-0.7695313c0.3603516-0.1015625,0.7441406,0.0283203,0.9614258,0.3271484   c0.0151367,0.0214844,0.0566406,0.078125,0.0737305,0.0981445c0.0341797,0.0678711,0.0683594,0.1425781,0.0791016,0.1674805   l3.8598633,13.0180664c0.0068359,0.0180664,0.0161133,0.0527344,0.0161133,0.1391602   C48.509697,72.3522949,48.509697,72.3562012,48.509697,72.3605957z M83.7972946,61.208252L50.2455368,71.088623   L46.943779,59.935791l33.5390625-9.8789063c3.0947266-0.909668,6.3588867,0.8496094,7.2783203,3.9257813   c0.1582031,0.5327148,0.2387695,1.0859375,0.2387695,1.6450195C87.9999313,58.2175293,86.3099899,60.4602051,83.7972946,61.208252z   " />
+        <path d="M82.1522751,50.5427246c-0.4902344,0-0.9799805,0.0712891-1.456543,0.2124023   c-0.5292969,0.1572266-0.831543,0.7133789-0.6748047,1.2431641c0.1572266,0.5292969,0.7143555,0.8310547,1.2431641,0.6748047   c1.6289063-0.4804688,3.3920898,0.496582,3.8676758,2.0874023c0.1293945,0.4335938,0.5273438,0.7138672,0.9575195,0.7138672   c0.0952148,0,0.1914063-0.0136719,0.2871094-0.0424805c0.5288086-0.1582031,0.8295898-0.715332,0.6713867-1.2446289   C86.4061813,52.0412598,84.3929977,50.5427246,82.1522751,50.5427246z" />
+        <path d="M78.2572556,51.4729004l-2.8793945,0.847168c-0.5297852,0.15625-0.8330078,0.7119141-0.6772461,1.2416992   c0.128418,0.4355469,0.5268555,0.7182617,0.9589844,0.7182617c0.09375,0,0.1884766-0.0136719,0.2827148-0.0410156   l2.8793945-0.847168c0.5297852-0.15625,0.8330078-0.7119141,0.6772461-1.2416992   C79.3427048,51.6203613,78.784111,51.3190918,78.2572556,51.4729004z" />
+        <path d="M72.7758102,53.0856934l-23.9584961,7.0512695c-0.5297852,0.15625-0.8330078,0.7119141-0.6772461,1.2416992   c0.128418,0.4355469,0.5268555,0.7182617,0.9589844,0.7182617c0.09375,0,0.1884766-0.0136719,0.2827148-0.0410156   l23.9584961-7.0512695c0.5297852-0.15625,0.8330078-0.7119141,0.6772461-1.2416992   C73.8607712,53.232666,73.303154,52.932373,72.7758102,53.0856934z" />
+      </g>
+    </svg>
   )
 }
diff --git a/assets/js/dashboard/stats/modals/sources.js b/assets/js/dashboard/stats/modals/sources.js
index d78cec9382..ea0d9313eb 100644
--- a/assets/js/dashboard/stats/modals/sources.js
+++ b/assets/js/dashboard/stats/modals/sources.js
@@ -1,17 +1,26 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react'
 import Modal from './modal'
-import { hasConversionGoalFilter, isRealTimeDashboard } from "../../util/filters";
-import BreakdownModal from "./breakdown-modal";
-import * as metrics from "../reports/metrics";
-import * as url from "../../util/url";
-import { addFilter } from "../../query";
-import { useQueryContext } from "../../query-context";
-import { useSiteContext } from "../../site-context";
-import { SortDirection } from "../../hooks/use-order-by";
+import {
+  hasConversionGoalFilter,
+  isRealTimeDashboard
+} from '../../util/filters'
+import BreakdownModal from './breakdown-modal'
+import * as metrics from '../reports/metrics'
+import * as url from '../../util/url'
+import { addFilter } from '../../query'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { SortDirection } from '../../hooks/use-order-by'
 
 const VIEWS = {
   sources: {
-    info: { title: 'Top Sources', dimension: 'source', endpoint: '/sources', dimensionLabel: 'Source', defaultOrder: ["visitors", SortDirection.desc] },
+    info: {
+      title: 'Top Sources',
+      dimension: 'source',
+      endpoint: '/sources',
+      dimensionLabel: 'Source',
+      defaultOrder: ['visitors', SortDirection.desc]
+    },
     renderIcon: (listItem) => {
       return (
         <img
@@ -23,60 +32,116 @@ const VIEWS = {
     }
   },
   channels: {
-    info: { title: 'Top Acquisition Channels', dimension: 'channel', endpoint: '/channels', dimensionLabel: 'Channel', defaultOrder: ["visitors", SortDirection.desc] }
+    info: {
+      title: 'Top Acquisition Channels',
+      dimension: 'channel',
+      endpoint: '/channels',
+      dimensionLabel: 'Channel',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
   },
   utm_mediums: {
-    info: { title: 'Top UTM Mediums', dimension: 'utm_medium', endpoint: '/utm_mediums', dimensionLabel: 'UTM Medium', defaultOrder: ["visitors", SortDirection.desc] }
+    info: {
+      title: 'Top UTM Mediums',
+      dimension: 'utm_medium',
+      endpoint: '/utm_mediums',
+      dimensionLabel: 'UTM Medium',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
   },
   utm_sources: {
-    info: { title: 'Top UTM Sources', dimension: 'utm_source', endpoint: '/utm_sources', dimensionLabel: 'UTM Source', defaultOrder: ["visitors", SortDirection.desc] }
+    info: {
+      title: 'Top UTM Sources',
+      dimension: 'utm_source',
+      endpoint: '/utm_sources',
+      dimensionLabel: 'UTM Source',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
   },
   utm_campaigns: {
-    info: { title: 'Top UTM Campaigns', dimension: 'utm_campaign', endpoint: '/utm_campaigns', dimensionLabel: 'UTM Campaign', defaultOrder: ["visitors", SortDirection.desc] }
+    info: {
+      title: 'Top UTM Campaigns',
+      dimension: 'utm_campaign',
+      endpoint: '/utm_campaigns',
+      dimensionLabel: 'UTM Campaign',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
   },
   utm_contents: {
-    info: { title: 'Top UTM Contents', dimension: 'utm_content', endpoint: '/utm_contents', dimensionLabel: 'UTM Content', defaultOrder: ["visitors", SortDirection.desc] }
+    info: {
+      title: 'Top UTM Contents',
+      dimension: 'utm_content',
+      endpoint: '/utm_contents',
+      dimensionLabel: 'UTM Content',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
   },
   utm_terms: {
-    info: { title: 'Top UTM Terms', dimension: 'utm_term', endpoint: '/utm_terms', dimensionLabel: 'UTM Term', defaultOrder: ["visitors", SortDirection.desc] }
-  },
+    info: {
+      title: 'Top UTM Terms',
+      dimension: 'utm_term',
+      endpoint: '/utm_terms',
+      dimensionLabel: 'UTM Term',
+      defaultOrder: ['visitors', SortDirection.desc]
+    }
+  }
 }
 
 function SourcesModal({ currentView }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   let reportInfo = VIEWS[currentView].info
-  reportInfo = {...reportInfo, endpoint: url.apiPath(site, reportInfo.endpoint)}
+  reportInfo = {
+    ...reportInfo,
+    endpoint: url.apiPath(site, reportInfo.endpoint)
+  }
 
-  const getFilterInfo = useCallback((listItem) => {
-    return {
-      prefix: reportInfo.dimension,
-      filter: ["is", reportInfo.dimension, [listItem.name]]
-    }
-  }, [reportInfo.dimension])
+  const getFilterInfo = useCallback(
+    (listItem) => {
+      return {
+        prefix: reportInfo.dimension,
+        filter: ['is', reportInfo.dimension, [listItem.name]]
+      }
+    },
+    [reportInfo.dimension]
+  )
 
-  const addSearchFilter = useCallback((query, searchString) => {
-    return addFilter(query, ['contains', reportInfo.dimension, [searchString], { case_sensitive: false }])
-  }, [reportInfo.dimension])
+  const addSearchFilter = useCallback(
+    (query, searchString) => {
+      return addFilter(query, [
+        'contains',
+        reportInfo.dimension,
+        [searchString],
+        { case_sensitive: false }
+      ])
+    },
+    [reportInfo.dimension]
+  )
 
   function chooseMetrics() {
     if (hasConversionGoalFilter(query)) {
       return [
         metrics.createTotalVisitors(),
-        metrics.createVisitors({ renderLabel: (_query) => 'Conversions', width: 'w-28' }),
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Conversions',
+          width: 'w-28'
+        }),
         metrics.createConversionRate()
       ]
     }
 
     if (isRealTimeDashboard(query)) {
       return [
-        metrics.createVisitors({ renderLabel: (_query) => 'Current visitors', width: 'w-36' })
+        metrics.createVisitors({
+          renderLabel: (_query) => 'Current visitors',
+          width: 'w-36'
+        })
       ]
     }
 
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Visitors" }),
+      metrics.createVisitors({ renderLabel: (_query) => 'Visitors' }),
       metrics.createBounceRate(),
       metrics.createVisitDuration()
     ]
diff --git a/assets/js/dashboard/stats/more-link.js b/assets/js/dashboard/stats/more-link.js
index 9d7da72b0a..c5495aba25 100644
--- a/assets/js/dashboard/stats/more-link.js
+++ b/assets/js/dashboard/stats/more-link.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { AppNavigationLink } from '../navigation/use-app-navigate';
+import React from 'react'
+import { AppNavigationLink } from '../navigation/use-app-navigate'
 
 function detailsIcon() {
   return (
diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
index 6d50cdb77a..ba5a51951c 100644
--- a/assets/js/dashboard/stats/pages/index.js
+++ b/assets/js/dashboard/stats/pages/index.js
@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
 
-import * as storage from '../../util/storage';
-import * as url from '../../util/url';
-import * as api from '../../api';
-import ListReport from './../reports/list';
-import * as metrics from './../reports/metrics';
-import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
-import { hasConversionGoalFilter } from '../../util/filters';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
-import { entryPagesRoute, exitPagesRoute, topPagesRoute } from '../../router';
+import * as storage from '../../util/storage'
+import * as url from '../../util/url'
+import * as api from '../../api'
+import ListReport from './../reports/list'
+import * as metrics from './../reports/metrics'
+import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
+import { hasConversionGoalFilter } from '../../util/filters'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { entryPagesRoute, exitPagesRoute, topPagesRoute } from '../../router'
 
 function EntryPages({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/entry-pages'), query, { limit: 9 })
   }
@@ -25,15 +25,19 @@ function EntryPages({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'entry_page',
-      filter: ["is", "entry_page", [listItem['name']]]
+      filter: ['is', 'entry_page', [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ defaultLabel: 'Unique Entrances', width: 'w-36', meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      metrics.createVisitors({
+        defaultLabel: 'Unique Entrances',
+        width: 'w-36',
+        meta: { plot: true }
+      }),
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -43,7 +47,10 @@ function EntryPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Entry page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: entryPagesRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: entryPagesRoute.path,
+        search: (search) => search
+      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50"
     />
@@ -51,8 +58,8 @@ function EntryPages({ afterFetchData }) {
 }
 
 function ExitPages({ afterFetchData }) {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/exit-pages'), query, { limit: 9 })
   }
@@ -64,15 +71,19 @@ function ExitPages({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'exit_page',
-      filter: ["is", "exit_page", [listItem['name']]]
+      filter: ['is', 'exit_page', [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ defaultLabel: 'Unique Exits', width: 'w-36', meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      metrics.createVisitors({
+        defaultLabel: 'Unique Exits',
+        width: 'w-36',
+        meta: { plot: true }
+      }),
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -82,7 +93,10 @@ function ExitPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Exit page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: exitPagesRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: exitPagesRoute.path,
+        search: (search) => search
+      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50"
     />
@@ -90,8 +104,8 @@ function ExitPages({ afterFetchData }) {
 }
 
 function TopPages({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/pages'), query, { limit: 9 })
   }
@@ -103,15 +117,15 @@ function TopPages({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'page',
-      filter: ["is", "page", [listItem['name']]]
+      filter: ['is', 'page', [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -121,7 +135,10 @@ function TopPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: topPagesRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: topPagesRoute.path,
+        search: (search) => search
+      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50"
     />
@@ -129,14 +146,14 @@ function TopPages({ afterFetchData }) {
 }
 
 const labelFor = {
-  'pages': 'Top Pages',
+  pages: 'Top Pages',
   'entry-pages': 'Entry Pages',
-  'exit-pages': 'Exit Pages',
+  'exit-pages': 'Exit Pages'
 }
 
 export default function Pages() {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   const tabKey = `pageTab__${site.domain}`
   const storedTab = storage.getItem(tabKey)
@@ -158,25 +175,22 @@ export default function Pages() {
 
   function renderContent() {
     switch (mode) {
-      case "entry-pages":
+      case 'entry-pages':
         return <EntryPages afterFetchData={afterFetchData} />
-      case "exit-pages":
+      case 'exit-pages':
         return <ExitPages afterFetchData={afterFetchData} />
-      case "pages":
+      case 'pages':
       default:
         return <TopPages afterFetchData={afterFetchData} />
     }
   }
 
-
   function renderPill(name, pill) {
     const isActive = mode === pill
 
     if (isActive) {
       return (
-        <button
-          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading"
-        >
+        <button className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading">
           {name}
         </button>
       )
@@ -200,7 +214,10 @@ export default function Pages() {
           <h3 className="font-bold dark:text-gray-100">
             {labelFor[mode] || 'Page Visits'}
           </h3>
-          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning
+            loading={loading}
+            skipImportedReason={skipImportedReason}
+          />
         </div>
         <div className="flex font-medium text-xs text-gray-500 dark:text-gray-400 space-x-2">
           {renderPill('Top Pages', 'pages')}
diff --git a/assets/js/dashboard/stats/reports/change-arrow.test.tsx b/assets/js/dashboard/stats/reports/change-arrow.test.tsx
index eae2abeed2..c4429e78a3 100644
--- a/assets/js/dashboard/stats/reports/change-arrow.test.tsx
+++ b/assets/js/dashboard/stats/reports/change-arrow.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { ChangeArrow } from './change-arrow'
diff --git a/assets/js/dashboard/stats/reports/change-arrow.tsx b/assets/js/dashboard/stats/reports/change-arrow.tsx
index 959a5f33ff..3226790dd1 100644
--- a/assets/js/dashboard/stats/reports/change-arrow.tsx
+++ b/assets/js/dashboard/stats/reports/change-arrow.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { Metric } from '../../../types/query-api'
 import { numberShortFormatter } from '../../util/number-formatter'
diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx
index c1367379df..b440403726 100644
--- a/assets/js/dashboard/stats/reports/list.tsx
+++ b/assets/js/dashboard/stats/reports/list.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useState, useEffect, useCallback, ReactNode } from 'react'
 import { AppNavigationLinkProps } from '../../navigation/use-app-navigate'
 import FlipMove from 'react-flip-move'
diff --git a/assets/js/dashboard/stats/reports/metric-formatter.ts b/assets/js/dashboard/stats/reports/metric-formatter.ts
index 8736caa57d..6367d2b396 100644
--- a/assets/js/dashboard/stats/reports/metric-formatter.ts
+++ b/assets/js/dashboard/stats/reports/metric-formatter.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { Metric } from '../../../types/query-api'
 import { formatMoneyShort, formatMoneyLong } from '../../util/money'
 import {
diff --git a/assets/js/dashboard/stats/reports/metric-value.test.tsx b/assets/js/dashboard/stats/reports/metric-value.test.tsx
index ddd2db3acd..bd78894a95 100644
--- a/assets/js/dashboard/stats/reports/metric-value.test.tsx
+++ b/assets/js/dashboard/stats/reports/metric-value.test.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import MetricValue from './metric-value'
diff --git a/assets/js/dashboard/stats/reports/metric-value.tsx b/assets/js/dashboard/stats/reports/metric-value.tsx
index 40bafade7b..3e3debdfc0 100644
--- a/assets/js/dashboard/stats/reports/metric-value.tsx
+++ b/assets/js/dashboard/stats/reports/metric-value.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useMemo } from 'react'
 import { Metric } from '../../../types/query-api'
 import { Tooltip } from '../../util/tooltip'
diff --git a/assets/js/dashboard/stats/reports/metrics.js b/assets/js/dashboard/stats/reports/metrics.js
index 8ee043a746..473c64c58e 100644
--- a/assets/js/dashboard/stats/reports/metrics.js
+++ b/assets/js/dashboard/stats/reports/metrics.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import React from 'react'
 import MetricValue from './metric-value'
 import { hasConversionGoalFilter } from '../../util/filters'
diff --git a/assets/js/dashboard/stats/sources/index.js b/assets/js/dashboard/stats/sources/index.js
index 12bb54edf1..01aa552e82 100644
--- a/assets/js/dashboard/stats/sources/index.js
+++ b/assets/js/dashboard/stats/sources/index.js
@@ -1,17 +1,23 @@
-import React from 'react';
-import { SearchTerms } from './search-terms';
-import SourceList from './source-list';
-import ReferrerList from './referrer-list';
-import { getFiltersByKeyPrefix, isFilteringOnFixedValue } from '../../util/filters';
+import React from 'react'
+import { SearchTerms } from './search-terms'
+import SourceList from './source-list'
+import ReferrerList from './referrer-list'
+import {
+  getFiltersByKeyPrefix,
+  isFilteringOnFixedValue
+} from '../../util/filters'
 import { useQueryContext } from '../../query-context'
 
 export default function Sources() {
-  const { query } = useQueryContext();
+  const { query } = useQueryContext()
 
   if (isFilteringOnFixedValue(query, 'source', 'Google')) {
     return <SearchTerms />
   } else if (isFilteringOnFixedValue(query, 'source')) {
-    const [[_operation, _filterKey, clauses]] = getFiltersByKeyPrefix(query, "source")
+    const [[_operation, _filterKey, clauses]] = getFiltersByKeyPrefix(
+      query,
+      'source'
+    )
     return <ReferrerList source={clauses[0]} />
   } else {
     return <SourceList />
diff --git a/assets/js/dashboard/stats/sources/referrer-list.js b/assets/js/dashboard/stats/sources/referrer-list.js
index 38f881f4f1..1552016a60 100644
--- a/assets/js/dashboard/stats/sources/referrer-list.js
+++ b/assets/js/dashboard/stats/sources/referrer-list.js
@@ -1,18 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import * as api from '../../api';
-import * as url from '../../util/url';
-import * as metrics from '../reports/metrics';
-import { hasConversionGoalFilter } from "../../util/filters";
-import ListReport from '../reports/list';
-import ImportedQueryUnsupportedWarning from '../../stats/imported-query-unsupported-warning';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
-import { referrersDrilldownRoute } from '../../router';
+import React, { useEffect, useState } from 'react'
+import * as api from '../../api'
+import * as url from '../../util/url'
+import * as metrics from '../reports/metrics'
+import { hasConversionGoalFilter } from '../../util/filters'
+import ListReport from '../reports/list'
+import ImportedQueryUnsupportedWarning from '../../stats/imported-query-unsupported-warning'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import { referrersDrilldownRoute } from '../../router'
 
 const NO_REFERRER = 'Direct / None'
 
 export default function Referrers({ source }) {
-  const { query } = useQueryContext();
+  const { query } = useQueryContext()
   const site = useSiteContext()
   const [skipImportedReason, setSkipImportedReason] = useState(null)
   const [loading, setLoading] = useState(true)
@@ -20,7 +20,11 @@ export default function Referrers({ source }) {
   useEffect(() => setLoading(true), [query])
 
   function fetchReferrers() {
-    return api.get(url.apiPath(site, `/referrers/${encodeURIComponent(source)}`), query, { limit: 9 })
+    return api.get(
+      url.apiPath(site, `/referrers/${encodeURIComponent(source)}`),
+      query,
+      { limit: 9 }
+    )
   }
 
   function afterFetchReferrers(apiResponse) {
@@ -29,16 +33,20 @@ export default function Referrers({ source }) {
   }
 
   function getExternalLinkUrl(referrer) {
-    if (referrer.name === NO_REFERRER) { return null }
+    if (referrer.name === NO_REFERRER) {
+      return null
+    }
     return `https://${referrer.name}`
   }
 
   function getFilterInfo(referrer) {
-    if (referrer.name === NO_REFERRER) { return null }
+    if (referrer.name === NO_REFERRER) {
+      return null
+    }
 
     return {
       prefix: 'referrer',
-      filter: ["is", "referrer", [referrer.name]]
+      filter: ['is', 'referrer', [referrer.name]]
     }
   }
 
@@ -56,15 +64,18 @@ export default function Referrers({ source }) {
   function chooseMetrics() {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
     <div className="flex flex-col flex-grow">
       <div className="flex gap-x-1">
         <h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
-        <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
+        <ImportedQueryUnsupportedWarning
+          loading={loading}
+          skipImportedReason={skipImportedReason}
+        />
       </div>
       <ListReport
         fetchData={fetchReferrers}
@@ -72,7 +83,11 @@ export default function Referrers({ source }) {
         getFilterInfo={getFilterInfo}
         keyLabel="Referrer"
         metrics={chooseMetrics()}
-        detailsLinkProps={{ path: referrersDrilldownRoute.path, params: {referrer: url.maybeEncodeRouteParam(source)}, search: (search) => search }}
+        detailsLinkProps={{
+          path: referrersDrilldownRoute.path,
+          params: { referrer: url.maybeEncodeRouteParam(source) },
+          search: (search) => search
+        }}
         getExternalLinkUrl={getExternalLinkUrl}
         renderIcon={renderIcon}
         color="bg-blue-50"
diff --git a/assets/js/dashboard/stats/sources/search-terms.tsx b/assets/js/dashboard/stats/sources/search-terms.tsx
index 667e713fca..6233362b83 100644
--- a/assets/js/dashboard/stats/sources/search-terms.tsx
+++ b/assets/js/dashboard/stats/sources/search-terms.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { useEffect, useCallback } from 'react'
 import FadeIn from '../../fade-in'
 import Bar from '../bar'
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js
index 97340c2276..be1b6e4d6b 100644
--- a/assets/js/dashboard/stats/sources/source-list.js
+++ b/assets/js/dashboard/stats/sources/source-list.js
@@ -1,32 +1,59 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react'
 
-import * as storage from '../../util/storage';
-import * as url from '../../util/url';
-import * as api from '../../api';
-import usePrevious from '../../hooks/use-previous';
-import ListReport from '../reports/list';
-import * as metrics from '../reports/metrics';
-import { getFiltersByKeyPrefix, hasConversionGoalFilter } from "../../util/filters";
-import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import classNames from 'classnames';
-import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning';
-import { useQueryContext } from '../../query-context';
-import { useSiteContext } from '../../site-context';
-import { sourcesRoute, channelsRoute, utmCampaignsRoute, utmContentsRoute, utmMediumsRoute, utmSourcesRoute, utmTermsRoute } from '../../router';
-import { BlurMenuButtonOnEscape } from '../../keybinding';
+import * as storage from '../../util/storage'
+import * as url from '../../util/url'
+import * as api from '../../api'
+import usePrevious from '../../hooks/use-previous'
+import ListReport from '../reports/list'
+import * as metrics from '../reports/metrics'
+import {
+  getFiltersByKeyPrefix,
+  hasConversionGoalFilter
+} from '../../util/filters'
+import { Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import classNames from 'classnames'
+import ImportedQueryUnsupportedWarning from '../imported-query-unsupported-warning'
+import { useQueryContext } from '../../query-context'
+import { useSiteContext } from '../../site-context'
+import {
+  sourcesRoute,
+  channelsRoute,
+  utmCampaignsRoute,
+  utmContentsRoute,
+  utmMediumsRoute,
+  utmSourcesRoute,
+  utmTermsRoute
+} from '../../router'
+import { BlurMenuButtonOnEscape } from '../../keybinding'
 
 const UTM_TAGS = {
-  utm_medium: { title: 'UTM Mediums', label: 'Medium', endpoint: '/utm_mediums' },
-  utm_source: { title: 'UTM Sources', label: 'Source', endpoint: '/utm_sources' },
-  utm_campaign: { title: 'UTM Campaigns', label: 'Campaign', endpoint: '/utm_campaigns' },
-  utm_content: { title: 'UTM Contents', label: 'Content', endpoint: '/utm_contents' },
-  utm_term: { title: 'UTM Terms', label: 'Term', endpoint: '/utm_terms' },
+  utm_medium: {
+    title: 'UTM Mediums',
+    label: 'Medium',
+    endpoint: '/utm_mediums'
+  },
+  utm_source: {
+    title: 'UTM Sources',
+    label: 'Source',
+    endpoint: '/utm_sources'
+  },
+  utm_campaign: {
+    title: 'UTM Campaigns',
+    label: 'Campaign',
+    endpoint: '/utm_campaigns'
+  },
+  utm_content: {
+    title: 'UTM Contents',
+    label: 'Content',
+    endpoint: '/utm_contents'
+  },
+  utm_term: { title: 'UTM Terms', label: 'Term', endpoint: '/utm_terms' }
 }
 
 function AllSources({ afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   function fetchData() {
     return api.get(url.apiPath(site, '/sources'), query, { limit: 9 })
   }
@@ -34,7 +61,7 @@ function AllSources({ afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'source',
-      filter: ["is", "source", [listItem['name']]]
+      filter: ['is', 'source', [listItem['name']]]
     }
   }
 
@@ -51,8 +78,8 @@ function AllSources({ afterFetchData }) {
   function chooseMetrics() {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -70,8 +97,8 @@ function AllSources({ afterFetchData }) {
 }
 
 function Channels({ onClick, afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
 
   function fetchData() {
     return api.get(url.apiPath(site, '/channels'), query, { limit: 9 })
@@ -80,15 +107,15 @@ function Channels({ onClick, afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: 'channel',
-      filter: ["is", "channel", [listItem['name']]]
+      filter: ['is', 'channel', [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -99,15 +126,18 @@ function Channels({ onClick, afterFetchData }) {
       keyLabel="Channel"
       onClick={onClick}
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: channelsRoute.path, search: (search) => search }}
+      detailsLinkProps={{
+        path: channelsRoute.path,
+        search: (search) => search
+      }}
       color="bg-blue-50"
     />
   )
 }
 
 function UTMSources({ tab, afterFetchData }) {
-  const { query } = useQueryContext();
-  const site = useSiteContext();
+  const { query } = useQueryContext()
+  const site = useSiteContext()
   const utmTag = UTM_TAGS[tab]
 
   const route = {
@@ -115,8 +145,8 @@ function UTMSources({ tab, afterFetchData }) {
     utm_source: utmSourcesRoute,
     utm_campaign: utmCampaignsRoute,
     utm_content: utmContentsRoute,
-    utm_term: utmTermsRoute,
-    }[tab]
+    utm_term: utmTermsRoute
+  }[tab]
 
   function fetchData() {
     return api.get(url.apiPath(site, utmTag.endpoint), query, { limit: 9 })
@@ -125,15 +155,15 @@ function UTMSources({ tab, afterFetchData }) {
   function getFilterInfo(listItem) {
     return {
       prefix: tab,
-      filter: ["is", tab, [listItem['name']]]
+      filter: ['is', tab, [listItem['name']]]
     }
   }
 
   function chooseMetrics() {
     return [
       metrics.createVisitors({ meta: { plot: true } }),
-      hasConversionGoalFilter(query) && metrics.createConversionRate(),
-    ].filter(metric => !!metric)
+      hasConversionGoalFilter(query) && metrics.createConversionRate()
+    ].filter((metric) => !!metric)
   }
 
   return (
@@ -150,8 +180,8 @@ function UTMSources({ tab, afterFetchData }) {
 }
 
 const labelFor = {
-  'channels': 'Top Channels',
-  'all': 'Top Sources'
+  channels: 'Top Channels',
+  all: 'Top Sources'
 }
 
 for (const [key, utm_tag] of Object.entries(UTM_TAGS)) {
@@ -159,14 +189,14 @@ for (const [key, utm_tag] of Object.entries(UTM_TAGS)) {
 }
 
 export default function SourceList() {
-  const site = useSiteContext();
-  const { query } = useQueryContext();
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   const tabKey = 'sourceTab__' + site.domain
   const storedTab = storage.getItem(tabKey)
   const [currentTab, setCurrentTab] = useState(storedTab || 'all')
   const [loading, setLoading] = useState(true)
   const [skipImportedReason, setSkipImportedReason] = useState(null)
-  const previousQuery = usePrevious(query);
+  const previousQuery = usePrevious(query)
   const dropdownButtonRef = useRef(null)
 
   useEffect(() => setLoading(true), [query, currentTab])
@@ -175,8 +205,10 @@ export default function SourceList() {
     const isRemovingFilter = (filterName) => {
       if (!previousQuery) return false
 
-      return getFiltersByKeyPrefix(previousQuery, filterName).length > 0 &&
+      return (
+        getFiltersByKeyPrefix(previousQuery, filterName).length > 0 &&
         getFiltersByKeyPrefix(query, filterName).length == 0
+      )
     }
 
     if (currentTab == 'all' && isRemovingFilter('channel')) {
@@ -192,22 +224,48 @@ export default function SourceList() {
   }
 
   function renderTabs() {
-    const activeClass = 'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading truncate text-left'
-    const defaultClass = 'hover:text-indigo-600 cursor-pointer truncate text-left'
+    const activeClass =
+      'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading truncate text-left'
+    const defaultClass =
+      'hover:text-indigo-600 cursor-pointer truncate text-left'
     const dropdownOptions = Object.keys(UTM_TAGS)
-    let buttonText = UTM_TAGS[currentTab] ? UTM_TAGS[currentTab].title : 'Campaigns'
+    let buttonText = UTM_TAGS[currentTab]
+      ? UTM_TAGS[currentTab].title
+      : 'Campaigns'
 
     return (
       <div className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
-        <div className={currentTab === 'channels' ? activeClass : defaultClass} onClick={setTab('channels')}>Channels</div>
-        <div className={currentTab === 'all' ? activeClass : defaultClass} onClick={setTab('all')}>Sources</div>
+        <div
+          className={currentTab === 'channels' ? activeClass : defaultClass}
+          onClick={setTab('channels')}
+        >
+          Channels
+        </div>
+        <div
+          className={currentTab === 'all' ? activeClass : defaultClass}
+          onClick={setTab('all')}
+        >
+          Sources
+        </div>
 
         <Menu as="div" className="relative inline-block text-left">
-          <BlurMenuButtonOnEscape targetRef={dropdownButtonRef}/>
+          <BlurMenuButtonOnEscape targetRef={dropdownButtonRef} />
           <div>
-            <Menu.Button className="inline-flex justify-between focus:outline-none" ref={dropdownButtonRef}>
-              <span className={currentTab.startsWith('utm_') ? activeClass : defaultClass}>{buttonText}</span>
-              <ChevronDownIcon className="-mr-1 ml-1 h-4 w-4" aria-hidden="true" />
+            <Menu.Button
+              className="inline-flex justify-between focus:outline-none"
+              ref={dropdownButtonRef}
+            >
+              <span
+                className={
+                  currentTab.startsWith('utm_') ? activeClass : defaultClass
+                }
+              >
+                {buttonText}
+              </span>
+              <ChevronDownIcon
+                className="-mr-1 ml-1 h-4 w-4"
+                aria-hidden="true"
+              />
             </Menu.Button>
           </div>
 
@@ -229,7 +287,9 @@ export default function SourceList() {
                         <span
                           onClick={setTab(option)}
                           className={classNames(
-                            active ? 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer' : 'text-gray-700 dark:text-gray-200',
+                            active
+                              ? 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-200 cursor-pointer'
+                              : 'text-gray-700 dark:text-gray-200',
                             'block px-4 py-2 text-sm',
                             currentTab === option ? 'font-bold' : ''
                           )}
@@ -256,7 +316,9 @@ export default function SourceList() {
     if (currentTab === 'all') {
       return <AllSources afterFetchData={afterFetchData} />
     } else if (currentTab == 'channels') {
-      return <Channels onClick={onChannelClick} afterFetchData={afterFetchData} />
+      return (
+        <Channels onClick={onChannelClick} afterFetchData={afterFetchData} />
+      )
     } else {
       return <UTMSources tab={currentTab} afterFetchData={afterFetchData} />
     }
@@ -275,7 +337,10 @@ export default function SourceList() {
           <h3 className="font-bold dark:text-gray-100">
             {labelFor[currentTab]}
           </h3>
-          <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />
+          <ImportedQueryUnsupportedWarning
+            loading={loading}
+            skipImportedReason={skipImportedReason}
+          />
         </div>
         {renderTabs()}
       </div>
diff --git a/assets/js/dashboard/theme-context.tsx b/assets/js/dashboard/theme-context.tsx
index bb1d0c96fb..41cfe816d3 100644
--- a/assets/js/dashboard/theme-context.tsx
+++ b/assets/js/dashboard/theme-context.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, {
   createContext,
   ReactNode,
diff --git a/assets/js/dashboard/user-context.tsx b/assets/js/dashboard/user-context.tsx
index 467a2008cc..8549748224 100644
--- a/assets/js/dashboard/user-context.tsx
+++ b/assets/js/dashboard/user-context.tsx
@@ -1,4 +1,3 @@
-/* @format */
 import React, { createContext, ReactNode, useContext } from 'react'
 
 export enum Role {
diff --git a/assets/js/dashboard/util/date.js b/assets/js/dashboard/util/date.js
index 1430c22c28..a783bc305a 100644
--- a/assets/js/dashboard/util/date.js
+++ b/assets/js/dashboard/util/date.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 
diff --git a/assets/js/dashboard/util/date.test.ts b/assets/js/dashboard/util/date.test.ts
index 2f14de4273..4be17e2ff5 100644
--- a/assets/js/dashboard/util/date.test.ts
+++ b/assets/js/dashboard/util/date.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import {
   dateForSite,
   formatDayShort,
diff --git a/assets/js/dashboard/util/filter-text.test.tsx b/assets/js/dashboard/util/filter-text.test.tsx
index b97e77ca0b..ca2dc815a9 100644
--- a/assets/js/dashboard/util/filter-text.test.tsx
+++ b/assets/js/dashboard/util/filter-text.test.tsx
@@ -6,10 +6,22 @@ import { render, screen } from '@testing-library/react'
 describe('styledFilterText() and plainFilterText()', () => {
   it.each<[Filter, FilterClauseLabels, string]>([
     [['is', 'page', ['/docs', '/blog']], {}, 'Page is /docs or /blog'],
-    [['is', 'country', ['US']], { US: 'United States' }, 'Country is United States'],
+    [
+      ['is', 'country', ['US']],
+      { US: 'United States' },
+      'Country is United States'
+    ],
     [['is', 'goal', ['Signup']], {}, 'Goal is Signup'],
-    [['is', 'props:browser_language', ['en-US']], {}, 'Property browser_language is en-US'],
-    [['has_not_done', 'goal', ['Signup', 'Login']], {}, 'Goal is not Signup or Login'],
+    [
+      ['is', 'props:browser_language', ['en-US']],
+      {},
+      'Property browser_language is en-US'
+    ],
+    [
+      ['has_not_done', 'goal', ['Signup', 'Login']],
+      {},
+      'Goal is not Signup or Login'
+    ]
   ])(
     'when filter is %p and labels are %p, functions return %p',
     (filter, labels, expectedPlainText) => {
@@ -18,7 +30,9 @@ describe('styledFilterText() and plainFilterText()', () => {
       expect(plainFilterText(query, filter)).toBe(expectedPlainText)
 
       render(<p data-testid="filter-text">{styledFilterText(query, filter)}</p>)
-      expect(screen.getByTestId('filter-text')).toHaveTextContent(expectedPlainText)
+      expect(screen.getByTestId('filter-text')).toHaveTextContent(
+        expectedPlainText
+      )
     }
   )
 })
diff --git a/assets/js/dashboard/util/filter-text.tsx b/assets/js/dashboard/util/filter-text.tsx
index a94f5fbb05..1a92b6453c 100644
--- a/assets/js/dashboard/util/filter-text.tsx
+++ b/assets/js/dashboard/util/filter-text.tsx
@@ -1,5 +1,3 @@
-/* @format */
-
 import React, { ReactNode, isValidElement, Fragment } from 'react'
 import { DashboardQuery, Filter } from '../query'
 import {
diff --git a/assets/js/dashboard/util/filters.js b/assets/js/dashboard/util/filters.js
index ca5a92719a..6e5ec25022 100644
--- a/assets/js/dashboard/util/filters.js
+++ b/assets/js/dashboard/util/filters.js
@@ -1,5 +1,3 @@
-/** @format */
-
 import * as api from '../api'
 import { formatSegmentIdAsLabelKey } from '../filtering/segments'
 
diff --git a/assets/js/dashboard/util/filters.test.ts b/assets/js/dashboard/util/filters.test.ts
index 67ad93874e..20b8080567 100644
--- a/assets/js/dashboard/util/filters.test.ts
+++ b/assets/js/dashboard/util/filters.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { getAvailableFilterModals, serializeApiFilters } from './filters'
 
 describe(`${getAvailableFilterModals.name}`, () => {
diff --git a/assets/js/dashboard/util/money.ts b/assets/js/dashboard/util/money.ts
index db0dd006ee..10350951f9 100644
--- a/assets/js/dashboard/util/money.ts
+++ b/assets/js/dashboard/util/money.ts
@@ -1,6 +1,6 @@
-import { numberLongFormatter, numberShortFormatter } from "./number-formatter"
+import { numberLongFormatter, numberShortFormatter } from './number-formatter'
 
-type Money = { long: string, short: string }
+type Money = { long: string; short: string }
 
 export function formatMoneyShort(value: Money | number | null) {
   if (typeof value == 'number') {
@@ -8,7 +8,7 @@ export function formatMoneyShort(value: Money | number | null) {
   } else if (value) {
     return value.short
   } else {
-    return "-"
+    return '-'
   }
 }
 
@@ -18,6 +18,6 @@ export function formatMoneyLong(value: Money | number | null) {
   } else if (value) {
     return value.long
   } else {
-    return "-"
+    return '-'
   }
 }
diff --git a/assets/js/dashboard/util/number-formatter.test.ts b/assets/js/dashboard/util/number-formatter.test.ts
index ff2615a0e7..0721cbb38e 100644
--- a/assets/js/dashboard/util/number-formatter.test.ts
+++ b/assets/js/dashboard/util/number-formatter.test.ts
@@ -1,6 +1,6 @@
-import { numberLongFormatter, numberShortFormatter } from "./number-formatter"
+import { numberLongFormatter, numberShortFormatter } from './number-formatter'
 
-describe("numberShortFormatter()", () => {
+describe('numberShortFormatter()', () => {
   it('converts to short format', () => {
     expect(numberShortFormatter(0)).toEqual('0')
     expect(numberShortFormatter(-10)).toEqual('-10')
@@ -16,7 +16,7 @@ describe("numberShortFormatter()", () => {
   })
 })
 
-describe("numberLongFormatter()", () => {
+describe('numberLongFormatter()', () => {
   it('converts to short format', () => {
     expect(numberLongFormatter(0)).toEqual('0')
     expect(numberLongFormatter(-10)).toEqual('-10')
diff --git a/assets/js/dashboard/util/number-formatter.ts b/assets/js/dashboard/util/number-formatter.ts
index b322b98921..814955ab95 100644
--- a/assets/js/dashboard/util/number-formatter.ts
+++ b/assets/js/dashboard/util/number-formatter.ts
@@ -6,7 +6,7 @@ const BILLION = 1000000000
 const HUNDRED_BILLION = 100000000000
 const TRILLION = 1000000000000
 
-const numberFormat = Intl.NumberFormat("en-US")
+const numberFormat = Intl.NumberFormat('en-US')
 
 export function numberShortFormatter(num: number): string {
   if (num >= THOUSAND && num < MILLION) {
@@ -14,21 +14,21 @@ export function numberShortFormatter(num: number): string {
     if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
       return Math.floor(thousands) + 'k'
     } else {
-      return (Math.floor(thousands * 10) / 10) + 'k'
+      return Math.floor(thousands * 10) / 10 + 'k'
     }
   } else if (num >= MILLION && num < BILLION) {
     const millions = num / MILLION
     if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
       return Math.floor(millions) + 'M'
     } else {
-      return (Math.floor(millions * 10) / 10) + 'M'
+      return Math.floor(millions * 10) / 10 + 'M'
     }
   } else if (num >= BILLION && num < TRILLION) {
     const billions = num / BILLION
     if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
       return Math.floor(billions) + 'B'
     } else {
-      return (Math.floor(billions * 10) / 10) + 'B'
+      return Math.floor(billions * 10) / 10 + 'B'
     }
   } else {
     return num.toString()
@@ -39,7 +39,9 @@ export function numberLongFormatter(num: number): string {
   return numberFormat.format(num)
 }
 
-export function nullable<T>(formatter: (num: T) => string): (num: T | null) => string {
+export function nullable<T>(
+  formatter: (num: T) => string
+): (num: T | null) => string {
   return (num: T | null): string => {
     if (num === null) {
       return '-'
@@ -49,13 +51,13 @@ export function nullable<T>(formatter: (num: T) => string): (num: T | null) => s
 }
 
 function pad(num: number, size: number): string {
-  return ('000' + num).slice(size * -1);
+  return ('000' + num).slice(size * -1)
 }
 
 export function durationFormatter(duration: number): string {
   const hours = Math.floor(duration / 60 / 60)
   const minutes = Math.floor(duration / 60) % 60
-  const seconds = Math.floor(duration - (minutes * 60) - (hours * 60 * 60))
+  const seconds = Math.floor(duration - minutes * 60 - hours * 60 * 60)
   if (hours > 0) {
     return `${hours}h ${minutes}m ${seconds}s`
   } else if (minutes > 0) {
@@ -66,7 +68,7 @@ export function durationFormatter(duration: number): string {
 }
 
 export function percentageFormatter(number: number | null): string {
-  if (typeof (number) === 'number') {
+  if (typeof number === 'number') {
     return number + '%'
   } else {
     return '-'
diff --git a/assets/js/dashboard/util/realtime-update-timer.js b/assets/js/dashboard/util/realtime-update-timer.js
index 77a4f0d0f1..5650192dc5 100644
--- a/assets/js/dashboard/util/realtime-update-timer.js
+++ b/assets/js/dashboard/util/realtime-update-timer.js
@@ -2,7 +2,7 @@ const THIRTY_SECONDS = 30000
 const tickEvent = new Event('tick')
 
 export function start() {
-    setInterval(() => {
-        document.dispatchEvent(tickEvent)
-    }, THIRTY_SECONDS)
+  setInterval(() => {
+    document.dispatchEvent(tickEvent)
+  }, THIRTY_SECONDS)
 }
diff --git a/assets/js/dashboard/util/seconds-since-last-load.js b/assets/js/dashboard/util/seconds-since-last-load.js
index e47330a05b..cb8d8d7902 100644
--- a/assets/js/dashboard/util/seconds-since-last-load.js
+++ b/assets/js/dashboard/util/seconds-since-last-load.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 
 // A function component that renders an integer value of how many
 // seconds have passed from the last data load on the dashboard.
@@ -9,7 +9,7 @@ export function SecondsSinceLastLoad({ lastLoadTimestamp }) {
   useEffect(() => {
     const interval = setInterval(() => setTimeNow(new Date()), 1000)
     return () => clearInterval(interval)
-  }, []);
+  }, [])
 
   return Math.round(Math.abs(lastLoadTimestamp - timeNow) / 1000)
 }
diff --git a/assets/js/dashboard/util/storage.js b/assets/js/dashboard/util/storage.js
index 11b137cf4d..1d241f3eb6 100644
--- a/assets/js/dashboard/util/storage.js
+++ b/assets/js/dashboard/util/storage.js
@@ -5,14 +5,14 @@
 const memStore = {}
 
 // https://stackoverflow.com/a/16427747
-function testLocalStorageAvailability(){
+function testLocalStorageAvailability() {
   try {
-    const testItem = 'test';
-    localStorage.setItem(testItem, testItem);
-    localStorage.removeItem(testItem);
-    return true;
+    const testItem = 'test'
+    localStorage.setItem(testItem, testItem)
+    localStorage.removeItem(testItem)
+    return true
   } catch (_e) {
-    return false;
+    return false
   }
 }
 
diff --git a/assets/js/dashboard/util/tooltip.tsx b/assets/js/dashboard/util/tooltip.tsx
index 4354954a1b..497eef4db8 100644
--- a/assets/js/dashboard/util/tooltip.tsx
+++ b/assets/js/dashboard/util/tooltip.tsx
@@ -1,17 +1,26 @@
-import React, { ReactNode, useState } from "react";
-import { usePopper } from 'react-popper';
+import React, { ReactNode, useState } from 'react'
+import { usePopper } from 'react-popper'
 import classNames from 'classnames'
 
-export function Tooltip({ children, info, className, onClick, boundary }: {
-  info: ReactNode,
+export function Tooltip({
+  children,
+  info,
+  className,
+  onClick,
+  boundary
+}: {
+  info: ReactNode
   children: ReactNode
-  className?: string,
-  onClick?: () => void,
+  className?: string
+  onClick?: () => void
   boundary?: HTMLElement
 }) {
-  const [visible, setVisible] = useState(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [visible, setVisible] = useState(false)
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLDivElement | null>(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  )
   const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -21,29 +30,44 @@ export function Tooltip({ children, info, className, onClick, boundary }: {
       {
         name: 'offset',
         options: {
-          offset: [0, 4],
-        },
+          offset: [0, 4]
+        }
       },
       boundary && {
         name: 'preventOverflow',
         options: {
-          boundary: boundary,
-        },
-      },
-    ].filter((x) => !!x),
-  });
+          boundary: boundary
+        }
+      }
+    ].filter((x) => !!x)
+  })
 
   return (
     <div className={classNames('relative', className)}>
-      <div ref={setReferenceElement} onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)} onClick={onClick}>
+      <div
+        ref={setReferenceElement}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        onClick={onClick}
+      >
         {children}
-
       </div>
-      {info && visible && <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-50 p-2 rounded text-sm text-gray-100 font-bold popper-tooltip" role="tooltip">
-        {info}
-        <div ref={setArrowElement} style={styles.arrow} className="tooltip-arrow"></div>
-      </div>
-      }
+      {info && visible && (
+        <div
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+          className="z-50 p-2 rounded text-sm text-gray-100 font-bold popper-tooltip"
+          role="tooltip"
+        >
+          {info}
+          <div
+            ref={setArrowElement}
+            style={styles.arrow}
+            className="tooltip-arrow"
+          ></div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/assets/js/dashboard/util/url-search-params-v1.ts b/assets/js/dashboard/util/url-search-params-v1.ts
index a4398c37da..08d14aa238 100644
--- a/assets/js/dashboard/util/url-search-params-v1.ts
+++ b/assets/js/dashboard/util/url-search-params-v1.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { DashboardQuery, Filter } from '../query'
 import { EVENT_PROPS_PREFIX, FILTER_OPERATIONS } from './filters'
 
diff --git a/assets/js/dashboard/util/url-search-params-v2.test.ts b/assets/js/dashboard/util/url-search-params-v2.test.ts
index 72ee4182e4..8959248354 100644
--- a/assets/js/dashboard/util/url-search-params-v2.test.ts
+++ b/assets/js/dashboard/util/url-search-params-v2.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import JsonURL from '@jsonurl/jsonurl'
 import { v2 } from './url-search-params-v2'
 
diff --git a/assets/js/dashboard/util/url-search-params-v2.ts b/assets/js/dashboard/util/url-search-params-v2.ts
index 98377f8971..3c8e03aae7 100644
--- a/assets/js/dashboard/util/url-search-params-v2.ts
+++ b/assets/js/dashboard/util/url-search-params-v2.ts
@@ -1,4 +1,3 @@
-/* @format */
 import JsonURL from '@jsonurl/jsonurl'
 import {
   encodeURIComponentPermissive,
diff --git a/assets/js/dashboard/util/url-search-params.test.ts b/assets/js/dashboard/util/url-search-params.test.ts
index 95fd65d9fa..9ac792d768 100644
--- a/assets/js/dashboard/util/url-search-params.test.ts
+++ b/assets/js/dashboard/util/url-search-params.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { Filter } from '../query'
 import {
   encodeURIComponentPermissive,
diff --git a/assets/js/dashboard/util/url-search-params.ts b/assets/js/dashboard/util/url-search-params.ts
index b982202675..730d8effdb 100644
--- a/assets/js/dashboard/util/url-search-params.ts
+++ b/assets/js/dashboard/util/url-search-params.ts
@@ -1,4 +1,3 @@
-/** @format */
 import { Filter, FilterClauseLabels } from '../query'
 import { v1 } from './url-search-params-v1'
 import { v2 } from './url-search-params-v2'
diff --git a/assets/js/dashboard/util/url.test.ts b/assets/js/dashboard/util/url.test.ts
index 1b508324ab..346e5aa845 100644
--- a/assets/js/dashboard/util/url.test.ts
+++ b/assets/js/dashboard/util/url.test.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { apiPath, externalLinkForPage, isValidHttpUrl, trimURL } from './url'
 
 describe('apiPath', () => {
diff --git a/assets/js/dashboard/util/url.ts b/assets/js/dashboard/util/url.ts
index 5e77800e6e..fc69afaca2 100644
--- a/assets/js/dashboard/util/url.ts
+++ b/assets/js/dashboard/util/url.ts
@@ -1,4 +1,3 @@
-/* @format */
 import { PlausibleSite } from '../site-context'
 
 export function apiPath(
diff --git a/assets/js/embed.content.js b/assets/js/embed.content.js
index 32e50f7c6c..81803582e0 100644
--- a/assets/js/embed.content.js
+++ b/assets/js/embed.content.js
@@ -1,7 +1,7 @@
 import 'iframe-resizer/js/iframeResizer.contentWindow'
 
 window.iFrameResizer = {
-  onMessage: function(msg) {
+  onMessage: function (msg) {
     if (msg.type === 'load-custom-styles') {
       addCustomStyles(msg.opts)
     }
@@ -9,8 +9,8 @@ window.iFrameResizer = {
 }
 
 function addCustomStyles(opts) {
-  var style = document.createElement('style');
+  var style = document.createElement('style')
   style.innerHTML = opts.styles
 
-  document.head.appendChild(style);
+  document.head.appendChild(style)
 }
diff --git a/assets/js/embed.host.js b/assets/js/embed.host.js
index 4eb40dd92d..fc7d2a8fe6 100644
--- a/assets/js/embed.host.js
+++ b/assets/js/embed.host.js
@@ -1,10 +1,13 @@
 import iframeResize from 'iframe-resizer/js/iframeResizer'
 
-var iframes = iframeResize({
-  heightCalculationMethod: 'taggedElement',
-  onInit: onInit,
-  checkOrigin: false
-}, '[plausible-embed]')
+var iframes = iframeResize(
+  {
+    heightCalculationMethod: 'taggedElement',
+    onInit: onInit,
+    checkOrigin: false
+  },
+  '[plausible-embed]'
+)
 
 function onInit() {
   var iframe = iframes[0]
diff --git a/assets/js/liveview/combo-box.js b/assets/js/liveview/combo-box.js
index 235e6ad7ab..041f28d9fb 100644
--- a/assets/js/liveview/combo-box.js
+++ b/assets/js/liveview/combo-box.js
@@ -8,19 +8,19 @@ export default (id) => ({
   selectionInProgress: false,
   firstFocusRegistered: false,
   setFocus(f) {
-    this.focus = f;
+    this.focus = f
   },
   initFocus() {
     if (this.focus === null) {
       this.setFocus(this.leastFocusableIndex())
       if (!this.firstFocusRegistered) {
-        document.getElementById(this.id).select();
-        this.firstFocusRegistered = true;
+        document.getElementById(this.id).select()
+        this.firstFocusRegistered = true
       }
     }
   },
   trackSubmitValueChange() {
-    this.selectionInProgress = false;
+    this.selectionInProgress = false
   },
   open() {
     if (!this.isOpen) {
@@ -32,7 +32,9 @@ export default (id) => ({
     return this.$refs.suggestions?.querySelectorAll('li').length
   },
   hasCreatableOption() {
-    return this.$refs.suggestions?.querySelector('li').classList.contains("creatable")
+    return this.$refs.suggestions
+      ?.querySelector('li')
+      .classList.contains('creatable')
   },
   leastFocusableIndex() {
     if (this.suggestionsCount() === 0) {
@@ -41,20 +43,26 @@ export default (id) => ({
     return this.hasCreatableOption() ? 0 : 1
   },
   maxFocusableIndex() {
-    return this.hasCreatableOption() ? this.suggestionsCount() - 1 : this.suggestionsCount()
+    return this.hasCreatableOption()
+      ? this.suggestionsCount() - 1
+      : this.suggestionsCount()
   },
   nextFocusableIndex() {
     const currentFocus = this.focus
-    return currentFocus + 1 > this.maxFocusableIndex() ? this.leastFocusableIndex() : currentFocus + 1
+    return currentFocus + 1 > this.maxFocusableIndex()
+      ? this.leastFocusableIndex()
+      : currentFocus + 1
   },
   prevFocusableIndex() {
     const currentFocus = this.focus
-    return currentFocus - 1 >= this.leastFocusableIndex() ? currentFocus - 1 : this.maxFocusableIndex()
+    return currentFocus - 1 >= this.leastFocusableIndex()
+      ? currentFocus - 1
+      : this.maxFocusableIndex()
   },
   close(e) {
     // Pressing Escape should not propagate to window,
     // so we'll only close the suggestions pop-up
-    if (this.isOpen && e.key === "Escape") {
+    if (this.isOpen && e.key === 'Escape') {
       e.stopPropagation()
     }
     this.isOpen = false
@@ -65,9 +73,11 @@ export default (id) => ({
     document.getElementById(this.id).blur()
   },
   scrollTo(idx) {
-    this.$refs[`dropdown-${this.id}-option-${idx}`]?.scrollIntoView(
-      { block: 'nearest', behavior: 'smooth', inline: 'start' }
-    )
+    this.$refs[`dropdown-${this.id}-option-${idx}`]?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+      inline: 'start'
+    })
   },
   focusNext() {
     const nextIndex = this.nextFocusableIndex()
diff --git a/assets/js/liveview/dropdown.js b/assets/js/liveview/dropdown.js
index d2d662de00..1b016234f2 100644
--- a/assets/js/liveview/dropdown.js
+++ b/assets/js/liveview/dropdown.js
@@ -12,9 +12,9 @@ export default () => ({
   },
 
   close(focusAfter) {
-    if (! this.open) return
+    if (!this.open) return
 
     this.open = false
     focusAfter?.focus()
-  },
+  }
 })
diff --git a/assets/js/liveview/live_socket.js b/assets/js/liveview/live_socket.js
index 87db6f7315..b395dfe751 100644
--- a/assets/js/liveview/live_socket.js
+++ b/assets/js/liveview/live_socket.js
@@ -1,9 +1,9 @@
 // eslint-disable-next-line import/no-unresolved
-import "phoenix_html"
+import 'phoenix_html'
 // eslint-disable-next-line import/no-unresolved
-import { Socket } from "phoenix"
+import { Socket } from 'phoenix'
 // eslint-disable-next-line import/no-unresolved
-import { LiveSocket } from "phoenix_live_view"
+import { LiveSocket } from 'phoenix_live_view'
 // eslint-disable-next-line import/no-unresolved
 import Alpine from 'alpinejs'
 
@@ -13,9 +13,9 @@ if (csrfToken && websocketUrl) {
   let Hooks = {}
   Hooks.Metrics = {
     mounted() {
-      this.handleEvent("send-metrics", ({event_name}) => {
+      this.handleEvent('send-metrics', ({ event_name }) => {
         const afterMetrics = () => {
-          this.pushEvent("send-metrics-after", {event_name})
+          this.pushEvent('send-metrics-after', { event_name })
         }
         setTimeout(afterMetrics, 5000)
         if (window.trackCustomEvent) {
@@ -26,34 +26,40 @@ if (csrfToken && websocketUrl) {
   }
   let Uploaders = {}
   Uploaders.S3 = function (entries, onViewError) {
-    entries.forEach(entry => {
+    entries.forEach((entry) => {
       let xhr = new XMLHttpRequest()
       onViewError(() => xhr.abort())
-      xhr.onload = () => xhr.status === 200 ? entry.progress(100) : entry.error()
+      xhr.onload = () =>
+        xhr.status === 200 ? entry.progress(100) : entry.error()
       xhr.onerror = () => entry.error()
-      xhr.upload.addEventListener("progress", (event) => {
+      xhr.upload.addEventListener('progress', (event) => {
         if (event.lengthComputable) {
           let percent = Math.round((event.loaded / event.total) * 100)
-          if (percent < 100) { entry.progress(percent) }
+          if (percent < 100) {
+            entry.progress(percent)
+          }
         }
       })
       let url = entry.meta.url
-      xhr.open("PUT", url, true)
+      xhr.open('PUT', url, true)
       xhr.send(entry.file)
     })
   }
-  let token = csrfToken.getAttribute("content")
-  let url = websocketUrl.getAttribute("content")
-  let liveUrl = (url === "") ? "/live" : new URL("/live", url).href;
+  let token = csrfToken.getAttribute('content')
+  let url = websocketUrl.getAttribute('content')
+  let liveUrl = url === '' ? '/live' : new URL('/live', url).href
   let liveSocket = new LiveSocket(liveUrl, Socket, {
     heartbeatIntervalMs: 10000,
-    params: { _csrf_token: token }, hooks: Hooks, uploaders: Uploaders, dom: {
+    params: { _csrf_token: token },
+    hooks: Hooks,
+    uploaders: Uploaders,
+    dom: {
       // for alpinejs integration
       onBeforeElUpdated(from, to) {
         if (from._x_dataStack) {
-          Alpine.clone(from, to);
+          Alpine.clone(from, to)
         }
-      },
+      }
     }
   })
 
diff --git a/assets/js/liveview/phx_events.js b/assets/js/liveview/phx_events.js
index 70b17df4c5..d2d96111e2 100644
--- a/assets/js/liveview/phx_events.js
+++ b/assets/js/liveview/phx_events.js
@@ -2,17 +2,19 @@ window.addEventListener(`phx:update-value`, (e) => {
   let el = document.getElementById(e.detail.id)
   el.value = e.detail.value
   if (e.detail.fire) {
-    el.dispatchEvent(new Event("input", { bubbles: true }))
+    el.dispatchEvent(new Event('input', { bubbles: true }))
   }
 })
 
 window.addEventListener(`phx:js-exec`, ({ detail }) => {
-  document.querySelectorAll(detail.to).forEach(el => {
+  document.querySelectorAll(detail.to).forEach((el) => {
     window.liveSocket.execJS(el, el.getAttribute(detail.attr))
   })
 })
 
 window.addEventListener(`phx:notify-selection-change`, (event) => {
   let el = document.getElementById(event.detail.id)
-  el.dispatchEvent(new CustomEvent("selection-change", { detail: event.detail }))
+  el.dispatchEvent(
+    new CustomEvent('selection-change', { detail: event.detail })
+  )
 })
diff --git a/assets/js/polyfills/closest.js b/assets/js/polyfills/closest.js
index 7295f7ace1..ab0f90eb5b 100644
--- a/assets/js/polyfills/closest.js
+++ b/assets/js/polyfills/closest.js
@@ -1,15 +1,14 @@
 if (window.Element && !Element.prototype.closest) {
-    Element.prototype.closest =
-    function(s) {
-        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-            i,
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
-            el = this;
-        do {
-            i = matches.length;
-            // eslint-disable-next-line no-empty
-            while (--i >= 0 && matches.item(i) !== el) {};
-        } while ((i < 0) && (el = el.parentElement));
-        return el;
-    };
+  Element.prototype.closest = function (s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+      i,
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      el = this
+    do {
+      i = matches.length
+      // eslint-disable-next-line no-empty
+      while (--i >= 0 && matches.item(i) !== el) {}
+    } while (i < 0 && (el = el.parentElement))
+    return el
+  }
 }
diff --git a/assets/js/storybook.js b/assets/js/storybook.js
index 8838db5770..c211a67d66 100644
--- a/assets/js/storybook.js
+++ b/assets/js/storybook.js
@@ -1,5 +1,5 @@
 import Alpine from 'alpinejs'
-import dropdown from "./liveview/dropdown"
+import dropdown from './liveview/dropdown'
 
 // If your components require any hooks or custom uploaders, or if your pages
 // require connect parameters, uncomment the following lines and declare them as
@@ -13,27 +13,24 @@ import dropdown from "./liveview/dropdown"
 //   window.storybook = { Hooks, Params, Uploaders };
 // })();
 
-
 window.Alpine = Alpine
 document.addEventListener('DOMContentLoaded', () => {
-  window.Alpine.start();
-});
+  window.Alpine.start()
+})
 
 document.addEventListener('alpine:init', () => {
   window.Alpine.data('dropdown', dropdown)
-});
-
-
- (function () {
-   window.storybook = {
-     LiveSocketOptions: {
-       dom: {
-         onBeforeElUpdated(from, to) {
-           if (from._x_dataStack) {
-             window.Alpine.clone(from, to)
-           }
-         }
-       }
-     }
-   };
- })();
+})
+;(function () {
+  window.storybook = {
+    LiveSocketOptions: {
+      dom: {
+        onBeforeElUpdated(from, to) {
+          if (from._x_dataStack) {
+            window.Alpine.clone(from, to)
+          }
+        }
+      }
+    }
+  }
+})()
diff --git a/assets/package.json b/assets/package.json
index 426f11441f..eaf03c58f1 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "test": "TZ=UTC jest",
     "format": "prettier --write",
-    "check-format": "prettier --check **/*.{js,css,ts,tsx} --require-pragma",
+    "check-format": "prettier --check \"**/*.{js,css,ts,tsx}\"",
     "eslint": "eslint js/**",
     "stylelint": "stylelint css/**",
     "lint": "npm run eslint && npm run stylelint",
diff --git a/assets/test-utils/app-context-providers.tsx b/assets/test-utils/app-context-providers.tsx
index f5409ac897..6a3d86b3a9 100644
--- a/assets/test-utils/app-context-providers.tsx
+++ b/assets/test-utils/app-context-providers.tsx
@@ -1,5 +1,3 @@
-/** @format */
-
 import React, { ReactNode } from 'react'
 import SiteContextProvider, {
   PlausibleSite
diff --git a/assets/test-utils/extend-expect.ts b/assets/test-utils/extend-expect.ts
index 010b0b5d45..c44951a680 100644
--- a/assets/test-utils/extend-expect.ts
+++ b/assets/test-utils/extend-expect.ts
@@ -1 +1 @@
-import '@testing-library/jest-dom'
\ No newline at end of file
+import '@testing-library/jest-dom'
diff --git a/assets/test-utils/index.ts b/assets/test-utils/index.ts
index f480666574..14b0266a39 100644
--- a/assets/test-utils/index.ts
+++ b/assets/test-utils/index.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 import { render, RenderOptions } from '@testing-library/react'
 import { ReactNode } from 'react'
 
diff --git a/assets/test-utils/mock-api.ts b/assets/test-utils/mock-api.ts
index e287af2308..cdbbdd7fc4 100644
--- a/assets/test-utils/mock-api.ts
+++ b/assets/test-utils/mock-api.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 export class MockAPI {
   private mocked: Map<string, () => Promise<Response>>
   private fetch: jest.Mock
diff --git a/assets/test-utils/reset-state.ts b/assets/test-utils/reset-state.ts
index 24124fa3cc..9f474ce3b5 100644
--- a/assets/test-utils/reset-state.ts
+++ b/assets/test-utils/reset-state.ts
@@ -1,5 +1,3 @@
-/** @format */
-
 /**
  * @returns clears the state that the app stores,
  * to avoid individual tests impacting each other