View file account_analytics/templates/account_analytics/index.html

File size: 5.92Kb
<div class="pg_acc_stats">
	<div class="valign pg_page_title acc_stats_hdr">
		<h4><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M3 12h4v9H3v-9zm14-4h4v13h-4V8zm-7-6h4v19h-4V2z"></path></svg></span>{{LANG account_analytics}}</h4>
		<select id="type" name="type" class="form-control">
			<option value="today" <?php echo ($context['cat_type'] == 'today') ? 'selected': '';?>>{{LANG today}}</option>
			<option value="this_week" <?php echo ($context['cat_type'] == 'this_week') ? 'selected': '';?>>{{LANG this_week}}</option>
			<option value="this_month" <?php echo ($context['cat_type'] == 'this_month') ? 'selected': '';?>>{{LANG this_month}}</option>
			<option value="this_year" <?php echo ($context['cat_type'] == 'this_year') ? 'selected': '';?>>{{LANG this_year}}</option>
        </select>
	</div>
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-3">
			<div class="pg_stat_single">
				<span class="violet"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg></span>
				<b><?php echo $context['total_likes']; ?></b>
				<p>{{LANG likes}}</p>
			</div>
		</div>
		<div class="col-md-3">
			<div class="pg_stat_single">
				<span class="green"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z"></path></svg></span>
				<b><?php echo $context['total_comments']; ?></b>
				<p>{{LANG comments}}</p>
			</div>
		</div>
		<div class="col-md-3"></div>
	</div>
</div>
<div class="pg_page" id="chart-container"></div>

<script type="text/javascript">
$("select#type").change(function(){
    var type = $('#type').val();
    window.location.href = "{{CONFIG site_url}}/account_analytics?type="+type;
});
$(function () {
    Highcharts.setOptions({
      colors: ['#886CFF', '#33C635', '#f2b92b', '#6abd46']
    });
    $('#chart-container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '<?php echo($context['chart_title']); ?> (Based on UTC timezone)'
        },
        xAxis: {
            <?php if ($context['cat_type'] == 'today') { ?>
                categories: [
                    '00 AM',
                    '1 AM',
                    '2 AM',
                    '3 AM',
                    '4 AM',
                    '5 AM',
                    '6 AM',
                    '7 AM',
                    '8 AM',
                    '9 AM',
                    '10 AM',
                    '11 AM',
                    '12 PM',
                    '1 PM',
                    '2 PM',
                    '3 PM',
                    '4 PM',
                    '5 PM',
                    '6 PM',
                    '7 PM',
                    '8 PM',
                    '9 PM',
                    '10 PM',
                    '11 PM'
                ]
            <?php }elseif ($context['cat_type'] == 'this_week') { ?>
                categories: [
                    'Saturday',
                    'Sunday',
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday'
                ]
            <?php }elseif ($context['cat_type'] == 'this_month') { ?>
                <?php if ($context['month_days']  == 31) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                <?php }elseif ($context['month_days'] == 30) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                <?php }elseif ($context['month_days'] == 29) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
                <?php }elseif ($context['month_days'] == 28) {  ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]
                <?php } ?>
            <?php }elseif ($context['cat_type'] == 'this_year') { ?>
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            <?php } ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: "<?php echo $context['chart_text'];?>"
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px;color:#fff;">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:#fff;padding:0">{series.name}: </td>' +
                '<td style="padding:0;color:#fff;"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: '#444'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '{{LANG likes}}',
            data: [<?php echo $context['likes_array'];?>]

        },{
            name: '{{LANG comments}}',
            data: [<?php echo $context['comments_array'];?>]

        }]
    });
});
</script>