Merge pull request #1386 from PRX/feat/episode_sparklines

Feat/episode sparklines

Author: radical-ube

app/controllers/concerns/metrics_utils.rb

@@ -6,11 +6,22 @@ module MetricsUtils
   def check_clickhouse
     unless clickhouse_connected?
       render partial: "metrics/error_card", locals: {
-        metrics_path: params[:action]
+        metrics_path: params[:action],
+        card_type: card_type(params[:action].to_sym)
       }
     end
   end
 
+  def card_type(action)
+    blank_type = %i[episode_sparkline]
+
+    if blank_type.include?(action)
+      "blank"
+    else
+      "error"
+    end
+  end
+
   def generate_date_range(date_start, date_end, interval)
     start_range = date_start.to_datetime.utc.send(:"beginning_of_#{interval.downcase}")
     end_range = date_end.to_datetime.utc.send(:"beginning_of_#{interval.downcase}")

app/controllers/podcast_metrics_controller.rb

@@ -2,14 +2,33 @@ class PodcastMetricsController < ApplicationController
   include MetricsUtils
 
   before_action :set_podcast
-  before_action :check_clickhouse, except: %i[show]
-  before_action :set_date_range, except: %i[dropdays]
-  before_action :set_uniques, only: %i[show uniques]
-  before_action :set_dropday_range, only: %i[show dropdays]
+  # before_action :check_clickhouse, except: %i[show]
 
   def show
   end
 
+  def episode_sparkline
+    @episode = Episode.find_by(guid: metrics_params[:episode_id])
+    @prev_episode = Episode.find_by(guid: metrics_params[:prev_episode_id])
+
+    @episode_trend = calculate_episode_trend(@episode, @prev_episode)
+
+    @sparkline_downloads =
+      Rollups::HourlyDownload
+        .where(episode_id: @episode[:guid], hour: (publish_hour(@episode)..publish_hour(@episode) + 6.months))
+        .final
+        .select(:episode_id, "DATE_TRUNC('DAY', hour) AS hour", "SUM(count) AS count")
+        .group(:episode_id, "DATE_TRUNC('DAY', hour) AS hour")
+        .order(Arel.sql("DATE_TRUNC('DAY', hour) ASC"))
+        .load_async
+
+    render partial: "metrics/episode_sparkline", locals: {
+      episode: @episode,
+      downloads: @sparkline_downloads,
+      episode_trend: @episode_trend
+    }
+  end
+
   def downloads
     @downloads_within_date_range =
       Rollups::HourlyDownload
@@ -195,46 +214,39 @@ def set_podcast
     render_not_found(e)
   end
 
-  def set_date_range
-    @date_start = metrics_params[:date_start]
-    @date_end = metrics_params[:date_end]
-    @interval = metrics_params[:interval]
-    @date_range = generate_date_range(@date_start, @date_end, @interval)
+  def metrics_params
+    params
+      .permit(:podcast_id, :episode_id, :prev_episode_id)
   end
 
-  def set_uniques
-    @uniques_selection = uniques_params[:uniques_selection]
-  end
+  def calculate_episode_trend(episode, prev_episode)
+    return nil unless episode.first_rss_published_at.present? && prev_episode.present?
+    return nil if (episode.first_rss_published_at + 1.day) > Time.now
 
-  def set_dropday_range
-    @dropday_range = dropdays_params[:dropday_range]
-  end
+    ep_dropday_sum = episode_dropday_query(episode)
+    previous_ep_dropday_sum = episode_dropday_query(prev_episode)
 
-  def metrics_params
-    params
-      .permit(:podcast_id, :date_start, :date_end, :interval)
-      .with_defaults(
-        date_start: 30.days.ago.utc_date,
-        date_end: Date.utc_today,
-        interval: "DAY"
-      )
+    return nil if ep_dropday_sum <= 0 || previous_ep_dropday_sum <= 0
+
+    ((ep_dropday_sum.to_f / previous_ep_dropday_sum.to_f) - 1).round(3)
   end
 
-  def uniques_params
-    params
-      .permit(:uniques_selection)
-      .with_defaults(
-        uniques_selection: "last_7_rolling"
-      )
-      .merge(metrics_params)
+  def episode_dropday_query(ep)
+    lowerbound = publish_hour(ep)
+    upperbound = lowerbound + 24.hours
+
+    Rollups::HourlyDownload
+      .where(episode_id: ep[:guid], hour: (lowerbound...upperbound))
+      .final
+      .load_async
+      .sum(:count)
   end
 
-  def dropdays_params
-    params
-      .permit(:dropday_range, :interval)
-      .with_defaults(
-        dropday_range: 7
-      )
-      .merge(metrics_params)
+  def publish_hour(episode)
+    if episode.first_rss_published_at.present?
+      episode.first_rss_published_at.beginning_of_hour
+    else
+      episode.published_at.beginning_of_hour
+    end
   end
 end

app/controllers/podcasts_controller.rb

@@ -17,7 +17,12 @@ def index
   def show
     authorize @podcast
 
-    @recently_published = @podcast.episodes.published.dropdate_desc.limit(3)
+    @recently_published_episodes = @podcast.episodes.published.dropdate_desc.limit(4)
+    @trend_episodes = @podcast.default_feed.episodes.published.dropdate_desc.where.not(first_rss_published_at: nil).offset(1).limit(4)
+    @episode_trend_pairs = episode_trend_pairs(@recently_published_episodes, @trend_episodes)
+
+    # @recently_published is used for the prod branch
+    @recently_published = @recently_published_episodes[0..2]
     @next_scheduled = @podcast.episodes.draft_or_scheduled.dropdate_asc.limit(3)
 
     @metrics_jwt = prx_jwt
@@ -189,4 +194,24 @@ def compose_message(podcast)
   def sub_escapes(text)
     text.gsub(/[&<>]/, "&" => "&amp;", "<" => "&lt;", ">" => "&gt;")
   end
+
+  def episode_trend_pairs(episodes, trend_episodes)
+    paired_trend_episodes = []
+
+    episodes.map.with_index do |ep, i|
+      if ep.in_default_feed?
+        paired_trend_episodes << trend_episodes[paired_trend_episodes.length]
+
+        {
+          episode: ep,
+          prev_episode: paired_trend_episodes.last
+        }
+      else
+        {
+          episode: ep,
+          prev_episode: nil
+        }
+      end
+    end
+  end
 end

app/helpers/metrics_helper.rb

@@ -12,6 +12,40 @@ def sum_rollups(rollups)
     rollups.sum(&:count)
   end
 
+  def parse_trend(trend)
+    return if trend.blank?
+
+    if trend > 0
+      {
+        percent: "+#{trend * 100}%",
+        color: modified_trend_color(trend, "text-success"),
+        direction: modified_trend_direction(trend, "up")
+      }
+    elsif trend < 0
+      {
+        percent: "-#{trend * -100}%",
+        color: modified_trend_color(trend, "text-danger"),
+        direction: modified_trend_direction(trend, "down")
+      }
+    end
+  end
+
+  def modified_trend_direction(trend, direction)
+    if trend.abs > 0.05
+      "trending_#{direction}"
+    else
+      "trending_flat"
+    end
+  end
+
+  def modified_trend_color(trend, color)
+    if trend.abs > 0.05
+      color
+    else
+      "text-secondary"
+    end
+  end
+
   def interval_options
     Rollups::HourlyDownload::INTERVALS.map { |i| [I18n.t(".helpers.label.metrics.interval.#{i.downcase}"), i] }
   end

app/javascript/controllers/apex_downloads_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+import { buildSparklineChart, destroyChart } from "util/apex"
+
+export default class extends Controller {
+  static values = {
+    id: String,
+    downloads: Array,
+  }
+
+  static targets = ["chart"]
+
+  connect() {
+    const seriesData = this.downloadsValue.map((rollup) => {
+      return {
+        x: rollup.hour,
+        y: rollup.count,
+      }
+    })
+    const series = [
+      {
+        name: "Downloads",
+        data: seriesData,
+      },
+    ]
+
+    const chart = buildSparklineChart(this.idValue, series, this.chartTarget)
+
+    chart.render()
+  }
+
+  disconnect() {
+    destroyChart(this.idValue)
+  }
+}

app/javascript/controllers/apex_sparkline_controller.js

@@ -105,6 +105,48 @@ export const AREA_TYPE = {
   },
 }
 
+export const SPARKLINE_TYPE = {
+  chart: {
+    height: "100%",
+    sparkline: {
+      enabled: true,
+    },
+    animations: {
+      enabled: true,
+    },
+    type: "area",
+    stacked: false,
+  },
+  options: {
+    xaxis: {
+      type: "datetime",
+    },
+    tooltip: {
+      enabled: false,
+    },
+    fill: {
+      colors: ["#F3EAFF"],
+      type: "gradient",
+      gradient: {
+        type: "diagonal1",
+        gradientToColors: ["#DBFBFB"],
+        opacityFrom: 1,
+        opacityTo: 1,
+      },
+    },
+    stroke: {
+      width: 1,
+      colors: ["#00000000"],
+    },
+  },
+}
+
+export function buildSparklineChart(id, series, target) {
+  const options = Object.assign({ series: series }, DEFAULT_OPTIONS, SPARKLINE_TYPE.options)
+  Object.assign(options.chart, { id: id }, SPARKLINE_TYPE.chart)
+  return new ApexCharts(target, options)
+}
+
 export function buildDateTimeChart(id, series, target, type, title = "") {
   const options = Object.assign({ series: series }, DEFAULT_OPTIONS, DATETIME_OPTIONS, type.options)
   Object.assign(options.chart, { id: id }, type.chart)
@@ -176,3 +218,7 @@ function addYaxisTitle(yaxis, title = "") {
 function addXaxisTitle(xaxis, title = "") {
   Object.assign(xaxis, { title: { text: title } })
 }
+
+export function destroyChart(chartId) {
+  ApexCharts.exec(chartId, "destroy")
+}

app/javascript/util/apex.js

@@ -0,0 +1,14 @@
+<%= turbo_frame_tag "episode_sparkline" do %>
+  <% trend = parse_trend(episode_trend) %>
+
+  <p class="d-flex align-items-center <%= trend[:color] if trend.present? %>">
+    <span class="z-1"><%= trend[:percent] if trend.present? %></span>
+    <span class="material-icons ms-1 z-1" aria-hidden="true"><%= trend[:direction] if trend.present? %></span>
+  </p>
+  <div class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-0"
+    data-controller="apex-sparkline"
+    data-apex-sparkline-id-value="<%= episode.guid %>"
+    data-apex-sparkline-downloads-value="<%= downloads.to_json %>">
+    <div data-apex-sparkline-target="chart"></div>
+  </div>
+<% end %>