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">
|
<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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue