mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-30 00:00:13 +01:00
Add new bar-chart component (wip)
Add support for multiple emberjs apps on nginx (configuration in ember). Add small changes to the layout
This commit is contained in:
Markus Grigull
parent
ae1def6f26
commit
e2866057a7
10 changed files with 164 additions and 104 deletions
44
app/components/bar-chart.js
Normal file
44
app/components/bar-chart.js
Normal file
|
|
@ -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')
|
||||
});
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
||||
|
|
|
|||
1
app/templates/components/bar-chart.hbs
Normal file
1
app/templates/components/bar-chart.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{yield}}
|
||||
|
|
@ -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
|
||||
<br />
|
||||
Voltage measurement
|
||||
Distribution grid monitoring 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%">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
height="624"
|
||||
width="766.37006"
|
||||
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:cy="142.06867"
|
||||
inkscape:cx="504.95259"
|
||||
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)">
|
||||
<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" />
|
||||
transform="translate(3410.0032,7120.6692)">
|
||||
<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"
|
||||
y="-7699.7817"
|
||||
x="-3205.834"
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
|
@ -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"
|
||||
height="624"
|
||||
width="1205.673"
|
||||
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:cy="55.108979"
|
||||
inkscape:cx="1019.7521"
|
||||
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"
|
||||
y="-7853.0674"
|
||||
x="-3572.856"
|
||||
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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 61 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
26
tests/integration/components/bar-chart-test.js
Normal file
26
tests/integration/components/bar-chart-test.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue