From 1564733615f67a4a49eb3250abbe44396c7f0457 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Fri, 16 Oct 2015 00:36:02 +0200 Subject: [PATCH] Add static chart Tried to fix layout problems but could not complete --- app/components/line-chart.js | 2 +- app/components/static-chart.js | 57 +++++++++++++++++++ app/controllers/lab-mashup.js | 14 +++++ app/styles/app.css | 28 +++++++-- app/templates/application.hbs | 4 +- app/templates/components/entity-chart.hbs | 2 +- app/templates/components/static-chart.hbs | 1 + app/templates/lab-mashup.hbs | 24 +++++--- .../components/static-chart-test.js | 26 +++++++++ 9 files changed, 141 insertions(+), 17 deletions(-) create mode 100644 app/components/static-chart.js create mode 100644 app/templates/components/static-chart.hbs create mode 100644 tests/integration/components/static-chart-test.js diff --git a/app/components/line-chart.js b/app/components/line-chart.js index 4b41b85..de62be7 100644 --- a/app/components/line-chart.js +++ b/app/components/line-chart.js @@ -66,7 +66,7 @@ export default Ember.Component.extend({ max: lastTimestamp }, yaxis: { - + tickDecimals: 3 } } diff --git a/app/components/static-chart.js b/app/components/static-chart.js new file mode 100644 index 0000000..4b69bb8 --- /dev/null +++ b/app/components/static-chart.js @@ -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); + } + } +}); diff --git a/app/controllers/lab-mashup.js b/app/controllers/lab-mashup.js index 2ee223e..f453715 100644 --- a/app/controllers/lab-mashup.js +++ b/app/controllers/lab-mashup.js @@ -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.[]') }); diff --git a/app/styles/app.css b/app/styles/app.css index 0e8c27b..eb9ad46 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -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 */ diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 894641d..307ae67 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,7 +1,9 @@
- Control Centre – JRC Ispra + Multi-Site Real-Time Co-Simulation Integrated Lab +
+ Control Center – JRC Ispra
diff --git a/app/templates/components/entity-chart.hbs b/app/templates/components/entity-chart.hbs index 37e5d7f..16159e2 100644 --- a/app/templates/components/entity-chart.hbs +++ b/app/templates/components/entity-chart.hbs @@ -9,7 +9,7 @@

{{entityName}}

{{#if entityAvailable}} - {{line-chart data=visibleProperty height="95%"}} + {{line-chart data=visibleProperty height="80%"}}