Clean up all uploaded files

assets/js/dashboard/stats/more-link-state.js

@@ -1,5 +0,0 @@
-export const MoreLinkState = {
-  HIDDEN: 'hidden',
-  LOADING: 'loading',
-  READY: 'ready'
-}

assets/js/dashboard/stats/more-link.js

@@ -1,59 +0,0 @@
-import React, { useRef, useEffect } from 'react'
-import { AppNavigationLink } from '../navigation/use-app-navigate'
-import { Tooltip } from '../util/tooltip'
-import { MoreLinkState } from './more-link-state'
-
-function detailsIcon() {
-  return (
-    <svg
-      className="feather"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-    </svg>
-  )
-}
-
-export default function MoreLink({ linkProps, state }) {
-  const portalRef = useRef(null)
-
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      portalRef.current = document.body
-    }
-  }, [])
-
-  const baseClassName =
-    'relative flex mt-px rounded text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150 before:absolute before:inset-[-8px] before:content-[" "]'
-  const icon = detailsIcon()
-
-  if (state === MoreLinkState.HIDDEN) {
-    return null
-  }
-
-  if (state === MoreLinkState.LOADING || !linkProps) {
-    return (
-      <Tooltip info="View details" containerRef={portalRef}>
-        <div className={baseClassName}>{icon}</div>
-      </Tooltip>
-    )
-  }
-
-  return (
-    <Tooltip info="View details" containerRef={portalRef}>
-      <AppNavigationLink
-        {...linkProps}
-        aria-label="View details"
-        className={baseClassName}
-      >
-        {icon}
-      </AppNavigationLink>
-    </Tooltip>
-  )
-}

assets/js/dashboard/stats/pages/details.tsx

@@ -1,146 +0,0 @@
-import React from 'react'
-import { revenueAvailable, Filter, DashboardState } from '../../dashboard-state'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import {
-  hasConversionGoalFilter,
-  hasEventFilters,
-  isRealTimeDashboard
-} from '../../util/filters'
-import { defaultGetFilterInfo, GetFilterInfo } from '../breakdowns'
-import {
-  BREAKDOWN_REPORTS,
-  BreakdownReportKey
-} from '../reports/reports-config'
-import {
-  DetailsBreakdown,
-  DimensionCell,
-  DimensionCellProps
-} from '../modals/details-breakdown'
-import Modal from '../modals/modal'
-import { DetailsExternalLink } from './external-link'
-import { externalLinkForPage, trimURL } from '../../util/url'
-
-const MAX_DIMENSION_LENGTH = 70
-
-function makeHostnameDimensionElement(pageFilterKey: string) {
-  const getFilterInfo: GetFilterInfo = (_dim, row) => ({
-    prefix: 'hostname',
-    filter: ['is', 'hostname', [row.dimensions[0]]] as Filter,
-    extraFilters: [
-      {
-        prefix: pageFilterKey,
-        filter: ['is', pageFilterKey, [row.dimensions[1]]] as Filter
-      }
-    ]
-  })
-  return function HostnameDimensionElement(props: DimensionCellProps) {
-    const site = useSiteContext()
-    const hostname = props.row.dimensions[0]
-    const path = props.row.dimensions[1]
-
-    const displayValue = trimURL(
-      `https://${hostname}${path}`,
-      MAX_DIMENSION_LENGTH + 8
-    ).replace(/^https:\/\//, '')
-
-    return (
-      <DimensionCell
-        text={displayValue}
-        externalLink={
-          <DetailsExternalLink
-            href={externalLinkForPage(site, path, hostname)}
-            isActive={props.isActive}
-          />
-        }
-        getFilterInfo={getFilterInfo}
-        {...props}
-      />
-    )
-  }
-}
-
-const HOSTNAME_DIMENSION_ELEMENTS: Partial<
-  Record<BreakdownReportKey, (props: DimensionCellProps) => React.ReactNode>
-> = {
-  [BreakdownReportKey.pagesWithHostname]: makeHostnameDimensionElement('page'),
-  [BreakdownReportKey.entryPagesWithHostname]:
-    makeHostnameDimensionElement('entry_page'),
-  [BreakdownReportKey.exitPagesWithHostname]:
-    makeHostnameDimensionElement('exit_page')
-}
-
-export function PagesDetails({
-  breakdownReportKey
-}: {
-  breakdownReportKey: BreakdownReportKey
-}) {
-  const { dashboardState } = useDashboardStateContext()
-  const site = useSiteContext()
-
-  const reportConfig = BREAKDOWN_REPORTS[breakdownReportKey]
-
-  /*global BUILD_EXTRA*/
-  const isRevenueAvailable =
-    BUILD_EXTRA && revenueAvailable(dashboardState, site)
-
-  const metrics = reportConfig.getMetrics({
-    hasConversionGoalFilter: hasConversionGoalFilter(dashboardState),
-    isRealtime: isRealTimeDashboard(dashboardState),
-    isDetailed: true,
-    isRevenueAvailable: isRevenueAvailable,
-    hasEventFilters: hasEventFilters(dashboardState)
-  })
-
-  const DimensionElement =
-    HOSTNAME_DIMENSION_ELEMENTS[breakdownReportKey] ?? PathDimensionElement
-
-  return (
-    <Modal>
-      <DetailsBreakdown
-        title={pagesDetailsTitle(breakdownReportKey, dashboardState)}
-        dimensionLabel={reportConfig.dimensionLabel}
-        dimensions={reportConfig.dimensions}
-        metrics={metrics}
-        alwaysOnFilters={reportConfig.alwaysOnFilters}
-        defaultOrderBy={[['visitors', 'desc']]}
-        searchDimension={reportConfig.searchDimension}
-        DimensionElement={DimensionElement}
-      />
-    </Modal>
-  )
-}
-
-const PathDimensionElement = (props: DimensionCellProps) => {
-  const site = useSiteContext()
-  const path = props.row.dimensions[0]
-
-  return (
-    <DimensionCell
-      text={path}
-      externalLink={
-        <DetailsExternalLink
-          href={externalLinkForPage(site, path)}
-          isActive={props.isActive}
-        />
-      }
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}
-
-export function pagesDetailsTitle(
-  reportKey: BreakdownReportKey,
-  dashboardState: DashboardState
-) {
-  if (
-    [BreakdownReportKey.pages, BreakdownReportKey.pagesWithHostname].includes(
-      reportKey
-    ) &&
-    hasConversionGoalFilter(dashboardState)
-  ) {
-    return 'Conversion pages'
-  }
-  return BREAKDOWN_REPORTS[reportKey].detailsTitle
-}

assets/js/dashboard/stats/pages/external-link.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { ExternalLinkIcon } from '../breakdowns'
-
-export function DetailsExternalLink({
-  href,
-  isActive
-}: {
-  href: string | null
-  isActive?: boolean
-}) {
-  return (
-    <div className="w-4 min-w-4 self-stretch flex flex-col justify-center">
-      {href && (
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href={href}
-          aria-label="Open page in a new tab"
-          className={isActive ? 'block' : 'hidden'}
-        >
-          <ExternalLinkIcon />
-        </a>
-      )}
-    </div>
-  )
-}
-
-export function IndexExternalLink({
-  href,
-  isActive
-}: {
-  href: string
-  isActive?: boolean
-}) {
-  return (
-    <a
-      target="_blank"
-      rel="noreferrer"
-      href={href}
-      aria-label="Open page in a new tab"
-      className={
-        isActive
-          ? 'visible md:invisible md:group-hover/row:visible'
-          : 'invisible md:group-hover/row:visible'
-      }
-    >
-      <ExternalLinkIcon />
-    </a>
-  )
-}

assets/js/dashboard/stats/pages/index.tsx

@@ -1,321 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { EllipsisVerticalIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
-
-import * as storage from '../../util/storage'
-import {
-  hasConversionGoalFilter,
-  isRealTimeDashboard
-} from '../../util/filters'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import { ReportLayout } from '../reports/report-layout'
-import { ReportHeader } from '../reports/report-header'
-import { TabButton, TabWrapper } from '../../components/tabs'
-import MoreLink from '../more-link'
-import { MoreLinkState } from '../more-link-state'
-import { QueryApiResponse } from '../../api'
-import ImportedWarningBubble from '../imported-warning-bubble'
-import {
-  BREAKDOWN_REPORTS,
-  BreakdownReportKey
-} from '../reports/reports-config'
-import {
-  DimensionCellWithBar,
-  IndexBreakdown,
-  DimensionCellWithBarProps
-} from '../reports/index-breakdown'
-import { defaultGetFilterInfo, GetFilterInfo } from '../breakdowns'
-import { Filter } from '../../dashboard-state'
-import { externalLinkForPage, trimURL } from '../../util/url'
-import { IndexExternalLink } from './external-link'
-import {
-  popover,
-  BlurMenuButtonOnEscape,
-  SelectedCheckmark
-} from '../../components/popover'
-import { pagesDetailsTitle } from './details'
-
-const BAR_COLOR = 'bg-orange-50 group-hover/row:bg-orange-100'
-const MAX_DIMENSION_LENGTH = 70
-
-type BreakdownMode = 'path' | 'hostname'
-type TabKey =
-  | BreakdownReportKey.pages
-  | BreakdownReportKey.entryPages
-  | BreakdownReportKey.exitPages
-
-const BREAKDOWN_MODE_OPTIONS: Array<{ value: BreakdownMode; label: string }> = [
-  { value: 'path', label: 'Path' },
-  { value: 'hostname', label: 'URL' } // URL is more suitable for user-facing label
-]
-
-function getReportKey(tab: TabKey, mode: BreakdownMode): BreakdownReportKey {
-  if (mode === 'hostname') {
-    switch (tab) {
-      case BreakdownReportKey.pages:
-        return BreakdownReportKey.pagesWithHostname
-      case BreakdownReportKey.entryPages:
-        return BreakdownReportKey.entryPagesWithHostname
-      case BreakdownReportKey.exitPages:
-        return BreakdownReportKey.exitPagesWithHostname
-    }
-  }
-  return tab
-}
-
-export default function Pages() {
-  const { dashboardState } = useDashboardStateContext()
-  const site = useSiteContext()
-
-  const tabStorageKey = `pageTab__${site.domain}`
-  const modeStorageKey = `pageBreakdownMode__${site.domain}`
-  const [tab, setTab] = useState<TabKey>(
-    initTab(storage.getItem(tabStorageKey))
-  )
-  const [breakdownMode, setBreakdownMode] = useState<BreakdownMode>(() =>
-    storage.getItem(modeStorageKey) === 'hostname' ? 'hostname' : 'path'
-  )
-  const [currentData, setCurrentData] = useState<QueryApiResponse | null>(null)
-
-  const reportKey = getReportKey(tab, breakdownMode)
-  const reportConfig = BREAKDOWN_REPORTS[reportKey]
-
-  const metrics = reportConfig.getMetrics({
-    isRealtime: isRealTimeDashboard(dashboardState),
-    hasConversionGoalFilter: hasConversionGoalFilter(dashboardState)
-  })
-
-  function switchTab(newTab: TabKey) {
-    storage.setItem(tabStorageKey, newTab)
-    setTab(newTab)
-  }
-
-  function selectBreakdownMode(mode: BreakdownMode) {
-    storage.setItem(modeStorageKey, mode)
-    setBreakdownMode(mode)
-  }
-
-  const moreLinkState = currentData
-    ? currentData.results.length > 0
-      ? MoreLinkState.READY
-      : MoreLinkState.HIDDEN
-    : MoreLinkState.LOADING
-
-  const DimensionElement =
-    breakdownMode === 'hostname'
-      ? HOSTNAME_DIMENSION_CELLS[tab]
-      : PathDimensionCell
-
-  return (
-    <ReportLayout testId="report-pages" className="overflow-x-hidden">
-      <ReportHeader>
-        <div className="flex gap-x-3">
-          <TabWrapper>
-            {(
-              [
-                BreakdownReportKey.pages,
-                BreakdownReportKey.entryPages,
-                BreakdownReportKey.exitPages
-              ] as const
-            ).map((reportKey) => (
-              <TabButton
-                key={reportKey}
-                active={tab === reportKey}
-                onClick={() => switchTab(reportKey)}
-              >
-                {pagesDetailsTitle(reportKey, dashboardState)}
-              </TabButton>
-            ))}
-          </TabWrapper>
-          <ImportedWarningBubble
-            queryApiResponse={currentData}
-            message={
-              breakdownMode === 'hostname' && tab !== BreakdownReportKey.pages
-                ? 'Imported data is unavailable in this view'
-                : undefined
-            }
-          />
-        </div>
-        <div className="flex items-start gap-x-3">
-          <MoreLink
-            state={moreLinkState}
-            linkProps={{
-              path: reportConfig.detailsPath,
-              search: (search: string) => search
-            }}
-          />
-          <PagesBreakdownMenu
-            breakdownMode={breakdownMode}
-            onSelect={selectBreakdownMode}
-          />
-        </div>
-      </ReportHeader>
-      <IndexBreakdown
-        key={reportKey}
-        metrics={metrics}
-        dimensions={reportConfig.dimensions}
-        dimensionLabel={reportConfig.dimensionLabel}
-        alwaysOnFilters={reportConfig.alwaysOnFilters}
-        DimensionElement={DimensionElement}
-        onDataReady={setCurrentData}
-      />
-    </ReportLayout>
-  )
-}
-
-function PagesBreakdownMenu({
-  breakdownMode,
-  onSelect
-}: {
-  breakdownMode: BreakdownMode
-  onSelect: (mode: BreakdownMode) => void
-}) {
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <Popover className="relative">
-      {({ close }) => (
-        <>
-          <BlurMenuButtonOnEscape targetRef={buttonRef} />
-          <Popover.Button
-            ref={buttonRef}
-            className={classNames(
-              'relative flex rounded !text-gray-500 dark:!text-gray-400 hover:!text-gray-600 dark:hover:!text-gray-300 transition-colors duration-150 before:absolute before:inset-[-8px]',
-              popover.toggleButton.classNames.linkLike,
-              'justify-center'
-            )}
-            title="Breakdown options"
-            aria-label="Breakdown options"
-          >
-            <EllipsisVerticalIcon className="size-4.5" />
-          </Popover.Button>
-          <Transition
-            as="div"
-            {...popover.transition.props}
-            className={classNames(
-              popover.transition.classNames.right,
-              'mt-2 min-w-48'
-            )}
-          >
-            <Popover.Panel className={popover.panel.classNames.roundedSheet}>
-              <p className="uppercase text-xs font-medium text-gray-500 dark:text-gray-400 px-4 py-2.5 whitespace-nowrap">
-                Break down by
-              </p>
-              <div
-                data-testid="dropdown-items"
-                className="flex flex-col gap-y-0.5"
-              >
-                {BREAKDOWN_MODE_OPTIONS.map(({ value, label }) => (
-                  <button
-                    key={value}
-                    onClick={() => {
-                      onSelect(value)
-                      close()
-                    }}
-                    data-selected={value === breakdownMode}
-                    className={classNames(
-                      popover.items.classNames.navigationLink,
-                      popover.items.classNames.selectedOption,
-                      popover.items.classNames.hoverLink
-                    )}
-                  >
-                    {label}
-                    <SelectedCheckmark selected={value === breakdownMode} />
-                  </button>
-                ))}
-              </div>
-            </Popover.Panel>
-          </Transition>
-        </>
-      )}
-    </Popover>
-  )
-}
-
-function PathDimensionCell(props: DimensionCellWithBarProps) {
-  const site = useSiteContext()
-  const path = props.row.dimensions[0]
-  const externalUrl = externalLinkForPage(site, path)
-
-  return (
-    <DimensionCellWithBar
-      getFilterInfo={defaultGetFilterInfo}
-      text={trimURL(path, MAX_DIMENSION_LENGTH)}
-      barClassName={BAR_COLOR}
-      externalLink={
-        externalUrl && (
-          <IndexExternalLink href={externalUrl} isActive={props.isActive} />
-        )
-      }
-      {...props}
-    />
-  )
-}
-
-function makeHostnameDimensionCell(pageFilterKey: string) {
-  const getFilterInfo: GetFilterInfo = (_dim, row) => ({
-    prefix: 'hostname',
-    filter: ['is', 'hostname', [row.dimensions[0]]] as Filter,
-    extraFilters: [
-      {
-        prefix: pageFilterKey,
-        filter: ['is', pageFilterKey, [row.dimensions[1]]] as Filter
-      }
-    ]
-  })
-  return function HostnameDimensionCell(props: DimensionCellWithBarProps) {
-    const site = useSiteContext()
-    const hostname = props.row.dimensions[0]
-    const path = props.row.dimensions[1]
-    const externalUrl = externalLinkForPage(site, path, hostname)
-
-    const displayValue = trimURL(
-      `https://${hostname}${path}`,
-      MAX_DIMENSION_LENGTH + 8
-    ).replace(/^https:\/\//, '')
-
-    return (
-      <DimensionCellWithBar
-        getFilterInfo={getFilterInfo}
-        text={displayValue}
-        barClassName={BAR_COLOR}
-        externalLink={
-          externalUrl && (
-            <IndexExternalLink href={externalUrl} isActive={props.isActive} />
-          )
-        }
-        {...props}
-      />
-    )
-  }
-}
-
-const HOSTNAME_DIMENSION_CELLS: Record<
-  TabKey,
-  (props: DimensionCellWithBarProps) => React.ReactNode
-> = {
-  [BreakdownReportKey.pages]: makeHostnameDimensionCell('page'),
-  [BreakdownReportKey.entryPages]: makeHostnameDimensionCell('entry_page'),
-  [BreakdownReportKey.exitPages]: makeHostnameDimensionCell('exit_page')
-}
-
-const initTab = (storedTab: string): TabKey => {
-  switch (storedTab) {
-    case LegacyTabKey.entryPages:
-    case BreakdownReportKey.entryPages:
-      return BreakdownReportKey.entryPages
-    case LegacyTabKey.exitPages:
-    case BreakdownReportKey.exitPages:
-      return BreakdownReportKey.exitPages
-    case BreakdownReportKey.pages:
-    default:
-      return BreakdownReportKey.pages
-  }
-}
-
-enum LegacyTabKey {
-  entryPages = 'entry-pages',
-  exitPages = 'exit-pages'
-}

assets/js/dashboard/stats/reports/change-arrow.test.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { ChangeArrow } from './change-arrow'
-
-jest.mock('@heroicons/react/24/solid', () => ({
-  ArrowUpRightIcon: ({ className, ...props }: { className: string }) => (
-    <span className={className} {...props}>
-      ↑
-    </span>
-  ),
-  ArrowDownRightIcon: ({ className, ...props }: { className: string }) => (
-    <span className={className} {...props}>
-      ↓
-    </span>
-  )
-}))
-
-it('renders up arrow for positive change', () => {
-  render(<ChangeArrow change={1} className="text-xs" metric="visitors" />)
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('↑ 1%')
-  expect(arrowElement.children[0]).toHaveClass('text-green-500')
-})
-
-it('renders down arrow for negative change', () => {
-  render(<ChangeArrow change={-10} className="text-xs" metric="visitors" />)
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('↓ 10%')
-  expect(arrowElement.children[0]).toHaveClass('text-red-500')
-})
-
-it('renders no arrow for no change', () => {
-  render(<ChangeArrow change={0} className="text-xs" metric="visitors" />)
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('0%')
-  expect(arrowElement.children).toHaveLength(0)
-})
-
-it('inverts arrow direction for positive bounce_rate change', () => {
-  render(<ChangeArrow change={15} className="text-xs" metric="bounce_rate" />)
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('↑ 15%')
-  expect(arrowElement.children[0]).toHaveClass('text-red-500')
-})
-
-it('inverts arrow direction for negative bounce_rate change', () => {
-  render(<ChangeArrow change={-3} className="text-xs" metric="bounce_rate" />)
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('↓ 3%')
-  expect(arrowElement.children[0]).toHaveClass('text-green-500')
-})
-
-it('renders with text hidden', () => {
-  render(
-    <ChangeArrow change={-3} className="text-xs" metric="visitors" hideNumber />
-  )
-
-  const arrowElement = screen.getByTestId('change-arrow')
-
-  expect(arrowElement).toHaveTextContent('↓')
-  expect(arrowElement.children[0]).toHaveClass('text-red-500')
-})
-
-it('renders no content with text hidden and 0 change', () => {
-  render(
-    <ChangeArrow change={0} className="text-xs" metric="visitors" hideNumber />
-  )
-
-  const arrowElement = screen.getByTestId('change-arrow')
-  expect(arrowElement).toHaveTextContent('')
-})

assets/js/dashboard/stats/reports/change-arrow.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { Metric } from '../metrics'
-import { numberShortFormatter } from '../../util/number-formatter'
-import { ArrowDownRightIcon, ArrowUpRightIcon } from '@heroicons/react/24/solid'
-import classNames from 'classnames'
-
-export function ChangeArrow({
-  change,
-  metric,
-  className,
-  hideNumber
-}: {
-  change: number
-  metric: Metric
-  className: string
-  hideNumber?: boolean
-}) {
-  let icon = null
-  const arrowClassName = classNames(
-    color(change, metric),
-    'mb-0.5 inline-block size-2.5 stroke-[1.5px] stroke-current'
-  )
-
-  if (change > 0) {
-    icon = <ArrowUpRightIcon className={arrowClassName} />
-  } else if (change < 0) {
-    icon = <ArrowDownRightIcon className={arrowClassName} />
-  }
-
-  const formattedChange = hideNumber
-    ? null
-    : `${icon ? ' ' : ''}${numberShortFormatter(Math.abs(change))}%`
-
-  return (
-    <span className={className} data-testid="change-arrow">
-      {icon}
-      {formattedChange}
-    </span>
-  )
-}
-
-function color(change: number, metric: Metric) {
-  const invert = metric === 'bounce_rate'
-
-  return change > 0 != invert ? 'text-green-500' : 'text-red-500'
-}

assets/js/dashboard/stats/reports/index-breakdown.tsx

@@ -1,594 +0,0 @@
-import React, {
-  useCallback,
-  useMemo,
-  useState,
-  useEffect,
-  ReactNode
-} from 'react'
-import FlipMove from 'react-flip-move'
-import LazyLoader from '../../components/lazy-loader'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import { NonTimeDimension } from '../../stats-query'
-import { Metric, getBreakdownMetricLabel } from '../metrics'
-import {
-  ColumnConfiguration,
-  MetricValueTooltipContent,
-  SharedBreakdownReportProps,
-  formatDateRangeLabel,
-  useBodyPortalRef,
-  extractMetricValue,
-  MetricValueWrapper,
-  GetFilterInfo,
-  useColumnsHiddenForAllNull,
-  dimensionOrderBy
-} from '../breakdowns'
-import { DrilldownLink } from '../../components/drilldown-link'
-import { QueryResultRow, QueryResultQuery, QueryApiResponse } from '../../api'
-import classNames from 'classnames'
-import { Tooltip } from '../../util/tooltip'
-import { ChangeArrow } from './change-arrow'
-import { MetricFormatterShort, MetricFormatterLong } from './metric-formatter'
-import {
-  hasConversionGoalFilter,
-  isRealTimeDashboard
-} from '../../util/filters'
-import {
-  StatsReportId,
-  StatsReportQueryKey,
-  useQueryApi
-} from '../../hooks/use-query-api'
-
-const MAX_ITEMS = 9
-export const MIN_HEIGHT = 356
-export const FADE_IN_CLASSNAME =
-  'opacity-100 transition-opacity duration-300 starting:opacity-0'
-const ROW_HEIGHT = 32
-const ROW_GAP_HEIGHT = 4
-const DATA_CONTAINER_HEIGHT =
-  (ROW_HEIGHT + ROW_GAP_HEIGHT) * (MAX_ITEMS - 1) + ROW_HEIGHT
-
-export const DEFAULT_METRIC_COLUMN_WIDTH = 'w-16 min-w-16'
-const VISITORS_WITH_PERCENTAGE_COLUMN_WIDTH = 'w-32 min-w-32'
-
-const BAR_METRIC = 'visitors'
-
-type IndexBreakdownProps = SharedBreakdownReportProps & {
-  metricColumnWidth?: string
-  DimensionElement: (props: DimensionCellWithBarProps) => ReactNode
-  onDataReady?: (data: QueryApiResponse) => void
-  hideMetricsOnMobile?: Metric[]
-}
-
-export function IndexBreakdown({
-  metrics,
-  dimensions,
-  DimensionElement,
-  dimensionLabel,
-  alwaysOnFilters,
-  onDataReady,
-  metricColumnWidth = DEFAULT_METRIC_COLUMN_WIDTH,
-  bundlePercentageWithVisitors = true,
-  hideMetricsIfAllNull,
-  hideMetricsOnMobile,
-  getStatsQuery
-}: IndexBreakdownProps) {
-  const site = useSiteContext()
-  const { dashboardState } = useDashboardStateContext()
-  const [visible, setVisible] = useState(false)
-
-  const statsReportQueryKey: StatsReportQueryKey = [
-    dimensions.join(',') as StatsReportId,
-    {
-      dashboardState,
-      reportParams: {
-        metrics,
-        dimensions,
-        order_by: [['visitors', 'desc'], ...dimensionOrderBy(dimensions)],
-        alwaysOnFilters,
-        pagination: { limit: MAX_ITEMS, offset: 0 }
-      }
-    }
-  ]
-
-  const { apiState, isRealtimeSilentUpdate } = useQueryApi(
-    site,
-    statsReportQueryKey,
-    { enabled: visible, getStatsQuery }
-  )
-
-  useEffect(() => {
-    if (apiState.data && typeof onDataReady === 'function') {
-      onDataReady(apiState.data)
-    }
-  }, [apiState.data, onDataReady])
-
-  const query: QueryResultQuery | null = apiState.data?.query ?? null
-
-  const barMetricIndex = query
-    ? query.metrics.findIndex((m) => m === BAR_METRIC)
-    : null
-
-  const barMaxValue = useMemo(() => {
-    const rows = apiState.data?.results ?? []
-    return barMetricIndex === null
-      ? null
-      : Math.max(...rows.map((r) => r.metrics[barMetricIndex] as number))
-  }, [apiState.data, barMetricIndex])
-
-  const metricLabelFor = useCallback(
-    (metric: Metric): string => {
-      return getBreakdownMetricLabel(metric, {
-        hasConversionGoalFilter: hasConversionGoalFilter(dashboardState),
-        isRealtime: isRealTimeDashboard(dashboardState),
-        dimensions: dimensions
-      })
-    },
-    [dashboardState, dimensions]
-  )
-
-  const columnsHiddenForAllNull = useColumnsHiddenForAllNull(
-    apiState.data?.results,
-    query,
-    hideMetricsIfAllNull
-  )
-
-  const columns = useMemo((): ColumnConfiguration<QueryResultRow>[] | null => {
-    if (!query || barMetricIndex === null || barMaxValue === null) return null
-
-    // Only render columns for metrics the API actually returned. When
-    // bundlePercentageWithVisitors is on (default), `percentage` is shown
-    // inline in the Visitors cell rather than as its own column.
-    const filteredMetrics = query.metrics.filter((m) => {
-      if (columnsHiddenForAllNull.has(m)) return false
-      return !(bundlePercentageWithVisitors && m === 'percentage')
-    })
-
-    const filterDimension = query.dimensions[0] as NonTimeDimension
-
-    const hasPercentage = query.metrics.includes('percentage')
-    const isVisitorsWithPercentageCell = (m: Metric) =>
-      bundlePercentageWithVisitors && hasPercentage && m === 'visitors'
-
-    return [
-      {
-        key: 'dimension',
-        renderLabel: () => dimensionLabel,
-        renderCell: (row, isActive) => (
-          <DimensionElement
-            filterDimension={filterDimension}
-            row={row}
-            barWidthPercent={
-              ((row.metrics[barMetricIndex] as number) / barMaxValue) * 100
-            }
-            isActive={isActive}
-          />
-        ),
-        align: 'left'
-      },
-      ...filteredMetrics.map(
-        (metric): ColumnConfiguration<QueryResultRow> => ({
-          key: metric,
-          renderLabel: () => metricLabelFor(metric),
-          hideOnMobile: hideMetricsOnMobile?.includes(metric),
-          renderCell: (row, isActive) => {
-            if (isVisitorsWithPercentageCell(metric)) {
-              return (
-                <VisitorsWithPercentageCell
-                  row={row}
-                  query={query}
-                  isActive={isActive}
-                />
-              )
-            } else {
-              return (
-                <MetricValueCell
-                  row={row}
-                  metric={metric}
-                  metricLabel={metricLabelFor(metric)}
-                  query={query}
-                />
-              )
-            }
-          },
-          width: isVisitorsWithPercentageCell(metric)
-            ? VISITORS_WITH_PERCENTAGE_COLUMN_WIDTH
-            : metricColumnWidth,
-          align: 'right'
-        })
-      )
-    ]
-  }, [
-    dimensionLabel,
-    DimensionElement,
-    barMetricIndex,
-    metricLabelFor,
-    barMaxValue,
-    query,
-    metricColumnWidth,
-    bundlePercentageWithVisitors,
-    columnsHiddenForAllNull,
-    hideMetricsOnMobile
-  ])
-
-  return (
-    <LazyLoader onVisible={() => setVisible(true)}>
-      <IndexBreakdownRenderer<QueryResultRow>
-        {...apiState}
-        rows={apiState.data?.results?.slice(0, MAX_ITEMS) ?? []}
-        getDimensionValue={(row) => row.dimensions.join(',')}
-        isRealtimeSilentUpdate={isRealtimeSilentUpdate}
-        columns={columns}
-      />
-    </LazyLoader>
-  )
-}
-
-export type DimensionCellWithBarProps = {
-  filterDimension: NonTimeDimension
-  row: QueryResultRow
-  barWidthPercent: number
-  isActive?: boolean
-}
-
-export const DimensionCellWithBar = ({
-  text,
-  icon,
-  onClick,
-  externalLink,
-  getFilterInfo,
-  filterDimension,
-  barWidthPercent,
-  barClassName,
-  row
-}: {
-  text: string
-  icon?: ReactNode
-  onClick?: () => void
-  externalLink?: ReactNode
-  getFilterInfo: GetFilterInfo
-  barClassName: string
-} & DimensionCellWithBarProps) => (
-  <Bar barWidthPercent={barWidthPercent} className={barClassName}>
-    <div className="flex justify-start items-center gap-x-1.5 w-full">
-      <DrilldownLink
-        onClick={onClick}
-        filterInfo={getFilterInfo(filterDimension, row)}
-        className="max-w-max w-full flex items-center md:overflow-hidden"
-        icon={icon}
-        textClassName="w-full md:truncate"
-      >
-        {text}
-      </DrilldownLink>
-      {externalLink}
-    </div>
-  </Bar>
-)
-
-function VisitorsWithPercentageCell({
-  row,
-  query,
-  isActive
-}: {
-  row: QueryResultRow
-  query: QueryResultQuery
-  isActive?: boolean
-}) {
-  const portalRef = useBodyPortalRef()
-
-  const { value: visitorsValue, comparison: visitorsComparison } =
-    extractMetricValue(row, query, 'visitors')
-  const { value: percentageValue, comparison: percentageComparison } =
-    extractMetricValue(row, query, 'percentage')
-
-  const visitorsShortFormatter = MetricFormatterShort['visitors']
-  const visitorsLongFormatter = MetricFormatterLong['visitors']
-  const percentageFormatter = MetricFormatterShort['percentage']
-
-  const isVisitorsAbbreviated =
-    visitorsValue !== null &&
-    visitorsShortFormatter(visitorsValue) !==
-      visitorsLongFormatter(visitorsValue)
-
-  const showVisitorsTooltip = !!visitorsComparison || isVisitorsAbbreviated
-  const showPercentageTooltip = !!percentageComparison
-
-  const dateRangeLabel = formatDateRangeLabel(query.date_range)
-  const comparisonDateRangeLabel = query.comparison_date_range
-    ? formatDateRangeLabel(query.comparison_date_range)
-    : null
-
-  const percentageCell = (
-    <span
-      data-testid="metric-value"
-      className={classNames('block w-full text-gray-500 dark:text-gray-400', {
-        'translate-x-0 opacity-100 transition-all duration-150': isActive,
-        'translate-x-[100%] opacity-0 transition-all duration-150 md:group-hover/report:translate-x-0 md:group-hover/report:opacity-100':
-          !isActive
-      })}
-    >
-      {percentageFormatter(percentageValue)}
-      {percentageComparison && (
-        <ChangeArrow
-          change={percentageComparison.change}
-          metric={'percentage' as Metric}
-          className="inline-block pl-1 w-4"
-          hideNumber
-        />
-      )}
-    </span>
-  )
-
-  const percentageWithTooltip = showPercentageTooltip ? (
-    <Tooltip
-      containerRef={portalRef as React.RefObject<HTMLElement>}
-      info={
-        <MetricValueTooltipContent
-          value={percentageValue}
-          comparison={percentageComparison}
-          metric={'percentage'}
-          metricLabel="Percentage"
-          dateRangeLabel={dateRangeLabel}
-          comparisonDateRangeLabel={comparisonDateRangeLabel}
-        />
-      }
-    >
-      {percentageCell}
-    </Tooltip>
-  ) : (
-    percentageCell
-  )
-
-  const visitorsCell = (
-    <span
-      className={classNames('block w-full', {
-        'transition-transform duration-150 translate-x-0': isActive,
-        'transition-transform duration-150 translate-x-[100%] md:group-hover/report:translate-x-0':
-          !isActive
-      })}
-      data-testid="metric-value"
-    >
-      {visitorsShortFormatter(visitorsValue)}
-      {visitorsComparison && (
-        <ChangeArrow
-          change={visitorsComparison.change}
-          metric={'visitors'}
-          className="inline-block pl-1 w-4"
-          hideNumber
-        />
-      )}
-    </span>
-  )
-
-  const visitorsWithTooltip = showVisitorsTooltip ? (
-    <Tooltip
-      containerRef={portalRef as React.RefObject<HTMLElement>}
-      info={
-        <MetricValueTooltipContent
-          value={visitorsValue}
-          comparison={visitorsComparison}
-          metric={'visitors'}
-          metricLabel="Visitors"
-          dateRangeLabel={dateRangeLabel}
-          comparisonDateRangeLabel={comparisonDateRangeLabel}
-        />
-      }
-    >
-      {visitorsCell}
-    </Tooltip>
-  ) : (
-    visitorsCell
-  )
-
-  return (
-    <div
-      className={
-        'flex w-full font-medium text-sm block text-gray-800 dark:text-gray-200'
-      }
-    >
-      <div className="w-1/2">{visitorsWithTooltip}</div>
-      <div className="w-1/2">{percentageWithTooltip}</div>
-    </div>
-  )
-}
-
-function MetricValueCell({
-  row,
-  metric,
-  metricLabel,
-  query
-}: {
-  row: QueryResultRow
-  metric: Metric
-  metricLabel: string
-  query: QueryResultQuery
-}) {
-  const portalRef = useBodyPortalRef()
-
-  const { value, comparison } = extractMetricValue(row, query, metric)
-
-  const shortFormatter = MetricFormatterShort[metric]
-  const longFormatter = MetricFormatterLong[metric]
-
-  const isAbbreviated =
-    value !== null && shortFormatter(value) !== longFormatter(value)
-  const showTooltip = !!comparison || isAbbreviated
-
-  const valueContent = (
-    <MetricValueWrapper className={showTooltip ? 'cursor-default' : undefined}>
-      {shortFormatter(value)}
-      {comparison && (
-        <ChangeArrow
-          change={comparison.change}
-          metric={metric}
-          className="inline-block pl-1 w-4"
-          hideNumber
-        />
-      )}
-    </MetricValueWrapper>
-  )
-
-  if (!showTooltip) return valueContent
-
-  const dateRangeLabel = formatDateRangeLabel(query.date_range)
-  const comparisonDateRangeLabel = query.comparison_date_range
-    ? formatDateRangeLabel(query.comparison_date_range)
-    : null
-
-  return (
-    <Tooltip
-      containerRef={portalRef as React.RefObject<HTMLElement>}
-      info={
-        <MetricValueTooltipContent
-          value={value}
-          comparison={comparison}
-          metric={metric}
-          metricLabel={metricLabel}
-          dateRangeLabel={dateRangeLabel}
-          comparisonDateRangeLabel={comparisonDateRangeLabel}
-        />
-      }
-    >
-      {valueContent}
-    </Tooltip>
-  )
-}
-
-export function IndexBreakdownRenderer<TRow>({
-  rows,
-  getDimensionValue,
-  isPending,
-  isPlaceholderData,
-  isRealtimeSilentUpdate,
-  columns
-}: {
-  rows: TRow[]
-  getDimensionValue: (row: TRow) => string
-  isPending: boolean
-  isPlaceholderData: boolean
-  isRealtimeSilentUpdate: boolean
-  columns: ColumnConfiguration<TRow>[] | null
-}) {
-  const [tappedRow, setTappedRow] = useState<string | null>(null)
-
-  if (!columns || isPending || (isPlaceholderData && !isRealtimeSilentUpdate)) {
-    return (
-      <div
-        key="loading"
-        className="w-full flex flex-col justify-center"
-        style={{ minHeight: `${MIN_HEIGHT}px` }}
-      >
-        <div className="mx-auto loading">
-          <div />
-        </div>
-      </div>
-    )
-  }
-
-  if (rows.length === 0) {
-    return (
-      <div
-        key="empty"
-        className="w-full h-full flex flex-col justify-center"
-        style={{ minHeight: `${MIN_HEIGHT}px` }}
-      >
-        <div className="mx-auto font-medium text-gray-500 dark:text-gray-400">
-          No data yet
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      key="data"
-      className={classNames('h-full flex flex-col', FADE_IN_CLASSNAME)}
-    >
-      <div
-        style={{ height: ROW_HEIGHT }}
-        className="pt-3 w-full text-xs font-medium text-gray-500 dark:text-gray-400 flex items-center"
-      >
-        {columns.map((col) => (
-          <div
-            key={col.key}
-            data-testid="report-header"
-            className={classNames(
-              col.width ?? 'grow w-full',
-              col.align === 'right' ? 'text-right' : 'truncate',
-              col.hideOnMobile && 'hidden md:block'
-            )}
-          >
-            {col.renderLabel()}
-          </div>
-        ))}
-      </div>
-      <div
-        className="group/report"
-        style={{ minHeight: DATA_CONTAINER_HEIGHT }}
-      >
-        <FlipMove disableAllAnimations={!isRealtimeSilentUpdate}>
-          {rows.map((row) => {
-            const dimensionValue = getDimensionValue(row)
-            const isActive = tappedRow === dimensionValue
-
-            const handleClick = (e: React.MouseEvent) => {
-              if (
-                window.innerWidth < 768 &&
-                !(e.target as HTMLElement).closest('a')
-              ) {
-                setTappedRow(isActive ? null : dimensionValue)
-              }
-            }
-
-            return (
-              <div key={dimensionValue} style={{ minHeight: ROW_HEIGHT }}>
-                <div
-                  data-testid="report-row"
-                  className="group/row flex w-full items-center hover:bg-gray-100/60 dark:hover:bg-gray-850 rounded-sm md:cursor-default cursor-pointer"
-                  style={{ marginTop: ROW_GAP_HEIGHT }}
-                  onClick={handleClick}
-                >
-                  {columns.map((col) => (
-                    <div
-                      key={col.key}
-                      className={classNames(
-                        col.width ?? 'grow w-full',
-                        col.align === 'right' ? 'text-right' : 'md:truncate',
-                        col.hideOnMobile && 'hidden md:block'
-                      )}
-                    >
-                      {col.renderCell(row, isActive)}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )
-          })}
-        </FlipMove>
-      </div>
-    </div>
-  )
-}
-
-export const Bar = ({
-  barWidthPercent,
-  className,
-  children
-}: {
-  barWidthPercent: number
-  className: string
-  children: ReactNode
-}) => (
-  <div className="w-full h-full relative">
-    <div
-      className={classNames(
-        `absolute top-0 left-0 h-full rounded-sm dark:bg-gray-500/15 dark:group-hover/row:bg-gray-500/30`,
-        className
-      )}
-      style={{ width: `${barWidthPercent}%` }}
-    ></div>
-    <div className="px-2 py-1.5 text-sm dark:text-gray-300 relative z-9 break-all">
-      {children}
-    </div>
-  </div>
-)

assets/js/dashboard/stats/reports/metric-formatter.ts

@@ -1,70 +0,0 @@
-import { Metric } from '../metrics'
-import { formatMoneyShort, formatMoneyLong } from '../../util/money'
-import {
-  numberShortFormatter,
-  durationFormatter,
-  percentageFormatter,
-  numberLongFormatter,
-  nullable
-} from '../../util/number-formatter'
-
-export type FormattableMetric = Metric | 'current_visitors' | 'conversions'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ValueType = any
-
-export const MetricFormatterShort: Record<
-  FormattableMetric,
-  (value: ValueType) => string
-> = {
-  events: nullable(numberShortFormatter),
-  pageviews: numberShortFormatter,
-  total_visitors: numberShortFormatter,
-  current_visitors: numberShortFormatter,
-  views_per_visit: numberShortFormatter,
-  visitors: numberShortFormatter,
-  visits: numberShortFormatter,
-
-  conversions: numberShortFormatter,
-
-  time_on_page: nullable(durationFormatter),
-  visit_duration: nullable(durationFormatter),
-
-  bounce_rate: percentageFormatter,
-  conversion_rate: percentageFormatter,
-  scroll_depth: percentageFormatter,
-  exit_rate: percentageFormatter,
-  group_conversion_rate: percentageFormatter,
-  percentage: percentageFormatter,
-
-  average_revenue: formatMoneyShort,
-  total_revenue: formatMoneyShort
-}
-
-export const MetricFormatterLong: Record<
-  FormattableMetric,
-  (value: ValueType) => string
-> = {
-  events: nullable(numberLongFormatter),
-  pageviews: numberLongFormatter,
-  total_visitors: numberLongFormatter,
-  current_visitors: numberShortFormatter,
-  views_per_visit: numberLongFormatter,
-  visitors: numberLongFormatter,
-  visits: numberLongFormatter,
-
-  conversions: numberLongFormatter,
-
-  time_on_page: nullable(durationFormatter),
-  visit_duration: nullable(durationFormatter),
-
-  bounce_rate: percentageFormatter,
-  conversion_rate: percentageFormatter,
-  scroll_depth: percentageFormatter,
-  exit_rate: percentageFormatter,
-  group_conversion_rate: percentageFormatter,
-  percentage: percentageFormatter,
-
-  average_revenue: formatMoneyLong,
-  total_revenue: formatMoneyLong
-}

assets/js/dashboard/stats/reports/report-header.js

@@ -1,9 +0,0 @@
-import React from 'react'
-
-export function ReportHeader({ children }) {
-  return (
-    <div className="w-full flex justify-between border-b border-gray-200 dark:border-gray-750">
-      {children}
-    </div>
-  )
-}

assets/js/dashboard/stats/reports/report-layout.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export function ReportLayout({
-  children,
-  testId,
-  className
-}: {
-  children: React.ReactNode
-  testId?: string
-  className?: string
-}) {
-  return (
-    <div
-      data-testid={testId}
-      className={classNames(
-        'relative min-h-[430px] w-full p-5 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem',
-        className
-      )}
-    >
-      {children}
-      <div data-testid="report-end"></div>
-    </div>
-  )
-}

assets/js/dashboard/stats/reports/reports-config.ts

@@ -1,454 +0,0 @@
-import { ApiFilter, NonTimeDimension } from '../../stats-query'
-import { Metric } from '../metrics'
-
-export type MetricContext = {
-  hasConversionGoalFilter?: boolean
-  isRealtime?: boolean
-  isCsv?: boolean
-  isDetailed?: boolean
-  isRevenueAvailable?: boolean
-  hasEventFilters?: boolean
-}
-
-export type MetricsByContext = {
-  realtimeMetrics: Metric[]
-  defaultIndexMetrics: Metric[]
-  defaultDetailedMetrics: Metric[]
-  defaultCsvMetrics: Metric[]
-  goalFilterIndexMetrics: Metric[]
-  goalFilterDetailedMetrics: Metric[]
-  goalFilterCsvMetrics: Metric[]
-}
-
-export type BreakdownReportConfig = {
-  dimensions: [NonTimeDimension, ...NonTimeDimension[]]
-  getMetrics: (context: MetricContext) => Metric[]
-  detailsTitle: string
-  detailsPath: string
-  dimensionLabel: string
-  alwaysOnFilters?: ApiFilter[]
-  searchDimension?: NonTimeDimension
-}
-
-export const COMMON_BREAKDOWN_METRICS_BY_CONTEXT: MetricsByContext = {
-  realtimeMetrics: ['visitors', 'percentage'],
-  defaultIndexMetrics: ['visitors', 'percentage'],
-  defaultDetailedMetrics: [
-    'visitors',
-    'percentage',
-    'bounce_rate',
-    'visit_duration'
-  ],
-  defaultCsvMetrics: ['visitors', 'bounce_rate', 'visit_duration'],
-  goalFilterIndexMetrics: ['visitors', 'group_conversion_rate'],
-  goalFilterDetailedMetrics: [
-    'total_visitors',
-    'visitors',
-    'group_conversion_rate'
-  ],
-  goalFilterCsvMetrics: ['visitors', 'group_conversion_rate']
-}
-
-function chooseMetrics(mbc: MetricsByContext, ctx: MetricContext): Metric[] {
-  const {
-    isRealtime,
-    isCsv,
-    isDetailed,
-    hasConversionGoalFilter,
-    isRevenueAvailable
-  } = ctx
-  if (isCsv && hasConversionGoalFilter) {
-    return mbc.goalFilterCsvMetrics
-  }
-  if (isCsv) {
-    return mbc.defaultCsvMetrics
-  }
-  if (hasConversionGoalFilter && isDetailed && isRevenueAvailable) {
-    return [
-      ...mbc.goalFilterDetailedMetrics,
-      'total_revenue',
-      'average_revenue'
-    ]
-  }
-  if (hasConversionGoalFilter && isDetailed) {
-    return mbc.goalFilterDetailedMetrics
-  }
-  if (hasConversionGoalFilter) {
-    return mbc.goalFilterIndexMetrics
-  }
-  if (isRealtime) {
-    return mbc.realtimeMetrics
-  }
-  if (isDetailed) {
-    return mbc.defaultDetailedMetrics
-  }
-  return mbc.defaultIndexMetrics
-}
-
-function createGetMetricsFn(
-  mbc: MetricsByContext
-): (context: MetricContext) => Metric[] {
-  return (ctx) => chooseMetrics(mbc, ctx)
-}
-
-export enum BreakdownReportKey {
-  'pages' = 'pages',
-  'pagesWithHostname' = 'pagesWithHostname',
-  'entryPages' = 'entryPages',
-  'entryPagesWithHostname' = 'entryPagesWithHostname',
-  'exitPages' = 'exitPages',
-  'exitPagesWithHostname' = 'exitPagesWithHostname',
-  'browsers' = 'browsers',
-  'browserVersions' = 'browserVersions',
-  'operatingSystems' = 'operatingSystems',
-  'operatingSystemVersions' = 'operatingSystemVersions',
-  'screenSizes' = 'screenSizes',
-  'channels' = 'channels',
-  'sources' = 'sources',
-  'referrers' = 'referrers',
-  'utmMediums' = 'utmMediums',
-  'utmSources' = 'utmSources',
-  'utmCampaigns' = 'utmCampaigns',
-  'utmContents' = 'utmContents',
-  'utmTerms' = 'utmTerms',
-  'countries' = 'countries',
-  'regions' = 'regions',
-  'cities' = 'cities',
-  'goals' = 'goals'
-}
-
-export const BREAKDOWN_REPORTS: Record<
-  BreakdownReportKey,
-  BreakdownReportConfig
-> = {
-  [BreakdownReportKey.pages]: {
-    dimensions: ['event:page'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: [
-        'visitors',
-        'percentage',
-        'pageviews',
-        'bounce_rate',
-        'time_on_page',
-        'scroll_depth'
-      ],
-      defaultCsvMetrics: [
-        'visitors',
-        'pageviews',
-        'bounce_rate',
-        'time_on_page',
-        'scroll_depth'
-      ]
-    }),
-    detailsTitle: 'Top pages',
-    detailsPath: 'pages',
-    dimensionLabel: 'Page'
-  },
-  [BreakdownReportKey.pagesWithHostname]: {
-    dimensions: ['event:hostname', 'event:page'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: [
-        'visitors',
-        'percentage',
-        'pageviews',
-        'bounce_rate',
-        'time_on_page',
-        'scroll_depth'
-      ],
-      defaultCsvMetrics: [
-        'visitors',
-        'pageviews',
-        'bounce_rate',
-        'time_on_page',
-        'scroll_depth'
-      ]
-    }),
-    detailsTitle: 'Top pages',
-    detailsPath: 'pages-with-hostname',
-    dimensionLabel: 'URL',
-    searchDimension: 'event:page'
-  },
-  [BreakdownReportKey.entryPages]: {
-    dimensions: ['visit:entry_page'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: [
-        'visitors',
-        'percentage',
-        'visits',
-        'bounce_rate',
-        'visit_duration'
-      ],
-      defaultCsvMetrics: ['visitors', 'visits', 'bounce_rate', 'visit_duration']
-    }),
-    detailsTitle: 'Entry pages',
-    detailsPath: 'entry-pages',
-    dimensionLabel: 'Entry page',
-    alwaysOnFilters: [['is_not', 'visit:entry_page', ['']]]
-  },
-  [BreakdownReportKey.entryPagesWithHostname]: {
-    dimensions: ['visit:entry_page_hostname', 'visit:entry_page'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: [
-        'visitors',
-        'percentage',
-        'visits',
-        'bounce_rate',
-        'visit_duration'
-      ],
-      defaultCsvMetrics: ['visitors', 'visits', 'bounce_rate', 'visit_duration']
-    }),
-    detailsTitle: 'Entry pages',
-    detailsPath: 'entry-pages-with-hostname',
-    dimensionLabel: 'URL',
-    alwaysOnFilters: [['is_not', 'visit:entry_page', ['']]],
-    searchDimension: 'visit:entry_page'
-  },
-  [BreakdownReportKey.exitPages]: {
-    dimensions: ['visit:exit_page'],
-    getMetrics: (ctx) => {
-      const base = chooseMetrics(
-        {
-          ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-          defaultDetailedMetrics: [
-            'visitors',
-            'percentage',
-            'visits',
-            'exit_rate'
-          ],
-          defaultCsvMetrics: ['visitors', 'visits', 'exit_rate']
-        },
-        ctx
-      )
-
-      return ctx.hasEventFilters ? base.filter((m) => m !== 'exit_rate') : base
-    },
-    detailsTitle: 'Exit pages',
-    detailsPath: 'exit-pages',
-    dimensionLabel: 'Exit page',
-    alwaysOnFilters: [['is_not', 'visit:exit_page', ['']]]
-  },
-  [BreakdownReportKey.exitPagesWithHostname]: {
-    dimensions: ['visit:exit_page_hostname', 'visit:exit_page'],
-    getMetrics: (ctx) => {
-      const base = chooseMetrics(
-        {
-          ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-          defaultDetailedMetrics: [
-            'visitors',
-            'percentage',
-            'visits',
-            'exit_rate'
-          ],
-          defaultCsvMetrics: ['visitors', 'visits', 'exit_rate']
-        },
-        ctx
-      )
-
-      return ctx.hasEventFilters ? base.filter((m) => m !== 'exit_rate') : base
-    },
-    detailsTitle: 'Exit pages',
-    detailsPath: 'exit-pages-with-hostname',
-    dimensionLabel: 'URL',
-    alwaysOnFilters: [['is_not', 'visit:exit_page', ['']]],
-    searchDimension: 'visit:exit_page'
-  },
-  [BreakdownReportKey.browsers]: {
-    dimensions: ['visit:browser'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Browsers',
-    detailsPath: 'browsers',
-    dimensionLabel: 'Browser'
-  },
-  [BreakdownReportKey.browserVersions]: {
-    dimensions: ['visit:browser_version', 'visit:browser'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Browser versions',
-    detailsPath: 'browser-versions',
-    dimensionLabel: 'Browser version'
-  },
-  [BreakdownReportKey.operatingSystems]: {
-    dimensions: ['visit:os'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Operating systems',
-    detailsPath: 'operating-systems',
-    dimensionLabel: 'Operating system'
-  },
-  [BreakdownReportKey.operatingSystemVersions]: {
-    dimensions: ['visit:os_version', 'visit:os'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Operating system versions',
-    detailsPath: 'operating-system-versions',
-    dimensionLabel: 'Operating system version'
-  },
-  [BreakdownReportKey.screenSizes]: {
-    dimensions: ['visit:device'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Devices',
-    detailsPath: 'screen-sizes',
-    dimensionLabel: 'Device'
-  },
-  [BreakdownReportKey.channels]: {
-    dimensions: ['visit:channel'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'Acquisition channels',
-    detailsPath: 'channels',
-    dimensionLabel: 'Channel'
-  },
-  [BreakdownReportKey.sources]: {
-    dimensions: ['visit:source'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'Sources',
-    detailsPath: 'sources',
-    dimensionLabel: 'Source'
-  },
-  [BreakdownReportKey.referrers]: {
-    dimensions: ['visit:referrer'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'Referrer drilldown',
-    detailsPath: 'referrers/:referrer',
-    dimensionLabel: 'Referrer'
-  },
-  [BreakdownReportKey.utmMediums]: {
-    dimensions: ['visit:utm_medium'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'UTM mediums',
-    detailsPath: 'utm_mediums',
-    dimensionLabel: 'UTM medium',
-    alwaysOnFilters: [['is_not', 'visit:utm_medium', ['']]]
-  },
-  [BreakdownReportKey.utmSources]: {
-    dimensions: ['visit:utm_source'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'UTM sources',
-    detailsPath: 'utm_sources',
-    dimensionLabel: 'UTM source',
-    alwaysOnFilters: [['is_not', 'visit:utm_source', ['']]]
-  },
-  [BreakdownReportKey.utmCampaigns]: {
-    dimensions: ['visit:utm_campaign'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'UTM campaigns',
-    detailsPath: 'utm_campaigns',
-    dimensionLabel: 'UTM campaign',
-    alwaysOnFilters: [['is_not', 'visit:utm_campaign', ['']]]
-  },
-  [BreakdownReportKey.utmContents]: {
-    dimensions: ['visit:utm_content'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'UTM contents',
-    detailsPath: 'utm_contents',
-    dimensionLabel: 'UTM content',
-    alwaysOnFilters: [['is_not', 'visit:utm_content', ['']]]
-  },
-  [BreakdownReportKey.utmTerms]: {
-    dimensions: ['visit:utm_term'],
-    getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'UTM terms',
-    detailsPath: 'utm_terms',
-    dimensionLabel: 'UTM term',
-    alwaysOnFilters: [['is_not', 'visit:utm_term', ['']]]
-  },
-  [BreakdownReportKey.countries]: {
-    dimensions: ['visit:country_name', 'visit:country'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Countries',
-    detailsPath: 'countries',
-    dimensionLabel: 'Country',
-    alwaysOnFilters: [['is_not', 'visit:country', ['\0\0', 'ZZ']]]
-  },
-  [BreakdownReportKey.regions]: {
-    // the 3rd dimension "visit:country" is needed to render the country flag
-    dimensions: ['visit:region_name', 'visit:region', 'visit:country'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Regions',
-    detailsPath: 'regions',
-    dimensionLabel: 'Region',
-    alwaysOnFilters: [['is_not', 'visit:region', ['']]]
-  },
-  [BreakdownReportKey.cities]: {
-    // the 3rd dimension "visit:country" is needed to render the country flag
-    dimensions: ['visit:city_name', 'visit:city', 'visit:country'],
-    getMetrics: createGetMetricsFn({
-      ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultCsvMetrics: ['visitors']
-    }),
-    detailsTitle: 'Cities',
-    detailsPath: 'cities',
-    dimensionLabel: 'City',
-    alwaysOnFilters: [['is_not', 'visit:city', [0]]]
-  },
-  [BreakdownReportKey.goals]: {
-    dimensions: ['event:goal'],
-    getMetrics: (ctx: MetricContext) => {
-      if (ctx.isCsv) {
-        return ['visitors', 'events']
-      }
-      if (ctx.isRevenueAvailable) {
-        return [
-          'visitors',
-          'events',
-          'conversion_rate',
-          'total_revenue',
-          'average_revenue'
-        ]
-      }
-      return ['visitors', 'events', 'conversion_rate']
-    },
-    detailsTitle: 'Goal conversions',
-    detailsPath: 'conversions',
-    dimensionLabel: 'Goal'
-  }
-}
-
-export function customPropsReportConfig(
-  propKey: string
-): BreakdownReportConfig {
-  return {
-    dimensions: [`event:props:${propKey}` as NonTimeDimension],
-    getMetrics: getCustomPropsMetrics,
-    detailsTitle: 'Custom property breakdown',
-    detailsPath: `custom-prop-values/${propKey}`,
-    dimensionLabel: propKey
-  }
-}
-
-export function getCustomPropsMetrics(ctx: MetricContext): Metric[] {
-  if (ctx.hasConversionGoalFilter && ctx.isRevenueAvailable) {
-    return [
-      'visitors',
-      'events',
-      'conversion_rate',
-      'total_revenue',
-      'average_revenue'
-    ]
-  }
-  if (ctx.hasConversionGoalFilter) {
-    return ['visitors', 'events', 'conversion_rate']
-  }
-  return ['visitors', 'events', 'percentage']
-}

assets/js/dashboard/stats/sources/details.tsx

@@ -1,123 +0,0 @@
-import React from 'react'
-import { revenueAvailable } from '../../dashboard-state'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import {
-  hasConversionGoalFilter,
-  isRealTimeDashboard
-} from '../../util/filters'
-import { defaultGetFilterInfo, getReferrerUrlFilterInfo } from '../breakdowns'
-import {
-  BREAKDOWN_REPORTS,
-  BreakdownReportKey
-} from '../reports/reports-config'
-import {
-  DetailsBreakdown,
-  DimensionCell,
-  DimensionCellProps
-} from '../modals/details-breakdown'
-import Modal from '../modals/modal'
-import { SourceFavicon } from './source-favicon'
-import { DIRECT_NONE } from '.'
-import { DetailsExternalLink } from '../pages/external-link'
-
-type SourcesReportKey =
-  | BreakdownReportKey.channels
-  | BreakdownReportKey.sources
-  | BreakdownReportKey.referrers
-  | BreakdownReportKey.utmMediums
-  | BreakdownReportKey.utmSources
-  | BreakdownReportKey.utmCampaigns
-  | BreakdownReportKey.utmContents
-  | BreakdownReportKey.utmTerms
-
-export function SourcesDetails({ reportKey }: { reportKey: SourcesReportKey }) {
-  const { dashboardState } = useDashboardStateContext()
-  const site = useSiteContext()
-
-  const reportConfig = BREAKDOWN_REPORTS[reportKey]
-
-  /*global BUILD_EXTRA*/
-  const isRevenueAvailable =
-    BUILD_EXTRA && revenueAvailable(dashboardState, site)
-
-  const metrics = reportConfig.getMetrics({
-    hasConversionGoalFilter: hasConversionGoalFilter(dashboardState),
-    isRealtime: isRealTimeDashboard(dashboardState),
-    isDetailed: true,
-    isRevenueAvailable: isRevenueAvailable
-  })
-
-  const DimensionElement =
-    reportKey === BreakdownReportKey.sources
-      ? SourcesDimensionCell
-      : reportKey === BreakdownReportKey.referrers
-        ? ReferrerUrlDimensionCell
-        : SimpleDimensionCell
-
-  return (
-    <Modal>
-      <DetailsBreakdown
-        title={reportConfig.detailsTitle}
-        dimensionLabel={reportConfig.dimensionLabel}
-        dimensions={reportConfig.dimensions}
-        metrics={metrics}
-        alwaysOnFilters={reportConfig.alwaysOnFilters}
-        defaultOrderBy={[['visitors', 'desc']]}
-        DimensionElement={DimensionElement}
-      />
-    </Modal>
-  )
-}
-
-const SourcesDimensionCell = (props: DimensionCellProps) => {
-  return (
-    <DimensionCell
-      icon={
-        <SourceFavicon
-          name={props.row.dimensions[0]}
-          className="size-4 mr-2 align-middle inline"
-        />
-      }
-      text={props.row.dimensions[0]}
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}
-
-const ReferrerUrlDimensionCell = (props: DimensionCellProps) => {
-  const dimensionValue = props.row.dimensions[0]
-
-  const externalUrl =
-    dimensionValue === DIRECT_NONE ? null : `https://${dimensionValue}`
-
-  return (
-    <DimensionCell
-      text={dimensionValue}
-      icon={
-        <SourceFavicon
-          name={dimensionValue}
-          className="size-4 mr-2 align-middle inline"
-        />
-      }
-      externalLink={
-        externalUrl && (
-          <DetailsExternalLink href={externalUrl} isActive={props.isActive} />
-        )
-      }
-      getFilterInfo={getReferrerUrlFilterInfo}
-      {...props}
-    />
-  )
-}
-
-const SimpleDimensionCell = (props: DimensionCellProps) => {
-  return (
-    <DimensionCell
-      text={props.row.dimensions[0]}
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}

assets/js/dashboard/stats/sources/fetch-search-terms.tsx

@@ -1,133 +0,0 @@
-import { InfiniteData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import { DashboardState } from '../../dashboard-state'
-import * as api from '../../api'
-import { ApiError } from '../../api'
-import * as url from '../../util/url'
-import { getStaleTime, PAGINATION_LIMIT } from '../../hooks/api-client'
-
-const INDEX_SEARCH_TERMS_REPORT_ID = 'index-search-terms'
-const DETAILED_SEARCH_TERMS_REPORT_ID = 'detailed-search-terms'
-const SEARCH_TERMS_ENDPOINT = '/google-search-terms'
-
-export const GOOGLE_SEARCH_TERMS_DETAILS_PATH = 'referrers/Google'
-
-type IndexSearchTermsQueryKey = [
-  typeof INDEX_SEARCH_TERMS_REPORT_ID,
-  { dashboardState: DashboardState }
-]
-
-type DetailedSearchTermsQueryKey = [
-  typeof DETAILED_SEARCH_TERMS_REPORT_ID,
-  { dashboardState: DashboardState; search?: string }
-]
-
-export type SearchTermsResultItem = {
-  name: string
-  position: number
-  visitors: number
-  ctr: number
-  impressions: number
-}
-export type SearchTermsSuccessResponse = {
-  results: SearchTermsResultItem[]
-}
-
-export type SearchTermsErrorCode =
-  | 'not_configured'
-  | 'unsupported_filters'
-  | 'period_too_recent'
-export type SearchTermsErrorPayload = {
-  error_code: SearchTermsErrorCode
-  is_admin: boolean
-}
-
-export function useIndexGoogleSearchTermsQuery({
-  enabled
-}: {
-  enabled: boolean
-}) {
-  const site = useSiteContext()
-  const { dashboardState } = useDashboardStateContext()
-
-  const searchTermsQueryKey: IndexSearchTermsQueryKey = [
-    INDEX_SEARCH_TERMS_REPORT_ID,
-    { dashboardState }
-  ]
-
-  return useQuery<
-    SearchTermsSuccessResponse,
-    ApiError,
-    SearchTermsSuccessResponse,
-    IndexSearchTermsQueryKey
-  >({
-    queryKey: searchTermsQueryKey,
-    enabled: enabled,
-    retry: false,
-    queryFn: ({ queryKey }) => {
-      return api.get(
-        url.apiPath(site, SEARCH_TERMS_ENDPOINT),
-        queryKey[1].dashboardState
-      )
-    },
-    placeholderData: (previousData) => previousData,
-    staleTime: ({ queryKey }) => {
-      return getStaleTime({
-        siteTimezoneOffset: site.offset,
-        siteStatsBegin: site.statsBegin,
-        ...queryKey[1].dashboardState
-      })
-    }
-  })
-}
-
-export function useDetailedGoogleSearchTermsQuery({
-  search
-}: {
-  search?: string
-}) {
-  const site = useSiteContext()
-  const { dashboardState } = useDashboardStateContext()
-
-  const searchTermsQueryKey: DetailedSearchTermsQueryKey = [
-    DETAILED_SEARCH_TERMS_REPORT_ID,
-    { dashboardState, search }
-  ]
-
-  return useInfiniteQuery<
-    SearchTermsSuccessResponse,
-    ApiError,
-    InfiniteData<SearchTermsSuccessResponse>,
-    DetailedSearchTermsQueryKey,
-    number
-  >({
-    queryKey: searchTermsQueryKey,
-    retry: false,
-    queryFn: ({ pageParam, queryKey }) => {
-      const { dashboardState, search } = queryKey[1]
-
-      return api.get(url.apiPath(site, SEARCH_TERMS_ENDPOINT), dashboardState, {
-        detailed: true,
-        search: search,
-        limit: PAGINATION_LIMIT,
-        page: pageParam
-      })
-    },
-    placeholderData: (previousData) => previousData,
-    getNextPageParam: (lastPageResults, _, lastPageIndex) => {
-      return lastPageResults.results.length === PAGINATION_LIMIT
-        ? lastPageIndex + 1
-        : null
-    },
-    initialPageParam: 0,
-    staleTime: ({ queryKey }) => {
-      const [_, opts] = queryKey
-      return getStaleTime({
-        siteTimezoneOffset: site.offset,
-        siteStatsBegin: site.statsBegin,
-        ...opts.dashboardState
-      })
-    }
-  })
-}

assets/js/dashboard/stats/sources/index.tsx

@@ -1,360 +0,0 @@
-import React, { useCallback, useEffect, 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 {
-  getFiltersByKeyPrefix,
-  hasConversionGoalFilter,
-  isFilteringOnFixedValue,
-  isRealTimeDashboard
-} from '../../util/filters'
-import { useDashboardStateContext } from '../../dashboard-state-context'
-import { useSiteContext } from '../../site-context'
-import { SourceFavicon } from './source-favicon'
-import { ReportLayout } from '../reports/report-layout'
-import { ReportHeader } from '../reports/report-header'
-import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
-import MoreLink from '../more-link'
-import { MoreLinkState } from '../more-link-state'
-import { DashboardState } from '../../dashboard-state'
-import {
-  BREAKDOWN_REPORTS,
-  BreakdownReportKey
-} from '../reports/reports-config'
-import {
-  DimensionCellWithBar,
-  DimensionCellWithBarProps,
-  IndexBreakdown
-} from '../reports/index-breakdown'
-import { defaultGetFilterInfo } from '../breakdowns'
-import ImportedWarningBubble from '../imported-warning-bubble'
-import { IndexExternalLink } from '../pages/external-link'
-import { SearchTerms } from './search-terms'
-import {
-  GOOGLE_SEARCH_TERMS_DETAILS_PATH,
-  SearchTermsSuccessResponse
-} from './fetch-search-terms'
-
-const BAR_COLOR = 'bg-blue-50 group-hover/row:bg-blue-100'
-const MAX_DIMENSION_LENGTH = 70
-const SEARCH_TERMS_KEY = 'searchTerms'
-export const DIRECT_NONE = 'Direct / None'
-
-const UTM_TAB_KEYS = [
-  BreakdownReportKey.utmMediums,
-  BreakdownReportKey.utmSources,
-  BreakdownReportKey.utmCampaigns,
-  BreakdownReportKey.utmContents,
-  BreakdownReportKey.utmTerms
-] as const
-
-type TabKey =
-  | BreakdownReportKey.channels
-  | BreakdownReportKey.sources
-  | (typeof UTM_TAB_KEYS)[number]
-
-type ReportKey = TabKey | BreakdownReportKey.referrers | typeof SEARCH_TERMS_KEY
-
-const isGoogleSourceFilter = (dashboardState: DashboardState) => {
-  return isFilteringOnFixedValue(dashboardState, 'source', 'Google')
-}
-
-const isFixedSourceFilter = (dashboardState: DashboardState) => {
-  return isFilteringOnFixedValue(dashboardState, 'source')
-}
-
-const getFixedSourceFilterClause = (dashboardState: DashboardState) => {
-  if (isFixedSourceFilter(dashboardState)) {
-    const [[_operation, _filterKey, clauses]] = getFiltersByKeyPrefix(
-      dashboardState,
-      'source'
-    )
-
-    return clauses[0]
-  }
-  return null
-}
-
-const getCurrentReportKey = (
-  currentTab: TabKey,
-  dashboardState: DashboardState
-): ReportKey => {
-  if (
-    currentTab === BreakdownReportKey.sources &&
-    isGoogleSourceFilter(dashboardState)
-  ) {
-    return SEARCH_TERMS_KEY
-  }
-  if (
-    currentTab === BreakdownReportKey.sources &&
-    isFixedSourceFilter(dashboardState)
-  ) {
-    return BreakdownReportKey.referrers
-  }
-  return currentTab
-}
-
-function initTab(storedMode: string): TabKey {
-  if (['channels', BreakdownReportKey.channels].includes(storedMode)) {
-    return BreakdownReportKey.channels
-  }
-  if (['utm_mediums', BreakdownReportKey.utmMediums].includes(storedMode)) {
-    return BreakdownReportKey.utmMediums
-  }
-  if (['utm_sources', BreakdownReportKey.utmSources].includes(storedMode)) {
-    return BreakdownReportKey.utmSources
-  }
-  if (['utm_campaigns', BreakdownReportKey.utmCampaigns].includes(storedMode)) {
-    return BreakdownReportKey.utmCampaigns
-  }
-  if (['utm_contents', BreakdownReportKey.utmContents].includes(storedMode)) {
-    return BreakdownReportKey.utmContents
-  }
-  if (['utm_terms', BreakdownReportKey.utmTerms].includes(storedMode)) {
-    return BreakdownReportKey.utmTerms
-  }
-  return BreakdownReportKey.sources
-}
-
-function isUtmTab(tabKey: TabKey) {
-  return (UTM_TAB_KEYS as ReadonlyArray<TabKey>).includes(tabKey)
-}
-
-export default function Sources() {
-  const site = useSiteContext()
-  const { dashboardState } = useDashboardStateContext()
-  const tabStorageKey = 'sourceTab__' + site.domain
-  const [currentTab, setTab] = useState<TabKey>(
-    initTab(storage.getItem(tabStorageKey))
-  )
-  const [currentQueryApiData, setCurrentQueryApiData] =
-    useState<api.QueryApiResponse | null>(null)
-  const [currentSearchTermsData, setCurrentSearchTermsData] =
-    useState<SearchTermsSuccessResponse | null>(null)
-
-  const previousDashboardState = usePrevious(dashboardState)
-
-  const currentReportKey = getCurrentReportKey(currentTab, dashboardState)
-
-  const setAndStoreTab = useCallback(
-    (tab: TabKey) => {
-      storage.setItem(tabStorageKey, tab)
-      setTab(tab)
-    },
-    [tabStorageKey]
-  )
-
-  function moreLinkProps() {
-    if (currentReportKey === SEARCH_TERMS_KEY) {
-      return {
-        path: GOOGLE_SEARCH_TERMS_DETAILS_PATH,
-        search: (search: string) => search
-      }
-    }
-    if (currentReportKey === BreakdownReportKey.referrers) {
-      return {
-        path: BREAKDOWN_REPORTS[currentReportKey].detailsPath,
-        params: {
-          referrer: url.maybeEncodeRouteParam(
-            getFixedSourceFilterClause(dashboardState)
-          )
-        },
-        search: (search: string) => search
-      }
-    }
-    return {
-      path: BREAKDOWN_REPORTS[currentReportKey].detailsPath,
-      search: (search: string) => search
-    }
-  }
-
-  const ChannelsDimensionCell = useCallback(
-    (props: DimensionCellWithBarProps) => (
-      <DimensionCellWithBar
-        text={url.trimURL(props.row.dimensions[0], MAX_DIMENSION_LENGTH)}
-        onClick={() => setAndStoreTab(BreakdownReportKey.sources)}
-        barClassName={BAR_COLOR}
-        getFilterInfo={defaultGetFilterInfo}
-        {...props}
-      />
-    ),
-    [setAndStoreTab]
-  )
-
-  function renderContent() {
-    if (currentReportKey === SEARCH_TERMS_KEY) {
-      return <SearchTerms onDataReady={setCurrentSearchTermsData} />
-    }
-
-    const reportConfig = BREAKDOWN_REPORTS[currentReportKey]
-
-    const metrics = reportConfig.getMetrics({
-      isRealtime: isRealTimeDashboard(dashboardState),
-      hasConversionGoalFilter: hasConversionGoalFilter(dashboardState)
-    })
-
-    const DimensionElement = {
-      [BreakdownReportKey.channels]: ChannelsDimensionCell,
-      [BreakdownReportKey.sources]: SourcesDimensionCell,
-      [BreakdownReportKey.referrers]: ReferrerUrlDimensionCell,
-      [BreakdownReportKey.utmMediums]: UtmDimensionCell,
-      [BreakdownReportKey.utmSources]: UtmDimensionCell,
-      [BreakdownReportKey.utmCampaigns]: UtmDimensionCell,
-      [BreakdownReportKey.utmContents]: UtmDimensionCell,
-      [BreakdownReportKey.utmTerms]: UtmDimensionCell
-    }[currentReportKey]
-
-    return (
-      <IndexBreakdown
-        key={currentReportKey}
-        metrics={metrics}
-        dimensions={reportConfig.dimensions}
-        dimensionLabel={reportConfig.dimensionLabel}
-        alwaysOnFilters={reportConfig.alwaysOnFilters}
-        DimensionElement={DimensionElement}
-        onDataReady={setCurrentQueryApiData}
-      />
-    )
-  }
-
-  const activeData =
-    currentReportKey === SEARCH_TERMS_KEY
-      ? currentSearchTermsData
-      : currentQueryApiData
-
-  const moreLinkState = activeData
-    ? activeData.results.length > 0
-      ? MoreLinkState.READY
-      : MoreLinkState.HIDDEN
-    : MoreLinkState.LOADING
-
-  useEffect(() => {
-    const isRemovingFilter = (filterName: string) => {
-      if (!previousDashboardState) return false
-
-      return (
-        getFiltersByKeyPrefix(previousDashboardState, filterName).length > 0 &&
-        getFiltersByKeyPrefix(dashboardState, filterName).length == 0
-      )
-    }
-
-    if (
-      currentTab == BreakdownReportKey.sources &&
-      isRemovingFilter('channel')
-    ) {
-      setAndStoreTab(BreakdownReportKey.channels)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dashboardState, currentTab])
-
-  function sourceTabLabel() {
-    if (isGoogleSourceFilter(dashboardState)) {
-      return 'Search terms'
-    } else if (isFixedSourceFilter(dashboardState)) {
-      return 'Top referrers'
-    } else {
-      return 'Sources'
-    }
-  }
-
-  return (
-    <ReportLayout testId="report-sources" className="overflow-x-hidden">
-      <ReportHeader>
-        <div className="flex gap-x-3">
-          <TabWrapper>
-            {[
-              { value: BreakdownReportKey.channels, label: 'Channels' },
-              { value: BreakdownReportKey.sources, label: sourceTabLabel() }
-            ].map(({ value, label }) => (
-              <TabButton
-                key={value}
-                onClick={() => setAndStoreTab(value as TabKey)}
-                active={currentTab === value}
-              >
-                {label}
-              </TabButton>
-            ))}
-            <DropdownTabButton
-              className="md:relative"
-              transitionClassName="md:left-auto md:w-56 md:origin-top-right"
-              active={isUtmTab(currentTab)}
-              options={UTM_TAB_KEYS.map((utmTabKey) => ({
-                label: BREAKDOWN_REPORTS[utmTabKey].detailsTitle,
-                onClick: () => setAndStoreTab(utmTabKey),
-                selected: currentTab === utmTabKey
-              }))}
-            >
-              {isUtmTab(currentTab)
-                ? BREAKDOWN_REPORTS[currentTab].detailsTitle
-                : 'Campaigns'}
-            </DropdownTabButton>
-          </TabWrapper>
-          {currentReportKey !== SEARCH_TERMS_KEY && (
-            <ImportedWarningBubble queryApiResponse={currentQueryApiData} />
-          )}
-        </div>
-        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
-      </ReportHeader>
-      {renderContent()}
-    </ReportLayout>
-  )
-}
-
-function UtmDimensionCell(props: DimensionCellWithBarProps) {
-  const displayValue = url.trimURL(
-    props.row.dimensions[0],
-    MAX_DIMENSION_LENGTH
-  )
-  return (
-    <DimensionCellWithBar
-      text={displayValue}
-      barClassName={BAR_COLOR}
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}
-
-function SourcesDimensionCell(props: DimensionCellWithBarProps) {
-  const displayValue = url.trimURL(
-    props.row.dimensions[0],
-    MAX_DIMENSION_LENGTH
-  )
-
-  return (
-    <DimensionCellWithBar
-      text={displayValue}
-      icon={
-        <SourceFavicon name={props.row.dimensions[0]} className="size-4 mr-2" />
-      }
-      barClassName={BAR_COLOR}
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}
-
-function ReferrerUrlDimensionCell(props: DimensionCellWithBarProps) {
-  const dimensionValue = props.row.dimensions[0]
-  const displayValue = url.trimURL(dimensionValue, MAX_DIMENSION_LENGTH)
-
-  const externalUrl =
-    dimensionValue === DIRECT_NONE ? null : `https://${dimensionValue}`
-
-  return (
-    <DimensionCellWithBar
-      text={displayValue}
-      icon={<SourceFavicon name={dimensionValue} className="size-4 mr-2" />}
-      externalLink={
-        externalUrl && (
-          <IndexExternalLink href={externalUrl} isActive={props.isActive} />
-        )
-      }
-      barClassName={BAR_COLOR}
-      getFilterInfo={defaultGetFilterInfo}
-      {...props}
-    />
-  )
-}

assets/js/dashboard/stats/sources/search-terms.tsx

@@ -1,151 +0,0 @@
-import React, { useEffect, useMemo } from 'react'
-import { numberShortFormatter } from '../../util/number-formatter'
-import RocketIcon from '../modals/rocket-icon'
-import LazyLoader from '../../components/lazy-loader'
-import { PlausibleSite, useSiteContext } from '../../site-context'
-import {
-  SearchTermsErrorCode,
-  SearchTermsErrorPayload,
-  SearchTermsResultItem,
-  SearchTermsSuccessResponse,
-  useIndexGoogleSearchTermsQuery
-} from './fetch-search-terms'
-import {
-  Bar,
-  DEFAULT_METRIC_COLUMN_WIDTH,
-  IndexBreakdownRenderer
-} from '../reports/index-breakdown'
-import { ColumnConfiguration, MetricValueWrapper } from '../breakdowns'
-
-function ErrorMessage({ code }: { code: SearchTermsErrorCode }): JSX.Element {
-  if (code === 'not_configured') {
-    return <div>The site is not connected to Google Search Keywords</div>
-  } else if (code === 'unsupported_filters') {
-    return (
-      <div>
-        Unable to fetch keyword data from Search Console because it does not
-        support the current set of filters
-      </div>
-    )
-  } else if (code === 'period_too_recent') {
-    return (
-      <div>
-        No search terms were found for this period. Please adjust or extend your
-        time range. Check{' '}
-        <a
-          href="https://plausible.io/docs/google-search-console-integration#i-dont-see-google-search-query-data-in-my-dashboard"
-          target="_blank"
-          rel="noreferrer"
-          className="hover:underline text-indigo-700 dark:text-indigo-500"
-        >
-          our documentation
-        </a>{' '}
-        for more details.
-      </div>
-    )
-  } else {
-    return <div>Unable to fetch keyword data from Search Console</div>
-  }
-}
-
-function ConfigureSearchTermsCTA({
-  site
-}: {
-  site: PlausibleSite
-}): JSX.Element {
-  return (
-    <>
-      <div>Configure the integration to view search terms</div>
-      <a
-        href={`/${encodeURIComponent(site.domain)}/settings/integrations`}
-        className="button mt-4"
-      >
-        Connect with Google
-      </a>
-    </>
-  )
-}
-
-export function SearchTerms({
-  onDataReady
-}: {
-  onDataReady: (data: SearchTermsSuccessResponse) => void
-}) {
-  const site = useSiteContext()
-
-  const [visible, setVisible] = React.useState(false)
-
-  const apiState = useIndexGoogleSearchTermsQuery({ enabled: visible })
-
-  useEffect(() => {
-    if (apiState.data) {
-      onDataReady(apiState.data)
-    }
-  }, [apiState.data, onDataReady])
-
-  const barMaxValue = useMemo(() => {
-    if (!apiState.data) return null
-    return Math.max(...apiState.data.results.map((item) => item.visitors))
-  }, [apiState.data])
-
-  const columns = useMemo(():
-    | ColumnConfiguration<SearchTermsResultItem>[]
-    | null => {
-    if (barMaxValue === null) {
-      return null
-    }
-
-    return [
-      {
-        key: 'dimension',
-        renderLabel: () => 'Search term',
-        renderCell: (item, _isActive) => (
-          <Bar
-            barWidthPercent={(item.visitors / barMaxValue) * 100}
-            className="bg-blue-50 group-hover/row:bg-blue-100"
-          >
-            {item.name}
-          </Bar>
-        ),
-        align: 'left'
-      },
-      {
-        key: 'visitors',
-        renderLabel: () => 'Visitors',
-        renderCell: (item, _isActive) => (
-          <MetricValueWrapper>
-            {numberShortFormatter(item.visitors)}
-          </MetricValueWrapper>
-        ),
-        width: DEFAULT_METRIC_COLUMN_WIDTH,
-        align: 'right'
-      }
-    ]
-  }, [barMaxValue])
-
-  if (apiState.error) {
-    const { is_admin, error_code } = apiState.error
-      .payload as SearchTermsErrorPayload
-
-    return (
-      <div className="text-center text-gray-700 dark:text-gray-300 text-sm mt-20">
-        <RocketIcon />
-        <ErrorMessage code={error_code} />
-        {error_code === 'not_configured' && is_admin && (
-          <ConfigureSearchTermsCTA site={site} />
-        )}
-      </div>
-    )
-  }
-  return (
-    <LazyLoader onVisible={() => setVisible(true)}>
-      <IndexBreakdownRenderer<SearchTermsResultItem>
-        {...apiState}
-        rows={apiState.data?.results ?? []}
-        getDimensionValue={(row) => row.name}
-        isRealtimeSilentUpdate={false}
-        columns={columns}
-      />
-    </LazyLoader>
-  )
-}

assets/js/dashboard/stats/sources/source-favicon.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-interface SourceFaviconProps {
-  name: string
-  className?: string
-}
-
-export const SourceFavicon = ({ name, className }: SourceFaviconProps) => {
-  const sourceName = name.toLowerCase()
-  const needsWhiteBg =
-    sourceName.includes('github') || sourceName.includes('chatgpt.com')
-
-  return (
-    <img
-      alt=""
-      src={`/favicon/sources/${encodeURIComponent(name)}`}
-      referrerPolicy="no-referrer"
-      className={classNames(
-        className,
-        needsWhiteBg &&
-          'dark:bg-white dark:border dark:border-white dark:rounded-full'
-      )}
-    />
-  )
-}

assets/js/dashboard/theme-context.tsx

@@ -1,61 +0,0 @@
-import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useLayoutEffect,
-  useRef,
-  useState
-} from 'react'
-
-export enum UIMode {
-  light = 'light',
-  dark = 'dark'
-}
-
-const defaultValue = { mode: UIMode.light }
-
-const ThemeContext = createContext(defaultValue)
-
-function parseUIMode(element: Element | null): UIMode {
-  return element?.classList.contains('dark') ? UIMode.dark : UIMode.light
-}
-
-export default function ThemeContextProvider({
-  children
-}: {
-  children: ReactNode
-}) {
-  const observerRef = useRef<MutationObserver | null>(null)
-  const [mode, setMode] = useState<UIMode>(
-    parseUIMode(document.querySelector('html'))
-  )
-  useLayoutEffect(() => {
-    const htmlElement = document.querySelector('html')
-    const currentObserver = observerRef.current
-    if (htmlElement && !currentObserver) {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === 'attributes' &&
-            mutation.attributeName === 'class'
-          ) {
-            return setMode(parseUIMode(mutation.target as Element))
-          }
-        })
-      })
-      observerRef.current = observer
-      observer.observe(htmlElement, {
-        attributes: true,
-        attributeFilter: ['class']
-      })
-    }
-    return () => currentObserver?.disconnect()
-  }, [])
-  return (
-    <ThemeContext.Provider value={{ mode }}>{children}</ThemeContext.Provider>
-  )
-}
-
-export function useTheme() {
-  return useContext(ThemeContext)
-}

assets/js/dashboard/user-context.tsx

@@ -1,50 +0,0 @@
-import React, { createContext, ReactNode, useContext } from 'react'
-
-export enum Role {
-  owner = 'owner',
-  admin = 'admin',
-  viewer = 'viewer',
-  editor = 'editor',
-  public = 'public',
-  billing = 'billing'
-}
-
-const userContextDefaultValue = {
-  loggedIn: false,
-  id: null,
-  role: Role.public,
-  team: {
-    identifier: null,
-    hasConsolidatedView: false
-  }
-} as
-  | {
-      loggedIn: false
-      id: null
-      role: Role
-      team: { identifier: null; hasConsolidatedView: false }
-    }
-  | {
-      loggedIn: true
-      id: number
-      role: Role
-      team: { identifier: string | null; hasConsolidatedView: boolean }
-    }
-
-export type UserContextValue = typeof userContextDefaultValue
-
-const UserContext = createContext<UserContextValue>(userContextDefaultValue)
-
-export const useUserContext = () => {
-  return useContext(UserContext)
-}
-
-export default function UserContextProvider({
-  user,
-  children
-}: {
-  user: UserContextValue
-  children: ReactNode
-}) {
-  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
-}

assets/js/dashboard/util/date.js

@@ -1,169 +0,0 @@
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-import updateLocale from 'dayjs/plugin/updateLocale'
-
-dayjs.extend(utc)
-dayjs.extend(updateLocale)
-// The locale 'en' is the default (and the only one currently),
-// but its start of week is Sunday.
-// This change that the week starts on Monday unifies behavior
-// between start of week according to the backend
-// and start of week according to the frontend.
-dayjs.updateLocale('en', {
-  weekStart: 1
-})
-
-const browserDateFormat = Intl.DateTimeFormat(navigator.language, {
-  hour: 'numeric'
-})
-
-export function is12HourClock() {
-  return browserDateFormat.resolvedOptions().hour12
-}
-
-// https://stackoverflow.com/a/50130338
-export function formatISO(date) {
-  return date.format('YYYY-MM-DD')
-}
-
-export function shiftMonths(date, months) {
-  return date.add(months, 'months')
-}
-
-export function shiftDays(date, days) {
-  return date.add(days, 'days')
-}
-
-export function formatMonthYYYY(date) {
-  return date.format('MMMM YYYY')
-}
-
-export function formatYear(date) {
-  return `Year of ${date.year()}`
-}
-
-export function formatYearShort(date) {
-  return date.getUTCFullYear().toString().substring(2)
-}
-
-export function formatDay(date, includeYear = false) {
-  if (includeYear) {
-    return date.format('ddd, DD MMM YYYY')
-  } else {
-    return date.format('ddd, DD MMM')
-  }
-}
-
-export function formatTime(date, { use12HourClock, includeMinutes }) {
-  if (use12HourClock) {
-    return includeMinutes ? date.format('h:mma') : date.format('ha')
-  }
-  return date.format('HH:mm')
-}
-
-export function formatDayShort(date, includeYear = false) {
-  if (includeYear) {
-    return date.format('D MMM YY')
-  } else {
-    return date.format('D MMM')
-  }
-}
-
-export function formatDateRange(site, from, to) {
-  if (!from || !to) return
-  if (typeof from === 'string') from = parseUTCDate(from)
-  if (typeof to === 'string') to = parseUTCDate(to)
-
-  if (from.isSame(to)) {
-    return formatDay(from)
-  } else if (from.isSame(to, 'year')) {
-    const includeYear = !isThisYear(site, from)
-    return `${formatDayShort(from, false)} - ${formatDayShort(to, includeYear)}`
-  } else {
-    return `${formatDayShort(from, true)} - ${formatDayShort(to, true)}`
-  }
-}
-
-export function parseUTCDate(dateString) {
-  return dayjs.utc(dateString)
-}
-
-export function parseNaiveDate(dateString) {
-  return dayjs(dateString)
-}
-
-export function utcNow() {
-  return dayjs.utc()
-}
-
-export function now(offset) {
-  return utcNow().utcOffset(offset / 60)
-}
-
-export function yesterday(offset) {
-  return shiftDays(now(offset), -1)
-}
-
-export function lastMonth(site) {
-  return shiftMonths(now(site.offset), -1)
-}
-
-export function isSameDate(date1, date2) {
-  return formatISO(date1) === formatISO(date2)
-}
-
-export function isSameMonth(date1, date2) {
-  return formatMonthYYYY(date1) === formatMonthYYYY(date2)
-}
-
-export function isToday(site, date) {
-  return isSameDate(date, now(site.offset))
-}
-
-export function isTodayOrYesterday(isoDate) {
-  const isoToday = formatISO(dayjs())
-  const isoYesterday = formatISO(dayjs().subtract(1, 'day'))
-  return isoDate === isoToday || isoDate === isoYesterday
-}
-
-export function isThisMonth(site, date) {
-  return formatMonthYYYY(date) === formatMonthYYYY(now(site.offset))
-}
-
-export function isThisYear(site, date) {
-  return date.year() === now(site.offset).year()
-}
-
-export function isBefore(date1, date2, period) {
-  /* assumes 'day' and 'month' are the only valid periods */
-  if (date1.year() !== date2.year()) {
-    return date1.year() < date2.year()
-  }
-  if (period === 'year') {
-    return false
-  }
-  if (date1.month() !== date2.month()) {
-    return date1.month() < date2.month()
-  }
-  if (period === 'month') {
-    return false
-  }
-  return date1.date() < date2.date()
-}
-
-export function isAfter(date1, date2, period) {
-  /* assumes 'day' and 'month' are the only valid periods */
-  if (date1.year() !== date2.year()) {
-    return date1.year() > date2.year()
-  }
-  if (period === 'year') {
-    return false
-  }
-  if (date1.month() !== date2.month()) {
-    return date1.month() > date2.month()
-  }
-  if (period === 'month') {
-    return false
-  }
-  return date1.date() > date2.date()
-}

assets/js/dashboard/util/date.test.ts

@@ -1,210 +0,0 @@
-import {
-  formatDayShort,
-  formatTime,
-  formatMonthYYYY,
-  formatISO,
-  now,
-  parseNaiveDate,
-  parseUTCDate,
-  shiftMonths,
-  yesterday
-} from './date'
-
-jest.useFakeTimers()
-
-describe(`${now.name} and ${formatISO.name}`, () => {
-  /* prettier-ignore */
-  const cases = [
-    [ 'Los Angeles/America', -3600 * 6, '2024-11-01T20:00:00.000Z', '2024-11-01' ],
-    [ 'Sydney/Australia', 3600 * 6, '2024-11-01T20:00:00.000Z', '2024-11-02' ]
-  ]
-  test.each(cases)(
-    'in timezone of %s (offset %p) at %s, today is %s',
-    (_tz, offset, utcTime, expectedToday) => {
-      jest.setSystemTime(new Date(utcTime))
-      expect(formatISO(now(offset))).toEqual(expectedToday)
-    }
-  )
-})
-
-/* prettier-ignore */
-const dstChangeOverDayEstonia = [
-//  system time                 today         yesterday     today-2mo     today+2mo     today-12mo    offset 
-  [ '2024-03-30T21:00:00.000Z', '2024-03-30', '2024-03-29', '2024-01-30', '2024-05-30', '2023-03-30', 7200 ],
-  [ '2024-03-30T22:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-30T23:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T00:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T01:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 10800 ], // <-- all European TZs change to DST at 1AM UTC
-  [ '2024-03-31T02:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 10800 ],
-  [ '2024-03-31T03:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 10800 ],
-  [ '2024-03-31T04:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 10800 ],
-  // ...
-  [ '2024-03-31T20:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 10800 ],
-  [ '2024-03-31T21:00:00.000Z', '2024-04-01', '2024-03-31', '2024-02-01', '2024-06-01', '2023-04-01', 10800 ],
-  [ '2024-03-31T22:00:00.000Z', '2024-04-01', '2024-03-31', '2024-02-01', '2024-06-01', '2023-04-01', 10800 ],
-  [ '2024-03-31T23:00:00.000Z', '2024-04-01', '2024-03-31', '2024-02-01', '2024-06-01', '2023-04-01', 10800 ]
-]
-
-/* prettier-ignore */
-const dstChangeOverDayGermany = [
-//  system time                 today         yesterday     today-2mo     today+2mo     today-12mo    offset 
-  [ '2024-03-30T21:00:00.000Z', '2024-03-30', '2024-03-29', '2024-01-30', '2024-05-30', '2023-03-30', 3600 ],
-  [ '2024-03-30T22:00:00.000Z', '2024-03-30', '2024-03-29', '2024-01-30', '2024-05-30', '2023-03-30', 3600 ],
-  [ '2024-03-30T23:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 3600 ],
-  [ '2024-03-31T00:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 3600 ],
-  [ '2024-03-31T01:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ], // <-- all European TZs change to DST at 1AM UTC
-  [ '2024-03-31T02:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T03:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T04:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  // ...
-  [ '2024-03-31T20:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T21:00:00.000Z', '2024-03-31', '2024-03-30', '2024-01-31', '2024-05-31', '2023-03-31', 7200 ],
-  [ '2024-03-31T22:00:00.000Z', '2024-04-01', '2024-03-31', '2024-02-01', '2024-06-01', '2023-04-01', 7200 ],
-  [ '2024-03-31T23:00:00.000Z', '2024-04-01', '2024-03-31', '2024-02-01', '2024-06-01', '2023-04-01', 7200 ]
-]
-
-/* prettier-ignore */
-const dstChangeOverDayEgypt = [
-//  system time                 today         yesterday     today-2mo     today+2mo     today-12mo    offset 
-  [ '2024-10-31T20:00:00.000Z', '2024-10-31', '2024-10-30', '2024-08-31', '2024-12-31', '2023-10-31', 10800 ],
-  [ '2024-10-31T20:59:59.999Z', '2024-10-31', '2024-10-30', '2024-08-31', '2024-12-31', '2023-10-31', 10800 ], // <-- changeover from DST is on Nov 1st 00:00 local time
-  [ '2024-10-31T21:00:00.000Z', '2024-10-31', '2024-10-30', '2024-08-31', '2024-12-31', '2023-10-31', 7200 ], 
-  [ '2024-10-31T21:59:59.999Z', '2024-10-31', '2024-10-30', '2024-08-31', '2024-12-31', '2023-10-31', 7200 ], 
-  [ '2024-10-31T22:00:00.000Z', '2024-11-01', '2024-10-31', '2024-09-01', '2025-01-01', '2023-11-01', 7200 ],
-]
-
-const sets = [
-  ['Europe/Tallinn', dstChangeOverDayEstonia],
-  ['Europe/Berlin', dstChangeOverDayGermany],
-  ['Africa/Cairo', dstChangeOverDayEgypt]
-] as const
-
-for (const [timezone, suite] of sets) {
-  describe(`in timezone of ${timezone}, given the correct offset`, () => {
-    it.each(suite)(
-      'at system time %s, today is %s and yesterday is %s',
-      (
-        utcTime,
-        expectedToday,
-        expectedYesterday,
-        expectedTwoMonthsBack,
-        expectedTwoMonthsAhead,
-        expectedOneYearBack,
-        offset
-      ) => {
-        jest.setSystemTime(new Date(utcTime))
-        expect({
-          today: formatISO(now(offset)),
-          yesterday: formatISO(yesterday(offset)),
-          twoMonthsBack: formatISO(shiftMonths(now(offset), -2)),
-          twoMonthsAhead: formatISO(shiftMonths(now(offset), 2)),
-          oneYearBack: formatISO(shiftMonths(now(offset), -12))
-        }).toEqual({
-          today: expectedToday,
-          yesterday: expectedYesterday,
-          twoMonthsBack: expectedTwoMonthsBack,
-          twoMonthsAhead: expectedTwoMonthsAhead,
-          oneYearBack: expectedOneYearBack
-        })
-      }
-    )
-  })
-}
-
-it('startOf("week") returns a Monday', () => {
-  expect(formatISO(parseUTCDate('2026-07-02').startOf('week'))).toEqual(
-    '2026-06-29' // Monday
-  )
-})
-
-describe('formatting site-timezoned datetimes from database works flawlessly', () => {
-  it('is able to enrich UTC date string with site timezone, formatting the value correctly', () => {
-    expect(formatDayShort(parseNaiveDate('2025-01-01 14:00:00'))).toEqual(
-      '1 Jan'
-    )
-  })
-})
-
-describe(formatMonthYYYY.name, () => {
-  it('formats a date as "Month YYYY"', () => {
-    expect(formatMonthYYYY(parseNaiveDate('2025-06-15'))).toEqual('June 2025')
-  })
-
-  it('formats January correctly', () => {
-    expect(formatMonthYYYY(parseNaiveDate('2024-01-01'))).toEqual(
-      'January 2024'
-    )
-  })
-})
-
-describe(formatDayShort.name, () => {
-  it('formats without year by default', () => {
-    expect(formatDayShort(parseNaiveDate('2025-06-05'))).toEqual('5 Jun')
-  })
-
-  it('includes 2-digit year when requested', () => {
-    expect(formatDayShort(parseNaiveDate('2025-06-05'), true)).toEqual(
-      '5 Jun 25'
-    )
-  })
-})
-
-describe(formatTime.name, () => {
-  describe('12-hour clock', () => {
-    it('formats hour without minutes as ha', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 14:00:00'), {
-          use12HourClock: true,
-          includeMinutes: false
-        })
-      ).toEqual('2pm')
-    })
-
-    it('formats hour with minutes as h:mma', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 14:30:00'), {
-          use12HourClock: true,
-          includeMinutes: true
-        })
-      ).toEqual('2:30pm')
-    })
-
-    it('formats midnight correctly', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 00:00:00'), {
-          use12HourClock: true,
-          includeMinutes: false
-        })
-      ).toEqual('12am')
-    })
-  })
-
-  describe('24-hour clock', () => {
-    it('formats hour without minutes as HH:mm (not HH format because that would look weird) ', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 14:00:00'), {
-          use12HourClock: false,
-          includeMinutes: false
-        })
-      ).toEqual('14:00')
-    })
-
-    it('formats hour with minutes as HH:mm', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 14:30:00'), {
-          use12HourClock: false,
-          includeMinutes: true
-        })
-      ).toEqual('14:30')
-    })
-
-    it('pads single-digit hours', () => {
-      expect(
-        formatTime(parseNaiveDate('2025-06-15 09:00:00'), {
-          use12HourClock: false,
-          includeMinutes: false
-        })
-      ).toEqual('09:00')
-    })
-  })
-})

assets/js/dashboard/util/fetch-suggestions.ts

@@ -1,35 +0,0 @@
-import * as api from '../api'
-import { DashboardState, Filter } from '../dashboard-state'
-import { replaceFilterByPrefix, omitFiltersByKeyPrefix } from './filters'
-
-export function fetchSuggestions(
-  apiPath: string,
-  dashboardState: DashboardState,
-  input: string,
-  additionalFilter?: Filter
-) {
-  const updatedQuery = queryForSuggestions(dashboardState, additionalFilter)
-  return api.get(apiPath, updatedQuery, { q: input.trim() })
-}
-
-function queryForSuggestions(
-  dashboardState: DashboardState,
-  additionalFilter?: Filter
-): DashboardState {
-  let filters = dashboardState.filters
-  if (additionalFilter) {
-    const [_operation, filterKey, clauses] = additionalFilter
-
-    // For suggestions, we remove already-applied filter with same key from dashboardState and add new filter (if feasible)
-    if (clauses.length > 0) {
-      filters = replaceFilterByPrefix(
-        dashboardState,
-        filterKey,
-        additionalFilter
-      )
-    } else {
-      filters = omitFiltersByKeyPrefix(dashboardState, filterKey)
-    }
-  }
-  return { ...dashboardState, filters }
-}

assets/js/dashboard/util/filter-text.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Filter, FilterClauseLabels } from '../dashboard-state'
-import { plainFilterText, styledFilterText } from './filter-text'
-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', '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'
-    ]
-  ])(
-    'when filter is %p and labels are %p, functions return %p',
-    (filter, labels, expectedPlainText) => {
-      const dashboardState = { labels }
-
-      expect(plainFilterText(dashboardState, filter)).toBe(expectedPlainText)
-
-      render(
-        <p data-testid="filter-text">
-          {styledFilterText(dashboardState, filter)}
-        </p>
-      )
-      expect(screen.getByTestId('filter-text')).toHaveTextContent(
-        expectedPlainText
-      )
-    }
-  )
-})

assets/js/dashboard/util/filter-text.tsx

@@ -1,78 +0,0 @@
-import React, { ReactNode, isValidElement, Fragment } from 'react'
-import { DashboardState, Filter } from '../dashboard-state'
-import {
-  EVENT_PROPS_PREFIX,
-  FILTER_OPERATIONS_DISPLAY_NAMES,
-  formattedFilters,
-  getLabel,
-  getPropertyKeyFromFilterKey
-} from './filters'
-
-export function styledFilterText(
-  dashboardState: Pick<DashboardState, 'labels'>,
-  [operation, filterKey, clauses]: Filter
-) {
-  if (filterKey.startsWith(EVENT_PROPS_PREFIX)) {
-    const propKey = getPropertyKeyFromFilterKey(filterKey)
-    return (
-      <>
-        Property <b>{propKey}</b> {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
-        {formatClauses(clauses)}
-      </>
-    )
-  }
-
-  const formattedFilter = (
-    formattedFilters as Record<string, string | undefined>
-  )[filterKey]
-  const clausesLabels = clauses.map((value) =>
-    getLabel(dashboardState.labels, filterKey, value)
-  )
-
-  if (!formattedFilter) {
-    throw new Error(`Unknown filter: ${filterKey}`)
-  }
-
-  return (
-    <>
-      {capitalize(formattedFilter)} {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
-      {formatClauses(clausesLabels)}
-    </>
-  )
-}
-
-export function plainFilterText(
-  dashboardState: Pick<DashboardState, 'labels'>,
-  filter: Filter
-) {
-  return reactNodeToString(styledFilterText(dashboardState, filter))
-}
-
-function formatClauses(labels: Array<string | number>): ReactNode[] {
-  return labels.map((label, index) => (
-    <Fragment key={index}>
-      {index > 0 && ' or '}
-      <b>{label}</b>
-    </Fragment>
-  ))
-}
-
-function capitalize(str: string): string {
-  return str[0].toUpperCase() + str.slice(1)
-}
-
-function reactNodeToString(reactNode: ReactNode): string {
-  let string = ''
-  if (typeof reactNode === 'string') {
-    string = reactNode
-  } else if (typeof reactNode === 'number') {
-    string = reactNode.toString()
-  } else if (reactNode instanceof Array) {
-    reactNode.forEach(function (child) {
-      string += reactNodeToString(child)
-    })
-  } else if (isValidElement(reactNode)) {
-    string += reactNodeToString(reactNode.props.children)
-  }
-  return string
-}

assets/js/dashboard/util/filters.js

@@ -1,311 +0,0 @@
-import { formatSegmentIdAsLabelKey } from '../filtering/segments'
-
-export const FILTER_MODAL_TO_FILTER_GROUP = {
-  page: ['page', 'entry_page', 'exit_page'],
-  source: ['source', 'channel', 'referrer'],
-  location: ['country', 'region', 'city'],
-  screen: ['screen'],
-  browser: ['browser', 'browser_version'],
-  os: ['os', 'os_version'],
-  utm: ['utm_medium', 'utm_source', 'utm_campaign', 'utm_term', 'utm_content'],
-  goal: ['goal'],
-  props: ['props'],
-  hostname: ['hostname'],
-  segment: ['segment']
-}
-
-export function getAvailableFilterModals(site) {
-  const { props, ...rest } = FILTER_MODAL_TO_FILTER_GROUP
-  return {
-    ...rest,
-    ...(site.propsAvailable && { props })
-  }
-}
-
-export const FILTER_GROUP_TO_MODAL_TYPE = Object.fromEntries(
-  Object.entries(FILTER_MODAL_TO_FILTER_GROUP).flatMap(
-    ([modalName, filterGroups]) =>
-      filterGroups.map((filterGroup) => [filterGroup, modalName])
-  )
-)
-
-export const EVENT_PROPS_PREFIX = 'props:'
-
-export const FILTER_OPERATIONS = {
-  is: 'is',
-  isNot: 'is_not',
-  contains: 'contains',
-  contains_not: 'contains_not',
-  has_not_done: 'has_not_done'
-}
-
-export const FILTER_OPERATIONS_DISPLAY_NAMES = {
-  [FILTER_OPERATIONS.is]: 'is',
-  [FILTER_OPERATIONS.isNot]: 'is not',
-  [FILTER_OPERATIONS.contains]: 'contains',
-  [FILTER_OPERATIONS.contains_not]: 'does not contain',
-  // :NOTE: Goal filters are displayed as "is not" in the UI, but in the backend they are wrapped with has_not_done.
-  // It is currently unclear if we'll do the same for other event filters in the future.
-  [FILTER_OPERATIONS.has_not_done]: 'is not'
-}
-
-export function supportsIsNot(filterName) {
-  return !['goal', 'prop_key'].includes(filterName)
-}
-
-export function supportsContains(filterName) {
-  return !['screen']
-    .concat(FILTER_MODAL_TO_FILTER_GROUP['location'])
-    .includes(filterName)
-}
-
-export function supportsHasDoneNot(filterName) {
-  return filterName === 'goal'
-}
-
-export function isFreeChoiceFilterOperation(operation) {
-  return [FILTER_OPERATIONS.contains, FILTER_OPERATIONS.contains_not].includes(
-    operation
-  )
-}
-
-export function getLabel(labels, filterKey, value) {
-  if (['country', 'region', 'city'].includes(filterKey)) {
-    return labels[value]
-  }
-
-  if (filterKey === 'segment') {
-    return labels[formatSegmentIdAsLabelKey(value)]
-  }
-
-  return value
-}
-
-export function getPropertyKeyFromFilterKey(filterKey) {
-  return filterKey.slice(EVENT_PROPS_PREFIX.length)
-}
-
-export function getFiltersByKeyPrefix(dashboardState, prefix) {
-  return dashboardState.filters.filter(hasDimensionPrefix(prefix))
-}
-
-const hasDimensionPrefix =
-  (prefix) =>
-  ([_operation, dimension, _clauses]) =>
-    dimension.startsWith(prefix)
-
-export function omitFiltersByKeyPrefix(dashboardState, prefix) {
-  return dashboardState.filters.filter(
-    ([_operation, filterKey, _clauses]) => !filterKey.startsWith(prefix)
-  )
-}
-
-export function replaceFilterByPrefix(dashboardState, prefix, filter) {
-  return omitFiltersByKeyPrefix(dashboardState, prefix).concat([filter])
-}
-
-export function isFilteringOnFixedValue(
-  dashboardState,
-  filterKey,
-  expectedValue
-) {
-  const filters = dashboardState.filters.filter(
-    ([_operation, key]) => filterKey == key
-  )
-  if (filters.length == 1) {
-    const [operation, _filterKey, clauses] = filters[0]
-    return (
-      operation === FILTER_OPERATIONS.is &&
-      clauses.length === 1 &&
-      (!expectedValue || clauses[0] == expectedValue)
-    )
-  }
-  return false
-}
-
-export function hasPageFilter(dashboardState) {
-  return dashboardState.resolvedFilters.some(hasDimensionPrefix('page'))
-}
-
-export function hasConversionGoalFilter(dashboardState) {
-  const resolvedGoalFilters = dashboardState.resolvedFilters.filter(
-    hasDimensionPrefix('goal')
-  )
-
-  return resolvedGoalFilters.some(([operation, _filterKey, _clauses]) => {
-    return operation !== FILTER_OPERATIONS.has_not_done
-  })
-}
-
-export function isRealTimeDashboard(dashboardState) {
-  return dashboardState?.period === 'realtime'
-}
-
-// Note: Currently only a single goal filter can be applied at a time.
-export function getGoalFilter(dashboardState) {
-  return getFiltersByKeyPrefix(dashboardState, 'goal')[0] || null
-}
-
-export function formatFilterGroup(filterGroup) {
-  if (filterGroup === 'utm') {
-    return 'UTM tags'
-  } else if (filterGroup === 'location') {
-    return 'Location'
-  } else if (filterGroup === 'props') {
-    return 'Property'
-  } else {
-    return formattedFilters[filterGroup]
-  }
-}
-
-export function cleanLabels(filters, labels, mergedFilterKey, mergedLabels) {
-  const filteredBy = Object.fromEntries(
-    filters
-      .flatMap(([_operation, filterKey, clauses]) => {
-        if (filterKey === 'segment') {
-          return clauses.map(formatSegmentIdAsLabelKey)
-        }
-        if (['country', 'region', 'city'].includes(filterKey)) {
-          return clauses
-        }
-        return []
-      })
-      .map((value) => [value, true])
-  )
-
-  let result = { ...labels }
-  for (const value in labels) {
-    if (!filteredBy[value]) {
-      delete result[value]
-    }
-  }
-
-  if (
-    mergedFilterKey &&
-    ['country', 'region', 'city', 'segment'].includes(mergedFilterKey)
-  ) {
-    result = {
-      ...result,
-      ...mergedLabels
-    }
-  }
-
-  return result
-}
-
-const NO_PREFIX_KEYS = new Set(['segment'])
-const EVENT_FILTER_KEYS = new Set(['name', 'page', 'goal', 'hostname'])
-const EVENT_PREFIX = 'event:'
-const VISIT_PREFIX = 'visit:'
-
-export function hasEventFilters(dashboardState) {
-  return dashboardState.resolvedFilters.some(
-    ([_operation, filterKey, _clauses]) => isEventFilterKey(filterKey)
-  )
-}
-
-function isEventFilterKey(filterKey) {
-  return (
-    EVENT_FILTER_KEYS.has(filterKey) || filterKey.startsWith(EVENT_PROPS_PREFIX)
-  )
-}
-
-function remapFilterKey(filterKey) {
-  if (NO_PREFIX_KEYS.has(filterKey)) {
-    return filterKey
-  }
-  if (isEventFilterKey(filterKey)) {
-    return `${EVENT_PREFIX}${filterKey}`
-  }
-  return `${VISIT_PREFIX}${filterKey}`
-}
-
-function remapApiFilterKey(apiFilterKey) {
-  const isNoPrefixKey = NO_PREFIX_KEYS.has(apiFilterKey)
-
-  if (isNoPrefixKey) {
-    return apiFilterKey
-  }
-
-  const isEventKey = apiFilterKey.startsWith(EVENT_PREFIX)
-  const isVisitKey = apiFilterKey.startsWith(VISIT_PREFIX)
-
-  if (isEventKey) {
-    return apiFilterKey.substring(EVENT_PREFIX.length)
-  }
-  if (isVisitKey) {
-    return apiFilterKey.substring(VISIT_PREFIX.length)
-  }
-
-  return apiFilterKey // maybe throw?
-}
-
-export function remapToApiFilters(filters) {
-  return filters.map(remapToApiFilter)
-}
-
-export function remapFromApiFilters(apiFilters) {
-  return apiFilters.map((apiFilter) => {
-    const [operation, ...rest] = apiFilter
-    if (operation === 'has_not_done') {
-      const [[_, apiFilterKey, clauses]] = rest
-      return [
-        FILTER_OPERATIONS.has_not_done,
-        remapApiFilterKey(apiFilterKey),
-        clauses
-      ]
-    }
-    const [apiFilterKey, clauses] = rest
-    return [operation, remapApiFilterKey(apiFilterKey), clauses]
-  })
-}
-
-export function serializeApiFilters(filters) {
-  return JSON.stringify(remapToApiFilters(filters))
-}
-
-function remapToApiFilter([operation, filterKey, clauses, ...modifiers]) {
-  const apiFilterKey = remapFilterKey(filterKey)
-  if (apiFilterKey === 'segment') {
-    return [operation, apiFilterKey, clauses.map((v) => parseInt(v, 10))]
-  }
-  if (operation === FILTER_OPERATIONS.has_not_done) {
-    // :NOTE: Frontend does not support advanced query building that's used in the backend.
-    // As such we emulate the backend behavior for has_not_done goal filters
-    return ['has_not_done', ['is', apiFilterKey, clauses, ...modifiers]]
-  } else {
-    return [operation, apiFilterKey, clauses, ...modifiers]
-  }
-}
-
-export function getFilterGroup([_operation, filterKey, _clauses]) {
-  return filterKey.startsWith(EVENT_PROPS_PREFIX) ? 'props' : filterKey
-}
-
-export const formattedFilters = {
-  goal: 'Goal',
-  props: 'Property',
-  prop_key: 'Property',
-  prop_value: 'Value',
-  source: 'Source',
-  channel: 'Channel',
-  utm_medium: 'UTM medium',
-  utm_source: 'UTM source',
-  utm_campaign: 'UTM campaign',
-  utm_content: 'UTM content',
-  utm_term: 'UTM term',
-  referrer: 'Referrer URL',
-  screen: 'Screen size',
-  browser: 'Browser',
-  browser_version: 'Browser version',
-  os: 'Operating system',
-  os_version: 'Operating system version',
-  country: 'Country',
-  region: 'Region',
-  city: 'City',
-  page: 'Page',
-  hostname: 'Hostname',
-  entry_page: 'Entry page',
-  exit_page: 'Exit page',
-  segment: 'Segment'
-}

assets/js/dashboard/util/filters.test.ts

@@ -1,82 +0,0 @@
-import { getAvailableFilterModals, serializeApiFilters } from './filters'
-
-describe(`${getAvailableFilterModals.name}`, () => {
-  it('gives limited object when props are not available', () => {
-    expect(
-      getAvailableFilterModals({
-        propsAvailable: false
-      })
-    ).toEqual({
-      browser: ['browser', 'browser_version'],
-      goal: ['goal'],
-      hostname: ['hostname'],
-      location: ['country', 'region', 'city'],
-      os: ['os', 'os_version'],
-      page: ['page', 'entry_page', 'exit_page'],
-      screen: ['screen'],
-      source: ['source', 'channel', 'referrer'],
-      utm: [
-        'utm_medium',
-        'utm_source',
-        'utm_campaign',
-        'utm_term',
-        'utm_content'
-      ],
-      segment: ['segment']
-    })
-  })
-
-  it('gives full object when props and segments are available', () => {
-    expect(
-      getAvailableFilterModals({
-        propsAvailable: true
-      })
-    ).toEqual({
-      browser: ['browser', 'browser_version'],
-      goal: ['goal'],
-      hostname: ['hostname'],
-      location: ['country', 'region', 'city'],
-      os: ['os', 'os_version'],
-      page: ['page', 'entry_page', 'exit_page'],
-      screen: ['screen'],
-      source: ['source', 'channel', 'referrer'],
-      utm: [
-        'utm_medium',
-        'utm_source',
-        'utm_campaign',
-        'utm_term',
-        'utm_content'
-      ],
-      props: ['props'],
-      segment: ['segment']
-    })
-  })
-})
-
-describe(`${serializeApiFilters.name}`, () => {
-  it('should prefix filter keys with event: or visit: when appropriate', () => {
-    const filters = [
-      ['is', 'page', ['/docs', '/blog']],
-      ['contains', 'goal', ['Signup']],
-      ['contains_not', 'browser', ['chrom'], { case_sensitive: false }],
-      ['is', 'country', ['US']],
-      ['is_not', 'utm_source', ['google']]
-    ]
-    expect(serializeApiFilters(filters)).toEqual(
-      JSON.stringify([
-        ['is', 'event:page', ['/docs', '/blog']],
-        ['contains', 'event:goal', ['Signup']],
-        ['contains_not', 'visit:browser', ['chrom'], { case_sensitive: false }],
-        ['is', 'visit:country', ['US']],
-        ['is_not', 'visit:utm_source', ['google']]
-      ])
-    )
-  })
-
-  it('wraps has_not_done goal filters in API format', () => {
-    const filters = [['has_not_done', 'goal', ['Signup']]]
-    expect(serializeApiFilters(filters)).toEqual(
-      JSON.stringify([['has_not_done', ['is', 'event:goal', ['Signup']]]])
-    )
-  })
-})

assets/js/dashboard/util/goals.ts

@@ -1,34 +0,0 @@
-import { Filter } from '../dashboard-state'
-import { FILTER_OPERATIONS } from './filters'
-
-export const isPageViewGoal = (goalName: string) => {
-  goalName.startsWith('Visit ')
-}
-
-export const SPECIAL_GOALS = {
-  '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' },
-  'Form: Submission': { title: 'Form Actions', prop: 'path' },
-  'WP Search Queries': {
-    title: 'WordPress Search Queries',
-    prop: 'search_query'
-  },
-  'WP Form Completions': { title: 'WordPress Form Completions', prop: 'path' }
-}
-
-export function isSpecialGoal(
-  goalName: string | number
-): goalName is keyof typeof SPECIAL_GOALS {
-  return goalName in SPECIAL_GOALS
-}
-
-export function getSpecialGoal(goalFilter: Filter) {
-  const [operation, _filterKey, clauses] = goalFilter
-  if (operation === FILTER_OPERATIONS.is && clauses.length == 1) {
-    const goalName = clauses[0]
-    return isSpecialGoal(goalName) ? SPECIAL_GOALS[goalName] : null
-  }
-  return null
-}

assets/js/dashboard/util/money.ts

@@ -1,23 +0,0 @@
-import { numberLongFormatter, numberShortFormatter } from './number-formatter'
-
-type Money = { long: string; short: string }
-
-export function formatMoneyShort(value: Money | number | null) {
-  if (typeof value == 'number') {
-    return numberShortFormatter(value)
-  } else if (value) {
-    return value.short
-  } else {
-    return '-'
-  }
-}
-
-export function formatMoneyLong(value: Money | number | null) {
-  if (typeof value == 'number') {
-    return numberLongFormatter(value)
-  } else if (value) {
-    return value.long
-  } else {
-    return '-'
-  }
-}

assets/js/dashboard/util/number-formatter.test.ts

@@ -1,33 +0,0 @@
-import { numberLongFormatter, numberShortFormatter } from './number-formatter'
-
-describe('numberShortFormatter()', () => {
-  it('converts to short format', () => {
-    expect(numberShortFormatter(0)).toEqual('0')
-    expect(numberShortFormatter(-10)).toEqual('-10')
-    expect(numberShortFormatter(12)).toEqual('12')
-    expect(numberShortFormatter(123)).toEqual('123')
-    expect(numberShortFormatter(1234)).toEqual('1.2k')
-    expect(numberShortFormatter(12345)).toEqual('12.3k')
-    expect(numberShortFormatter(123456)).toEqual('123k')
-    expect(numberShortFormatter(1234567)).toEqual('1.2M')
-    expect(numberShortFormatter(12345678)).toEqual('12.3M')
-    expect(numberShortFormatter(123456789)).toEqual('123M')
-    expect(numberShortFormatter(1234567890)).toEqual('1.2B')
-  })
-})
-
-describe('numberLongFormatter()', () => {
-  it('converts to short format', () => {
-    expect(numberLongFormatter(0)).toEqual('0')
-    expect(numberLongFormatter(-10)).toEqual('-10')
-    expect(numberLongFormatter(12)).toEqual('12')
-    expect(numberLongFormatter(123)).toEqual('123')
-    expect(numberLongFormatter(1234)).toEqual('1,234')
-    expect(numberLongFormatter(12345)).toEqual('12,345')
-    expect(numberLongFormatter(123456)).toEqual('123,456')
-    expect(numberLongFormatter(1234567)).toEqual('1,234,567')
-    expect(numberLongFormatter(12345678)).toEqual('12,345,678')
-    expect(numberLongFormatter(123456789)).toEqual('123,456,789')
-    expect(numberLongFormatter(1234567890)).toEqual('1,234,567,890')
-  })
-})

assets/js/dashboard/util/number-formatter.ts

@@ -1,84 +0,0 @@
-const THOUSAND = 1000
-const HUNDRED_THOUSAND = 100000
-const MILLION = 1000000
-const HUNDRED_MILLION = 100000000
-const BILLION = 1000000000
-const HUNDRED_BILLION = 100000000000
-const TRILLION = 1000000000000
-
-const numberFormat = Intl.NumberFormat('en-US')
-
-export function numberShortFormatter(num: number): string {
-  if (num >= THOUSAND && num < MILLION) {
-    const thousands = num / THOUSAND
-    if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
-      return Math.floor(thousands) + 'k'
-    } else {
-      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'
-    }
-  } 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'
-    }
-  } else {
-    return num.toString()
-  }
-}
-
-export function numberLongFormatter(num: number): string {
-  return numberFormat.format(num)
-}
-
-export function nullable<T>(
-  formatter: (num: T) => string
-): (num: T | null) => string {
-  return (num: T | null): string => {
-    if (num === null) {
-      return '-'
-    }
-    return formatter(num)
-  }
-}
-
-function pad(num: number, size: number): string {
-  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)
-  if (hours > 0) {
-    return `${hours}h ${minutes}m ${seconds}s`
-  } else if (minutes > 0) {
-    return `${minutes}m ${pad(seconds, 2)}s`
-  } else {
-    return `${seconds}s`
-  }
-}
-
-export function roundedNumberFormatter(number: number): string {
-  if (Math.abs(number) > 0 && Math.abs(number) < 0.1) {
-    return number.toFixed(2)
-  } else {
-    return number.toFixed(1).replace(/\.0$/, '')
-  }
-}
-
-export function percentageFormatter(number: number | null): string {
-  if (typeof number === 'number') {
-    return roundedNumberFormatter(number) + '%'
-  } else {
-    return '-'
-  }
-}

