From b7eaae3c8bf67cf357db4de2a0a2beed6b36b1aa Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Sat, 6 Apr 2013 16:34:04 -0700 Subject: [PATCH] Lots of visual tweaks, added bar chart options to hit panel --- common/css/main.css | 40 +++++++++++++ index.html | 2 +- panels/histogram/module.html | 8 +-- panels/histogram/module.js | 5 +- panels/hits/editor.html | 17 +++--- panels/hits/module.html | 21 ++++--- panels/hits/module.js | 104 +++++++++++++++++++++++++++++++-- panels/stringquery/module.html | 2 +- partials/dashboard.html | 20 ++++--- 9 files changed, 183 insertions(+), 36 deletions(-) diff --git a/common/css/main.css b/common/css/main.css index c7a17b0f0c9..bb53d3f6704 100644 --- a/common/css/main.css +++ b/common/css/main.css @@ -6,6 +6,46 @@ color: #000; } +.kibana-row { + margin-left: 15px; + margin-bottom: 15px; +} + +.navbar .brand { + color: #eee; +} + +.row-close { + color: #bbb; + position: absolute; + font-size: 9pt; + font-weight: 200; + padding-left: 35px; + padding-top:0px; +} + +.row-open { + text-align: right; + color: #bbb; + margin-top:30px; + position: absolute; + font-size: 13pt; + font-weight: 200; + -moz-transform-origin: 40px; + -ms-transform-origin: 40px; + -o-transform-origin: 40px; + -webkit-transform-origin: 40px; + transform-origin: 40px; + transform: rotate(-90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); +} + +.row-open i { + font-size: 10pt; +} + .odd { background-color: #f9f9f9; } diff --git a/index.html b/index.html index 7af6855a217..5a23ff69de6 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@
-

Kibana 3 Preview

+

Kibana 3 milestone 1

{{dashboards.title}}
diff --git a/panels/histogram/module.html b/panels/histogram/module.html index 3e646faad12..406c061d576 100644 --- a/panels/histogram/module.html +++ b/panels/histogram/module.html @@ -2,16 +2,16 @@ -
+
+ Zoom In Zoom Out -
-
+ |
{{series.label}} ({{series.hits}})
 per {{panel.interval}} | ({{hits}} total)
-
+
\ No newline at end of file diff --git a/panels/histogram/module.js b/panels/histogram/module.js index 7e9c515b25c..c2049e80f17 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -184,7 +184,7 @@ angular.module('kibana.histogram', []) } }) -.directive('histogram', function(eventBus) { +.directive('histogramChart', function(eventBus) { return { restrict: 'A', link: function(scope, elem, attrs, ctrl) { @@ -256,7 +256,8 @@ angular.module('kibana.histogram', []) color: "#000", }, selection: { - mode: "x" + mode: "x", + color: '#666' }, grid: { backgroundColor: '#fff', diff --git a/panels/hits/editor.html b/panels/hits/editor.html index 0af41993a3a..0c21fcb206a 100644 --- a/panels/hits/editor.html +++ b/panels/hits/editor.html @@ -1,25 +1,28 @@
-
Font Size
- +
+
- +
-
Arrangement
- +
+ +
+
+
-
Label
+
-
Query
+
diff --git a/panels/hits/module.html b/panels/hits/module.html index ab9015ed005..809aea771b0 100644 --- a/panels/hits/module.html +++ b/panels/hits/module.html @@ -1,11 +1,14 @@ -

{{hits}}

- - - - -
{{query.label}}{{query.hits}}
-
- {{query.label}} {{query.hits}} | -
+
+

{{hits}}

+ + + + +
{{query.label}}{{query.hits}}
+
+
{{query.label}} ({{query.hits}}) | +

+
+
\ No newline at end of file diff --git a/panels/hits/module.js b/panels/hits/module.js index 2a1ca5fcffc..a9acca4105b 100644 --- a/panels/hits/module.js +++ b/panels/hits/module.js @@ -5,9 +5,12 @@ angular.module('kibana.hits', []) var _d = { query : "*", group : "default", - style : { "font-size": '36pt'}, + style : { "font-size": '10pt'}, aggregate : true, - arrangement : 'vertical' + arrangement : 'vertical', + chart : true, + counters: true, + count_pos: 'above' } _.defaults($scope.panel,_d) @@ -87,15 +90,17 @@ angular.module('kibana.hits', []) // Create series $scope.data[i] = { label: $scope.panel.query[i].label || "query"+(parseInt(i)+1), - hits: hits + hits: hits, + data: [[i,hits]] }; i++; }); + $scope.$emit('render'); if(_segment < $scope.panel.index.length-1) $scope.get_data(_segment+1,query_id) - + } }); } @@ -119,4 +124,95 @@ angular.module('kibana.hits', []) $scope.get_data(); } +}).directive('hitsChart', function(eventBus) { + return { + restrict: 'A', + link: function(scope, elem, attrs, ctrl) { + + // Receive render events + scope.$on('render',function(){ + render_panel(); + }); + + // Re-render if the window is resized + angular.element(window).bind('resize', function(){ + render_panel(); + }); + + // Function for rendering panel + function render_panel() { + + var scripts = $LAB.script("common/lib/panels/jquery.flot.js") + + // Populate element. Note that jvectormap appends, does not replace. + scripts.wait(function(){ + console.log(scope.data) + + // Populate element + try { + var plot = $.plot(elem, scope.data, { + legend: { show: false }, + series: { + lines: { show: false, }, + bars: { show: true, fill: 1, barWidth: 0.8, horizontal: false }, + shadowSize: 1 + }, + yaxis: { show: true, min: 0, color: "#000" }, + xaxis: { show: false }, + grid: { + backgroundColor: '#fff', + borderWidth: 0, + borderColor: '#eee', + color: "#eee", + hoverable: true, + }, + colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F'] + }) + + var i = 0; + _.each(plot.getData(),function(series) { + scope.data[i].color = series.color; + i++; + }) + + // Work around for missing legend at initialization + if(!scope.$$phase) + scope.$apply() + + } catch(e) { + elem.text(e) + } + }) + } + + function tt(x, y, contents) { + var tooltip = $('#pie-tooltip').length ? + $('#pie-tooltip') : $('
'); + //var tooltip = $('#pie-tooltip') + tooltip.html(contents).css({ + position: 'absolute', + top : y + 5, + left : x + 5, + color : "#000", + border : '3px solid #000', + padding : '10px', + 'font-size': '11pt', + 'font-weight' : 'bold', + 'background-color': '#FFF', + 'border-radius': '10px', + }).appendTo("body"); + } + + elem.bind("plothover", function (event, pos, item) { + if (item) { + tt(pos.pageX, pos.pageY, + "
"+ + item.datapoint[1].toFixed(0)) + } else { + $("#pie-tooltip").remove(); + } + }); + + } + }; }) diff --git a/panels/stringquery/module.html b/panels/stringquery/module.html index c4b6af3fe5c..ca9a789580b 100644 --- a/panels/stringquery/module.html +++ b/panels/stringquery/module.html @@ -21,7 +21,7 @@
-
+ diff --git a/partials/dashboard.html b/partials/dashboard.html index f88f599ad03..797298b533b 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -1,17 +1,21 @@ -
+
-
-
+
+
-
- - {{row.title}} - {{row.title}} +
+
+
+ {{row.title}} + +
+
+ {{row.title}}
-
+