fixed charts showing all data for a user in the same line drawing and also added a morris override css

This commit is contained in:
Ziver Koc 2016-06-01 11:14:58 +02:00
parent 92fb46ea0f
commit 80a7989481
4 changed files with 32 additions and 20 deletions

View file

@ -110,4 +110,12 @@ body {
.drop-shadow { .drop-shadow {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
/*
* Morris.js charts overrides
*/
.morris-hover {
position: initial;
} }

View file

@ -2,19 +2,19 @@
<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:450px;"></div> <div id="min-power-chart" style="height:350px;"></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:450px;"></div> <div id="hour-power-chart" style="height:350px;"></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:450px;"></div> <div id="day-power-chart" style="height:350px;"></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:450px;"></div> <div id="week-power-chart" style="height:350px;"></div>
</div> </div>
<script> <script>
@ -23,7 +23,7 @@
[ [
{ y: (Date.now()-24*60*60*1000) }, { y: (Date.now()-24*60*60*1000) },
{{#minData}} {{#minData}}
{ y: {{.timestamp}}, "{{.username}}": {{.data}} }, { y: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/minData}} {{/minData}}
{ y: Date.now() } { y: Date.now() }
] ]
@ -32,34 +32,34 @@
[ [
{ y: (Date.now()-7*24*60*60*1000) }, { y: (Date.now()-7*24*60*60*1000) },
{{#hourData}} {{#hourData}}
{ y: {{.timestamp}}, "{{.username}}": {{.data}} }, { y: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/hourData}} {{/hourData}}
{ y: Date.now() } { y: Date.now() }
] ]
); );
chartData("day-power-chart", chartData("day-power-chart",
[{{#dayData}} [{{#dayData}}
{ y: {{.timestamp}}, "{{.username}}": {{.data}} }, { y: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/dayData}} {{/dayData}}
{ y: Date.now() } { y: Date.now() }
] ]
); );
chartData("week-power-chart", chartData("week-power-chart",
[{{#weekData}} [{{#weekData}}
{ y: {{.timestamp}}, "{{.username}}": {{.data}} }, { y: {{.timestamp}}, "{{.id}}": {{.data}} },
{{/weekData}} {{/weekData}}
{ y: Date.now() } { y: Date.now() }
] ]
); );
}); });
var userArray = [ {{#username}} "{{.getUsername()}}", {{/username}} ];
function chartData(elementId, data){ function chartData(elementId, data){
Morris.Line({ Morris.Line({
element: elementId, element: elementId,
data: data, data: data,
xkey: 'y', xkey: 'y',
ykeys: userArray, ykeys: [ {{#sensors}} "{{.getId()}}", {{/sensors}} ],
labels: userArray, labels: [ {{#sensors}} "{{.getUser().getUsername()}}: {{.getName()}}", {{/sensors}} ],
continuousLine: false, continuousLine: false,
pointSize: 1, pointSize: 1,
postUnits: 'kWh', postUnits: 'kWh',

View file

@ -34,7 +34,7 @@ public class PCOverviewHttpPage extends HalHttpPage {
DBConnection db = HalContext.getDB(); DBConnection db = HalContext.getDB();
List<User> users = User.getUsers(db); List<User> users = User.getUsers(db);
ArrayList<Sensor> sensors = new ArrayList<>();
ArrayList<AggregateData> minDataList = new ArrayList<>(); ArrayList<AggregateData> minDataList = new ArrayList<>();
ArrayList<AggregateData> hourDataList = new ArrayList<>(); ArrayList<AggregateData> hourDataList = new ArrayList<>();
ArrayList<AggregateData> dayDataList = new ArrayList<>(); ArrayList<AggregateData> dayDataList = new ArrayList<>();
@ -43,6 +43,7 @@ public class PCOverviewHttpPage extends HalHttpPage {
for(User user : users){ for(User user : users){
List<Sensor> userSensors = Sensor.getSensors(db, user); List<Sensor> userSensors = Sensor.getSensors(db, user);
for(Sensor sensor : userSensors){ for(Sensor sensor : userSensors){
sensors.add(sensor);
minDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.FIVE_MINUTES, UTCTimeUtility.DAY_IN_MS)); 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)); hourDataList.addAll(AggregateDataListSqlResult.getAggregateDataForPeriod(db, sensor, AggregationPeriodLength.HOUR, UTCTimeUtility.WEEK_IN_MS));
@ -55,11 +56,12 @@ public class PCOverviewHttpPage extends HalHttpPage {
Templator tmpl = new Templator(FileUtil.find(TEMPLATE)); Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
tmpl.set("users", User.getUsers(db));
tmpl.set("sensors", sensors);
tmpl.set("minData", minDataList); tmpl.set("minData", minDataList);
tmpl.set("hourData", hourDataList); tmpl.set("hourData", hourDataList);
tmpl.set("dayData", dayDataList); tmpl.set("dayData", dayDataList);
tmpl.set("weekData", weekDataList); tmpl.set("weekData", weekDataList);
tmpl.set("username", User.getUsers(db));
return tmpl; return tmpl;
} }

View file

@ -15,10 +15,13 @@ import java.util.List;
public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<AggregateDataListSqlResult.AggregateData>> { public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<AggregateDataListSqlResult.AggregateData>> {
public static class AggregateData { public static class AggregateData {
public int id;
public long timestamp; public long timestamp;
public String data; public String data;
public String username; public String username;
public AggregateData(long time, String data, String uname) {
public AggregateData(int id, long time, String data, String uname) {
this.id = id;
this.timestamp = time; this.timestamp = time;
this.data = data; this.data = data;
this.username = uname; this.username = uname;
@ -28,10 +31,8 @@ public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<Ag
public static List<AggregateData> getAggregateDataForPeriod(DBConnection db, Sensor sensor, AggregationPeriodLength aggrPeriodLength, long ageLimitInMs) throws SQLException { public static List<AggregateData> getAggregateDataForPeriod(DBConnection db, Sensor sensor, AggregationPeriodLength aggrPeriodLength, long ageLimitInMs) throws SQLException {
PreparedStatement stmt = db.getPreparedStatement( PreparedStatement stmt = db.getPreparedStatement(
"SELECT user.username as username," "SELECT user.username as username,"
+ " sensor_data_aggr.timestamp_start as timestamp_start," + " sensor.*,"
+ " sensor_data_aggr.timestamp_end as timestamp_end," + " sensor_data_aggr.*"
+ " sensor_data_aggr.data as data,"
+ " sensor_data_aggr.confidence as confidence "
+ " FROM sensor_data_aggr, user, sensor" + " FROM sensor_data_aggr, user, sensor"
+ " WHERE sensor.id = sensor_data_aggr.sensor_id" + " WHERE sensor.id = sensor_data_aggr.sensor_id"
+ " AND sensor.id = ?" + " AND sensor.id = ?"
@ -63,6 +64,7 @@ public class AggregateDataListSqlResult implements SQLResultHandler<ArrayList<Ag
long previousTimestampEnd = -1; long previousTimestampEnd = -1;
while(result.next()){ while(result.next()){
int id = result.getInt("id");
long timestampStart = result.getLong("timestamp_start"); long timestampStart = result.getLong("timestamp_start");
long timestampEnd = result.getLong("timestamp_end"); long timestampEnd = result.getLong("timestamp_end");
String username = result.getString("username"); String username = result.getString("username");
@ -74,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(previousTimestampEnd+1, "null", username)); list.add(new AggregateData(id, previousTimestampEnd+1, "null", username));
} }
list.add(new AggregateData(timestampEnd, ""+ (estimatedData/1000.0), username)); //add this data point to list list.add(new AggregateData(id, timestampEnd, ""+ (estimatedData/1000.0), username)); //add this data point to list
//update previous end timestamp //update previous end timestamp
previousTimestampEnd = timestampEnd; previousTimestampEnd = timestampEnd;