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

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;
} }
...@@ -252,3 +254,63 @@ textarea#campaign-stat ...@@ -252,3 +254,63 @@ textarea#campaign-stat
{ {
height: 370px; height: 370px;
} }
/*
#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) {
// Отрисовка графика и таблицы по стартовым данным:
if (dataStat.status == 'Error') {
ShowError();
} else {
renderChart(); renderChart();
renderTable(); 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();
});
})(); })();
}); });
......
...@@ -44,6 +44,16 @@ class CabinetAmSystem extends Common ...@@ -44,6 +44,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
* @param ResponseInterface $response * @param ResponseInterface $response
...@@ -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]);
} }
// Формируем данные для временного промежутка // Формируем данные для временного промежутка
...@@ -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)
{ {
......
...@@ -27,11 +27,17 @@ ...@@ -27,11 +27,17 @@
/** @var $this \Zend\View\Renderer\PhpRenderer */ /** @var $this \Zend\View\Renderer\PhpRenderer */
$this->headScript() $this->headScript()
->appendFile('/js/c3.min.js')
->appendFile('/js/d3.min.js')
//->appendFile('/js/script-feeds-stat-charts.js')
//->appendFile('/js/script-feeds-stat-table.js')
//->appendFile('/js/script-feeds-stat.js')
->appendFile('/js/adm/amsystem-campaign.js') ->appendFile('/js/adm/amsystem-campaign.js')
; ;
$this->headLink() $this->headLink()
->appendStylesheet('/css/c3.css')
->appendStylesheet('/css/styles-amsystem.css') ->appendStylesheet('/css/styles-amsystem.css')
; ;
...@@ -63,7 +69,10 @@ if (!$error) { ...@@ -63,7 +69,10 @@ if (!$error) {
$campaign_geo = json_decode($campaign->getTargeting(), true)['geo']; $campaign_geo = json_decode($campaign->getTargeting(), true)['geo'];
$banners = $this->banners; $banners = $this->banners;
$banners_stats = $this->banners_stats; $banners_stats = $this->banners_stats;
$campaign_stat = $this->campaign_stat; $campaign_stat = $this->campaign_stat;
$campaign_stat_total = $this->campaign_stat_total;
$campaign_stat_cats = $this->campaign_stat_cats;
$target_class = ($campaign_target_action == 'load') ? 'load-target' : ''; $target_class = ($campaign_target_action == 'load') ? 'load-target' : '';
...@@ -85,7 +94,7 @@ if (!$error) { ...@@ -85,7 +94,7 @@ if (!$error) {
<section class="b-content__work inner"> <section class="b-content__work inner">
<form id="campaign-create-form" method="post" action=""> <form id="campaign-create-form" method="post" action="">
<fieldset disabled="disabled">
<div class="panel panel-info"> <div class="panel panel-info">
<!-- Header --> <!-- Header -->
...@@ -97,6 +106,8 @@ if (!$error) { ...@@ -97,6 +106,8 @@ if (!$error) {
<div class="panel-body"> <div class="panel-body">
<fieldset disabled="disabled">
<!-- Активность и Название --> <!-- Активность и Название -->
<div class="form-group title"> <div class="form-group title">
<input type="checkbox" id="campaign-active" name="campaign-active" <?php if ($campaign_active): ?>checked<?php endif; ?>> <input type="checkbox" id="campaign-active" name="campaign-active" <?php if ($campaign_active): ?>checked<?php endif; ?>>
...@@ -332,10 +343,14 @@ if (!$error) { ...@@ -332,10 +343,14 @@ if (!$error) {
</div> </div>
</fieldset>
<div class="b-clear"></div> <div class="b-clear"></div>
<div class="campaign-stat"> <div class="campaign-stat">
<textarea id="campaign-stat"><?= ($campaign_stat ? json_encode($campaign_stat) : '')?></textarea> <textarea id="campaign-stat"><?= ($campaign_stat ? json_encode($campaign_stat) : '')?></textarea>
<textarea id="campaign-stat-total"><?= ($campaign_stat_total ? json_encode($campaign_stat_total) : '')?></textarea>
<textarea id="campaign-stat-cats"><?= ($campaign_stat_cats ? json_encode($campaign_stat_cats) : '')?></textarea>
<div class="chart-graph-stat-info"> <div class="chart-graph-stat-info">
<h2>По заданным параметрам статистика отсутствует</h2> <h2>По заданным параметрам статистика отсутствует</h2>
...@@ -345,9 +360,39 @@ if (!$error) { ...@@ -345,9 +360,39 @@ if (!$error) {
<div class="message"></div> <div class="message"></div>
</div> </div>
<div id="chart-graph-stat"></div> <!-- График -->
<div id="chart-graph-stat" data-colors=<?= ($colors_active_lines ? json_encode($colors_active_lines) : '')?>></div>
<!-- Таблица -->
<?php ?>
<div id="table-stat" class="b-table_wrapp report">
<div class="b-content__loading"></div>
<table id="table-line" class="table table-striped">
<thead class="sortable">
<tr>
<th class="period" data-id="period">
<b class="main-cat selected" data-cat="date">Дата</b>
</th>
<?php foreach($campaign_stat_cats as $name => $cat): ?>
<th class="<?= $name ?>" data-id="<?= $name ?>">
<span style="border-color: <?= $cat['color'] ?>;">
<input type="checkbox" data-field="<?= $name ?>" checked />
</span>
<b class="cat" id="<?= $name ?>"><?= $cat['title'] ?></b>
</th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?php ?>
<div id="table-stat"></div>
</div> </div>
...@@ -357,7 +402,7 @@ if (!$error) { ...@@ -357,7 +402,7 @@ if (!$error) {
</div> </div>
</fieldset>
</form> </form>
</section> </section>
......
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