Skip to content

Commit

Permalink
Fix issue when 2 box charts are displayed, fix #462 (#463)
Browse files Browse the repository at this point in the history 
* issues_#462

* removal back-ticks
  • Loading branch information
@piznel @Pierre-Gilles
piznel authored and Pierre-Gilles committed Jan 28, 2019
1 parent 48abe0a commit 7ff8d29
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 26 deletions.
44 changes: 27 additions & 17 deletions assets/js/app/device/chart.box.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@

vm.box = null;
vm.deviceTypes = [];
vm.chart;
vm.chart = null;
var minY = null;
var maxY = null;
var gapGrap = 0.02;

var dataDt = [];
vm.threshold = 90;

var labelDt = "";
var labelDt = '';
var globalTime = 1;
var globalTimeRange = "days";
var globalTimeRange = 'days';

var filter = {
start: moment().subtract(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss'),
Expand All @@ -50,10 +50,10 @@
vm.currentDeviceType.name = vm.box.params.name;
vm.currentDeviceType.unit = vm.box.params.unit;
vm.currentDeviceType.roomName = vm.box.params.roomName;
getFilteredDeviceState(vm.currentDeviceType,filter.start,filter.end);
getFilteredDeviceState(vm.currentDeviceType, filter.start, filter.end);
activate();
} else {
$(document.getElementById('chartMenu')).dropdown("toggle");
$(document.getElementById('chartMenu-' + id)).dropdown('toggle');
}
});
getDeviceTypes();
Expand All @@ -69,7 +69,7 @@
vm.chart.destroy();
}

vm.chart = new Chart('deviceChart', {
vm.chart = new Chart('deviceChart-' + vm.boxId, {
type: 'line',
data: {
datasets: [{
Expand Down Expand Up @@ -125,7 +125,7 @@
mode: 'index',
callbacks: {
title: function (tooltipItem) {
return moment(tooltipItem[0].xLabel).format('ll[, ]LTS')
return moment(tooltipItem[0].xLabel).format('ll[, ]LTS');
}
}
}
Expand All @@ -136,13 +136,14 @@
}

$scope.$watch('vm.currentDeviceType', function () {
saveCurrentDeviceType()
saveCurrentDeviceType();
refreshData();
});

function saveCurrentDeviceType() {
if (vm.currentDeviceType && vm.currentDeviceType.id) {
boxService.update(vm.boxId, { params: { device: vm.currentDeviceType.id, name: vm.currentDeviceType.name, unit: vm.currentDeviceType.unit, roomName: vm.currentDeviceType.roomName } })
var name = vm.currentDeviceType.name ? vm.currentDeviceType.name : vm.currentDeviceType.type;
boxService.update(vm.boxId, { params: { device: vm.currentDeviceType.id, name: name, unit: vm.currentDeviceType.unit, roomName: vm.currentDeviceType.roomName } });
}
}

Expand All @@ -155,15 +156,18 @@

// Navigation button, period to period
function nextStates() {
filter.start = filter.end;
filter.end = moment(filter.end).add(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
var maxEnd = moment.min(moment(filter.end).add(globalTime, globalTimeRange), moment(Date.now()));
filter.end = maxEnd.format('YYYY-MM-DD HH:mm:ss');
filter.start = maxEnd.subtract(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
refreshData();
}

// Updates the graph data
function refreshData() {
if (vm.currentDeviceType && vm.currentDeviceType.id) {
getFilteredDeviceState(vm.currentDeviceType, filter.start, filter.end)
filter.start= moment(filter.start).format('YYYY-MM-DD HH:mm:ss');
filter.end = moment(filter.end).format('YYYY-MM-DD HH:mm:ss');
getFilteredDeviceState(vm.currentDeviceType, filter.start, filter.end);
}
}

Expand All @@ -173,9 +177,9 @@
return deviceService.getFilteredStates(deviceType.id, startDate, endDate, 100 - vm.threshold)
.then(function (data) {
if (data.data.length !== 0) {
formatData(deviceType, data)
formatData(deviceType, data);
} else {
notificationService.errorNotificationTranslated('CHART.NO_VALUES')
notificationService.errorNotificationTranslated('CHART.NO_VALUES');
}
});
}
Expand All @@ -200,7 +204,8 @@
}).x;

// Update the graph title
labelDt = (deviceType.unit ? [deviceType.name + ' (' + deviceType.unit] + ')' : [deviceType.name]);
var name = deviceType.name ? deviceType.name : deviceType.type;
labelDt = (deviceType.unit ? [name + ' (' + deviceType.unit] + ')' : [name]);
}
vm.currentDeviceType = deviceType;
activateCharts();
Expand All @@ -218,8 +223,13 @@
io.socket.on('newDeviceState', function (deviceState) {
// if the device is the current device, push the value in the graph
if (vm.currentDeviceType && deviceState.devicetype === vm.currentDeviceType.id) {
dataDt.push({ x: deviceState.datetime, y: deviceState.value });
vm.chart.update()
if(moment(deviceState.datetime).subtract(globalTime, globalTimeRange).isBefore(moment(filter.end))) {
dataDt.unshift({ x: deviceState.datetime, y: deviceState.value });
dataDt.pop();
filter.end = moment(deviceState.datetime).format('YYYY-MM-DD HH:mm:ss');
filter.start = moment(deviceState.datetime).subtract(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
vm.chart.update();
}
}
});
}
Expand Down
20 changes: 14 additions & 6 deletions assets/js/app/device/deviceState.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
vm.nextStates = nextStates;
vm.refreshData = refreshData;
vm.getMinMax = getMinMax;
vm.chart;
vm.chart = null;
vm.threshold = 90;
vm.ready = false;
vm.displayMinMax = false;
Expand Down Expand Up @@ -221,8 +221,9 @@

// Navigation button, period to period
function nextStates() {
filter.start = filter.end;
filter.end = moment(filter.end).add(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
var maxEnd = moment.min(moment(filter.end).add(globalTime, globalTimeRange), moment(Date.now()));
filter.end = maxEnd.format('YYYY-MM-DD HH:mm:ss');
filter.start = maxEnd.subtract(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
$('#daterangepicker').data('daterangepicker').setStartDate(moment(filter.start).format('l[, ]LTS'));
$('#daterangepicker').data('daterangepicker').setEndDate(moment(filter.end).format('l[, ]LTS'));
refreshData();
Expand All @@ -232,6 +233,8 @@
function refreshData() {
vm.ready = true;
if (vm.currentDeviceType && vm.currentDeviceType.id) {
filter.start= moment(filter.start).format('YYYY-MM-DD HH:mm:ss');
filter.end = moment(filter.end).format('YYYY-MM-DD HH:mm:ss');
getFilteredDeviceState(vm.currentDeviceType, filter.start, filter.end);
vm.steppedline = (vm.currentDeviceType.type === 'binary');
}
Expand All @@ -250,7 +253,12 @@
io.socket.on('newDeviceState', function (deviceState) {
// if the device is the current device, push the value in the graph
if (vm.currentDeviceType && deviceState.devicetype === vm.currentDeviceType.id) {
dataDt.push({ x: deviceState.datetime, y: deviceState.value });
dataDt.unshift({ x: deviceState.datetime, y: deviceState.value });
dataDT.pop();
filter.end = moment(deviceState.datetime).format('YYYY-MM-DD HH:mm:ss');
filter.start = moment(deviceState.datetime).subtract(globalTime, globalTimeRange).format('YYYY-MM-DD HH:mm:ss');
$('#daterangepicker').data('daterangepicker').setStartDate(moment(filter.start).format('l[, ]LTS'));
$('#daterangepicker').data('daterangepicker').setEndDate(moment(filter.end).format('l[, ]LTS'));
vm.chart.update();
}
});
Expand Down Expand Up @@ -289,13 +297,13 @@
}).x;

// Update the graph title
labelDt = (deviceType.unit ? [deviceType.name + ' (' + deviceType.unit] + ')' : [deviceType.name]);
var name = deviceType.name ? deviceType.name : deviceType.type;
labelDt = (deviceType.unit ? [name + ' (' + deviceType.unit] + ')' : [name]);
}
vm.currentDeviceType = deviceType;
if (vm.displayMinMax) {
getMinMax();
} else {
console.log('je suis passé par là!');
activateCharts();
}
}
Expand Down
5 changes: 2 additions & 3 deletions views/boxs/chart.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<button type="button" id="nextButton" class="btn btn-box-tool" ng-click="vm.nextStates()">
<i class="fa fa-arrow-right"></i>
</button>
<button id="chartMenu" type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
<button id="chartMenu-<%= boxId %>" type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu" role="menu" style="max-height: 300px; overflow: auto">
Expand All @@ -22,12 +22,11 @@
</li>
</ul>
</div>

</div>

<!-- /.box-header -->
<div class="box-body ng-cloak">
<canvas id="deviceChart"></canvas>
<canvas id="deviceChart-<%= boxId %>"></canvas>
</div>
<!-- /.box-body -->
</div>

0 comments on commit 7ff8d29

Please sign in to comment.