Данные для суммарной статистики по кампании, отрисовка графика

parent 279c5501
...@@ -234,7 +234,9 @@ table.campaign-banners tbody tr td { ...@@ -234,7 +234,9 @@ table.campaign-banners tbody tr td {
text-align: center; text-align: center;
} }
textarea#campaign-stat textarea#campaign-stat,
textarea#campaign-stat-total,
textarea#campaign-stat-cats
{ {
display: none; display: none;
} }
...@@ -251,4 +253,64 @@ textarea#campaign-stat ...@@ -251,4 +253,64 @@ textarea#campaign-stat
#graph-stat #graph-stat
{ {
height: 370px; height: 370px;
} }
\ No newline at end of file
/*
#table-stat
*/
.b-table_wrapp.report
{
display: none;
margin-top: 30px;
}
.table.table-striped
{
font-family: monospace;
}
.table.table-striped thead.sortable tr b
{
cursor: pointer;
}
.table.table-striped thead.sortable tr b.not-sorted
{
cursor: default;
}
.table.table-striped thead.sortable tr b.selected
{
color: #2CA02C;
}
.table.table-striped thead.sortable tr span
{
display: inline-block;
border-bottom: 2px solid red;
}
.table.table-striped thead tr b .arrow
{
display: none;
}
.table.table-striped thead.sortable tr b.selected .arrow.asc,
.table.table-striped thead.sortable tr b.selected.desc .arrow.desc
{
display: inline;
}
.table.table-striped thead.sortable tr b.selected .arrow.desc,
.table.table-striped thead.sortable tr b.selected.desc .arrow.asc
{
display: none;
}
.table.table-striped tbody tr.total
{
font-weight: bold;
}
\ No newline at end of file
...@@ -68,14 +68,28 @@ $(document).ready(function () { ...@@ -68,14 +68,28 @@ $(document).ready(function () {
(function(){ (function(){
var var
dataStat, dataStat, dataStatTotal,
$statWrap = $('.campaign-stat'), $statWrap = $('.campaign-stat'),
$statInfo = $('.chart-graph-stat-info', $statWrap), $statInfo = $('.chart-graph-stat-info', $statWrap),
$statError = $('.chart-graph-stat-error', $statWrap), $statError = $('.chart-graph-stat-error', $statWrap),
$statChart = $('.chart-graph-stat-error', $statWrap), selectorStatChart = '#chart-graph-stat',
$statTable = $('.chart-graph-stat-error', $statWrap), $statChart = $(selectorStatChart, $statWrap),
$statTable = $('.b-table_wrapp.report', $statWrap),
$tableCampaignStat = $('#table-line', $statTable),
targetActionValue = $('input[name=target_action]:checked').val(), targetActionValue = $('input[name=target_action]:checked').val(),
activeLine; chart,
activeLine,
activeLines,
currencyFields = ['money'];
// Добавление впереди 0 у однозначных значений
function pad(number) {
var r = String(number);
if ( r.length === 1 ) {
r = '0' + r;
}
return r;
}
// Форматирование даты // Форматирование даты
function formatDate(date) function formatDate(date)
...@@ -83,37 +97,177 @@ $(document).ready(function () { ...@@ -83,37 +97,177 @@ $(document).ready(function () {
return date.getFullYear() +'-'+ pad(date.getMonth()+1) +'-'+ pad(date.getDate()); return date.getFullYear() +'-'+ pad(date.getMonth()+1) +'-'+ pad(date.getDate());
} }
function valueFormat(value, ratio, id)
{
var
dataLine = activeLines[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) + ' грн.';
} else {
return format(value);
}
}
function valueFormatTick(value)
{
var
isCurrencyValue = currencyFields.indexOf(activeLine) > -1,
format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
return format(value);
}
// Получение данных для отрисовки графика Stat при старте: // Получение данных для отрисовки графика Stat при старте:
if ($('#campaign-stat').val()) { if ($('#campaign-stat').val() && $('#campaign-stat-total').val()) {
dataStat = JSON.parse($('#campaign-stat').val()); dataStat = JSON.parse($('#campaign-stat').val());
console.log('AAA dataStat = ', dataStat); dataStatTotal = JSON.parse($('#campaign-stat-total').val());
} else { } else {
ShowError();
}
console.log('AAA dataStat = ', dataStat);
console.log('AAA dataStatTotal = ', dataStatTotal);
function ShowInfo()
{
$statInfo.show();
$statError.hide();
$statChart.hide();
$statTable.hide();
}
function ShowError()
{
$statError.show(); $statError.show();
$statInfo.hide();
$statChart.hide();
$statTable.hide();
} }
switch(targetActionValue) { function getCheckedCategories() {
case 'load': var listCats = [];
activeLine = 'views'; $('thead th input[type="checkbox"]', $tableCampaignStat).each(function(){
break; if ($(this).is(":checked")) {
case 'view': listCats.push($(this).data('field'));
activeLine = 'views'; }
break; });
case 'click': return listCats;
activeLine = 'clicks'; }
break;
}
function renderChart() { function renderChart() {
console.log('AAA renderChart');
var var
dataPeriod = dataStat['period'], dataPeriod = dataStat['period'],
dataValue = dataStat[activeLine], rotateX = null,
titleFormat = formatDate, formatTimeX = '%m-%d',
formatTimeX = '%m-%d'; selectedCategoriesId;
var
dataColumnsTemp = [['x'].concat(dataPeriod)],
names = {},
types = {},
axes = {},
colors = {};
// Определяем выбранные категории для графика:
selectedCategoriesId = getCheckedCategories();
console.log('AAA renderChart selectedCategoriesId', selectedCategoriesId);
// Скрываем график, если в таблице не выбраны категории:
if (selectedCategoriesId.length == 0) {
$statChart.hide();
return false;
} else {
$statChart.show();
}
console.log('AAA activeLines = ', activeLines);
var i = 0;
Object.keys(activeLines).forEach(function(activeLineItem){
if (selectedCategoriesId.indexOf(activeLineItem) > -1) {
i++;
dataColumnsTemp.push(['data'+i].concat(dataStat[activeLineItem]));
names['data'+i] = activeLines[activeLineItem]['title'];
types['data'+i] = 'area-spline';
axes['data'+i] = 'y';
colors['data'+i] = activeLines[activeLineItem]['color'];
}
});
console.log('AAA dataColumnsTemp ', dataColumnsTemp);
chart = c3.generate({
bindto: selectorStatChart,
data: {
x: 'x',
columns: dataColumnsTemp,
names: names,
types: types,
axes: axes,
colors: colors,
},
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: formatDate,
value: valueFormat
}
},
legend: {
show: true,
item: {
onclick: function (id) {
//toggleData(chart, id);
}
}
},
});
// Подсвечиваем Определяем индексы воскресенья:
dataPeriod.forEach(function(date, ind) {
if ((new Date(date)).getUTCDay() == 0) {
$('.c3-axis.c3-axis-x .tick').eq(ind).attr('class', 'tick sunday');
}
});
//chart.toggle(toggelDates);
}; };
...@@ -121,14 +275,40 @@ $(document).ready(function () { ...@@ -121,14 +275,40 @@ $(document).ready(function () {
console.log('AAA renderTable'); console.log('AAA renderTable');
}; };
switch(targetActionValue) {
case 'load':
activeLine = 'views';
break;
case 'view':
activeLine = 'views';
break;
case 'click':
activeLine = 'clicks';
break;
}
activeLines = JSON.parse($('#campaign-stat-cats').val());
if (dataStat) { if (dataStat) {
renderChart(); // Отрисовка графика и таблицы по стартовым данным:
renderTable(); if (dataStat.status == 'Error') {
ShowError();
} else {
renderChart();
renderTable();
}
} else { } else {
ShowInfo();
$statChart.hide(); $statChart.hide();
$statTable.hide(); $statTable.hide();
} }
// Клик на checkbox в названии поля таблицы:
var $tableHeadColsChecks = $('thead th input[type="checkbox"]', $tableCampaignStat);
$tableHeadColsChecks.on('change', function(){
renderChart();
});
})(); })();
}); });
......
...@@ -43,6 +43,16 @@ class CabinetAmSystem extends Common ...@@ -43,6 +43,16 @@ class CabinetAmSystem extends Common
{ {
const ACTION_LIST = 'list'; const ACTION_LIST = 'list';
const ACTION_ITEM = 'item'; const ACTION_ITEM = 'item';
const CAMPAIGN_STAT_CATS = [
'views' => ['title' => 'Показы', 'color' => '#2CA02C'],
'clicks' => ['title' => 'Клики', 'color' => '#D62728'],
'money' => ['title' => 'Расход, грн.', 'color' => '#1F77B4'],
'reach' => ['title' => 'Охват', 'color' => '#FF7F0E'],
'ctr' => ['title' => 'CTR', 'color' => '#9467BD'],
'cpm' => ['title' => 'eCPM', 'color' => '#33C7B6'],
'cpc' => ['title' => 'eCPC', 'color' => '#7CADE2']
];
/** /**
* @param ServerRequestInterface $request * @param ServerRequestInterface $request
...@@ -144,6 +154,7 @@ class CabinetAmSystem extends Common ...@@ -144,6 +154,7 @@ class CabinetAmSystem extends Common
$date_end = $campaign->getDateEnd() ? : date("Y-m-d"); $date_end = $campaign->getDateEnd() ? : date("Y-m-d");
$dates = [$date_begin, $date_end]; $dates = [$date_begin, $date_end];
$campaign_stat = $stats->getCampaignsStat([(int)$campaign_id], $campaign->getTargetAction(), $dates); $campaign_stat = $stats->getCampaignsStat([(int)$campaign_id], $campaign->getTargetAction(), $dates);
$campaign_stat_total = $stats->getCampaignsStat([(int)$campaign_id], $campaign->getTargetAction(), null);
$active_line = 'views'; $active_line = 'views';
...@@ -188,6 +199,8 @@ class CabinetAmSystem extends Common ...@@ -188,6 +199,8 @@ class CabinetAmSystem extends Common
$data['banners'] = $banners; $data['banners'] = $banners;
$data['banners_stats'] = $banners_stats; $data['banners_stats'] = $banners_stats;
$data['campaign_stat'] = $campaign_stat; $data['campaign_stat'] = $campaign_stat;
$data['campaign_stat_total'] = $campaign_stat_total;
$data['campaign_stat_cats'] = self::CAMPAIGN_STAT_CATS;
$data['active_line'] = $active_line; $data['active_line'] = $active_line;
} else { } else {
......
...@@ -372,7 +372,7 @@ class Statistics ...@@ -372,7 +372,7 @@ class Statistics
if ($stats) { if ($stats) {
// Добавляем спец. поля // Добавляем спец. поля
function AddSpecialFields(&$stats) $AddSpecialFields = function(&$stats)
{ {
if ($taget_action == 'load') { if ($taget_action == 'load') {
$stats['views'] = $stats['loads']; $stats['views'] = $stats['loads'];
...@@ -393,17 +393,17 @@ class Statistics ...@@ -393,17 +393,17 @@ class Statistics
$stats['cpc'] = ($clicks != 0) ? round(($money/$clicks)*100, 1) : 0; $stats['cpc'] = ($clicks != 0) ? round(($money/$clicks)*100, 1) : 0;
$stats['money'] = round($stats['money'], 2); $stats['money'] = round($stats['money'], 2);
} };
if (!$dates) if (!$dates)
{ {
AddSpecialFields($stats); $AddSpecialFields($stats);
$dataStats = $stats; $dataStats = $stats;
} }
else else
{ {
foreach ($stats as $day => $stat) { foreach ($stats as $day => $stat) {
AddSpecialFields($stats[$day]); $AddSpecialFields($stats[$day]);
} }
// Формируем данные для временного промежутка // Формируем данные для временного промежутка
...@@ -427,7 +427,7 @@ class Statistics ...@@ -427,7 +427,7 @@ class Statistics
$begin = new DateTime($dates[0]); $begin = new DateTime($dates[0]);
$end = new DateTime($dates[1]); $end = new DateTime($dates[1]);
for($i = $begin; $i <= $end; $i->modify('+1 day')){ for($i = $begin; $i <= $end; $i->modify('+1 day')){
$all_period[] = $i->format("Y-m-d"); $all_period[] = $i->format("Y-m-d");
} }
// Список дат, полученных в статистике: // Список дат, полученных в статистике:
...@@ -462,6 +462,7 @@ class Statistics ...@@ -462,6 +462,7 @@ class Statistics
return $dataStats; return $dataStats;
} }
// Данные по статистике для баннеров // Данные по статистике для баннеров
public function getBannersStat($banners_id_list, $dates) public function getBannersStat($banners_id_list, $dates)
{ {
......
This diff is collapsed.
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