mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add button test
Add dataSet and options parameter to static-chart component and switch data sets on button press.
This commit is contained in:
Markus Grigull
parent
fc3d79b49c
commit
15b4e05c5d
3 changed files with 58 additions and 39 deletions
|
|
@ -6,11 +6,13 @@ export default Ember.Component.extend({
|
|||
attributeBindings: ['style'],
|
||||
xaxisLength: 300,
|
||||
height: '100%',
|
||||
data: [],
|
||||
options: {},
|
||||
|
||||
didInsertElement: function() {
|
||||
this._drawPlot();
|
||||
},
|
||||
|
||||
|
||||
style: function() {
|
||||
return "height: " + this.get('height') + ";";
|
||||
}.property('height'),
|
||||
|
|
@ -18,40 +20,8 @@ export default Ember.Component.extend({
|
|||
_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: '%H:%M'
|
||||
},
|
||||
yaxis: {
|
||||
tickDecimals: 3
|
||||
}
|
||||
};
|
||||
|
||||
// setup plot data
|
||||
var plotData = [
|
||||
{
|
||||
label: 'Total consumption [MW]',
|
||||
data: [[900000.0, 4.61], [1800000.0, 4.49], [2700000.0, 4.51], [3600000.0, 4.45], [4500000.0, 4.90], [5400000.0, 4.76], [6300000.0, 4.77], [7200000.0, 4.70], [8100000.0, 4.73], [9000000.0, 4.80], [9900000.0, 4.89], [10800000.0, 4.81], [11700000.0, 4.65], [12600000.0, 4.59], [13500000.0, 4.65], [14400000.0, 4.82], [15300000.0, 4.62], [16200000.0, 4.73], [17100000.0, 4.62], [18000000.0, 4.65], [18900000.0, 4.77], [19800000.0, 4.79], [20700000.0, 5.57], [21600000.0, 6.14], [22500000.0, 8.33], [23400000.0, 9.56], [24300000.0, 10.94], [25200000.0, 11.03], [26100000.0, 12.34], [27000000.0, 13.36], [27900000.0, 14.13], [28800000.0, 15.00], [29700000.0, 15.61], [30600000.0, 16.70], [31500000.0, 17.21], [32400000.0, 18.31], [33300000.0, 17.85], [34200000.0, 18.04], [35100000.0, 17.72], [36000000.0, 18.02], [36900000.0, 17.64], [37800000.0, 18.26], [38700000.0, 18.30], [39600000.0, 18.72], [40500000.0, 18.60], [41400000.0, 18.54], [42300000.0, 18.31], [43200000.0, 16.91], [44100000.0, 13.61], [45000000.0, 12.47], [45900000.0, 15.83], [46800000.0, 15.73], [47700000.0, 16.38], [48600000.0, 16.19], [49500000.0, 17.06], [50400000.0, 16.71], [51300000.0, 15.89], [52200000.0, 15.99], [53100000.0, 15.50], [54000000.0, 15.58], [54900000.0, 15.66], [55800000.0, 15.50], [56700000.0, 15.63], [57600000.0, 15.67], [58500000.0, 15.79], [59400000.0, 15.39], [60300000.0, 14.85], [61200000.0, 13.97], [62100000.0, 13.31], [63000000.0, 12.83], [63900000.0, 12.53], [64800000.0, 11.78], [65700000.0, 11.56], [66600000.0, 11.67], [67500000.0, 10.97], [68400000.0, 10.20], [69300000.0, 9.59], [70200000.0, 8.94], [71100000.0, 8.97], [72000000.0, 9.86], [72900000.0, 10.25], [73800000.0, 9.54], [74700000.0, 10.04], [75600000.0, 9.98], [76500000.0, 9.44], [77400000.0, 8.91], [78300000.0, 8.39], [79200000.0, 7.00], [80100000.0, 5.07], [81000000.0, 4.80], [81900000.0, 4.67], [82800000.0, 4.19], [83700000.0, 4.16], [84600000.0, 4.25], [85500000.0, 4.40], [86400000.0, 4.38]],
|
||||
color: "rgb(51, 153, 255)"
|
||||
},
|
||||
{
|
||||
label: 'Total PV generation [MW]',
|
||||
data: [[900000.0, 0.00], [1800000.0, 0.00], [2700000.0, 0.00], [3600000.0, 0.00], [4500000.0, 0.00], [5400000.0, 0.00], [6300000.0, 0.00], [7200000.0, 0.00], [8100000.0, 0.00], [9000000.0, 0.00], [9900000.0, 0.00], [10800000.0, 0.00], [11700000.0, 0.00], [12600000.0, 0.00], [13500000.0, 0.00], [14400000.0, 0.00], [15300000.0, 0.00], [16200000.0, 0.00], [17100000.0, 0.00], [18000000.0, 0.00], [18900000.0, 0.00], [19800000.0, 0.00], [20700000.0, 0.00], [21600000.0, 0.00], [22500000.0, 0.00], [23400000.0, 0.00], [24300000.0, 0.00], [25200000.0, 0.15], [26100000.0, 0.63], [27000000.0, 0.63], [27900000.0, 0.54], [28800000.0, 0.27], [29700000.0, 0.43], [30600000.0, 0.46], [31500000.0, 0.19], [32400000.0, 0.35], [33300000.0, 0.47], [34200000.0, 0.44], [35100000.0, 0.62], [36000000.0, 0.61], [36900000.0, 0.85], [37800000.0, 1.48], [38700000.0, 2.35], [39600000.0, 1.08], [40500000.0, 1.20], [41400000.0, 2.71], [42300000.0, 1.84], [43200000.0, 1.83], [44100000.0, 1.48], [45000000.0, 4.24], [45900000.0, 0.43], [46800000.0, 0.43], [47700000.0, 0.23], [48600000.0, 0.19], [49500000.0, 0.09], [50400000.0, 0.02], [51300000.0, 0.73], [52200000.0, 0.86], [53100000.0, 0.85], [54000000.0, 0.85], [54900000.0, 1.76], [55800000.0, 2.37], [56700000.0, 2.37], [57600000.0, 2.13], [58500000.0, 1.76], [59400000.0, 1.68], [60300000.0, 2.57], [61200000.0, 2.37], [62100000.0, 1.59], [63000000.0, 2.52], [63900000.0, 1.58], [64800000.0, 1.06], [65700000.0, 0.89], [66600000.0, 0.73], [67500000.0, 0.86], [68400000.0, 1.54], [69300000.0, 0.85], [70200000.0, 0.65], [71100000.0, 0.43], [72000000.0, 0.23], [72900000.0, 0.19], [73800000.0, 0.09], [74700000.0, 0.02], [75600000.0, 0.01], [76500000.0, 0.00], [77400000.0, 0.00], [78300000.0, 0.00], [79200000.0, 0.00], [80100000.0, 0.00], [81000000.0, 0.00], [81900000.0, 0.00], [82800000.0, 0.00], [83700000.0, 0.00], [84600000.0, 0.00], [85500000.0, 0.00], [86400000.0, 0.00]],
|
||||
color: "rgb(255, 91, 51)"
|
||||
}
|
||||
];
|
||||
|
||||
// draw plot
|
||||
$.plot('#' + element.id, plotData, options);
|
||||
$.plot('#' + element.id, this.get('data'), this.get('options'));
|
||||
}
|
||||
}
|
||||
}.observes('data')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,42 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Controller.extend({
|
||||
dataSetOne: [
|
||||
{
|
||||
label: 'Total consumption [MW]',
|
||||
data: [[900000.0, 4.61], [1800000.0, 4.49], [2700000.0, 4.51], [3600000.0, 4.45], [4500000.0, 4.90], [5400000.0, 4.76], [6300000.0, 4.77], [7200000.0, 4.70], [8100000.0, 4.73], [9000000.0, 4.80], [9900000.0, 4.89], [10800000.0, 4.81], [11700000.0, 4.65], [12600000.0, 4.59], [13500000.0, 4.65], [14400000.0, 4.82], [15300000.0, 4.62], [16200000.0, 4.73], [17100000.0, 4.62], [18000000.0, 4.65], [18900000.0, 4.77], [19800000.0, 4.79], [20700000.0, 5.57], [21600000.0, 6.14], [22500000.0, 8.33], [23400000.0, 9.56], [24300000.0, 10.94], [25200000.0, 11.03], [26100000.0, 12.34], [27000000.0, 13.36], [27900000.0, 14.13], [28800000.0, 15.00], [29700000.0, 15.61], [30600000.0, 16.70], [31500000.0, 17.21], [32400000.0, 18.31], [33300000.0, 17.85], [34200000.0, 18.04], [35100000.0, 17.72], [36000000.0, 18.02], [36900000.0, 17.64], [37800000.0, 18.26], [38700000.0, 18.30], [39600000.0, 18.72], [40500000.0, 18.60], [41400000.0, 18.54], [42300000.0, 18.31], [43200000.0, 16.91], [44100000.0, 13.61], [45000000.0, 12.47], [45900000.0, 15.83], [46800000.0, 15.73], [47700000.0, 16.38], [48600000.0, 16.19], [49500000.0, 17.06], [50400000.0, 16.71], [51300000.0, 15.89], [52200000.0, 15.99], [53100000.0, 15.50], [54000000.0, 15.58], [54900000.0, 15.66], [55800000.0, 15.50], [56700000.0, 15.63], [57600000.0, 15.67], [58500000.0, 15.79], [59400000.0, 15.39], [60300000.0, 14.85], [61200000.0, 13.97], [62100000.0, 13.31], [63000000.0, 12.83], [63900000.0, 12.53], [64800000.0, 11.78], [65700000.0, 11.56], [66600000.0, 11.67], [67500000.0, 10.97], [68400000.0, 10.20], [69300000.0, 9.59], [70200000.0, 8.94], [71100000.0, 8.97], [72000000.0, 9.86], [72900000.0, 10.25], [73800000.0, 9.54], [74700000.0, 10.04], [75600000.0, 9.98], [76500000.0, 9.44], [77400000.0, 8.91], [78300000.0, 8.39], [79200000.0, 7.00], [80100000.0, 5.07], [81000000.0, 4.80], [81900000.0, 4.67], [82800000.0, 4.19], [83700000.0, 4.16], [84600000.0, 4.25], [85500000.0, 4.40], [86400000.0, 4.38]],
|
||||
color: "rgb(51, 153, 255)"
|
||||
}
|
||||
],
|
||||
dataSetTwo: [
|
||||
{
|
||||
label: 'Total PV generation [MW]',
|
||||
data: [[900000.0, 0.00], [1800000.0, 0.00], [2700000.0, 0.00], [3600000.0, 0.00], [4500000.0, 0.00], [5400000.0, 0.00], [6300000.0, 0.00], [7200000.0, 0.00], [8100000.0, 0.00], [9000000.0, 0.00], [9900000.0, 0.00], [10800000.0, 0.00], [11700000.0, 0.00], [12600000.0, 0.00], [13500000.0, 0.00], [14400000.0, 0.00], [15300000.0, 0.00], [16200000.0, 0.00], [17100000.0, 0.00], [18000000.0, 0.00], [18900000.0, 0.00], [19800000.0, 0.00], [20700000.0, 0.00], [21600000.0, 0.00], [22500000.0, 0.00], [23400000.0, 0.00], [24300000.0, 0.00], [25200000.0, 0.15], [26100000.0, 0.63], [27000000.0, 0.63], [27900000.0, 0.54], [28800000.0, 0.27], [29700000.0, 0.43], [30600000.0, 0.46], [31500000.0, 0.19], [32400000.0, 0.35], [33300000.0, 0.47], [34200000.0, 0.44], [35100000.0, 0.62], [36000000.0, 0.61], [36900000.0, 0.85], [37800000.0, 1.48], [38700000.0, 2.35], [39600000.0, 1.08], [40500000.0, 1.20], [41400000.0, 2.71], [42300000.0, 1.84], [43200000.0, 1.83], [44100000.0, 1.48], [45000000.0, 4.24], [45900000.0, 0.43], [46800000.0, 0.43], [47700000.0, 0.23], [48600000.0, 0.19], [49500000.0, 0.09], [50400000.0, 0.02], [51300000.0, 0.73], [52200000.0, 0.86], [53100000.0, 0.85], [54000000.0, 0.85], [54900000.0, 1.76], [55800000.0, 2.37], [56700000.0, 2.37], [57600000.0, 2.13], [58500000.0, 1.76], [59400000.0, 1.68], [60300000.0, 2.57], [61200000.0, 2.37], [62100000.0, 1.59], [63000000.0, 2.52], [63900000.0, 1.58], [64800000.0, 1.06], [65700000.0, 0.89], [66600000.0, 0.73], [67500000.0, 0.86], [68400000.0, 1.54], [69300000.0, 0.85], [70200000.0, 0.65], [71100000.0, 0.43], [72000000.0, 0.23], [72900000.0, 0.19], [73800000.0, 0.09], [74700000.0, 0.02], [75600000.0, 0.01], [76500000.0, 0.00], [77400000.0, 0.00], [78300000.0, 0.00], [79200000.0, 0.00], [80100000.0, 0.00], [81000000.0, 0.00], [81900000.0, 0.00], [82800000.0, 0.00], [83700000.0, 0.00], [84600000.0, 0.00], [85500000.0, 0.00], [86400000.0, 0.00]],
|
||||
color: "rgb(255, 91, 51)"
|
||||
}
|
||||
],
|
||||
dataSet: [],
|
||||
dataOptions: {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
xaxis: {
|
||||
mode: 'time',
|
||||
timeformat: '%H:%M'
|
||||
},
|
||||
yaxis: {
|
||||
tickDecimals: 3
|
||||
}
|
||||
},
|
||||
|
||||
init: function() {
|
||||
this.set('dataSet', this.get('dataSetOne'));
|
||||
},
|
||||
|
||||
S1Entity: function() {
|
||||
return this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
}.property('model.[]'),
|
||||
|
|
@ -8,25 +44,35 @@ export default Ember.Controller.extend({
|
|||
S2Entity: function() {
|
||||
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.[]'),
|
||||
|
||||
|
||||
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.[]')
|
||||
}.property('model.[]'),
|
||||
|
||||
actions: {
|
||||
resetData: function() {
|
||||
this.set('dataSet', this.get('dataSetOne'));
|
||||
},
|
||||
|
||||
eventData: function() {
|
||||
this.set('dataSet', this.get('dataSetTwo'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
</td>
|
||||
<td width="50%" style="padding-top: 20px;">
|
||||
<div class="layout-page">
|
||||
<button {{action 'resetData'}}>Reset</button>
|
||||
<button {{action 'eventData'}}>Event</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -17,6 +19,7 @@
|
|||
</td>
|
||||
<td width="50%" style="padding-bottom: 20px;">
|
||||
<div class="layout-page">
|
||||
{{static-chart data=dataSet options=dataOptions}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue