Skip to content

N
nexpie-grafana-theme
Commit 6911e184 by Torkel Ödegaard
Options

New legend display option 'Right side', will show legend to the right of the graph (Closes #556)

parent 96272125
Showing with 104 additions and 52 deletions
CHANGELOG.md
......@@ -3,6 +3,7 @@ vNext
**New features or improvements**
- Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511)
- New legend display option "Align as table" (Issue #136)
- New legend display option "Right side", will show legend to the right of the graph (Issue #556)
- Enhanced InfluxDB series aliasing (legend names) with pattern replacements (Issue #525)
**Changes**
......
src/app/directives/grafanaGraph.js
......@@ -17,6 +17,7 @@ function (angular, $, kbn, moment, _) {
link: function(scope, elem) {
var data, plot, annotations;
var hiddenData = {};
var legendSideLastValue = null;
scope.$on('refresh',function() {
if (scope.otherPanelInFullscreenMode()) { return; }
......@@ -55,7 +56,7 @@ function (angular, $, kbn, moment, _) {
height = height - 32; // subtract panel title bar
if (scope.panel.legend.show) {
if (scope.panel.legend.show && !scope.panel.legend.rightSide) {
height = height - 21; // subtract one line legend
}
......@@ -135,6 +136,7 @@ function (angular, $, kbn, moment, _) {
yaxes: [],
xaxis: {},
grid: {
minBorderMargin: 0,
markings: [],
backgroundColor: null,
borderWidth: 0,
......@@ -161,9 +163,30 @@ function (angular, $, kbn, moment, _) {
addAnnotations(options);
configureAxisOptions(data, options);
plot = $.plot(elem, data, options);
// if legend is to the right delay plot draw a few milliseconds
// so the legend width calculation can be done
if (shouldDelayDraw(panel)) {
console.log('delay');
legendSideLastValue = panel.legend.rightSide;
setTimeout(function() {
plot = $.plot(elem, data, options);
addAxisLabels();
}, 50);
}
else {
plot = $.plot(elem, data, options);
addAxisLabels();
}
}
addAxisLabels();
function shouldDelayDraw(panel) {
if (panel.legend.rightSide) {
return true;
}
if (legendSideLastValue !== null && panel.legend.rightSide !== legendSideLastValue) {
return true;
}
return false;
}
function addTimeAxis(options) {
......
src/app/panels/graph/axisEditor.html
......@@ -33,10 +33,6 @@
<label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Label</label>
<input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
</div>
</div>
</div>
......@@ -53,6 +49,9 @@
<div class="editor-option">
<label class="small">Align as table</label><input type="checkbox" ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable">
</div>
<div class="editor-option">
<label class="small">Right side</label><input type="checkbox" ng-model="panel.legend.rightSide" ng-change="render();" ng-checked="panel.legend.rightSide">
</div>
</div>
<div class="section" ng-if="panel.legend.values">
......
src/app/panels/graph/legend.html
<!-- <span ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
ng-repeat='series in legend'
class="histogram-legend">
<i class='icon-minus pointer'
ng-style="{color: series.color}"
bs-popover="'colorPopup.html'"
>
</i>
<span class='small histogram-legend-item'>
<a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
{{series.alias}}
</a>
<span ng-if="panel.legend.values">
<span ng-show="panel.legend.current">
&nbsp;&nbsp;Current: {{series.current}}&nbsp;
</span>
<span ng-show="panel.legend.min">
&nbsp;&nbsp;Min: {{series.min}}&nbsp;
</span>
<span ng-show="panel.legend.max">
&nbsp;&nbsp;Max: {{series.max}}&nbsp;
</span>
<span ng-show="panel.legend.total">
&nbsp;&nbsp;Total: {{series.total}}&nbsp;
</span>
<span ng-show="panel.legend.avg">
&nbsp;&nbsp;Avg: {{series.avg}}&nbsp;
</span>
</span>
</span>
</span> -->
<section class="graph-legend" ng-class="{'graph-legend-table': panel.legend.alignAsTable}">
<div class="graph-legend-series"
......
src/app/panels/graph/module.html
......@@ -3,19 +3,45 @@
style="min-height:{{panel.height || row.height}}"
ng-class="{'panel-fullscreen': fullscreen}">
<div style="position: relative">
<!-- <table style="width: 100%">
<tr>
<td style="width: 100%">
<div style="position: relative">
<div ng-if="datapointsWarning" class="datapoints-warning">
<span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
</div>
<div ng-if="datapointsWarning" class="datapoints-warning">
<span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
</div>
<div grafana-graph class="pointer histogram-chart">
</div>
<div grafana-graph class="pointer histogram-chart">
</div>
</div>
</div>
</td>
<td>
<div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
</div>
</td>
</tr>
</table> -->
<div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
<div class="graph-canvas-wrapper">
<div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
<div ng-if="datapointsWarning" class="datapoints-warning">
<span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
</div>
<div grafana-graph class="pointer histogram-chart">
</div>
</div>
<div class="graph-legend-wrapper"
ng-if="panel.legend.show"
ng-include="'app/panels/graph/legend.html'">
</div>
</div>
<div class="clearfix"></div>
......
src/app/partials/influxdb/editor.html
......@@ -156,7 +156,7 @@
<div class="pull-left metrics-editor-help" style="margin-top: 30px;">
<div class="span6">
<span>
<span class="pointer">
<i class="icon-question-sign"></i> alias patterns:
</span>
<ul class="hide">
......
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/css/default.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/grafana.less
@import "submenu.less";
@import "legend.less";
@import "graph.less";
@import "bootstrap-tagsinput.less";
.hide-controls {
......
src/css/less/legend.less → src/css/less/graph.less
......@@ -19,6 +19,7 @@
.graph-legend-alias,
.graph-legend-value {
display: inline-block;
white-space: nowrap;
}
.graph-legend-series {
......@@ -61,6 +62,41 @@
}
}
.graph-legend-rightside {
&.graph-wrapper {
display: table;
width: 100%;
}
.graph-canvas-wrapper {
display: table-cell;
width: 100%;
position: relative;
}
.graph-legend-wrapper {
display: table-cell;
vertical-align: top;
position: relative;
left: -4px;
}
.graph-legend {
margin: 0;
}
.graph-legend-series {
display: block;
padding-left: 0px;
}
.graph-legend-table .graph-legend-series {
display: table-row;
}
}
.graph-legend-series-hidden {
a {
color: darken(@linkColor, 45%);
......@@ -86,4 +122,4 @@
.editor-row {
padding: 5px;
}
}
\ No newline at end of file
}
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