Add report percentages to dashboard and details view (#5923)

* Update report percentages on dashboard and details view

* Add percentages to Countries, Regions, and Cities reports

* Add percentages to Channels, Sources, and UTM reports

* Add percentages to top pages, entry pages, and exit pages reports

* Update tests to include percentages

* Change dashboard copy from title case to sentence case

* Update details modal style

* Make animations snappier

* Introduce max height to modal and make inner content scrollable

* Improve modal mobile design

- Enable horizontal scroll for details modal on mobile
- Add responsive spacing and positioning to modal

* Added mobile tap behavior to external link in list report

* Show tooltips only when in comparison mode or when the number is abbreviated

* remove previously added showTooltip prop

- This isn't needed anymore since we now handle the tooltip logic in the MetricValue component

* Show long format upon hovering detailed view metrics

* Added mobile tapping behaviour to detailed view

* Added percentages to all detailed views

* Add mobile swipe-to-close behavior for modal

* Adjust sensitivity of modal drag to close

* Use hammerjs for swipe-to-close modal behaviour

* Prevent dragging if gesture starts inside table

* Show 2 decimal places for percentages < 0.1% across dashboard

* Adjust dark mode styles

* Add hover effect to external link icon

* Update tests to expect two-decimal percentages

* Undo hammer install and revert to old modal styling

* Remove CR and % columns from goals and custom props reports on dashboard, and show on hover in detailed view

* Remove unused constants

* Undo conversion rate on hover behaviour

- Unlike percentages, CR should show permanently.

* Show percentages permanently in custom props detailed view

* Adjust width of conversion metrics column

* Updated metric-value test

* Update top-bar test

* Added changelog entry

* Fix test expectations for percentages with imported data

- Update tests to expect correct percentages (≤100%) when imported data is included. These tests will fail until the percentage calculation bug is fixed, documenting the expected behavior.

* Add imported_visitors to tests to ensure correct total_visitors calculation

* Correct imported_visitors count in test

Author: sanne-san

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 
+- A visitor percentage breakdown is now shown on all reports, both on the dashboard and in the detailed breakdown
+
 ### Removed
 
 ### Changed

assets/css/app.css

@@ -90,6 +90,7 @@
   --color-gray-950: var(--color-zinc-950);
 
   /* Custom gray shades from config (override some zinc values) */
+  --color-gray-75: rgb(247 247 248);
   --color-gray-150: rgb(236 236 238);
   --color-gray-750: rgb(50 50 54);
   --color-gray-825: rgb(35 35 38);
@@ -294,16 +295,12 @@ blockquote {
   display: inline;
 }
 
-.table-striped tbody tr:nth-child(odd) {
-  background-color: var(--color-gray-100);
+.table-striped tbody tr:nth-child(odd) td {
+  background-color: var(--color-gray-75);
 }
 
-.dark .table-striped tbody tr:nth-child(odd) {
-  background-color: var(--color-gray-800);
-}
-
-.dark .table-striped tbody tr:nth-child(even) {
-  background-color: var(--color-gray-900);
+.dark .table-striped tbody tr:nth-child(odd) td {
+  background-color: var(--color-gray-850);
 }
 
 .fade-enter {

assets/css/modal.css

@@ -32,33 +32,6 @@
   overflow: auto;
 }
 
-.modal__container {
-  background-color: #fff;
-  padding: 1rem 2rem;
-  border-radius: 4px;
-  margin: 50px auto;
-  box-sizing: border-box;
-  min-height: 509px;
-  transition: height 200ms ease-in;
-}
-
-.modal__close {
-  position: fixed;
-  color: #b8c2cc;
-  font-size: 48px;
-  font-weight: bold;
-  top: 12px;
-  right: 24px;
-}
-
-.modal__close::before {
-  content: '\2715';
-}
-
-.modal__content {
-  margin-bottom: 2rem;
-}
-
 @keyframes mm-fade-in {
   from {
     opacity: 0;

assets/js/dashboard/components/search-input.tsx

@@ -66,7 +66,7 @@ export const SearchInput = ({
         type="text"
         placeholder={isFocused ? placeholderFocused : placeholderUnfocused}
         className={classNames(
-          'dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 w-48 dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500',
+          'text-sm dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 max-w-64 w-full dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500',
           className
         )}
         onChange={debouncedOnSearchInputChange}

assets/js/dashboard/components/sort-button.tsx

@@ -15,24 +15,27 @@ export const SortButton = ({
   return (
     <button
       onClick={toggleSort}
-      className={classNames('group', 'hover:underline', 'relative')}
+      className={classNames(
+        'group',
+        'hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-100',
+        'relative'
+      )}
     >
       {children}
       <span
         title={next.hint}
         className={classNames(
           'absolute',
-          'rounded inline-block h-4 w-4',
+          'rounded inline-block size-4',
           'ml-1',
           {
             [SortDirection.asc]: 'rotate-180',
             [SortDirection.desc]: 'rotate-0'
           }[sortDirection ?? next.direction],
           !sortDirection && 'opacity-0',
           !sortDirection && 'group-hover:opacity-100',
-          sortDirection &&
-            'group-hover:bg-gray-100 dark:group-hover:bg-gray-900',
-          'transition'
+          'group-hover:bg-gray-100 dark:group-hover:bg-gray-900',
+          'transition-all duration-100'
         )}
       >
         ↓

assets/js/dashboard/components/table.tsx

@@ -21,7 +21,7 @@ export type ColumnConfiguraton<T extends Record<string, unknown>> = {
   /**
    * Function used to transform the value found at item[key] for the cell. Superseded by renderItem if present. @example 1120 => "1.1k"
    */
-  renderValue?: (item: T) => ReactNode
+  renderValue?: (item: T, isRowHovered?: boolean) => ReactNode
   /** Function used to create richer cells */
   renderItem?: (item: T) => ReactNode
 }
@@ -38,7 +38,7 @@ export const TableHeaderCell = ({
   return (
     <th
       className={classNames(
-        'p-2 text-xs font-bold text-gray-500 dark:text-gray-400 tracking-wide',
+        'p-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
         className
       )}
       align={align}
@@ -58,7 +58,13 @@ export const TableCell = ({
   align?: 'left' | 'right'
 }) => {
   return (
-    <td className={classNames('p-2 font-medium', className)} align={align}>
+    <td
+      className={classNames(
+        'p-2 font-medium first:rounded-s-sm last:rounded-e-sm',
+        className
+      )}
+      align={align}
+    >
       {children}
     </td>
   )
@@ -68,15 +74,42 @@ export const ItemRow = <T extends Record<string, string | number | ReactNode>>({
   rowIndex,
   pageIndex,
   item,
-  columns
+  columns,
+  tappedRowName,
+  onRowTap
 }: {
   rowIndex: number
   pageIndex?: number
   item: T
   columns: ColumnConfiguraton<T>[]
+  tappedRowName?: string | null
+  onRowTap?: (rowName: string | null) => void
 }) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  const rowName = (item as unknown as { name: string }).name
+  const isTapped = tappedRowName === rowName
+  const isRowActive = isHovered || isTapped
+
+  const handleRowClick = (e: React.MouseEvent) => {
+    if (window.innerWidth < 768 && !(e.target as HTMLElement).closest('a')) {
+      if (onRowTap) {
+        if (isTapped) {
+          onRowTap(null)
+        } else {
+          onRowTap(rowName)
+        }
+      }
+    }
+  }
+
   return (
-    <tr className="text-sm dark:text-gray-200">
+    <tr
+      className="group text-sm dark:text-gray-200 md:cursor-default cursor-pointer"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleRowClick}
+    >
       {columns.map(({ key, width, align, renderValue, renderItem }) => (
         <TableCell
           key={`${(pageIndex ?? null) === null ? '' : `page_${pageIndex}_`}row_${rowIndex}_${String(key)}`}
@@ -86,7 +119,7 @@ export const ItemRow = <T extends Record<string, string | number | ReactNode>>({
           {renderItem
             ? renderItem(item)
             : renderValue
-              ? renderValue(item)
+              ? renderValue(item, isRowActive)
               : (item[key] ?? '')}
         </TableCell>
       ))}
@@ -101,6 +134,8 @@ export const Table = <T extends Record<string, string | number | ReactNode>>({
   columns: ColumnConfiguraton<T>[]
   data: T[] | { pages: T[][] }
 }) => {
+  const [tappedRowName, setTappedRowName] = React.useState<string | null>(null)
+
   const renderColumnLabel = (column: ColumnConfiguraton<T>) => {
     if (column.metricWarning) {
       return (
@@ -125,13 +160,13 @@ export const Table = <T extends Record<string, string | number | ReactNode>>({
   }
 
   return (
-    <table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
-      <thead>
-        <tr className="text-xs font-bold text-gray-500 dark:text-gray-400">
+    <table className="border-collapse table-striped table-fixed w-max min-w-full">
+      <thead className="sticky top-0 bg-white dark:bg-gray-900 z-10">
+        <tr className="text-xs font-semibold text-gray-500 dark:text-gray-400">
           {columns.map((column) => (
             <TableHeaderCell
               key={`header_${String(column.key)}`}
-              className={classNames('p-2 tracking-wide', column.width)}
+              className={classNames('p-2', column.width)}
               align={column.align}
             >
               {column.onSort ? (
@@ -156,6 +191,8 @@ export const Table = <T extends Record<string, string | number | ReactNode>>({
                 columns={columns}
                 rowIndex={rowIndex}
                 key={rowIndex}
+                tappedRowName={tappedRowName}
+                onRowTap={setTappedRowName}
               />
             ))
           : data.pages.map((page, pageIndex) =>
@@ -166,6 +203,8 @@ export const Table = <T extends Record<string, string | number | ReactNode>>({
                   rowIndex={rowIndex}
                   pageIndex={pageIndex}
                   key={`page_${pageIndex}_row_${rowIndex}`}
+                  tappedRowName={tappedRowName}
+                  onRowTap={setTappedRowName}
                 />
               ))
             )}

assets/js/dashboard/components/tabs.tsx

@@ -160,7 +160,7 @@ const Items = ({
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1 text-sm"
+            className="ml-auto w-full py-1"
             onSearch={handleSearchInput}
           />
         </div>

assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx

@@ -84,7 +84,7 @@ export const SearchableSegmentsSection = ({
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1 text-sm"
+            className="ml-auto w-full py-1"
             onSearch={handleSearchInput}
           />
         )}

assets/js/dashboard/nav-menu/top-bar.test.tsx

@@ -92,7 +92,7 @@ test('user can open and close filters dropdown', async () => {
     'Location',
     'Screen size',
     'Browser',
-    'Operating System',
+    'Operating system',
     'Goal'
   ])
   await userEvent.click(toggleFilters)

assets/js/dashboard/stats/bar.js

@@ -26,7 +26,7 @@ export default function Bar({
   return (
     <div className="w-full h-full relative" style={style}>
       <div
-        className={`absolute top-0 left-0 h-full rounded-sm transition-colors duration-150 ${bg || ''}`}
+        className={`absolute top-0 left-0 h-full rounded-sm ${bg || ''}`}
         style={{ width: `${width}%` }}
       ></div>
       {children}