Extract fetching main graph and remapping main graph data

Author: apata

assets/js/dashboard/stats/graph/fetch-main-graph.ts

@@ -0,0 +1,71 @@
+import { Metric } from '../../../types/query-api'
+import { DashboardState } from '../../dashboard-state'
+import { DashboardPeriod } from '../../dashboard-time-periods'
+import { PlausibleSite } from '../../site-context'
+import { createStatsQuery } from '../../stats-query'
+import { isRealTimeDashboard } from '../../util/filters'
+import * as api from '../../api'
+
+export function fetchMainGraph(
+  site: PlausibleSite,
+  dashboardState: DashboardState,
+  metric: Metric,
+  interval: string
+): Promise<MainGraphResponse> {
+  const metricToQuery =
+    metric === 'conversion_rate' ? 'group_conversion_rate' : metric
+
+  const reportParams = {
+    metrics: [metricToQuery],
+    dimensions: [`time:${interval}`],
+    include: {
+      time_labels: true,
+      time_label_result_indices: true,
+      present_index: true,
+      partial_time_labels: true
+    }
+  }
+
+  const statsQuery = createStatsQuery(dashboardState, reportParams)
+
+  if (isRealTimeDashboard(dashboardState)) {
+    statsQuery.date_range = DashboardPeriod.realtime_30m
+  }
+
+  statsQuery.include.present_index = true
+
+  return api.stats(site, statsQuery)
+}
+
+type RevenueMetric = {
+  short: string
+  value: number
+  long: string
+  currency: string
+}
+
+type ResultItem = {
+  dimensions: [string] // one item
+  metrics: null | [number] | [RevenueMetric] // one item
+}
+
+export type MainGraphResponse = {
+  results: Array<ResultItem | null>
+  comparison_results: Array<
+    (ResultItem & { change: [number | null] | null }) | null
+  >
+  meta: {
+    partial_time_labels: string[] | null
+    time_labels: string[]
+    time_label_result_indices: (number | null)[]
+    comparison_time_labels?: string[]
+    comparison_time_label_result_indices?: (number | null)[]
+  }
+  query: {
+    interval: string
+    date_range: [string, string]
+    comparison_date_range?: [string, string]
+    dimensions: [string] // one item
+    metrics: [string] // one item
+  }
+}

assets/js/dashboard/stats/graph/main-graph-data.ts

@@ -0,0 +1,212 @@
+import { Metric } from '../../../types/query-api'
+import { MainGraphResponse } from './fetch-main-graph'
+
+/**
+ * Fills gaps in @see MainGraphResponse the series of `results` and `comparisonResults`.
+ * The BE doesn't return buckets in the series where the value is 0:
+ * these need to filled by the FE to have a consistent plot.
+ * 
+ * The assumption is that the two series each are continuously defined.
+ * 
+ * Extracts the numeric values for the series when they are wrapped.
+ * 
+ * In the same single loop, for the sake of efficiency, it determines 
+ * - the maximum y value (used for scaling the graph),
+ * - the start and end labels of both series (used for generating appropriate X axis labels),
+ * - whether there's a slice at the very end of main series that is partial (used for explaining the drop at the end of the graph).
+ * 
+ */
+export const remapAndFillData = ({
+  data,
+  metric
+}: {
+  data: MainGraphResponse
+  metric: Metric
+}): {
+  remappedData: GraphDatum[]
+  yMax: number
+  mainSeriesStartEndLabels: [string | null, string | null]
+  comparisonSeriesStartEndLabels: [string | null, string | null]
+  startOfLastPartialSlice: null | number
+} => {
+  const totalBucketCount = Math.max(
+    data.meta.comparison_time_label_result_indices?.length ?? 0,
+    data.meta.time_label_result_indices.length
+  )
+
+  let yMax: number = 1
+  let firstTimeLabel: null | string = null
+  let lastTimeLabel: null | string = null
+
+  let firstComparisonTimeLabel: null | string = null
+  let lastComparisonTimeLabel: null | string = null
+
+  let startOfLastPartialSlice: null | number = null
+
+  const remappedData: GraphDatum[] = new Array(totalBucketCount)
+    .fill(null)
+    .map((_, index) => {
+      const [
+        timeLabel,
+        indexOfResult,
+        comparisonTimeLabel,
+        indexOfComparisonResult
+      ] = [
+        data.meta.time_labels[index] ?? null,
+        data.meta.time_label_result_indices[index] ?? null,
+        (data.meta.comparison_time_labels &&
+          data.meta.comparison_time_labels[index]) ??
+          null,
+        (data.meta.comparison_time_label_result_indices &&
+          data.meta.comparison_time_label_result_indices[index]) ??
+          null
+      ]
+
+      const mainSeriesDefined = typeof timeLabel === 'string'
+      const comparisonSeriesDefined = typeof comparisonTimeLabel === 'string'
+
+      let isPartial: boolean | null = null
+      let value: number | null = null
+
+      if (mainSeriesDefined) {
+        isPartial = (data.meta.partial_time_labels ?? []).find(
+          (l) => l === timeLabel
+        )
+          ? true
+          : false
+
+        if (isPartial) {
+          startOfLastPartialSlice = index
+        } else {
+          // if there is a full period after a partial slice,
+          // it's not a partial slice anchored at the end of the series
+          startOfLastPartialSlice = null
+        }
+
+        if (firstTimeLabel === null) {
+          firstTimeLabel = timeLabel
+        }
+
+        lastTimeLabel = timeLabel
+
+        if (indexOfResult !== null) {
+          const row = data.results[indexOfResult]
+          const [unparsedValue] = row!.metrics!
+          if (unparsedValue === null) {
+            value = 0
+          } else if (
+            typeof unparsedValue === 'object' &&
+            unparsedValue.hasOwnProperty('value')
+          ) {
+            value = unparsedValue.value
+          } else if (typeof unparsedValue === 'number') {
+            value = unparsedValue
+          }
+        } else {
+          value = 0
+        }
+      }
+      if (value !== null && value > yMax) {
+        yMax = value
+      }
+      let change = null
+      let comparisonValue = null
+      if (comparisonSeriesDefined) {
+        if (firstComparisonTimeLabel === null) {
+          firstComparisonTimeLabel = comparisonTimeLabel
+        }
+
+        lastComparisonTimeLabel = comparisonTimeLabel
+
+        if (indexOfComparisonResult !== null) {
+          const row = data.comparison_results[indexOfComparisonResult]
+          const [unparsedValue] = row!.metrics!
+
+          if (unparsedValue === null) {
+            comparisonValue = 0
+          } else if (
+            typeof unparsedValue === 'object' &&
+            unparsedValue.hasOwnProperty('value')
+          ) {
+            comparisonValue = unparsedValue.value
+          } else if (typeof unparsedValue === 'number') {
+            comparisonValue = unparsedValue
+            change = row!.change !== null ? row!.change[0] : null
+          }
+        } else {
+          comparisonValue = 0
+        }
+      }
+
+      if (comparisonValue !== null && comparisonValue > yMax) {
+        yMax = comparisonValue
+      }
+
+      if (mainSeriesDefined && comparisonSeriesDefined && change === null) {
+        change = METRICS_WITH_CHANGE_IN_PERCENTAGE_POINTS.includes(metric)
+          ? getChangeInPercentagePoints(value!, comparisonValue!)
+          : getRelativeChange(value!, comparisonValue!)
+      }
+
+      return {
+        value,
+        comparisonValue,
+        timeLabel,
+        comparisonTimeLabel,
+        change,
+        isPartial
+      }
+    })
+
+  return {
+    startOfLastPartialSlice,
+    remappedData,
+    yMax,
+    mainSeriesStartEndLabels: [firstTimeLabel, lastTimeLabel],
+    comparisonSeriesStartEndLabels: [
+      firstComparisonTimeLabel,
+      lastComparisonTimeLabel
+    ]
+  }
+}
+
+const METRICS_WITH_CHANGE_IN_PERCENTAGE_POINTS = [
+  'bounce_rate',
+  'exit_rate',
+  'conversion_rate',
+  'group_conversion_rate'
+]
+
+const getChangeInPercentagePoints = (
+  value: number,
+  comparisonValue: number
+): number => {
+  return value - comparisonValue
+}
+
+const getRelativeChange = (value: number, comparisonValue: number): number => {
+  if (comparisonValue === 0 && value > 0) {
+    return 100
+  }
+  if (comparisonValue === 0 && value === 0) {
+    return 0
+  }
+
+  return Math.round(((value - comparisonValue) / comparisonValue) * 100)
+}
+
+/**
+ * A data point for the graph and tooltip.
+ * It's x position is its index in `GraphDatum[]` array.
+ * The values for `value`, `comparisonValue` should be plotted on the y axis, when they are defined for the x position.
+ */
+type GraphDatum = {
+  /** When `value` is null, it means the main series isn't defined in this x position */
+  value: number | null
+  timeLabel: string | null
+  isPartial: boolean | null
+  /** When `comparisonValue` is null, it means the comparison series isn't defined in this x position */
+  comparisonValue?: number | null
+  comparisonTimeLabel?: string | null
+  change?: number | null
+}