565 行
无行尾
22 KiB
JavaScript
565 行
无行尾
22 KiB
JavaScript
totalSatQsos();
|
|
totalQsosPerYear();
|
|
|
|
// Needed for sattable header fix, will be squished without
|
|
$("a[href='#satellite']").on('shown.bs.tab', function(e) {
|
|
$(".sattable").DataTable().columns.adjust();
|
|
});
|
|
|
|
$("a[href='#bandtab']").on('shown.bs.tab', function(e) {
|
|
if (!($('.bandtable').length > 0)) {
|
|
totalBandQsos();
|
|
}
|
|
});
|
|
|
|
$("a[href='#modetab']").on('shown.bs.tab', function(e) {
|
|
if (!($('.modetable').length > 0)) {
|
|
totalModeQsos();
|
|
}
|
|
});
|
|
|
|
$("a[href='#qsotab']").on('shown.bs.tab', function(e) {
|
|
if (!($('.qsotable').length > 0)) {
|
|
totalQsos();
|
|
}
|
|
});
|
|
|
|
$("a[href='#uniquetab']").on('shown.bs.tab', function(e) {
|
|
if (!($('.uniquetable').length > 0)) {
|
|
uniqueCallsigns();
|
|
}
|
|
});
|
|
|
|
function uniqueCallsigns() {
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_unique_callsigns',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
$(".unique").html(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function totalQsos() {
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_total_qsos',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
$(".qsos").html(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function totalQsosPerYear() {
|
|
// using this to change color of legend and label according to background color
|
|
var color = ifDarkModeThemeReturn('white', 'grey');
|
|
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_year',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
|
|
$(".years").append('<h2>Years</h2><div id="yearContainer"></div><div id="yearTable"></div>');
|
|
$("#yearContainer").append("<canvas id=\"yearChart\" width=\"400\" height=\"100\"></canvas>");
|
|
|
|
// appending table to hold the data
|
|
$("#yearTable").append('<table style="width:100%" class="yeartable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
|
|
'<tr>' +
|
|
'<td>#</td>' +
|
|
'<td>Year</td>' +
|
|
'<td># of QSO\'s worked </td>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody></tbody></table>');
|
|
|
|
var labels = [];
|
|
var dataQso = [];
|
|
|
|
var $myTable = $('.yeartable');
|
|
var i = 1;
|
|
|
|
// building the rows in the table
|
|
var rowElements = data.map(function (row) {
|
|
|
|
var $row = $('<tr></tr>');
|
|
|
|
var $iterator = $('<td></td>').html(i++);
|
|
var $type = $('<td></td>').html(row.year);
|
|
var $content = $('<td></td>').html(row.total);
|
|
|
|
$row.append($iterator, $type, $content);
|
|
|
|
return $row;
|
|
});
|
|
|
|
// finally inserting the rows
|
|
$myTable.append(rowElements);
|
|
|
|
$.each(data, function () {
|
|
labels.push(this.year);
|
|
dataQso.push(this.total);
|
|
});
|
|
|
|
var ctx = document.getElementById("yearChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Number of QSO\'s worked each year',
|
|
data: dataQso,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 2,
|
|
color: color
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
ticks: {
|
|
beginAtZero: true,
|
|
color: color
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
color: color
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: color
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
$('.yeartable').DataTable({
|
|
responsive: false,
|
|
ordering: false,
|
|
"scrollY": "320px",
|
|
"scrollCollapse": true,
|
|
"paging": false,
|
|
"scrollX": true,
|
|
bFilter: false,
|
|
bInfo: false
|
|
});
|
|
|
|
// using this to change color of csv-button if dark mode is chosen
|
|
var background = $('body').css("background-color");
|
|
|
|
if (background != ('rgb(255, 255, 255)')) {
|
|
$(".buttons-csv").css("color", "white");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function totalModeQsos() {
|
|
// using this to change color of legend and label according to background color
|
|
var color = ifDarkModeThemeReturn('white', 'grey');
|
|
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_mode',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
var labels = [];
|
|
var dataQso = [];
|
|
|
|
$.each(data, function () {
|
|
labels.push(this.mode.toUpperCase());
|
|
dataQso.push(this.total);
|
|
});
|
|
|
|
if (dataQso[0] === null && dataQso[1] === null && dataQso[2] === null && dataQso[3] === null) return;
|
|
|
|
$(".mode").append('<br /><div style="display: flex;" id="modeContainer"><h2>Modes</h2><div style="flex: 1;"><canvas id="modeChart" width="500" height="500"></canvas></div><div style="flex: 1;" id="modeTable"></div></div><br />');
|
|
|
|
// appending table to hold the data
|
|
$("#modeTable").append('<table style="width:100%" class=\"modetable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
|
|
'<tr>' +
|
|
'<td>#</td>' +
|
|
'<td>Mode</td>' +
|
|
'<td># of QSO\'s worked </td>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody></tbody></table>');
|
|
|
|
|
|
var $myTable = $('.modetable');
|
|
var i = 1;
|
|
|
|
// building the rows in the table
|
|
var rowElements = data.map(function (row) {
|
|
|
|
var $row = $('<tr></tr>');
|
|
|
|
var $iterator = $('<td></td>').html(i++);
|
|
var $type = $('<td></td>').html(row.mode.toUpperCase());
|
|
var $content = $('<td></td>').html(row.total);
|
|
|
|
$row.append($iterator, $type, $content);
|
|
|
|
return $row;
|
|
});
|
|
|
|
// finally inserting the rows
|
|
$myTable.append(rowElements);
|
|
|
|
const COLORS = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"]
|
|
|
|
var ctx = document.getElementById("modeChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
plugins: [ChartPieChartOutlabels],
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Number of QSO\'s worked',
|
|
data: dataQso,
|
|
backgroundColor: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"],
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
}]
|
|
},
|
|
|
|
options: {
|
|
layout: {
|
|
padding: 100
|
|
},
|
|
title: {
|
|
color: color,
|
|
fullSize: true,
|
|
},
|
|
responsive: false,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
boxWidth: 15,
|
|
color: color,
|
|
font: {
|
|
size: 14,
|
|
}
|
|
},
|
|
position: 'right',
|
|
align: "middle"
|
|
},
|
|
outlabels: {
|
|
backgroundColor: COLORS,
|
|
borderColor: COLORS,
|
|
borderRadius: 2, // Border radius of Label
|
|
borderWidth: 2, // Thickness of border
|
|
color: 'white',
|
|
stretch: 45,
|
|
padding: 0,
|
|
font: {
|
|
resizable: true,
|
|
minSize: 15,
|
|
maxSize: 25,
|
|
family: Chart.defaults.font.family,
|
|
size: Chart.defaults.font.size,
|
|
style: Chart.defaults.font.style,
|
|
lineHeight: Chart.defaults.font.lineHeight,
|
|
},
|
|
zoomOutPercentage: 100,
|
|
textAlign: 'start',
|
|
backgroundColor: COLORS,
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
// using this to change color of csv-button if dark mode is chosen
|
|
var background = $('body').css("background-color");
|
|
|
|
if (background != ('rgb(255, 255, 255)')) {
|
|
$(".buttons-csv").css("color", "white");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function totalBandQsos() {
|
|
// using this to change color of legend and label according to background color
|
|
var color = ifDarkModeThemeReturn('white', 'grey');
|
|
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_band',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
|
|
$(".band").append('<br /><div style="display: flex;" id="bandContainer"><h2>Bands</h2><div style="flex: 1;"><canvas id="bandChart" width="500" height="500"></canvas></div><div style="flex: 1;" id="bandTable"></div></div><br />');
|
|
|
|
// appending table to hold the data
|
|
$("#bandTable").append('<table style="width:100%" class="bandtable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
|
|
'<tr>' +
|
|
'<td>#</td>' +
|
|
'<td>Band</td>' +
|
|
'<td># of QSO\'s worked </td>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody></tbody></table>');
|
|
var labels = [];
|
|
var dataQso = [];
|
|
var totalQso = Number(0);
|
|
|
|
var $myTable = $('.bandtable');
|
|
var i = 1;
|
|
|
|
// building the rows in the table
|
|
var rowElements = data.map(function (row) {
|
|
|
|
var $row = $('<tr></tr>');
|
|
|
|
var $iterator = $('<td></td>').html(i++);
|
|
var $type = $('<td></td>').html(row.band);
|
|
var $content = $('<td></td>').html(row.count);
|
|
|
|
$row.append($iterator, $type, $content);
|
|
|
|
return $row;
|
|
});
|
|
|
|
// finally inserting the rows
|
|
$myTable.append(rowElements);
|
|
|
|
$.each(data, function () {
|
|
labels.push(this.band);
|
|
dataQso.push(this.count);
|
|
totalQso = Number(totalQso) + Number(this.count);
|
|
});
|
|
|
|
const COLORS = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"]
|
|
var ctx = document.getElementById("bandChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
plugins: [ChartPieChartOutlabels],
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Number of QSO\'s worked',
|
|
data: dataQso,
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
backgroundColor: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"],
|
|
borderWidth: 1,
|
|
}]
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: 100
|
|
},
|
|
title: {
|
|
fontColor: color,
|
|
fullSize: true,
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
boxWidth: 15,
|
|
color: color,
|
|
font: {
|
|
size: 14,
|
|
}
|
|
},
|
|
position: 'right',
|
|
align: "middle"
|
|
},
|
|
outlabels: {
|
|
display: function(context) { // Hide labels with low percentage
|
|
return ((context.dataset.data[context.dataIndex] / totalQso * 100) > 1)
|
|
},
|
|
backgroundColor: COLORS,
|
|
borderColor: COLORS,
|
|
borderRadius: 2, // Border radius of Label
|
|
borderWidth: 2, // Thickness of border
|
|
color: 'white',
|
|
stretch: 10,
|
|
padding: 0,
|
|
font: {
|
|
resizable: true,
|
|
minSize: 12,
|
|
maxSize: 25,
|
|
family: Chart.defaults.font.family,
|
|
size: Chart.defaults.font.size,
|
|
style: Chart.defaults.font.style,
|
|
lineHeight: Chart.defaults.font.lineHeight,
|
|
},
|
|
zoomOutPercentage: 100,
|
|
textAlign: 'start',
|
|
backgroundColor: COLORS,
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.bandtable').DataTable({
|
|
responsive: false,
|
|
ordering: false,
|
|
"scrollY": "330px",
|
|
"scrollCollapse": true,
|
|
"paging": false,
|
|
"scrollX": true,
|
|
bFilter: false,
|
|
bInfo: false,
|
|
});
|
|
|
|
// using this to change color of csv-button if dark mode is chosen
|
|
var background = $('body').css("background-color");
|
|
|
|
if (background != ('rgb(255, 255, 255)')) {
|
|
$(".buttons-csv").css("color", "white");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function totalSatQsos() {
|
|
// using this to change color of legend and label according to background color
|
|
var color = ifDarkModeThemeReturn('white', 'grey');
|
|
|
|
$.ajax({
|
|
url: base_url+'index.php/statistics/get_sat',
|
|
type: 'post',
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
$('.tabs').removeAttr('hidden');
|
|
|
|
var labels = [];
|
|
var dataQso = [];
|
|
var totalQso = Number(0);
|
|
|
|
var $myTable = $('.sattable');
|
|
var i = 1;
|
|
|
|
// building the rows in the table
|
|
var rowElements = data.map(function (row) {
|
|
|
|
var $row = $('<tr></tr>');
|
|
|
|
var $iterator = $('<td></td>').html(i++);
|
|
var $type = $('<td></td>').html(row.sat);
|
|
var $content = $('<td></td>').html(row.count);
|
|
|
|
$row.append($iterator, $type, $content);
|
|
|
|
return $row;
|
|
});
|
|
|
|
// finally inserting the rows
|
|
$myTable.append(rowElements);
|
|
|
|
$.each(data, function () {
|
|
labels.push(this.sat);
|
|
dataQso.push(this.count);
|
|
totalQso = Number(totalQso) + Number(this.count);
|
|
});
|
|
|
|
const COLORS = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"]
|
|
var ctx = document.getElementById("satChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
plugins: [ChartPieChartOutlabels],
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
label: 'Number of QSO\'s worked',
|
|
data: dataQso,
|
|
backgroundColor: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499"],
|
|
borderWidth: 1,
|
|
labels: labels,
|
|
}]
|
|
},
|
|
|
|
options: {
|
|
layout: {
|
|
padding: 100
|
|
},
|
|
title: {
|
|
fontColor: color,
|
|
fullSize: true,
|
|
},
|
|
responsive: false,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
boxWidth: 15,
|
|
color: color,
|
|
font: {
|
|
size: 14,
|
|
}
|
|
},
|
|
position: 'right',
|
|
align: "middle"
|
|
},
|
|
outlabels: {
|
|
display: function(context) { // Hide labels with low percentage
|
|
return ((context.dataset.data[context.dataIndex] / totalQso * 100) > 1)
|
|
},
|
|
backgroundColor: COLORS,
|
|
borderColor: COLORS,
|
|
borderRadius: 2, // Border radius of Label
|
|
borderWidth: 2, // Thickness of border
|
|
color: 'white',
|
|
stretch: 10,
|
|
padding: 0,
|
|
font: {
|
|
resizable: true,
|
|
minSize: 12,
|
|
maxSize: 25,
|
|
family: Chart.defaults.font.family,
|
|
size: Chart.defaults.font.size,
|
|
style: Chart.defaults.font.style,
|
|
lineHeight: Chart.defaults.font.lineHeight,
|
|
},
|
|
zoomOutPercentage: 100,
|
|
textAlign: 'start',
|
|
backgroundColor: COLORS,
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// using this to change color of csv-button if dark mode is chosen
|
|
var background = $('body').css("background-color");
|
|
|
|
if (background != ('rgb(255, 255, 255)')) {
|
|
$(".buttons-csv").css("color", "white");
|
|
}
|
|
|
|
$('.sattable').DataTable({
|
|
responsive: false,
|
|
ordering: false,
|
|
"scrollY": "330px",
|
|
"scrollX": true,
|
|
"ScrollCollapse": true,
|
|
"paging": false,
|
|
bFilter: false,
|
|
bInfo: false,
|
|
});
|
|
}
|
|
}
|
|
});
|
|
} |