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,70 +2,53 @@
<div class="row placeholders"> <div class="row placeholders">
<H1>Last 24 hours (kWh/5min)</H1> <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>
<div class="row placeholders"> <div class="row placeholders">
<H1>Last Week (kWh/h)</H1> <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>
<div class="row placeholders"> <div class="row placeholders">
<H1>All History (kWh/day)</H1> <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>
<div class="row placeholders"> <div class="row placeholders">
<H1>All History (kWh/week)</H1> <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> </div>
<script> <script>
$(function(){ $(function(){
chartData("min-power-chart", initChart("minute-power-chart", "?json&data=minute", 5*60*1000);
[ initChart("hour-power-chart", "?json&data=hour", 60*60*1000);
{ time: (Date.now()-24*60*60*1000) }, initChart("day-power-chart", "?json&data=day", -1);
{{#minData}} initChart("week-power-chart", "?json&data=week", -1);
{ 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() }
]
);
}); });
function chartData(elementId, data){ function initChart(elementId, url, time){
Morris.Line({ var chart = Morris.Line({
element: elementId, element: elementId,
data: data, data: [{time:0}],
xkey: 'time', xkey: 'time',
ykeys: [ {{#sensors}} "{{.getId()}}", {{/sensors}} ], ykeys: [ {{#sensors}} {{.getId()}}, {{/sensors}} ],
labels: [ {{#sensors}} "{{.getUser().getUsername()}}: {{.getName()}}", {{/sensors}} ], labels: [ {{#sensors}} "{{.getUser().getUsername()}}: {{.getName()}}", {{/sensors}} ],
continuousLine: false, continuousLine: false,
pointSize: 1, pointSize: 1,
postUnits: 'kWh', postUnits: 'kWh',
resize: true, resize: true,
hideHover: 'auto', 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> </script>

View file

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

View file

@ -17,10 +17,10 @@ public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<Ag
public static class AggregateData { public static class AggregateData {
public int id; public int id;
public long timestamp; public long timestamp;
public String data; public float data;
public String username; 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.id = id;
this.timestamp = time; this.timestamp = time;
this.data = data; 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 //add null data point to list if one or more periods of data is missing before this
if(previousTimestampEnd != -1 && previousTimestampEnd+1 < timestampStart){ 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 //update previous end timestamp
previousTimestampEnd = timestampEnd; previousTimestampEnd = timestampEnd;