diff --git a/app/components/bar-chart.js b/app/components/bar-chart.js new file mode 100644 index 0000000..40b3dc7 --- /dev/null +++ b/app/components/bar-chart.js @@ -0,0 +1,44 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'div', + classNames: ['bar-chart'], + attributeBindings: ['style'], + minValue: '', + maxValue: '', + width: 150, + height: 300, + + didInsertElement: function() { + this._drawChart(); + }, + + style: function() { + return 'width: ' + this.get('width') + '; height: ' + this.get('height') + ';'; + }.property('width', 'height'), + + _drawChart: function() { + // get element + var element = this.get('element'); + if (element && element.id) { + if (this.data) { + // chart options + var options = { xaxis: {} }; + + if (this.get('minValue') !== '') { + options.yaxis.min = this.get('minValue'); + } + + if (this.get('maxValue') !== '') { + options.yaxis.max = this.get('maxValue'); + } + + // draw chart + $.plot('#' + element.id, this.data, options); + } else { + // draw empty chart + $.plot('#' + element.id, [[]], { xaxis: { show: false }, yaxis: { show: false }}); + } + } + }.observes('data') +}); diff --git a/app/styles/app.css b/app/styles/app.css index 5459d5c..85c2b26 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -108,7 +108,7 @@ footer { } .svg-image { - width: 80%; + width: 50%; height: auto; } @@ -154,7 +154,7 @@ h2 { h3 { font-size: 0.85em; - font-weight: bold; + /*font-weight: bold;*/ } h4 { @@ -167,6 +167,7 @@ p { .gauge { padding-top: 20px; + padding-left: 20px; float: left; } @@ -174,6 +175,7 @@ p { .alarm { float: right; padding-top: 20px; + padding-right: 80px; } button { @@ -193,6 +195,25 @@ button:disabled { background-color: #ccc !important; } +.link-button { + display: block; + border: 3px solid green; + color: #333; + background-color: #beb; + + font-size: 14px; + font-weight: bold; + text-align: center; + + width: 120px; + height: 30px; + padding: 5px; +} + +.link-button:hover { + text-decoration: none !important; +} + #init-button { } diff --git a/app/templates/components/bar-chart.hbs b/app/templates/components/bar-chart.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/bar-chart.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/lab-mashup.hbs b/app/templates/lab-mashup.hbs index 74a17ff..944d8ab 100644 --- a/app/templates/lab-mashup.hbs +++ b/app/templates/lab-mashup.hbs @@ -20,7 +20,7 @@ - + @@ -39,7 +39,7 @@

- {{d3-alarm value=freq575Value alarmZones=freq575AlarmZones}} + {{d3-alarm value=freq575Value alarmZones=freq575AlarmZones size=35}} {{d3-gauge label="Freq" value=freq575Value minValue=49 maxValue=51 minorTicks=4 size=120 greenZones=freq575GreenZones yellowZones=freq575YellowZones}}
@@ -63,15 +63,13 @@

Control Center

- +

- Distribution grid monitoring -
- Voltage measurement + Distribution grid monitoring voltage measurement

{{line-chart data=Voltage203937 height="90%" xaxisLength=120 minValue=0.90 maxValue=1.05 label="RMS voltage [pu]"}} @@ -83,6 +81,9 @@
+
+ Technical +
@@ -107,12 +108,13 @@ {{/if}} - + -

+ {{bar-chart width='200px' height='250px'}} +

Turin - Piedmont - Italy