goodspeed/Cloudlog
1
0
派生 0
代码 工单 合并请求 项目 版本发布 软件包 百科 动态 Actions

added support for dark mode to some charts where it was missing

浏览代码
这个提交包含在：
Thomas Werzmirzowsky 2021-09-10 18:53:24 +02:00
父节点 7329bd2c9d
当前提交 da14135a5f
共有 7 个文件被更改，包括 317 次插入 和 159 次删除
显示统计信息 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

49
application/views/interface_assets/footer.php
查看文件

@ -6,6 +6,7 @@
<script src="<?php echo base_url(); ?>assets/js/jquery.jclock.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.jclock.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/leaflet.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/leaflet.js"></script>
<script type="text/javascript" src="<?php echo base_url() ;?>assets/js/radiohelpers.js"></script> <script type="text/javascript" src="<?php echo base_url() ;?>assets/js/radiohelpers.js"></script>
<script type="text/javascript" src="<?php echo base_url() ;?>assets/js/darkmodehelpers.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrapdialog/js/bootstrap-dialog.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/bootstrapdialog/js/bootstrap-dialog.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
/* /*
@ -985,10 +986,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
@ -1010,10 +1009,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
@ -1078,10 +1075,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
@ -1115,10 +1110,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
@ -1151,10 +1144,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
@ -1421,10 +1412,8 @@ $(document).ready(function(){
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
@ -1831,10 +1820,9 @@ function deleteQsl(id) {
'csv' 'csv'
] ]
}); });
// 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)')) { // change color of csv-button if dark mode is chosen
if (isDarkModeTheme()) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
@ -1880,13 +1868,10 @@ function deleteQsl(id) {
] ]
}); });
// using this to change color of csv-button if dark mode is chosen // change color of csv-button if dark mode is chosen
var background = $('body').css( "background-color"); if (isDarkModeTheme()) {
if (background != ('rgb(255, 255, 255)')) {
$(".buttons-csv").css("color", "white"); $(".buttons-csv").css("color", "white");
} }
</script> </script>
<?php } ?> <?php } ?>

297
application/views/statistics/index.php
查看文件

@ -1,131 +1,208 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> <script type="text/javascript">
// Load the Visualization API and the piechart package. // Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']}); google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded. // Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawModeChart); google.setOnLoadCallback(drawModeChart);
google.setOnLoadCallback(drawBandChart); google.setOnLoadCallback(drawBandChart);
google.setOnLoadCallback(drawSatChart); google.setOnLoadCallback(drawSatChart);
// Callback that creates and populates a data table, // Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and // instantiates the pie chart, passes in the data and
// draws it. // draws it.
function drawModeChart() { function drawModeChart() {
// Create our data table. // Create our data table.
var data = new google.visualization.DataTable(); var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping'); data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices'); data.addColumn('number', 'Slices');
data.addRows([ data.addRows([
['SSB', <?php echo $total_ssb; ?>], ['SSB', <?php echo $total_ssb; ?>],
['CW', <?php echo $total_cw; ?>], ['CW', <?php echo $total_cw; ?>],
['FM', <?php echo $total_fm; ?>], ['FM', <?php echo $total_fm; ?>],
['Digi', <?php echo $total_digi; ?>], ['Digi', <?php echo $total_digi; ?>],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('modechart_div'));
chart.draw(data, {width: 700, height: 440});
}
function drawBandChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php foreach($total_bands->result() as $row) { ?>
['<?php echo $row->band; ?>', <?php echo $row->count; ?>],
<?php } ?>
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('bandchart_div'));
chart.draw(data, {width: 700, height: 440});
}
function drawSatChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php foreach($total_sat->result() as $row1) { ?>
<?php if($row1->COL_SAT_NAME != null) { ?>
['<?php echo $row1->COL_SAT_NAME; ?>', <?php echo $row1->count; ?>],
<?php } ?>
<?php } ?>
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('satchart_div'));
chart.draw(data, {width: 700, height: 440});
}
</script>
<script type="text/javascript">
google.setOnLoadCallback(barchart);
function barchart() {
var data = google.visualization.arrayToDataTable([
['Year', 'QSOs'],
<?php foreach($totals_year->result() as $qso_numbers) { ?>
['<?php echo $qso_numbers->year; ?>', <?php echo $qso_numbers->total; ?>],
<?php } ?>
]); ]);
var color = ifDarkModeThemeReturn('white');
var options = { var options = {
title: 'Total QSOs Per Year', title: 'Modes',
vAxis: {title: 'QSOs', titleTextStyle: {color: 'black'}}, width: 900,
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} height: 440,
backgroundColor: getBodyBackground(),
legendTextStyle: {
color: color
},
titleTextStyle: {
fontSize: 20,
color: color
},
hAxisTextStyle: {
color: color
},
vAxisTextStyle: {
color: color
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('modechart_div'));
chart.draw(data, options);
}
function drawBandChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php foreach($total_bands->result() as $row) { ?>
['<?php echo $row->band; ?>', <?php echo $row->count; ?>],
<?php } ?>
]);
var color = ifDarkModeThemeReturn('white');
var options = {
title: 'Bands',
width: 900,
height: 440,
backgroundColor: getBodyBackground(),
legendTextStyle: {
color: color
},
titleTextStyle: {
fontSize: 20,
color: color
},
hAxisTextStyle: {
color: color
},
vAxisTextStyle: {
color: color
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('bandchart_div'));
chart.draw(data, options);
}
function drawSatChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php foreach($total_sat->result() as $row1) { ?>
<?php if($row1->COL_SAT_NAME != null) { ?>
['<?php echo $row1->COL_SAT_NAME; ?>', <?php echo $row1->count; ?>],
<?php } ?>
<?php } ?>
]);
var color = ifDarkModeThemeReturn('white');
var options = {
width: 900,
height: 440,
backgroundColor: getBodyBackground(),
legendTextStyle: {
color: color
},
titleTextStyle: {
fontSize: 20,
color: color
},
hAxisTextStyle: {
color: color
},
vAxisTextStyle: {
color: color
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('satchart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.setOnLoadCallback(barchart);
function barchart() {
var data = google.visualization.arrayToDataTable([
['Year', 'QSOs'],
<?php foreach($totals_year->result() as $qso_numbers) { ?>
['<?php echo $qso_numbers->year; ?>', <?php echo $qso_numbers->total; ?>],
<?php } ?>
]);
var color = ifDarkModeThemeReturn('white');
var options = {
title: 'Total QSOs Per Year',
width: 900,
height: 500,
backgroundColor: getBodyBackground(),
legendTextStyle: {
color: color
},
titleTextStyle: {
fontSize: 20,
color: color
},
hAxis: {
title: 'Year',
titleTextStyle: {
color: color
},
textStyle: {
color: color
}
},
vAxis: {
title: 'QSOs',
titleTextStyle: {
color: color
},
textStyle: {
color: color
}
}
}; };
var chart = new google.visualization.ColumnChart(document.getElementById('totals_year')); var chart = new google.visualization.ColumnChart(document.getElementById('totals_year'));
chart.draw(data, options); chart.draw(data, options);
} }
</script> </script>
<div class="container statistics"> <div class="container statistics">
<h2>
<?php echo $page_title; ?>
<small class="text-muted">Explore the logbook.</small>
</h2>
<h2> <br>
<?php echo $page_title; ?>
<small class="text-muted">Explore the logbook.</small>
</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">General</a>
</li>
<li class="nav-item">
<a class="nav-link" id="satellite-tab" data-toggle="tab" href="#satellite" role="tab" aria-controls="satellite" aria-selected="false">Satellites</a>
</li>
</ul>
<br> <div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="nav nav-tabs" id="myTab" role="tablist"> <div id="totals_year"></div>
<li class="nav-item"> <div id="modechart_div"></div>
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">General</a> <div id="bandchart_div"></div>
</li> </div>
<li class="nav-item">
<a class="nav-link" id="satellite-tab" data-toggle="tab" href="#satellite" role="tab" aria-controls="satellite" aria-selected="false">Satellites</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div id="totals_year" style="width: 900px; height: 500px;"></div>
<div id="modechart_div"></div>
<div id="bandchart_div"></div>
</div>
<div class="tab-pane fade" id="satellite" role="tabpanel" aria-labelledby="satellite-tab">
<div id="satchart_div"></div>
</div>
</div>
<div class="tab-pane fade" id="satellite" role="tabpanel" aria-labelledby="satellite-tab">
<div id="satchart_div"></div>
</div>
</div>
</div> </div>

41
assets/js/darkmodehelpers.js 普通文件
查看文件

@ -0,0 +1,41 @@
// use closure to cache result (color is only read once)
function _getBodyBackground() {
var result = null;
function inner() {
if (result === null) {
result = $('body').css( "background-color");
}
return result;
}
return inner;
}
getBodyBackground = _getBodyBackground();
// use closure to cache result (check it once is enough)
function _isDarkModeTheme() {
var result = null;
function inner() {
if (result === null) {
// TODO use better solution as soon as the themes know if they are dark or not
// check if background color is white
result = false;
var background = getBodyBackground();
if (background != ('rgb(255, 255, 255)')) {
result = true;
}
}
return result;
}
return inner;
}
isDarkModeTheme = _isDarkModeTheme();
function ifDarkModeThemeReturn(darkModeValue, notDarkModeValue) {
if (isDarkModeTheme()) {
return darkModeValue;
}
if (!notDarkModeValue) {
return null;
}
return notDarkModeValue;
}

10
assets/js/sections/accumulatedstatistics.js
查看文件

@ -3,11 +3,7 @@ function accumulatePlot(form) {
$(".ld-ext-right").prop('disabled', true); $(".ld-ext-right").prop('disabled', true);
// using this to change color of legend and label according to background color // using this to change color of legend and label according to background color
var background = $('body').css( "background-color"); var color = ifDarkModeThemeReturn('white', 'grey');
var color = 'grey';
if (background != ('rgb(255, 255, 255)')) {
color = 'white';
}
var award = form.awardradio.value; var award = form.awardradio.value;
var mode = form.mode.value; var mode = form.mode.value;
@ -99,9 +95,9 @@ function accumulatePlot(form) {
}, },
legend: { legend: {
labels: { labels: {
fontColor: color, fontColor: color
} }
}, }
} }
}); });
$(".ld-ext-right").removeClass('running'); $(".ld-ext-right").removeClass('running');

14
assets/js/sections/dayswithqso.js
查看文件

@ -8,6 +8,7 @@ $.ajax({
dataDxcc.push(this.Days); dataDxcc.push(this.Days);
}); });
var ctx = document.getElementById("myChartDiff").getContext('2d'); var ctx = document.getElementById("myChartDiff").getContext('2d');
var color = ifDarkModeThemeReturn('white', 'grey');
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
@ -24,10 +25,21 @@ $.ajax({
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero:true,
fontColor: color
}
}],
xAxes: [{
ticks: {
fontColor: color
} }
}] }]
}, },
legend: {
labels: {
fontColor: color
}
}
} }
}); });
} }

36
assets/js/sections/distances.js
查看文件

@ -19,26 +19,43 @@ function distPlot(form) {
if (tmp.ok == 'OK') { if (tmp.ok == 'OK') {
if (!($('#information').length > 0)) if (!($('#information').length > 0))
$("#distances_div").append('<div id="information"></div><div id="graphcontainer" style="height: 600px; margin: 0 auto"></div>'); $("#distances_div").append('<div id="information"></div><div id="graphcontainer" style="height: 600px; margin: 0 auto"></div>');
var color = ifDarkModeThemeReturn('white', 'grey');
var options = { var options = {
chart: { chart: {
type: 'column', type: 'column',
zoomType: 'xy', zoomType: 'xy',
renderTo: 'graphcontainer' renderTo: 'graphcontainer',
backgroundColor: getBodyBackground()
}, },
title: { title: {
text: 'Distance Distribution' text: 'Distance Distribution',
style: {
color: color
}
}, },
xAxis: { xAxis: {
categories: [], categories: [],
crosshair: true, crosshair: true,
type: "category", type: "category",
min:0, min:0,
max:100 max:100,
labels: {
style: {
color: color
}
}
}, },
yAxis: { yAxis: {
title: { title: {
text: '# QSOs' text: '# QSOs',
style: {
color: color
}
},
labels: {
style: {
color: color
}
} }
}, },
navigator: { navigator: {
@ -47,6 +64,9 @@ function distPlot(form) {
labels: { labels: {
formatter: function() { formatter: function() {
return this.value * '50' + ' ' + tmp.unit; return this.value * '50' + ' ' + tmp.unit;
},
style: {
color: color
} }
} }
} }
@ -63,6 +83,11 @@ function distPlot(form) {
} }
} }
}, },
legend: {
itemStyle: {
color: color
}
},
series: [] series: []
}; };
var myComments=[]; var myComments=[];
@ -77,7 +102,6 @@ function distPlot(form) {
options.xAxis.categories.push(this.dist); options.xAxis.categories.push(this.dist);
series.name = 'Number of QSOs'; series.name = 'Number of QSOs';
series.data.push(this.count); series.data.push(this.count);
}); });
options.series.push(series); options.series.push(series);

29
assets/js/sections/timeplot.js
查看文件

@ -27,14 +27,19 @@ function plotTimeplotterChart(tmp) {
$("#container").remove(); $("#container").remove();
$("#info").remove(); $("#info").remove();
$("#timeplotter_div").append('<p id="info">' + tmp.qsocount + ' contacts were plotted.</p><div id="container" style="height: 600px;"></div>'); $("#timeplotter_div").append('<p id="info">' + tmp.qsocount + ' contacts were plotted.</p><div id="container" style="height: 600px;"></div>');
var color = ifDarkModeThemeReturn('white', 'grey');
var options = { var options = {
chart: { chart: {
type: 'column', type: 'column',
zoomType: 'xy', zoomType: 'xy',
renderTo: 'container' renderTo: 'container',
backgroundColor: getBodyBackground()
}, },
title: { title: {
text: 'Time Distribution' text: 'Time Distribution',
style: {
color: color
}
}, },
xAxis: { xAxis: {
categories: [], categories: [],
@ -42,10 +47,23 @@ function plotTimeplotterChart(tmp) {
type: "category", type: "category",
min:0, min:0,
max:47, max:47,
labels: {
style: {
color: color
}
}
}, },
yAxis: { yAxis: {
title: { title: {
text: '# QSOs' text: '# QSOs',
style: {
color: color
}
},
labels: {
style: {
color: color
}
} }
}, },
rangeSelector: { rangeSelector: {
@ -60,6 +78,11 @@ function plotTimeplotterChart(tmp) {
} }
} }
}, },
legend: {
itemStyle: {
color: color
}
},
series: [] series: []
}; };
var myComments=[]; var myComments=[];