From f88ef7ed54011be35c12bbd2fe3924e2d31221a1 Mon Sep 17 00:00:00 2001 From: coulisse Date: Fri, 27 Jan 2023 19:47:07 +0100 Subject: [PATCH] refactor of plot code --- docs/CHANGELOG.md | 1 + scripts/dxcluster_schema_for_test.sh | 5 +- static/js/dev/plot.js | 756 ++++++++++++++++++ static/js/dev/plot_band_activity.js | 191 ----- static/js/dev/plot_dx_spots_per_month.js | 142 ---- static/js/dev/plot_dx_spots_trend.js | 136 ---- static/js/dev/plot_hour_band.js | 152 ---- static/js/dev/plot_world_dx_spots_live.js | 151 ---- static/js/rel/plot.min.js | 1 + static/js/rel/plot_band_activity.min.js | 1 - static/js/rel/plot_dx_spots_per_month.min.js | 1 - static/js/rel/plot_dx_spots_trend.min.js | 1 - static/js/rel/plot_hour_band.min.js | 1 - static/js/rel/plot_world_dx_spots_live.min.js | 1 - templates/plots.html | 9 +- 15 files changed, 762 insertions(+), 787 deletions(-) create mode 100644 static/js/dev/plot.js delete mode 100644 static/js/dev/plot_band_activity.js delete mode 100644 static/js/dev/plot_dx_spots_per_month.js delete mode 100644 static/js/dev/plot_dx_spots_trend.js delete mode 100644 static/js/dev/plot_hour_band.js delete mode 100644 static/js/dev/plot_world_dx_spots_live.js create mode 100644 static/js/rel/plot.min.js delete mode 100644 static/js/rel/plot_band_activity.min.js delete mode 100644 static/js/rel/plot_dx_spots_per_month.min.js delete mode 100644 static/js/rel/plot_dx_spots_trend.min.js delete mode 100644 static/js/rel/plot_hour_band.min.js delete mode 100644 static/js/rel/plot_world_dx_spots_live.min.js diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 49aa614..879465e 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -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 ___ diff --git a/scripts/dxcluster_schema_for_test.sh b/scripts/dxcluster_schema_for_test.sh index 2b9c3fe..2d1ecdb 100755 --- a/scripts/dxcluster_schema_for_test.sh +++ b/scripts/dxcluster_schema_for_test.sh @@ -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 diff --git a/static/js/dev/plot.js b/static/js/dev/plot.js new file mode 100644 index 0000000..b3a0d45 --- /dev/null +++ b/static/js/dev/plot.js @@ -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: '+''+p.data[2]+''; + 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: '+ val.value[2] +''; + 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); \ No newline at end of file diff --git a/static/js/dev/plot_band_activity.js b/static/js/dev/plot_band_activity.js deleted file mode 100644 index 652f6f8..0000000 --- a/static/js/dev/plot_band_activity.js +++ /dev/null @@ -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: '+''+p.data[2]+''; - 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); -}; - -*/ - diff --git a/static/js/dev/plot_dx_spots_per_month.js b/static/js/dev/plot_dx_spots_per_month.js deleted file mode 100644 index c316dc9..0000000 --- a/static/js/dev/plot_dx_spots_per_month.js +++ /dev/null @@ -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'); \ No newline at end of file diff --git a/static/js/dev/plot_dx_spots_trend.js b/static/js/dev/plot_dx_spots_trend.js deleted file mode 100644 index 6bd998e..0000000 --- a/static/js/dev/plot_dx_spots_trend.js +++ /dev/null @@ -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'); diff --git a/static/js/dev/plot_hour_band.js b/static/js/dev/plot_hour_band.js deleted file mode 100644 index 3de942b..0000000 --- a/static/js/dev/plot_hour_band.js +++ /dev/null @@ -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); diff --git a/static/js/dev/plot_world_dx_spots_live.js b/static/js/dev/plot_world_dx_spots_live.js deleted file mode 100644 index 27f080f..0000000 --- a/static/js/dev/plot_world_dx_spots_live.js +++ /dev/null @@ -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: '+ val.value[2] +''; - 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'); diff --git a/static/js/rel/plot.min.js b/static/js/rel/plot.min.js new file mode 100644 index 0000000..4836d1e --- /dev/null +++ b/static/js/rel/plot.min.js @@ -0,0 +1 @@ +class plot_base{refresh(){}constructor(t,e){var o=document.getElementById(t);this.end_point=e,this.myChart=echarts.init(o);let s=echarts.init(document.querySelector("#"+t),null);window.addEventListener("resize",function(){s.resize()})}}class band_activity extends plot_base{refresh(t){super.refresh(),console.log("refresh band_activity"),void 0!==t&&(this.selectedContinent=t),fetch(this.end_point+"?continent="+this.selectedContinent).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]||"-"]});this.myChart.setOption({tooltip:{position:"top",formatter:function(t){return t.seriesName+" on "+t.name+" band: "+t.data[2]+""}},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:this.bands,axisTick:{show:!0},axisLine:{show:!1},splitArea:{show:!0}},yAxis:{type:"category",data:this.continents,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,o,s){super(t,e);o.forEach(function(t,e){e,t.id});s.forEach(function(t,e){e,t.id});var r=getCookie("user_region"),a=getCookie("user_region_desc");r||(r="EU",a="Europe",setCookie("user_region",r,60),setCookie("user_region_desc",a,60)),selectElement("continentInput",r),addEventHandler(document.getElementById("continentInput"),"change",function(){r=this.value,a=this.options[this.selectedIndex].text,setCookie("user_region",r,60),setCookie("user_region_desc",a,60),plot_ba.refresh(r),setText("txt_continent","  Based on DX SPOTS from stations in "+a+" during the last 15 minutes, displayed by Continent and Band")}),setText("txt_continent","  Based on DX SPOTS from stations in "+a+" during the last 15 minutes, displayed by Continent and Band"),this.refresh(r)}}class world_dx_spots_live extends plot_base{refresh(){super.refresh(),console.log("refresh world_dx_spots_live"),fetch(this.end_point).then(t=>t.json()).then(s=>{fetch("world.json").then(t=>t.text()).then(t=>{var e=get_last_refresh(s),o=[];s.world_dx_spots_live.forEach(function(t,e){o.push({value:[t.lat,t.lon,t.count]})}),this.myChart.hideLoading(),echarts.registerMap("WR",t),this.myChart.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(t){return"Spots: "+t.value[2]+""}},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:e,top:"top",right:"right"},series:[{type:"scatter",coordinateSystem:"geo",data:o,label:{emphasis:{position:"right",show:!1}},itemStyle:{normal:{color:"#fc8452",borderColor:"#fa0a0a"}}}]})})})}constructor(t,e){super(t,e),this.refresh()}}class hour_band extends plot_base{refresh(){super.refresh(),console.log("refresh hour_band"),fetch(this.end_point).then(t=>t.json()).then(r=>{var t=get_last_refresh(r),e=[];for(let t=23;-1{var o=[];for(let t=23;-1"Band: "+t.name},emphasis:{lineStyle:{width:4}}}]})})}constructor(t,e,o){super(t,e);let s=[];o.forEach(function(t,e){s[e]=t.id}),this.bands=s,this.refresh()}}class dx_spots_per_month extends plot_base{refresh(){console.log("refresh dx_spots_per_month"),fetch(this.end_point).then(t=>t.json()).then(e=>{var t=get_last_refresh(e),o=(new Date).getFullYear(),s=(+o).toString(),r=(o-1).toString(),o=(o-2).toString(),a=get_months_names(),n=[],i=[],h=[];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),h.push(e.spots_per_month[t].year_2);this.myChart.setOption({tooltip:{trigger:"axis",axisPointer:{type:"shadow"}},title:{text:"DX SPOTS per month",subtext:t,top:"top",left:"left"},legend:{data:[o,r,s],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:o,type:"bar",barGap:0,emphasis:{focus:"series"},data:h},{name:r,type:"bar",emphasis:{focus:"series"},data:i},{name:s,type:"bar",emphasis:{focus:"series"},data:n}]})})}constructor(t,e){super(t,e),this.refresh()}}class dx_spots_trend extends plot_base{refresh(){console.log("refresh dx_spots_trend"),fetch(this.end_point).then(t=>t.json()).then(t=>{var e,o,s=get_last_refresh(t),r=[];for([e,o]of Object.entries(t.spots_trend)){var a=[];a.push(e),a.push(o),r.push(a)}this.myChart.setOption({tooltip:{trigger:"axis",position:function(t){return[t[0],"10%"]}},title:{text:"DX SPOTS trend",subtext:s,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:r}]})})}constructor(t,e){super(t,e),this.refresh()}}var plot_ba=new band_activity("chart-band_activity","/plot_get_heatmap_data",continents_cq,band_frequencies),plot_wdsl=(setInterval(function(){plot_ba.refresh()},3e5),new world_dx_spots_live("chart-world_dx_spots_live","/plot_get_world_dx_spots_live")),plot_hb=(setInterval(function(){plot_wdsl.refresh()},3e5),new hour_band("chart-hour_band","/plot_get_hour_band",band_frequencies)),plot_dspm=(setInterval(function(){plot_hb.refresh()},36e5),new dx_spots_per_month("chart-dx_spots_x_month","/plot_get_dx_spots_per_month")),plot_dst=(setInterval(function(){plot_dspm.refresh()},432e5),new dx_spots_trend("chart-dx_spots_trend","/plot_get_dx_spots_trend"));setInterval(function(){plot_dst.refresh()},432e5); diff --git a/static/js/rel/plot_band_activity.min.js b/static/js/rel/plot_band_activity.min.js deleted file mode 100644 index f3ee266..0000000 --- a/static/js/rel/plot_band_activity.min.js +++ /dev/null @@ -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: "+t.data[2]+""}},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); diff --git a/static/js/rel/plot_dx_spots_per_month.min.js b/static/js/rel/plot_dx_spots_per_month.min.js deleted file mode 100644 index 5567c25..0000000 --- a/static/js/rel/plot_dx_spots_per_month.min.js +++ /dev/null @@ -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"); diff --git a/static/js/rel/plot_dx_spots_trend.min.js b/static/js/rel/plot_dx_spots_trend.min.js deleted file mode 100644 index 50ed244..0000000 --- a/static/js/rel/plot_dx_spots_trend.min.js +++ /dev/null @@ -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"); diff --git a/static/js/rel/plot_hour_band.min.js b/static/js/rel/plot_hour_band.min.js deleted file mode 100644 index f8e7c70..0000000 --- a/static/js/rel/plot_hour_band.min.js +++ /dev/null @@ -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{var r=[];for(let t=23;-1"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); diff --git a/static/js/rel/plot_world_dx_spots_live.min.js b/static/js/rel/plot_world_dx_spots_live.min.js deleted file mode 100644 index 82db1d8..0000000 --- a/static/js/rel/plot_world_dx_spots_live.min.js +++ /dev/null @@ -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: "+e.value[2]+""}},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"); diff --git a/templates/plots.html b/templates/plots.html index 857c4de..7078e34 100644 --- a/templates/plots.html +++ b/templates/plots.html @@ -6,8 +6,6 @@ {% endblock %} {% block head %} {{ super() }} - - @@ -94,10 +92,5 @@ var band_frequencies={{bands["bands"]|tojson|safe}}; {% block app_scripts %} {{ super() }} - - - - - - + {% endblock app_scripts %} \ No newline at end of file