Skip to content

N
nexpie-grafana-theme
Commit 4b78ab5b by Torkel Ödegaard
Options

feat(graph): graph tooltip sort order PR refactored/changed #4944, changed the… 

feat(graph): graph tooltip sort order PR refactored/changed #4944, changed the layout graph display options, #4944
parent ae554a73
Showing with 22 additions and 24 deletions
public/app/plugins/panel/graph/graph_tooltip.js
...@@ -135,13 +135,13 @@ function ($) { ...@@ -135,13 +135,13 @@ function ($) {
// Dynamically reorder the hovercard for the current time point if the // Dynamically reorder the hovercard for the current time point if the
// option is enabled. // option is enabled.
if (panel.tooltip.ordering === 'decreasing') { if (panel.tooltip.sort === 2) {
seriesHoverInfo.sort(function(a, b) { seriesHoverInfo.sort(function(a, b) {
return parseFloat(b.value) - parseFloat(a.value); return b.value - a.value;
}); });
} else if (panel.tooltip.ordering === 'increasing') { } else if (panel.tooltip.sort === 1) {
seriesHoverInfo.sort(function(a, b) { seriesHoverInfo.sort(function(a, b) {
return parseFloat(a.value) - parseFloat(b.value); return a.value - b.value;
}); });
} }
......
public/app/plugins/panel/graph/module.ts
...@@ -92,7 +92,7 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -92,7 +92,7 @@ class GraphCtrl extends MetricsPanelCtrl {
tooltip : { tooltip : {
value_type: 'cumulative', value_type: 'cumulative',
shared: true, shared: true,
ordering: 'alphabetical', sort: 0,
msResolution: false, msResolution: false,
}, },
// time overrides // time overrides
......
public/app/plugins/panel/graph/tab_display.html
...@@ -28,41 +28,39 @@ ...@@ -28,41 +28,39 @@
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
<gf-form-switch ng-show="ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.points"> <div class="gf-form" ng-show="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label> <label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5"> <div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
<gf-form-switch class="gf-form"
label="Staircase" label-class="width-8"
checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
</gf-form-switch>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Misc options</h5> <h5 class="section-heading">Hover info</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-9">Null value</label> <label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-9">Tooltip mode</label> <label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8"> <div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Tooltip ordering<tip>The ordering from top to bottom</tip></label> <label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8"> <div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.ordering" ng-options="f.value as f.text for f in [{text: 'Alphabetical', value: 'alphabetical'}, {text: 'Increasing', value: 'increasing'}, {text: 'Decreasing', value: 'decreasing'}]" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Multiple Series</h5> <h5 class="section-heading">Stacking & Null value</h5>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Stack" label-class="width-7" label="Stack" label-class="width-7"
checked="ctrl.panel.stack" on-change="ctrl.render()"> checked="ctrl.panel.stack" on-change="ctrl.render()">
...@@ -71,10 +69,10 @@ ...@@ -71,10 +69,10 @@
label="Percent" label-class="width-7" label="Percent" label-class="width-7"
checked="ctrl.panel.percentage" on-change="ctrl.render()"> checked="ctrl.panel.percentage" on-change="ctrl.render()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.stack"> <div class="gf-form">
<label class="gf-form-label width-7">Tooltip value</label> <label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper max-width-8"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select> <select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
</div> </div>
......
public/sass/components/_old_stuff.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
.section { .section {
margin-right: 20px; margin-right: 3rem;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
} }
......
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