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:
parent
92fb46ea0f
commit
80a7989481
4 changed files with 32 additions and 20 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue