PowerChalange uses Ajax now and will update minute and hourly charts periodically.

This commit is contained in:
Ziver Koc 2016-06-02 17:50:25 +02:00
parent b229671abf
commit 74c49244e7
3 changed files with 67 additions and 88 deletions

View file

@ -2,63 +2,37 @@
<div class="row placeholders">
<H1>Last 24 hours (kWh/5min)</H1>
<div id="min-power-chart" style="height:350px;"></div>
<div id="minute-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
<H1>Last Week (kWh/h)</H1>
<div id="hour-power-chart" style="height:350px;"></div>
<div id="hour-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
<H1>All History (kWh/day)</H1>
<div id="day-power-chart" style="height:350px;"></div>
<div id="day-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
<H1>All History (kWh/week)</H1>
<div id="week-power-chart" style="height:350px;"></div>
<div id="week-power-chart" style="height:450px;"></div>
</div>
<script>
$(function(){
chartData("min-power-chart",
[
{ time: (Date.now()-24*60*60*1000) },
{{#minData}}
{ time: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/minData}}
{ time: Date.now() }
]
);
chartData("hour-power-chart",
[
{ time: (Date.now()-7*24*60*60*1000) },
{{#hourData}}
{ time: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/hourData}}
{ time: Date.now() }
]
);
chartData("day-power-chart",
[{{#dayData}}
{ time: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/dayData}}
{ time: Date.now() }
]
);
chartData("week-power-chart",
[{{#weekData}}
{ time: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/weekData}}
{ time: Date.now() }
]
);
initChart("minute-power-chart", "?json&data=minute", 5*60*1000);
initChart("hour-power-chart", "?json&data=hour", 60*60*1000);
initChart("day-power-chart", "?json&data=day", -1);
initChart("week-power-chart", "?json&data=week", -1);
});
function chartData(elementId, data){
Morris.Line({
function initChart(elementId, url, time){
var chart = Morris.Line({
element: elementId,
data: data,
data: [{time:0}],
xkey: 'time',
ykeys: [ {{#sensors}} "{{.getId()}}", {{/sensors}} ],
ykeys: [ {{#sensors}} {{.getId()}}, {{/sensors}} ],
labels: [ {{#sensors}} "{{.getUser().getUsername()}}: {{.getName()}}", {{/sensors}} ],
continuousLine: false,
pointSize: 1,
@ -66,6 +40,15 @@
resize: true,
hideHover: 'auto',
});
updateChart(chart, url, time);
}
function updateChart(chart, url, time){
$.getJSON(url, function(json){
chart.setData(json.data);
});
if(time > 0)
setTimeout(function(){ updateChart(chart, url, time); }, time);
}
</script>

View file

@ -41,26 +41,11 @@ public class PCOverviewHttpPage extends HalHttpPage implements HalHttpPage.HalJs
ArrayList<AggregateData> hourDataList = new ArrayList<>();
ArrayList<AggregateData> dayDataList = new ArrayList<>();
ArrayList<AggregateData> weekDataList = new ArrayList<>();
List<Sensor> sensors = getSensorList(db);
for (Sensor sensor : sensors) {
minDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.FIVE_MINUTES, UTCTimeUtility.DAY_IN_MS));
hourDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.HOUR, UTCTimeUtility.WEEK_IN_MS));
dayDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.DAY, UTCTimeUtility.INFINITY));
weekDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.WEEK, UTCTimeUtility.INFINITY));
}
Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
tmpl.set("users", User.getUsers(db));
tmpl.set("sensors", sensors);
tmpl.set("minData", minDataList);
tmpl.set("hourData", hourDataList);
tmpl.set("dayData", dayDataList);
tmpl.set("weekData", weekDataList);
return tmpl;
}
@ -75,33 +60,40 @@ public class PCOverviewHttpPage extends HalHttpPage implements HalHttpPage.HalJs
DBConnection db = HalContext.getDB();
List<Sensor> sensors = getSensorList(db);
if (request.get("data").contains("minute")) {
if (request.containsKey("data")) {
DataNode node = new DataNode(DataNode.DataType.List);
if (request.get("data").equals("minute")) {
DataNode nowTime = new DataNode(DataNode.DataType.Map);
nowTime.set("time", System.currentTimeMillis()-24*60*60*1000);
node.add(nowTime);
for (Sensor sensor : sensors)
addAggregateDataToDataNode(node,
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.FIVE_MINUTES, UTCTimeUtility.DAY_IN_MS));
root.set("minuteData", node);
}
if (request.get("data").contains("hour")) {
DataNode node = new DataNode(DataNode.DataType.List);
else if (request.get("data").equals("hour")) {
DataNode nowTime = new DataNode(DataNode.DataType.Map);
nowTime.set("time", System.currentTimeMillis()-7*24*60*60*1000);
node.add(nowTime);
for (Sensor sensor : sensors)
addAggregateDataToDataNode(node,
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.HOUR, UTCTimeUtility.WEEK_IN_MS));
root.set("minuteData", node);
}
if (request.get("data").contains("day")) {
DataNode node = new DataNode(DataNode.DataType.List);
else if (request.get("data").equals("day")) {
for (Sensor sensor : sensors)
addAggregateDataToDataNode(node,
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.DAY, UTCTimeUtility.INFINITY));
root.set("minuteData", node);
}
if (request.get("data").contains("week")) {
DataNode node = new DataNode(DataNode.DataType.List);
else if (request.get("data").equals("week")) {
for (Sensor sensor : sensors)
addAggregateDataToDataNode(node,
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.WEEK, UTCTimeUtility.INFINITY));
root.set("minuteData", node);
}
DataNode nowTime = new DataNode(DataNode.DataType.Map);
nowTime.set("time", System.currentTimeMillis());
node.add(nowTime);
root.set("data", node);
}
return root;
@ -111,6 +103,9 @@ public class PCOverviewHttpPage extends HalHttpPage implements HalHttpPage.HalJs
for (AggregateDataListSqlResult.AggregateData data : dataList) {
DataNode dataNode = new DataNode(DataNode.DataType.Map);
dataNode.set("time", data.timestamp);
if (data.data == Float.NaN)
dataNode.set("" + data.id, (String)null);
else
dataNode.set("" + data.id, data.data);
root.add(dataNode);
}
@ -122,7 +117,8 @@ public class PCOverviewHttpPage extends HalHttpPage implements HalHttpPage.HalJs
private List<Sensor> getSensorList(DBConnection db) throws SQLException {
List<Sensor> sensors = new ArrayList<>();
for (Sensor sensor : Sensor.getSensors(db)) {
if (sensor instanceof PowerConsumptionSensorData)
if (sensor.getDeviceData() != null &&
sensor.getDeviceData() instanceof PowerConsumptionSensorData)
sensors.add(sensor);
}
return sensors;

View file

@ -17,10 +17,10 @@ public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<Ag
public static class AggregateData {
public int id;
public long timestamp;
public String data;
public float data;
public String username;
public AggregateData(int id, long time, String data, String uname) {
public AggregateData(int id, long time, float data, String uname) {
this.id = id;
this.timestamp = time;
this.data = data;
@ -76,10 +76,10 @@ public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<Ag
//add null data point to list if one or more periods of data is missing before this
if(previousTimestampEnd != -1 && previousTimestampEnd+1 < timestampStart){
list.add(new AggregateData(id, previousTimestampEnd+1, "null", username));
list.add(new AggregateData(id, previousTimestampEnd+1, Float.NaN, username));
}
list.add(new AggregateData(id, timestampEnd, ""+ (estimatedData/1000.0), username)); //add this data point to list
list.add(new AggregateData(id, timestampEnd, (estimatedData/1000f), username)); //add this data point to list
//update previous end timestamp
previousTimestampEnd = timestampEnd;