Add option to unpack percentage column and hide metrics if all null

Author: apata

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

@@ -72,6 +72,7 @@ export default function Conversions({
       alwaysOnFilters={reportConfig.alwaysOnFilters}
       DimensionElement={DimensionElement}
       onDataReady={afterFetchData}
+      hideMetricsIfAllNull={['total_revenue', 'average_revenue']}
     />
   )
 }

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

@@ -86,6 +86,7 @@ export default function Properties({
         alwaysOnFilters={reportConfig.alwaysOnFilters}
         DimensionElement={DimensionElement}
         onDataReady={afterFetchData}
+        bundlePercentageWithVisitors={false}
       />
     </div>
   )

assets/js/dashboard/stats/metrics.ts

@@ -76,10 +76,6 @@ export const getBreakdownMetricLabel = (
     dimensions: string[]
   }
 ): string => {
-  if (dimensions[0]?.startsWith('event:props:')) {
-    return getCustomPropsBreakdownMetricLabel(metric)
-  }
-
   switch (dimensions[0]) {
     case 'visit:entry_page':
       return getEntryPagesBreakdownMetricLabel(metric, {
@@ -93,11 +89,15 @@ export const getBreakdownMetricLabel = (
       })
     case 'event:goal':
       return getConversionsBreakdownMetricLabel(metric)
-    default:
+    default: {
+      if (dimensions[0]?.startsWith('event:props:')) {
+        return getCustomPropsBreakdownMetricLabel(metric)
+      }
       return getDefaultBreakdownMetricLabel(metric, {
         hasConversionGoalFilter,
         isRealtime
       })
+    }
   }
 }
 
@@ -107,6 +107,8 @@ const getCustomPropsBreakdownMetricLabel = (metric: Metric): string => {
       return 'Visitors'
     case 'events':
       return 'Events'
+    case 'percentage':
+      return '%'
     default:
       return getDefaultBreakdownMetricLabel(metric, {
         hasConversionGoalFilter: false,

assets/js/dashboard/stats/modals/conversions.tsx

@@ -50,6 +50,7 @@ function ConversionsModal() {
         alwaysOnFilters={reportConfig.alwaysOnFilters}
         defaultOrderBy={[['visitors', 'desc']]}
         DimensionElement={GoalsDimensionCell}
+        hideMetricsIfAllNull={['total_revenue', 'average_revenue']}
       />
     </Modal>
   )

assets/js/dashboard/stats/modals/details-breakdown.tsx

@@ -60,6 +60,18 @@ type DetailsBreakdownProps = SharedBreakdownReportProps & {
   searchEnabled?: boolean
   onDataReady?: (data: PaginatedData) => void
   DimensionElement: (props: DimensionCellProps) => ReactNode
+  /**
+   * When true (default), `percentage` is shown inline inside the Visitors
+   * cell rather than as its own column. Set to false for reports that want
+   * percentage as a separate breakdown column (e.g. custom properties).
+   */
+  bundlePercentageWithVisitors?: boolean
+  /**
+   * Metrics that should be dropped from the rendered columns when every row
+   * (across all loaded pages) has null for that metric. Used by the goals
+   * modal to hide revenue columns when the current rows have no revenue data.
+   */
+  hideMetricsIfAllNull?: Metric[]
 }
 
 const getMetricCellWidthClass = (
@@ -90,7 +102,9 @@ export function DetailsBreakdown({
   defaultOrderBy = [] as MetricOrderBy,
   DimensionElement,
   searchEnabled = true,
-  onDataReady
+  onDataReady,
+  bundlePercentageWithVisitors = true,
+  hideMetricsIfAllNull
 }: DetailsBreakdownProps) {
   const site = useSiteContext()
   const { dashboardState } = useDashboardStateContext()
@@ -159,14 +173,30 @@ export function DetailsBreakdown({
     [dashboardState, dimensions]
   )
 
+  const columnsHiddenForAllNull = useMemo((): Set<Metric> => {
+    const hidden = new Set<Metric>()
+    if (!hideMetricsIfAllNull || !apiState.data?.pages?.length || !query) {
+      return hidden
+    }
+    for (const metric of hideMetricsIfAllNull) {
+      const idx = query.metrics.indexOf(metric)
+      if (idx === -1) continue
+      const allNull = apiState.data.pages.every((page) =>
+        page.results.every((row) => row.metrics[idx] == null)
+      )
+      if (allNull) hidden.add(metric)
+    }
+    return hidden
+  }, [apiState.data, query, hideMetricsIfAllNull])
+
   const columns: ColumnConfiguration<QueryResultRow>[] | null = useMemo(() => {
     if (!query) return null
 
     const filterDimension = query.dimensions[0] as NonTimeDimension
 
     const hasPercentage = query.metrics.includes('percentage')
     const isVisitorsWithPercentageCell = (m: Metric) =>
-      hasPercentage && m === 'visitors'
+      bundlePercentageWithVisitors && hasPercentage && m === 'visitors'
 
     return [
       {
@@ -183,8 +213,10 @@ export function DetailsBreakdown({
         align: 'left'
       },
       ...query.metrics
-        // Percentage is not its own column — shown inline in the visitors cell
-        .filter((metric) => metric !== 'percentage')
+        .filter((metric) => {
+          if (columnsHiddenForAllNull.has(metric)) return false
+          return !(bundlePercentageWithVisitors && metric === 'percentage')
+        })
         .map(
           (metric): ColumnConfiguration<QueryResultRow> => ({
             key: metric,
@@ -236,7 +268,9 @@ export function DetailsBreakdown({
     meta,
     orderByDictionary,
     toggleSortByMetric,
-    metricLabelFor
+    metricLabelFor,
+    bundlePercentageWithVisitors,
+    columnsHiddenForAllNull
   ])
 
   const tableData = apiState.data

assets/js/dashboard/stats/modals/props.tsx

@@ -71,6 +71,7 @@ function PropsModal() {
         alwaysOnFilters={reportConfig.alwaysOnFilters}
         defaultOrderBy={[['visitors', 'desc']]}
         DimensionElement={DimensionElementForProp}
+        bundlePercentageWithVisitors={false}
       />
     </Modal>
   )

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

@@ -53,6 +53,18 @@ type IndexBreakdownProps = SharedBreakdownReportProps & {
   metricColumnWidth?: string
   DimensionElement: (props: DimensionCellWithBarProps) => ReactNode
   onDataReady?: (data: QueryApiResponse) => void
+  /**
+   * When true (default), `percentage` is shown inline inside the Visitors
+   * cell rather than as its own column. Set to false for reports that want
+   * percentage as a separate breakdown column (e.g. custom properties).
+   */
+  bundlePercentageWithVisitors?: boolean
+  /**
+   * Metrics that should be dropped from the rendered columns when every row's
+   * value for that metric is null. Used by the goals report to hide revenue
+   * columns when the current rows have no revenue data.
+   */
+  hideMetricsIfAllNull?: Metric[]
 }
 
 export function IndexBreakdown({
@@ -62,7 +74,9 @@ export function IndexBreakdown({
   dimensionLabel,
   alwaysOnFilters,
   onDataReady,
-  metricColumnWidth = DEFAULT_METRIC_COLUMN_WIDTH
+  metricColumnWidth = DEFAULT_METRIC_COLUMN_WIDTH,
+  bundlePercentageWithVisitors = true,
+  hideMetricsIfAllNull
 }: IndexBreakdownProps) {
   const site = useSiteContext()
   const { dashboardState } = useDashboardStateContext()
@@ -123,19 +137,36 @@ export function IndexBreakdown({
     [dashboardState, dimensions]
   )
 
+  const columnsHiddenForAllNull = useMemo((): Set<Metric> => {
+    const hidden = new Set<Metric>()
+    if (!hideMetricsIfAllNull || !apiState.data || !query) return hidden
+    for (const metric of hideMetricsIfAllNull) {
+      const idx = query.metrics.indexOf(metric)
+      if (idx === -1) continue
+      const allNull = apiState.data.results.every(
+        (row) => row.metrics[idx] == null
+      )
+      if (allNull) hidden.add(metric)
+    }
+    return hidden
+  }, [apiState.data, 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. Also,
-    // percentage is not its own column —- it's shown inline in the
-    // visitors cell instead.
-    const filteredMetrics = query.metrics.filter((m) => m !== 'percentage')
+    // 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) =>
-      hasPercentage && m === 'visitors'
+      bundlePercentageWithVisitors && hasPercentage && m === 'visitors'
 
     return [
       {
@@ -191,7 +222,9 @@ export function IndexBreakdown({
     metricLabelFor,
     barMaxValue,
     query,
-    metricColumnWidth
+    metricColumnWidth,
+    bundlePercentageWithVisitors,
+    columnsHiddenForAllNull
   ])
 
   return (