Skip to content

Commit

Permalink
Merge pull request #35 from rashidkpc/master
Browse files Browse the repository at this point in the history 
pie and histogram cleanup
  • Loading branch information
Rashid Khan committed Apr 8, 2013
2 parents 1b9e139 + ed29709 commit 8468976
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 24 deletions.
2 changes: 1 addition & 1 deletion panels/histogram/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
</span> |
<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>
</span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions panels/histogram/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,10 +301,10 @@ angular.module('kibana.histogram', [])
top : y + 5,
left : x + 5,
color : "#000",
border : '3px solid #000',
border : '2px solid #000',
padding : '10px',
'font-size': '11pt',
'font-weight' : 'bold',
'font-weight' : 200,
'background-color': '#FFF',
'border-radius': '10px',
}).appendTo("body");
Expand All @@ -313,7 +313,7 @@ angular.module('kibana.histogram', [])
elem.bind("plothover", function (event, pos, item) {
if (item) {
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) + " @ " +
new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
} else {
Expand Down
2 changes: 1 addition & 1 deletion panels/hits/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</tr>
</table>
<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><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>
Expand Down
6 changes: 3 additions & 3 deletions panels/hits/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,10 @@ angular.module('kibana.hits', [])
top : y + 5,
left : x + 5,
color : "#000",
border : '3px solid #000',
border : '2px solid #000',
padding : '10px',
'font-size': '11pt',
'font-weight' : 'bold',
'font-weight' : 200,
'background-color': '#FFF',
'border-radius': '10px',
}).appendTo("body");
Expand All @@ -204,7 +204,7 @@ angular.module('kibana.hits', [])
elem.bind("plothover", function (event, pos, item) {
if (item) {
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))
} else {
$("#pie-tooltip").remove();
Expand Down
12 changes: 6 additions & 6 deletions panels/map/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,12 @@ angular.module('kibana.map', [])
$('.jvectormap-label').css({
"position" : "absolute",
"display" : "none",
"border" : "solid 1px #CDCDCD",
"background" : "#292929",
"color" : "white",
"font-family" : "sans-serif, Verdana",
"font-size" : "smaller",
"padding" : "3px"
"border" : "solid 2px #000",
"background" : "#FFF",
"font-weight" : 200,
"border-radius": "5px",
"color" : "#000",
"padding" : "5px"
})
var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code];
$('.jvectormap-label').text(label.text() + ": " + count);
Expand Down
7 changes: 6 additions & 1 deletion panels/pie/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
<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>
</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>
</kibana-panel>
27 changes: 18 additions & 9 deletions panels/pie/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,30 +268,38 @@ angular.module('kibana.pie', [])
},
//grid: { hoverable: true, clickable: true },
grid: { hoverable: true, clickable: true },
legend: { show: scope.panel.legend },
legend: { show: false },
colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
};

// Populate element
if(elem.is(":visible")){
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)
});
}
}

function piett(x, y, contents) {
var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
tooltip.text(contents).css({
tooltip.html(contents).css({
position: 'absolute',
top : y + 10,
left : x + 10,
color : "#FFF",
border : '1px solid #FFF',
padding : '2px',
'font-size': '8pt',
'background-color': '#000',
color : "#000",
'font-weight': 200,
'border-radius': '5px',
border : '2px solid #000',
padding : '10px',
'background-color': '#FFF',
}).appendTo("body");
}

Expand All @@ -305,7 +313,8 @@ angular.module('kibana.pie', [])
elem.bind("plothover", function (event, pos, item) {
if (item) {
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 {
$("#pie-tooltip").remove();
}
Expand Down

0 comments on commit 8468976

Please sign in to comment.