clipbucket/upload/admin_area/styles/cb_2014/layout/reports.html

<div id="videos_stats">
      <div>
      <h3 class="pull-left inline">Today</h3>
      <h3 class="pull-left inline">
        <input type="checkbox" class="ace ace-switch ace-switch-5" id="enableTooltipDaily">
        <span class="lbl"></span>
        <small class="muted">Enable Tooltip</small></h3></div>
     <div class="clearfix"></div>
    <div id="daily_chart_id" class="flot_chart">
    <img class="loading-image" src="./styles/cb_2014/images/ajax-loader.gif"/></div>
    </div>

<div class="table-responsive">
<table class="table table-striped table-hover">
    <div class="widget-body">
<thead>
<span><legend>Video Reports</legend></span>
<tr>
    <th>All Time</th>
    <th>Today's Videos</th>
    <th>This Week</th>
    <th>Last Week</th>
    <th>This Month</th>
    <th>Last Month</th>
</thead>
<tbody class="reports">
<tr>
    <td><span class="show">Total: <strong>{get_videos count_only=yes}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes"}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing'}</strong></span></td>

    <td><span class="show">Total: <strong>{get_videos count_only=yes date_span=today}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes" date_span=today}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing' date_span=today}</strong></span></td>

    <td><span class="show">Total: <strong>{get_videos count_only=yes date_span=this_week}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes" date_span=this_week}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing' date_span=this_week}</strong></span></td>

    <td><span class="show">Total: <strong>{get_videos count_only=yes date_span=last_week}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes" date_span=last_week}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing' date_span=last_week}</strong></span></td>

    <td><span class="show">Total: <strong>{get_videos count_only=yes date_span=this_month}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes" date_span=this_month}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing' date_span=this_month}</strong></span></td>

    <td><span class="show">Total: <strong>{get_videos count_only=yes date_span=last_month}</strong></span>
        <span class="show">Active: <strong>{get_videos count_only=yes active="yes" date_span=last_month}</strong></span>
        <span class="show">Processing: <strong>{get_videos count_only=yes status='Processing' date_span=last_month}</strong></span></td>
</tr>
        </tbody>
        </div>
    </table>
</div>

    <td width="50%" valign="top"><div id="user_stats">
    <div>
      <h3 class="pull-left inline">This week</h3>
      <h3 class="pull-left inline">
        <input type="checkbox" class="ace ace-switch ace-switch-5" id="enableTooltipWeekly">
        <span class="lbl"></span>
        <small class="muted">Enable Tooltip</small></h3></div>
     <div class="clearfix"></div>
    <div id="weekly_chart_id" class="flot_chart"><img class="loading-image" src="./styles/cb_2014/images/ajax-loader.gif"/></div>
    
    </div>
</td>

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <div class="widget-body">
        <thead>
        <span><legend>User Reports</legend></span>
        <tr>
        <th>All Time</th>
        <th>Today's Users</th>
        <th>This Week</th>
        <th>Last Week</th>
        <th>This Month</th>
        <th>Last Month</th>
        </thead>
        <tbody class="reports">
        <tr>
            <td><span class="show">Total: <strong>{get_users count_only=yes}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok'}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes status='ToActivate'}</strong></span></td>

            <td><span class="show">Total: <strong>{get_users count_only=yes date_span='today'}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok' date_span=today}</strong></span>
                <span class="show">Processing: <strong>{get_videos count_only=yes status='ToActivate' date_span=today}</strong></span></td>

            <td><span class="show">Total: <strong>{get_users count_only=yes date_span='this_week'}</strong> </span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok' date_span=this_week}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes status='ToActivate' date_span=this_week}</strong></span></td>

            <td><span class="show">Total: <strong>{get_users count_only=yes date_span='last_week'}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok' date_span=last_week}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes status='ToActivate' date_span=last_week}</strong></span></td>

            <td><span class="show">Total: <strong>{get_users count_only=yes date_span=this_month}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok' date_span=this_month}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes status='ToActivate' date_span=this_month}</strong></span></td>

            <td><span class="show">Total: <strong>{get_users count_only=yes date_span=last_month}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes status='Ok' date_span=last_month}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes status='ToActivate' date_span=last_month}</strong></span></td>
        </tr>
        </tbody>
            </div>
    </table>
</div>


    <td width="50%" valign="top">
    <div id="group_stats">
      <div>
      <h3 class="pull-left inline">This Month</h3>
      <h3 class="pull-left inline">
        <input type="checkbox" class="ace ace-switch ace-switch-5" id="enableTooltipMonthly">
        <span class="lbl"></span>
        <small class="muted">Enable Tooltip</small></h3></div>
     <div class="clearfix"></div>
      <div id="monthly_chart_id"  class="flot_chart"><img class="loading-image" src="./styles/cb_2014/images/ajax-loader.gif"/></div>
    </div></td>

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <div class="widget-body">
        <thead>
        <span><legend>Group Reports</legend></span>
        <tr>
        <th>All Time</th>
        <th>Today's Groups</th>
        <th>This Week</th>
        <th>Last Week</th>
        <th>This Month</th>
        <th>Last Month</th>
        </thead>
        <tbody class="reports">
        <tr>
            <td><span class="show">Total: <strong>{get_groups count_only=yes}</strong></span>
                <span class="show">Active: <strong>{get_groups count_only=yes active='yes'}</strong></span>
                <span class="show">Processing: <strong>{get_groups count_only=yes active='no'}</strong></span></td>

            <td><span class="show">Total: <strong>{get_groups count_only=yes date_span='today'}</strong></span>
                <span class="show">Active: <strong>{get_groups count_only=yes active='yes' date_span=today}</strong></span>
                <span class="show">Processing: <strong>{get_groups count_only=yes active='yes' date_span=today}</strong></span></td>

            <td><span class="show">Total: <strong>{get_groups count_only=yes date_span='this_week'}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes active='yes' date_span=this_week}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes active='no' date_span=this_week}</strong></span></td>

            <td><span class="show">Total: <strong>{get_groups count_only=yes date_span='last_week'}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes active='yes' date_span=last_week}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes active='no' date_span=last_week}</strong></span></td>

            <td><span class="show">Total: <strong>{get_groups count_only=yes date_span=this_month}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes active='yes' date_span=this_month}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes active='no' date_span=this_month}</strong></span></td>

            <td><span class="show">Total: <strong>{get_groups count_only=yes date_span=last_month}</strong></span>
                <span class="show">Active: <strong>{get_users count_only=yes active='yes' date_span=last_month}</strong></span>
                <span class="show">Processing: <strong>{get_users count_only=yes active='no' date_span=last_month}</strong></span></td>

        </tr>
        </tbody>
            </div>
    </table>
</div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <div class="widget-body">
                <thead>
                <span><legend>Other Reports</legend></span>
                <tr>
                <th>Comments</th>
                <th>Flags</th>
                <th>Playlists</th>
                <th>Favorites</th>
                </thead>
                <tbody class="reports">
                <tr>
                    <td><li><span class="show">Video Comments: <strong>{$myquery->get_comments('wildcard',v,TRUE)}</strong></span>
                        <li><span class="show">Groups Discussion:<strong>{$myquery->get_comments('wildcard',t,TRUE)}</strong></span></li>
                        <li><span class="show">Profile Comments: <strong>{$myquery->get_comments('wildcard',c,TRUE)}</strong></span></li></td>

                    <td><li><span class="show">Videos Reported:<strong>{$cbvid->action->count_flagged_objects()}</strong></span></li>
                        <li><span class="show">Groups Reported: <strong>{$userquery->action->count_flagged_objects()}</strong></span></li>
                        <li><span class="show">Profiles Reported: <strong>{$myquery->get_comments('wildcard',c,TRUE)}</strong></span></li></td>

                    <td><li><span class="show">Video PlayList<strong>{$cbvid->action->count_total_playlist()}</strong></span></li>
                        <li><span class="show">Videos in Playlist: <strong>{$cbvid->action->count_total_playlist(true)}</strong></span></li></td>

                    <td><li><span class="show">Favorite Videos: <strong>{$cbvid->action->total_favorites()}</strong></span></li></td>

                </tr>
                </tbody>
                    </div>
            </table>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <div class="widget-body">
                <thead>
                <span><legend>Total files and Sizes</legend></span>
                <tr>

                <th>Total Files</th>
                <th>Sizes</th>

                </thead>
                <tbody class="reports">
                <tr>
                    <td>
                    <li><span class="show">Total Files: <strong>{$vid_dir.count|number_format}</strong></span></li>
                    <li><span class="show">Total Thumbs: <strong>{$thumb_dir.count|number_format}</strong></span> </li>
                    <li><span class="show">Original Video Files: <strong>{$orig_dir.count|number_format}</strong></span> </li>
                    <li><span class="show">User Thumbs Files: <strong>{$user_thumbs.count|number_format}</strong></span> </li>
                    <li><span class="show">User Background Files: <strong>{$user_bg.count|number_format}</strong></span> </li>
                    <li><span class="show">Groups Thumb Files: <strong>{$grp_thumbs.count|number_format}</strong></span></li>
                    <li><span class="show">Category Thumb Files: <strong>{$cat_thumbs.count|number_format}</strong></span></li>
                    <li><span class="show">DataBase Size: <strong>{$db_size}</strong></span></li>
                    </td>
                    <td>
                        <li><span class="show">Folder Size: <strong>{$vid_dir.size|formatfilesize}</strong></span></li>
                        <li><span class="show">Folder Size: <strong>{$thumb_dir.size|formatfilesize}</strong></span> </li>
                        <li><span class="show">Folder Size: <strong>{$orig_dir.size|formatfilesize}</strong></span> </li>
                        <li><span class="show">Folder Size: <strong>{$user_thumbs.size|formatfilesize}</strong></span> </li>
                        <li><span class="show">Folder Size: <strong>{$user_bg.size|formatfilesize}</strong></span> </li>
                        <li><span class="show">Folder Size: <strong>{$grp_thumbs.size|formatfilesize}</strong></span></li>
                        <li><span class="show">Folder Size: <strong>{$cat_thumbs.size|formatfilesize}</strong></span></li>
                        <li><span class="show">Folder Size: <strong>{$db_size}</strong></span></li>
                    </td>
                </tr>
                </tbody>
                    </div>
            </table>
        </div>

<style type="text/css">
.flot_chart{
  height: 200px;
  width: 800px;
}
</style>

<script type="text/javascript">

    $(function() {

        var options = {
                        
                          series: {
                              bars: {
                              show: true,
                              steps: true,
                              barWidth: 0.6,
                              align: "center"
                                },
                              points: { show: true },
                              lines: { show: true }
                          },
                          xaxis: {
                              mode: "categories",
                              tickLength: 0
                          },
                          grid: { hoverable: true, clickable: true }

                    };

       // $.plot("#placeholder", data, options);

        var iteration = 0;

        function fetchData() {

            //++iteration;
           // Daily Data //

            function onDataReceveDaily(series_daily){
                
                data =  series_daily;
                //$.plot("#placeholder", data, options);
                $.plot("#daily_chart_id", data, options);
                tooltip("#daily_chart_id","#enableTooltipDaily");
            }

            $.ajax({
                url: "charts/reports/daily_activity_reports.php",
                type: "POST",
                data:"videos=videos",
                dataType: "json",
                success: onDataReceveDaily ,
                error: function() {
                $("#daily_chart_id").html("error");
                alert('error');
            },
            complete: function(){
            $('#daily_chart_id .loading-image').hide();
            }
            });

            // !Daily Data //

            // Week Data //

            function onDataReceivedWeekly(series_weekly) {

                data =  series_weekly ;

                $.plot("#weekly_chart_id", data, options);
                tooltip("#weekly_chart_id","#enableTooltipWeekly");
            }

            $.ajax({
                url: "charts/reports/weekly_activity_reports.php",
                type: "POST",
                data:"videos=videos",
                dataType: "json",
                success: onDataReceivedWeekly ,
                error: function() {
                $("#weekly_chart_id").html("error");
                alert('error');
            },
            complete: function(){
            $('#weekly_chart_id .loading-image').hide();
            }
            });
            // !Week Data //
            // Monthly Data //

            function onDataReceveMonthly(series_monthly){
                
                data =  series_monthly;
                //$.plot("#placeholder", data, options);
                $.plot("#monthly_chart_id", data, options);
                tooltip("#monthly_chart_id","#enableTooltipMonthly");
            }

            $.ajax({
                url: "charts/reports/monthly_activity_reports.php",
                type: "POST",
                data:"videos=videos",
                dataType: "json",
                success: onDataReceveMonthly ,
                error: function() {
                $("#monthly_chart_id").html("error");
                alert('error');
            },
            complete: function(){
            $('#monthly_chart_id .loading-image').hide();
            }
            });

            // !Monthly Data //

            /*if (iteration < 5) {
                setTimeout(fetchData, 10000);
            } else {
                data = [];
                alreadyFetched = {};
            }*/
        }
        fetchData();
        //setTimeout(fetchData, 10000);

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
   function tooltip(chart_id,tooltip_id){

    $(chart_id).bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($(tooltip_id).is(':checked')) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    
                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        }
    });
}
});
</script>