jsteele/grafana-statusmap
2
0
Fork 0
mirror of https://github.com/timberjoegithub/grafana-statusmap.git synced 2026-07-22 15:53:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21 from flant/sort_for_y_axis

Browse Source 
Sort options for Y axis
This commit is contained in:
Ivan Mikheykin
2018-11-26 11:07:16 +03:00
committed by GitHub
parent e783d32efa 34f65b1455
commit 8e12d35da9
10 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -146,6 +146,7 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
##### v0.0.3
- Add simple sort options for Y axis
- Fix display null values as zero
##### v0.0.2
dist/README.md
Vendored
+1
View File
@@ -146,6 +146,7 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
##### v0.0.3
- Add simple sort options for Y axis
- Fix display null values as zero
##### v0.0.2
dist/partials/options_editor.html
Vendored
+10 -1
View File
@@ -118,7 +118,16 @@
label="Show tooltip"
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Y axis sort</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8"
ng-model="ctrl.panel.yAxisSort"
ng-options="f for f in ['metrics', 'a → z', 'z → a']"
ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Bucket</h5>
dist/rendering.js
Vendored
+16 -4
View File
@@ -121,9 +121,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
function getYScale(ticks) {
var range = [];
var step = chartHeight / ticks.length;
range.push(chartHeight);
// svg has y=0 on the top, so top card should have a minimal value in range
range.push(step);
for (var i = 1; i < ticks.length; i++) {
range.push(chartHeight - step * i);
range.push(step * (i + 1));
}
return d3.scaleOrdinal().domain(ticks).range(range);
}
@@ -132,9 +133,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
function getYAxisScale(ticks) {
var range = [];
var step = chartHeight / ticks.length;
range.push(chartHeight - yOffset);
// svg has y=0 on the top, so top tick should have a minimal value in range
range.push(yOffset);
for (var i = 1; i < ticks.length; i++) {
range.push(chartHeight - step * i - yOffset);
range.push(step * i + yOffset);
}
return d3.scaleOrdinal().domain(ticks).range(range);
}
@@ -149,6 +151,16 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
ticks = [''];
}
if (panel.yAxisSort == 'a → z') {
ticks.sort(function (a, b) {
return a.localeCompare(b, 'en', { ignorePunctuation: false, numeric: true });
});
} else if (panel.yAxisSort == 'z → a') {
ticks.sort(function (b, a) {
return a.localeCompare(b, 'en', { ignorePunctuation: false, numeric: true });
});
}
var yAxisScale = getYAxisScale(ticks);
scope.yScale = yScale = getYScale(ticks);
dist/rendering.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/status_heatmap_ctrl.js
Vendored
+1 -1
View File
@@ -97,6 +97,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
},
// how null points should be handled
nullPointMode: 'as empty',
yAxisSort: 'metrics',
highlightCards: true,
useMax: true
};
@@ -263,7 +264,6 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
// TODO add some logic for targets heirarchy
cardsData.targets = _.keys(cardsData.targetIndex);
cardsData.targets.sort();
cardsData.yBucketSize = cardsData.targets.length;
cardsData.xBucketSize = _.min(_.map(data, function (d) {
return d.datapoints.length;
dist/status_heatmap_ctrl.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/partials/options_editor.html
+10 -1
View File
@@ -118,7 +118,16 @@
label="Show tooltip"
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Y axis sort</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8"
ng-model="ctrl.panel.yAxisSort"
ng-options="f for f in ['metrics', 'a → z', 'z → a']"
ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Bucket</h5>
src/rendering.js
+12 -4
View File
@@ -129,9 +129,10 @@ export default function link(scope, elem, attrs, ctrl) {
function getYScale(ticks) {
let range = [];
let step = chartHeight / ticks.length;
range.push(chartHeight);
// svg has y=0 on the top, so top card should have a minimal value in range
range.push(step);
for (let i = 1; i < ticks.length; i++) {
range.push(chartHeight - step * i);
range.push(step * (i+1));
}
return d3.scaleOrdinal()
.domain(ticks)
@@ -142,9 +143,10 @@ export default function link(scope, elem, attrs, ctrl) {
function getYAxisScale(ticks) {
let range = [];
let step = chartHeight / ticks.length;
range.push(chartHeight - yOffset);
// svg has y=0 on the top, so top tick should have a minimal value in range
range.push(yOffset);
for (let i = 1; i < ticks.length; i++) {
range.push(chartHeight - step * i - yOffset);
range.push(step * i + yOffset);
}
return d3.scaleOrdinal()
.domain(ticks)
@@ -159,6 +161,12 @@ export default function link(scope, elem, attrs, ctrl) {
ticks = [''];
}
if (panel.yAxisSort == 'a → z') {
ticks.sort((a, b) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
} else if (panel.yAxisSort == 'z → a') {
ticks.sort((b, a) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
}
let yAxisScale = getYAxisScale(ticks);
scope.yScale = yScale = getYScale(ticks);
src/status_heatmap_ctrl.js
+1 -1
View File
@@ -57,6 +57,7 @@ const panelDefaults = {
},
// how null points should be handled
nullPointMode: 'as empty',
yAxisSort: 'metrics',
highlightCards: true,
useMax: true
};
@@ -280,7 +281,6 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
// TODO add some logic for targets heirarchy
cardsData.targets = _.keys(cardsData.targetIndex);
cardsData.targets.sort();
cardsData.yBucketSize = cardsData.targets.length;
cardsData.xBucketSize = _.min(_.map(data, d => d.datapoints.length));