diff --git a/app/components/line-chart.js b/app/components/line-chart.js index 7b7a4a4..df24383 100644 --- a/app/components/line-chart.js +++ b/app/components/line-chart.js @@ -23,45 +23,73 @@ export default Ember.Component.extend({ this._drawPlot(); }, - _drawPlot: function() { + _drawPlot: function() { var element = this.get('element'); if (element && element.id) { - if (this.data && this.data.length > 0) { - var firstTimestamp = this.data[0][0]; - var lastTimestamp = this.data[this.data.length - 1][0]; - - var diff = lastTimestamp - firstTimestamp; - var diffValue = this.xaxisLength * 1000; - - if (diff > diffValue) { - firstTimestamp = lastTimestamp - diffValue; - } else { - lastTimestamp = +firstTimestamp + +diffValue; - } - - $.plot('#' + element.id, [ - { - data: this.data, - color: "rgb(51, 102, 204)" - } - ], { - xaxis: { - mode: 'time', - timeformat: '%M:%S', - min: firstTimestamp, - max: lastTimestamp - } - }); - } else { - // display empty chart - $.plot('#' + element.id, [[]], { - xaxis: { - show: false - }, - yaxis: { - show: false - } - }); + if (this.data) { + var values = this.data.get('values'); + + if (values.length > 0) { + // get first and last time stamp for plot + var firstTimestamp = values[0][0]; + var lastTimestamp = values[values.length - 1][0]; + + var diff = lastTimestamp - firstTimestamp; + var diffValue = this.xaxisLength * 1000; + + if (diff > diffValue) { + firstTimestamp = lastTimestamp - diffValue; + } else { + lastTimestamp = +firstTimestamp + +diffValue; + } + + // generate plot options + var options = { + series: { + lines: { + show: true, + lineWidth: 1 + }, + shadowSize: 0 + }, + xaxis: { + mode: 'time', + timeformat: '%M:%S', + min: firstTimestamp, + max: lastTimestamp + }, + yaxis: { + + } + } + + // set y axis scale + if (this.data.get('minValue')) { + options.yaxis.min = this.data.get('minValue'); + } + + if (this.data.get('maxValue')) { + options.yaxis.max = this.data.get('maxValue'); + } + + // draw plot + $.plot('#' + element.id, [ + { + data: values, + color: "rgb(51, 153, 255)" + } + ], options); + } else { + // display empty chart + $.plot('#' + element.id, [[]], { + xaxis: { + show: false + }, + yaxis: { + show: false + } + }); + } } } diff --git a/app/models/property.js b/app/models/property.js index b9b6bd7..e2a0222 100644 --- a/app/models/property.js +++ b/app/models/property.js @@ -7,6 +7,8 @@ export default DS.Model.extend({ timestamp: DS.attr('date'), visible: DS.attr('boolean', { defaultValue: false }), source: DS.attr('string'), + minValue: DS.attr('number'), + maxValue: DS.attr('number'), entity: DS.belongsTo('entity'), category: DS.belongsTo('category') }); diff --git a/app/serializers/application.js b/app/serializers/application.js index c824d7d..b142874 100644 --- a/app/serializers/application.js +++ b/app/serializers/application.js @@ -83,12 +83,18 @@ export default DS.RESTSerializer.extend({ // find metadata var timestamp = 0; var source = ""; + var minValue; + var maxValue; attribute.metadatas.forEach(function(metadata) { if (metadata.name === 'timestamp') { timestamp = Date.parse(metadata.value); } else if (metadata.name === 'source') { - source = metadata.value; + source = metadata.value; + } else if (metadata.name === 'min') { + minValue = metadata.value; + } else if (metadata.name === 'max') { + maxValue = metadata.value; } }); @@ -106,7 +112,9 @@ export default DS.RESTSerializer.extend({ type: attribute.type, timestamp: timestamp, visible: false, - source: source, + source: source, + minValue: minValue, + maxValue: maxValue, values: [] }, relationships: { diff --git a/app/templates/components/entity-chart.hbs b/app/templates/components/entity-chart.hbs index 54c4b7c..0ae217d 100644 --- a/app/templates/components/entity-chart.hbs +++ b/app/templates/components/entity-chart.hbs @@ -17,7 +17,7 @@