Форматирование таблицы, колонка содержимого корзины заказа

parent 2248dbff
...@@ -44,9 +44,9 @@ return [ ...@@ -44,9 +44,9 @@ return [
'type' => 'feed_transactions', 'type' => 'feed_transactions',
'fields' => ['Views','Clicks','Orders','OrderSum'], 'fields' => ['Views','Clicks','Orders','OrderSum'],
'cats' => [ 'cats' => [
'Timestamp' => 'Дата и время', 'Timestamp' => 'Время<br />Дата',
'Basket' => 'Состав корзины',
'OrderSum' => 'Сумма', 'OrderSum' => 'Сумма',
'BasketCount' => 'Количество товаров'
] ]
/* /*
$cats => [ $cats => [
......
...@@ -163,30 +163,146 @@ input[type="checkbox"] ...@@ -163,30 +163,146 @@ input[type="checkbox"]
margin-top: 30px; margin-top: 30px;
} }
.table.table-striped.admin .table.table-striped.admin.common
{ {
font-family: monospace; font-family: monospace;
} }
.table.table-striped.admin.transaction
{
font-size: 13px;
}
.table.table-striped.admin.transaction thead
{
color: #337ab7;
line-height: 14px;
font-weight: bold;
}
table.table-striped.admin.transaction tbody
{
font-size: 12px;
}
.table.table-striped.admin thead.metric.sortable tr b .table.table-striped.admin thead.metric.sortable tr b
{ {
cursor: pointer; cursor: pointer;
} }
.table.table-striped.admin thead.metric.sortable tr b.selected .table.table-striped.admin thead.metric.sortable tr b.not-sorted
{
cursor: default;
}
.table.table-striped.admin.common thead.metric.sortable tr b.selected
{ {
color: #2CA02C; color: #2CA02C;
} }
.table.table-striped.admin thead.metric.sortable tr span .table.table-striped.admin.common thead.metric.sortable tr span
{ {
display: inline-block; display: inline-block;
border-bottom: 2px solid red; border-bottom: 2px solid red;
} }
.table.table-striped.admin.transaction thead tr th.OrderSum
{
text-align: right;
}
/* .b-basket-content */
.table.table-striped.admin.transaction thead tr th.period
{
width: 100px;
}
.table.table-striped.admin thead tr th.Timestamp
{
width: 100px;
line-height: 14px;
}
.table.table-striped.admin tbody td.Timestamp
{
line-height: 13px;
}
.table.table-striped.admin thead tr th.Basket
{
/*width: 500px;*/
line-height: 14px;
}
.table.table-striped.admin thead tr th.Basket .basket-link,
.table.table-striped.admin thead tr th.Basket .quantity,
.table.table-striped.admin thead tr th.Basket .price
{
display: inline-block;
}
.table.table-striped.admin thead tr th.Basket .basket-link
{
width: 520px;
}
.table.table-striped.admin thead tr th.Basket .quantity
{
width: 60px;
}
.table.table-striped.admin.transaction thead tr th.OrderSum
{
width: 100px;
}
.table.table-striped.admin td.Basket
{
padding: 2px;
}
.table.table-striped.admin.transaction td.OrderSum
{
font-weight: bold;
text-align: right;
}
.b-basket-content
{
margin: 4px;
padding: 2px;
/*max-width: 450px;*/
font-size: 12px;
line-height: 14px;
}
.b-basket-content .basket-link
{
display: inline-block;
width: 540px;
}
.b-basket-content .quantity
{
display: inline-block;
width: 50px;
}
.b-basket-content .price
{
display: inline-block;
width: 100px;
}
/*
.table.table-striped.admin thead.metric tr b .arrow .table.table-striped.admin thead.metric tr b .arrow
{ {
display: none; display: none;
...@@ -203,4 +319,4 @@ input[type="checkbox"] ...@@ -203,4 +319,4 @@ input[type="checkbox"]
{ {
display: none; display: none;
} }
*/
\ No newline at end of file \ No newline at end of file
...@@ -6,16 +6,42 @@ $(document).ready(function(){ ...@@ -6,16 +6,42 @@ $(document).ready(function(){
$tableBody = $table.find('tbody').first(), $tableBody = $table.find('tbody').first(),
activeLines = [], activeLines = [],
currentActiveLine, currentActiveLine,
dataTable; dataTable,
currencyFields = ['admoney', 'salemoney', 'usdollarmoney', 'localmoney', 'AdMoney', 'OrderSum'],
notFormatFields = ['Timestamp', 'Basket'];
// Шаблон содержимого ячейки Basket
var templateBasketContent = _.template('\n'+
' <div class="b-basket-content"> \n' +
' <table> \n' +
' <tbody> \n' +
' <% _.each(data, function(item) { %> \n' +
' <tr> \n' +
' <td><a class="basket-link" href="<%=item.URL %>" target="_blank"><%=item.Title %></a></td> \n' +
' <td><span class="quantity"><%=item.Quantity %></span></td> \n' +
' <td><span class="price"><%=item.Price %> грн.</span></td> \n' +
' </tr> \n' +
' <% }) %> \n' +
' </tbody> \n' +
' </table> \n' +
' </div> \n' +
'');
var templateTimestampContent = _.template('\n'+
' <span style="font-weight: bold;"><%=data.time %></span><br /> \n' +
' <span><%=data.date %></span><br /> \n' +
'');
function valueFormat(value) function valueFormat(value)
{ {
var var
currencyFields = ['admoney', 'salemoney', 'usdollarmoney', 'localmoney', 'AdMoney', 'OrderSum'],
nonFormatFields = ['Timestamp'],
isCurrencyValue = currencyFields.indexOf(currentActiveLine) > -1, isCurrencyValue = currencyFields.indexOf(currentActiveLine) > -1,
isNonFormatValue = nonFormatFields.indexOf(currentActiveLine) > -1, isNonFormatValue = notFormatFields.indexOf(currentActiveLine) > -1,
//format = (isCurrencyValue) ? d3.format(',.2f') : d3.format(',.0f');
format = (isCurrencyValue) ? d3.format(',.0f') : d3.format(',.0f'); format = (isCurrencyValue) ? d3.format(',.0f') : d3.format(',.0f');
if (isNonFormatValue) { if (isNonFormatValue) {
...@@ -27,25 +53,23 @@ $(document).ready(function(){ ...@@ -27,25 +53,23 @@ $(document).ready(function(){
} else { } else {
return format(value); return format(value);
} }
} }
function RenderInterval(dataLineChartStat) function RenderInterval(dataLineChartStat)
{ {
var dataPeriod = dataLineChartStat['period']; var dataPeriod = dataLineChartStat['period'];
var notSumFields = ['Timestamp'];
dataTable = dataLineChartStat; dataTable = dataLineChartStat;
// Добавляем строку "Итого": // Добавляем строку "Итого":
if (!dataLineChartStat.report == 'transaction') {
$row = $('<tr style="font-weight: bold;">'); $row = $('<tr style="font-weight: bold;">');
$row.append($('<td>').html("Итого")); $row.append($('<td>').html("Итого"));
activeLines.forEach(function(item){ activeLines.forEach(function(item){
currentActiveLine = item; currentActiveLine = item;
var isNotSumValue = notSumFields.indexOf(currentActiveLine) > -1; var isNotSumValue = notFormatFields.indexOf(currentActiveLine) > -1;
if (!isNotSumValue) { if (!isNotSumValue) {
var totalValue = 0; var totalValue = 0;
...@@ -60,10 +84,12 @@ $(document).ready(function(){ ...@@ -60,10 +84,12 @@ $(document).ready(function(){
}); });
$row.appendTo($tableContent); $row.appendTo($tableContent);
}
// Сортировка строк в таблице: // Сортировка строк в таблице:
var var
sortField = false,
$selectedField = $('#table-line thead th b.selected'), $selectedField = $('#table-line thead th b.selected'),
sortField = false,
isDesc = true; isDesc = true;
if ($selectedField.length > 0) { if ($selectedField.length > 0) {
...@@ -73,7 +99,7 @@ $(document).ready(function(){ ...@@ -73,7 +99,7 @@ $(document).ready(function(){
if (sortField) { if (sortField) {
//console.log('AAA sortField = ', sortField); //console.log('AAA sortField = ', sortField, ' isDesc = ', isDesc);
//console.log('AAA dataTable = ', dataTable); //console.log('AAA dataTable = ', dataTable);
var dataTableForSort = []; var dataTableForSort = [];
...@@ -82,36 +108,60 @@ $(document).ready(function(){ ...@@ -82,36 +108,60 @@ $(document).ready(function(){
var dataTableSortItem = {}; var dataTableSortItem = {};
dataTableSortItem['period'] = dataTableItem; dataTableSortItem['period'] = dataTableItem;
activeLines.forEach(function(activeLine){ activeLines.forEach(function(activeLine){
currentActiveLine = activeLine; dataTableSortItem[activeLine] = dataTable[activeLine][ind];
dataTableSortItem[activeLine] = valueFormat(dataTable[activeLine][ind]);
}); });
dataTableForSort.push(dataTableSortItem); dataTableForSort.push(dataTableSortItem);
}); });
//console.log('AAA dataTableForSort 111= ', dataTableForSort);
dataTableForSort.sort(function(a,b){ dataTableForSort.sort(function(a,b){
if (sortField == 'Timestamp') {
var
aT = new Date(a[sortField]),
bT = new Date(b[sortField]);
return (isDesc) ? bT-aT : aT-bT;
} else {
if (isDesc) { if (isDesc) {
return b[sortField]-a[sortField]; return b[sortField]-a[sortField];
} else { } else {
return a[sortField]-b[sortField]; return a[sortField]-b[sortField];
} }
}
}); });
//console.log('AAA dataTableForSort = ', dataTableForSort); //console.log('AAA dataTableForSort = ', dataTableForSort);
dataTableForSort.forEach(function(item){ dataTableForSort.forEach(function(item){
$row = $('<tr>'); $row = $('<tr>');
$row.append($('<td>').html(item['period'])); $row.append($('<td>').html(item['period']));
activeLines.forEach(function(line){ activeLines.forEach(function(line){
$row.append($('<td>').html(item[line])); if (line == 'Basket') {
$row.append($('<td class="'+ line +'">').append(templateBasketContent({data: item[line]})));
} else if (line == 'Timestamp') {
var
dateTimeValue = item[line].split(' '),
dateVal = dateTimeValue[0],
timeVal = dateTimeValue[1].split(':'),
timeValCorrected = timeVal[0]+':'+timeVal[1];
$row.append($('<td class="'+ line +'">').append(templateTimestampContent({
data: {date: dateVal, time: timeValCorrected}
})));
} else {
currentActiveLine = line;
$row.append($('<td class="'+ line +'">').html(valueFormat(item[line])));
}
}); });
$row.appendTo($tableContent); $row.appendTo($tableContent);
}); });
} else { } else {
for(var i = dataPeriod.length-1; i >= 0; i--) { for(var i = dataPeriod.length-1; i >= 0; i--) {
//for(var i = 0; i < dataPeriod.length; i++) {
var var
date = dataPeriod[i], date = dataPeriod[i],
...@@ -125,7 +175,21 @@ $(document).ready(function(){ ...@@ -125,7 +175,21 @@ $(document).ready(function(){
$row = $('<tr>'); $row = $('<tr>');
$row.append($('<td>').html(date)); $row.append($('<td>').html(date));
activeLines.forEach(function(item){ activeLines.forEach(function(item){
$row.append($('<td>').html(values[item])); if (item == 'Basket') {
$row.append($('<td class="'+ item +'">').append(templateBasketContent({data: values[item]})));
} else if (item == 'Timestamp') {
var
dateTimeValue = values[item].split(' '),
dateVal = dateTimeValue[0],
timeVal = dateTimeValue[1].split(':'),
timeValCorrected = timeVal[0]+':'+timeVal[1];
$row.append($('<td class="'+ item +'">').append(templateTimestampContent({
data: {date: dateVal, time: timeValCorrected}
})));
} else {
$row.append($('<td class="'+ item +'">').html(values[item]));
}
}); });
$row.appendTo($tableContent); $row.appendTo($tableContent);
} }
...@@ -143,8 +207,8 @@ $(document).ready(function(){ ...@@ -143,8 +207,8 @@ $(document).ready(function(){
activeLines.push($(this).attr('id')); activeLines.push($(this).attr('id'));
}); });
console.log('AAA TableStat render: ', dataLineChartStat); //console.log('AAA TableStat render: ', dataLineChartStat);
console.log('AAA activeLines: ', activeLines); //console.log('AAA activeLines: ', activeLines);
dataTable = {}; dataTable = {};
activeLines.forEach(function(item){ activeLines.forEach(function(item){
......
...@@ -141,7 +141,14 @@ $(document).ready(function(){ ...@@ -141,7 +141,14 @@ $(document).ready(function(){
// Сортировка по колонкам внутри таблицы: // Сортировка по колонкам внутри таблицы:
var $tableHeadCols = $('#table-line thead.metric.sortable th b'); var $tableHeadCols = $('#table-line thead.metric.sortable th b');
$tableHeadCols.on('click', function(){ $tableHeadCols.on('click', function(){
var $this = $(this); var
$this = $(this),
$parent = $this.parent(),
categoryName = $parent.data('id');
if (['period', 'Basket'].indexOf(categoryName)>-1) {
return false;
}
$tableHeadCols.removeClass('selected'); $tableHeadCols.removeClass('selected');
$this.addClass('selected').toggleClass('desc'); $this.addClass('selected').toggleClass('desc');
......
...@@ -65,7 +65,6 @@ class Statistics ...@@ -65,7 +65,6 @@ class Statistics
); );
} }
//return $dataRequest; //return $dataRequest;
$stats = $this->apiRequest($dataRequest); $stats = $this->apiRequest($dataRequest);
//return $stats; //return $stats;
...@@ -82,6 +81,7 @@ class Statistics ...@@ -82,6 +81,7 @@ class Statistics
$dataStats = array(); $dataStats = array();
$dataStats['report'] = $report_type; $dataStats['report'] = $report_type;
// Данные для отчета 'common':
if ($report_type == 'common') { if ($report_type == 'common') {
$period = array(); $period = array();
...@@ -228,32 +228,20 @@ class Statistics ...@@ -228,32 +228,20 @@ class Statistics
$dataStats['period'] = $period; $dataStats['period'] = $period;
} }
// Данные для отчета 'transaction':
if ($report_type == 'transaction') { if ($report_type == 'transaction') {
$period = array(); $dataStats['period'] = [];
//$data = [];
$dataStats['Timestamp'] = []; $dataStats['Timestamp'] = [];
$dataStats['OrderSum'] = []; $dataStats['OrderSum'] = [];
$dataStats['BasketCount'] = []; $dataStats['Basket'] = [];
foreach ($stats['data'] as $item) { foreach ($stats['data'] as $item) {
$period[] = $item['TransactionID']; $dataStats['period'][] = $item['ForeignID'];
$dataStats['Timestamp'][] = $item['Timestamp']; $dataStats['Timestamp'][] = $item['Timestamp'];
$dataStats['OrderSum'][] = $item['OrderSum']; $dataStats['OrderSum'][] = $item['OrderSum'];
$dataStats['BasketCount'][] = count($item['Basket']); $dataStats['Basket'][] = $item['Basket'];
/*
$data[] = array(
'Timestamp' => $item['Timestamp'],
'OrderSum' => $item['OrderSum'],
'BasketCount' => count($item['Basket']),
);
*/
} }
$dataStats['period'] = $period;
//$dataStats['data'] = $data;
} }
$stats = $dataStats; $stats = $dataStats;
......
...@@ -164,25 +164,31 @@ if (!$error) { ...@@ -164,25 +164,31 @@ if (!$error) {
<?php /* Таблица */ ?> <?php /* Таблица */ ?>
<div id="table-stat" class="b-table_wrapp"> <div id="table-stat" class="b-table_wrapp">
<div class="b-content__loading"></div> <div class="b-content__loading"></div>
<table id="table-line" class="table table-striped admin"> <table id="table-line" class="table table-striped admin <?= $current_report ?>">
<thead class="metric sortable"> <thead class="metric sortable">
<tr> <tr>
<th> <th class="period" data-id="period">
<?php if($current_report == 'common'): ?> <?php if($current_report == 'common'): ?>
<b class="main-cat date selected"><?= _t('Дата')?></b> <b class="main-cat date selected"><?= _t('Дата')?></b>
<?php /* ?>/ <b class="main-cat campaign"><?= _t('Кампания')?></b><?php */ ?> <?php /* ?>/ <b class="main-cat campaign"><?= _t('Кампания')?></b><?php */ ?>
<?php else: ?> <?php else: ?>
<b class="main-cat date selected"><?= _t('Транзакция')?></b> <b class="main-cat date selected not-sorted"><?= _t('#OrderID')?></b>
<?php endif; ?> <?php endif; ?>
</th> </th>
<?php foreach($report_cats as $name => $title): ?> <?php foreach($report_cats as $name => $title): ?>
<th> <th class="<?= $name ?>" data-id="<?= $name ?>">
<?php if ($name == 'Basket'): ?>
<b class="cat not-sorted" id="<?= $name ?>"><?= _t($title)?></b><br />
<b class="basket-link not-sorted">Товар</b> <b class="quantity not-sorted">Кол-во</b> <b class="price not-sorted">Цена</b>
<?php else: ?>
<?php if ($current_report == 'common'): ?> <?php if ($current_report == 'common'): ?>
<span style="border-color: <?= $colors_active_lines[$name] ?>;"> <span style="border-color: <?= $colors_active_lines[$name] ?>;">
<input type="checkbox" data-field="<?= $name ?>" checked /> <input type="checkbox" data-field="<?= $name ?>" checked />
</span> </span>
<?php endif; ?> <?php endif; ?>
<b class="cat" id="<?= $name ?>"><?= _t($title)?><!--<b class="arrow asc">&and;</b><b class="arrow desc">&or;</b>--></b> <b class="cat" id="<?= $name ?>"><?= _t($title)?><?php if ($current_report == 'transaction'): ?><b class="arrow asc">&#9650;</b><b class="arrow desc">&#9660;</b><?php endif; ?></b>
<?php endif; ?>
</th> </th>
<?php endforeach; ?> <?php endforeach; ?>
</tr> </tr>
......
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