Been reading over the implementation of AdminLTE, and no offence to anyone who has worked on it (as I know I can't talk, I'm no pro). But the implementation is VERY heavy and slow. It'd seem some have a habit of globally declaring things to the result of needing to loop through the global declarations just to find one element that is needed and strip it of anything unneeded. I understand it's a more global and including approach so it'd be easier to edit at a later date I suppose (except the files have been minified, but hey that's fine). But I don't think the cost of this implementation is worth it whatsoever. A prime example is what i stumpled upon with the graph colouring, i'll post examples...
This is the original code:
var colors = [];
// Get colors from AdminLTE
$.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
var v = [], c = [];
// Collect values and colors, immediately push individual labels
$.each(data, function(key , value) {
v.push(value);
c.push(colors.shift());
queryTypeChart.data.labels.push(key.substr(6,key.length - 7));
});
// Build a single dataset with the data to be pushed
var dd = {data: v, backgroundColor: c};
// and push it at once
queryTypeChart.data.datasets.push(dd);
In pseudo code this is basically what that does:
create a variable (colors)
call an external variable declared in another file.
loop through several elements of that external variable.
push each element it finds to the variable we made (colors).
create two more variables.
loop for every value we need to push, whilst picking a colour from the 'colors' variable.
push the value and colour to the two new variables.
add a label name for the chart.
make another variable.
push the new variable to the chart.
Here's what I did. Yes it isn't as inclusive, or "universal". but you've seen the speed difference.
var colors = ["#37776A", "#f56954","#3c8dbc","#C874B1"];
var dd = {data:[],backgroundColor:[]}
$.each(data, function(key , value) {
dd.data.push(value);
dd.backgroundColor.push(colors.shift());
queryTypeChart.data.labels.push(key.substr(6,key.length - 7));
});
queryTypeChart.data.datasets.push(dd);
queryTypeChart.chart.config.options.cutoutPercentage=30;
queryTypeChart.update();
$("#query-types .overlay").remove();
Small change, only major difference is it excludes one of the heavy foreach loops which can take a little bit of time to run. Other than that it's also less resource hungry.
Point being, I can do a pull request for this, I don't know if the people that implemented it in the existing method would like it though. But if I were to do this I'd also wish to optimize other areas of the AdminLTE implementation.