mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-30 00:00:13 +01:00
Add static chart
Tried to fix layout problems but could not complete
This commit is contained in:
Markus Grigull
parent
92d3d8a883
commit
1564733615
9 changed files with 141 additions and 17 deletions
|
|
@ -66,7 +66,7 @@ export default Ember.Component.extend({
|
|||
max: lastTimestamp
|
||||
},
|
||||
yaxis: {
|
||||
|
||||
tickDecimals: 3
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
57
app/components/static-chart.js
Normal file
57
app/components/static-chart.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
tagName: 'div',
|
||||
classNames: ['line-chart'],
|
||||
attributeBindings: ['style'],
|
||||
xaxisLength: 300,
|
||||
height: '100%',
|
||||
|
||||
didInsertElement: function() {
|
||||
this._drawPlot();
|
||||
},
|
||||
|
||||
style: function() {
|
||||
return "height: " + this.get('height') + ";";
|
||||
}.property('height'),
|
||||
|
||||
_drawPlot: function() {
|
||||
var element = this.get('element');
|
||||
if (element && element.id) {
|
||||
// generate plot options
|
||||
var options = {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
xaxis: {
|
||||
mode: 'time',
|
||||
timeformat: '%M:%S'
|
||||
},
|
||||
yaxis: {
|
||||
tickDecimals: 3
|
||||
}
|
||||
}
|
||||
|
||||
// setup plot data
|
||||
var plotData = [
|
||||
{
|
||||
label: 'Total consumption [MW]',
|
||||
data: [[900.0, 4.61], [1800.0, 4.49], [2700.0, 4.51], [3600.0, 4.45], [4500.0, 4.90], [5400.0, 4.76], [6300.0, 4.77], [7200.0, 4.70], [8100.0, 4.73], [9000.0, 4.80], [9900.0, 4.89], [10800.0, 4.81], [11700.0, 4.65], [12600.0, 4.59], [13500.0, 4.65], [14400.0, 4.82], [15300.0, 4.62], [16200.0, 4.73], [17100.0, 4.62], [18000.0, 4.65], [18900.0, 4.77], [19800.0, 4.79], [20700.0, 5.57], [21600.0, 6.14], [22500.0, 8.33], [23400.0, 9.56], [24300.0, 10.94], [25200.0, 11.03], [26100.0, 12.34], [27000.0, 13.36], [27900.0, 14.13], [28800.0, 15.00], [29700.0, 15.61], [30600.0, 16.70], [31500.0, 17.21], [32400.0, 18.31], [33300.0, 17.85], [34200.0, 18.04], [35100.0, 17.72], [36000.0, 18.02], [36900.0, 17.64], [37800.0, 18.26], [38700.0, 18.30], [39600.0, 18.72], [40500.0, 18.60], [41400.0, 18.54], [42300.0, 18.31], [43200.0, 16.91], [44100.0, 13.61], [45000.0, 12.47], [45900.0, 15.83], [46800.0, 15.73], [47700.0, 16.38], [48600.0, 16.19], [49500.0, 17.06], [50400.0, 16.71], [51300.0, 15.89], [52200.0, 15.99], [53100.0, 15.50], [54000.0, 15.58], [54900.0, 15.66], [55800.0, 15.50], [56700.0, 15.63], [57600.0, 15.67], [58500.0, 15.79], [59400.0, 15.39], [60300.0, 14.85], [61200.0, 13.97], [62100.0, 13.31], [63000.0, 12.83], [63900.0, 12.53], [64800.0, 11.78], [65700.0, 11.56], [66600.0, 11.67], [67500.0, 10.97], [68400.0, 10.20], [69300.0, 9.59], [70200.0, 8.94], [71100.0, 8.97], [72000.0, 9.86], [72900.0, 10.25], [73800.0, 9.54], [74700.0, 10.04], [75600.0, 9.98], [76500.0, 9.44], [77400.0, 8.91], [78300.0, 8.39], [79200.0, 7.00], [80100.0, 5.07], [81000.0, 4.80], [81900.0, 4.67], [82800.0, 4.19], [83700.0, 4.16], [84600.0, 4.25], [85500.0, 4.40], [86400.0, 4.38]],
|
||||
color: "rgb(51, 153, 255)"
|
||||
},
|
||||
{
|
||||
label: 'Total PV generation [MW]',
|
||||
data: [[900.0, 0.00], [1800.0, 0.00], [2700.0, 0.00], [3600.0, 0.00], [4500.0, 0.00], [5400.0, 0.00], [6300.0, 0.00], [7200.0, 0.00], [8100.0, 0.00], [9000.0, 0.00], [9900.0, 0.00], [10800.0, 0.00], [11700.0, 0.00], [12600.0, 0.00], [13500.0, 0.00], [14400.0, 0.00], [15300.0, 0.00], [16200.0, 0.00], [17100.0, 0.00], [18000.0, 0.00], [18900.0, 0.00], [19800.0, 0.00], [20700.0, 0.00], [21600.0, 0.00], [22500.0, 0.00], [23400.0, 0.00], [24300.0, 0.00], [25200.0, 0.15], [26100.0, 0.63], [27000.0, 0.63], [27900.0, 0.54], [28800.0, 0.27], [29700.0, 0.43], [30600.0, 0.46], [31500.0, 0.19], [32400.0, 0.35], [33300.0, 0.47], [34200.0, 0.44], [35100.0, 0.62], [36000.0, 0.61], [36900.0, 0.85], [37800.0, 1.48], [38700.0, 2.35], [39600.0, 1.08], [40500.0, 1.20], [41400.0, 2.71], [42300.0, 1.84], [43200.0, 1.83], [44100.0, 1.48], [45000.0, 4.24], [45900.0, 0.43], [46800.0, 0.43], [47700.0, 0.23], [48600.0, 0.19], [49500.0, 0.09], [50400.0, 0.02], [51300.0, 0.73], [52200.0, 0.86], [53100.0, 0.85], [54000.0, 0.85], [54900.0, 1.76], [55800.0, 2.37], [56700.0, 2.37], [57600.0, 2.13], [58500.0, 1.76], [59400.0, 1.68], [60300.0, 2.57], [61200.0, 2.37], [62100.0, 1.59], [63000.0, 2.52], [63900.0, 1.58], [64800.0, 1.06], [65700.0, 0.89], [66600.0, 0.73], [67500.0, 0.86], [68400.0, 1.54], [69300.0, 0.85], [70200.0, 0.65], [71100.0, 0.43], [72000.0, 0.23], [72900.0, 0.19], [73800.0, 0.09], [74700.0, 0.02], [75600.0, 0.01], [76500.0, 0.00], [77400.0, 0.00], [78300.0, 0.00], [79200.0, 0.00], [80100.0, 0.00], [81000.0, 0.00], [81900.0, 0.00], [82800.0, 0.00], [83700.0, 0.00], [84600.0, 0.00], [85500.0, 0.00], [86400.0, 0.00]],
|
||||
color: "rgb(255, 91, 51)"
|
||||
}
|
||||
];
|
||||
|
||||
// draw plot
|
||||
$.plot('#' + element.id, plotData, options);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -14,5 +14,19 @@ export default Ember.Controller.extend({
|
|||
if (entity) {
|
||||
return entity.get('properties').findBy('name', 'Freq_575');
|
||||
}
|
||||
}.property('model.[]'),
|
||||
|
||||
S2Voltage203937: function() {
|
||||
var entity = this.model.findBy('id', 'S2_ElectricalGrid');
|
||||
if (entity) {
|
||||
return entity.get('properties').findBy('name', 'Voltage203937');
|
||||
}
|
||||
}.property('model.[]'),
|
||||
|
||||
S2Flow1551412_204871: function() {
|
||||
var entity = this.model.findBy('id', 'S2_ElectricalGrid');
|
||||
if (entity) {
|
||||
return entity.get('properties').findBy('name', 'Flow1551412_204871');
|
||||
}
|
||||
}.property('model.[]')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -68,14 +68,14 @@ header {
|
|||
}
|
||||
|
||||
header #title {
|
||||
font-size: 60px;
|
||||
font-size: 40px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-text-rendering: optimizeLegiblity;
|
||||
-moz-text-rendering: optimizeLegibitliy;
|
||||
|
||||
padding: 20px 0 20px 50px;
|
||||
padding: 10px 0 10px 50px;
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@ footer {
|
|||
}
|
||||
|
||||
.svg-image {
|
||||
width: 100%;
|
||||
width: 75%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -127,6 +127,13 @@ footer {
|
|||
height: 50px !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
|
||||
|
|
@ -173,9 +180,12 @@ p {
|
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 9px 18px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
height: 100%;
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-page h2 {
|
||||
|
|
@ -222,6 +232,14 @@ p {
|
|||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
#simulation-page {
|
||||
|
||||
}
|
||||
|
||||
#consumer-page h2 {
|
||||
margin: 10px 0 0 0 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Components
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<section id="lapMashupApp">
|
||||
<header class="row">
|
||||
<div id="title">
|
||||
Control Centre – JRC Ispra
|
||||
Multi-Site Real-Time Co-Simulation Integrated Lab
|
||||
<br />
|
||||
Control Center – JRC Ispra
|
||||
</div>
|
||||
<div id="logos">
|
||||
<img src={{"assets/images/EU.svg"}} class="svg-logo" />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<h2>{{entityName}}</h2>
|
||||
|
||||
{{#if entityAvailable}}
|
||||
{{line-chart data=visibleProperty height="95%"}}
|
||||
{{line-chart data=visibleProperty height="80%"}}
|
||||
|
||||
<!-- {{#if visibleProperty}}
|
||||
<h4 class="label-source">Source: {{visibleProperty.source}}</h4>
|
||||
|
|
|
|||
1
app/templates/components/static-chart.hbs
Normal file
1
app/templates/components/static-chart.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{yield}}
|
||||
|
|
@ -2,19 +2,25 @@
|
|||
<table class="grid">
|
||||
<tr height="50%">
|
||||
<td colspan="2" style="padding-top: 20px;">
|
||||
<div class="layout-page" width="66%">
|
||||
<div class="layout-page" id="simulation-page" width="66%" height="100%">
|
||||
<img src={{"assets/images/TS_DS_grid_withSimulators.svg"}} class="svg-image" />
|
||||
</div>
|
||||
</td>
|
||||
<td rowspan="2" width="33%" style="padding-top: 20px; padding-bottom: 20px">
|
||||
<div class="layout-page">
|
||||
<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 />
|
||||
<div class="layout-page" id="consumer-page">
|
||||
<h1>Consumer – JRC Petten</h1>
|
||||
|
||||
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}}
|
||||
<h2>Distribution grid: consumption and PV generation</h2>
|
||||
{{static-chart height="35%"}}
|
||||
|
||||
<h2>Voltage203937 [pu]</h2>
|
||||
{{line-chart data=S2Voltage203937 height="15%" useLabel=false}}
|
||||
|
||||
<h2>Flow1551412_204871 [MW]</h2>
|
||||
{{line-chart data=S2Flow1551412_204871 height="15%" useLabel=false}}
|
||||
|
||||
<h2>Frequency at the substation bus [Hz]</h2>
|
||||
{{line-chart data=S1Freq575 height="15%" useLabel=false}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
26
tests/integration/components/static-chart-test.js
Normal file
26
tests/integration/components/static-chart-test.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { moduleForComponent, test } from 'ember-qunit';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
moduleForComponent('static-chart', 'Integration | Component | static chart', {
|
||||
integration: true
|
||||
});
|
||||
|
||||
test('it renders', function(assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
||||
|
||||
this.render(hbs`{{static-chart}}`);
|
||||
|
||||
assert.equal(this.$().text().trim(), '');
|
||||
|
||||
// Template block usage:
|
||||
this.render(hbs`
|
||||
{{#static-chart}}
|
||||
template block text
|
||||
{{/static-chart}}
|
||||
`);
|
||||
|
||||
assert.equal(this.$().text().trim(), 'template block text');
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue