mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 01:39:24 +02:00
Show a report for total users chart
This commit is contained in:
Daniel Neto
parent
794938db72
commit
4d064adf1b
5397 changed files with 313100 additions and 365 deletions
|
|
@ -47,4 +47,4 @@
|
|||
$('#<?php echo $_GET['jump']; ?>').click();
|
||||
<?php } ?>
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ if (!User::isAdmin()) {
|
|||
|
||||
?>
|
||||
<script src="<?php echo getURL('node_modules/chart.js/dist/chart.umd.js'); ?>" type="text/javascript"></script>
|
||||
<script src="<?php echo getURL('node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js'); ?>" type="text/javascript"></script>
|
||||
<script src="<?php echo getURL('node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js'); ?>" type="text/javascript"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo getCDN(); ?>view/css/DataTables/datatables.min.css"/>
|
||||
<style>
|
||||
/* Custom Colored Panels */
|
||||
|
|
@ -73,4 +76,4 @@ if (!User::isAdmin()) {
|
|||
}
|
||||
?>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
722
view/report0.php
722
view/report0.php
|
|
@ -1,358 +1,364 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 dashboard">
|
||||
<?php
|
||||
if (User::isAdmin()) {
|
||||
?>
|
||||
<div class="panel panel-default <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fas fa-user-friends fa-2x text-success"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge total_users_online" id="total_users_online">0</div>
|
||||
<div><?php echo __("Online Users"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-purple <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-users fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalUsers">0</div>
|
||||
<div><?php echo __("Total Users"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>users">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<div class="panel panel-blue <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-play-circle fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideos">0</div>
|
||||
<div><?php echo __("Total Videos"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-primary <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-eye fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosViews">0</div>
|
||||
<div><?php echo __("Total Videos Views"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-green <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-clock fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalDurationVideos">0</div>
|
||||
<div><?php echo __("Total Duration Videos (Minutes)"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-wine <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-user-plus fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalSubscriptions">0</div>
|
||||
<div><?php echo __("Total Subscriptions"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>subscribes">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-red <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-comments fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosComents">0</div>
|
||||
<div><?php echo __("Total Video Comments"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>comments">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-orange <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-thumbs-up fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosLikes">0</div>
|
||||
<div><?php echo __("Total Videos Likes"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-yellow <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-thumbs-down fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosDislikes">0</div>
|
||||
<div><?php echo __("Total Videos Dislikes"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Today"); ?>
|
||||
</div>
|
||||
<div class="panel-body" >
|
||||
<canvas id="myChartToday"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 7 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body" >
|
||||
<canvas id="myChart7"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 15 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body" >
|
||||
<canvas id="myChart15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 30 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body" >
|
||||
<canvas id="myChart30"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 90 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body" >
|
||||
<canvas id="myChart90"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function createGraph(labels, data, selector) {
|
||||
var ctx = $(selector);
|
||||
var backgroundColor = [];
|
||||
var borderColor = [];
|
||||
for (var item in data) {
|
||||
var color = randomColor();
|
||||
backgroundColor.push('rgba(' + color + ', 0.2)');
|
||||
borderColor.push('rgba(' + color + ', 1)');
|
||||
}
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '',
|
||||
data: data,
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function (context) {
|
||||
return context[0].label[0];
|
||||
},
|
||||
label: function (context) {
|
||||
return context.label[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'left',
|
||||
display: true,
|
||||
labels: {
|
||||
generateLabels: function (chart) {
|
||||
var data = chart.data;
|
||||
if (data.labels.length && data.datasets.length) {
|
||||
const {labels: {pointStyle}} = chart.legend.options;
|
||||
return data.labels.map(function (label, i) {
|
||||
const meta = chart.getDatasetMeta(0);
|
||||
const style = meta.controller.getStyle(i);
|
||||
|
||||
return {
|
||||
text: chart.data.labels[i][0],
|
||||
fillStyle: style.backgroundColor,
|
||||
strokeStyle: style.borderColor,
|
||||
lineWidth: style.borderWidth,
|
||||
pointStyle: pointStyle,
|
||||
hidden: !chart.getDataVisibility(i),
|
||||
|
||||
// Extra data used for toggling the correct item
|
||||
index: i
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createVideosGraphs(videos, selector) {
|
||||
var labels = [];
|
||||
var data_totalComents = [];
|
||||
var data_total_views = [];
|
||||
var data_total_likes = [];
|
||||
var data_total_dislikes = [];
|
||||
for (var index in videos) {
|
||||
var video = videos[index];
|
||||
if (typeof video == 'function') {
|
||||
continue;
|
||||
}
|
||||
labels.push(['#' + video.id + ': ' + video.total_views + ' views', video.clean_title]);
|
||||
data_totalComents.push(video.totalComents);
|
||||
data_total_views.push(video.total_views);
|
||||
data_total_likes.push(video.total_likes);
|
||||
data_total_dislikes.push(video.total_dislikes);
|
||||
}
|
||||
createGraph(labels, data_total_views, selector);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$.ajax({
|
||||
url: webSiteRootURL + 'view/report.json.php?isAdminPanel=<?php echo!empty($isAdminPanel) ? 1 : 0; ?>',
|
||||
success: function (response) {
|
||||
if (!response.error) {
|
||||
createVideosGraphs(response.today.videos, '#myChartToday');
|
||||
createVideosGraphs(response.last7Days.videos, '#myChart7');
|
||||
createVideosGraphs(response.last15Days.videos, '#myChart15');
|
||||
createVideosGraphs(response.last30Days.videos, '#myChart30');
|
||||
createVideosGraphs(response.last90Days.videos, '#myChart90');
|
||||
if (response.totalUsers) {
|
||||
countTo('#totalUsers', response.totalUsers);
|
||||
}
|
||||
countTo('#totalVideos', response.totalVideos);
|
||||
countTo('#totalSubscriptions', response.totalSubscriptions);
|
||||
countTo('#totalVideosComents', response.totalComents);
|
||||
countTo('#totalVideosLikes', response.totalLikes);
|
||||
countTo('#totalVideosDislikes', response.totalDislikes);
|
||||
countTo('#totalVideosViews', response.totalVideosViews);
|
||||
countTo('#totalDurationVideos', response.totalDurationVideos);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="row">
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 dashboard">
|
||||
<?php
|
||||
if (User::isAdmin()) {
|
||||
?>
|
||||
<div class="panel panel-default <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fas fa-user-friends fa-2x text-success"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge total_users_online" id="total_users_online">0</div>
|
||||
<div><?php echo __("Online Users"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-purple <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-users fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalUsers">0</div>
|
||||
<div><?php echo __("Total Users"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>users">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<div class="panel panel-blue <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-play-circle fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideos">0</div>
|
||||
<div><?php echo __("Total Videos"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-primary <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-eye fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosViews">0</div>
|
||||
<div><?php echo __("Total Videos Views"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-green <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-clock fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalDurationVideos">0</div>
|
||||
<div><?php echo __("Total Duration Videos (Minutes)"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-wine <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-user-plus fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalSubscriptions">0</div>
|
||||
<div><?php echo __("Total Subscriptions"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>subscribes">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-red <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-comments fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosComents">0</div>
|
||||
<div><?php echo __("Total Video Comments"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>comments">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-orange <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-thumbs-up fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosLikes">0</div>
|
||||
<div><?php echo __("Total Videos Likes"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel panel-yellow <?php echo getCSSAnimationClassAndStyle('animate__flipInY', 'rep0'); ?>">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="far fa-thumbs-down fa-2x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge loading" id="totalVideosDislikes">0</div>
|
||||
<div><?php echo __("Total Videos Dislikes"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?php echo $global['webSiteRootURL']; ?>mvideos">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left"><?php echo __("View Details"); ?></span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Today"); ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="myChartToday"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 7 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="myChart7"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 15 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="myChart15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 30 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="myChart30"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Last 90 Days"); ?>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="myChart90"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
include $global['systemRootPath'] . 'view/report4.php';
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function createGraph(labels, data, selector) {
|
||||
var ctx = $(selector);
|
||||
var backgroundColor = [];
|
||||
var borderColor = [];
|
||||
for (var item in data) {
|
||||
var color = randomColor();
|
||||
backgroundColor.push('rgba(' + color + ', 0.2)');
|
||||
borderColor.push('rgba(' + color + ', 1)');
|
||||
}
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '',
|
||||
data: data,
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
return context[0].label[0];
|
||||
},
|
||||
label: function(context) {
|
||||
return context.label[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'left',
|
||||
display: true,
|
||||
labels: {
|
||||
generateLabels: function(chart) {
|
||||
var data = chart.data;
|
||||
if (data.labels.length && data.datasets.length) {
|
||||
const {
|
||||
labels: {
|
||||
pointStyle
|
||||
}
|
||||
} = chart.legend.options;
|
||||
return data.labels.map(function(label, i) {
|
||||
const meta = chart.getDatasetMeta(0);
|
||||
const style = meta.controller.getStyle(i);
|
||||
|
||||
return {
|
||||
text: chart.data.labels[i][0],
|
||||
fillStyle: style.backgroundColor,
|
||||
strokeStyle: style.borderColor,
|
||||
lineWidth: style.borderWidth,
|
||||
pointStyle: pointStyle,
|
||||
hidden: !chart.getDataVisibility(i),
|
||||
|
||||
// Extra data used for toggling the correct item
|
||||
index: i
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createVideosGraphs(videos, selector) {
|
||||
var labels = [];
|
||||
var data_totalComents = [];
|
||||
var data_total_views = [];
|
||||
var data_total_likes = [];
|
||||
var data_total_dislikes = [];
|
||||
for (var index in videos) {
|
||||
var video = videos[index];
|
||||
if (typeof video == 'function') {
|
||||
continue;
|
||||
}
|
||||
labels.push(['#' + video.id + ': ' + video.total_views + ' views', video.clean_title]);
|
||||
data_totalComents.push(video.totalComents);
|
||||
data_total_views.push(video.total_views);
|
||||
data_total_likes.push(video.total_likes);
|
||||
data_total_dislikes.push(video.total_dislikes);
|
||||
}
|
||||
createGraph(labels, data_total_views, selector);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$.ajax({
|
||||
url: webSiteRootURL + 'view/report.json.php?isAdminPanel=<?php echo !empty($isAdminPanel) ? 1 : 0; ?>',
|
||||
success: function(response) {
|
||||
if (!response.error) {
|
||||
createVideosGraphs(response.today.videos, '#myChartToday');
|
||||
createVideosGraphs(response.last7Days.videos, '#myChart7');
|
||||
createVideosGraphs(response.last15Days.videos, '#myChart15');
|
||||
createVideosGraphs(response.last30Days.videos, '#myChart30');
|
||||
createVideosGraphs(response.last90Days.videos, '#myChart90');
|
||||
if (response.totalUsers) {
|
||||
countTo('#totalUsers', response.totalUsers);
|
||||
}
|
||||
countTo('#totalVideos', response.totalVideos);
|
||||
countTo('#totalSubscriptions', response.totalSubscriptions);
|
||||
countTo('#totalVideosComents', response.totalComents);
|
||||
countTo('#totalVideosLikes', response.totalLikes);
|
||||
countTo('#totalVideosDislikes', response.totalDislikes);
|
||||
countTo('#totalVideosViews', response.totalVideosViews);
|
||||
countTo('#totalDurationVideos', response.totalDurationVideos);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
6
view/report4.1.json.php
Normal file
6
view/report4.1.json.php
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?php
|
||||
header('Content-Type: application/json');
|
||||
global $global, $config;
|
||||
require_once __DIR__.'/../videos/configuration.php';
|
||||
|
||||
echo json_encode(User::getUsersCumulativePerDayJSON());
|
||||
6
view/report4.json.php
Normal file
6
view/report4.json.php
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?php
|
||||
header('Content-Type: application/json');
|
||||
global $global, $config;
|
||||
require_once __DIR__.'/../videos/configuration.php';
|
||||
|
||||
echo json_encode(User::getUsersPerDayJSON());
|
||||
239
view/report4.php
Normal file
239
view/report4.php
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<div class="col-md-12 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("User Registrations Over Time"); ?>
|
||||
</div>
|
||||
<div class="panel-body clearfix" style="height: 300px;">
|
||||
<canvas id="userRegistrationsChart" style="height: 300px; width: 100%;"></canvas>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button class="btn btn-default btn-xs btn-block" onclick="resetZoomUserChart()">
|
||||
<i class="fa fa-search-minus"></i> <?php echo __("Reset Zoom"); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-sm-12 col-xs-12 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp'); ?>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<?php echo __("Cumulative User Growth Over Time"); ?>
|
||||
</div>
|
||||
<div class="panel-body clearfix" style="height: 300px;">
|
||||
<canvas id="userCumulativeChart" style="height: 300px; width: 100%;" tabindex="0"></canvas>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button class="btn btn-default btn-xs btn-block" onclick="resetZoomUserCumulativeChart()">
|
||||
<i class="fa fa-search-minus"></i> <?php echo __("Reset Zoom"); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
loadUserRegistrationsChart();
|
||||
loadUserCumulativeChart();
|
||||
});
|
||||
|
||||
var userRegistrationsChartInstance;
|
||||
var userCumulativeChartInstance;
|
||||
|
||||
function resetZoomUserCumulativeChart() {
|
||||
if (userCumulativeChartInstance) {
|
||||
userCumulativeChartInstance.resetZoom();
|
||||
}
|
||||
}
|
||||
|
||||
function loadUserCumulativeChart() {
|
||||
$.getJSON(webSiteRootURL + 'view/report4.1.json.php', function(json) {
|
||||
const labels = Object.keys(json); // e.g., ["2023-01-01", ...]
|
||||
const data = Object.values(json).map(Number); // e.g., [1, 2, 3, 4, ...]
|
||||
|
||||
const ctx = $('#userCumulativeChart');
|
||||
|
||||
if (userCumulativeChartInstance) {
|
||||
userCumulativeChartInstance.destroy();
|
||||
}
|
||||
|
||||
userCumulativeChartInstance = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: "<?php echo __("Total Users"); ?>",
|
||||
data: data,
|
||||
borderColor: 'rgba(40, 167, 69, 1)',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.2)',
|
||||
borderWidth: 2,
|
||||
tension: 0.3,
|
||||
pointRadius: 0,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
tooltipFormat: 'yyyy-MM-dd',
|
||||
round: 'day'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "<?php echo __("Date"); ?>"
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grace: '5%',
|
||||
title: {
|
||||
display: true,
|
||||
text: "<?php echo __("Total Users"); ?>"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
zoom: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: 'x',
|
||||
modifierKey: null
|
||||
},
|
||||
zoom: {
|
||||
drag: {
|
||||
enabled: true,
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.3)'
|
||||
},
|
||||
wheel: {
|
||||
enabled: true
|
||||
},
|
||||
pinch: {
|
||||
enabled: true
|
||||
},
|
||||
mode: 'x'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function resetZoomUserChart() {
|
||||
if (userRegistrationsChartInstance) {
|
||||
userRegistrationsChartInstance.resetZoom();
|
||||
}
|
||||
}
|
||||
|
||||
function loadUserRegistrationsChart() {
|
||||
$.getJSON(webSiteRootURL + 'view/report4.json.php', function(json) {
|
||||
const labels = Object.keys(json); // ["2024-07-01", "2024-07-02", ...]
|
||||
const data = Object.values(json).map(Number); // [5, 3, 8, 2, ...]
|
||||
|
||||
const ctx = $('#userRegistrationsChart');
|
||||
|
||||
if (userRegistrationsChartInstance) {
|
||||
userRegistrationsChartInstance.destroy();
|
||||
}
|
||||
|
||||
userRegistrationsChartInstance = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: "<?php echo __("New Users per Day"); ?>",
|
||||
data: data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day', // You can change to 'week' or 'month' if too dense
|
||||
tooltipFormat: 'yyyy-MM-dd',
|
||||
round: 'day'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "<?php echo __("Date"); ?>"
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grace: '5%',
|
||||
title: {
|
||||
display: true,
|
||||
text: "<?php echo __("User Count"); ?>"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
zoom: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: 'x',
|
||||
modifierKey: null
|
||||
},
|
||||
zoom: {
|
||||
drag: {
|
||||
enabled: true,
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.3)'
|
||||
},
|
||||
wheel: {
|
||||
enabled: true
|
||||
},
|
||||
pinch: {
|
||||
enabled: true
|
||||
},
|
||||
mode: 'x'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue