Skip to content

N
nexpie-grafana-theme
Commit 8927a04a by Rashid Khan
Options

Merge pull request #244 from rashidkpc/master 

IE support; Closes #96
parents c8e54051 fabf9f38
Showing with 26 additions and 18 deletions
common/css/main.css
...@@ -49,9 +49,9 @@ ...@@ -49,9 +49,9 @@
-webkit-transform-origin: 40px; -webkit-transform-origin: 40px;
transform-origin: 40px; transform-origin: 40px;
transform: rotate(-90deg); transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
} }
.row-open i { .row-open i {
......
panels/histogram/module.html
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
<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 data' class="histogram-legend"> <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
<div class="histogram-legend-dot" style="background:{{series.info.color}};"></div> <i class='icon-circle' ng-style="{color: series.info.color}"></i>
<div class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</div> <span class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</span>
</span> </span>
<span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span> <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
</div> </div>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center> <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
<div histogram-chart class="histogram-chart" params="{{panel}}" style="height:{{panel.height || row.height}};"></div> <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/histogram/module.js
...@@ -266,6 +266,7 @@ angular.module('kibana.histogram', []) ...@@ -266,6 +266,7 @@ angular.module('kibana.histogram', [])
.directive('histogramChart', function(dashboard, eventBus, filterSrv, $rootScope) { .directive('histogramChart', function(dashboard, eventBus, filterSrv, $rootScope) {
return { return {
restrict: 'A', restrict: 'A',
template: '<div></div>',
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
// Receive render events // Receive render events
...@@ -281,6 +282,9 @@ angular.module('kibana.histogram', []) ...@@ -281,6 +282,9 @@ angular.module('kibana.histogram', [])
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
// IE doesn't work without this
elem.css({height:scope.panel.height||scope.row.height});
// Populate from the query service // Populate from the query service
try { try {
_.each(scope.data,function(series) { _.each(scope.data,function(series) {
......
panels/hits/module.html
...@@ -10,26 +10,26 @@ ...@@ -10,26 +10,26 @@
<!-- horizontal legend --> <!-- horizontal legend -->
<div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;"> <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
<span><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></span> {{query.info.alias}} ({{query.data[0][1]}}) </span> <span><i class="icon-circle" ng-style="{color:query.info.color}"></i> {{query.info.alias}} ({{query.data[0][1]}}) </span>
</div><br> </div><br>
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
<div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="position:relative"></div>
<div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'> <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend --> <!-- vertical legend -->
<table class="small" ng-show="panel.arrangement == 'vertical'"> <table class="small" ng-show="panel.arrangement == 'vertical'">
<tr ng-repeat="query in data"> <tr ng-repeat="query in data">
<td><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.info.alias}}</td><td>{{query.data[0][1]}}</td> <td><i class="icon-circle" ng-style="{color:query.info.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{query.info.alias}}</td><td>{{query.data[0][1]}}</td>
</tr> </tr>
</table> </table>
<!-- horizontal legend --> <!-- horizontal legend -->
<div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;"> <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
<span><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></span> {{query.info.alias}} ({{query.data[0][1]}}) </span> <span><i class="icon-circle" ng-style="{color:query.info.color}"></i></span> {{query.info.alias}} ({{query.data[0][1]}}) </span>
</div><br> </div><br>
</div> </div>
......
panels/hits/module.js
...@@ -161,6 +161,8 @@ angular.module('kibana.hits', []) ...@@ -161,6 +161,8 @@ angular.module('kibana.hits', [])
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
// IE doesn't work without this
elem.css({height:scope.panel.height||scope.row.height});
try { try {
_.each(scope.data,function(series) { _.each(scope.data,function(series) {
...@@ -228,9 +230,6 @@ angular.module('kibana.hits', []) ...@@ -228,9 +230,6 @@ angular.module('kibana.hits', [])
colors: query.colors colors: query.colors
}); });
} }
// Compensate for the height of the legend. Gross
elem.height(
(scope.panel.height || scope.row.height).replace('px','') - $("#"+scope.$id+"-legend").height());
// Work around for missing legend at initialization // Work around for missing legend at initialization
if(!scope.$$phase) { if(!scope.$$phase) {
......
panels/pie/module.html
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
</span> </span>
<div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;"> <div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span> <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div><br> </div><br>
<div style="clear:both"></div> <div style="clear:both"></div>
<div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div pie params="{{panel}}" style="position:relative"></div>
<div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;"> <div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span> <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div> </div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/pie/module.js
...@@ -181,10 +181,14 @@ angular.module('kibana.pie', []) ...@@ -181,10 +181,14 @@ angular.module('kibana.pie', [])
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
// IE doesn't work without this
elem.css({height:scope.panel.height||scope.row.height});
var scripts = $LAB.script("common/lib/panels/jquery.flot.js").wait() var scripts = $LAB.script("common/lib/panels/jquery.flot.js").wait()
.script("common/lib/panels/jquery.flot.pie.js"); .script("common/lib/panels/jquery.flot.pie.js");
var label; var label;
if(scope.panel.mode === 'goal') { if(scope.panel.mode === 'goal') {
label = { label = {
show: scope.panel.labels, show: scope.panel.labels,
......
panels/query/meta.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<form> <form>
<input class="input-medium input-query-alias" type="text" ng-model="queries.list[id].alias" placeholder='Alias...' /> <input class="input-medium input-query-alias" type="text" ng-model="queries.list[id].alias" placeholder='Alias...' />
<div> <div>
<i ng-repeat="color in queries.colors" class="pointer" ng-class="{'icon-circle-blank':queries.list[id].color == color,'icon-circle':queries.list[id].color != color}" style="color:{{color}}" ng-click="queries.list[id].color = color;render();"> </i> <i ng-repeat="color in queries.colors" class="pointer" ng-class="{'icon-circle-blank':queries.list[id].color == color,'icon-circle':queries.list[id].color != color}" ng-style="{color:color}" ng-click="queries.list[id].color = color;render();"> </i>
</div> </div>
</form> </form>
</div> </div>
\ No newline at end of file
panels/query/module.html
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div ng-repeat="id in queries.ids" ng-class="{'short-query': queries.ids.length>1}"> <div ng-repeat="id in queries.ids" ng-class="{'short-query': queries.ids.length>1}">
<form class="form-search" style="position:relative" ng-submit="refresh()"> <form class="form-search" style="position:relative" ng-submit="refresh()">
<span class="begin-query"> <span class="begin-query">
<i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" style="color:{{queries.list[id].color}}"></i> <i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" ng-style="{color: queries.list[id].color}"></i>
<i class="icon-remove-sign pointer remove-query" ng-show="queries.ids.length>1" ng-click="queries.remove(id);refresh()"></i> <i class="icon-remove-sign pointer remove-query" ng-show="queries.ids.length>1" ng-click="queries.remove(id);refresh()"></i>
</span> </span>
<input class="search-query panel-query" ng-class="{'input-block-level': queries.ids.length==1,'last-query': $last,'has-remove': queries.ids.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="queries.list[id].query"/> <input class="search-query panel-query" ng-class="{'input-block-level': queries.ids.length==1,'last-query': $last,'has-remove': queries.ids.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="queries.list[id].query"/>
......
panels/timepicker/module.js
...@@ -92,8 +92,6 @@ angular.module('kibana.timepicker', []) ...@@ -92,8 +92,6 @@ angular.module('kibana.timepicker', [])
if($scope.time.from.diff(moment.utc(time.from),'seconds') !== 0 || if($scope.time.from.diff(moment.utc(time.from),'seconds') !== 0 ||
$scope.time.to.diff(moment.utc(time.to),'seconds') !== 0) $scope.time.to.diff(moment.utc(time.to),'seconds') !== 0)
{ {
console.log($scope.time.from+ " and "+ moment.utc(time.from));
console.log($scope.time.to+" and "+moment.utc(time.to));
$scope.set_mode('absolute'); $scope.set_mode('absolute');
......
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