Refac biggest channels to be 3 seperate tables with ordering and right align (#536)

* Add right align to numbers on biggest channels in dashboard

* Refac biggest channels to be 3 seperate tables with ordering

* Fix aggs linting

tubearchivist/api/src/aggs.py

@@ -196,6 +196,9 @@ class DownloadHist(AggBase):
 class BiggestChannel(AggBase):
     """get channel aggregations"""
 
+    def __init__(self, order):
+        self.data["aggs"][self.name]["multi_terms"]["order"] = {order: "desc"}
+
     name = "channel_stats"
     path = "ta_video/_search"
     data = {

tubearchivist/api/views.py

@@ -1025,9 +1025,9 @@ class StatBiggestChannel(ApiBaseView):
     def get(self, request):
         """handle get request"""
 
-        order = request.GET.get("order", False)
+        order = request.GET.get("order", "doc_count")
         if order and order not in self.order_choices:
             message = {"message": f"invalid order parameter {order}"}
             return Response(message, status=400)
 
-        return Response(BiggestChannel().process())
+        return Response(BiggestChannel(order).process())

tubearchivist/home/templates/home/settings.html

@@ -22,21 +22,47 @@
         <p id="loading">Loading...</p>
     </div>
 </div>
+
 <div class="settings-item">
     <h2>Biggest Channels</h2>
-    <div class="info-box description-box">
-        <table>
-            <thead>
-                <tr>
-                    <th class="agg-channel-name">Name</th>
-                    <th>Videos</th>
-                    <th>Duration</th>
-                    <th>Media Size</th>
-                </tr>
-            </thead>
-            <tbody id="biggestChannelTable"></tbody>
-        </table>
+    <div class="info-box info-box-3">
+        <div class="info-box-item">
+            <table class="agg-channel-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th class="agg-channel-right-align">Videos</th>
+                    </tr>
+                </thead>
+                <tbody id="biggestChannelTableVideos"></tbody>
+            </table>
+        </div>
+
+        <div class="info-box-item">
+            <table class="agg-channel-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th class="agg-channel-right-align">Duration</th>
+                    </tr>
+                </thead>
+                <tbody id="biggestChannelTableDuration"></tbody>
+            </table>
+        </div>
+        
+        <div class="info-box-item">
+            <table class="agg-channel-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th class="agg-channel-right-align">Media Size</th>
+                    </tr>
+                </thead>
+                <tbody id="biggestChannelTableMediaSize"></tbody>
+            </table>
+        </div>
     </div>
 </div>
+
 <script type="text/javascript" src="{% static 'stats.js' %}"></script>
 {% endblock settings_content %}

tubearchivist/static/css/style.css

@@ -1099,6 +1099,15 @@ video:-webkit-full-screen {
     min-width: 300px;
 }
 
+.settings-item .agg-channel-table {
+    width: 100%;
+}
+
+.settings-item .agg-channel-right-align {
+    white-space: nowrap;
+    text-align: right;
+}
+
 .danger-zone {
     background-color: var(--highlight-error);
     color: #fff;
@@ -1316,11 +1325,6 @@ video:-webkit-full-screen {
     .playlist-nav-item img {
         width: 100%;
     }
-    .agg-channel-name {
-        min-width: 50px;
-        width: 100px;
-        max-width: 200px;
-    }
     .td, th, span, label {
         text-align: unset;
     }

tubearchivist/static/stats.js

@@ -128,31 +128,71 @@ function buildDailyStat(dailyStat) {
   return tile;
 }
 
-function biggestChannel() {
-  let apiEndpoint = '/api/stats/biggestchannels/';
-  let responseData = apiRequest(apiEndpoint, 'GET');
-  let tBody = document.getElementById('biggestChannelTable');
+function humanFileSize(size) {
+  let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+  return (size / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+}
+
+function buildChannelRow(id, name, value) {
+  let tableRow = document.createElement('tr');
+
+  tableRow.innerHTML = `
+    <td class="agg-channel-name"><a href="/channel/${id}/">${name}</a></td>
+    <td class="agg-channel-right-align">${value}</td>
+  `;
+
+  return tableRow;
+}
+
+function addBiggestChannelByDocCount() {
+  let tBody = document.getElementById('biggestChannelTableVideos');
+
+  let apiEndpoint = '/api/stats/biggestchannels/?order=doc_count';
+  const responseData = apiRequest(apiEndpoint, 'GET');
+
   for (let i = 0; i < responseData.length; i++) {
-    const channelData = responseData[i];
-    let tableRow = buildChannelRow(channelData);
+    const { id, name, doc_count } = responseData[i];
+
+    let tableRow = buildChannelRow(id, name, doc_count);
+
     tBody.appendChild(tableRow);
   }
 }
 
-function buildChannelRow(channelData) {
-  let tableRow = document.createElement('tr');
-  tableRow.innerHTML = `
-    <td class="agg-channel-name"><a href="/channel/${channelData.id}/">${channelData.name}</a></td>
-    <td>${channelData.doc_count}</td>
-    <td>${channelData.duration_str}</td>
-    <td>${humanFileSize(channelData.media_size)}</td>
-  `;
-  return tableRow;
+function addBiggestChannelByDuration() {
+  const tBody = document.getElementById('biggestChannelTableDuration');
+
+  let apiEndpoint = '/api/stats/biggestchannels/?order=duration';
+  const responseData = apiRequest(apiEndpoint, 'GET');
+
+  for (let i = 0; i < responseData.length; i++) {
+    const { id, name, duration_str } = responseData[i];
+
+    let tableRow = buildChannelRow(id, name, duration_str);
+
+    tBody.appendChild(tableRow);
+  }
 }
 
-function humanFileSize(size) {
-  let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+function addBiggestChannelByMediaSize() {
+  let tBody = document.getElementById('biggestChannelTableMediaSize');
+
+  let apiEndpoint = '/api/stats/biggestchannels/?order=media_size';
+  const responseData = apiRequest(apiEndpoint, 'GET');
+
+  for (let i = 0; i < responseData.length; i++) {
+    const { id, name, media_size } = responseData[i];
+
+    let tableRow = buildChannelRow(id, name, humanFileSize(media_size));
+
+    tBody.appendChild(tableRow);
+  }
+}
+
+function biggestChannel() {
+  addBiggestChannelByDocCount();
+  addBiggestChannelByDuration();
+  addBiggestChannelByMediaSize();
 }
 
 async function buildStats() {