Skip to content

Commit

Permalink
Enhancing admin bar & stats. See: wpsharks/comet-cache#83
Browse files Browse the repository at this point in the history
  • Loading branch information
jaswsinc committed Aug 18, 2015
1 parent 1172e70 commit 1b9a996
Show file tree
Hide file tree
Showing 15 changed files with 69 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/client-s/css/admin-bar.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/client-s/css/admin-bar.min.css.map
View file

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions src/client-s/css/admin-bar/_ajax-response.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,8 @@ $ajax-response-code-bg-color: #eee;
}

code {
padding: 1px 3px;
font-size: 18px;
border-radius: 3px;
padding: 1px 3px;
color: $ajax-response-code-color;
background: $ajax-response-code-bg-color;
}
Expand Down
13 changes: 7 additions & 6 deletions src/client-s/css/admin-bar/_dir-stats.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ $dir-stats-more-info-active-box-shadow-color: rgba(0, 0, 0, 0.1);
}
}

.-chart-a {
.-chart-a,
.-chart-b {
width: 250px;
height: 250px;
}
Expand All @@ -86,6 +87,10 @@ $dir-stats-more-info-active-box-shadow-color: rgba(0, 0, 0, 0.1);
text-align: center;
margin: 1em 0 0;

&.-no-charts {
margin-top: 0;
}

.-heading {
opacity: 0.5;
font-size: 120%;
Expand Down Expand Up @@ -115,6 +120,7 @@ $dir-stats-more-info-active-box-shadow-color: rgba(0, 0, 0, 0.1);
}

.-dir {
font-size: 90%;
opacity: 0.75;
font-family: monospace;
}
Expand Down Expand Up @@ -148,11 +154,6 @@ $dir-stats-more-info-active-box-shadow-color: rgba(0, 0, 0, 0.1);
}
}

.-chart-b {
width: 250px;
height: 100px;
}

.-more-info {
margin: 1em 0 0;

Expand Down
2 changes: 1 addition & 1 deletion src/client-s/css/menu-pages.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/client-s/css/menu-pages.min.css.map
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions src/client-s/css/menu-pages/_dir-stats.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
}

.-dir {
font-size: 90%;
opacity: 0.75;
font-family: monospace;
}
Expand Down Expand Up @@ -132,6 +133,8 @@

.-canvas {
width: 100%;
min-width: 100%;
height: auto;
}
}
}
Expand Down
Binary file modified src/client-s/images/clear-response.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/client-s/images/wipe-response.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 29 additions & 16 deletions src/client-s/js/admin-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
$('#wp-admin-bar-' + plugin.namespace + '-clear > a').on('click', plugin.clearCache);
$document.on('click', '.' + plugin.namespace + '-ajax-response', plugin.hideAJAXResponse);

var $dirStats = $('#wp-admin-bar-' + plugin.namespace + '-dir-stats');
var $dirStats = $('#wp-admin-bar-' + plugin.namespace + '-dir-stats'),
$dirStatsWrapper = $dirStats.find('.-wrapper'),
$dirStatsContainer = $dirStatsWrapper.find('.-container');

if ($dirStats.length && plugin.MutationObserver) { // Possible?
(new plugin.MutationObserver(function (mutations) {
$.each(mutations, function (index, mutation) {
Expand All @@ -40,6 +43,7 @@
}))
.observe($dirStats[0], {
attributes: true,
attributeOldValue: true,
childList: true,
characterData: true
}); // See: <http://jas.xyz/1JlzCdi>
Expand Down Expand Up @@ -177,13 +181,16 @@
$chartA.hide(); // Hide.
$chartB.hide(); // Hide.

$totals.removeClass('-no-charts');
$totals.css('visibility', 'hidden');
$disk.css('visibility', 'hidden');

if (!canSeeMore || $.trim($totalDir.text()).length > 30) {
$totalDir.hide(); // Hide this.
}
if (canSeeMore) { // Will display?
$moreInfo.css('visibility', 'hidden');
} else { // Not showing.
$totalDir.hide();
$moreInfo.hide();
}
if (!plugin.dirStatsData) {
Expand Down Expand Up @@ -260,34 +267,33 @@
}
var chartAOptions = { // Chart.js config. options.
responsive: true,
maintainAspectRatio: true,

animationSteps: 35,

scaleFontSize: 10,
scaleShowLine: true,
scaleBeginAtZero: true,
scaleIntegersOnly: true,
scaleFontFamily: 'sans-serif',
scaleShowLabelBackdrop: true,
scaleBackdropPaddingY: 2,
scaleBackdropPaddingX: 4,
scaleFontColor: 'rgba(0,0,0,1)',
scaleBackdropColor: 'rgba(255,255,255,1)',
scaleLineColor: $('body').hasClass('admin-color-light') ?
'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.25)',
scaleLineColor: $('body').hasClass('admin-color-light') ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.25)',
scaleLabel: function (payload) {
return plugin.bytesToSizeLabel(payload.value);
return plugin.bytesToSizeLabel(Number(payload.value));
},

tooltipFontSize: 12,
tooltipFillColor: 'rgba(0,0,0,1)',
tooltipFontFamily: 'Georgia, serif',
tooltipTemplate: function (payload) {
return payload.label + ': ' + plugin.bytesToSizeLabel(payload.value);
return payload.label + ': ' + plugin.bytesToSizeLabel(Number(payload.value));
},

segmentShowStroke: true,
segmentStrokeWidth: 1,
segmentStrokeColor: $('body').hasClass('admin-color-light') ?
'rgba(0,0,0,1)' : 'rgba(255,255,255,1)'
segmentStrokeColor: $('body').hasClass('admin-color-light') ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)'
}, // ↑ Merged w/ global config. options.

chartBOptions = chartAOptions;
Expand Down Expand Up @@ -346,19 +352,26 @@
.attr('height', parseInt(chartBDimensions.height))
.css(chartBDimensions); // Restore.
}
if ($chartA.length) {
if ($chartA.length && chartAData[0].value > 0) {
chartA = new Chart($chartA[0].getContext('2d')).PolarArea(chartAData, chartAOptions);
$stats.data('chartA', chartA).data('chartADimensions', {
width: $chartA.width() + 'px',
height: $chartA.height() + 'px'
});
} else {
$chartA.hide(); // Hide if not showing.
}
if ($chartB.length) {
if ($chartB.length && chartBData[0].value > 0) {
chartB = new Chart($chartB[0].getContext('2d')).PolarArea(chartBData, chartBOptions);
$stats.data('chartB', chartB).data('chartBDimensions', {
width: $chartB.width() + 'px',
height: $chartB.height() + 'px'
});
} else {
$chartB.hide(); // Hide if not showing.
}
if ($chartA.is(':hidden') && $chartB.is(':hidden')) {
$totals.addClass('-no-charts');
}
$totals.css('visibility', 'visible'); // Make this visible now.
$totalFiles.find('.-value').html(plugin.escHtml(plugin.numberFormat(totalLinksFiles) + ' ' + (totalLinksFiles === 1 ? plugin.vars.i18n.file : plugin.vars.i18n.files)));
Expand All @@ -377,10 +390,10 @@
};

plugin.bytesToSizeLabel = function (bytes, decimals) {
if (isNaN(bytes) || bytes <= 1) {
if (typeof bytes !== 'number' || bytes <= 1) {
return bytes === 1 ? '1 byte' : '0 bytes';
} // See: <http://jas.xyz/1gOCXob>
if (isNaN(decimals) || decimals <= 0) {
if (typeof decimals !== 'number' || decimals <= 0) {
decimals = 0; // Default; integer.
}
var base = 1024, // 1 Kilobyte base (binary).
Expand All @@ -392,10 +405,10 @@
};

plugin.numberFormat = function (number, decimals) {
if (isNaN(number)) {
if (typeof number !== 'number') {
return String(number);
} // See: <http://jas.xyz/1JlFD9P>
if (isNaN(decimals) || decimals <= 0) {
if (typeof decimals !== 'number' || decimals <= 0) {
decimals = 0; // Default; integer.
}
return number.toFixed(decimals).replace(/./g, function (m, o, s) {
Expand Down
2 changes: 1 addition & 1 deletion src/client-s/js/admin-bar.min.js
View file

Large diffs are not rendered by default.

35 changes: 20 additions & 15 deletions src/client-s/js/menu-pages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@
$totals.css('visibility', 'hidden');
$disk.css('visibility', 'hidden');

if (!canSeeMore) {
$totalDir.hide();
if (!canSeeMore || $.trim($totalDir.text()).length > 30) {
$totalDir.hide(); // Hide this.
}
if (!plugin.dirStatsData) {
var postVars = {
Expand Down Expand Up @@ -225,11 +225,14 @@
}
var chartAOptions = { // Chart.js config. options.
responsive: true,
maintainAspectRatio: true,

animationSteps: 35,

scaleFontSize: 14,
scaleShowLine: true,
scaleBeginAtZero: true,
scaleIntegersOnly: true,
scaleFontFamily: 'sans-serif',
scaleShowLabelBackdrop: true,
scaleBackdropPaddingY: 2,
Expand All @@ -238,29 +241,27 @@
scaleBackdropColor: 'rgba(255,255,255,1)',
scaleLineColor: 'rgba(0,0,0,0.15)',
scaleLabel: function (payload) {
return plugin.numberFormat(payload.value) + // e.g., X file(s).
return plugin.numberFormat(Number(payload.value)) +
' ' + (payload.value === 1 ? plugin.vars.i18n.file : plugin.vars.i18n.files);
},

tooltipFontSize: 18,
tooltipFillColor: 'rgba(0,0,0,1)',
tooltipFontFamily: 'Georgia, serif',
tooltipTemplate: function (payload) {
return payload.label + ': ' + plugin.numberFormat(payload.value) + // e.g., X file(s).
return payload.label + ': ' + plugin.numberFormat(Number(payload.value)) +
' ' + (payload.value === 1 ? plugin.vars.i18n.file : plugin.vars.i18n.files);
},

segmentShowStroke: true,
segmentStrokeWidth: 2,
segmentStrokeColor: 'rgba(255,255,255,1)'
}, // ↑ Merged w/ global config. options.

chartBOptions = $.extend({}, chartAOptions, {
scaleLabel: function (payload) {
return plugin.bytesToSizeLabel(payload.value);
return plugin.bytesToSizeLabel(Number(payload.value));
},
tooltipTemplate: function (payload) {
return payload.label + ': ' + plugin.bytesToSizeLabel(payload.value);
return payload.label + ': ' + plugin.bytesToSizeLabel(Number(payload.value));
},
});

Expand Down Expand Up @@ -351,19 +352,23 @@
.attr('height', parseInt(chartBDimensions.height))
.css(chartBDimensions); // Restore.
}
if ($chartA.length) {
chartA = new Chart($chartA.find('.-canvas')[0].getContext('2d')).Pie(chartAData, chartAOptions);
if ($chartA.length && chartAData[0].value > 0) {
chartA = new Chart($chartA.find('.-canvas')[0].getContext('2d')).PolarArea(chartAData, chartAOptions);
$stats.data('chartA', chartA).data('chartADimensions', {
width: $chartA.find('.-canvas').width() + 'px',
height: $chartA.find('.-canvas').height() + 'px'
});
} else {
$chartA.hide(); // Hide if not showing.
}
if ($chartB.length) {
if ($chartB.length && chartBData[0].value > 0) {
chartB = new Chart($chartB.find('.-canvas')[0].getContext('2d')).PolarArea(chartBData, chartBOptions);
$stats.data('chartB', chartB).data('chartBDimensions', {
width: $chartB.find('.-canvas').width() + 'px',
height: $chartB.find('.-canvas').height() + 'px'
});
} else {
$chartB.hide(); // Hide if not showing.
}
$totals.css('visibility', 'visible'); // Make this visible now.
$totalFiles.find('.-value').html(plugin.escHtml(plugin.numberFormat(totalLinksFiles) + ' ' + (totalLinksFiles === 1 ? plugin.vars.i18n.file : plugin.vars.i18n.files)));
Expand All @@ -380,10 +385,10 @@
/*![/pro]*/

plugin.bytesToSizeLabel = function (bytes, decimals) {
if (isNaN(bytes) || bytes <= 1) {
if (typeof bytes !== 'number' || bytes <= 1) {
return bytes === 1 ? '1 byte' : '0 bytes';
} // See: <http://jas.xyz/1gOCXob>
if (isNaN(decimals) || decimals <= 0) {
if (typeof decimals !== 'number' || decimals <= 0) {
decimals = 0; // Default; integer.
}
var base = 1024, // 1 Kilobyte base (binary).
Expand All @@ -395,10 +400,10 @@
};

plugin.numberFormat = function (number, decimals) {
if (isNaN(number)) {
if (typeof number !== 'number') {
return String(number);
} // See: <http://jas.xyz/1JlFD9P>
if (isNaN(decimals) || decimals <= 0) {
if (typeof decimals !== 'number' || decimals <= 0) {
decimals = 0; // Default; integer.
}
return number.toFixed(decimals).replace(/./g, function (m, o, s) {
Expand Down
Loading

0 comments on commit 1b9a996

Please sign in to comment.