assets/js/dashboard/util/realtime-update-timer.js

@@ -1,8 +0,0 @@
-export const REALTIME_UPDATE_TIME_MS = 30_000
-const tickEvent = new Event('tick')
-
-export function start() {
-  setInterval(() => {
-    document.dispatchEvent(tickEvent)
-  }, REALTIME_UPDATE_TIME_MS)
-}

assets/js/dashboard/util/seconds-since-last-load.js

@@ -1,15 +0,0 @@
-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.
-// Updates the value every second when the component is visible.
-export function SecondsSinceLastLoad({ lastLoadTimestamp }) {
-  const [timeNow, setTimeNow] = useState(new Date())
-
-  useEffect(() => {
-    const interval = setInterval(() => setTimeNow(new Date()), 1000)
-    return () => clearInterval(interval)
-  }, [])
-
-  return Math.round(Math.abs(lastLoadTimestamp - timeNow) / 1000)
-}

assets/js/dashboard/util/storage.js

@@ -1,37 +0,0 @@
-// This module checks if localStorage is available and uses it for persistent frontend storage
-// if possible. Localstorage can be blocked by browsers when people block third-party cookies and
-// the dashboard is running in embedded mode. In those cases, store stuff in a regular object instead.
-
-const memStore = {}
-
-// https://stackoverflow.com/a/16427747
-function testLocalStorageAvailability() {
-  try {
-    const testItem = 'test'
-    localStorage.setItem(testItem, testItem)
-    localStorage.removeItem(testItem)
-    return true
-  } catch (_e) {
-    return false
-  }
-}
-
-const isLocalStorageAvailable = testLocalStorageAvailability()
-
-export function setItem(key, value) {
-  if (isLocalStorageAvailable) {
-    window.localStorage.setItem(key, value)
-  } else {
-    memStore[key] = value
-  }
-}
-
-export function getItem(key) {
-  if (isLocalStorageAvailable) {
-    return window.localStorage.getItem(key)
-  } else {
-    return memStore[key]
-  }
-}
-
-export const getDomainScopedStorageKey = (key, domain) => `${key}__${domain}`

