Переключение активных графиков из контролов таблицы

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

@@ -156,6 +156,14 @@ input[type="checkbox"]
         {
         color: #2CA02C;
         }
+        
+        
+    .table.table-striped.admin thead.metric.sortable tr span
+        {
+        display: inline-block;
+        border-bottom: 2px solid red;
+        }
+    
     
     /*
     .table.table-striped.admin thead.metric tr b .arrow

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

@@ -10,7 +10,16 @@ $(document).ready(function(){
         activeTime,
         activeDays,
         timeInterval = [],
-        weekDatesDataStart;
+        toggelDates = [],
+        selectedCategoriesId = [],
+        weekDatesDataStart,
+        colorsActiveLines = {
+            'shows' : '#2CA02C',
+            'clicks' : '#D62728',
+            'transactions' : '#1F77B4',
+            'salemoney' : '#FF7F0E',
+            'admoney' : '#9467BD' 
+        };
         
     // Временные интервалы для отображения на оси:
     for (var i = 0; i < 24; i++) {
@@ -86,6 +95,17 @@ $(document).ready(function(){
         return startWeekDay.getDate() + monthes[startWeekDay.getMonth()] + '-' + value.getDate() + monthes[value.getMonth()];
     }
     
+    function toggleData(chart, id)
+    {
+        chart.toggle(id);
+        if (toggelDates.indexOf(id)<0) {
+            toggelDates.push(id)
+        } else {
+            delete toggelDates[toggelDates.indexOf(id)];
+        }
+        
+    }
+    
     $.extend({
         ChartStat: {
             DateStat: function(dataLineChartStat) {
@@ -93,7 +113,7 @@ $(document).ready(function(){
                 var activeLines = ['shows', 'clicks', 'transactions', 'salemoney', 'admoney'];
                 activeLine = 'shows';
                 activeDays = 'day';
-                console.log('AAA DateStat: ', dataLineChartStat);
+                //console.log('AAA DateStat: ', dataLineChartStat);
 
                 // Диапазон дат:
                 if (dataLineChartStat.type == 'interval') {
@@ -114,24 +134,25 @@ $(document).ready(function(){
                         dataColumnsTemp = [['x'].concat(dataPeriod)],
                         names = {},
                         types = {},
-                        axes = {};
+                        axes = {},
+                        colors = {};
 
                     // Определяем названия в легенде:
-                    /*
-                    dataColumnsTemp.push(['data'].concat(dataValue));
-                    names['data'] = activeLine;
-                    types['data'] = 'area-spline';
-                    axes['data'] = 'y';
-                    */
-                    
+                    var selectedCategoriesId = $.TableStat.CheckedCategories();
+                    console.log('AAA selectedCategoriesId = ', selectedCategoriesId);
                     for (var i = 1; i <= activeLines.length; i++) {
-                        dataColumnsTemp.push(['data'+i].concat(dataLineChartStat[activeLines[i-1]]));
-                        names['data'+i] = activeLines[i-1],
-                        types['data'+i] = 'area-spline';
-                        axes['data'+i] = 'y';
+                        var currentActiveLine = activeLines[i-1];
+                        if (!selectedCategoriesId || selectedCategoriesId.length == 0 || selectedCategoriesId.indexOf(currentActiveLine) > -1) {
+                            dataColumnsTemp.push(['data'+i].concat(dataLineChartStat[currentActiveLine]));
+                            names['data'+i] = currentActiveLine,
+                            types['data'+i] = 'area-spline';
+                            axes['data'+i] = 'y';
+                            colors['data'+i] = colorsActiveLines[currentActiveLine];
+                        }
+                        
                     }
 
-                    console.log('AAA dataColumnsTemp ', dataColumnsTemp);
+                    //console.log('AAA dataColumnsTemp ', dataColumnsTemp);
 
                     var chart = c3.generate({
                         bindto: selectorGraphChartStat,
@@ -142,9 +163,11 @@ $(document).ready(function(){
                             names: names,
                             types: types,
                             axes: axes,
+                            colors: colors,
+                            /*
                             colors: {
                                 data: '#2ca02c',
-                            }
+                            },*/
                         },
                         axis: {
                             x: {
@@ -175,7 +198,14 @@ $(document).ready(function(){
                                 value: valueFormat
                             }
                         },
-                        legend: {show: true},
+                        legend: {
+                            show: true,
+                            item: {
+                                onclick: function (id) {
+                                    //toggleData(chart, id);
+                                }
+                            }
+                        },
                     });
 
                     // Подсвечиваем Определяем индексы воскресенья:
@@ -186,6 +216,8 @@ $(document).ready(function(){
                             }
                         });
                     }
+                    
+                    chart.toggle(toggelDates);
                 }
                 
             },

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

@@ -20,8 +20,7 @@ $(document).ready(function(){
     
     function RenderInterval(dataLineChartStat)
     {
-        var dataPeriod = dataLineChartStat['period'],
-            classTd;
+        var dataPeriod = dataLineChartStat['period'];
 
         dataTable = dataLineChartStat;
 
@@ -40,7 +39,6 @@ $(document).ready(function(){
         });
         $row.appendTo($tableContent);
         
-        
         // Сортировка строк в таблице:
         var
             sortField = false,
@@ -133,19 +131,15 @@ $(document).ready(function(){
                 $tableBody.html('').append($tableContent.children());
                 
             },
-            // Определяем список сайтов (зон, стиран) отмеченных галочками в таблице
+            // Определяем список категорий, отмеченных галочками в таблице:
             CheckedCategories: function() {
-                var listSites = [];
-                $('input', $table).each(function(){
+                var listCats = [];
+                $('thead.metric.sortable th input[type="checkbox"]', $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'));
-                        }
+                        listCats.push($(this).data('field'));
                     }
                 })
-                return (listSites.length == 0) ? false : listSites;
+                return (listCats.length == 0) ? false : listCats;
             },
             
         }

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

@@ -52,11 +52,18 @@ $(document).ready(function(){
         renderHourTable();
     });
     
+    // Клик на checkbox в названии поля таблицы:
+    $('#table-line').on('change', 'thead.metric.sortable th input[type="checkbox"]', function(){
+        //var $this = $(this);
+        //console.log('AAA check ', $this.data('field'), ' ', $this.prop('checked'));
+        renderLineChart();
+    });
+    
+    
     // Отрисовка графика Stat
     function renderLineChart()
     {
         if(dataLineChartStat) {
-            console.log('AAA dataLineChartStat = ', dataLineChartStat);
             $.ChartStat.DateStat(dataLineChartStat);
             return false;
         }

src/templates/app/user/cabinet-feed.phtml

@@ -58,6 +58,14 @@ $error = $this->error;
 $periodStats = $this->periodStats;
 $dates = $this->dates;
 
+$colors_active_lines = array(
+    'shows' => '#2CA02C',
+    'clicks' => '#D62728',
+    'transactions' => '#1F77B4',
+    'salemoney' => '#FF7F0E',
+    'admoney' => '#9467BD'
+);
+
 
 ?>
 
@@ -146,7 +154,10 @@ $dates = $this->dates;
                             <th><?= _t('Дата/Компания')?></th>
                             <?php foreach(['shows', 'clicks', 'transactions', 'salemoney', 'admoney'] as $name): ?>
                             <th>
-                                <input type="checkbox" data-field="<?= $name ?>" />
+                                <span style="border-color: <?= $colors_active_lines[$name] ?>;">
+                                    <input type="checkbox" data-field="<?= $name ?>" />
+                                </span>
+                                
                                 <b id="<?= $name ?>">
                                     <?= _t($name)?>
                                     <!--