mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add height and useLabel parameter to line-chart
Add chart of fixed property to consumer page
This commit is contained in:
Markus Grigull
parent
18ffeaccee
commit
e9c8459216
6 changed files with 55 additions and 48 deletions
|
|
@ -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, [[]], {
|
||||
|
|
|
|||
|
|
@ -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.[]')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<section id="lapMashupApp">
|
||||
<header class="row">
|
||||
<div id="title">
|
||||
Lab Mashup Visualization
|
||||
Control Centre – JRC Ispra
|
||||
</div>
|
||||
<div id="logos">
|
||||
<img src={{"assets/images/EU.svg"}} class="svg-logo" />
|
||||
|
|
|
|||
|
|
@ -6,25 +6,16 @@
|
|||
{{/if}}
|
||||
</td>
|
||||
<td valign="top" width="100%" height="100%" class="chart-cell">
|
||||
<h2>{{entityName}}</h2>
|
||||
|
||||
{{#if entityAvailable}}
|
||||
<h3>{{entityName}}</h3>
|
||||
|
||||
{{#if visibleProperty}}
|
||||
<h4>{{visibleProperty.name}} [{{visibleProperty.type}}]</h4>
|
||||
{{/if}}
|
||||
|
||||
{{line-chart data=visibleProperty}}
|
||||
{{line-chart data=visibleProperty height="95%"}}
|
||||
|
||||
<!-- {{#if visibleProperty}}
|
||||
<h4 class="label-source">Source: {{visibleProperty.source}}</h4>
|
||||
{{/if}} -->
|
||||
{{else}}
|
||||
<h3>
|
||||
{{entityName}}
|
||||
<br />
|
||||
<br />
|
||||
Data not available
|
||||
</h3>
|
||||
<h3>Data not available</h3>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -8,19 +8,22 @@
|
|||
</td>
|
||||
<td rowspan="2" width="33%" style="padding-top: 20px; padding-bottom: 20px">
|
||||
<div class="layout-page">
|
||||
<h2>Simulation</h2>
|
||||
<p>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.<br />
|
||||
|
||||
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,</p>
|
||||
<h2>Consumer – JRC Petten</h2>
|
||||
<p>
|
||||
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.<br />
|
||||
|
||||
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,
|
||||
</p>
|
||||
{{line-chart data=S1Freq575 height="20%" useLabel=false}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td width="33%" style="padding-bottom: 20px;">
|
||||
{{entity-chart entity=S1Entity entityName="Transmission System"}}
|
||||
{{entity-chart entity=S1Entity entityName="Transmission – RWTH Aachen University"}}
|
||||
</td>
|
||||
<td width="33%" style="padding-bottom: 20px;">
|
||||
{{entity-chart entity=S2Entity entityName="Distribution System"}}
|
||||
{{entity-chart entity=S2Entity entityName="Distribution – Politecnico di Torino"}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue