Update javascript libraries
Updates: * gulp to 4.0.2 * gulp-eslint to 6.0.0 * stylelint to 4.3.1 * bootstrap to 3.4.1 * chart.js to 2.8.0 * jquery to 3.4.1 * mapbox-gl to 1.3.1 * moment to 2.24.0 Removals: * bootstrap-daterangepicker * backbonejs(code parts that weren't removed) * d3 * underscore Signed-off-by: Alfredos-Panagiotis Damkalis <fredy@fredy.gr>merge-requests/421/head 0.21
parent
8c340d9e78
commit
ef40817f61
|
@ -396,31 +396,3 @@ svg.chart {
|
|||
stroke: #286090;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
/* Telemetry Datepicker */
|
||||
|
||||
.datepicker {
|
||||
border-radius: 3px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.datepicker input {
|
||||
font-family: ClearSans;
|
||||
font-size: 13px;
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.datepicker .input-group-addon {
|
||||
background: #777;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
@ -1,302 +0,0 @@
|
|||
/* global d3 Backbone moment _ */
|
||||
// D3 visualisation
|
||||
|
||||
d3.lineChart = function(telemetry_key, unit) {
|
||||
var config = {
|
||||
margin: {top: 20, right: 20, bottom: 115, left: 100},
|
||||
width: 700,
|
||||
height: 500
|
||||
};
|
||||
|
||||
var svg;
|
||||
|
||||
// Define the div for the tooltip
|
||||
var div = d3.select('body').append('div')
|
||||
.attr('class', 'chart-tooltip')
|
||||
.style('opacity', 0);
|
||||
|
||||
function render(selection) {
|
||||
selection.each(function(_data) {
|
||||
var chartW = config.width - config.margin.left - config.margin.right,
|
||||
chartH = config.height - config.margin.top - config.margin.bottom;
|
||||
|
||||
|
||||
var x1 = d3.scale.ordinal()
|
||||
.domain(_data.map(function(d){
|
||||
return parseDate(d.decoded.observation_datetime);
|
||||
}))
|
||||
.rangePoints([0, chartW]);
|
||||
|
||||
var y1;
|
||||
|
||||
switch(_data.length) {
|
||||
case 1:
|
||||
y1 = d3.scale.linear()
|
||||
.domain([0, d3.max(_data, function(d){ return +d.decoded.demod_data[telemetry_key]; })])
|
||||
.range([chartH, 0])
|
||||
.nice(4);
|
||||
break;
|
||||
default:
|
||||
y1 = d3.scale.linear()
|
||||
.domain(d3.extent(_data, function(d){ return +d.decoded.demod_data[telemetry_key]; }))
|
||||
.range([chartH, 0])
|
||||
.nice(4);
|
||||
}
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x1)
|
||||
.orient('bottom');
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y1)
|
||||
.orient('left');
|
||||
|
||||
if(!svg) {
|
||||
svg = d3.select(this)
|
||||
.append('svg')
|
||||
.classed('svg-chart', true);
|
||||
var container = svg.append('g').classed('container-group', true);
|
||||
container.append('g').classed('chart-group', true);
|
||||
container.append('g').classed('x-axis-group axis', true);
|
||||
container.append('g').classed('y-axis-group axis', true);
|
||||
}
|
||||
|
||||
svg.transition().attr({width: config.width, height: config.height});
|
||||
|
||||
svg.select('.container-group')
|
||||
.attr({transform: 'translate(' + config.margin.left + ',' + config.margin.top + ')'});
|
||||
|
||||
svg.select('.x-axis-group.axis')
|
||||
.attr({transform: 'translate(0,' + (chartH) + ')'})
|
||||
.transition()
|
||||
.call(xAxis);
|
||||
|
||||
svg.select('.y-axis-group.axis')
|
||||
.transition()
|
||||
.call(yAxis);
|
||||
|
||||
svg.selectAll('.x-axis-group.axis text') // select all the text elements for the xaxis
|
||||
.attr('transform', function() {
|
||||
return 'translate(-50,50)rotate(-45)';
|
||||
});
|
||||
|
||||
// Axis labels
|
||||
svg.append('text')
|
||||
.attr('transform', 'translate(' + (chartW + config.margin.right + 18) + ' ,' + (chartH + 10) + ')')
|
||||
.style('text-anchor', 'middle')
|
||||
.text('Observation Datetime');
|
||||
|
||||
svg.append('text')
|
||||
.attr('transform', 'rotate(-90)')
|
||||
.attr('y', 40)
|
||||
.attr('x', 0 - (chartH / 2))
|
||||
.attr('dy', '1em')
|
||||
.style('text-anchor', 'middle')
|
||||
.text('Value (' + unit + ')');
|
||||
|
||||
switch(_data.length) {
|
||||
case 1:
|
||||
// Add the scatterplot
|
||||
svg.selectAll('dot')
|
||||
.data(_data)
|
||||
.enter().append('circle')
|
||||
.attr('r', 4)
|
||||
.attr('cx', function() { return chartW / 2 + config.margin.left; })
|
||||
.attr('cy', function(d) { return y1(d.decoded.demod_data[telemetry_key]) + config.margin.top; })
|
||||
.attr('class', 'circle')
|
||||
.on('mouseover', function(d) {
|
||||
div.transition()
|
||||
.duration(200)
|
||||
.style('opacity', 1);
|
||||
div.html(d.decoded.demod_data[telemetry_key] + ' (' + unit + ')')
|
||||
.style('left', (d3.event.pageX) + 'px')
|
||||
.style('top', (d3.event.pageY - 26) + 'px');
|
||||
})
|
||||
.on('mouseout', function() {
|
||||
div.transition()
|
||||
.duration(500)
|
||||
.style('opacity', 0);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
var xInterval = chartW / (_data.length - 1);
|
||||
|
||||
// Define the line
|
||||
var valueline = d3.svg.line()
|
||||
.x(function(d,i) { return (xInterval*i + config.margin.left); })
|
||||
.y(function(d) { return y1(d.decoded.demod_data[telemetry_key]) + config.margin.top; });
|
||||
|
||||
// Add the valueline path
|
||||
svg.append('path')
|
||||
.attr('class', 'line')
|
||||
.attr('d', valueline(_data));
|
||||
|
||||
// Add the scatterplot
|
||||
svg.selectAll('dot')
|
||||
.data(_data)
|
||||
.enter().append('circle')
|
||||
.attr('r', 4)
|
||||
.attr('cx', function(d, i) { return xInterval*i + config.margin.left; })
|
||||
.attr('cy', function(d) { return y1(d.decoded.demod_data[telemetry_key]) + config.margin.top; })
|
||||
.attr('class', 'circle')
|
||||
.on('mouseover', function(d) {
|
||||
div.transition()
|
||||
.duration(200)
|
||||
.style('opacity', 1);
|
||||
div.html(d.decoded.demod_data[telemetry_key] + ' (' + unit + ')')
|
||||
.style('left', (d3.event.pageX) + 'px')
|
||||
.style('top', (d3.event.pageY - 26) + 'px');
|
||||
})
|
||||
.on('mouseout', function() {
|
||||
div.transition()
|
||||
.duration(500)
|
||||
.style('opacity', 0);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
return render;
|
||||
};
|
||||
|
||||
// Parse datetime values
|
||||
|
||||
function parseDate (date) {
|
||||
var res = date.substring(4,6) + '/' + date.substring(6,8) + '/' + date.substring(0,4) + ' ' + date.substring(9 ,11) + ':' + date.substring(11 ,13) + ':' + date.substring(13 ,15);
|
||||
return res;
|
||||
}
|
||||
|
||||
function parseDateFilter (date) {
|
||||
var res = date.substring(0,8);
|
||||
return res;
|
||||
}
|
||||
|
||||
// Check if Satellite has telemetry data
|
||||
|
||||
var has_telemetry_data = $('.satellite-title').data('telemetry');
|
||||
|
||||
if (has_telemetry_data) {
|
||||
$('#telemetry').show();
|
||||
|
||||
// Retreive Satellite id
|
||||
|
||||
var satelliteId = $('#telemetry-block').data('satid');
|
||||
|
||||
|
||||
// Backbone Models
|
||||
|
||||
Backbone.Model.extend({});
|
||||
|
||||
// Backbone Collections
|
||||
|
||||
var TelemetryCollection = Backbone.Collection.extend({
|
||||
url:'/api/telemetry/?satellite=' + satelliteId
|
||||
});
|
||||
|
||||
var TelemetryDescriptors = TelemetryCollection.extend({
|
||||
parse: function(response){
|
||||
if(response.length !== 0) {
|
||||
return response[0].schema;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var TelemetryValues = TelemetryCollection.extend({
|
||||
comparator: function(collection){
|
||||
return( collection.get('decoded').observation_datetime );
|
||||
},
|
||||
byDate: function (start_date, end_date) {
|
||||
var filtered = this.filter(function (model) {
|
||||
|
||||
var date = parseDateFilter(model.get('decoded').observation_datetime);
|
||||
|
||||
return ( date >= start_date && date <= end_date );
|
||||
});
|
||||
return new TelemetryValues(filtered);
|
||||
}
|
||||
});
|
||||
|
||||
// Backbone Views
|
||||
|
||||
var TelemetryDescriptorsView = Backbone.View.extend({
|
||||
el: '#telemetry-descriptors',
|
||||
template: _.template($('#telemetryDescriptorsTemplate').html()),
|
||||
initialize: function(){
|
||||
this.listenTo(this.collection, 'add reset change remove', this.renderItem);
|
||||
this.collection.fetch();
|
||||
},
|
||||
renderItem: function (model) {
|
||||
this.$el.append(this.template(model.toJSON()));
|
||||
$('#telemetry-descriptors li:first-child').addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
var TelemetryChartView = Backbone.View.extend({
|
||||
el: '.chart',
|
||||
chart: null,
|
||||
chartSelection: null,
|
||||
initialize: function() {
|
||||
this.collection.fetch();
|
||||
this.updateDates(moment().subtract(7, 'days').format('YYYY/MM/DD'), moment().format('YYYY/MM/DD'));
|
||||
this.renderPlaceholder();
|
||||
this.collection.on('update filter', this.render, this);
|
||||
d3.lineChart();
|
||||
},
|
||||
events: {
|
||||
'click .telemetry-key': 'updateKey',
|
||||
},
|
||||
render: function() {
|
||||
if (this.collection.length > 0) {
|
||||
$('#telemetry-descriptors').show();
|
||||
$('#data-available').empty();
|
||||
d3.select('svg').remove();
|
||||
var data = this.collection.toJSON();
|
||||
this.chartSelection = d3.select(this.el)
|
||||
.datum(data)
|
||||
.call(d3.lineChart(data[0].schema[0].key, data[0].schema[0].unit));
|
||||
} else {
|
||||
this.renderPlaceholder();
|
||||
}
|
||||
},
|
||||
renderPlaceholder: function() {
|
||||
$('#telemetry-descriptors').hide();
|
||||
$('#data-available').html('<p>There is no data available for the selected dates.</p>');
|
||||
d3.select('svg').remove();
|
||||
},
|
||||
updateKey: function(e){
|
||||
d3.select('svg').remove();
|
||||
this.chartSelection.call(d3.lineChart($(e.currentTarget).data('key'), $(e.currentTarget).data('unit')));
|
||||
var active = $(e.currentTarget);
|
||||
active.addClass('active');
|
||||
$('li').not(active).removeClass('active');
|
||||
},
|
||||
updateDates: function(start_date, end_date){
|
||||
this.collection = telemetryValues.byDate(start_date, end_date);
|
||||
this.render();
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch data and render views
|
||||
|
||||
new TelemetryDescriptorsView({ collection: new TelemetryDescriptors() });
|
||||
var telemetryValues = new TelemetryValues();
|
||||
var telemetryChartView = new TelemetryChartView({collection: telemetryValues});
|
||||
|
||||
$('input[name="daterange"]').daterangepicker(
|
||||
{
|
||||
locale: {
|
||||
format: 'YYYY/MM/DD'
|
||||
},
|
||||
dateLimit: {
|
||||
'days': 60
|
||||
},
|
||||
autoApply: true,
|
||||
startDate: moment().subtract(7, 'days').format('YYYY/MM/DD'),
|
||||
endDate: moment().format('YYYY/MM/DD'),
|
||||
},
|
||||
function(start, end) {
|
||||
telemetryChartView.updateDates(start.format('YYYYMMDD'), end.format('YYYYMMDD'));
|
||||
}
|
||||
);
|
||||
}
|
|
@ -6,7 +6,6 @@
|
|||
{% block title %} - {{ satellite }}{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{% static 'lib/bootstrap-daterangepicker/daterangepicker.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'lib/mapbox-gl/dist/mapbox-gl.css' %}">
|
||||
{% endblock css %}
|
||||
|
||||
|
@ -658,9 +657,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block javascript %}
|
||||
<script src="{% static 'lib/underscore/underscore-min.js' %}"></script>
|
||||
<script src="{% static 'lib/moment/min/moment.min.js' %}"></script>
|
||||
<script src="{% static 'lib/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
|
||||
<script src="{% static 'lib/mapbox-gl/dist/mapbox-gl.js' %}"></script>
|
||||
<script src="{% static 'lib/gpredict.js/dist/gpredict.min.js' %}"></script>
|
||||
<script src="{% static 'js/map.js' %}"></script>
|
||||
|
|
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
|
@ -9,37 +9,30 @@
|
|||
"author": "SatNOGS",
|
||||
"license": "AGPL-3.0",
|
||||
"devDependencies": {
|
||||
"gulp": "^4.0.1",
|
||||
"gulp-eslint": "^5.0.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-eslint": "^6.0.0",
|
||||
"gulp-stylelint": "^9.0.0",
|
||||
"stylelint": "^10.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootstrap-daterangepicker": "^2.1.25",
|
||||
"chart.js": "^2.6.0",
|
||||
"d3": "^4.10.2",
|
||||
"bootstrap": "^3.4.1",
|
||||
"chart.js": "^2.8.0",
|
||||
"dnt-helper": "github:schalkneethling/dnt-helper",
|
||||
"gpredict.js": "github:kerel-fs/gpredict.js",
|
||||
"jquery": "^3.2.1",
|
||||
"mapbox-gl": "^0.44.0",
|
||||
"moment": "^2.18.1",
|
||||
"underscore": "^1.8.3"
|
||||
"jquery": "^3.4.1",
|
||||
"mapbox-gl": "^1.3.1",
|
||||
"moment": "^2.24.0"
|
||||
},
|
||||
"assets": [
|
||||
"bootstrap/dist/css/bootstrap.min.css",
|
||||
"bootstrap/dist/js/bootstrap.min.js",
|
||||
"bootstrap/dist/fonts/*",
|
||||
"bootstrap-daterangepicker/daterangepicker.css",
|
||||
"bootstrap-daterangepicker/daterangepicker.js",
|
||||
"chart.js/dist/Chart.min.js",
|
||||
"d3/build/d3.min.js",
|
||||
"dnt-helper/js/dnt-helper.js",
|
||||
"gpredict.js/dist/gpredict.min.js",
|
||||
"jquery/dist/jquery.min.js",
|
||||
"mapbox-gl/dist/mapbox-gl.css",
|
||||
"mapbox-gl/dist/mapbox-gl.js",
|
||||
"moment/min/moment.min.js",
|
||||
"underscore/underscore-min.js"
|
||||
"moment/min/moment.min.js"
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue