Skip to content

N
nexpie-grafana-theme
Commit 58256acb by Rashid Khan
Options

Switch styles to LESS build, add inspector.html, update flot

parent c87ca770
Showing with 96 additions and 165 deletions
Gruntfile.js
......@@ -46,14 +46,28 @@ module.exports = function (grunt) {
moment: false
}
}
},
less: {
production: {
options: {
paths: ["vendor/bootstrap/less"],
yuicompress:true
},
files: {
"common/css/bootstrap.dark.min.css": "vendor/bootstrap/less/bootstrap.dark.less",
"common/css/bootstrap.light.min.css": "vendor/bootstrap/less/bootstrap.light.less"
}
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('assemble-less');
// Default task.
grunt.registerTask('default', ['jshint']);
grunt.registerTask('default', ['jshint','less']);
};
common/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/main.css
......@@ -132,10 +132,20 @@
max-width: 500px;
}
.modal {
width: 770px;
margin-left: -385px;
top: 10px !important;
}
.tiny {
font-size: 50%;
}
.smaller {
font-size: 70%;
}
.small {
font-size: 85%;
}
......
common/lib/panels/jquery.flot.selection.js
......@@ -6,10 +6,10 @@ Licensed under the MIT license.
The plugin supports these options:
selection: {
mode: null or "x" or "y" or "xy",
color: color,
shape: "round" or "miter" or "bevel",
minSize: number of pixels
mode: null or "x" or "y" or "xy",
color: color,
shape: "round" or "miter" or "bevel",
minSize: number of pixels
}
Selection support is enabled by setting the mode to one of "x", "y" or "xy".
......@@ -33,11 +33,11 @@ When selection support is enabled, a "plotselected" event will be emitted on
the DOM element you passed into the plot function. The event handler gets a
parameter with the ranges selected on the axes, like this:
placeholder.bind( "plotselected", function( event, ranges ) {
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
// similar for yaxis - with multiple axes, the extra ones are in
// x2axis, x3axis, ...
});
placeholder.bind( "plotselected", function( event, ranges ) {
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
// similar for yaxis - with multiple axes, the extra ones are in
// x2axis, x3axis, ...
});
The "plotselected" event is only fired when the user has finished making the
selection. A "plotselecting" event is fired during the process with the same
......@@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object:
an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
this:
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
setSelection will trigger the "plotselected" event when called. If you don't
want that to happen, e.g. if you're inside a "plotselected" handler, pass
......
common/lib/panels/jquery.flot.stack.js
/* Flot plugin for stacking data sets rather than overlyaing them.
Copyright (c) 2007-2012 IOLA and Ole Laursen.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
The plugin assumes the data is sorted on x (or y if stacking horizontally).
......@@ -15,7 +15,7 @@ key (which can be any number or string or just "true"). To specify the default
stack, you can set the stack option like this:
series: {
stack: null or true or key (number/string)
stack: null/false, true, or a key (number/string)
}
You can also specify it for a single series, like this:
......@@ -55,7 +55,7 @@ charts or filled areas).
}
function stackData(plot, s, datapoints) {
if (s.stack == null)
if (s.stack == null || s.stack === false)
return;
var other = findMatchingSeries(s, plot.getData());
......@@ -186,130 +186,3 @@ charts or filled areas).
version: '1.2'
});
})(jQuery);
(function ($) {
var options = {
series: {
stackpercent: null
} // or number/string
};
function init(plot) {
// will be built up dynamically as a hash from x-value, or y-value if horizontal
var stackBases = {};
var processed = false;
var stackSums = {};
//set percentage for stacked chart
function processRawData(plot, series, data, datapoints) {
if (!processed) {
processed = true;
stackSums = getStackSums(plot.getData());
}
if (series.stackpercent == true) {
var num = data.length;
series.percents = [];
var key_idx = 0;
var value_idx = 1;
if (series.bars && series.bars.horizontal && series.bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
for (var j = 0; j < num; j++) {
var sum = stackSums[data[j][key_idx] + ""];
if (sum > 0) {
series.percents.push(data[j][value_idx] * 100 / sum);
} else {
series.percents.push(0);
}
}
}
}
//calculate summary
function getStackSums(_data) {
var data_len = _data.length;
var sums = {};
if (data_len > 0) {
//caculate summary
for (var i = 0; i < data_len; i++) {
if (_data[i].stackpercent) {
var key_idx = 0;
var value_idx = 1;
if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
var num = _data[i].data.length;
for (var j = 0; j < num; j++) {
var value = 0;
if (_data[i].data[j][1] != null) {
value = _data[i].data[j][value_idx];
}
if (sums[_data[i].data[j][key_idx] + ""]) {
sums[_data[i].data[j][key_idx] + ""] += value;
} else {
sums[_data[i].data[j][key_idx] + ""] = value;
}
}
}
}
}
return sums;
}
function stackData(plot, s, datapoints) {
if (!s.stackpercent) return;
if (!processed) {
stackSums = getStackSums(plot.getData());
}
var newPoints = [];
var key_idx = 0;
var value_idx = 1;
if (s.bars && s.bars.horizontal && s.bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
for (var i = 0; i < datapoints.points.length; i += 3) {
// note that the values need to be turned into absolute y-values.
// in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
// (each from different series, which is where stackBases comes in),
// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
// generally, (x, thisValue + (base up to this point), + (base up to this point))
if (!stackBases[datapoints.points[i + key_idx]]) {
stackBases[datapoints.points[i + key_idx]] = 0;
}
newPoints[i + key_idx] = datapoints.points[i + key_idx];
newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]];
newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]];
stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx];
// change points to percentage values
// you may need to set yaxis:{ max = 100 }
if ( stackSums[newPoints[i+key_idx]+""] > 0 ){
newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""];
newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""];
} else {
newPoints[i + value_idx] = 0;
newPoints[i + 2] = 0;
}
}
datapoints.points = newPoints;
}
plot.hooks.processRawData.push(processRawData);
plot.hooks.processDatapoints.push(stackData);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'stackpercent',
version: '0.1'
});
})(jQuery);
common/lib/panels/jquery.flot.time.js
/* Pretty handling of time axes.
Copyright (c) 2007-2012 IOLA and Ole Laursen.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
Set axis.mode to "time" to enable. See the section "Time series data" in
......@@ -10,7 +10,14 @@ API.txt for details.
(function($) {
var options = {};
var options = {
xaxis: {
timezone: null, // "browser" for local to the client or timezone for timezone-js
timeformat: null, // format string to use
twelveHourClock: false, // 12 or 24 time in time mode
monthNames: null // list of names of months
}
};
// round to nearby lower multiple of base
......@@ -66,6 +73,7 @@ API.txt for details.
case 'b': c = "" + monthNames[d.getMonth()]; break;
case 'd': c = leftPad(d.getDate()); break;
case 'e': c = leftPad(d.getDate(), " "); break;
case 'h': // For back-compat with 0.7; remove in 1.0
case 'H': c = leftPad(hours); break;
case 'I': c = leftPad(hours12); break;
case 'l': c = leftPad(hours12, " "); break;
......@@ -187,7 +195,7 @@ API.txt for details.
[1, "year"]]);
function init(plot) {
plot.hooks.processDatapoints.push(function (plot, series, datapoints) {
plot.hooks.processOptions.push(function (plot, options) {
$.each(plot.getAxes(), function(axisName, axis) {
var opts = axis.options;
......@@ -287,17 +295,23 @@ API.txt for details.
if (step >= timeUnitSize.minute) {
d.setSeconds(0);
} else if (step >= timeUnitSize.hour) {
}
if (step >= timeUnitSize.hour) {
d.setMinutes(0);
} else if (step >= timeUnitSize.day) {
}
if (step >= timeUnitSize.day) {
d.setHours(0);
} else if (step >= timeUnitSize.day * 4) {
}
if (step >= timeUnitSize.day * 4) {
d.setDate(1);
} else if (step >= timeUnitSize.month * 2) {
}
if (step >= timeUnitSize.month * 2) {
d.setMonth(floorInBase(d.getMonth(), 3));
} else if (step >= timeUnitSize.quarter * 2) {
}
if (step >= timeUnitSize.quarter * 2) {
d.setMonth(floorInBase(d.getMonth(), 6));
} else if (step >= timeUnitSize.year) {
}
if (step >= timeUnitSize.year) {
d.setMonth(0);
}
......
index.html
......@@ -16,7 +16,6 @@
<link rel="stylesheet" href="common/css/animate.min.css">
<link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="common/css/font-awesome.min.css">
<link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/timepicker.css">
<!-- project dependency libs -->
......@@ -26,13 +25,15 @@
<script src="config.js"></script>
<script src="js/app.js"></script>
<style>
</style>
</head>
<body ng-controller="DashCtrl" ng-cloak>
<div ng-repeat='alert in global_alert' class="alert alert-{{alert.severity}} span12" style="position: fixed;top:2px;opacity:0.9;z-index:8000">
<button type="button" class="close" ng-click="clear_alert(alert)">&times;</button>
<strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div class='pull-right small'> {{$index + 1}} alert(s) </div>
<div ng-repeat='alert in global_alert' class="alert-{{alert.severity}} dashboard-notice" ng-show="$last">
<button type="button" class="close" ng-click="clear_alert(alert)" style="padding-right:50px">&times;</button>
<strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div>
</div>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
......
js/directives.js
......@@ -7,11 +7,15 @@ angular.module('kibana.directives', [])
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panelMeta.loading == true">'+
var template = '<i class="icon-spinner small icon-spin icon-large panel-loading" '+
'ng-show="panelMeta.loading == true && !panel.title"></i>'+
' <span class="editlink panelextra pointer" style="right:15px;top:0px" ' +
'bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
'</span><h4>{{panel.title}}</h4>';
'</span><h4>'+
'{{panel.title}} '+
'<i class="icon-spinner smaller icon-spin icon-large" ng-show="panelMeta.loading == true && panel.title"></i>'+
'</h4>';
elem.prepend($compile(angular.element(template))(scope));
}
};
......
package.json
......@@ -8,7 +8,8 @@
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib": "~0.7.0",
"grunt-contrib-jshint": "~0.6.0"
"grunt-contrib-jshint": "~0.6.0",
"assemble-less": "~0.4.8"
},
"license": "Apache License"
}
panels/histogram/module.js
......@@ -165,6 +165,7 @@ angular.module('kibana.histogram', [])
data = [];
if(filterSrv.idsByType('time').length > 0) {
data = [[_range.from.getTime(), null],[_range.to.getTime(), null]];
//data = [];
}
hits = 0;
} else {
......@@ -313,7 +314,7 @@ angular.module('kibana.histogram', [])
lineWidth: scope.panel.linewidth,
steps: false
},
bars: { show: scope.panel.bars, fill: 1, barWidth: barwidth/1.8 },
bars: { show: scope.panel.bars, fill: 1, barWidth: barwidth/1.8, zero: false },
points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5},
shadowSize: 1
},
......@@ -321,22 +322,21 @@ angular.module('kibana.histogram', [])
show: scope.panel['y-axis'],
min: 0,
max: scope.panel.percentage && scope.panel.stack ? 100 : null,
color: "#c8c8c8"
},
xaxis: {
timezone: scope.panel.timezone,
show: scope.panel['x-axis'],
mode: "time",
min: scope.range.from.getTime(),
max: scope.range.to.getTime(),
timeformat: time_format(scope.panel.interval),
label: "Datetime",
color: "#c8c8c8",
},
grid: {
backgroundColor: null,
borderWidth: 0,
borderColor: '#eee',
color: "#eee",
hoverable: true,
color: '#c8c8c8'
}
};
......
panels/table/editor.html
......@@ -8,7 +8,7 @@
</div>
<div class="span8">
<h6>Columns <small>Click to remove</small></h6>
<span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label remove pointer">{{field}} </span>
<span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label pointer remove">{{field}} </span>
</div>
</div>
<div class="row-fluid">
......
partials/inspector.html
......@@ -7,7 +7,7 @@
<div>
<h5>Last Elasticsearch Query</h5>
<pre>curl -XGET '{{config.elasticsearch}}/{{dashboard.indices|stringify}}/_search?pretty' -d '{{inspector}}'
</pre>"
</pre>
</div>
</div>
......
vendor/bootstrap/less/overrides.less
......@@ -190,3 +190,16 @@
.faded {
opacity: 0.2;
}
div.flot-text {
color: @textColor !important;
}
.dashboard-notice {
z-index:8000;
margin-left:0px;
padding:3px 0px 3px 0px;
width:100%;
color: @textColor;
padding-left:20px;
}
\ No newline at end of file
vendor/bootstrap/less/variables.light.less
......@@ -32,7 +32,7 @@
// Scaffolding
// -------------------------
@bodyBackground: @white;
@bodyBackground: #ffffff;
@textColor: @grayDark;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment