Dashboard: show comparison for breakdowns

assets/js/dashboard/components/table.tsx

@@ -9,7 +9,7 @@ export type ColumnConfiguraton<T extends Record<string, unknown>> = {
   /** Unique column ID, used for sorting purposes and to get the value of the cell using rowItem[key] */
   key: keyof T
   /** Column title */
-  label: ReactNode
+  label: string
   /** If defined, the column is considered sortable. @see SortButton */
   onSort?: () => void
   sortDirection?: SortDirection
@@ -20,7 +20,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?: (value: unknown) => ReactNode
+  renderValue?: (item: T) => ReactNode
   /** Function used to create richer cells */
   renderItem?: (item: T) => ReactNode
 }
@@ -85,7 +85,7 @@ export const ItemRow = <T extends Record<string, string | number | ReactNode>>({
           {renderItem
             ? renderItem(item)
             : renderValue
-              ? renderValue(item[key])
+              ? renderValue(item)
               : (item[key] ?? '')}
         </TableCell>
       ))}

assets/js/dashboard/extra/funnel.js

@@ -3,7 +3,7 @@ import FlipMove from 'react-flip-move';
 import Chart from 'chart.js/auto';
 import FunnelTooltip from './funnel-tooltip';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import numberFormatter from '../util/number-formatter';
+import { numberShortFormatter } from '../util/number-formatter';
 import Bar from '../stats/bar';
 
 import RocketIcon from '../stats/modals/rocket-icon';
