Стр. статистики по фидам пользователя

src/public/css/styles-feeds-stat.css

+/* Таблица стилей к странице статистики фида */
+
+.b-content__work
+    {
+    padding-top: 40px;
+    background: #FFFFFF;
+    }
+
+.b-content__work.inner
+    {
+    max-width: 1240px;
+    margin: 0 auto;
+    }
+    
+.b-content__work.inner input[type="checkbox"]
+    {
+    vertical-align: -2px;
+    cursor: pointer;
+    }
+    
+.b-clear
+    {
+    clear: both;
+    }
+
+.b-content__title
+    {
+    padding: 85px 0 25px;
+    height: 260px;
+    background-color: #EAEFF1;
+    }
+    
+    .b-content__title picture
+        {
+        display: block;
+        margin: 0 auto;
+        width: 90px;
+        margin-bottom: 5px;
+        }
+    
+        .b-content__title picture img
+            {
+            height: 90px;
+            width: 90px;
+            object-fit: cover;
+            border-radius: 50%;
+            }
+            
+        .b-content__title p.lead
+            {
+            margin-bottom: 5px;
+            text-align: center;
+            }
+            
+        .b-content__title-settings
+            {
+            text-align: center;
+            }
+            
+        .b-content__title-settings .annotation
+            {
+            color : #0071BC;
+            }
+            
+        .b-content__title-settings .annotation:hover
+            {
+            color : #177FC5;
+            }
+            
+        .b-content__title-settings .annotation:first-child
+            {
+            margin-right: 30px;
+            }
+
+
+.form-group .form-control
+    {
+    font-family: monospace;
+    }
+            
+.form-group select.form-control
+    {
+    height: 34px;
+    line-height: 14px;
+    padding-right: 15px;
+    border-color: #BDCED4;
+    background: url(../img/icon-open-accordeon.svg) right 4px center no-repeat;
+    background-size: 10px;
+    cursor: pointer;
+    }
+            
+.b-feeds-stat_controls
+    {
+    margin-bottom: 25px;
+    height: 34px;
+    }
+    
+    .b-feeds-stat_controls-report
+        {
+        float: left;
+        }
+    
+    
+    .b-feeds-stat_controls-period
+        {
+        float: right;
+        }
+
+        .b-feeds-stat_controls input.date-value
+            {
+            width: 100px;
+            }
+            
+        .b-feeds-stat_controls select
+            {
+            display: inline-block;
+            margin: 0 15px 0 2px;
+            width: 120px;
+            height: 30px;
+            line-height: 15px;
+            }    
+            
+        .b-feeds-stat_controls .order-period
+            {
+            width: 135px;
+            }
+
+    
+.chart-graph-stat-info,
+.chart-graph-stat-error,
+.chart-graph-stat-loading
+    {
+    display: none;
+    padding-top: 160px;
+    height: 370px;
+    text-align: center;
+    }
+    

src/public/js/script-feeds-stat-charts.js

+$(document).ready(function(){
+
+    var
+        selectorGraphChartStat = '#chart-graph-stat',
+        selectorActiveLine = '.b-filter__switch.current-metric .m-filter__switch-item_active',
+        selectorActiveTime = '.b-filter__switch.time .m-filter__switch-item_active',
+        selectorActiveDays = '.b-filter__switch.days .m-filter__switch-item_active',
+        selectorActiveData = '.b-filter__switch.metric-data .m-filter__switch-item_active',
+        activeLine = $(selectorActiveLine).data('filter-category'),
+        activeTime,
+        activeDays,
+        timeInterval = [],
+        weekDatesDataStart;
+        
+    // Временные интервалы для отображения на оси:
+    for (var i = 0; i < 24; i++) {
+        timeInterval.push(pad(i) + ':00');
+    }
+    
+        
+    // Добавление впереди 0 у однозначных значений
+    function pad(number) {
+        var r = String(number);
+        if ( r.length === 1 ) {
+          r = '0' + r;
+        }
+        return r;
+    }
+    
+    // Форматирование даты
+    function formatDate(date)
+    {
+        return date.getFullYear() +'-'+ pad(date.getMonth()+1) +'-'+ pad(date.getDate());
+    }
+    
+    // Форматирование времени
+    function formatTime(time)
+    {
+        return pad(time.getHours()) +':'+ pad(time.getMinutes());
+    }
+    
+    function valueFormat(value, ratio, id)
+    {
+        var
+            currencyFields = ['admoney', 'salemoney'],
+            isCurrencyValue = currencyFields.indexOf(activeLine) > -1,
+            format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
+        
+        if (parseFloat(format(value)) == 0 && value != 0) {
+            var accuracy = Math.abs(Math.floor(Math.log10(value)));
+            return value.toFixed(accuracy);
+        }
+        
+        return format(value);
+    }
+    
+    function valueFormatTick(value)
+    {
+        var
+            currencyFields = ['admoney', 'salemoney'],
+            isCurrencyValue = currencyFields.indexOf(activeLine) > -1,
+            format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
+    
+        return format(value);
+    }
+    
+    function formatDateMonth(value)
+    {
+        var monthes = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
+        return monthes[value.getMonth()];
+    }
+    
+    function formatDateWeek(value)
+    {
+        var
+            monthes = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'],
+            startWeekDay = new Date(value),
+            currentDay = value.getDay(),
+            diff = (currentDay == 0) ? 6 : currentDay-1;
+        
+        startWeekDay.setDate(value.getDate() - diff);
+        if (weekDatesDataStart.getTime() - startWeekDay.getTime() > 0) {
+            startWeekDay = weekDatesDataStart;
+        }
+        //return (startWeekDay.getMonth()+1) +'/'+ pad(startWeekDay.getDate()) + '-' + (value.getMonth()+1) +'/'+ pad(value.getDate());
+        return startWeekDay.getDate() + monthes[startWeekDay.getMonth()] + '-' + value.getDate() + monthes[value.getMonth()];
+    }
+    
+    $.extend({
+        ChartStat: {
+            DateStat: function(dataLineChartStat) {
+                
+                activeLine = 'shows';
+                activeDays = 'day';
+                console.log('AAA DateStat: ', dataLineChartStat);
+
+                // Диапазон дат:
+                if (dataLineChartStat.type == 'interval') {
+
+                    var
+                        dataPeriod,
+                        dataValue,
+                        rotateX = null,
+                        titleFormat = formatDate,
+                        formatTimeX = '%m-%d';
+
+                    if (activeDays == 'day') {
+                        dataPeriod = dataLineChartStat['period'];
+                        dataValue = dataLineChartStat[activeLine];
+                    }
+                    
+                    var
+                        dataColumnsTemp = [['x'].concat(dataPeriod)],
+                        names = {},
+                        types = {},
+                        axes = {};
+
+                    // Определяем названия в легенде:
+                    dataColumnsTemp.push(['data'].concat(dataValue));
+                    names['data'] = activeLine;
+                    types['data'] = 'area-spline';
+                    axes['data'] = 'y';
+
+                    console.log('AAA dataColumnsTemp ', dataColumnsTemp);
+
+                    var chart = c3.generate({
+                        bindto: selectorGraphChartStat,
+                        data: {
+                            x: 'x',
+                            //xFormat: '%H:%M',
+                            columns: dataColumnsTemp,
+                            names: names,
+                            types: types,
+                            axes: axes,
+                            colors: {
+                                data: '#2ca02c',
+                            }
+                        },
+                        axis: {
+                            x: {
+                                type: 'timeseries',
+                                categories: dataPeriod,
+                                padding: {left: 0},
+                                tick: {
+                                    culling: {max: 25},
+                                    format: formatTimeX,
+                                    rotate: rotateX
+                                }
+                            },
+                            y: {
+                                min: 0,
+                                padding: {top: 50, bottom: 0},
+                                tick: {
+                                    format: valueFormatTick
+                                }
+                            }
+                        },
+                        grid: {
+                            x: {show: true},
+                            y: {show: true},
+                        },
+                        tooltip: {
+                            format: {
+                                title: titleFormat,
+                                value: valueFormat
+                            }
+                        },
+                        legend: {show: false},
+                    });
+
+                    // Подсвечиваем Определяем индексы воскресенья:
+                    if (activeDays == 'day') {
+                        dataPeriod.forEach(function(date, ind) {
+                            if ((new Date(date)).getUTCDay() == 0) {
+                                $('.c3-axis.c3-axis-x .tick').eq(ind).attr('class', 'tick sunday');
+                            }
+                        });
+                    }
+                }
+                
+            },
+        }
+    });
+
+});

src/public/js/script-feeds-stat-table.js

+$(document).ready(function(){
+
+    var
+        $table = $('#table-line'),
+        $tableHeader = $('<thead>'),
+        $tableContent = $('<tbody>'),
+        $tableBody = $table.find('tbody').first(),
+        activeLinesSwitchSelector = '.b-filter__switch.current-metric:not(.metric-data) .b-filter__switch-item',
+        $activeLinesSwitch = $(activeLinesSwitchSelector),
+        selectorTableTimeSwitch = '.b-filter__switch.time-table .m-filter__switch-item_active',
+        selectorActiveData = '.b-filter__switch.metric-data .m-filter__switch-item_active',
+        timeTableType,
+        activeLines = [],
+        currentActiveLine,
+        metric,
+        dataTable,
+        bySiteState = false;
+    
+    function valueFormat(value)
+    {
+        var
+            currencyFields = ['admoney', 'salemoney'],
+            isCurrencyValue = currencyFields.indexOf(currentActiveLine) > -1,
+            format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
+    
+        return format(value);
+    }
+    
+    function RenderInterval(dataLineChartStat)
+    {
+        var dataPeriod = dataLineChartStat['period'],
+            classTd;
+
+        dataTable = dataLineChartStat;
+
+        // Добавляем строку "Итого":
+        $row = $('<tr style="font-weight: bold;">');
+        $row.append($('<td>').html("Итого"));
+        activeLines.forEach(function(item){
+            currentActiveLine = item;
+            
+            var totalValue = 0;
+            for(var i = dataPeriod.length-1; i >= 0; i--) {
+                totalValue += dataTable[item][i];
+            }
+
+            $row.append($('<td>').html(valueFormat(totalValue)));
+        });
+        $row.appendTo($tableContent);
+
+        for(var i = dataPeriod.length-1; i >= 0; i--) {
+
+            var
+                date = dataPeriod[i],
+                values = {};
+
+            activeLines.forEach(function(activeLine){
+                currentActiveLine = activeLine;
+                values[activeLine] = valueFormat(dataTable[activeLine][i]);
+            });
+
+            $row = $('<tr>');
+            $row.append($('<td>').html(date));
+            activeLines.forEach(function(item){
+                $row.append($('<td>').html(values[item]));
+            });
+            $row.appendTo($tableContent);
+        }
+    }
+    
+    $.extend({
+        TableStat: {
+            Render: function(dataLineChartStat) {
+                
+                // Формируем список переключателей (категорий) activeLines:
+                activeLines = ['shows', 'clicks', 'transactions', 'salemoney', 'admoney'];
+
+                //console.log('AAA TableStat render: ', dataLineChartStat);
+                //console.log('AAA activeLines: ', activeLines);
+
+                dataTable = {};
+                activeLines.forEach(function(item){
+                    dataTable[item] = [];
+                });
+
+                $table.removeClass('compare');
+                $('thead', $table).removeClass('sortable');
+
+
+                if (dataLineChartStat.type == 'interval') {
+                    RenderInterval(dataLineChartStat);
+                }
+
+                $tableBody.html('').append($tableContent.children());
+                
+            },
+            // Определяем список сайтов (зон, стиран) отмеченных галочками в таблице
+            CheckedCategories: function() {
+                var listSites = [];
+                $('input', $table).each(function(){
+                    if ($(this).is(":checked")) {
+                        if (!isNaN(parseInt($(this).attr('id')))) {
+                            listSites.push(parseInt($(this).attr('id')));
+                        } else {
+                            listSites.push($(this).attr('id'));
+                        }
+                    }
+                })
+                return (listSites.length == 0) ? false : listSites;
+            },
+            // Устанавливаем состояние "по сайту" (при клике на сайт в таблице)
+            SetSiteState: function(state) {
+                bySiteState = state;
+            },
+            // Получаем состояние "по сайту"
+            GetSiteState: function() {
+                return bySiteState;
+            },
+        }
+    });
+
+});
+

src/public/js/script-feeds-stat.js

+$(document).ready(function(){
+    
+    (function(){
+        
+            
+        // Выбор дат для Stat http://t1m0n.name/air-datepicker/docs/index-ru.html
+        var
+            nowDate = new Date(),
+            datepicker1 = $('#date-value-1').datepicker({
+                dateFormat: "yyyy-mm-dd",
+                autoClose: true,
+                maxDate: nowDate
+            }).data('datepicker'),
+            datepicker2 = $('#date-value-2').datepicker({
+                dateFormat: "yyyy-mm-dd",
+                autoClose: true,
+                maxDate: nowDate
+            }).data('datepicker'),
+            currentDay1 = new Date($('#date-value-1').val()),
+            currentDay2 = new Date($('#date-value-2').val());
+
+            // Установка стартовых значений дат:
+            datepicker1.selectDate(currentDay1);
+            datepicker2.selectDate(currentDay2);
+    
+    })();
+    
+    
+    var 
+        $chartStat = $('#chart-graph-stat'),
+        $chartTable = $('#b-content__traffic-table'),
+        $chartStatInfo = $('.chart-graph-stat-info'),
+        $chartStatError = $('.chart-graph-stat-error'),
+        $chartStatLoading = $('.chart-graph-stat-loading'),
+        $chartStatErrorMessage = $('.chart-graph-stat-error .message'),
+        dataLineChartStat;
+    
+    // Получение данных для отрисовки графика Stat при старте:
+    if ($('#period-stats').val()) {
+        dataLineChartStat = JSON.parse($('#period-stats').val());
+    }
+    
+    // Отрисовка графика и таблицы по стартовым данным:
+    renderLineChart();
+    renderHourTable();
+    
+    // Отрисовка графика Stat
+    function renderLineChart()
+    {
+        if(dataLineChartStat) {
+            console.log('AAA dataLineChartStat = ', dataLineChartStat);
+            $.ChartStat.DateStat(dataLineChartStat);
+            return false;
+        }
+    }
+    
+    // Отрисовка почасовой таблицы
+    function renderHourTable()
+    {
+        if(dataLineChartStat) {
+            $.TableStat.Render(dataLineChartStat);
+            $chartTable.show();
+        } else {
+            $chartTable.hide();
+        }     
+    }
+    
+    
+});
\ No newline at end of file

src/src/App/Action/User/Cabinet.php

@@ -89,8 +89,30 @@ class Cabinet extends Common
             $statsDaysModel = $this->container->get(StatsDays::class);
             $stats = $statsDaysModel->findAll(['FeedID' => $feed_id_list])->toArray();
             
+            $periodStats = array(
+                'period' => [],
+                'shows' => $stat_item['shows'],
+                'clicks' => $stat_item['clicks'],
+                'transactions' => $stat_item['transactions'],
+                'salemoney' => $stat_item['salemoney'],
+                'admoney' => $stat_item['admoney'],
+                'type' => 'interval'
+            );
+            foreach($stats as $stat_item) {
+                $periodStats['period'][] = $stat_item['eventdate'];
+                $periodStats['shows'][] = $stat_item['shows'];
+                $periodStats['clicks'][] = $stat_item['clicks'];
+                $periodStats['transactions'][] = $stat_item['transactions'];
+                $periodStats['salemoney'][] = $stat_item['salemoney'];
+                $periodStats['admoney'][] = $stat_item['admoney'];
+            }
+            
+            $dates = ['2018-10-09', '2018-11-09'];
+            
             $data['feeds'] = $feeds;
-            $data['periodStats'] = $stats;
+            $data['periodStats'] = $periodStats;
+            //$data['periodStats'] = $stats;
+            $data['dates'] = $dates;
             
             /*
             $response =  new HtmlResponse($this->template->render('app::user/feeds', [

src/src/App/Entity/Feeds/StatsDay.php

@@ -59,7 +59,7 @@ class StatsDay extends Common
     }
     
     // Shows
-    public function getShows()
+    public function getShows(): int
     {
         return $this->shows;
     }
@@ -70,8 +70,53 @@ class StatsDay extends Common
         return $this;
     }
     
+    // Clicks
+    public function getClicks(): int
+    {
+        return $this->clicks;
+    }
+
+    public function setClicks($clicks)
+    {
+        $this->clicks = $clicks;
+        return $this;
+    }
     
+    // Transactions
+    public function getTransactions(): int
+    {
+        return $this->transactions;
+    }
+
+    public function setTransactions($transactions)
+    {
+        $this->transactions = $transactions;
+        return $this;
+    }
     
+    // Salemoney
+    public function getSalemoney(): float
+    {
+        return $this->salemoney;
+    }
+
+    public function setSalemoney($salemoney)
+    {
+        $this->salemoney = $salemoney;
+        return $this;
+    }
+    
+    // Salemoney
+    public function getAdmoney(): float
+    {
+        return $this->admoney;
+    }
+
+    public function setAdmoney($admoney)
+    {
+        $this->admoney = $admoney;
+        return $this;
+    }
     
 
 }
\ No newline at end of file