Таблица статистики по кампании

src/public/css/styles-amsystem.css

@@ -250,7 +250,7 @@ textarea#campaign-stat-cats
     text-align: center;
     }
     
-#graph-stat
+#chart-graph-stat
     {
     height: 370px;
     }

src/public/js/adm/amsystem-campaign.js

@@ -74,13 +74,20 @@ $(document).ready(function () {
             $statError = $('.chart-graph-stat-error', $statWrap),
             selectorStatChart = '#chart-graph-stat',
             $statChart = $(selectorStatChart, $statWrap),
-            $statTable = $('.b-table_wrapp.report', $statWrap),
-            $tableCampaignStat = $('#table-line', $statTable),
+            $statTableWrap = $('.b-table_wrapp.report', $statWrap),
+            $tableStat = $('#table-line', $statTableWrap),
             targetActionValue = $('input[name=target_action]:checked').val(),
             chart,
             activeLine,
             activeLines,
-            currencyFields = ['money'];
+            activeLinesId,
+            currencyFields = ['money'],
+            dateTimeFields = ['period'],
+            
+            $table = $('#table-line'),
+            $tableContent = $('<tbody>'),
+            $tableBody = $table.find('tbody').first();
+            
         
         // Добавление впереди 0 у однозначных значений
         function pad(number) {
@@ -100,21 +107,17 @@ $(document).ready(function () {
         function valueFormat(value, ratio, id)
         {
             var
-                dataLine = activeLines[parseInt(id.replace('data', '')) - 1],
+                dataLine = activeLinesId[parseInt(id.replace('data', '')) - 1],
                 isCurrencyValue = currencyFields.indexOf(dataLine) > -1,
                 format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
             
-            if (dataLine == 'OrderSum') {
-                format = d3.format(',.0f');
-            }
-
             if (parseFloat(format(value)) == 0 && value != 0) {
                 var accuracy = Math.abs(Math.floor(Math.log10(value)));
                 return value.toFixed(accuracy);
             }
 
             if (isCurrencyValue) {
-                return format(value) + ' грн.';
+                return format(value)/* + ' грн.'*/;
             } else {
                 return format(value);
             }
@@ -130,6 +133,21 @@ $(document).ready(function () {
         }
         
 
+        function valueFormatTable(value, currentActiveLine)
+        {
+            var
+                isCurrencyValue = currencyFields.indexOf(currentActiveLine) > -1,
+                format = d3.format(',.0f');
+
+            if (isCurrencyValue)            format = d3.format(',.2f');
+            if (currentActiveLine == 'ctr') format = d3.format(',.2f');
+
+            if (isCurrencyValue)            return format(value)/* + ' грн.'*/;
+            if (currentActiveLine == 'ctr') return format(value) + ' %';
+
+            return format(value);
+        }
+        
         // Получение данных для отрисовки графика Stat при старте:
         if ($('#campaign-stat').val() && $('#campaign-stat-total').val()) {
             dataStat = JSON.parse($('#campaign-stat').val());
@@ -146,7 +164,7 @@ $(document).ready(function () {
             $statInfo.show();
             $statError.hide();
             $statChart.hide();
-            $statTable.hide();
+            $statTableWrap.hide();
         }
 
         function ShowError()
@@ -154,12 +172,12 @@ $(document).ready(function () {
             $statError.show();
             $statInfo.hide();
             $statChart.hide();
-            $statTable.hide();
+            $statTableWrap.hide();
         }
         
         function getCheckedCategories() {
             var listCats = [];
-            $('thead th input[type="checkbox"]', $tableCampaignStat).each(function(){
+            $('thead th input[type="checkbox"]', $tableStat).each(function(){
                 if ($(this).is(":checked")) {
                     listCats.push($(this).data('field'));
                 }
@@ -185,8 +203,6 @@ $(document).ready(function () {
             // Определяем выбранные категории для графика:
             selectedCategoriesId = getCheckedCategories();
 
-            console.log('AAA renderChart selectedCategoriesId', selectedCategoriesId);
-            
             // Скрываем график, если в таблице не выбраны категории:
             if (selectedCategoriesId.length == 0) {
                 $statChart.hide();
@@ -195,8 +211,6 @@ $(document).ready(function () {
                 $statChart.show();
             }
             
-            console.log('AAA activeLines = ', activeLines);
-            
             var i = 0;
             Object.keys(activeLines).forEach(function(activeLineItem){
                 if (selectedCategoriesId.indexOf(activeLineItem) > -1) {
@@ -209,8 +223,6 @@ $(document).ready(function () {
                 }
             });
             
-            console.log('AAA dataColumnsTemp ', dataColumnsTemp);
-            
             chart = c3.generate({
                 bindto: selectorStatChart,
                 data: {
@@ -272,9 +284,75 @@ $(document).ready(function () {
         };
         
         function renderTable() {
-            console.log('AAA renderTable');
+            
+            var
+                dataTable = dataStat,
+                dataPeriod = dataStat['period'],
+                dataTableForSort = [],
+                $selectedField = $('thead th b.selected', $table),
+                $row,
+                sortField = false,
+                isDesc = true;
+
+            // Определение поля для сортировки строк в таблице:
+            if ($selectedField.length > 0) {
+                sortField = $selectedField.attr('id');
+                isDesc = $selectedField.hasClass('desc');
+            }
+            if (!sortField) {
+                sortField = 'period';
+                isDesc = true;
+            }
+            //console.log('AAA sortField = ', sortField, '  isDesc = ', isDesc);
+            
+            // Подготовка данных для сортировки:
+            dataPeriod.forEach(function(dataTableItem, ind){
+                var dataTableSortItem = {};
+                dataTableSortItem['period'] = dataTableItem;
+                activeLinesId.forEach(function(activeLine){
+                    dataTableSortItem[activeLine] = dataTable[activeLine][ind];
+                });
+                dataTableForSort.push(dataTableSortItem);
+            });
+            
+            // Сортировка данных для таблицы:
+            dataTableForSort.sort(function(a,b){
+                if (dateTimeFields.indexOf(sortField) > -1) {
+                    var
+                        aT = new Date(a[sortField]),
+                        bT = new Date(b[sortField]);
+                    return (isDesc) ? bT-aT : aT-bT;
+                } else {
+                    return (isDesc) ? b[sortField]-a[sortField] : a[sortField]-b[sortField];
+                }
+            });
+            
+            // Отрисовка таблицы:
+            dataTableForSort.forEach(function(item){
+                
+                $row = $('<tr>');
+                $row.append($('<td>').html(item['period']));
+
+                activeLinesId.forEach(function(line){
+                    $row.append($('<td class="'+ line +'">').html(valueFormatTable(item[line], line)));
+                });
+                $row.appendTo($tableContent);
+            });
+            
+            // Добавляем строку "Итого" для отчета 'common':
+            $row = $('<tr class="total">');
+            $row.append($('<td>').html("Итого"));
+            activeLinesId.forEach(function(item){
+                $row.append($('<td>').html(valueFormatTable(dataStatTotal[item], item)));
+            });
+            $row.appendTo($tableContent);
+
+            $tableBody.html('').append($tableContent.children());
+            
+            $statTableWrap.show();
         };
         
+        /*
         switch(targetActionValue) {
             case 'load':
                 activeLine = 'views';
@@ -286,8 +364,11 @@ $(document).ready(function () {
                 activeLine = 'clicks';
             break;
         }
+        */
        
+        activeLine = 'views';
         activeLines = JSON.parse($('#campaign-stat-cats').val());
+        activeLinesId = Object.keys(activeLines);
         
         if (dataStat) {
             // Отрисовка графика и таблицы по стартовым данным:
@@ -300,11 +381,11 @@ $(document).ready(function () {
         } else {
             ShowInfo();
             $statChart.hide();
-            $statTable.hide();
+            $statTableWrap.hide();
         }
         
         // Клик на checkbox в названии поля таблицы:
-        var $tableHeadColsChecks = $('thead th input[type="checkbox"]', $tableCampaignStat);
+        var $tableHeadColsChecks = $('thead th input[type="checkbox"]', $tableStat);
         $tableHeadColsChecks.on('change', function(){
             renderChart();
         });