Files
MediaFusion/resources/html/metrics.html
T
mhdzumair 361b6ba74a Add charts for top torrent uploaders and weekly top uploader data & improve debrid cache & torrent source charts
Introduced new visualizations to display the top 20 torrent uploaders and their weekly activity. Enhanced the styling for metrics sections and updated backend logic to support these additions, ensuring cleaner and more focused data retrieval.
2025-01-09 23:46:18 +05:30

100 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ addon_name }} - Stremio Addon Metrics Dashboard</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/metrics.css" rel="stylesheet">
<link rel="shortcut icon" href="{{ logo_url }}" type="image/x-icon">
<script src="/static/js/chart.umd.min.js"></script>
<script src="/static/js/chartjs-plugin-datalabels.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-10 col-lg-10 col-md-8 col-sm-10 config-container">
<a href="/"><img class="logo" src="{{ logo_url }}"></a>
<h3 class="text-center mb-5"><b>{{ addon_name }} Metrics Dashboard</b></h3>
<div class="chart-section">
<h4 class="text-left">Scrapy Scheduler Details</h4>
<div id="schedulerChartsContainer" class="row">
<div class="skeleton-loader" id="schedulerChartsSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">MetaData Counts</h4>
<div class="chart-wrapper">
<canvas id="metadataCountsChart"></canvas>
<div class="skeleton-loader" id="metadataCountsSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">{{ addon_name }} Available Torrents</h4>
<div class="card text-white mb-3">
<div class="card-body">
<h5 class="card-title">Total Torrents</h5>
<p id="totalTorrentsValue" class="card-text"></p>
</div>
<div class="skeleton-loader" id="totalTorrentsSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">Top 20 Torrents Sources</h4>
<div class="chart-wrapper">
<canvas id="torrentSourcesChart"></canvas>
<div class="skeleton-loader" id="torrentSourcesSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">Top 20 Torrents Uploaders</h4>
<div class="chart-wrapper">
<canvas id="torrentUploadersChart"></canvas>
<div class="skeleton-loader" id="torrentUploadersSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">Top 20 Uploaders This Week</h4>
<div class="date-info mb-3" id="weekDateRange"></div>
<div class="chart-wrapper">
<canvas id="weeklyUploadersChart"></canvas>
<div class="skeleton-loader" id="weeklyUploadersSkeleton"></div>
</div>
</div>
<div class="chart-section">
<h4 class="text-left">Debrid Cache Statistics</h4>
<div class="card text-white">
<div class="card-body">
<h5 class="card-title">Cached Torrents by Service</h5>
<div class="chart-wrapper">
<canvas id="debridCacheChart"></canvas>
<div class="skeleton-loader" id="debridChartSkeleton"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS for Bootstrap -->
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/metrics.js"></script>
</body>
</html>