mirror of
https://github.com/grafana/grafana.git
synced 2025-02-14 01:23:32 -06:00
New legend display option 'Align as table' (Issue #136)
This commit is contained in:
Torkel Ödegaard
parent
fd8561ac55
commit
14247ddabb
@ -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)
|
||||
|
||||
@ -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">
|
||||
@ -100,6 +79,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">
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<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;">
|
||||
|
||||
@ -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">
|
||||
|
||||
2
src/css/bootstrap.dark.min.css
vendored
2
src/css/bootstrap.dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
src/css/bootstrap.light.min.css
vendored
2
src/css/bootstrap.light.min.css
vendored
File diff suppressed because one or more lines are too long
2
src/css/default.min.css
vendored
2
src/css/default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,4 +1,5 @@
|
||||
@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;
|
||||
|
||||
86
src/css/less/legend.less
Normal file
86
src/css/less/legend.less
Normal file
@ -0,0 +1,86 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user