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
**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)
**Changes**
- Use unix epoch for Graphite from/to for absolute time ranges (Closes #536)
......
src/app/panels/graph/axisEditor.html
......@@ -42,38 +42,17 @@
<div class="editor-row">
<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>Legend</h5>
<h5>Legend styles</h5>
<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();">
</div>
<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();">
</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 class="section" ng-if="panel.legend.values">
......@@ -101,6 +80,29 @@
</div>
<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>
<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()">
......
src/app/panels/graph/legend.html
<span ng-show="panel.legend.show"
ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
<!-- <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'
......@@ -29,10 +28,45 @@
</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">
<div class="histogram-legend-popover">
<div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row small" style="padding-bottom: 0;">
......
src/app/panels/graph/module.html
......@@ -15,9 +15,9 @@
</div>
<div ng-if="panel.legend" class="grafana-legend-container">
<div ng-include="'app/panels/graph/legend.html'"></div>
<div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
</div>
<div class="clearfix"></div>
<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 "legend.less";
@import "bootstrap-tagsinput.less";
.hide-controls {
......@@ -123,12 +124,6 @@
font-size: 12px;
}
.hidden-series {
a {
color: darken(@linkColor, 45%);
}
}
.panel-fullscreen {
z-index: 100;
display: block !important;
......@@ -154,57 +149,10 @@
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 {
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 {
margin-top: 10px;
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