Skip to content

Commit

Permalink
Merge pull request #260 from piwik/cleanerDatatables
Browse files Browse the repository at this point in the history 
refs #4985 Improve Dashboard / Datatables UI
  • Loading branch information
@tsteur
tsteur committed Apr 14, 2014
2 parents 7f59bbb + ecff5ee commit a02ba00
Show file tree
Hide file tree
Showing 20 changed files with 288 additions and 74 deletions.
4 changes: 2 additions & 2 deletions lang/en.json
View file
Expand Up @@ -138,6 +138,7 @@
"RefreshPage": "Refresh the page",
"Refresh": "Refresh",
"Visitors": "Visitors",
"ExpandDataTableFooter": "Change the visualization or configure the report",
"ExportThisReport": "Export this dataset in other formats",
"ExportAsImage": "Export as Image",
"Export": "Export",
Expand Down Expand Up @@ -1063,8 +1064,7 @@
"TitleConsideredMoversAndShakersGrowth": "%1$s changed from %2$s to %3$s compared to %4$s. Based on this an evolution of each row of %5$s%% is expected.",
"TitleConsideredMoversAndShakersChanges": "Considered movers only if they grew by more than %1$s%% visits or shrank by less than %2$s%% visits, new entries only if they increased by more than %3$s%% visits (%4$s), and disappeared rows if they shrank by less than %5$s%% visits (%6$s).",
"DatePeriodCombinationNotSupported": "It is not possible to generate insights for this date and period combination.",
"ControlGrowthDescription": "Minimum growth of",
"ControlComparedToDescription": "compared to the",
"ControlComparedToDescription": "Growth compared to the",
"ControlFilterByDescription": "Show all, only movers, only new or only disappeared",
"DayComparedToPreviousDay": "previous day",
"DayComparedToPreviousWeek": "same day in the previous week",
Expand Down
1 change: 1 addition & 0 deletions plugins/Actions/javascripts/actionsDataTable.js
View file
Expand Up @@ -88,6 +88,7 @@
self.handleRelatedReports(domElem);
self.handleTriggeredEvents(domElem);
self.handleCellTooltips(domElem);
self.handleExpandFooter(domElem);
self.setFixWidthToMakeEllipsisWork(domElem);
},

Expand Down
13 changes: 12 additions & 1 deletion plugins/Annotations/javascripts/annotations.js
View file
Expand Up @@ -519,6 +519,12 @@

loadingAnnotationManager = true;

var isDashboard = !!$('#dashboardWidgetsArea').length;

if (isDashboard) {
$('.loadingPiwikBelow', domElem).insertAfter($('.evolution-annotations', domElem));
}

var loading = $('.loadingPiwikBelow', domElem).css({display: 'block'});

// the annotations for this report have not been retrieved yet, so do an ajax request
Expand All @@ -539,7 +545,12 @@
loading.css('visibility', 'hidden');

// add & show annotation manager
$('.dataTableFeatures', domElem).append(manager);
if (isDashboard) {
manager.insertAfter($('.evolution-annotations', domElem));
} else {
$('.dataTableFeatures', domElem).append(manager);
}

manager.slideDown('slow', function () {
loading.hide().css('visibility', 'visible');
loadingAnnotationManager = false;
Expand Down
14 changes: 14 additions & 0 deletions plugins/Annotations/stylesheets/annotations.less
View file
Expand Up @@ -12,6 +12,20 @@
top:10px;
}

#dashboard, .ui-dialog {
.evolution-annotations {
margin-top: -5px;
margin-bottom: -5px;
}
.evolution-annotations > span {
top: -1px;
position: absolute;
}
.annotation-manager {
margin-top: 15px;
}
}

.annotation-manager {
text-align: left;
margin-top: -18px;
Expand Down
99 changes: 89 additions & 10 deletions plugins/CoreHome/javascripts/dataTable.js
View file
Expand Up @@ -122,6 +122,14 @@ $.extend(DataTable.prototype, UIControl.prototype, {
this.param.columns = columnName;
},

isWithinDialog: function (domElem) {
return !!$(domElem).parents('.ui-dialog').length;
},

isDashboard: function () {
return !!$('#dashboardWidgetsArea').length;
},

//Reset DataTable filters (used before a reload or view change)
resetAllFilters: function () {
var self = this;
Expand Down Expand Up @@ -285,10 +293,13 @@ $.extend(DataTable.prototype, UIControl.prototype, {
self.handleRelatedReports(domElem);
self.handleTriggeredEvents(domElem);
self.handleColumnHighlighting(domElem);
self.handleExpandFooter(domElem);
self.setFixWidthToMakeEllipsisWork(domElem);
},

setFixWidthToMakeEllipsisWork: function (domElem) {
var self = this;

function getTableWidth(domElem) {
var totalWidth = $(domElem).width();
var totalWidthTable = $('table.dataTable', domElem).width(); // fixes tables in dbstats, referrers, ...
Expand Down Expand Up @@ -322,11 +333,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
}

var isWidgetized = -1 !== location.search.indexOf('module=Widgetize');
var isInDashboard = !!domElem.parents('#dashboardWidgetsArea').length;

if (labelWidth > maxLabelWidth
&& !isWidgetized
&& !isInDashboard) {
&& !self.isDashboard()) {
labelWidth = maxLabelWidth; // prevent for instance table in Actions-Pages is not too wide
}

Expand Down Expand Up @@ -386,7 +396,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
$('td.label', domElem).width(labelColumnWidth);
}

var self = this;
$('td span.label', domElem).each(function () { self.tooltip($(this)); });
},

Expand Down Expand Up @@ -602,6 +611,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
}
}
);

if (this.isEmpty && !currentPattern) {
$('.dataTableSearchPattern', domElem).hide();
}
},

//behaviour for '< prev' 'next >' links and page count
Expand All @@ -623,6 +636,8 @@ $.extend(DataTable.prototype, UIControl.prototype, {
if (totalRows != 0) {
var str = sprintf(_pk_translate('CoreHome_PageOf'), offset + '-' + offsetEndDisp, totalRows);
$(this).text(str);
} else {
$(this).hide();
}
}
);
Expand Down Expand Up @@ -675,6 +690,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
&& $('.annotationView', domElem).length > 0) {
// get dates w/ annotations across evolution period (have to do it through AJAX since we
// determine placement using the elements created by jqplot)

$('.dataTableFeatures', domElem).addClass('hasEvolution');

piwik.annotations.api.getEvolutionIcons(
self.param.idSite,
self.param.date,
Expand All @@ -687,16 +705,22 @@ $.extend(DataTable.prototype, UIControl.prototype, {
annotationAxisHeight = 30 // css height + padding + margin
;

var annotationsCss = {left: 6}; // padding-left of .jqplot-graph element (in _dataTableViz_jqplotGraph.tpl)
if (!self.isDashboard() && !self.isWithinDialog(domElem)) {
annotationsCss['top'] = -datatableFeatures.height() - annotationAxisHeight + noteSize / 2;
}

// set position of evolution annotation icons
annotations.css({
top: -datatableFeatures.height() - annotationAxisHeight + noteSize / 2,
left: 6 // padding-left of .jqplot-graph element (in _dataTableViz_jqplotGraph.tpl)
});
annotations.css(annotationsCss);

piwik.annotations.placeEvolutionIcons(annotations, domElem);

// add new section under axis
datatableFeatures.append(annotations);
if (self.isDashboard() || self.isWithinDialog(domElem)) {
annotations.insertAfter($('.datatableRelatedReports', domElem));
} else {
datatableFeatures.append(annotations);
}

// reposition annotation icons every time the graph is resized
$('.piwik-graph', domElem).on('resizeGraph', function () {
Expand Down Expand Up @@ -1251,6 +1275,54 @@ $.extend(DataTable.prototype, UIControl.prototype, {
$("tr:even td", domElem).slice(1).addClass('column columneven');
},

handleExpandFooter: function (domElem) {
if (!this.isDashboard() && !this.isWithinDialog(domElem)) {
return;
}

var footerIcons = $('.dataTableFooterIcons', domElem);

if (!footerIcons.length) {
return;
}

var self = this;
function toggleFooter()
{
var icons = $('.dataTableFooterIcons', domElem);
$('.dataTableFeatures', domElem).toggleClass('expanded');

self.notifyWidgetParametersChange(domElem, {
isFooterExpandedInDashboard: icons.is(':visible')
});
}

var moveNode = $('.datatableFooterMessage', domElem);
if (!moveNode.length) {
moveNode = $('.datatableRelatedReports', domElem);
}

footerIcons.after(moveNode);

$('.expandDataTableFooterDrawer', domElem).after(footerIcons);

var controls = $('.controls', domElem);
if (controls.length) {
$('.foldDataTableFooterDrawer', domElem).after(controls);
}

var loadingPiwikBelow = $('.loadingPiwikBelow', domElem);
if (loadingPiwikBelow.length) {
loadingPiwikBelow.insertBefore(moveNode);
}

if (this.param.isFooterExpandedInDashboard) {
toggleFooter();
}

$('.foldDataTableFooterDrawer, .expandDataTableFooterDrawer', domElem).on('click', toggleFooter);
},

handleColumnHighlighting: function (domElem) {

var maxWidth = {};
Expand Down Expand Up @@ -1370,7 +1442,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {

// tooltip for column documentation
handleColumnDocumentation: function (domElem) {
if ($('#dashboard').size() > 0) {
if (this.isDashboard()) {
// don't display column documentation in dashboard
// it causes trouble in full screen view
return;
Expand Down Expand Up @@ -1433,7 +1505,14 @@ $.extend(DataTable.prototype, UIControl.prototype, {
thisReport = $('.datatableRelatedReports span:hidden', domElem)[0];

hideShowRelatedReports(thisReport);
$('.datatableRelatedReports span', domElem).each(function () {

var relatedReports = $('.datatableRelatedReports span', domElem);

if (!relatedReports.length) {
$('.datatableRelatedReports', domElem).hide();
}

relatedReports.each(function () {
var clicked = this;
$(this).unbind('click').click(function (e) {
var url = $(this).attr('href');
Expand Down

0 comments on commit a02ba00

Please sign in to comment.