Skip to content

N
nexpie-grafana-theme
Commit 84689768 by Rashid Khan
Options

Merge pull request #35 from rashidkpc/master 

pie and histogram cleanup
parents 1b9e1396 ed297092
Showing with 39 additions and 24 deletions
panels/histogram/module.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
</span> | </span> |
<span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'> <span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
<div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div> <div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
<div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div> <div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
</span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span> </span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>
</div> </div>
......
panels/histogram/module.js
...@@ -301,10 +301,10 @@ angular.module('kibana.histogram', []) ...@@ -301,10 +301,10 @@ angular.module('kibana.histogram', [])
top : y + 5, top : y + 5,
left : x + 5, left : x + 5,
color : "#000", color : "#000",
border : '3px solid #000', border : '2px solid #000',
padding : '10px', padding : '10px',
'font-size': '11pt', 'font-size': '11pt',
'font-weight' : 'bold', 'font-weight' : 200,
'background-color': '#FFF', 'background-color': '#FFF',
'border-radius': '10px', 'border-radius': '10px',
}).appendTo("body"); }).appendTo("body");
...@@ -313,7 +313,7 @@ angular.module('kibana.histogram', []) ...@@ -313,7 +313,7 @@ angular.module('kibana.histogram', [])
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
tt(pos.pageX, pos.pageY, tt(pos.pageX, pos.pageY,
"<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+ "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
item.datapoint[1].toFixed(0) + " @ " + item.datapoint[1].toFixed(0) + " @ " +
new Date(item.datapoint[0]).format('mm/dd HH:MM:ss')); new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
} else { } else {
......
panels/hits/module.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</tr> </tr>
</table> </table>
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;"> <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart'><div style="display:inline-block;background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span> <span ng-show='panel.chart'><div style="display:inline-block;border-radius:{{panel.style['font-size']}};background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
</div><br> </div><br>
</div><div style="clear:both"></div> </div><div style="clear:both"></div>
<div ng-show='panel.chart && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div ng-show='panel.chart && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
......
panels/hits/module.js
...@@ -192,10 +192,10 @@ angular.module('kibana.hits', []) ...@@ -192,10 +192,10 @@ angular.module('kibana.hits', [])
top : y + 5, top : y + 5,
left : x + 5, left : x + 5,
color : "#000", color : "#000",
border : '3px solid #000', border : '2px solid #000',
padding : '10px', padding : '10px',
'font-size': '11pt', 'font-size': '11pt',
'font-weight' : 'bold', 'font-weight' : 200,
'background-color': '#FFF', 'background-color': '#FFF',
'border-radius': '10px', 'border-radius': '10px',
}).appendTo("body"); }).appendTo("body");
...@@ -204,7 +204,7 @@ angular.module('kibana.hits', []) ...@@ -204,7 +204,7 @@ angular.module('kibana.hits', [])
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
tt(pos.pageX, pos.pageY, tt(pos.pageX, pos.pageY,
"<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+ "<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
item.datapoint[1].toFixed(0)) item.datapoint[1].toFixed(0))
} else { } else {
$("#pie-tooltip").remove(); $("#pie-tooltip").remove();
......
panels/map/module.js
...@@ -128,12 +128,12 @@ angular.module('kibana.map', []) ...@@ -128,12 +128,12 @@ angular.module('kibana.map', [])
$('.jvectormap-label').css({ $('.jvectormap-label').css({
"position" : "absolute", "position" : "absolute",
"display" : "none", "display" : "none",
"border" : "solid 1px #CDCDCD", "border" : "solid 2px #000",
"background" : "#292929", "background" : "#FFF",
"color" : "white", "font-weight" : 200,
"font-family" : "sans-serif, Verdana", "border-radius": "5px",
"font-size" : "smaller", "color" : "#000",
"padding" : "3px" "padding" : "5px"
}) })
var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code]; var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code];
$('.jvectormap-label').text(label.text() + ": " + count); $('.jvectormap-label').text(label.text() + ": " + count);
......
panels/pie/module.html
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
<span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'> <span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span> </span>
<span ng-show="panel.legend" ng-repeat='series in legend' style='padding-right:5px'>
<div style='white-space:nowrap;display:table-cell'>
<div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
<div class='small' style='display:inline-block'>{{series.label}} ({{series.percent}}%)</div>
</div>
</span>
<div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/pie/module.js
...@@ -268,14 +268,21 @@ angular.module('kibana.pie', []) ...@@ -268,14 +268,21 @@ angular.module('kibana.pie', [])
}, },
//grid: { hoverable: true, clickable: true }, //grid: { hoverable: true, clickable: true },
grid: { hoverable: true, clickable: true }, grid: { hoverable: true, clickable: true },
legend: { show: scope.panel.legend }, legend: { show: false },
colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F'] colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
}; };
// Populate element // Populate element
if(elem.is(":visible")){ if(elem.is(":visible")){
scripts.wait(function(){ scripts.wait(function(){
$.plot(elem, scope.data, pie); var plot = $.plot(elem, scope.data, pie);
scope.legend = [];
_.each(plot.getData(),function(series) {
var item = _.pick(series,'label','color','percent')
item.percent = parseFloat(item.percent).toFixed(1)
scope.legend.push(item)
})
console.log(scope.legend)
}); });
} }
} }
...@@ -283,15 +290,16 @@ angular.module('kibana.pie', []) ...@@ -283,15 +290,16 @@ angular.module('kibana.pie', [])
function piett(x, y, contents) { function piett(x, y, contents) {
var tooltip = $('#pie-tooltip').length ? var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>'); $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
tooltip.text(contents).css({ tooltip.html(contents).css({
position: 'absolute', position: 'absolute',
top : y + 10, top : y + 10,
left : x + 10, left : x + 10,
color : "#FFF", color : "#000",
border : '1px solid #FFF', 'font-weight': 200,
padding : '2px', 'border-radius': '5px',
'font-size': '8pt', border : '2px solid #000',
'background-color': '#000', padding : '10px',
'background-color': '#FFF',
}).appendTo("body"); }).appendTo("body");
} }
...@@ -305,7 +313,8 @@ angular.module('kibana.pie', []) ...@@ -305,7 +313,8 @@ angular.module('kibana.pie', [])
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
var percent = parseFloat(item.series.percent).toFixed(1) + "%"; var percent = parseFloat(item.series.percent).toFixed(1) + "%";
piett(pos.pageX, pos.pageY, percent + " " + (item.series.label||"")); piett(pos.pageX, pos.pageY, "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> " +
(item.series.label||"")+ " " + percent);
} else { } else {
$("#pie-tooltip").remove(); $("#pie-tooltip").remove();
} }
......
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