@@ -103,7 +103,7 @@ export default function Funnel({ funnelName, tabs }) {
   const formatDataLabel = (visitors, ctx) => {
     if (ctx.dataset.label === 'Visitors') {
       const conversionRate = funnel.steps[ctx.dataIndex].conversion_rate
-      return `${conversionRate}% \n(${numberFormatter(visitors)} Visitors)`
+      return `${conversionRate}% \n(${numberShortFormatter(visitors)} Visitors)`
     } else {
       return null
     }
@@ -330,7 +330,7 @@ export default function Funnel({ funnelName, tabs }) {
           </Bar>
 
           <span className="font-medium dark:text-gray-200 w-20 text-right" tooltip={step.visitors.toLocaleString()}>
-            {numberFormatter(step.visitors)}
+            {numberShortFormatter(step.visitors)}
           </span>
         </div>
       </>

assets/js/dashboard/site-context.tsx

@@ -45,7 +45,7 @@ const siteContextDefaultValue = {
   embedded: false,
   background: undefined as string | undefined,
   isDbip: false,
-  flags: {},
+  flags: {} as { breakdown_comparisons_ui?: boolean },
   validIntervalsByPeriod: {} as Record<string, Array<string>>,
   shared: false
 }

assets/js/dashboard/stats/graph/graph-tooltip.js

@@ -1,5 +1,6 @@
-import { METRIC_FORMATTER, METRIC_LABELS } from './graph-util'
 import dateFormatter from './date-formatter'
+import { METRIC_LABELS } from './graph-util'
+import { MetricFormatterShort } from '../reports/metric-formatter'
 
 const renderBucketLabel = function(query, graphData, label, comparison = false) {
   let isPeriodFull = graphData.full_intervals?.[label]
@@ -44,7 +45,7 @@ const buildTooltipData = function(query, graphData, metric, tooltipModel) {
   const comparisonValue = comparisonData?.raw || 0
   const comparisonDifference = label && comparisonLabel && calculatePercentageDifference(comparisonValue, value)
 
-  const metricFormatter = METRIC_FORMATTER[metric]
+  const metricFormatter = MetricFormatterShort[metric]
   const formattedValue = metricFormatter(value)
   const formattedComparisonValue = comparisonData && metricFormatter(comparisonValue)
 

assets/js/dashboard/stats/graph/graph-util.js

@@ -1,4 +1,3 @@
-import numberFormatter, {durationFormatter} from '../../util/number-formatter'
 import { getFiltersByKeyPrefix, hasGoalFilter } from '../../util/filters'
 import { revenueAvailable } from '../../query'
 
@@ -36,20 +35,6 @@ export const METRIC_LABELS = {
   'total_revenue': 'Total Revenue',
 }
 
-export const METRIC_FORMATTER = {
-  'visitors': numberFormatter,
-  'pageviews': numberFormatter,
-  'events': numberFormatter,
-  'visits': numberFormatter,
-  'views_per_visit': (number) => (number),
-  'bounce_rate': (number) => (`${number}%`),
-  'visit_duration': durationFormatter,
-  'conversions': numberFormatter,
-  'conversion_rate': (number) => (`${number}%`),
-  'total_revenue': numberFormatter,
-  'average_revenue': numberFormatter,
-}
-
 const buildComparisonDataset = function(comparisonPlot) {
   if (!comparisonPlot) return []
 

assets/js/dashboard/stats/graph/line-graph.js

@@ -3,11 +3,12 @@ import { useAppNavigate } from '../../navigation/use-app-navigate';
 import { useQueryContext } from '../../query-context';
 import Chart from 'chart.js/auto';
 import GraphTooltip from './graph-tooltip'
-import { buildDataSet, METRIC_LABELS, METRIC_FORMATTER } from './graph-util'
+import { buildDataSet, METRIC_LABELS } from './graph-util'
 import dateFormatter from './date-formatter';
 import FadeIn from '../../fade-in';
 import classNames from 'classnames';
 import { hasGoalFilter } from '../../util/filters';
+import { MetricFormatterShort } from '../reports/metric-formatter'
 
 const calculateMaximumY = function(dataset) {
   const yAxisValues = dataset
@@ -76,7 +77,7 @@ class LineGraph extends React.Component {
             min: 0,
             suggestedMax: calculateMaximumY(dataSet),
             ticks: {
-              callback: METRIC_FORMATTER[metric],
+              callback: MetricFormatterShort[metric],
               color: this.props.darkTheme ? 'rgb(243, 244, 246)' : undefined
             },
             grid: {

assets/js/dashboard/stats/graph/top-stats.js

@@ -4,13 +4,17 @@ import React from 'react'
 import { Tooltip } from '../../util/tooltip'
 import { SecondsSinceLastLoad } from '../../util/seconds-since-last-load'
 import classNames from 'classnames'
-import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import * as storage from '../../util/storage'
 import { formatDateRange } from '../../util/date'
 import { getGraphableMetrics } from './graph-util'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { useLastLoadContext } from '../../last-load-context'
+import { ChangeArrow } from '../reports/change-arrow'
+import {
+  MetricFormatterShort,
+  MetricFormatterLong
+} from '../reports/metric-formatter'
 
 function Maybe({ condition, children }) {
   if (condition) {
@@ -20,68 +24,14 @@ function Maybe({ condition, children }) {
   }
 }
 
-function renderPercentageComparison(name, comparison, forceDarkBg = false) {
-  const formattedComparison = numberFormatter(Math.abs(comparison))
-
-  const defaultClassName = classNames({
-    'pl-2 text-xs dark:text-gray-100': !forceDarkBg,
-    'pl-2 text-xs text-gray-100': forceDarkBg
-  })
-
-  const noChangeClassName = classNames({
-    'pl-2 text-xs text-gray-700 dark:text-gray-300': !forceDarkBg,
-    'pl-2 text-xs text-gray-300': forceDarkBg
-  })
-
-  if (comparison > 0) {
-    const color = name === 'Bounce rate' ? 'text-red-400' : 'text-green-500'
-    return (
-      <span className={defaultClassName}>
-        <span className={color + ' font-bold'}>&uarr;</span>{' '}
-        {formattedComparison}%
-      </span>
-    )
-  } else if (comparison < 0) {
-    const color = name === 'Bounce rate' ? 'text-green-500' : 'text-red-400'
-    return (
-      <span className={defaultClassName}>
-        <span className={color + ' font-bold'}>&darr;</span>{' '}
-        {formattedComparison}%
-      </span>
-    )
-  } else if (comparison === 0) {
-    return <span className={noChangeClassName}>&#12336; 0%</span>
-  } else {
-    return null
-  }
-}
-
-function topStatNumberShort(name, value) {
-  if (['visit duration', 'time on page'].includes(name.toLowerCase())) {
-    return durationFormatter(value)
-  } else if (['bounce rate', 'conversion rate'].includes(name.toLowerCase())) {
-    return value + '%'
-  } else if (
-    ['average revenue', 'total revenue'].includes(name.toLowerCase())
-  ) {
-    return value?.short
-  } else {
-    return numberFormatter(value)
-  }
+function topStatNumberShort(metric, value) {
+  const formatter = MetricFormatterShort[metric]
+  return formatter(value)
 }
 
-function topStatNumberLong(name, value) {
-  if (['visit duration', 'time on page'].includes(name.toLowerCase())) {
-    return durationFormatter(value)
-  } else if (['bounce rate', 'conversion rate'].includes(name.toLowerCase())) {
-    return value + '%'
-  } else if (
-    ['average revenue', 'total revenue'].includes(name.toLowerCase())
-  ) {
-    return value?.long
-  } else {
-    return (value || 0).toLocaleString()
-  }
+function topStatNumberLong(metric, value) {
+  const formatter = MetricFormatterLong[metric]
+  return formatter(value)
 }
 
 export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
@@ -97,17 +47,20 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
       <div>
         {query.comparison && (
           <div className="whitespace-nowrap">
-            {topStatNumberLong(stat.name, stat.value)} vs.{' '}
-            {topStatNumberLong(stat.name, stat.comparison_value)} {statName}
-            <span className="ml-2">
-              {renderPercentageComparison(stat.name, stat.change, true)}
-            </span>
+            {topStatNumberLong(stat.graph_metric, stat.value)} vs.{' '}
+            {topStatNumberLong(stat.graph_metric, stat.comparison_value)}{' '}
+            {statName}
+            <ChangeArrow
+              metric={stat.graph_metric}
+              change={stat.change}
+              className="pl-4 text-xs text-gray-100"
+            />
           </div>
         )}
 
         {!query.comparison && (
           <div className="whitespace-nowrap">
-            {topStatNumberLong(stat.name, stat.value)} {statName}
+            {topStatNumberLong(stat.graph_metric, stat.value)} {statName}
           </div>
         )}
 
@@ -123,7 +76,7 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
 
   function canMetricBeGraphed(stat) {
     const graphableMetrics = getGraphableMetrics(query, site)
-    return stat.graph_metric && graphableMetrics.includes(stat.graph_metric)
+    return graphableMetrics.includes(stat.graph_metric)
   }
 
   function maybeUpdateMetric(stat) {
@@ -200,10 +153,14 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
                 className="font-bold text-xl dark:text-gray-100"
                 id={stat.graph_metric}
               >
-                {topStatNumberShort(stat.name, stat.value)}
+                {topStatNumberShort(stat.graph_metric, stat.value)}
               </p>
-              <Maybe condition={!query.comparison}>
-                {renderPercentageComparison(stat.name, stat.change)}
+              <Maybe condition={!query.comparison && stat.change != null}>
+                <ChangeArrow
+                  metric={stat.graph_metric}
+                  change={stat.change}
+                  className="pl-2 text-xs dark:text-gray-100"
+                />
               </Maybe>
             </span>
             <Maybe condition={query.comparison}>
@@ -216,7 +173,7 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
           <Maybe condition={query.comparison}>
             <div>
               <p className="font-bold text-xl text-gray-500 dark:text-gray-400">
-                {topStatNumberShort(stat.name, stat.comparison_value)}
+                {topStatNumberShort(stat.graph_metric, stat.comparison_value)}
               </p>
               <p className="text-xs text-gray-500 dark:text-gray-400">
                 {formatDateRange(site, data.comparing_from, data.comparing_to)}

assets/js/dashboard/stats/locations/map.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import * as api from '../../api'
 import { replaceFilterByPrefix, cleanLabels } from '../../util/filters'
 import { useAppNavigate } from '../../navigation/use-app-navigate'
-import numberFormatter from '../../util/number-formatter'
+import { numberShortFormatter } from '../../util/number-formatter'
 import * as topojson from 'topojson-client'
 import { useQuery } from '@tanstack/react-query'
 import { useSiteContext } from '../../site-context'
@@ -165,7 +165,7 @@ const WorldMap = ({
             x={tooltip.x}
             y={tooltip.y}
             name={hoveredCountryData.name}
-            value={numberFormatter(hoveredCountryData.visitors)}
+            value={numberShortFormatter(hoveredCountryData.visitors)}
             label={
               labels[hoveredCountryData.visitors === 1 ? 'singular' : 'plural']
             }

assets/js/dashboard/stats/modals/google-keywords.tsx

@@ -6,12 +6,9 @@ import Modal from './modal'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 import { usePaginatedGetAPI } from '../../hooks/api-client'
+import { createVisitors, Metric } from '../reports/metrics'
 import {
-  createVisitors,
-  Metric,
-  renderNumberWithTooltip
-} from '../reports/metrics'
-import numberFormatter, {
+  numberShortFormatter,
   percentageFormatter
 } from '../../util/number-formatter'
 import { apiPath } from '../../util/url'
@@ -33,21 +30,21 @@ const metrics = [
     width: 'w-28',
     key: 'impressions',
     renderLabel: () => 'Impressions',
-    renderValue: renderNumberWithTooltip,
+    formatter: numberShortFormatter,
     sortable: false
   }),
   new Metric({
     width: 'w-16',
     key: 'ctr',
     renderLabel: () => 'CTR',
-    renderValue: percentageFormatter,
+    formatter: percentageFormatter,
     sortable: false
   }),
   new Metric({
     width: 'w-28',
     key: 'position',
     renderLabel: () => 'Position',
-    renderValue: numberFormatter,
+    formatter: numberShortFormatter,
     sortable: false
   })
 ]