assets/js/dashboard/util/tooltip.tsx

@@ -1,109 +0,0 @@
-import React, { CSSProperties, ReactNode, RefObject, useState } from 'react'
-import { usePopper } from 'react-popper'
-import classNames from 'classnames'
-import { createPortal } from 'react-dom'
-
-export function Tooltip({
-  children,
-  info,
-  className,
-  onClick,
-  boundary,
-  containerRef
-}: {
-  info: ReactNode
-  children: ReactNode
-  className?: string
-  onClick?: () => void
-  /** if provided, the tooltip is confined to the particular element */
-  boundary?: HTMLElement | null
-  /** if defined, the tooltip is rendered in a portal to this element */
-  containerRef?: RefObject<HTMLElement>
-}) {
-  const [visible, setVisible] = useState(false)
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLDivElement | null>(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
-  )
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 6]
-        }
-      },
-      ...(boundary
-        ? [
-            {
-              name: 'preventOverflow',
-              options: {
-                boundary: boundary
-              }
-            }
-          ]
-        : [])
-    ]
-  })
-
-  return (
-    <div className={classNames('relative', className)}>
-      <div
-        ref={setReferenceElement}
-        onMouseEnter={() => setVisible(true)}
-        onMouseLeave={() => setVisible(false)}
-        onClick={onClick}
-      >
-        {children}
-      </div>
-      {info && visible && (
-        <TooltipMessage
-          containerRef={containerRef}
-          popperStyle={styles.popper}
-          popperAttributes={attributes.popper}
-          setPopperElement={setPopperElement}
-        >
-          {info}
-        </TooltipMessage>
-      )}
-    </div>
-  )
-}
-
-function TooltipMessage({
-  containerRef,
-  popperStyle,
-  popperAttributes,
-  setPopperElement,
-  children
-}: {
-  containerRef?: RefObject<HTMLElement>
-  popperStyle: CSSProperties
-  popperAttributes?: Record<string, string>
-  setPopperElement: (element: HTMLDivElement) => void
-  children: ReactNode
-}) {
-  const messageElement = (
-    <div
-      ref={setPopperElement}
-      style={popperStyle}
-      {...popperAttributes}
-      className="pointer-events-none z-[99] [body:has(.modal.is-open)_&]:z-[1000] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
-      role="tooltip"
-    >
-      {children}
-    </div>
-  )
-  if (containerRef) {
-    if (containerRef.current) {
-      return createPortal(messageElement, containerRef.current)
-    } else {
-      return null
-    }
-  }
-
-  return messageElement
-}

assets/js/dashboard/util/url-search-params-v1.ts

@@ -1,121 +0,0 @@
-import { DashboardState, Filter } from '../dashboard-state'
-import { EVENT_PROPS_PREFIX, FILTER_OPERATIONS } from './filters'
-
-// As of March 2023, Safari does not support negative lookbehind regexes. In case it throws an error, falls back to plain | matching. This means
-// escaping pipe characters in filters does not currently work in Safari
-let NON_ESCAPED_PIPE_REGEX: string | RegExp
-try {
-  NON_ESCAPED_PIPE_REGEX = new RegExp('(?<!\\\\)\\|', 'g')
-} catch (_e) {
-  NON_ESCAPED_PIPE_REGEX = '|'
-}
-
-const ESCAPED_PIPE = '\\|'
-const OPERATION_PREFIX = {
-  [FILTER_OPERATIONS.isNot]: '!',
-  [FILTER_OPERATIONS.contains]: '~',
-  [FILTER_OPERATIONS.is]: ''
-}
-
-const LEGACY_URL_PARAMETERS = {
-  goal: null,
-  source: null,
-  utm_medium: null,
-  utm_source: null,
-  utm_campaign: null,
-  utm_content: null,
-  utm_term: null,
-  referrer: null,
-  screen: null,
-  browser: null,
-  browser_version: null,
-  os: null,
-  os_version: null,
-  country: 'country_labels',
-  region: 'region_labels',
-  city: 'city_labels',
-  page: null,
-  hostname: null,
-  entry_page: null,
-  exit_page: null
-}
-
-function isV1(searchParams: URLSearchParams): boolean {
-  for (const k of searchParams.keys()) {
-    if (k === 'props' || LEGACY_URL_PARAMETERS.hasOwnProperty(k)) {
-      return true
-    }
-  }
-  return false
-}
-
-function parseSearch(searchString: string): Record<string, unknown> {
-  const searchParams = new URLSearchParams(searchString)
-  const updatedSearchRecordEntries = []
-  const filters: Filter[] = []
-  let labels: DashboardState['labels'] = {}
-
-  for (const [key, value] of searchParams.entries()) {
-    if (LEGACY_URL_PARAMETERS.hasOwnProperty(key)) {
-      if (typeof value !== 'string') {
-        continue
-      }
-      const filter = parseLegacyFilter(key, value) as Filter
-      filters.push(filter)
-      const labelsKey: string | null | undefined =
-        LEGACY_URL_PARAMETERS[key as keyof typeof LEGACY_URL_PARAMETERS]
-      const labelsParamValue = labelsKey ? searchParams.get(labelsKey) : null
-      if (labelsParamValue) {
-        const clauses = filter[2]
-        const labelsValues = labelsParamValue
-          .split('|')
-          .filter((label) => !!label)
-        const newLabels = Object.fromEntries(
-          clauses.map((clause, index) => [clause, labelsValues[index]])
-        )
-
-        labels = Object.assign(labels, newLabels)
-      }
-    } else {
-      updatedSearchRecordEntries.push([key, value])
-    }
-  }
-
-  const propsParamValue = searchParams.get('props')
-  if (typeof propsParamValue === 'string') {
-    filters.push(...(parseLegacyPropsFilter(propsParamValue) as Filter[]))
-  }
-  updatedSearchRecordEntries.push(['filters', filters], ['labels', labels])
-  return Object.fromEntries(updatedSearchRecordEntries)
-}
-
-function parseLegacyFilter(filterKey: string, rawValue: string): null | Filter {
-  const operation =
-    Object.keys(OPERATION_PREFIX).find(
-      (operation) => OPERATION_PREFIX[operation] === rawValue[0]
-    ) || FILTER_OPERATIONS.is
-
-  const value =
-    operation === FILTER_OPERATIONS.is ? rawValue : rawValue.substring(1)
-
-  const clauses = value
-    .split(NON_ESCAPED_PIPE_REGEX)
-    .filter((clause) => !!clause)
-    // @ts-expect-error API supposedly not present in compilation target, but works anyway
-    .map((val) => val.replaceAll(ESCAPED_PIPE, '|'))
-
-  return [operation, filterKey, clauses]
-}
-
-function parseLegacyPropsFilter(rawValue: string) {
-  return Object.entries(JSON.parse(rawValue)).flatMap(([key, propVal]) =>
-    typeof propVal === 'string'
-      ? [parseLegacyFilter(`${EVENT_PROPS_PREFIX}${key}`, propVal)]
-      : []
-  )
-}
-
-export const v1 = {
-  isV1,
-  parseSearch
-}

