From cdf79b238419f6e9245601ab83c2895326cfe25b Mon Sep 17 00:00:00 2001 From: Goutte Date: Tue, 12 Dec 2017 17:01:01 +0100 Subject: [PATCH] Give the future data another color. --- CHANGELOG.md | 4 +++- web/static/js/swapp.js | 20 +++++++++++++++++--- web/static/js/swapp.ls | 11 +++++++++++ web/view/home.html.jinja2 | 19 +++++++++++++++++++ 4 files changed, 50 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5eb5bb8..a693a27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index cf07148..41cf230 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 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(){ diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index ec54ef5..4848d40 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -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: , y: } + # 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) diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index a2780ce..8f7ac46 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -98,6 +98,20 @@
+{# {{ icon('database') }} Layers#} +{##} +{#
#} +{#{% for layer in config.layers %}#} +{# #} +{#
#} +{#{% endfor %}#} +{#
#} +{##} +{#
#} + {# {{ icon('database') }} Inputs#} {##} {#
#} @@ -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); -- libgit2 0.21.2