Make the Y-Axis of time series dynamic

Goutte
1 parent ff4f2af5
Showing 4 changed files with 54 additions and 23 deletions Show diff stats
CHANGELOG.md
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
 ## Nicolas
 - [ ] séries temporelles en échelle log ou linéaire
-- [ ] permettre à l'utilisateur de choisir inner heliosphere (jusqu'à mars) ou outer heliosphere (jusqu'à saturne) pour la visualisation des éphémérides planétaires
+      /!\ D3 ne supporte pes les échelles log pour un domaine qui contient le 0.
 - [ ] 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)
@@ -12,6 +12,7 @@
     * submit (envoyé ensuite vers un webservice d'AMDA à construire)
 - [ ] prévoir un bouton EPN-TAP ou l'on mettrait l'outil en relation avec le client VESPA développé par nathanaël
 - [ ] 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 !
 ## Future ?
@@ -32,6 +33,7 @@
 ## 1.0.0-rc7
 - [ ] Give the future data another color
+- [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)
@@ -36,7 +36,7 @@
       this.configuration['parameters'].forEach(function(p){
         return this$.parameters[p['id']] = p;
       });
-      this.orbiter = null;
+      this.orbits = null;
       this.time_series = [];
     }
     SpaceWeather.prototype.init = function(){
@@ -830,24 +830,25 @@
     Orbits.prototype.clear = function(){
       return $(this.svg.node()).remove();
     };
-    Orbits.prototype.resize = function(animate){
-      var width, height, extremum, s, o, slug, ref$, config, t, t1, this$ = this;
+    Orbits.prototype.resize = function(animate, extremum){
+      var width, height, s, o, slug, ref$, config, t, t1;
       animate == null && (animate = false);
+      extremum == null && (extremum = null);
       width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right);
       height = Math.ceil(1.0 * width);
       console.debug("Resizing orbits : " + width + " × " + height + "…");
-      extremum = 1.1 * d3.max((function(){
-        var ref$, results$ = [];
-        for (s in ref$ = this.orbiters) {
-          o = ref$[s];
-          if (!o.hidden) {
-            results$.push(s);
+      if (extremum === null) {
+        extremum = 1.1 * d3.max((function(){
+          var ref$, results$ = [];
+          for (s in ref$ = this.orbiters) {
+            o = ref$[s];
+            if (!o.hidden) {
+              results$.push(this.orbitersExtrema[s]);
+            }
           }
-        }
-        return results$;
-      }.call(this)), function(d){
-        return this$.orbitersExtrema[d];
-      });
+          return results$;
+        }.call(this)));
+      }
       this.xScale = d3.scaleLinear().domain([-1 * extremum, extremum]);
       this.yScale = d3.scaleLinear().domain([extremum, -1 * extremum]);
       this.xScale.range([0, width]);
@@ -904,6 +905,9 @@
       this.repositionOrbiter(slug, null, true);
       return this;
     };
+    Orbits.prototype.zoomToTarget = function(slug){
+      return this.resize(true, 1.1 * this.orbitersExtrema[slug]);
+    };
     Orbits.prototype.repositionOrbiter = function(slug, datum, animate){
       var data, el, t;
       animate == null && (animate = false);
@@ -63,8 +63,8 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     @configuration['parameters'].forEach (p) ~>
       @parameters[p['id']] = p
-    @orbiter = null    # our Orbiter defined below
-    @time_series = []  # a List of TimeSeries objects
+    @orbits = null     # an Orbiter instance (defined below)
+    @time_series = []  # a List of TimeSeries instances
   init: ->
     """
@@ -237,8 +237,6 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
           handleTarget(i+1)
       )
     handleTarget(0)
-
-
     this
   clearPlots: ->
@@ -784,15 +782,19 @@ export class Orbits
   clear: ->
     $(@svg.node()).remove()
-  resize: (animate = false) ->
+  resize: (animate = false, extremum = null) ->
     width = Math.ceil($(@container).width() - @margin.left - @margin.right)
     height = Math.ceil(1.0 * width)
     console.debug("Resizing orbits : #{width} × #{height}…")
-    extremum = 1.1 * d3.max([s for s, o of @orbiters when not o.hidden], (d) ~>
-      @orbitersExtrema[d]
-    )
+    if extremum == null
+      extremum = 1.1 * d3.max(
+        [@orbitersExtrema[s] for s, o of @orbiters when not o.hidden]
+      )
+#    extremum = 1.1 * d3.max([s for s, o of @orbiters when not o.hidden], (d) ~>
+#      @orbitersExtrema[d]
+#    )
     @xScale = d3.scaleLinear().domain([-1 * extremum, extremum])
     @yScale = d3.scaleLinear().domain([extremum, -1 * extremum])
@@ -861,6 +863,9 @@ export class Orbits
     this
+  zoomToTarget: (slug) ->
+    @resize(true, 1.1 * @orbitersExtrema[slug])
+
   repositionOrbiter: (slug, datum, animate = false) ->
     data = @data[slug]
     if not data.length then return
@@ -133,6 +133,16 @@
       <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
         <section id="orbits"></section>
         <div class="plots-actions plots-buttons">
+          <button id="zoom_inner_heliosphere" class="mdl-button mdl-button--raised mdl-button--primary"
+                  title="Zoom to the inner heliosphere.">
+            Zoom in
+          </button>
+          <button id="zoom_outer_heliosphere" class="mdl-button mdl-button--raised mdl-button--primary"
+                  title="Zoom to the outer heliosphere.">
+            Zoom out
+          </button>
+        </div>
+        <div class="plots-actions plots-buttons">
           <button id="download" class="mdl-button mdl-button--raised mdl-button--primary"
                   title="Download the raw data for each selected target and parameters.">
             Download
@@ -662,6 +672,16 @@ jQuery().ready(function($){
     });
     return false;
   });
+  $('#zoom_inner_heliosphere').on("click", function(e){
+    console.info("Zooming to inner heliosphere…");
+    sw.orbits.zoomToTarget('mars');
+    return false;
+  });
+  $('#zoom_outer_heliosphere').on("click", function(e){
+    console.info("Zooming to outer heliosphere…");
+    sw.orbits.resize(true);
+    return false;
+  });
 });
 </script>