Archives/tubearchivist
2
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist synced 2024-11-19 15:25:51 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* Add right align to numbers on biggest channels in dashboard

* Refac biggest channels to be 3 seperate tables with ordering

* Fix aggs linting
This commit is contained in:
Merlin 2023-09-04 12:51:06 +02:00 committed by GitHub
parent 65d768bf02
commit 317942b7e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 110 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tubearchivist/api/src/aggs.py
View File

@ -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 = {

4
tubearchivist/api/views.py
View File

@ -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())

50
tubearchivist/home/templates/home/settings.html
View File

@ -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 %}

14
tubearchivist/static/css/style.css
View File

@ -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;
}

76
tubearchivist/static/stats.js
View File

@ -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() {