Add episode scorecards dashboard

Author: radical-ube

app/controllers/episode_metrics_controller.rb

@@ -1,32 +1,22 @@
 class EpisodeMetricsController < ApplicationController
   include MetricsUtils
+  include MetricsQueries
 
   before_action :set_episode
-  before_action :check_clickhouse, except: %i[show]
-  before_action :set_date_range
+  # before_action :check_clickhouse, except: %i[show]
 
   def show
   end
 
   def downloads
-    @downloads_within_date_range =
-      Rollups::HourlyDownload
-        .where(episode_id: @episode.guid, hour: (@date_start..@date_end))
-        .select("DATE_TRUNC('#{@interval}', hour) AS hour", "SUM(count) AS count")
-        .group("DATE_TRUNC('#{@interval}', hour) AS hour")
-        .order(Arel.sql("DATE_TRUNC('#{@interval}', hour) ASC"))
-        .load_async
+    @date_range = generate_date_range(Date.utc_today - 28.days, Date.utc_today, "DAY")
 
-    @downloads = single_rollups(@downloads_within_date_range, @episode.title)
+    @downloads = daterange_downloads(@episode)
+    @rollups = single_rollups(@downloads, "Downloads")
 
     render partial: "metrics/downloads_card", locals: {
-      url: request.fullpath,
-      form_id: "episode_downloads_metrics",
-      date_start: @date_start,
-      date_end: @date_end,
-      interval: @interval,
-      date_range: @date_range,
-      downloads: @downloads
+      rollups: @rollups,
+      date_range: @date_range
     }
   end
 

app/controllers/episodes_controller.rb

@@ -1,5 +1,6 @@
 class EpisodesController < ApplicationController
   include EmbedPlayerHelper
+  include MetricsQueries
 
   before_action :set_episode, only: %i[show overview edit update destroy]
   before_action :set_podcast
@@ -60,6 +61,10 @@ def new
 
   # GET /episodes/1/overview
   def overview
+    if Rails.env.development?
+      @alltime_downloads = alltime_downloads(@episode).sum(&:count)
+      @daterange_downloads = daterange_downloads(@episode).sum(&:count)
+    end
   end
 
   # GET /episodes/1/edit

app/javascript/controllers/apex_downloads_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+import { buildDateTimeChart, buildDownloadsSeries, BAR_TYPE, destroyChart } from "util/apex"
+
+export default class extends Controller {
+  static values = {
+    id: String,
+    downloads: Object,
+    dateRange: Array,
+  }
+
+  static targets = ["chart"]
+
+  connect() {
+    const series = buildDownloadsSeries(this.downloadsValue, this.dateRangeValue)
+
+    const chart = buildDateTimeChart(this.idValue, series, this.chartTarget, BAR_TYPE)
+
+    chart.render()
+  }
+
+  disconnect() {
+    destroyChart(this.idValue)
+  }
+}

app/views/episodes/_overview.html.erb

@@ -58,4 +58,8 @@
       </div>
     </div>
   </div>
+
+  <div class="col d-flex">
+    <%= render "scorecard_dashboard", daterange_downloads: daterange_downloads, alltime_downloads: alltime_downloads, episode: episode %>
+  </div>
 </div>

app/views/episodes/_scorecard_dashboard.html.erb

@@ -0,0 +1,25 @@
+<div class="container">
+  <div class="row mb-4 justify-content-between">
+    <div class="col ps-0 pe-2">
+      <%= render "metrics/score_card", score: number_with_delimiter(daterange_downloads), label: "downloads", sublabel: "last 28 days" %>
+    </div>
+    <div class="col ps-2 pe-0">
+      <%= render "metrics/score_card", score: number_with_delimiter(alltime_downloads), label: "downloads", sublabel: "all-time" %>
+    </div>
+  </div>
+  <div class="row mb-4">
+    <div class="col p-0">
+      <div class="card shadow">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <span class="h4 fw-bold mb-0">Episode Performance</span>
+          <span>Last 28 Days</span>
+        </div>
+        <div class="card-body metrics-card-body">
+          <%= turbo_frame_tag "downloads", src: downloads_episode_metrics_path(episode_id: episode.guid), loading: "lazy" do %>
+            <%= render "metrics/loading_card" %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/episodes/overview.html.erb

@@ -2,4 +2,4 @@
 
 <%= render "episodes/tabs" %>
 
-<%= render "overview", episode: @episode %>
+<%= render "overview", episode: @episode, daterange_downloads: @daterange_downloads, alltime_downloads: @alltime_downloads %>

app/views/metrics/_downloads_card.html.erb

@@ -0,0 +1,9 @@
+<%= turbo_frame_tag "downloads" do %>
+  <div class="col metrics-chart"
+    data-controller="apex-downloads"
+    data-apex-downloads-id-value="<%= SecureRandom.uuid %>"
+    data-apex-downloads-downloads-value="<%= rollups.to_json %>"
+    data-apex-downloads-date-range-value="<%= date_range.to_json %>">
+    <div data-apex-downloads-target="chart"></div>
+  </div>
+<% end %>

…ws/metrics/_scorecard_dashboard.html.erb …s/podcasts/_scorecard_dashboard.html.erbapp/views/metrics/_scorecard_dashboard.html.erb renamed to app/views/podcasts/_scorecard_dashboard.html.erb app/views/metrics/_scorecard_dashboard.html.erb renamed to app/views/podcasts/_scorecard_dashboard.html.erb

@@ -93,7 +93,7 @@
 
     <% if Rails.env.development? %>
       <div class="col-lg-8 d-flex">
-        <%= render "metrics/scorecard_dashboard", daterange_downloads: @daterange_downloads, alltime_downloads: @alltime_downloads, episode_count: @episode_count, podcast: @podcast %>
+        <%= render "scorecard_dashboard", daterange_downloads: @daterange_downloads, alltime_downloads: @alltime_downloads, episode_count: @episode_count, podcast: @podcast %>
       </div>
     <% else %>
     <% if current_user_app?("metrics") %>