192 lines
4.8 KiB
PHP
192 lines
4.8 KiB
PHP
<div class="admin-form theme-primary">
|
|
<div class="panel heading-border panel-primary">
|
|
<div class="panel-body">
|
|
<figure class="highcharts-figure">
|
|
<div id="container"></div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="admin-form theme-primary">
|
|
<div class="panel heading-border panel-primary">
|
|
<div class="panel-body">
|
|
<table class="table" id="products">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Wyświetlenia</th>
|
|
<th scope="col">Kliknięcia</th>
|
|
<th scope="col">CTR</th>
|
|
<th scope="col">Koszt</th>
|
|
<th scope="col">Konwersje</th>
|
|
<th scope="col">Wartość konwersji</th>
|
|
<th scope="col">ROAS</th>
|
|
<th scope="col">Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$( function() {
|
|
var client_id = <?= $this -> client_id;?>;
|
|
var product_id = <?= $this -> product_id;?>;
|
|
|
|
table = $( '#products' ).DataTable();
|
|
table.destroy();
|
|
|
|
new DataTable( '#products', {
|
|
ajax: {
|
|
type: 'POST',
|
|
url: '/products/get_product_history_table/client_id=' + client_id + '&product_id=' + product_id,
|
|
},
|
|
processing: true,
|
|
serverSide: true,
|
|
searching: false,
|
|
columns: [{
|
|
width: '100px',
|
|
orderable: false
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'impressions'
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'clicks'
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'ctr',
|
|
className: "dt-type-numeric"
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'cost',
|
|
className: "dt-type-numeric"
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'conversions'
|
|
},
|
|
{
|
|
width: '175px',
|
|
name: 'conversions_value',
|
|
className: "dt-type-numeric"
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'roas',
|
|
className: "dt-type-numeric",
|
|
orderable: false
|
|
},
|
|
{
|
|
width: '100px',
|
|
name: 'date_add'
|
|
},
|
|
],
|
|
order: [
|
|
[ 0, false],
|
|
[ 8, 'desc']
|
|
]
|
|
});
|
|
|
|
$.ajax({
|
|
url: '/products/get_product_history_table_chart/',
|
|
method: 'POST',
|
|
data: {
|
|
client_id: client_id,
|
|
product_id: product_id,
|
|
},
|
|
success: function(response) {
|
|
const parsedData = JSON.parse(response);
|
|
|
|
let plotLines = [];
|
|
|
|
parsedData.comments.forEach(function(comment) {
|
|
plotLines.push({
|
|
color: '#333333',
|
|
width: 1,
|
|
value: parsedData.dates.indexOf(comment.date_add.split(' ')[0]),
|
|
dashStyle: 'Solid',
|
|
label: {
|
|
text: comment.comment,
|
|
align: 'left',
|
|
style: {
|
|
color: '#333333',
|
|
fontSize: '14px'
|
|
}
|
|
},
|
|
zIndex: 5
|
|
});
|
|
});
|
|
|
|
Highcharts.chart('container', {
|
|
title: {
|
|
text: ``,
|
|
},
|
|
subtitle: {
|
|
text: ``,
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: ''
|
|
},
|
|
},
|
|
xAxis: {
|
|
categories: parsedData.dates,
|
|
labels: {
|
|
style: {
|
|
fontSize: '14px'
|
|
},
|
|
formatter: function() {
|
|
var date = new Date(Date.parse(this.value));
|
|
var day = date.getDate();
|
|
var month = date.getMonth() + 1;
|
|
var year = date.getFullYear();
|
|
|
|
if (day === 1 || this.isLast) {
|
|
return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
plotLines: plotLines
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
itemStyle: {
|
|
fontSize: '14px'
|
|
}
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
label: {
|
|
connectorAllowed: false
|
|
},
|
|
pointStart: 0
|
|
},
|
|
},
|
|
series: parsedData.chart_data,
|
|
tooltip: {
|
|
style: {
|
|
fontSize: '14px'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
console.error('Error AJAX:', textStatus, errorThrown);
|
|
}
|
|
})
|
|
})
|
|
</script>
|