assets/js/dashboard/util/url-search-params-v2.test.ts

@@ -1,204 +0,0 @@
-import JsonURL from '@jsonurl/jsonurl'
-import { v2 } from './url-search-params-v2'
-
-const {
-  stringifySearchEntry,
-  stringifySearch,
-  parseSearch,
-  parseSearchFragment
-} = v2
-
-describe('using json URL parsing with URLSearchParams intermediate', () => {
-  beforeEach(() => {
-    // Silence logs in tests
-    jest.spyOn(console, 'error').mockImplementation(jest.fn())
-  })
-  it.each([['#'], ['&'], ['=']])('throws on special symbol %p', (s) => {
-    const searchString = `?param=${encodeURIComponent(s)}`
-    expect(() =>
-      JsonURL.parse(new URLSearchParams(searchString).get('param')!)
-    ).toThrow()
-  })
-})
-
-describe(`${stringifySearchEntry.name}`, () => {
-  it.each<[[string, unknown], [string, string | undefined]]>([
-    [
-      ['any-key', {}],
-      ['any-key', undefined]
-    ],
-    [
-      ['any-key', []],
-      ['any-key', undefined]
-    ],
-    [
-      ['any-key', null],
-      ['any-key', undefined]
-    ],
-    [
-      ['period', 'realtime'],
-      ['period', 'realtime']
-    ],
-    [
-      ['page', 10],
-      ['page', '10']
-    ],
-    [
-      ['labels', { US: 'United States', 3448439: 'São Paulo' }],
-      ['labels', '(3448439:S%C3%A3o+Paulo,US:United+States)']
-    ],
-    [
-      ['filters', [['is', 'props:foo:bar', ['one', 'two']]]],
-      ['filters', "((is,'props:foo:bar',(one,two)))"]
-    ]
-  ])('when input is %p, returns %p', (input, expected) => {
-    const result = stringifySearchEntry(input)
-    expect(result).toEqual(expected)
-  })
-})
-
-describe(`${parseSearchFragment.name}`, () => {
-  it.each([
-    ['', null],
-    ['("foo":)', null],
-    ['(invalid', null],
-    ['null', null],
-
-    ['123', 123],
-    ['string', 'string'],
-    ['item=#', 'item=#'],
-    ['item%3D%23', 'item=#'],
-
-    ['(any:(number:1))', { any: { number: 1 } }],
-    ['(any:(number:1.001))', { any: { number: 1.001 } }],
-    ["(any:(string:'1.001'))", { any: { string: '1.001' } }],
-
-    // Non-JSON strings that should return as string
-    ['undefined', 'undefined'],
-    ['not_json', 'not_json'],
-    ['plainstring', 'plainstring'],
-    ['a|b', 'a|b'],
-    ['foo bar#', 'foo bar#']
-  ])(
-    'when searchStringFragment is %p, returns %p',
-    (searchStringFragment, expected) => {
-      const result = parseSearchFragment(searchStringFragment)
-      expect(result).toEqual(expected)
-    }
-  )
-})
-
-describe(`${parseSearch.name}`, () => {
-  it.each([
-    ['', {}],
-    ['?', {}],
-    [
-      '?arr=(1,2)',
-      {
-        arr: [1, 2]
-      }
-    ],
-    ['?key1=value1&key2=', { key1: 'value1', key2: null }],
-    ['?key1=value1&key2=value2', { key1: 'value1', key2: 'value2' }],
-    [
-      '?key1=(foo:bar)&filters=((is,screen,(Mobile,Desktop)))',
-      {
-        key1: { foo: 'bar' },
-        filters: [['is', 'screen', ['Mobile', 'Desktop']]]
-      }
-    ],
-    [
-      '?filters=((is,country,(US)))&labels=(US:United%2BStates)',
-      {
-        filters: [['is', 'country', ['US']]],
-        labels: {
-          US: 'United States'
-        }
-      }
-    ]
-  ])('when searchString is %p, returns %p', (searchString, expected) => {
-    const result = parseSearch(searchString)
-    expect(result).toEqual(expected)
-  })
-})
-
-describe(`${stringifySearch.name} and ${parseSearch.name} are inverses of each other`, () => {
-  it.each([
-    ["?filters=((is,'props:browser_language',(en-US)))"],
-    [
-      '?filters=((contains,utm_term,(_)),(is,screen,(Desktop,Tablet)),(is,page,(/open-source-website-analytics)))&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
-    ],
-    [
-      "?filters=((is,'props:browser_language',(en-US)),(is,country,(US)),(is,os,(iOS)),(is,os_version,('17.3')),(is,page,('/:dashboard/settings/general')))&labels=(US:United%2BStates)"
-    ],
-    [
-      '?filters=((is,utm_source,(hackernewsletter)),(is,utm_campaign,(profile)))&period=day&keybindHint=D'
-    ]
-  ])(
-    `input %p is returned for ${parseSearch.name}(${parseSearch.name}(input))`,
-    (searchString) => {
-      const searchRecord = parseSearch(searchString)
-      const reStringifiedSearch = stringifySearch(searchRecord)
-      expect(reStringifiedSearch).toEqual(searchString)
-    }
-  )
-
-  it.each([
-    // Corresponding test cases for objects parsed from realistic URLs
-
-    [
-      {
-        filters: [['is', 'props:browser_language', ['en-US']]]
-      },
-      "?filters=((is,'props:browser_language',(en-US)))"
-    ],
-    [
-      {
-        filters: [
-          ['contains', 'utm_term', ['_']],
-          ['is', 'screen', ['Desktop', 'Tablet']],
-          ['is', 'page', ['/open-source/analytics/encoded-hash%23']]
-        ],
-        period: 'custom',
-        keybindHint: 'A',
-        comparison: 'previous_period',
-        match_day_of_week: false,
-        from: '2024-08-08',
-        to: '2024-08-10'
-      },
-      '?filters=((contains,utm_term,(_)),(is,screen,(Desktop,Tablet)),(is,page,(%252Fopen-source%252Fanalytics%252Fencoded-hash%252523)))&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
-    ],
-    [
-      {
-        filters: [
-          ['is', 'props:browser_language', ['en-US']],
-          ['is', 'country', ['US']],
-          ['is', 'os', ['iOS']],
-          ['is', 'os_version', ['17.3']],
-          ['is', 'page', ['/:dashboard/settings/general']]
-        ],
-        labels: { US: 'United States' }
-      },
-      "?filters=((is,'props:browser_language',(en-US)),(is,country,(US)),(is,os,(iOS)),(is,os_version,('17.3')),(is,page,('/:dashboard/settings/general')))&labels=(US:United%2BStates)"
-    ],
-    [
-      {
-        filters: [
-          ['is', 'utm_source', ['hackernewsletter']],
-          ['is', 'utm_campaign', ['profile']]
-        ],
-        period: 'day',
-        keybindHint: 'D'
-      },
-      '?filters=((is,utm_source,(hackernewsletter)),(is,utm_campaign,(profile)))&period=day&keybindHint=D'
-    ]
-  ])(
-    `for input %p, ${stringifySearch.name}(input) returns %p and ${parseSearch.name}(${stringifySearch.name}(input)) returns the original input`,
-    (searchRecord, expected) => {
-      const searchString = stringifySearch(searchRecord)
-      const parsedSearchRecord = parseSearch(searchString)
-      expect(parsedSearchRecord).toEqual(searchRecord)
-      expect(searchString).toEqual(expected)
-    }
-  )
-})

assets/js/dashboard/util/url-search-params-v2.ts

@@ -1,83 +0,0 @@
-import JsonURL from '@jsonurl/jsonurl'
-import {
-  encodeURIComponentPermissive,
-  isSearchEntryDefined
-} from './url-search-params'
-
-const permittedCharactersInURLParamKeyValue = ',:/'
-
-function isV2(urlSearchParams: URLSearchParams): boolean {
-  return !!urlSearchParams.get('filters')
-}
-
-function encodeSearchParamEntry([k, v]: [string, string]): string {
-  return [k, v]
-    .map((s) =>
-      encodeURIComponentPermissive(s, permittedCharactersInURLParamKeyValue)
-    )
-    .join('=')
-}
-
-function stringifySearch(searchRecord: Record<string, unknown>): '' | string {
-  const definedSearchEntries = Object.entries(searchRecord || {})
-    .map(stringifySearchEntry)
-    .filter(isSearchEntryDefined)
-
-  const encodedSearchEntries = definedSearchEntries.map(encodeSearchParamEntry)
-
-  return encodedSearchEntries.length ? `?${encodedSearchEntries.join('&')}` : ''
-}
-
-function stringifySearchEntry([key, value]: [string, unknown]): [
-  string,
-  undefined | string
-] {
-  const isEmptyObjectOrArray =
-    typeof value === 'object' &&
-    value !== null &&
-    Object.entries(value).length === 0
-  if (value === undefined || value === null || isEmptyObjectOrArray) {
-    return [key, undefined]
-  }
-
-  return [key, JsonURL.stringify(value)]
-}
-
-function parseSearchFragment(searchStringFragment: string): null | unknown {
-  if (searchStringFragment === '') {
-    return null
-  }
-  // tricky: the search string fragment is already decoded due to URLSearchParams intermediate (see tests),
-  // and these symbols are unparseable
-  const fragmentWithReEncodedSymbols = searchStringFragment
-    /* @ts-expect-error API supposedly not present in compilation target */
-    .replaceAll('=', encodeURIComponent('='))
-    .replaceAll('#', encodeURIComponent('#'))
-    .replaceAll('|', encodeURIComponent('|'))
-    .replaceAll(' ', encodeURIComponent(' '))
-
-  try {
-    return JsonURL.parse(fragmentWithReEncodedSymbols)
-  } catch (error) {
-    console.error(
-      `Failed to parse URL fragment ${fragmentWithReEncodedSymbols}`,
-      error
-    )
-    return null
-  }
-}
-
-function parseSearch(searchString: string): Record<string, unknown> {
-  const urlSearchParams = new URLSearchParams(searchString)
-  const searchRecord: Record<string, unknown> = {}
-  urlSearchParams.forEach((v, k) => (searchRecord[k] = parseSearchFragment(v)))
-  return searchRecord
-}
-
-export const v2 = {
-  isV2,
-  parseSearch,
-  parseSearchFragment,
-  stringifySearch,
-  stringifySearchEntry
-}

assets/js/dashboard/util/url-search-params.test.ts

@@ -1,331 +0,0 @@
-import { Filter } from '../dashboard-state'
-import {
-  encodeURIComponentPermissive,
-  getSearchWithEnforcedSegment,
-  isSearchEntryDefined,
-  maybeGetLatestReadableSearch,
-  maybeReloadForApiVersion,
-  parseFilter,
-  parseLabelsEntry,
-  parseSearch,
-  parseSimpleSearchEntry,
-  serializeFilter,
-  serializeLabelsEntry,
-  serializeSimpleSearchEntry,
-  stringifySearch
-} from './url-search-params'
-
-describe(`${encodeURIComponentPermissive.name}`, () => {
-  it.each<[string, string]>([
-    ['10.00.00/1', '10.00.00/1'],
-    ['#hashtag', '%23hashtag'],
-    ['100$ coupon', '100%24%20coupon'],
-    ['Visit /any/page', 'Visit%20/any/page'],
-    ['A,B,C', 'A,B,C'],
-    ['props:colon/forward/slash/signs', 'props:colon/forward/slash/signs'],
-    ['https://example.com/path', 'https://example.com/path']
-  ])(
-    'when input is %p, returns %s and decodes back to input',
-    (input, expected) => {
-      const result = encodeURIComponentPermissive(input, ',:/')
-      expect(result).toBe(expected)
-      expect(decodeURIComponent(result)).toBe(input)
-    }
-  )
-})
-
-describe(`${isSearchEntryDefined.name}`, () => {
-  it.each<[[string, string | undefined], boolean]>([
-    [['key', undefined], false],
-    [['key', 'value'], true],
-    [['key', ''], true],
-    [['anotherKey', 'undefined'], true]
-  ])('when entry is %p, returns %s', (entry, expected) => {
-    const result = isSearchEntryDefined(entry)
-    expect(result).toBe(expected)
-  })
-})
-
-describe(`${serializeLabelsEntry.name} and ${parseLabelsEntry.name}(...) are opposite of each other`, () => {
-  test.each<[[string, string], string]>([
-    [['US', 'United States'], 'US,United%20States'],
-    [['FR-IDF', 'Île-de-France'], 'FR-IDF,%C3%8Ele-de-France'],
-    [['1254661', 'Thāne'], '1254661,Th%C4%81ne']
-  ])(
-    'entry %p serializes to %p, parses back to original',
-    (entry, expected) => {
-      const serialized = serializeLabelsEntry(entry)
-      expect(serialized).toEqual(expected)
-      expect(parseLabelsEntry(serialized)).toEqual(entry)
-    }
-  )
-})
-
-describe(`${serializeFilter.name} and ${parseFilter.name}(...) are opposite of each other`, () => {
-  test.each<[Filter, string]>([
-    [
-      ['contains', 'entry_page', ['/forecast/:city', ',"\'']],
-      "contains,entry_page,/forecast/:city,%2C%22'"
-    ],
-    [
-      ['is', 'props:complex/prop-with-comma-etc,$#%', ['(none)']],
-      'is,props:complex/prop-with-comma-etc%2C%24%23%25,(none)'
-    ]
-  ])(
-    'filter %p serializes to %p, parses back to original',
-    (filter, expected) => {
-      const serialized = serializeFilter(filter)
-      expect(serialized).toEqual(expected)
-      expect(parseFilter(serialized)).toEqual(filter)
-    }
-  )
-})
-
-describe(`${serializeSimpleSearchEntry.name} and ${parseSimpleSearchEntry.name}`, () => {
-  test.each<
-    [
-      [string, unknown],
-      [string, string | boolean | undefined],
-      [string, string | boolean] | null
-    ]
-  >([
-    [['undefined-param', undefined], ['undefined-param', undefined], null],
-    [['null-param', null], ['null-param', undefined], null],
-    [['array-param', ['any-value']], ['array-param', undefined], null],
-    [['obj-param', { 'any-key': 'any-value' }], ['obj-param', undefined], null],
-    [
-      ['date-obj', new Date('2024-01-01T10:00:00.000Z')],
-      ['date-obj', undefined],
-      null
-    ],
-    [
-      ['page-nr', 5],
-      ['page-nr', '5'],
-      ['page-nr', '5']
-    ],
-    [
-      ['string-param-resembling-boolean', 'true'],
-      ['string-param-resembling-boolean', 'true'],
-      ['string-param-resembling-boolean', true]
-    ],
-    [
-      ['match-day-of-week', false],
-      ['match-day-of-week', 'false'],
-      ['match-day-of-week', false]
-    ],
-    [
-      ['with-imported-data', true],
-      ['with-imported-data', 'true'],
-      ['with-imported-data', true]
-    ],
-    [
-      ['date-string', '2024-12-10'],
-      ['date-string', '2024-12-10'],
-      ['date-string', '2024-12-10']
-    ]
-  ])(
-    'entry %p serializes to %p, parses to %p',
-    (entry, expectedSerialized, expectedParsedEntry) => {
-      const serialized = serializeSimpleSearchEntry(entry)
-      expect(serialized).toEqual(expectedSerialized)
-      expect(
-        serialized[1] === undefined
-          ? null
-          : parseSimpleSearchEntry(serialized[1])
-      ).toEqual(expectedParsedEntry === null ? null : expectedParsedEntry[1])
-    }
-  )
-})
-
-describe(`${parseSearch.name}`, () => {
-  it.each([
-    ['?', {}, ''],
-    ['?=&&', {}, ''],
-    ['?=undefined', {}, ''],
-    ['?foo=', { foo: '' }, '?foo='],
-    ['??foo', { '?foo': '' }, '?%3Ffoo='],
-    [
-      '?f=is,visit:page,/any/page&f',
-      { filters: [['is', 'visit:page', ['/any/page']]] },
-      '?f=is,visit:page,/any/page'
-    ]
-  ])(
-    'for search string %s, returns search record %p, which in turn stringifies to %s',
-    (searchString, expectedSearchRecord, expectedRestringifiedResult) => {
-      expect(parseSearch(searchString)).toEqual(expectedSearchRecord)
-      expect(stringifySearch(expectedSearchRecord)).toEqual(
-        expectedRestringifiedResult
-      )
-    }
-  )
-})
-
-describe(`${stringifySearch.name}`, () => {
-  it.each([
-    [{}, ''],
-    [
-      {
-        filters: [['is', 'props:browser_language', ['en-US']]]
-      },
-      '?f=is,props:browser_language,en-US'
-    ],
-    [
-      {
-        filters: [
-          ['contains', 'utm_term', ['_']],
-          ['is', 'screen', ['Desktop', 'Tablet']],
-          [
-            'is',
-            'page',
-            ['/open-source/analytics/encoded-hash%23', '/unencoded-hash#']
-          ]
-        ],
-        period: 'custom',
-        keybindHint: 'A',
-        comparison: 'previous_period',
-        match_day_of_week: false,
-        from: '2024-08-08',
-        to: '2024-08-10'
-      },
-      '?f=contains,utm_term,_&f=is,screen,Desktop,Tablet&f=is,page,/open-source/analytics/encoded-hash%2523,/unencoded-hash%23&period=custom&keybindHint=A&comparison=previous_period&match_day_of_week=false&from=2024-08-08&to=2024-08-10'
-    ],
-    [
-      {
-        filters: [
-          ['is', 'props:browser_language', ['en-US']],
-          ['is', 'country', ['US']],
-          ['is', 'os', ['iOS']],
-          ['is', 'os_version', ['17.3', '16.0']],
-          ['is', 'page', ['/:dashboard/settings/general']]
-        ],
-        labels: { US: 'United States' }
-      },
-      '?f=is,props:browser_language,en-US&f=is,country,US&f=is,os,iOS&f=is,os_version,17.3,16.0&f=is,page,/:dashboard/settings/general&l=US,United%20States'
-    ]
-  ])('works as expected', (searchRecord, expectedSearchString) => {
-    expect(stringifySearch(searchRecord)).toEqual(expectedSearchString)
-    expect(parseSearch(expectedSearchString)).toEqual(searchRecord)
-  })
-})
-
-describe(`${maybeGetLatestReadableSearch.name}`, () => {
-  it.each([
-    [''],
-    ['?auth=_Y6YOjUl2beUJF_XzG1hk&theme=light&background=%23ee00ee'],
-    ['?keybindHint=Escape&with_imported=true'],
-    ['?f=is,page,/blog/:category/:article-name&date=2024-10-10&period=day'],
-    ['?f=is,country,US&l=US,United%20States']
-  ])('for modern search string %p returns null', (search) => {
-    expect(maybeGetLatestReadableSearch(search)).toBeNull()
-  })
-
-  it('returns updated search string for jsonurl style filters (v2), and running the updated value through the function again returns null (no redirect loop)', () => {
-    const search =
-      '?filters=((is,exit_page,(/plausible.io)),(is,source,(Brave)),(is,city,(993800)))&labels=(993800:Johannesburg)'
-    const expectedUpdatedSearch =
-      '?f=is,exit_page,/plausible.io&f=is,source,Brave&f=is,city,993800&l=993800,Johannesburg&r=v2'
-    expect(maybeGetLatestReadableSearch(search)).toEqual(expectedUpdatedSearch)
-    expect(maybeGetLatestReadableSearch(expectedUpdatedSearch)).toBeNull()
-  })
-
-  it.each([
-    ['?page=/docs', '?f=is,page,/docs&r=v1'],
-    ['?page=%C3%AA&embed=true', '?f=is,page,%C3%AA&embed=true&r=v1'],
-    [
-      '?page=/|/foo&goal=~Signup&source=!Facebook|Instagram',
-      '?f=is,page,/,/foo&f=contains,goal,Signup&f=is_not,source,Facebook,Instagram&r=v1'
-    ]
-  ])(
-    'returns updated search string v1 style filter %s, and running the updated value through the function again returns null (no redirect loop)',
-    (searchString, expectedSearchString) => {
-      expect(maybeGetLatestReadableSearch(searchString)).toEqual(
-        expectedSearchString
-      )
-      expect(maybeGetLatestReadableSearch(expectedSearchString)).toBeNull()
-    }
-  )
-})
-
-describe(`${getSearchWithEnforcedSegment.name}`, () => {
-  it('adds enforced segment appropriately, and running the updated value through the function again returns the same value', () => {
-    const segment = { id: 100, name: 'Eastern Europe' }
-    const search = '?auth=foo&embed=true'
-    const expectedUpdatedSearch =
-      '?f=is,segment,100&l=segment-100,Eastern%20Europe&auth=foo&embed=true'
-    expect(getSearchWithEnforcedSegment(search, segment)).toEqual(
-      expectedUpdatedSearch
-    )
-    expect(
-      getSearchWithEnforcedSegment(expectedUpdatedSearch, segment)
-    ).toEqual(expectedUpdatedSearch)
-  })
-})
-
-describe(`${maybeReloadForApiVersion.name}`, () => {
-  const dashboardPathname = '/example.com'
-
-  beforeEach(() => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    jest.restoreAllMocks()
-  })
-
-  type MockWindowLocation = Location & { replace: jest.Mock }
-
-  function makeLocation(search: string): MockWindowLocation {
-    return {
-      pathname: dashboardPathname,
-      search,
-      hash: '',
-      replace: jest.fn()
-    } as unknown as MockWindowLocation
-  }
-
-  function makeHeaders(version: string | null): Headers {
-    const headers = new Headers()
-    if (version !== null) headers.set('x-api-version', version)
-    return headers
-  }
-
-  it('reloads when effective API version is greater than expected', () => {
-    const location = makeLocation('')
-    maybeReloadForApiVersion(location, makeHeaders('1'))
-    expect(location.replace).toHaveBeenCalledWith(
-      `${dashboardPathname}?api_version_reloaded=1`
-    )
-  })
-
-  it('does not reload when effective API version equals expected', () => {
-    const location = makeLocation('')
-    maybeReloadForApiVersion(location, makeHeaders('0'))
-    expect(location.replace).not.toHaveBeenCalled()
-  })
-
-  it('does not reload when effective API version is less than expected (FE loaded from newer node, cluster not fully updated)', () => {
-    const location = makeLocation('')
-    maybeReloadForApiVersion(location, makeHeaders('-1'))
-    expect(location.replace).not.toHaveBeenCalled()
-  })
-
-  it('does not reload when x-api-version header is absent', () => {
-    const location = makeLocation('')
-    maybeReloadForApiVersion(location, makeHeaders(null))
-    expect(location.replace).not.toHaveBeenCalled()
-  })
-
-  it('does not reload when already reloaded for this version', () => {
-    const location = makeLocation('?api_version_reloaded=1')
-    maybeReloadForApiVersion(location, makeHeaders('1'))
-    expect(location.replace).not.toHaveBeenCalled()
-  })
-
-  it('reloads again if a newer version is detected after a previous reload', () => {
-    const location = makeLocation('?api_version_reloaded=1')
-    maybeReloadForApiVersion(location, makeHeaders('2'))
-    expect(location.replace).toHaveBeenCalledWith(
-      `${dashboardPathname}?api_version_reloaded=2`
-    )
-  })
-})

assets/js/dashboard/util/url-search-params.ts

@@ -1,376 +0,0 @@
-import {
-  getSearchToSetSegmentFilter,
-  SavedSegment
-} from '../filtering/segments'
-import { Filter, FilterClauseLabels } from '../dashboard-state'
-import { v1 } from './url-search-params-v1'
-import { v2 } from './url-search-params-v2'
-
-/**
- * These characters are not URL encoded to have more readable URLs.
- * Browsers seem to handle this just fine.
- * `?f=is,page,/my/page/:some_param` vs `?f=is,page,%2Fmy%2Fpage%2F%3Asome_param``
- */
-const NOT_URL_ENCODED_CHARACTERS = ':/'
-
-export const FILTER_URL_PARAM_NAME = 'f'
-
-const LABEL_URL_PARAM_NAME = 'l'
-
-const REDIRECTED_SEARCH_PARAM_NAME = 'r'
-
-const API_VERSION_RELOAD_PARAM_NAME = 'api_version_reloaded'
-
-const EXPECTED_API_VERSION = parseInt(
-  document
-    .querySelector('meta[name="x-api-version"]')
-    ?.getAttribute('content') ?? '0',
-  10
-)
-
-/**
- * Navigates to the current URL with `api_version_reloaded=<currentApiVersion>`
- * appended, using `location.replace` so the pre-reload entry is not kept in
- * browser history.
- *
- * Returns early without navigating if:
- *
- * - the x-plausible-version response header is not present
- * - the expected version matches the actual version
- * - the version is already present in search params
- *
- * The latter prevents an infinite reload loop when the versions are
- * permanently out of sync.
- *
- * BE: lib/plausible_web/plugs/internal_stats_api_version.ex
- */
-export function maybeReloadForApiVersion(
-  windowLocation: Location,
-  responseHeaders: Headers
-) {
-  const currentApiVersion = getCurrentApiVersion(responseHeaders)
-  const params = new URLSearchParams(windowLocation.search)
-
-  if (
-    currentApiVersion === null ||
-    currentApiVersion <= EXPECTED_API_VERSION ||
-    params.get(API_VERSION_RELOAD_PARAM_NAME) === currentApiVersion.toString()
-  ) {
-    return
-  }
-
-  console.warn('API version mismatch detected, reloading...')
-
-  const newSearch = searchWithApiVersionReload(
-    windowLocation.search,
-    currentApiVersion.toString()
-  )
-  windowLocation.replace(
-    `${windowLocation.pathname}${newSearch}${windowLocation.hash}`
-  )
-}
-
-function getCurrentApiVersion(responseHeaders: Headers): number | null {
-  const versionString = responseHeaders?.get('x-api-version')
-  return versionString ? parseInt(versionString, 10) : null
-}
-
-function searchWithApiVersionReload(search: string, value: string): string {
-  return stringifySearch({
-    ...parseSearch(search),
-    [API_VERSION_RELOAD_PARAM_NAME]: value
-  })
-}
-
-/**
- * This function is able to serialize for URL simple params @see serializeSimpleSearchEntry as well
- * two complex params, labels and filters.
- */
-export function stringifySearch(
-  searchRecord: Record<string, null | undefined | number | string | unknown>
-): '' | string {
-  const { filters, labels, ...rest } = searchRecord ?? {}
-  const definedSearchEntries = Object.entries(rest)
-    .map(serializeSimpleSearchEntry)
-    .filter(isSearchEntryDefined)
-    .map(([k, v]) => `${k}=${v}`)
-
-  if (!Array.isArray(filters) || !filters.length) {
-    return definedSearchEntries.length
-      ? `?${definedSearchEntries.join('&')}`
-      : ''
-  }
-
-  const serializedFilters = Array.isArray(filters)
-    ? filters.map((f) => `${FILTER_URL_PARAM_NAME}=${serializeFilter(f)}`)
-    : []
-
-  const serializedLabels = Object.entries(labels ?? {}).map(
-    (entry) => `${LABEL_URL_PARAM_NAME}=${serializeLabelsEntry(entry)}`
-  )
-
-  return `?${serializedFilters.concat(serializedLabels).concat(definedSearchEntries).join('&')}`
-}
-
-export function normalizeSearchString(searchString: string): string {
-  return searchString.startsWith('?') ? searchString.slice(1) : searchString
-}
-
-export function parseSearch(searchString: string): Record<string, unknown> {
-  const searchRecord: Record<string, string | boolean> = {}
-  const filters: Filter[] = []
-  const labels: FilterClauseLabels = {}
-
-  const normalizedSearchString = normalizeSearchString(searchString)
-
-  if (!normalizedSearchString.length) {
-    return searchRecord
-  }
-
-  const meaningfulParams = normalizedSearchString
-    .split('&')
-    .filter((i) => i.length > 0)
-
-  for (const param of meaningfulParams) {
-    const [key, rawValue = ''] = param.split('=')
-    switch (key) {
-      case FILTER_URL_PARAM_NAME: {
-        const filter = parseFilter(rawValue)
-        if (filter.length === 3 && filter[2].length) {
-          filters.push(filter)
-        }
-        break
-      }
-      case LABEL_URL_PARAM_NAME: {
-        const [labelKey, labelValue] = parseLabelsEntry(rawValue)
-        if (labelKey.length && labelValue.length) {
-          labels[labelKey] = labelValue
-        }
-        break
-      }
-      case '': {
-        break
-      }
-      default: {
-        const parsedValue = parseSimpleSearchEntry(rawValue)
-        if (parsedValue !== null) {
-          searchRecord[decodeURIComponent(key)] = parsedValue
-        }
-      }
-    }
-  }
-
-  return {
-    ...searchRecord,
-    ...(filters.length && { filters }),
-    ...(Object.keys(labels).length && { labels })
-  }
-}
-
-/**
- * Serializes and flattens @see FilterClauseLabels entries.
- * Examples:
- * ["US","United States"] -> "US,United%20States"
- * ["US-CA","California"] -> "US-CA,California"
- * ["5391959","San Francisco"] -> "5391959,San%20Francisco"
- */
-export function serializeLabelsEntry([labelKey, labelValue]: [string, string]) {
-  return `${encodeURIComponentPermissive(labelKey, NOT_URL_ENCODED_CHARACTERS)},${encodeURIComponentPermissive(labelValue, NOT_URL_ENCODED_CHARACTERS)}`
-}
-
-/**
- * Parses the output of @see serializeLabelsEntry back to labels object entry.
- */
-export function parseLabelsEntry(
-  labelKeyValueString: string
-): [string, string] {
-  const [key, value] = labelKeyValueString.split(',')
-  return [decodeURIComponent(key), decodeURIComponent(value)]
-}
-
-/**
- * Serializes and flattens filters array item.
- * Examples:
- * ["is", "entry_page", ["/blog", "/news"]] -> "is,entry_page,/blog,/news"
- */
-export function serializeFilter([operator, dimension, clauses]: Filter) {
-  const serializedFilter = [
-    encodeURIComponentPermissive(operator, NOT_URL_ENCODED_CHARACTERS),
-    encodeURIComponentPermissive(dimension, NOT_URL_ENCODED_CHARACTERS),
-    ...clauses.map((clause) =>
-      encodeURIComponentPermissive(
-        clause.toString(),
-        NOT_URL_ENCODED_CHARACTERS
-      )
-    )
-  ].join(',')
-  return serializedFilter
-}
-
-/**
- * Parses the output of @see serializeFilter back to filters array item.
- */
-export function parseFilter(filterString: string): Filter {
-  const [operator, dimension, ...unparsedClauses] = filterString.split(',')
-  return [
-    decodeURIComponent(operator),
-    decodeURIComponent(dimension),
-    unparsedClauses.map(decodeURIComponent)
-  ]
-}
-
-/**
- * Encodes for URL simple search param values.
- * Encodes numbers and number-like strings as indistinguishable strings. Parse treats them as strings.
- * Encodes booleans and strings "true" and "false" as indistinguishable strings. Parse treats these as booleans.
- * Unifies unhandleable complex search entries like undefined, null, objects and arrays as undefined.
- * Complex URL params must be handled separately.
- */
-export function serializeSimpleSearchEntry([key, value]: [string, unknown]): [
-  string,
-  undefined | string
-] {
-  if (value === undefined || value === null || typeof value === 'object') {
-    return [key, undefined]
-  }
-  return [
-    encodeURIComponentPermissive(key, ',:/'),
-    encodeURIComponentPermissive(value.toString(), ',:/')
-  ]
-}
-
-/**
- * Parses output of @see serializeSimpleSearchEntry.
- */
-export function parseSimpleSearchEntry(
-  searchParamValue: string
-): null | string | boolean {
-  if (searchParamValue === 'true') {
-    return true
-  }
-  if (searchParamValue === 'false') {
-    return false
-  }
-  return decodeURIComponent(searchParamValue)
-}
-
-export function encodeURIComponentPermissive(
-  input: string,
-  permittedCharacters: string
-): string {
-  return Array.from(permittedCharacters)
-    .map((character) => [encodeURIComponent(character), character])
-    .reduce(
-      (acc, [encodedCharacter, character]) =>
-        /* @ts-expect-error API supposedly not present in compilation target, but works in major browsers */
-        acc.replaceAll(encodedCharacter, character),
-      encodeURIComponent(input)
-    )
-}
-
-export function isSearchEntryDefined(
-  entry: [string, undefined | string]
-): entry is [string, string] {
-  return entry[1] !== undefined
-}
-
-function isAlreadyRedirected(searchParams: URLSearchParams) {
-  return ['v1', 'v2'].includes(searchParams.get(REDIRECTED_SEARCH_PARAM_NAME)!)
-}
-
-/** 
-  Dashboard state is kept on the URL for people to be able to link to what that they see.
-  Because dashboard state is a complex object, in the interest of readable URLs, custom serialization and parsing is in place.
-  
-  Versions
-    * v1: @see v1
-      A custom encoding schema was used for filters, (e.g. "?page=/blog"). 
-      This was not flexible enough and diverged from how we represented filters in the code.
-      
-    * v2: @see v2
-      jsonurl library was used to serialize the state. 
-      The links from this solution didn't always auto-sense across all platforms (e.g. Twitter), cutting off too soon and leading users to broken dashboards.
-      
-    * current version: this module. 
-      Custom encoding.
-   
-  The purpose of this function is to redirect users from one of the previous versions to the current version, 
-  so previous dashboard links still work.
-*/
-export function maybeGetLatestReadableSearch(
-  searchString: string
-): null | string {
-  const searchParams = new URLSearchParams(searchString)
-  if (isAlreadyRedirected(searchParams)) {
-    return null
-  }
-  const isCurrentVersion = searchParams.get(FILTER_URL_PARAM_NAME)
-  if (isCurrentVersion) {
-    return null
-  }
-
-  const isV2 = v2.isV2(searchParams)
-  const isV1 = v1.isV1(searchParams)
-
-  if (isV2) {
-    return stringifySearch({
-      ...v2.parseSearch(searchString),
-      [REDIRECTED_SEARCH_PARAM_NAME]: 'v2'
-    })
-  }
-
-  if (isV1) {
-    return stringifySearch({
-      ...v1.parseSearch(searchString),
-      [REDIRECTED_SEARCH_PARAM_NAME]: 'v1'
-    })
-  }
-
-  return null
-}
-
-/**
- * It's possible to set a particular segment to be always applied on the data on dashboards accessed with a shared link.
- * This function ensures that the particular segment filter is set to the URL string on initial page load.
- * Other functions ensure that it can't be removed.
- */
-export function getSearchWithEnforcedSegment(
-  searchString: string,
-  enforcedSegment: Pick<SavedSegment, 'id' | 'name'>
-): string {
-  const searchRecord = parseSearch(searchString)
-  return stringifySearch(
-    getSearchToSetSegmentFilter(enforcedSegment)(searchRecord)
-  )
-}
-
-/** Called once before React app mounts. If legacy url search params are present, does a redirect to new format. */
-export function maybeDoFERedirect(
-  windowLocation: Location,
-  windowHistory: History,
-  enforcedSegment: Pick<SavedSegment, 'id' | 'name'> | null
-) {
-  const originalSearchString = windowLocation.search
-
-  let updatedSearchString = maybeGetLatestReadableSearch(originalSearchString)
-
-  if (enforcedSegment) {
-    updatedSearchString = getSearchWithEnforcedSegment(
-      updatedSearchString ?? originalSearchString,
-      enforcedSegment
-    )
-  }
-
-  if (
-    updatedSearchString === null ||
-    updatedSearchString === originalSearchString
-  ) {
-    return
-  }
-
-  windowHistory.pushState(
-    {},
-    '',
-    `${windowLocation.pathname}${updatedSearchString}`
-  )
-}

assets/js/dashboard/util/url.test.ts

@@ -1,105 +0,0 @@
-import { apiPath, externalLinkForPage, isValidHttpUrl, trimURL } from './url'
-import { siteContextDefaultValue } from '../site-context'
-
-describe('apiPath', () => {
-  it.each([
-    ['example.com', undefined, '/api/stats/example.com/'],
-    ['example.com', '', '/api/stats/example.com/'],
-    ['example.com', '/test', '/api/stats/example.com/test/'],
-    [
-      'example.com/path/is-really/deep',
-      '',
-      '/api/stats/example.com%2Fpath%2Fis-really%2Fdeep/'
-    ]
-  ])(
-    'when site.domain is %p and path is %s, should return %s',
-    (domain, path, expected) => {
-      const result = apiPath({ domain }, path)
-      expect(result).toBe(expected)
-    }
-  )
-})
-
-describe('externalLinkForPage', () => {
-  it.each([
-    ['example.com', '/about', 'https://example.com/about'],
-    ['sub.example.com', '/contact', 'https://sub.example.com/contact'],
-    [
-      'example.com',
-      '/search?q=test#section',
-      'https://example.com/search?q=test#section'
-    ],
-    ['example.com', '/', 'https://example.com/']
-  ])(
-    'when domain is %s and page is %s, it should return %s',
-    (domain, page, expected) => {
-      const site = { ...siteContextDefaultValue, domain: domain }
-      const result = externalLinkForPage(site, page)
-      expect(result).toBe(expected)
-    }
-  )
-
-  it('returns null for consolidated view', () => {
-    const consolidatedView = {
-      ...siteContextDefaultValue,
-      isConsolidatedView: true
-    }
-    expect(externalLinkForPage(consolidatedView, '/some-page')).toBe(null)
-  })
-})
-
-describe('isValidHttpUrl', () => {
-  it.each([
-    // Valid HTTP and HTTPS URLs
-    ['http://example.com', true],
-    ['https://example.com', true],
-    ['http://www.example.com', true],
-    ['https://sub.domain.com', true],
-    ['https://example.com/path?query=1#fragment', true],
-
-    // Invalid URLs (invalid protocol)
-    ['ftp://example.com', false],
-    ['mailto:someone@example.com', false],
-    ['file:///C:/path/to/file', false],
-    ['data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==', false],
-
-    // Invalid URLs (malformed or non-URL strings)
-    ['//example.com', false],
-    ['example.com', false],
-    ['just-a-string', false],
-    ['', false],
-    ['https//:example.com', false],
-
-    // Edge cases
-    ['http:/example.com', true],
-    ['http://localhost', true],
-    ['https://127.0.0.1', true],
-    ['https://[::1]', true], // IPv6 URL
-    ['http://user:pass@127.0.0.1', true],
-    ['https://example.com:8080', true]
-  ])('for input %s returns %s', (input, expected) => {
-    const result = isValidHttpUrl(input)
-    expect(result).toBe(expected)
-  })
-})
-
-describe('trimURL', () => {
-  it.each([
-    // Test cases where URL length is less than or equal to maxLength
-    ['https://example.com', 20, 'https://example.com'],
-    ['http://example.com', 50, 'http://example.com'],
-
-    // Test cases where host itself is too long
-    [
-      'https://a-very-long-domain-name.com',
-      20,
-      'https://a-very-long-dom...domain-name.com'
-    ]
-  ])(
-    'when url is %s and maxLength is %d, should return %s',
-    (url, maxLength, expected) => {
-      const result = trimURL(url, maxLength)
-      expect(result).toBe(expected)
-    }
-  )
-})

assets/js/dashboard/util/url.ts

@@ -1,86 +0,0 @@
-import { PlausibleSite } from '../site-context'
-
-export function apiPath(
-  site: Pick<PlausibleSite, 'domain'>,
-  path = ''
-): string {
-  return `/api/stats/${encodeURIComponent(site.domain)}${path}/`
-}
-
-export function externalLinkForPage(
-  site: PlausibleSite,
-  page: string,
-  hostname?: string
-): string | null {
-  if (hostname) {
-    return `https://${hostname}${page}`
-  }
-  if (site.isConsolidatedView) {
-    return null
-  }
-  try {
-    const domainURL = new URL(`https://${site.domain}`)
-    return `https://${domainURL.host}${page}`
-  } catch (_error) {
-    return null
-  }
-}
-
-export function isValidHttpUrl(input: string): boolean {
-  let url
-
-  try {
-    url = new URL(input)
-  } catch (_) {
-    return false
-  }
-
-  return url.protocol === 'http:' || url.protocol === 'https:'
-}
-
-export function trimURL(url: string, maxLength: number): string {
-  if (url.length <= maxLength) {
-    return url
-  }
-
-  const ellipsis = '...'
-
-  if (isValidHttpUrl(url)) {
-    const [protocol, restURL] = url.split('://')
-    const parts = restURL.split('/')
-
-    const host = parts.shift() || ''
-    if (host.length > maxLength - 5) {
-      return `${protocol}://${host.substr(0, maxLength - 5)}${ellipsis}${restURL.slice(-maxLength + 5)}`
-    }
-
-    let remainingLength = maxLength - host.length - 5
-    let trimmedURL = `${protocol}://${host}`
-
-    for (const part of parts) {
-      if (part.length <= remainingLength) {
-        trimmedURL += '/' + part
-        remainingLength -= part.length + 1
-      } else {
-        const startTrim = Math.floor((remainingLength - 3) / 2)
-        const endTrim = Math.ceil((remainingLength - 3) / 2)
-        trimmedURL += `/${part.substr(0, startTrim)}...${part.slice(-endTrim)}`
-        break
-      }
-    }
-
-    return trimmedURL
-  } else {
-    const leftSideLength = Math.floor(maxLength / 2)
-    const rightSideLength = maxLength - leftSideLength
-
-    const leftSide = url.slice(0, leftSideLength)
-    const rightSide = url.slice(-rightSideLength)
-
-    return leftSide + ellipsis + rightSide
-  }
-}
-
-export function maybeEncodeRouteParam(param: string) {
-  return param.includes('/') ? encodeURIComponent(param) : param
-}

assets/js/embed.content.js

@@ -1,16 +0,0 @@
-import 'iframe-resizer/js/iframeResizer.contentWindow'
-
-window.iFrameResizer = {
-  onMessage: function (msg) {
-    if (msg.type === 'load-custom-styles') {
-      addCustomStyles(msg.opts)
-    }
-  }
-}
-
-function addCustomStyles(opts) {
-  var style = document.createElement('style')
-  style.innerHTML = opts.styles
-
-  document.head.appendChild(style)
-}

assets/js/embed.host.js

@@ -1,24 +0,0 @@
-import iframeResize from 'iframe-resizer/js/iframeResizer'
-
-var iframes = iframeResize(
-  {
-    heightCalculationMethod: 'taggedElement',
-    onInit: onInit,
-    checkOrigin: false
-  },
-  '[plausible-embed]'
-)
-
-function onInit() {
-  var iframe = iframes[0]
-  var styles = iframe.getAttribute('styles')
-
-  if (styles) {
-    iframe.iFrameResizer.sendMessage({
-      type: 'load-custom-styles',
-      opts: {
-        styles: styles
-      }
-    })
-  }
-}

assets/js/liveview/combo-box.js

@@ -1,98 +0,0 @@
-// Courtesy of Benjamin von Polheim:
-// https://blog.devgenius.io/build-a-performat-autocomplete-using-phoenix-liveview-and-alpine-js-8bcbbed17ba7
-
-export default (id) => ({
-  isOpen: false,
-  id: id,
-  focus: null,
-  selectionInProgress: false,
-  firstFocusRegistered: false,
-  setFocus(f) {
-    this.focus = f
-  },
-  initFocus() {
-    if (this.focus === null) {
-      this.setFocus(this.leastFocusableIndex())
-      if (!this.firstFocusRegistered) {
-        document.getElementById(this.id).select()
-        this.firstFocusRegistered = true
-      }
-    }
-  },
-  trackSubmitValueChange() {
-    this.selectionInProgress = false
-  },
-  open() {
-    if (!this.isOpen) {
-      this.initFocus()
-      this.isOpen = true
-    }
-  },
-  suggestionsCount() {
-    return this.$refs.suggestions?.querySelectorAll('li').length
-  },
-  hasCreatableOption() {
-    return this.$refs.suggestions
-      ?.querySelector('li')
-      .classList.contains('creatable')
-  },
-  leastFocusableIndex() {
-    if (this.suggestionsCount() === 0) {
-      return 0
-    }
-    return this.hasCreatableOption() ? 0 : 1
-  },
-  maxFocusableIndex() {
-    return this.hasCreatableOption()
-      ? this.suggestionsCount() - 1
-      : this.suggestionsCount()
-  },
-  nextFocusableIndex() {
-    const currentFocus = this.focus
-    return currentFocus + 1 > this.maxFocusableIndex()
-      ? this.leastFocusableIndex()
-      : currentFocus + 1
-  },
-  prevFocusableIndex() {
-    const currentFocus = this.focus
-    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') {
-      e.stopPropagation()
-    }
-    this.isOpen = false
-  },
-  select() {
-    this.$refs[`dropdown-${this.id}-option-${this.focus}`]?.click()
-    this.close()
-    document.getElementById(this.id).blur()
-  },
-  scrollTo(idx) {
-    this.$refs[`dropdown-${this.id}-option-${idx}`]?.scrollIntoView({
-      block: 'nearest',
-      behavior: 'smooth',
-      inline: 'start'
-    })
-  },
-  focusNext() {
-    const nextIndex = this.nextFocusableIndex()
-
-    this.open()
-
-    this.setFocus(nextIndex)
-    this.scrollTo(nextIndex)
-  },
-  focusPrev() {
-    const prevIndex = this.prevFocusableIndex()
-
-    this.open()
-
-    this.setFocus(prevIndex)
-    this.scrollTo(prevIndex)
-  }
-})

assets/js/liveview/dropdown.js

@@ -1,20 +0,0 @@
-// From https://alpinejs.dev/component/dropdown
-
-export default () => ({
-  open: false,
-  toggle() {
-    if (this.open) {
-      return this.close()
-    }
-
-    this.$refs.button.focus()
-    this.open = true
-  },
-
-  close(focusAfter) {
-    if (!this.open) return
-
-    this.open = false
-    focusAfter?.focus()
-  }
-})

assets/js/liveview/live_socket.js

@@ -1,78 +0,0 @@
-/**
-  The modules below this comment block are resolved from '../deps' folder,
-  which does not exist when running the lint command in Github CI
-*/
-
-/* eslint-disable import/no-unresolved */
-import 'phoenix_html'
-import { Socket } from 'phoenix'
-import { LiveSocket } from 'phoenix_live_view'
-import { Modal, Dropdown } from 'prima'
-import topbar from 'topbar'
-/* eslint-enable import/no-unresolved */
-
-import Alpine from 'alpinejs'
-
-let csrfToken = document.querySelector("meta[name='csrf-token']")
-let websocketUrl = document.querySelector("meta[name='websocket-url']")
-if (csrfToken && websocketUrl) {
-  let Hooks = { Modal, Dropdown }
-  Hooks.Metrics = {
-    mounted() {
-      this.handleEvent('send-metrics', ({ event_name }) => {
-        window.plausible(event_name)
-        this.pushEvent('send-metrics-after', { event_name })
-      })
-    }
-  }
-  let Uploaders = {}
-  Uploaders.S3 = function (entries, onViewError) {
-    entries.forEach((entry) => {
-      let xhr = new XMLHttpRequest()
-      onViewError(() => xhr.abort())
-      xhr.onload = () =>
-        xhr.status === 200 ? entry.progress(100) : entry.error()
-      xhr.onerror = () => entry.error()
-      xhr.upload.addEventListener('progress', (event) => {
-        if (event.lengthComputable) {
-          let percent = Math.round((event.loaded / event.total) * 100)
-          if (percent < 100) {
-            entry.progress(percent)
-          }
-        }
-      })
-      let url = entry.meta.url
-      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 liveSocket = new LiveSocket(liveUrl, Socket, {
-    heartbeatIntervalMs: 10000,
-    params: { _csrf_token: token },
-    hooks: Hooks,
-    uploaders: Uploaders,
-    dom: {
-      // for alpinejs integration
-      onBeforeElUpdated(from, to) {
-        if (from._x_dataStack) {
-          Alpine.clone(from, to)
-        }
-      }
-    }
-  })
-
-  topbar.config({
-    barColors: { 0: '#303f9f' },
-    shadowColor: 'rgba(0, 0, 0, .3)',
-    barThickness: 4
-  })
-  window.addEventListener('phx:page-loading-start', (_info) => topbar.show())
-  window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide())
-  window.addEventListener('scroll-to-top', () => window.scrollTo(0, 0))
-
-  liveSocket.connect()
-  window.liveSocket = liveSocket
-}

assets/js/liveview/phx_events.js

@@ -1,20 +0,0 @@
-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 }))
-  }
-})
-
-window.addEventListener(`phx:js-exec`, ({ detail }) => {
-  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 })
-  )
-})

assets/js/polyfills/closest.js

@@ -1,14 +0,0 @@
-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
-  }
-}

assets/js/types/globals.d.ts

@@ -1 +0,0 @@
-declare const BUILD_EXTRA: boolean

assets/js/types/query-api.d.ts

@@ -1,216 +0,0 @@
-/* Autogenerated, recreate with `npm run --prefix assets generate-types` */
-
-export type Metric =
-  | "visitors"
-  | "visits"
-  | "pageviews"
-  | "views_per_visit"
-  | "bounce_rate"
-  | "visit_duration"
-  | "events"
-  | "percentage"
-  | "conversion_rate"
-  | "group_conversion_rate"
-  | "time_on_page"
-  | "total_revenue"
-  | "average_revenue"
-  | "scroll_depth";
-export type DateRangeShorthand =
-  | "all"
-  | "day"
-  | "24h"
-  | "7d"
-  | "28d"
-  | "30d"
-  | "91d"
-  | "month"
-  | "6mo"
-  | "12mo"
-  | "year"
-  | string;
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type DateTimeRange = [string, string];
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type DateRange = [string, string];
-export type Dimensions = SimpleFilterDimensions | CustomPropertyFilterDimensions | GoalDimension | TimeDimensions;
-export type SimpleFilterDimensions =
-  | "event:name"
-  | "event:page"
-  | "event:hostname"
-  | "visit:source"
-  | "visit:channel"
-  | "visit:referrer"
-  | "visit:utm_medium"
-  | "visit:utm_source"
-  | "visit:utm_campaign"
-  | "visit:utm_content"
-  | "visit:utm_term"
-  | "visit:screen"
-  | "visit:device"
-  | "visit:browser"
-  | "visit:browser_version"
-  | "visit:os"
-  | "visit:os_version"
-  | "visit:country"
-  | "visit:region"
-  | "visit:city"
-  | "visit:country_name"
-  | "visit:region_name"
-  | "visit:city_name"
-  | "visit:entry_page"
-  | "visit:exit_page"
-  | "visit:entry_page_hostname"
-  | "visit:exit_page_hostname";
-export type CustomPropertyFilterDimensions = `event:props:${string}`;
-export type GoalDimension = "event:goal";
-export type TimeDimensions = "time" | "time:month" | "time:week" | "time:day" | "time:hour";
-export type FilterTree = FilterEntry | FilterAndOr | FilterNot | FilterHasDone;
-export type FilterEntry = FilterWithoutGoals | FilterWithIs | FilterWithContains | FilterWithPattern;
-/**
- * @minItems 3
- * @maxItems 4
- */
-export type FilterWithoutGoals =
-  | [FilterOperationWithoutGoals, SimpleFilterDimensions | CustomPropertyFilterDimensions, Clauses]
-  | [
-      FilterOperationWithoutGoals,
-      SimpleFilterDimensions | CustomPropertyFilterDimensions,
-      Clauses,
-      {
-        case_sensitive?: boolean;
-      }
-    ];
-/**
- * filter operation
- */
-export type FilterOperationWithoutGoals = "is_not" | "contains_not";
-/**
- * @minItems 1
- */
-export type Clauses = [string | number, ...(string | number)[]];
-/**
- * @minItems 3
- * @maxItems 4
- */
-export type FilterWithIs =
-  | ["is", GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions | "segment", Clauses]
-  | [
-      "is",
-      GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions | "segment",
-      Clauses,
-      {
-        case_sensitive?: boolean;
-      }
-    ];
-/**
- * @minItems 3
- * @maxItems 4
- */
-export type FilterWithContains =
-  | ["contains", GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions, Clauses]
-  | [
-      "contains",
-      GoalDimension | SimpleFilterDimensions | CustomPropertyFilterDimensions,
-      Clauses,
-      {
-        case_sensitive?: boolean;
-      }
-    ];
-/**
- * @minItems 3
- * @maxItems 3
- */
-export type FilterWithPattern = [
-  FilterOperationRegex,
-  SimpleFilterDimensions | CustomPropertyFilterDimensions,
-  Clauses
-];
-/**
- * filter operation
- */
-export type FilterOperationRegex = "matches" | "matches_not";
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type FilterAndOr = ["and" | "or", [FilterTree, ...FilterTree[]]];
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type FilterNot = ["not", FilterTree];
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type FilterHasDone = ["has_done" | "has_not_done", FilterTree];
-/**
- * @minItems 2
- * @maxItems 2
- */
-export type OrderByEntry = [
-  Metric | SimpleFilterDimensions | CustomPropertyFilterDimensions | TimeDimensions,
-  SortDirection
-];
-/**
- * Sorting order
- */
-export type SortDirection = "asc" | "desc";
-
-export interface QueryApiSchema {
-  /**
-   * Domain of site to query
-   */
-  site_id: string;
-  /**
-   * List of metrics to query
-   *
-   * @minItems 1
-   */
-  metrics: [Metric, ...Metric[]];
-  /**
-   * Date range to query
-   */
-  date_range: DateRangeShorthand | DateTimeRange | DateRange;
-  /**
-   * What to group the results by. Same as `property` in Plausible API v1
-   */
-  dimensions?: Dimensions[];
-  /**
-   * How to drill into your data
-   */
-  filters?: FilterTree[];
-  /**
-   * How to order query results
-   */
-  order_by?: OrderByEntry[];
-  include?: {
-    time_labels?: boolean;
-    imports?: boolean;
-    /**
-     * If set, returns the total number of result rows rows before pagination under `meta.total_rows`
-     */
-    total_rows?: boolean;
-    /**
-     * If set and using `day`, `month` or `year` date_ranges, the query will be trimmed to the current date
-     */
-    trim_relative_date_range?: boolean;
-  };
-  pagination?: Pagination;
-}
-export interface Pagination {
-  /**
-   * Number of rows to limit result to.
-   */
-  limit?: number;
-  /**
-   * Pagination offset.
-   */
-  offset?: number;
-}