diff --git a/app/components/line-chart.js b/app/components/line-chart.js index d5be97f..4b41b85 100644 --- a/app/components/line-chart.js +++ b/app/components/line-chart.js @@ -3,8 +3,11 @@ import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'div', classNames: ['line-chart'], - xaxisLength: 60, + attributeBindings: ['style'], + xaxisLength: 300, updateTime: 100, + height: '100%', + useLabel: true, init: function() { this._super(); @@ -22,6 +25,10 @@ export default Ember.Component.extend({ dataDidChange: function() { this._drawPlot(); }, + + style: function() { + return "height: " + this.get('height') + ";"; + }.property('height'), _drawPlot: function() { var element = this.get('element'); @@ -72,13 +79,18 @@ export default Ember.Component.extend({ options.yaxis.max = this.data.get('maxValue'); } + // setup plot data + var plotData = { + data: values, + color: "rgb(51, 153, 255)" + } + + if (this.get('useLabel')) { + plotData.label = this.data.get('name') + " [" + this.data.get('type') + "]"; + } + // draw plot - $.plot('#' + element.id, [ - { - data: values, - color: "rgb(51, 153, 255)" - } - ], options); + $.plot('#' + element.id, [plotData], options); } else { // display empty chart $.plot('#' + element.id, [[]], { diff --git a/app/controllers/lab-mashup.js b/app/controllers/lab-mashup.js index f386b6a..2ee223e 100644 --- a/app/controllers/lab-mashup.js +++ b/app/controllers/lab-mashup.js @@ -2,26 +2,17 @@ import Ember from 'ember'; export default Ember.Controller.extend({ S1Entity: function() { - var entity = null; - - this.model.forEach(function (_entity) { - if (_entity.id === 'S1_ElectricalGrid') { - entity = _entity; - } - }); - - return entity; + return this.model.findBy('id', 'S1_ElectricalGrid'); }.property('model.[]'), S2Entity: function() { - var entity = null; - - this.model.forEach(function (_entity) { - if (_entity.id === 'S2_ElectricalGrid') { - entity = _entity; - } - }); - - return entity; - }.property('model.[]') + return this.model.findBy('id', 'S2_ElectricalGrid'); + }.property('model.[]'), + + S1Freq575: function() { + var entity = this.model.findBy('id', 'S1_ElectricalGrid'); + if (entity) { + return entity.get('properties').findBy('name', 'Freq_575'); + } + }.property('model.[]') }); diff --git a/app/styles/app.css b/app/styles/app.css index 4259504..0e8c27b 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -128,7 +128,9 @@ footer { } h2 { - font-size: 2em; + font-size: 1.2em; + + text-align: left; } h3 { @@ -139,6 +141,10 @@ h4 { font-size: 0.8em; } +p { + font-size: 0.75em; +} + /* * Layout */ @@ -172,13 +178,17 @@ h4 { padding: 20px; } -.layout-page h3 { +.layout-page h2 { text-align: center; margin: 0; margin-bottom: 5px; } +.layout-page h3 { + text-align: center; +} + .page-grid { width: 100%; height: 100%; diff --git a/app/templates/application.hbs b/app/templates/application.hbs index cef1559..894641d 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,7 +1,7 @@
- Lab Mashup Visualization + Control Centre – JRC Ispra
diff --git a/app/templates/components/entity-chart.hbs b/app/templates/components/entity-chart.hbs index 32f9076..37e5d7f 100644 --- a/app/templates/components/entity-chart.hbs +++ b/app/templates/components/entity-chart.hbs @@ -6,25 +6,16 @@ {{/if}} +

{{entityName}}

+ {{#if entityAvailable}} -

{{entityName}}

- - {{#if visibleProperty}} -

{{visibleProperty.name}} [{{visibleProperty.type}}]

- {{/if}} - - {{line-chart data=visibleProperty}} + {{line-chart data=visibleProperty height="95%"}} {{else}} -

- {{entityName}} -
-
- Data not available -

+

Data not available

{{/if}} diff --git a/app/templates/lab-mashup.hbs b/app/templates/lab-mashup.hbs index 6980b42..6ddb538 100644 --- a/app/templates/lab-mashup.hbs +++ b/app/templates/lab-mashup.hbs @@ -8,19 +8,22 @@
-

Simulation

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

+

Consumer – JRC Petten

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ + Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, +

+ {{line-chart data=S1Freq575 height="20%" useLabel=false}}
- {{entity-chart entity=S1Entity entityName="Transmission System"}} + {{entity-chart entity=S1Entity entityName="Transmission – RWTH Aachen University"}} - {{entity-chart entity=S2Entity entityName="Distribution System"}} + {{entity-chart entity=S2Entity entityName="Distribution – Politecnico di Torino"}}