1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

Add fixed axis length to charts

Fix now really switching entities when chart was shown
This commit is contained in:
Markus Grigull 2015-10-09 13:13:44 +02:00
parent 14e29f91cc
commit 453638477e
3 changed files with 43 additions and 16 deletions

View file

@ -3,6 +3,7 @@ import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'div',
classNames: ['line-chart'],
xaxisLength: 30,
init: function() {
this._super();
@ -22,13 +23,29 @@ export default Ember.Component.extend({
},
_drawPlot: function() {
var elementId = this.get('elementId');
if (elementId) {
$.plot('#' + elementId, this.data);
}
var element = this.get('element');
if (element && element.id) {
// calculate displayed xaxis
var length = this.data[0].length;
var startIndex = 0;
var endIndex = this.xaxisLength;
Ember.run.later(this, function() {
this._drawPlot();
}, 500);
if (length > this.xaxisLength) {
startIndex = length - this.xaxisLength;
endIndex = length;
}
// display the chart
$.plot('#' + element.id, this.data, {
xaxis: {
min: startIndex,
max: endIndex
},
});
Ember.run.later(this, function() {
this._drawPlot();
}, 500);
}
}
});

View file

@ -11,9 +11,11 @@ export default DS.RESTSerializer.extend({
// create record if needed, otherwise add to current one
var record = store.peekRecord('property', item.id);
if (record) {
var length = record.get('history')[0].length;
record.get('history')[0].push([length, record.get('value')]);
record.set('value', item.attributes.value);
if (record.timestamp !== item.attributes.timestamp) {
var length = record.get('history')[0].length;
record.get('history')[0].push([length, record.get('value')]);
record.set('value', item.attributes.value);
}
} else {
// add new item
store.push(item);

View file

@ -82,11 +82,19 @@ footer {
}
#properties > .layout-left {
width: 30%;
width: 25%;
}
#properties > .layout-right {
width: 70%;
width: 75%;
}
#main > .layout-left {
width: 40%;
}
#main > .layout-right {
width: 60%;
}
.data-table {
@ -125,15 +133,15 @@ footer {
}
.line-chart {
width: 500px;
height: 300px;
width: 100%;
height: 500px;
margin: 10px;
}
.mockup-image {
width: 600px;
height: 400px;
width: 100%;
height: 75%;
border: 1px solid black;