hamradio/spiderweb
1
0
Fork 0
mirror of https://github.com/coulisse/spiderweb.git synced 2024-09-21 07:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor of plot code

Browse Source
This commit is contained in:
coulisse 2023-01-27 19:47:07 +01:00
parent 01ed82c4ee
commit f88ef7ed54
15 changed files with 762 additions and 787 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/CHANGELOG.md
View File

@ -4,6 +4,7 @@ Release: v2.4.1.2
- Changed cache-control header
- Fixed Layout scrolling (SEO)
- First time spot load: not show cyan background
- refactor of the plot code
___

5
scripts/dxcluster_schema_for_test.sh
View File

@ -23,7 +23,8 @@ db_insert () {
curr_epoch_time=$(date +%s)
#timestamp=$(shuf -i 1673759569-1673763169 -n 1)
epoch_start=$((${curr_epoch_time}-3600))
epoch_start=$((${curr_epoch_time}-3600*24*365*2))
#epoch_start=$((${curr_epoch_time}-3600))
echo ${curr_epoch_time}
echo ${epoch_start}
timestamp=$(shuf -i ${epoch_start}-${curr_epoch_time} -n 1)
@ -40,7 +41,7 @@ db_insert () {
sudo mysql -uroot dxcluster -e "INSERT INTO spot VALUES (${i},${freq},'${callsign}',${timestamp},'DUMMY TEST','IU1BOW',${spotdxcc},${spotterdxcc},'IU1BOW-2',${spotitu},${spotcq},${spotteritu},${spottercq},NULL,NULL,'5.198.229.129');"
#sudo mysql -uroot dxcluster -e "INSERT INTO spot VALUES (${i},${freq},'${callsign}',UNIX_TIMESTAMP(),'DUMMY TEST','IU1BOW',${spotdxcc},${spotterdxcc},'IU1BOW-2',${spotitu},${spotcq},${spotteritu},${spottercq},NULL,NULL,'5.198.229.129');"
sleep 5
#sleep 5
p=$(( ${i}*100/${n} ))
echo -ne ${p}'% \r'
done

756
static/js/dev/plot.js Normal file
View File

@ -0,0 +1,756 @@
class plot_base {
//refresh = function(){
refresh() {
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id,end_point) {
// Initialize the echarts instance based on the prepared dom
let chartDom = document.getElementById(chart_id);
this.end_point=end_point;
this.myChart = echarts.init(chartDom);
//resize
let chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
});
}
} //end class
/********************************************************************************
* javascript used to build band_activity chart
* ******************************************************************************/
class band_activity extends plot_base {
/**
* refresh and populate chart
*
* @param {string} region This is the continent name (EU,AF,NA...) of the selected
*/
//refresh = function(this.myChart, end_point, region, bands, continents){
//refresh = function(region){
refresh (region) {
super.refresh();
console.log('refresh band_activity');
if (typeof region !== 'undefined') {
this.selectedContinent = region;
}
// Asynchronous Data Loading
fetch(this.end_point+'?continent='+this.selectedContinent)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var dataMap=Array.from(data['band activity']).map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
//options
this.myChart.setOption({
tooltip: {
position: 'top',
formatter: function (p) {
var format = p.seriesName +' on ' + p.name +' band: '+'<strong>'+p.data[2]+'</strong>';
return format;
}
},
title: {
text:'Band activity',
subtext: last_refresh,
top: 'top',
left:'left'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
right: 'right',
top : 'bottom',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
height: '80%',
left: 25,
top: 50,
right: 60,
bottom: 0,
show: true,
backgroundColor: 'rgb(255, 255, 255)',
},
xAxis: {
type: 'category',
data: this.bands,
axisTick: {
show: true,
},
axisLine: {
show: false,
},
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: this.continents,
axisTick: {
show: true,
},
axisLine: {
show: false,
},
splitArea: {
show: true
}
},
visualMap: {
calculable: true,
orient: 'vertical',
right: 'right',
top: 'center',
min: 0,
max: 30,
inRange : {
color: ['#ffffe6','yellow','red']
}
},
series: [
{
name: 'Spots',
type: 'heatmap',
data: dataMap,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(100, 0, 0, 0.5)'
}
}
}
]
});
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {integer} refresh_time Time to refesh chart
* @param {Json} cont_cq The continent list( EU, SA, ...)
* @param {Json} band_freq The frequency band list (160, 80, 60... UHF, SHF)
*/
constructor(chart_id, end_point, cont_cq, band_freq) {
super(chart_id,end_point);
//populate continents array
var continents=[];
cont_cq.forEach(function myFunction(item, index) {
continents[index]=item['id'];
});
//populate bands array
var bands=[];
band_freq.forEach(function myFunction(item, index) {
bands[index]=item['id'];
});
//managing region
var selectedContinent=getCookie('user_region');
var selectedContinent_desc=getCookie('user_region_desc');
if (!selectedContinent) {
selectedContinent='EU';
selectedContinent_desc='Europe';
setCookie('user_region',selectedContinent,60);
setCookie('user_region_desc',selectedContinent_desc,60);
}
selectElement('continentInput', selectedContinent);
addEventHandler(document.getElementById('continentInput'), 'change', function() {
selectedContinent=this.value;
selectedContinent_desc=this.options[this.selectedIndex].text;
setCookie('user_region',selectedContinent,60);
setCookie('user_region_desc',selectedContinent_desc,60);
plot_ba.refresh(selectedContinent);
setText('txt_continent','\xa0 Based on DX SPOTS from stations in '+ selectedContinent_desc +' during the last 15 minutes, displayed by Continent and Band');
});
setText('txt_continent','\xa0 Based on DX SPOTS from stations in '+ selectedContinent_desc +' during the last 15 minutes, displayed by Continent and Band');
this.refresh(selectedContinent);
}
}
/********************************************************************************
* javascript used to build world dx spots live
* ******************************************************************************/
class world_dx_spots_live extends plot_base {
/**
* refresh and populate chart
*
*/
refresh() {
super.refresh();
console.log('refresh world_dx_spots_live');
// Asynchronous Data Loading
fetch(this.end_point)
.then((response) => response.json())
.then((data) => {
fetch('world.json')
.then(response => response.text())
.then(geoJson => {
var last_refresh=get_last_refresh(data);
var dataMap=[];
data['world_dx_spots_live'].forEach(function myFunction(item, index) {
//lon, lat, number of qso
dataMap.push({'value':[item['lat'],item['lon'],item['count']]});
});
this.myChart.hideLoading();
echarts.registerMap('WR', geoJson);
this.myChart.setOption( {
visualMap: {
show: false,
min: 0,
max: 30,
inRange: {
symbolSize: [5, 20]
}
},
geo: {
type: 'map',
map: 'WR',
roam: true,
zoom: 1.2,
aspectScale: 1,
layoutCenter: ['50%', '54%'],
layoutSize: '100%',
itemStyle: {
normal: {
areaColor: '#91cc75',
borderColor: '#111'
},
emphasis: {
areaColor: '#3ba272' //3ba272 91cc75
}
},
label: {
emphasis: {
show: false
}
},
},
tooltip: {
trigger: 'item',
formatter: function(val) {
var out='Spots: <STRONG>'+ val.value[2] +'</STRONG>';
return out;
}
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
show: false
},
title: {
text: 'World DX SPOTS in last hour',
subtext: last_refresh,
top: 'top',
right:'right',
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data:dataMap,
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
normal: {
color: '#fc8452',
borderColor: '#fa0a0a',
}
},
/*
symbolSize: function (val) {
return val[2] / 4;
},
*/
}
]
}); //end options
}
);
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id, end_point) {
super(chart_id,end_point);
this.refresh();
}
}
/********************************************************************************
* javascript used to build band/hour chart
* ******************************************************************************/
class hour_band extends plot_base {
/**
* refresh and populate chart
*
* @param {Json} bands The frequency band list (160, 80, 60... UHF, SHF)
*/
refresh() {
// Asynchronous Data Loading
super.refresh();
console.log ('refresh hour_band');
fetch(this.end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the dat
var last_refresh=get_last_refresh(data);
//set hour indicator names
var hour_indicators=[];
for (let i = 23; i > -1; i--) {
var hour_name={};
var s=i.toString();
hour_name['name']=s;
hour_indicators.push(hour_name);
}
//cycling whithin each bands and hours
var dataMap=[];
this.bands.forEach(band_item => {
var qso=[];
for (let i = 23; i > -1; i--) {
try {
var value=data['hour_band'][band_item][i];
if (typeof value == 'undefined') {
value = 0;
}
qso.push(value);
} catch (TypeError) {
//TODO
}
}
var tot={'value':qso,'name':band_item};
dataMap.push(tot);
});
//options
this.myChart.setOption({
legend: {
orient: 'horizontal',
left: 'left',
bottom: 'bottom'
},
title: {
text: 'DX SPOTS per hour in last month',
subtext: last_refresh,
top: 'top',
right: 'right',
},
tooltip: {
trigger: 'axis',
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
radar: {
shape: 'circle',
//startAngle: 285, //0 on left side
startAngle: 105, //0 on top
indicator: hour_indicators,
center: ['47%', '46%'],
axisName: {
color: 'rgb(80,80,80)',
},
},
series: [
{
lineStyle: {
width: 2
},
type: 'radar',
symbol: 'none',
data: dataMap,
tooltip: {
trigger: 'item',
formatter: (params) => {
return 'Band: '+params.name;
},
},
emphasis: {
lineStyle: {
width: 4
}
},
}
]
});
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {Json} band_freq The frequency band list (160, 80, 60... UHF, SHF)
*/
constructor(chart_id,end_point,band_freq) {
// Initialize the echarts instance based on the prepared dom
super(chart_id,end_point);
//populate bands array
let lcl_bands=[];
band_freq.forEach(function myFunction(item, index) {
lcl_bands[index]=item['id'];
});
this.bands = lcl_bands;
this.refresh();
}
}
/********************************************************************************
* javascript used to build dx spots per month chart
* ******************************************************************************/
class dx_spots_per_month extends plot_base {
/**
* refresh and populate chart
*/
refresh() {
console.log('refresh dx_spots_per_month');
// Asynchronous Data Loading
//$.getJSON(end_point).done(function(data) {
fetch(this.end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var year_now = new Date().getFullYear();
var year_0 = (year_now - 0).toString();
var year_1 = (year_now - 1).toString();
var year_2 = (year_now - 2).toString();
var months_name = get_months_names();
var dataMap_year_0=[];
var dataMap_year_1=[];
var dataMap_year_2=[];
for (let i = 1; i < 13; i++) {
dataMap_year_0.push(data.spots_per_month[i].year_0);
dataMap_year_1.push(data.spots_per_month[i].year_1);
dataMap_year_2.push(data.spots_per_month[i].year_2);
}
//options
this.myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: 'DX SPOTS per month',
subtext: last_refresh,
top: 'top',
left:'left'
},
legend: {
data: [year_2, year_1, year_0],
bottom: 'bottom'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: months_name
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (function (value){
return format_u_k_m(value);
})
}
}
],
series: [
{
name: year_2,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: dataMap_year_2
},
{
name: year_1,
type: 'bar',
emphasis: {
focus: 'series'
},
data: dataMap_year_1
},
{
name: year_0,
type: 'bar',
emphasis: {
focus: 'series'
},
data: dataMap_year_0
},
]
});
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id, end_point) {
super(chart_id,end_point);
this.refresh();
}
}
/********************************************************************************
* javascript used to build dx spots trend
* ******************************************************************************/
class dx_spots_trend extends plot_base {
/**
* refresh and populate chart
*/
refresh() {
console.log('refresh dx_spots_trend');
// Asynchronous Data Loading
fetch(this.end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var dataMap=[];
for (const [key, value] of Object.entries(data['spots_trend'])) {
var tuple=[];
tuple.push(key);
tuple.push(value);
dataMap.push(tuple);
}
//options
this.myChart.setOption({
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
text: 'DX SPOTS trend',
subtext: last_refresh,
top: 'top',
left:'left'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { show: true, readOnly: false },
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: {},
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '10%'],
axisLabel: {
formatter: (function (value){
return format_u_k_m(value);
})
}
},
dataZoom: [
{
type: 'inside',
start: 65,
end: 100
},
{
start: 0,
end: 20
},
],
series: [
{
name: 'Spots',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: {
color: '#078513'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#57fa75'
},
{
offset: 1,
color: '#118226'
}
])
},
data: dataMap
}
]
});
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id,end_point) {
// Initialize the echarts instance based on the prepared dom
super(chart_id,end_point);
this.refresh();
}
}
//create objects and timing
var plot_ba = new band_activity ('chart-band_activity','/plot_get_heatmap_data', continents_cq,band_frequencies);
setInterval(function(){plot_ba.refresh();},5*60*1000);
var plot_wdsl = new world_dx_spots_live ('chart-world_dx_spots_live','/plot_get_world_dx_spots_live');
setInterval(function(){plot_wdsl.refresh();},5*60*1000);
var plot_hb = new hour_band('chart-hour_band','/plot_get_hour_band',band_frequencies);
setInterval(function(){plot_hb.refresh();},1*60*60*1000);
var plot_dspm = new dx_spots_per_month ('chart-dx_spots_x_month','/plot_get_dx_spots_per_month');
setInterval(function(){plot_dspm.refresh();},12*60*60*1000);
var plot_dst = new dx_spots_trend ('chart-dx_spots_trend','/plot_get_dx_spots_trend');
setInterval(function(){plot_dst.refresh();},12*60*60*1000);

