Skip to content

A
addcpm-json
Commit 0f95a915 authored by Александр Чаплыгин's avatar Александр Чаплыгин
Browse files
Options

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

parent 43ea90f1
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 28 deletions
src/public/css/styles-feeds-stat.css
View file @ 0f95a915
...@@ -157,6 +157,14 @@ input[type="checkbox"] ...@@ -157,6 +157,14 @@ input[type="checkbox"]
color: #2CA02C; 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 .table.table-striped.admin thead.metric tr b .arrow
{ {
......
src/public/js/script-feeds-stat-charts.js
View file @ 0f95a915
...@@ -10,7 +10,16 @@ $(document).ready(function(){ ...@@ -10,7 +10,16 @@ $(document).ready(function(){
activeTime, activeTime,
activeDays, activeDays,
timeInterval = [], timeInterval = [],
weekDatesDataStart; toggelDates = [],
selectedCategoriesId = [],
weekDatesDataStart,
colorsActiveLines = {
'shows' : '#2CA02C',
'clicks' : '#D62728',
'transactions' : '#1F77B4',
'salemoney' : '#FF7F0E',
'admoney' : '#9467BD'
};
// Временные интервалы для отображения на оси: // Временные интервалы для отображения на оси:
for (var i = 0; i < 24; i++) { for (var i = 0; i < 24; i++) {
...@@ -86,6 +95,17 @@ $(document).ready(function(){ ...@@ -86,6 +95,17 @@ $(document).ready(function(){
return startWeekDay.getDate() + monthes[startWeekDay.getMonth()] + '-' + value.getDate() + monthes[value.getMonth()]; 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({ $.extend({
ChartStat: { ChartStat: {
DateStat: function(dataLineChartStat) { DateStat: function(dataLineChartStat) {
...@@ -93,7 +113,7 @@ $(document).ready(function(){ ...@@ -93,7 +113,7 @@ $(document).ready(function(){
var activeLines = ['shows', 'clicks', 'transactions', 'salemoney', 'admoney']; var activeLines = ['shows', 'clicks', 'transactions', 'salemoney', 'admoney'];
activeLine = 'shows'; activeLine = 'shows';
activeDays = 'day'; activeDays = 'day';
console.log('AAA DateStat: ', dataLineChartStat); //console.log('AAA DateStat: ', dataLineChartStat);
// Диапазон дат: // Диапазон дат:
if (dataLineChartStat.type == 'interval') { if (dataLineChartStat.type == 'interval') {
...@@ -114,24 +134,25 @@ $(document).ready(function(){ ...@@ -114,24 +134,25 @@ $(document).ready(function(){
dataColumnsTemp = [['x'].concat(dataPeriod)], dataColumnsTemp = [['x'].concat(dataPeriod)],
names = {}, names = {},
types = {}, types = {},
axes = {}; axes = {},
colors = {};
// Определяем названия в легенде: // Определяем названия в легенде:
/* var selectedCategoriesId = $.TableStat.CheckedCategories();
dataColumnsTemp.push(['data'].concat(dataValue)); console.log('AAA selectedCategoriesId = ', selectedCategoriesId);
names['data'] = activeLine;
types['data'] = 'area-spline';
axes['data'] = 'y';
*/
for (var i = 1; i <= activeLines.length; i++) { for (var i = 1; i <= activeLines.length; i++) {
dataColumnsTemp.push(['data'+i].concat(dataLineChartStat[activeLines[i-1]])); var currentActiveLine = activeLines[i-1];
names['data'+i] = 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'; types['data'+i] = 'area-spline';
axes['data'+i] = 'y'; axes['data'+i] = 'y';
colors['data'+i] = colorsActiveLines[currentActiveLine];
} }
console.log('AAA dataColumnsTemp ', dataColumnsTemp); }
//console.log('AAA dataColumnsTemp ', dataColumnsTemp);
var chart = c3.generate({ var chart = c3.generate({
bindto: selectorGraphChartStat, bindto: selectorGraphChartStat,
...@@ -142,9 +163,11 @@ $(document).ready(function(){ ...@@ -142,9 +163,11 @@ $(document).ready(function(){
names: names, names: names,
types: types, types: types,
axes: axes, axes: axes,
colors: colors,
/*
colors: { colors: {
data: '#2ca02c', data: '#2ca02c',
} },*/
}, },
axis: { axis: {
x: { x: {
...@@ -175,7 +198,14 @@ $(document).ready(function(){ ...@@ -175,7 +198,14 @@ $(document).ready(function(){
value: valueFormat value: valueFormat
} }
}, },
legend: {show: true}, legend: {
show: true,
item: {
onclick: function (id) {
//toggleData(chart, id);
}
}
},
}); });
// Подсвечиваем Определяем индексы воскресенья: // Подсвечиваем Определяем индексы воскресенья:
...@@ -186,6 +216,8 @@ $(document).ready(function(){ ...@@ -186,6 +216,8 @@ $(document).ready(function(){
} }
}); });
} }
chart.toggle(toggelDates);
} }
}, },
......
src/public/js/script-feeds-stat-table.js
View file @ 0f95a915
...@@ -20,8 +20,7 @@ $(document).ready(function(){ ...@@ -20,8 +20,7 @@ $(document).ready(function(){
function RenderInterval(dataLineChartStat) function RenderInterval(dataLineChartStat)
{ {
var dataPeriod = dataLineChartStat['period'], var dataPeriod = dataLineChartStat['period'];
classTd;
dataTable = dataLineChartStat; dataTable = dataLineChartStat;
...@@ -40,7 +39,6 @@ $(document).ready(function(){ ...@@ -40,7 +39,6 @@ $(document).ready(function(){
}); });
$row.appendTo($tableContent); $row.appendTo($tableContent);
// Сортировка строк в таблице: // Сортировка строк в таблице:
var var
sortField = false, sortField = false,
...@@ -133,19 +131,15 @@ $(document).ready(function(){ ...@@ -133,19 +131,15 @@ $(document).ready(function(){
$tableBody.html('').append($tableContent.children()); $tableBody.html('').append($tableContent.children());
}, },
// Определяем список сайтов (зон, стиран) отмеченных галочками в таблице // Определяем список категорий, отмеченных галочками в таблице:
CheckedCategories: function() { CheckedCategories: function() {
var listSites = []; var listCats = [];
$('input', $table).each(function(){ $('thead.metric.sortable th input[type="checkbox"]', $table).each(function(){
if ($(this).is(":checked")) { if ($(this).is(":checked")) {
if (!isNaN(parseInt($(this).attr('id')))) { listCats.push($(this).data('field'));
listSites.push(parseInt($(this).attr('id')));
} else {
listSites.push($(this).attr('id'));
}
} }
}) })
return (listSites.length == 0) ? false : listSites; return (listCats.length == 0) ? false : listCats;
}, },
} }
......
src/public/js/script-feeds-stat.js
View file @ 0f95a915
...@@ -52,11 +52,18 @@ $(document).ready(function(){ ...@@ -52,11 +52,18 @@ $(document).ready(function(){
renderHourTable(); 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 // Отрисовка графика Stat
function renderLineChart() function renderLineChart()
{ {
if(dataLineChartStat) { if(dataLineChartStat) {
console.log('AAA dataLineChartStat = ', dataLineChartStat);
$.ChartStat.DateStat(dataLineChartStat); $.ChartStat.DateStat(dataLineChartStat);
return false; return false;
} }
......
src/templates/app/user/cabinet-feed.phtml
View file @ 0f95a915
...@@ -58,6 +58,14 @@ $error = $this->error; ...@@ -58,6 +58,14 @@ $error = $this->error;
$periodStats = $this->periodStats; $periodStats = $this->periodStats;
$dates = $this->dates; $dates = $this->dates;
$colors_active_lines = array(
'shows' => '#2CA02C',
'clicks' => '#D62728',
'transactions' => '#1F77B4',
'salemoney' => '#FF7F0E',
'admoney' => '#9467BD'
);
?> ?>
...@@ -146,7 +154,10 @@ $dates = $this->dates; ...@@ -146,7 +154,10 @@ $dates = $this->dates;
<th><?= _t('Дата/Компания')?></th> <th><?= _t('Дата/Компания')?></th>
<?php foreach(['shows', 'clicks', 'transactions', 'salemoney', 'admoney'] as $name): ?> <?php foreach(['shows', 'clicks', 'transactions', 'salemoney', 'admoney'] as $name): ?>
<th> <th>
<span style="border-color: <?= $colors_active_lines[$name] ?>;">
<input type="checkbox" data-field="<?= $name ?>" /> <input type="checkbox" data-field="<?= $name ?>" />
</span>
<b id="<?= $name ?>"> <b id="<?= $name ?>">
<?= _t($name)?> <?= _t($name)?>
<!-- <!--
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment