From 317942b7e182da48d5c61ac531f202f013dece9b Mon Sep 17 00:00:00 2001
From: Merlin <4706504+MerlinScheurer@users.noreply.github.com>
Date: Mon, 4 Sep 2023 12:51:06 +0200
Subject: [PATCH] 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 | 3 +
tubearchivist/api/views.py | 4 +-
.../home/templates/home/settings.html | 50 +++++++++---
tubearchivist/static/css/style.css | 14 ++--
tubearchivist/static/stats.js | 76 ++++++++++++++-----
5 files changed, 110 insertions(+), 37 deletions(-)
diff --git a/tubearchivist/api/src/aggs.py b/tubearchivist/api/src/aggs.py
index aa35c39..5c9049f 100644
--- a/tubearchivist/api/src/aggs.py
+++ b/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 = {
diff --git a/tubearchivist/api/views.py b/tubearchivist/api/views.py
index 24db6dd..5d3e59c 100644
--- a/tubearchivist/api/views.py
+++ b/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())
diff --git a/tubearchivist/home/templates/home/settings.html b/tubearchivist/home/templates/home/settings.html
index 9524e2a..d28d2a7 100644
--- a/tubearchivist/home/templates/home/settings.html
+++ b/tubearchivist/home/templates/home/settings.html
@@ -22,21 +22,47 @@
Loading...
+
Biggest Channels
-
-
-
-
- Name |
- Videos |
- Duration |
- Media Size |
-
-
-
-
+
+
+
+
+
+ Name |
+ Videos |
+
+
+
+
+
+
+
+
+
+
+ Name |
+ Duration |
+
+
+
+
+
+
+
+
+
+
+ Name |
+ Media Size |
+
+
+
+
+
+
{% endblock settings_content %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index e0758a3..72a3b6d 100644
--- a/tubearchivist/static/css/style.css
+++ b/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;
}
diff --git a/tubearchivist/static/stats.js b/tubearchivist/static/stats.js
index 992615b..2373266 100644
--- a/tubearchivist/static/stats.js
+++ b/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 = `
+
${name} |
+
${value} |
+ `;
+
+ 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 = `
-
${channelData.name} |
-
${channelData.doc_count} |
-
${channelData.duration_str} |
-
${humanFileSize(channelData.media_size)} |
- `;
- 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() {