Give the future data another color.

Goutte
1 parent 780828a8
Showing 4 changed files with 50 additions and 4 deletions Show diff stats
CHANGELOG.md
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -32,7 +32,9 @@
  
 ## 1.0.0-rc7
  
-- [ ] Give the future data another color
+
+- [ ] Add disabled layer buttons
+- [x] 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
@@ -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 month ago, and ending in a month.\n(both at midnight)";
+    "The main app, instanciated from an inline script.\nIt defaults to an interval starting two months 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";
@@ -452,6 +452,7 @@
     TimeSeries.displayName = 'TimeSeries';
     var RATIO, prototype = TimeSeries.prototype, constructor = TimeSeries;
     function TimeSeries(parameter, title, target, data, visible, container, options){
+      var now, res$, i$, ref$, len$, d;
       this.parameter = parameter;
       this.title = title;
       this.target = target;
@@ -466,6 +467,15 @@
       this.onMouseOut = bind$(this, 'onMouseOut', prototype);
       this.onMouseOver = bind$(this, 'onMouseOver', prototype);
       this.onMouseMove = bind$(this, 'onMouseMove', prototype);
+      now = moment();
+      res$ = [];
+      for (i$ = 0, len$ = (ref$ = this.data).length; i$ < len$; ++i$) {
+        d = ref$[i$];
+        if (moment(d.x) >= now) {
+          res$.push(d);
+        }
+      }
+      this.predictiveData = res$;
       this.init();
     }
     TimeSeries.prototype.toString = function(){
@@ -543,6 +553,7 @@
       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.predictiveDataPath = this.pathWrapper.append('path').datum(this.predictiveData).classed('predictive-line', true);
       this.horizontalLines = [];
       if (this.options['horizontalLines']) {
         for (i$ = 0, len$ = (ref$ = this.options['horizontalLines']).length; i$ < len$; ++i$) {
@@ -582,6 +593,7 @@
       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);
+      this.predictiveDataPath.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;
@@ -695,12 +707,14 @@
         t = this.svg.transition().duration(750);
         this.svg.select('.x.axis').transition(t).call(this.xAxis);
         this.svg.select('.y.axis').transition(t).call(this.yAxis);
-        return this.path.transition(t).attr('d', this.line);
+        this.path.transition(t).attr('d', this.line);
+        return this.predictiveDataPath.transition(t).attr('d', this.line);
       } else {
         console.debug("Applying zoom to hidden " + this + "…");
         this.svg.select('.x.axis').call(this.xAxis);
         this.svg.select('.y.axis').call(this.yAxis);
-        return this.path.attr('d', this.line);
+        this.path.attr('d', this.line);
+        return this.predictiveDataPath.attr('d', this.line);
       }
     };
     TimeSeries.prototype.showCursor = function(){
@@ -358,6 +358,11 @@ export class TimeSeries
     # title : string, more descriptive, shown on the left of the Y axis
     # target : target object, like described in configuration
     # data : list of {x: <datetime>, y: <float>}
+    # options: object with the following properties
+    #          started_at (Moment obj)
+    #          stopped_at (Moment obj)
+    now = moment()
+    @predictiveData = [d for d in @data when moment(d.x) >= now]
     @init()
  
   toString: -> "#{@title} of #{@target.name}"
@@ -433,6 +438,9 @@ export class TimeSeries
     @path = @pathWrapper.append('path')
                         .datum(@data)
                         .classed('line', true)
+    @predictiveDataPath = @pathWrapper.append('path')
+                                      .datum(@predictiveData)
+                                      .classed('predictive-line', true)
  
     @horizontalLines = []
     if @options['horizontalLines']
@@ -513,6 +521,7 @@ export class TimeSeries
          .attr("height", height)
  
     @path.attr('d', @line)
+    @predictiveDataPath.attr('d', @line)
  
     for line in @horizontalLines
       lineValue = @yScale(line['config']['value']) + @margin.top
@@ -621,11 +630,13 @@ export class TimeSeries
       @svg.select('.x.axis').transition(t).call(@xAxis);
       @svg.select('.y.axis').transition(t).call(@yAxis);
       @path.transition(t).attr('d', @line)
+      @predictiveDataPath.transition(t).attr('d', @line)
     else
       console.debug("Applying zoom to hidden #{@}…")
       @svg.select('.x.axis').call(@xAxis);
       @svg.select('.y.axis').call(@yAxis);
       @path.attr('d', @line)
+      @predictiveDataPath.attr('d', @line)
  
   showCursor: ->
     @focus.style("display", null)
@@ -98,6 +98,20 @@
     <br>
     <hr class="clear">
  
+{#    <span class="mdl-layout-title">{{ icon('database') }} Layers</span>#}
+{##}
+{#    <section class="section-drawer">#}
+{#{% for layer in config.layers %}#}
+{#      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">#}
+{#        <input type="radio" id="option-layer-{{ layer.slug }}" class="mdl-radio__button" name="layer_slug" value="{{ layer.slug }}" {{ 'checked' if layer.slug == layer_slug }}>#}
+{#        <span class="mdl-radio__label">{{ layer.name }}</span>#}
+{#      </label>#}
+{#      <br />#}
+{#{% endfor %}#}
+{#    </section>#}
+{##}
+{#    <hr class="clear">#}
+
 {#    <span class="mdl-layout-title">{{ icon('database') }} Inputs</span>#}
 {##}
 {#    <section class="section-drawer">#}
@@ -308,6 +322,11 @@
       stroke: steelblue;
       stroke-width: 1px;
     }
+    path.predictive-line {
+      fill: none;
+      stroke: #4cf561;
+      stroke-width: 2px;
+    }
     circle.cursor-circle {
       fill: black;
       stroke: rgba(20, 20, 20, 0.48);