Skip to content

Commit

Permalink
Add layout system for reports
Browse files Browse the repository at this point in the history
  • Loading branch information
Samy Pessé committed Oct 7, 2013
1 parent e342262 commit d7fef3f
Show file tree
Hide file tree
Showing 14 changed files with 306 additions and 150 deletions.
48 changes: 26 additions & 22 deletions client/resources/templates/report.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
<div class="report-header">
<img src="<%- model.icon() %>" class="model-icon"/>
<div class="report-inner">
<div class="report-header">
<img src="<%- model.icon() %>" class="model-icon"/>

<!-- Actions -->
<div class="btn-group pull-right">
<a href="#" class="btn btn-default action-toggle-options"><i class="icon-cog"></i></a>
<a href="#" class="btn btn-default action-report-remove"><i class="icon-remove"></i></a>
</div>
<div class="btn-group pull-right">
<!-- Actions -->
<a href="#" class="btn btn-default action-toggle-options"><i class="icon-cog"></i></a>
<a href="#" class="btn btn-default action-report-remove"><i class="icon-remove"></i></a>

<!-- Visualizations -->
<div class="btn-group pull-right">
<a data-toggle="dropdown" href="#" class="btn btn-default dropdown-toggle"><%- visualization.name %></a>
<ul class="dropdown-menu" role="menu">
<% _.each(visualizations, function(visu) { %>
<li><a href="#" data-visualization="<%- visu.id %>"><%- visu.name %></a></li>
<% }); %>
</ul>
</div>
<!-- Visualizations -->
<a data-toggle="dropdown" href="#" class="btn btn-default dropdown-toggle"><%- visualization.name %></a>
<ul class="dropdown-menu" role="menu">
<% _.each(visualizations, function(visu) { %>
<li><a href="#" data-visualization="<%- visu.id %>"><%- visu.name %></a></li>
<% }); %>
<li class="divider"></li>
<% _.each(layouts, function(value, label) { %>
<li><a href="#" data-layout="<%- value %>"><%= label %></a></li>
<% }); %>
</ul>
</div>