191
static/js/dev/plot_band_activity.js
View File

@ -1,191 +0,0 @@
/********************************************************************************
* javascript used to build band_activity chart
* ******************************************************************************/
class band_activity {
/**
* refresh and populate chart
*
* @param {String} my_cart The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {string} region This is the continent name (EU,AF,NA...) of the selected
* @param {Json} bands The frequency band list (160, 80, 60... UHF, SHF)
* @param {Json} continents The continent list( EU, SA, ...)
*/
refresh(my_chart, end_point, region, bands, continents){
// Asynchronous Data Loading
fetch(end_point+'?continent='+region)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var dataMap=Array.from(data['band activity']).map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
//options
my_chart.setOption({
tooltip: {
position: 'top',
formatter: function (p) {
var format = p.seriesName +' on ' + p.name +' band: '+'<strong>'+p.data[2]+'</strong>';
return format;
}
},
title: {
text:'Band activity',
subtext: last_refresh,
top: 'top',
left:'left'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
right: 'right',
top : 'bottom',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
height: '80%',
left: 25,
top: 50,
right: 60,
bottom: 0,
show: true,
backgroundColor: 'rgb(255, 255, 255)',
},
xAxis: {
type: 'category',
data: bands,
axisTick: {
show: true,
},
axisLine: {
show: false,
},
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: continents,
axisTick: {
show: true,
},
axisLine: {
show: false,
},
splitArea: {
show: true
}
},
visualMap: {
calculable: true,
orient: 'vertical',
right: 'right',
top: 'center',
min: 0,
max: 30,
inRange : {
color: ['#ffffe6','yellow','red']
}
},
series: [
{
name: 'Spots',
type: 'heatmap',
data: dataMap,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(100, 0, 0, 0.5)'
}
}
}
]
});
});
};
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {Json} cont_cq The continent list( EU, SA, ...)
* @param {Json} band_freq The frequency band list (160, 80, 60... UHF, SHF)
*/
constructor(chart_id, end_point, cont_cq, band_freq) {
// Initialize the echarts instance based on the prepared dom
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
//populate continents array
var continents=[];
cont_cq.forEach(function myFunction(item, index) {
continents[index]=item['id'];
});
//populate bands array
var bands=[];
band_freq.forEach(function myFunction(item, index) {
bands[index]=item['id'];
});
//managing region
var selectedContinent=getCookie('user_region');
var selectedContinent_desc=getCookie('user_region_desc');
if (!selectedContinent) {
selectedContinent='EU';
selectedContinent_desc='Europe';
setCookie('user_region',selectedContinent,60);
setCookie('user_region_desc',selectedContinent_desc,60);
};
selectElement('continentInput', selectedContinent);
addEventHandler(document.getElementById('continentInput'), 'change', function() {
selectedContinent=this.value;
selectedContinent_desc=this.options[this.selectedIndex].text;
setCookie('user_region',selectedContinent,60);
setCookie('user_region_desc',selectedContinent_desc,60);
plot_ba.refresh(myChart, end_point, selectedContinent,bands,continents);
setText('txt_continent','\xa0 Based on DX SPOTS from stations in '+ selectedContinent_desc +' during the last 15 minutes, displayed by Continent and Band');
});
setText('txt_continent','\xa0 Based on DX SPOTS from stations in '+ selectedContinent_desc +' during the last 15 minutes, displayed by Continent and Band');
this.refresh(myChart, end_point, selectedContinent,bands,continents);
/* resize chart*/
var chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
});
}
}
//create object
let plot_ba = new band_activity ('chart-band_activity','/plot_get_heatmap_data',continents_cq,band_frequencies);
/*setInterval(function(){doRefresh('chart-band_activity','/plot_get_heatmap_data')}, 5000);
function doRefresh(chart_id,end_point){
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
plot_dst.refresh(myChart,end_point);
};
*/

142
static/js/dev/plot_dx_spots_per_month.js
View File

@ -1,142 +0,0 @@
/********************************************************************************
* javascript used to build dx spots per month chart
* ******************************************************************************/
class dx_spots_per_month {
/**
* refresh and populate chart
*
* @param {String} my_cart The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
refresh(my_chart,end_point) {
// Asynchronous Data Loading
//$.getJSON(end_point).done(function(data) {
fetch(end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var year_now = new Date().getFullYear();
var year_0 = (year_now - 0).toString();
var year_1 = (year_now - 1).toString();
var year_2 = (year_now - 2).toString();
var months_name = get_months_names();
var dataMap_year_0=[];
var dataMap_year_1=[];
var dataMap_year_2=[];
for (let i = 1; i < 13; i++) {
dataMap_year_0.push(data.spots_per_month[i].year_0);
dataMap_year_1.push(data.spots_per_month[i].year_1);
dataMap_year_2.push(data.spots_per_month[i].year_2);
}
//options
my_chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: 'DX SPOTS per month',
subtext: last_refresh,
top: 'top',
left:'left'
},
legend: {
data: [year_2, year_1, year_0],
bottom: 'bottom'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: months_name
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (function (value){
return format_u_k_m(value);
})
}
}
],
series: [
{
name: year_2,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: dataMap_year_2
},
{
name: year_1,
type: 'bar',
emphasis: {
focus: 'series'
},
data: dataMap_year_1
},
{
name: year_0,
type: 'bar',
emphasis: {
focus: 'series'
},
data: dataMap_year_0
},
]
});
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id,end_point) {
// Initialize the echarts instance based on the prepared dom
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
this.refresh(myChart,end_point);
//resize
var chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
})
};
}
//create object
let plot_dspm = new dx_spots_per_month ('chart-dx_spots_x_month','/plot_get_dx_spots_per_month');

136
static/js/dev/plot_dx_spots_trend.js
View File

@ -1,136 +0,0 @@
/********************************************************************************
* javascript used to build dx spots trend
* ******************************************************************************/
class dx_spots_trend {
/**
* refresh and populate chart
*
* @param {String} my_cart The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
refresh(my_chart,end_point) {
// Asynchronous Data Loading
//$.getJSON(end_point).done(function(data) {
fetch(end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the data
var last_refresh=get_last_refresh(data);
var dataMap=[];
for (const [key, value] of Object.entries(data['spots_trend'])) {
var tuple=[];
tuple.push(key);
tuple.push(value);
dataMap.push(tuple);
}
//options
my_chart.setOption({
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
text: 'DX SPOTS trend',
subtext: last_refresh,
top: 'top',
left:'left'
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { show: true, readOnly: false },
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: {},
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '10%'],
axisLabel: {
formatter: (function (value){
return format_u_k_m(value);
})
}
},
dataZoom: [
{
type: 'inside',
start: 65,
end: 100
},
{
start: 0,
end: 20
},
],
series: [
{
name: 'Spots',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: {
color: '#078513'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#57fa75'
},
{
offset: 1,
color: '#118226'
}
])
},
data: dataMap
}
]
})
})
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id,end_point) {
// Initialize the echarts instance based on the prepared dom
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
this.refresh(myChart,end_point);
//resize
var chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
});
}
}
//create object
let plot_dst = new dx_spots_trend ('chart-dx_spots_trend','/plot_get_dx_spots_trend');

152
static/js/dev/plot_hour_band.js
View File

@ -1,152 +0,0 @@
/********************************************************************************
* javascript used to build band/hour chart
* ******************************************************************************/
class hour_band {
/**
* refresh and populate chart
*
* @param {String} my_cart The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {Json} bands The frequency band list (160, 80, 60... UHF, SHF)
*/
refresh(my_chart,end_point,bands) {
// Asynchronous Data Loading
fetch(end_point)
.then((response) => response.json())
.then((data) => {
// Fill in the dat
var last_refresh=get_last_refresh(data);
//set hour indicator names
var hour_indicators=[];
//for (let i = 0; i < 24; i++) {
for (let i = 23; i > -1; i--) {
var hour_name={};
var s=i.toString();
hour_name['name']=s;
hour_indicators.push(hour_name);
}
//cycling whithin each bands and hours
var dataMap=[];
bands.forEach(band_item => {
var qso=[];
//for (let i = 0; i < 24; i++) {
for (let i = 23; i > -1; i--) {
try {
var value=data['hour_band'][band_item][i];
if (typeof value == 'undefined') {
value = 0;
}
qso.push(value);
} catch (TypeError) {
//TODO
}
}
var tot={'value':qso,'name':band_item};
dataMap.push(tot);
});
//options
my_chart.setOption({
legend: {
orient: 'horizontal',
left: 'left',
bottom: 'bottom'
},
title: {
text: 'DX SPOTS per hour in last month',
subtext: last_refresh,
top: 'top',
right: 'right',
},
tooltip: {
trigger: 'axis',
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
radar: {
shape: 'circle',
//startAngle: 285, //0 on left side
startAngle: 105, //0 on top
indicator: hour_indicators,
center: ['47%', '46%'],
axisName: {
color: 'rgb(80,80,80)',
},
},
series: [
{
lineStyle: {
width: 2
},
type: 'radar',
symbol: 'none',
data: dataMap,
tooltip: {
trigger: 'item',
formatter: (params) => {
return 'Band: '+params.name;
},
},
emphasis: {
lineStyle: {
width: 4
}
},
}
]
})
})
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
* @param {Json} band_freq The frequency band list (160, 80, 60... UHF, SHF)
*/
constructor(chart_id,end_point,band_freq) {
// Initialize the echarts instance based on the prepared dom
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
//populate bands array
var bands=[];
band_freq.forEach(function myFunction(item, index) {
bands[index]=item['id']
});
this.refresh(myChart,end_point,bands);
//resize
var chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
});
}
}
//create object
let plot_hb = new hour_band('chart-hour_band','/plot_get_hour_band',band_frequencies);

151
static/js/dev/plot_world_dx_spots_live.js
View File

@ -1,151 +0,0 @@
/********************************************************************************
* javascript used to build world dx spots live
* ******************************************************************************/
class world_dx_spots_live {
/**
* refresh and populate chart
*
* @param {String} my_cart The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
refresh(my_chart,end_point) {
// Asynchronous Data Loading
fetch(end_point)
.then((response) => response.json())
.then((data) => {
fetch('world.json')
.then(response => response.text())
.then(geoJson => {
var last_refresh=get_last_refresh(data);
var dataMap=[];
data['world_dx_spots_live'].forEach(function myFunction(item, index) {
//lon, lat, number of qso
dataMap.push({'value':[item['lat'],item['lon'],item['count']]});
});
my_chart.hideLoading();
echarts.registerMap('WR', geoJson);
my_chart.setOption( {
visualMap: {
show: false,
min: 0,
max: 30,
inRange: {
symbolSize: [5, 20]
}
},
geo: {
type: 'map',
map: 'WR',
roam: true,
zoom: 1.2,
aspectScale: 1,
layoutCenter: ['50%', '54%'],
layoutSize: '100%',
itemStyle: {
normal: {
areaColor: '#91cc75',
borderColor: '#111'
},
emphasis: {
areaColor: '#3ba272' //3ba272 91cc75
}
},
label: {
emphasis: {
show: false
}
},
},
tooltip: {
trigger: 'item',
formatter: function(val) {
var out='Spots: <STRONG>'+ val.value[2] +'</STRONG>';
return out;
}
},
toolbox: {
show: true,
showTitle: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
show: false
},
title: {
text: 'World DX SPOTS in last hour',
subtext: last_refresh,
top: 'top',
right:'right',
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data:dataMap,
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
normal: {
color: '#fc8452',
borderColor: '#fa0a0a',
}
},
/*
symbolSize: function (val) {
return val[2] / 4;
},
*/
}
]
}); //end options
}
);
});
}
/**
* Chart creator
*
* @constructor
* @param {String} chart_id The HTML id where place chart
* @param {string} end_point This is backend end-point for chart datas
*/
constructor(chart_id,end_point) {
// Initialize the echarts instance based on the prepared dom
var chartDom = document.getElementById(chart_id);
var myChart = echarts.init(chartDom);
this.refresh(myChart,end_point);
//resize
var chart = echarts.init(document.querySelector('#'+chart_id), null);
window.addEventListener('resize',function(){
chart.resize();
});
}
}
//create object
let plot_wdsl = new world_dx_spots_live ('chart-world_dx_spots_live','/plot_get_world_dx_spots_live');

1
static/js/rel/plot.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
static/js/rel/plot_band_activity.min.js vendored
View File

@ -1 +0,0 @@
class band_activity{refresh(n,t,e,o,i){fetch(t+"?continent="+e).then(t=>t.json()).then(t=>{var e=get_last_refresh(t),t=Array.from(t["band activity"]).map(function(t){return[t[1],t[0],t[2]||"-"]});n.setOption({tooltip:{position:"top",formatter:function(t){return t.seriesName+" on "+t.name+" band: <strong>"+t.data[2]+"</strong>"}},title:{text:"Band activity",subtext:e,top:"top",left:"left"},toolbox:{show:!0,showTitle:!1,orient:"vertical",right:"right",top:"bottom",feature:{mark:{show:!0},dataView:{show:!0,readOnly:!0},restore:{show:!0},saveAsImage:{show:!0}}},grid:{height:"80%",left:25,top:50,right:60,bottom:0,show:!0,backgroundColor:"rgb(255, 255, 255)"},xAxis:{type:"category",data:o,axisTick:{show:!0},axisLine:{show:!1},splitArea:{show:!0}},yAxis:{type:"category",data:i,axisTick:{show:!0},axisLine:{show:!1},splitArea:{show:!0}},visualMap:{calculable:!0,orient:"vertical",right:"right",top:"center",min:0,max:30,inRange:{color:["#ffffe6","yellow","red"]}},series:[{name:"Spots",type:"heatmap",data:t,label:{show:!1},emphasis:{itemStyle:{shadowBlur:10,shadowColor:"rgba(100, 0, 0, 0.5)"}}}]})})}constructor(t,e,n,o){var i=document.getElementById(t),s=echarts.init(i),a=[],r=(n.forEach(function(t,e){a[e]=t.id}),[]),c=(o.forEach(function(t,e){r[e]=t.id}),getCookie("user_region")),d=getCookie("user_region_desc"),h=(c||(c="EU",d="Europe",setCookie("user_region",c,60),setCookie("user_region_desc",d,60)),selectElement("continentInput",c),addEventHandler(document.getElementById("continentInput"),"change",function(){c=this.value,d=this.options[this.selectedIndex].text,setCookie("user_region",c,60),setCookie("user_region_desc",d,60),plot_ba.refresh(s,e,c,r,a),setText("txt_continent","  Based on DX SPOTS from stations in "+d+" during the last 15 minutes, displayed by Continent and Band")}),setText("txt_continent","  Based on DX SPOTS from stations in "+d+" during the last 15 minutes, displayed by Continent and Band"),this.refresh(s,e,c,r,a),echarts.init(document.querySelector("#"+t),null));window.addEventListener("resize",function(){h.resize()})}}let plot_ba=new band_activity("chart-band_activity","/plot_get_heatmap_data",continents_cq,band_frequencies);

1
static/js/rel/plot_dx_spots_per_month.min.js vendored
View File

@ -1 +0,0 @@
class dx_spots_per_month{refresh(h,t){fetch(t).then(t=>t.json()).then(e=>{var t=get_last_refresh(e),s=(new Date).getFullYear(),o=(+s).toString(),r=(s-1).toString(),s=(s-2).toString(),a=get_months_names(),n=[],i=[],p=[];for(let t=1;t<13;t++)n.push(e.spots_per_month[t].year_0),i.push(e.spots_per_month[t].year_1),p.push(e.spots_per_month[t].year_2);h.setOption({tooltip:{trigger:"axis",axisPointer:{type:"shadow"}},title:{text:"DX SPOTS per month",subtext:t,top:"top",left:"left"},legend:{data:[s,r,o],bottom:"bottom"},toolbox:{show:!0,showTitle:!1,orient:"vertical",left:"right",top:"center",feature:{mark:{show:!0},dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar","stack"]},restore:{show:!0},saveAsImage:{show:!0}}},xAxis:[{type:"category",axisTick:{show:!1},data:a}],yAxis:[{type:"value",axisLabel:{formatter:function(t){return format_u_k_m(t)}}}],series:[{name:s,type:"bar",barGap:0,emphasis:{focus:"series"},data:p},{name:r,type:"bar",emphasis:{focus:"series"},data:i},{name:o,type:"bar",emphasis:{focus:"series"},data:n}]})})}constructor(t,e){var s=document.getElementById(t),s=echarts.init(s),o=(this.refresh(s,e),echarts.init(document.querySelector("#"+t),null));window.addEventListener("resize",function(){o.resize()})}}let plot_dspm=new dx_spots_per_month("chart-dx_spots_x_month","/plot_get_dx_spots_per_month");

1
static/js/rel/plot_dx_spots_trend.min.js vendored
View File

@ -1 +0,0 @@
class dx_spots_trend{refresh(a,t){fetch(t).then(t=>t.json()).then(t=>{var e,o,r=get_last_refresh(t),s=[];for([e,o]of Object.entries(t.spots_trend)){var n=[];n.push(e),n.push(o),s.push(n)}a.setOption({tooltip:{trigger:"axis",position:function(t){return[t[0],"10%"]}},title:{text:"DX SPOTS trend",subtext:r,top:"top",left:"left"},toolbox:{show:!0,showTitle:!1,orient:"vertical",left:"right",top:"center",feature:{dataView:{show:!0,readOnly:!1},dataZoom:{yAxisIndex:"none"},restore:{},magicType:{show:!0,type:["line","bar"]},saveAsImage:{}}},xAxis:{type:"time",boundaryGap:!1},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:function(t){return format_u_k_m(t)}}},dataZoom:[{type:"inside",start:65,end:100},{start:0,end:20}],series:[{name:"Spots",type:"line",smooth:!0,symbol:"none",itemStyle:{color:"#078513"},areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"#57fa75"},{offset:1,color:"#118226"}])},data:s}]})})}constructor(t,e){var o=document.getElementById(t),o=echarts.init(o),r=(this.refresh(o,e),echarts.init(document.querySelector("#"+t),null));window.addEventListener("resize",function(){r.resize()})}}let plot_dst=new dx_spots_trend("chart-dx_spots_trend","/plot_get_dx_spots_trend");

1
static/js/rel/plot_hour_band.min.js vendored
View File

@ -1 +0,0 @@
class hour_band{refresh(i,t,s){fetch(t).then(t=>t.json()).then(a=>{var t=get_last_refresh(a),e=[];for(let t=23;-1<t;t--){var r={},o=t.toString();r.name=o,e.push(r)}var n=[];s.forEach(e=>{var r=[];for(let t=23;-1<t;t--)try{var o=a.hour_band[e][t];r.push(o=void 0===o?0:o)}catch(t){}n.push({value:r,name:e})}),i.setOption({legend:{orient:"horizontal",left:"left",bottom:"bottom"},title:{text:"DX SPOTS per hour in last month",subtext:t,top:"top",right:"right"},tooltip:{trigger:"axis"},toolbox:{show:!0,showTitle:!1,orient:"vertical",left:"right",top:"center",feature:{mark:{show:!0},dataView:{show:!0,readOnly:!0},restore:{show:!0},saveAsImage:{show:!0}}},radar:{shape:"circle",startAngle:105,indicator:e,center:["47%","46%"],axisName:{color:"rgb(80,80,80)"}},series:[{lineStyle:{width:2},type:"radar",symbol:"none",data:n,tooltip:{trigger:"item",formatter:t=>"Band: "+t.name},emphasis:{lineStyle:{width:4}}}]})})}constructor(t,e,r){var o=document.getElementById(t),o=echarts.init(o),a=[],n=(r.forEach(function(t,e){a[e]=t.id}),this.refresh(o,e,a),echarts.init(document.querySelector("#"+t),null));window.addEventListener("resize",function(){n.resize()})}}let plot_hb=new hour_band("chart-hour_band","/plot_get_hour_band",band_frequencies);

1
static/js/rel/plot_world_dx_spots_live.min.js vendored
View File

@ -1 +0,0 @@
class world_dx_spots_live{refresh(s,e){fetch(e).then(e=>e.json()).then(r=>{fetch("world.json").then(e=>e.text()).then(e=>{var t=get_last_refresh(r),o=[];r.world_dx_spots_live.forEach(function(e,t){o.push({value:[e.lat,e.lon,e.count]})}),s.hideLoading(),echarts.registerMap("WR",e),s.setOption({visualMap:{show:!1,min:0,max:30,inRange:{symbolSize:[5,20]}},geo:{type:"map",map:"WR",roam:!0,zoom:1.2,aspectScale:1,layoutCenter:["50%","54%"],layoutSize:"100%",itemStyle:{normal:{areaColor:"#91cc75",borderColor:"#111"},emphasis:{areaColor:"#3ba272"}},label:{emphasis:{show:!1}}},tooltip:{trigger:"item",formatter:function(e){return"Spots: <STRONG>"+e.value[2]+"</STRONG>"}},toolbox:{show:!0,showTitle:!1,orient:"vertical",left:"right",top:"center",feature:{mark:{show:!0},dataView:{show:!0,readOnly:!1},restore:{show:!0},saveAsImage:{show:!0}}},legend:{show:!1},title:{text:"World DX SPOTS in last hour",subtext:t,top:"top",right:"right"},series:[{type:"scatter",coordinateSystem:"geo",data:o,label:{emphasis:{position:"right",show:!1}},itemStyle:{normal:{color:"#fc8452",borderColor:"#fa0a0a"}}}]})})})}constructor(e,t){var o=document.getElementById(e),o=echarts.init(o),r=(this.refresh(o,t),echarts.init(document.querySelector("#"+e),null));window.addEventListener("resize",function(){r.resize()})}}let plot_wdsl=new world_dx_spots_live("chart-world_dx_spots_live","/plot_get_world_dx_spots_live");

9
templates/plots.html
View File

@ -6,8 +6,6 @@
{% endblock %}
{% block head %}
{{ super() }}
<meta http-equiv="refresh" content="300">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"
integrity="sha512-OTbGFYPLe3jhy4bUwbB8nls0TFgz10kn0TLkmyA+l3FyivDs31zsXCjOis7YGDtE2Jsy0+fzW+3/OVoPVujPmQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@ -94,10 +92,5 @@ var band_frequencies={{bands["bands"]|tojson|safe}};
{% block app_scripts %}
{{ super() }}
<script defer src="static/js/rel/plot_band_activity.min.js"></script>
<script defer src="static/js/rel/plot_world_dx_spots_live.min.js"></script>
<script defer src="static/js/rel/plot_hour_band.min.js"></script>
<script defer src="static/js/rel/plot_dx_spots_trend.min.js"></script>
<script defer src="static/js/rel/plot_dx_spots_per_month.min.js"></script>
<script defer src="static/js/rel/plot.min.js"></script>
{% endblock app_scripts %}