Skip to content

N
nexpie-grafana-theme
Commit 0fa6b34f by Torkel Ödegaard
Options

working on native png renderer support

parent 4d6bb8b6
Showing with 69 additions and 61 deletions
src/app/directives/grafanaGraph.js
...@@ -46,16 +46,26 @@ function (angular, $, kbn, moment, _) { ...@@ -46,16 +46,26 @@ function (angular, $, kbn, moment, _) {
render_panel(); render_panel();
}); });
function setElementHeight() {
try {
elem.css({ height: scope.height || scope.panel.height || scope.row.height });
return true;
} catch(e) { // IE throws errors sometimes
return false;
}
}
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
if (!data) { if (!data) { return; }
if (!setElementHeight()) { return; }
if (_.isString(data)) {
render_panel_as_graphite_png();
return; return;
} }
try {
elem.css({ height: scope.height || scope.panel.height || scope.row.height });
} catch(e) { return; }
_.each(data, function(series) { _.each(data, function(series) {
series.label = series.info.alias; series.label = series.info.alias;
series.color = series.info.color; series.color = series.info.color;
...@@ -123,24 +133,7 @@ function (angular, $, kbn, moment, _) { ...@@ -123,24 +133,7 @@ function (angular, $, kbn, moment, _) {
} }
}; };
if(scope.panel.annotate.enable) { addAnnotations(options);
options.events = {
levels: 1,
data: scope.annotations,
types: {
'annotation': {
level: 1,
icon: {
icon: "icon-tag icon-flip-vertical",
size: 20,
color: "#222",
outline: "#bbb"
}
}
}
//xaxis: int // the x axis to attach events to
};
}
if(scope.panel.interactive) { if(scope.panel.interactive) {
options.selection = { mode: "x", color: '#666' }; options.selection = { mode: "x", color: '#666' };
...@@ -170,6 +163,55 @@ function (angular, $, kbn, moment, _) { ...@@ -170,6 +163,55 @@ function (angular, $, kbn, moment, _) {
plot = $.plot(elem, data, options); plot = $.plot(elem, data, options);
addAxisLabels();
}
function render_panel_as_graphite_png() {
data += '&width=' + elem.width();
data += '&height=' + elem.css('height').replace('px', '');
data += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
data += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
data += scope.panel.stack ? '&areaMode=stacked' : '';
data += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
data += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
data += scope.panel.steppedLine ? '&lineMode=staircase' : '';
switch(scope.panel.nullPointMode) {
case 'connected':
data += '&lineMode=connected';
break;
case 'null':
break; // graphite default lineMode
case 'null as zero':
data += "&drawNullAsZero=true";
break;
}
elem.html('<img src="' + data + '"></img>');
}
function addAnnotations(options) {
if(scope.panel.annotate.enable) {
options.events = {
levels: 1,
data: scope.annotations,
types: {
'annotation': {
level: 1,
icon: {
icon: "icon-tag icon-flip-vertical",
size: 20,
color: "#222",
outline: "#bbb"
}
}
}
};
}
}
function addAxisLabels() {
if (scope.panel.leftYAxisLabel) { if (scope.panel.leftYAxisLabel) {
elem.css('margin-left', '10px'); elem.css('margin-left', '10px');
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>") var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
...@@ -182,13 +224,12 @@ function (angular, $, kbn, moment, _) { ...@@ -182,13 +224,12 @@ function (angular, $, kbn, moment, _) {
} }
} }
function configureAxisOptions(data, options) function configureAxisOptions(data, options) {
{
var defaults = { var defaults = {
position: 'left', position: 'left',
show: scope.panel['y-axis'], show: scope.panel['y-axis'],
min: scope.panel.grid.min, min: scope.panel.grid.min,
max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max,
}; };
options.yaxes.push(defaults); options.yaxes.push(defaults);
......
src/app/panels/graphite/module.js
...@@ -481,38 +481,5 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -481,38 +481,5 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}); });
if (_.isString(data)) {
render_panel_as_graphite_png();
return;
}
addAxisLabels();
}
function render_panel_as_graphite_png() {
data += '&width=' + elem.width();
data += '&height=' + elem.css('height').replace('px', '');
data += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
data += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
data += scope.panel.stack ? '&areaMode=stacked' : ''
data += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
data += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
data += scope.panel.steppedLine ? '&lineMode=staircase' : '';
switch(scope.panel.nullPointMode) {
case 'connected':
data += '&lineMode=connected';
break;
case 'null':
break; // graphite default lineMode
case 'null as zero':
data += "&drawNullAsZero=true";
break;
}
elem.html('<img src="' + data + '"></img>');
}
function addAxisLabels() {
}); });
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/overrides.less
...@@ -103,7 +103,7 @@ code, pre { ...@@ -103,7 +103,7 @@ code, pre {
.panel div.panel-extra { .panel div.panel-extra {
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 10px; margin-bottom: 0px;
} }
.panel div.panel-extra .extra { .panel div.panel-extra .extra {
...@@ -195,7 +195,7 @@ form input.ng-invalid { ...@@ -195,7 +195,7 @@ form input.ng-invalid {
} }
.kibana-row { .kibana-row {
margin-bottom: 10px; margin-bottom: 5px;
} }
.row-tab { .row-tab {
......
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