<h3 class="model-name"><%- model.get('name') %></h3>
<p class="model-description"><%- model.get('description') %></p>
</div>
<%= view.component("report."+visualization.id, {
"report": report
}) %>
<h3 class="model-name"><%- model.get('name') %></h3>
<p class="model-description"><%- model.get('description') %></p>
</div>
<%= view.component("report."+visualization.id, {
"report": report
}) %>
</div>
6 changes: 5 additions & 1 deletion client/resources/templates/report.line.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,18 @@
</label>
</div>
<% _.each(properties, function(propertyType, name) { %>
<% if (propertyType == "number") { %>
<div class="checkbox">
<label>
<input type="checkbox" value="<%- name %>" <% if (_.contains(settings.properties, name)) { %>checked<% } %>>
<%- name %>
</label>
</div>
<% } %>
<% }); %>
</div>
<% } %>
</div>
<div style="width: 100%; height: 300px;" class="chart"></div>
<div class="report-body">
<div style="width: 100%; height: 300px;" class="chart"></div>
</div>
2 changes: 1 addition & 1 deletion client/resources/templates/report.list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>
<% } %>
</div>
<table class="events-table table-striped table table-bordered">
<table class="events-table table-striped table">
<thead>
<tr>
<th>#</th>
Expand Down
34 changes: 14 additions & 20 deletions client/resources/templates/reports.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
<div class="reports">
<div class="row">
<% if (_.size(reports) > 0) { %>
<% _.each(reports, function(report) { %>
<div class="col-lg-12">
<%= view.component("report", {
"report": report
}) %>
</div>
<% }); %>
<% } else { %>
<div class="reports-empty">
<p class="icon"><i class="icon-bar-chart"></i></p>
<h3>No reports yet</h3>
<p>Start tracking events to add reports to this dashboard.</p>
<p>Install the Google Chrome extension to track your web navigation or use the API to track personnalized events.</p>
<p><a href="https://github.com/SamyPesse/reportr" target="_blank">Learn more</a></p>
</div>
<% } %>
<% if (_.size(reports) > 0) { %>
<% _.each(reports, function(report) { %>
<%= view.component("report", {
"report": report
}) %>
<% }); %>
<% } else { %>
<div class="reports-empty">
<p class="icon"><i class="icon-bar-chart"></i></p>
<h3>No reports yet</h3>
<p>Start tracking events to add reports to this dashboard.</p>
<p>Install the Google Chrome extension to track your web navigation or use the API to track personnalized events.</p>
<p><a href="https://github.com/SamyPesse/reportr" target="_blank">Learn more</a></p>
</div>
</div>
<% } %>
4 changes: 4 additions & 0 deletions client/stylesheets/report.list.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.report-list {
.events-table {
margin: 0px;
}

.hr-list-message-more {
cursor: pointer;
margin: 0px;
Expand Down
98 changes: 60 additions & 38 deletions client/stylesheets/reports.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.reports {
margin: 0px 15px;
.clearfix();

.reports-empty {
margin-top: 50px;
max-width: 400px;
Expand All @@ -20,51 +23,70 @@
}

.report {
background: #fff;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;

.report-header {
margin-bottom: 25px;
.clearfix();

.model-icon {
float: left;
margin-right: 10px;
width: 48px;
height: 48px;
}
padding: 6px;
display: block;
float: left;

.model-name {
margin: 0px;
font-weight: 200;
}

.model-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.layout-large {
width: 100%;
}
&.layout-medium {
width: 50%;
}

.report-inner {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 0px;
overflow: hidden;

.report-header {
padding: 15px;
background: #f8f8f8;
border-bottom: 1px solid #ddd;
.clearfix();

.model-icon {
float: left;
margin-right: 10px;
width: 48px;
height: 48px;
}

.report-options {
margin-bottom: 12px;
padding: 15px;
background: #f5f5f5;
display: none;
border-radius: 4px;
.clearfix();
.model-name {
margin: 0px;
font-weight: 200;
}

select {
margin: 8px 5px;
.model-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

.select-properties {
.checkbox {
display: inline-block;
margin: 10px;
.report-options {
padding: 15px;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
display: none;
.clearfix();

select {
margin: 8px 5px;
}

.select-properties {
.checkbox {
display: inline-block;
margin: 10px;
}
}
}

.report-body {
padding: 15px;
}
}

Expand Down
55 changes: 50 additions & 5 deletions client/views/report.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
define([
"hr/hr",
"jQuery",
"Underscore",
"api",
"models/user",
"models/eventinfo"
], function(hr, _, api, User, EventInfo) {
], function(hr, $, _, api, User, EventInfo) {

Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
Expand Down Expand Up @@ -40,6 +41,8 @@ define([

// Bind update
this.report.eventInfo.on("events:new", _.throttle(this.updateChart, 1500), this);
this.report.on("layout", this.resizeChart, this);
$(window).resize(_.bind(this.resizeChart, this));
return this;
},

Expand All @@ -59,6 +62,13 @@ define([
return this.render();
},

/*
* need to resize the chart
*/
resizeChart: function() {
return this;
},

/*
* Load events data
*/
Expand Down Expand Up @@ -86,11 +96,17 @@ define([
// Actions
'click .report-header .action-toggle-options': 'actionToggleOptions',
'click .report-header .action-report-remove': 'actionReportRemove',
'click *[data-visualization]': 'actionSelectVisualisation'
'click *[data-visualization]': 'actionSelectVisualisation',
'click *[data-layout]': 'actionSelectLayout'
},
defaultSettings: {
'layout': 'large',
'visualization': 'line'
},
layouts: {
'<i class="icon-align-justify"></i> Large': 'large',
'<i class="icon-th-large"></i> Medium': 'medium'
},

/*
* Constructor
Expand All @@ -105,27 +121,32 @@ define([

// Create settings
this.settings = {};
_.defaults(this.settings, this.defaultSettings);
_.extend(this.settings, this.loadSettings());
_.defaults(this.settings, this.defaultSettings);

// Create event info
this.eventInfo = new EventInfo();
this.eventInfo.on("change", this.render, this);
this.eventInfo.load(this.eventNamespace, this.eventName);

// Layout
this.setLayout(this.settings.layout);

return this;
},

/*
* Template context
*/
templateContext: function() {
console.log(this.settings);
this.settings.visualization = this.settings.visualization || 'line';
return {
'model': this.getModel(),
'report': this,
'visualization': ReportView.visualizations[this.settings.visualization],
'visualizations': ReportView.visualizations

'visualizations': ReportView.visualizations,
'layouts': this.layouts
};
},

Expand All @@ -136,6 +157,22 @@ define([
return this.eventInfo.model();
},

/*
* Change page layout
*/
setLayout: function(layout) {
if (!_.contains(_.values(this.layouts), layout)) {
layout = this.defaultSettings.layout;
}


this.settings.layout = layout;
this.$el.attr("class", this.className+" layout-"+this.settings.layout);
this.saveSettings();
this.trigger("layout:change");
return this;
},

/*
* Save report settings
*/
Expand Down Expand Up @@ -181,6 +218,14 @@ define([
};
this.saveSettings();
this.render();
},

/*
* (action) Change layout
*/
actionSelectLayout: function(e) {
if (e != null) e.preventDefault();
this.setLayout($(e.currentTarget).data("layout"));
}
}, {
visualizations: {},
Expand Down
14 changes: 14 additions & 0 deletions client/views/report.line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,20 @@ define([
return this.updateChart();
},

/*
* Resize
*/
resizeChart: function() {
ReportLineView.__super__.resizeChart.apply(this, arguments);

if (this.chart != null) {
this.chart.resize();
this.chart.setupGrid();
this.chart.draw();
}
return this;
},

/*
* Events list change : refresh the chart
*/
Expand Down
Loading

0 comments on commit d7fef3f

Please sign in to comment.