From 780828a8f84541a50d539e1cd71059bf9bcf7f81 Mon Sep 17 00:00:00 2001 From: Goutte Date: Fri, 8 Dec 2017 14:50:27 +0100 Subject: [PATCH] Prepare horizontal lines in the time series and change the default time interval. --- CHANGELOG.md | 4 +++- web/run.py | 4 ++-- web/static/js/swapp.js | 26 +++++++++++++++++++++----- web/static/js/swapp.ls | 22 +++++++++++++++++++--- 4 files changed, 45 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8364ba1..5eb5bb8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,6 @@ - [ ] rajouter MAVEN, New Horizons, Cassini, Galileo, ExoMars comme spacecraft cible - [ ] prévoir la possibilité à l'utilisateur d'afficher le temps en Day Of Year - [ ] modifier le bandeau vertical d'affichage des choix utilisateurs pour qu'il soit plus petit (en particulier les champs paramètres) -- [ ] ajouter dans le bandeau vertical un onglet LAYERS avec 3 choix possibles: Jupiter Thermosphere Model, HST Jupiter Observations, HST Saturn Observations - [ ] ajouter un bouton ALERT qui permet d'ouvrir une nouvelle page de formulaire ou l'utilisateur entrerait les données suivantes: * email * target (= planète, spacecraft, comet) @@ -14,6 +13,7 @@ - [ ] juno/rosetta doivent aussi bouger le long de leur orbite lorsque l'on parcourt à la souris les données de la série temporelle; pour les intervalles de temps où rosetta n'existe plus (crash à la surface de la comète) il faut qu'elle disparaisse; pour les intervalles de temps où juno est en orbite autour de jupiter il faut que juno suive jupiter -> tout ceci est configurable dans le fichier de configuration, je n'ai pas les ids ! +- [ ] ajouter dans le bandeau vertical un onglet LAYERS avec 3 choix possibles: Jupiter Thermosphere Model, HST Jupiter Observations, HST Saturn Observations ## Future ? @@ -33,6 +33,8 @@ ## 1.0.0-rc7 - [ ] Give the future data another color +- [x] Change the default interval (from 2 months in the past to one in the future) +- [x] Prepare horizontal lines in the time series - [x] Add buttons to the orbits plot zoom to inner or outer heliosphere - [x] Make the Y-Axis of time series dynamic (at the expense of animations) diff --git a/web/run.py b/web/run.py index 4ec3930..b5e973e 100755 --- a/web/run.py +++ b/web/run.py @@ -1148,8 +1148,8 @@ def cache_warmup(): Linked to SpaceWeather#edit in swapp.ls to get the default time interval. If you edit this code you'll need to edit the other as well and vice versa. """ - before = relativedelta(years=1) - after = relativedelta(weeks=3) + before = relativedelta(months=2) + after = relativedelta(months=1) today = datetime.datetime.now().replace(hour=0, minute=0, second=0) started_at = today - before stopped_at = today + after diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index 34e6e80..cf07148 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -14,7 +14,7 @@ return Target; }()); out$.SpaceWeather = SpaceWeather = (function(){ - "The main app, instanciated from an inline script.\nIt defaults to an interval starting a year ago, and ending in seven days.\n(both at midnight)"; + "The main app, instanciated from an inline script.\nIt defaults to an interval starting a month ago, and ending in a month.\n(both at midnight)"; SpaceWeather.displayName = 'SpaceWeather'; var API_TIME_FORMAT, INPUT_TIME_FORMAT, prototype = SpaceWeather.prototype, constructor = SpaceWeather; API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss"; @@ -42,8 +42,8 @@ SpaceWeather.prototype.init = function(){ "This is called by the inline bootstrap javascript code.\nThis ain't in the constructor because it might return a Promise later on.\n(for the loader, for example)"; var started_at, stopped_at, this$ = this; - started_at = moment().subtract(1, 'year').hours(0).minutes(0).seconds(0); - stopped_at = moment().add(3, 'week').hours(0).minutes(0).seconds(0); + started_at = moment().subtract(2, 'month').hours(0).minutes(0).seconds(0); + stopped_at = moment().add(1, 'month').hours(0).minutes(0).seconds(0); this.setStartAndStop(started_at, stopped_at); this.loadAndCreatePlots(started_at, stopped_at); window.addEventListener('resize', function(){ @@ -472,7 +472,7 @@ return this.title + " of " + this.target.name; }; TimeSeries.prototype.init = function(){ - var formatMillisecond, formatSecond, formatMinute, formatHour, formatDay, formatWeek, formatMonth, formatYear, multiFormat, clipId, dx, this$ = this; + var formatMillisecond, formatSecond, formatMinute, formatHour, formatDay, formatWeek, formatMonth, formatYear, multiFormat, clipId, i$, ref$, len$, line, lineElement, dx, this$ = this; console.info("Initializing plot of " + this + "…"); this.xDataExtent = d3.extent(this.data, function(d){ return d.x; @@ -543,6 +543,17 @@ this.pathWrapper = this.plotWrapper.append('g'); this.pathWrapper.attr("clip-path", "url(#" + clipId + ")"); this.path = this.pathWrapper.append('path').datum(this.data).classed('line', true); + this.horizontalLines = []; + if (this.options['horizontalLines']) { + for (i$ = 0, len$ = (ref$ = this.options['horizontalLines']).length; i$ < len$; ++i$) { + line = ref$[i$]; + lineElement = this.svg.append("line").attr("class", "line horitonal-line").style("stroke", "orange").style("stroke-dasharray", "3, 2"); + this.horizontalLines.push({ + 'element': lineElement, + 'config': line + }); + } + } this.brush = this.plotWrapper.append("g").attr("class", "brush"); this.mouseCanvas = this.plotWrapper.append("rect").style("fill", "none"); this.plotWrapper.append('g').classed('x axis', true); @@ -560,7 +571,7 @@ }; RATIO = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO; TimeSeries.prototype.resize = function(){ - var width, height; + var width, height, i$, ref$, len$, line, lineValue; width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right); height = Math.ceil(RATIO * width); this.plotWidth = width; @@ -571,6 +582,11 @@ this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom); this.clip.attr("width", width).attr("height", height); this.path.attr('d', this.line); + for (i$ = 0, len$ = (ref$ = this.horizontalLines).length; i$ < len$; ++i$) { + line = ref$[i$]; + lineValue = this.yScale(line['config']['value']) + this.margin.top; + line['element'].attr("x1", this.margin.left).attr("y1", lineValue).attr("x2", this.margin.left + width).attr("y2", lineValue); + } this.xAxis.scale(this.xScale); this.yAxis.scale(this.yScale); this.xAxis.ticks(Math.floor(width / 80.0)); diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index cb38a7a..ec54ef5 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -31,7 +31,7 @@ class Target export class SpaceWeather """ The main app, instanciated from an inline script. - It defaults to an interval starting a year ago, and ending in seven days. + It defaults to an interval starting two months ago, and ending in a month. (both at midnight) """ @@ -75,8 +75,8 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE # Default time interval is from one year ago to three weeks ahead. # We set the h/m/s to zero to benefit from a daily cache. # If you edit these values you need to change the cache warmup too (run.py) - started_at = moment().subtract(1, 'year').hours(0).minutes(0).seconds(0) - stopped_at = moment().add(3, 'week').hours(0).minutes(0).seconds(0) + started_at = moment().subtract(2, 'month').hours(0).minutes(0).seconds(0) + stopped_at = moment().add(1, 'month').hours(0).minutes(0).seconds(0) @setStartAndStop(started_at, stopped_at) @loadAndCreatePlots(started_at, stopped_at) window.addEventListener 'resize', ~> @resize() @@ -434,6 +434,15 @@ export class TimeSeries .datum(@data) .classed('line', true) + @horizontalLines = [] + if @options['horizontalLines'] + for line in @options['horizontalLines'] + lineElement = @svg.append("line") + .attr("class", "line horitonal-line") + .style("stroke", "orange") # move to CSS + .style("stroke-dasharray", ("3, 2")) # idem + @horizontalLines.push({'element': lineElement, 'config': line}) + @brush = @plotWrapper.append("g") .attr("class", "brush") @@ -505,6 +514,13 @@ export class TimeSeries @path.attr('d', @line) + for line in @horizontalLines + lineValue = @yScale(line['config']['value']) + @margin.top + line['element'].attr("x1", @margin.left) + .attr("y1", lineValue) + .attr("x2", @margin.left + width) + .attr("y2", lineValue) + @xAxis.scale(@xScale) @yAxis.scale(@yScale) -- libgit2 0.21.2