Skip to content

N
nexpie-grafana-theme
Commit 14247dda by Torkel Ödegaard
Options

New legend display option 'Align as table' (Issue #136)

parent fd8561ac
Showing with 156 additions and 84 deletions
CHANGELOG.md
...@@ -2,6 +2,7 @@ vNext ...@@ -2,6 +2,7 @@ vNext
**New features or improvements** **New features or improvements**
- Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511) - Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511)
- New legend display option "Align as table" (Issue #136)
**Changes** **Changes**
- Use unix epoch for Graphite from/to for absolute time ranges (Closes #536) - Use unix epoch for Graphite from/to for absolute time ranges (Closes #536)
......
src/app/panels/graph/axisEditor.html
...@@ -42,38 +42,17 @@ ...@@ -42,38 +42,17 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Grid thresholds</h5> <h5>Legend styles</h5>
<div class="editor-option">
<label class="small">Level1</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Level2</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
</div>
</div>
<div class="section">
<h5>Legend</h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();"> <label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();">
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Include Values</label><input type="checkbox" ng-model="panel.legend.values" ng-checked="panel.legend.values" ng-change="render();"> <label class="small">Include Values</label><input type="checkbox" ng-model="panel.legend.values" ng-checked="panel.legend.values" ng-change="render();">
</div> </div>
<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> </div>
<div class="section" ng-if="panel.legend.values"> <div class="section" ng-if="panel.legend.values">
...@@ -101,6 +80,29 @@ ...@@ -101,6 +80,29 @@
</div> </div>
<div class="section"> <div class="section">
<h5>Grid thresholds</h5>
<div class="editor-option">
<label class="small">Level1</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Level2</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
</div>
</div>
<div class="section">
<h5>Show Axes</h5> <h5>Show Axes</h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()"> <label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
......
src/app/panels/graph/legend.html
<span ng-show="panel.legend.show" <!-- <span ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
ng-repeat='series in legend' ng-repeat='series in legend'
class="histogram-legend"> class="histogram-legend">
<i class='icon-minus pointer' <i class='icon-minus pointer'
...@@ -29,10 +28,45 @@ ...@@ -29,10 +28,45 @@
</span> </span>
</span> </span>
</span> </span>
</span> </span> -->
<section class="graph-legend" ng-class="{'graph-legend-table': panel.legend.alignAsTable}">
<div class="graph-legend-series"
ng-repeat='series in legend'
ng-class="{'pull-right': series.yaxis === 2, 'graph-legend-series-hidden': hiddenSeries[series.alias]}"
>
<div class="graph-legend-icon">
<i class='icon-minus pointer' ng-style="{color: series.color}" bs-popover="'colorPopup.html'">
</i>
</div>
<div class="graph-legend-alias small">
<a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
{{series.alias}}
</a>
</div>
<div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.current">
Current: {{series.current}}
</div>
<div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.min">
Min: {{series.min}}
</div>
<div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.max">
Max: {{series.max}}
</div>
<div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.total">
Total: {{series.total}}
</div>
<div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.avg">
Avg: {{series.avg}}
</div>
</div>
</section>
<script type="text/ng-template" id="colorPopup.html"> <script type="text/ng-template" id="colorPopup.html">
<div class="histogram-legend-popover"> <div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a> <a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row small" style="padding-bottom: 0;"> <div class="editor-row small" style="padding-bottom: 0;">
......
src/app/panels/graph/module.html
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
</div> </div>
<div ng-if="panel.legend" class="grafana-legend-container"> <div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
<div ng-include="'app/panels/graph/legend.html'"></div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="panel-full-edit-tabs" ng-if="editMode"> <div class="panel-full-edit-tabs" ng-if="editMode">
......
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 "submenu.less";
@import "legend.less";
@import "bootstrap-tagsinput.less"; @import "bootstrap-tagsinput.less";
.hide-controls { .hide-controls {
...@@ -123,12 +124,6 @@ ...@@ -123,12 +124,6 @@
font-size: 12px; font-size: 12px;
} }
.hidden-series {
a {
color: darken(@linkColor, 45%);
}
}
.panel-fullscreen { .panel-fullscreen {
z-index: 100; z-index: 100;
display: block !important; display: block !important;
...@@ -154,57 +149,10 @@ ...@@ -154,57 +149,10 @@
right: -10000px; right: -10000px;
} }
// Graphite Graph Legends
.grafana-legend-container {
margin: 0 15px;
text-align: left;
position: relative;
top: 2px;
}
.grafana-legend-container .popover-content {
padding: 0;
}
.histogram-legend {
display:inline-block;
padding: 0 4px;
i {
position: relative;
top: 2px;
}
}
.histogram-legend-item {
display:inline-block;
}
.histogram-chart { .histogram-chart {
position:relative; position:relative;
} }
.histogram-legend-popover {
width: 200px;
label {
display: inline-block;
}
.btn {
padding: 1px 3px;
margin-right: 0px;
line-height: initial;
}
.close {
margin-right: 5px;
color: @linkColor;
opacity: 0.7;
text-shadow: none;
}
.editor-row {
padding: 5px;
}
}
.panel-full-edit-tabs { .panel-full-edit-tabs {
margin-top: 10px; margin-top: 10px;
min-height: 250px; min-height: 250px;
......
src/css/less/legend.less 0 → 100644
.graph-legend {
margin: 0 20px;
text-align: left;
position: relative;
top: 2px;
.popover-content {
padding: 0;
}
}
.graph-legend-icon {
position: relative;
top: 2px;
}
.graph-legend-series,
.graph-legend-icon,
.graph-legend-alias,
.graph-legend-value {
display: inline-block;
}
.graph-legend-series {
padding-left: 10px;
}
.graph-legend-value {
padding-left: 6px;
}
.graph-legend-table {
display: table;
.graph-legend-series {
display: table-row;
padding-left: 0;
&.pull-right {
float: none;
}
}
.graph-legend-alias {
display: table-cell;
white-space: nowrap;
}
.graph-legend-icon {
display: table-cell;
white-space: nowrap;
padding: 0 4px;
}
.graph-legend-value {
display: table-cell;
white-space: nowrap;
padding-left: 15px;
}
}
.graph-legend-series-hidden {
a {
color: darken(@linkColor, 45%);
}
}
.graph-legend-popover {
width: 200px;
label {
display: inline-block;
}
.btn {
padding: 1px 3px;
margin-right: 0px;
line-height: initial;
}
.close {
margin-right: 5px;
color: @linkColor;
opacity: 0.7;
text-shadow: none;
}
.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