Migrate Conversions, Props reports to /query endpoint (#6440)

* Migrate conversions and props

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

* afterFetchData -> onDataReady

* remove redundant isPageviewGoal check

* get rid of duplicate loading state and legacy imported warning bubble

* deduplicate BAR_COLOR

* deduplicate getGoalFilterInfo fn

* fix getMetrics after rebase

Also changes the order of average and total revenue in goals details view
to be total revenue first, then average -- like everywhere else.

* share prop field types between index and details breakdowns

* useColumnsHiddenForAllNull shared hook

* shared makeGetCustomPropFilterInfo

* wider columns on desktop

* hide certain metrics on mobile

* add shared dimensionOrderBy function

---------

Co-authored-by: Robert Joonas <robertjoonas16@gmail.com>

Author: apata

assets/js/dashboard/stats-query.ts

@@ -19,6 +19,7 @@ export type ApiFilter =
 export type NonTimeDimension =
   | apiTypes.SimpleFilterDimensions
   | apiTypes.CustomPropertyFilterDimensions
+  | apiTypes.GoalDimension
 
 export type TimeDimension = apiTypes.TimeDimensions | 'time:minute'
 

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

@@ -0,0 +1,79 @@
+import React, { ReactNode, useCallback } from 'react'
+
+import {
+  DimensionCellWithBar,
+  DimensionCellWithBarProps,
+  IndexBreakdown
+} from '../reports/index-breakdown'
+import {
+  BREAKDOWN_REPORTS,
+  BreakdownReportKey
+} from '../reports/reports-config'
+import { QueryApiResponse, QueryResultRow } from '../../api'
+import { NonTimeDimension } from '../../stats-query'
+import { FilterInfo } from '../../components/drilldown-link'
+import {
+  BEHAVIOURS_BAR_COLOR,
+  BEHAVIOURS_METRIC_COLUMN_WIDTH,
+  BEHAVIOURS_METRICS_HIDDEN_ON_MOBILE
+} from '.'
+import { useSiteContext } from '../../site-context'
+
+type ConversionsProps = {
+  onDataReady?: (data: QueryApiResponse) => void
+  onGoalFilterClick?: (goalName: string) => void
+}
+
+export default function Conversions({
+  onDataReady,
+  onGoalFilterClick
+}: ConversionsProps): ReactNode {
+  const site = useSiteContext()
+  const reportConfig = BREAKDOWN_REPORTS[BreakdownReportKey.goals]
+
+  /*global BUILD_EXTRA*/
+  const metrics = reportConfig.getMetrics({
+    isRevenueAvailable: BUILD_EXTRA && site.revenueGoals.length > 0
+  })
+
+  const DimensionElement = useCallback(
+    (props: DimensionCellWithBarProps) => {
+      const goalName = props.row.dimensions[0]
+      return (
+        <DimensionCellWithBar
+          {...props}
+          barClassName={BEHAVIOURS_BAR_COLOR}
+          text={goalName}
+          getFilterInfo={getGoalsFilterInfo}
+          onClick={() => onGoalFilterClick && onGoalFilterClick(goalName)}
+        />
+      )
+    },
+    [onGoalFilterClick]
+  )
+
+  return (
+    <IndexBreakdown
+      metrics={metrics}
+      dimensions={reportConfig.dimensions}
+      dimensionLabel={reportConfig.dimensionLabel}
+      alwaysOnFilters={reportConfig.alwaysOnFilters}
+      DimensionElement={DimensionElement}
+      onDataReady={onDataReady}
+      hideMetricsIfAllNull={['total_revenue', 'average_revenue']}
+      hideMetricsOnMobile={BEHAVIOURS_METRICS_HIDDEN_ON_MOBILE}
+      metricColumnWidth={BEHAVIOURS_METRIC_COLUMN_WIDTH}
+    />
+  )
+}
+
+export function getGoalsFilterInfo(
+  _dimension: NonTimeDimension,
+  row: QueryResultRow
+): FilterInfo {
+  const goalName = row.dimensions[0]
+  return {
+    prefix: 'goal',
+    filter: ['is', 'goal', [goalName]]
+  }
+}