PowerChalange uses Ajax now and will update minute and hourly charts periodically.
This commit is contained in:
parent
b229671abf
commit
74c49244e7
3 changed files with 67 additions and 88 deletions
|
|
@ -2,70 +2,53 @@
|
|||
|
||||
<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,
|
||||
postUnits: 'kWh',
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
for (Sensor sensor : sensors)
|
||||
addAggregateDataToDataNode(node,
|
||||
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.WEEK, UTCTimeUtility.INFINITY));
|
||||
root.set("minuteData", node);
|
||||
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));
|
||||
}
|
||||
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));
|
||||
}
|
||||
else if (request.get("data").equals("day")) {
|
||||
for (Sensor sensor : sensors)
|
||||
addAggregateDataToDataNode(node,
|
||||
AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.DAY, UTCTimeUtility.INFINITY));
|
||||
}
|
||||
else if (request.get("data").equals("week")) {
|
||||
for (Sensor sensor : sensors)
|
||||
addAggregateDataToDataNode(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;
|
||||
|
|
@ -111,7 +103,10 @@ 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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue