Add new bar-chart component (wip)

Add support for multiple emberjs apps on nginx (configuration in ember).
Add small changes to the layout

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')
+});

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 {
 }
 

app/templates/components/bar-chart.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/lab-mashup.hbs

@@ -20,7 +20,7 @@
 				      <td style="width: 50%; padding-left: 20px">
 				      </td>
 				      <td style="width: 25%">
-					<img src={{"assets/images/TS_section/TS_fig1.svg"}} class="svg-image" style="float: right" />
+					<img src={{"assets/images/TS_section/TS_fig1.svg"}} class="svg-image" style="float: right; margin-top: -20px" />
 				      </td>
 				    </tr>
 				    <tr style="height: 85%">
@@ -39,7 +39,7 @@
 					    </ul>
 					  </p>
 					<div style="padding-top: 40px;">
-					  {{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}}
 					</div>
 					<div style="width: 100%; margin-top: 150px">
@@ -63,15 +63,13 @@
 					      <h2>Control Center</h2>
 					    </td>
 					    <td style="width: 25%">
-					      <img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" style="float: right" />
+					      <img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" style="float: right; width: 40% !important" />
 					    </td>
 					  </tr>
 					  <tr style="height: 75%">
 					    <td style="width: 50%" colspan="2">
 					      <h3 style="text-align: center">
-						Distribution grid monitoring
+						Distribution grid monitoring voltage measurement
-						<br />
-						Voltage measurement
 					      </h3>
 
 					      {{line-chart data=Voltage203937 height="90%" xaxisLength=120 minValue=0.90  maxValue=1.05 label="RMS voltage [pu]"}}
@@ -83,6 +81,9 @@
 						<div style="position: relative; top: 30%; left: 30%">
 						  <button {{action 'eventData'}} disabled={{eventState}} id="event-button">ABNORMAL<br />cloudy + high demand</button>
 						</div>
+						<div style="position: relative; top: 48%; left: 76%">
+						  <a class="link-button" href="/technical/" target="_blank">Technical</a>
+						</div>
 					    </td>
 					  </tr>
 					</table>
@@ -107,12 +108,13 @@
 					{{/if}}
 				      </td>
 				      <td style="width: 25%">
-					<img src={{"assets/images/DS_section/DS_fig1.svg"}} class="svg-image" style="float: right" />
+					<img src={{"assets/images/DS_section/DS_fig1.svg"}} class="svg-image" style="float: right; margin-top: -20px;" />
 				      </td>
 				    </tr>
 				    <tr>
 				      <td colspan="2">
-					<p style="">
+					{{bar-chart width='200px' height='250px'}}
+					<p style="padding-top: 25px;">
 					  Turin - Piedmont - Italy<br />
 					  <ul>
 					    <li>Medium Voltage lines derived from Stura HV/MV</li>
@@ -135,7 +137,7 @@
 					      <h2>Prosumer behavior</h2>
 					    </td>
 					    <td style="width: 25%">
-					      <img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" style="float: right" />
+					      <img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" style="float: right; width: 40%;" />
 					    </td>
 					  </tr>
 					  <tr style="height: 75%">

config/environment.js

@@ -5,7 +5,7 @@ module.exports = function(environment) {
     modulePrefix: 'lab-mashup',
     environment: environment,
     baseURL: '/',
-    locationType: 'auto',
+    locationType: 'none',
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
@@ -60,6 +60,7 @@ module.exports = function(environment) {
 
   if (environment === 'production') {
     ENV.APP.API_HOST = 'http://46.101.131.212:80';
+    ENV.baseURL = '/simple/';
 
     ENV['ember-cli-mirage'] = {
       enabled: false

public/assets/images/ControlCenter_section/CS_fig1.svg

@@ -10,8 +10,8 @@
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="1547.9999"
+   width="766.37006"
-   height="624"
+   height="395.80264"
    id="svg2"
    version="1.1"
    inkscape:version="0.48.0 r9654"
@@ -64,8 +64,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.70710682"
-     inkscape:cx="1149.2192"
+     inkscape:cx="504.95259"
-     inkscape:cy="142.06867"
+     inkscape:cy="330.70026"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -94,17 +94,10 @@
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(4054.2698,7820.3408)">
+     transform="translate(3410.0032,7120.6692)">
-    <rect
-       style="color:#000000;fill:none;stroke:none;stroke-width:4.96899986;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2985-1-2-5-1-1-0"
-       width="821.06445"
-       height="409.59793"
-       x="-3602.3059"
-       y="-7763.5024" />
     <g
        id="g3129-0-8"
-       transform="matrix(5.6319941,0,0,-5.7141574,-3278.9378,-6448.2144)">
+       transform="matrix(5.6319941,0,0,-5.7141574,-3195.4992,-5906.5706)">
       <g
          id="g3131-7"
          clip-path="url(#clipPath3133-3-4)">
@@ -125,7 +118,7 @@
       </g>
     </g>
     <g
-       transform="matrix(1.1812552,0,0,1.1812552,-2933.3083,-7884.6353)"
+       transform="matrix(1.1812552,0,0,1.1812552,-2849.8697,-7342.9915)"
        id="layer1-2-4"
        inkscape:label="Ebene 1">
       <g
@@ -662,28 +655,21 @@
     </g>
     <text
        id="text3415-6-0"
-       x="-3289.2725"
+       x="-3205.834"
-       y="-7699.7817"
+       y="-7158.1382"
        style="font-size:39.0313797px;fill:#aa0000;stroke:none">
       <tspan
          style="font-size:85px;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#aa0000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
-         x="-3289.2725"
+         x="-3205.834"
          sodipodi:role="line"
-         y="-7699.7817"
+         y="-7158.1382"
          id="tspan3514-1" />
       <tspan
          style="font-size:85px;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#aa0000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
-         x="-3289.2725"
+         x="-3205.834"
          sodipodi:role="line"
-         y="-7593.5317"
+         y="-7051.8882"
          id="tspan3111">JRC Ispra</tspan>
     </text>
-    <rect
-       style="color:#000000;fill:none;stroke:none;stroke-width:4.96899986;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect3076"
-       width="1547.9999"
-       height="624"
-       x="-4054.2698"
-       y="-7820.3408" />
   </g>
 </svg>

public/assets/images/DS_section/DS_fig1.svg

@@ -10,8 +10,8 @@
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="1547.9999"
+   width="1205.673"
-   height="624"
+   height="403.98267"
    id="svg2"
    version="1.1"
    inkscape:version="0.48.0 r9654"
@@ -77,8 +77,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.50000002"
-     inkscape:cx="1145.752"
+     inkscape:cx="1019.7521"
-     inkscape:cy="55.108979"
+     inkscape:cy="661.10913"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -95,7 +95,7 @@
      inkscape:guide-bbox="true">
     <sodipodi:guide
        orientation="-0.70710678,0.70710678"
-       position="-513.08995,826.51197"
+       position="-639.08985,1432.5121"
        id="guide3002" />
   </sodipodi:namedview>
   <metadata
@@ -114,21 +114,21 @@
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(4113.1064,8052.2466)">
+     transform="translate(3987.1064,7226.2292)">
     <text
        id="text3415-6"
-       x="-3502.856"
+       x="-3572.856"
-       y="-7853.0674"
+       y="-7127.0674"
        style="font-size:39.0313797px;fill:#aa0000;stroke:none">
       <tspan
          style="font-size:85px;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#aa0000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
-         x="-3502.856"
+         x="-3572.856"
          sodipodi:role="line"
-         y="-7853.0674"
+         y="-7127.0674"
          id="tspan3514">Politecnico di Torino</tspan>
     </text>
     <g
-       transform="matrix(1.0563462,0,0,1.0563462,-3864.9468,-8264.53)"
+       transform="matrix(1.0563462,0,0,1.0563462,-3934.9468,-7538.53)"
        id="layer1-0"
        inkscape:label="Ebene 1">
       <image
@@ -141,7 +141,7 @@
     </g>
     <g
        id="g3129-0-8-0"
-       transform="matrix(5.6319941,0,0,-5.7141574,-3263.2996,-6738.1306)">
+       transform="matrix(5.6319941,0,0,-5.7141574,-3333.2996,-6012.1306)">
       <g
          id="g3131-7-7"
          clip-path="url(#clipPath3133-3-4-7)">
@@ -161,12 +161,5 @@
         </g>
       </g>
     </g>
-    <rect
-       style="color:#000000;fill:none;stroke:none;stroke-width:4.96899986;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect3076"
-       width="1547.9999"
-       height="624"
-       x="-4113.1064"
-       y="-8052.2466" />
   </g>
 </svg>

tests/integration/components/bar-chart-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('bar-chart', 'Integration | Component | bar 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`{{bar-chart}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#bar-chart}}
+      template block text
+    {{/bar-chart}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});