opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-23 07:13:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

heatmap: refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-05-04 16:03:47 +02:00
parent 0fd96b951a
commit 61b51c0cbf
2 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/plugins/panel/heatmap/axes_editor.ts
View File

@ -8,8 +8,7 @@ export class AxesEditorCtrl {
unitFormats: any; unitFormats: any;
logScales: any; logScales: any;
dataFormats: any; dataFormats: any;
yBucketOptions: any[]; yBucketModes: any[];
xBucketOptions: any[];
/** @ngInject */ /** @ngInject */
constructor($scope, uiSegmentSrv) { constructor($scope, uiSegmentSrv) {
@ -31,24 +30,9 @@ export class AxesEditorCtrl {
'Time series Pre-bucketed': 'tsbuckets' 'Time series Pre-bucketed': 'tsbuckets'
}; };
this.yBucketOptions = [ this.yBucketModes = [
{text: '5', value: '5'}, {text: 'Count', value: 'count'},
{text: '10', value: '10'}, {text: 'Interval', value: 'interval'},
{text: '20', value: '20'},
{text: '30', value: '30'},
{text: '50', value: '50'},
];
this.xBucketOptions = [
{text: '15', value: '15'},
{text: '20', value: '20'},
{text: '30', value: '30'},
{text: '50', value: '50'},
{text: '1m', value: '1m'},
{text: '5m', value: '5m'},
{text: '10m', value: '10m'},
{text: '20m', value: '20m'},
{text: '1h', value: '1h'},
]; ];
} }

36
public/app/plugins/panel/heatmap/partials/axes_editor.html
View File

@ -3,7 +3,7 @@
<h5 class="section-heading">Y Axis</h5> <h5 class="section-heading">Y Axis</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Unit</label> <label class="gf-form-label width-6">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15" <div class="gf-form-dropdown-typeahead max-width-10"
ng-model="ctrl.panel.yAxis.format" ng-model="ctrl.panel.yAxis.format"
dropdown-typeahead2="editor.unitFormats" dropdown-typeahead2="editor.unitFormats"
dropdown-typeahead-on-select="editor.setUnitFormat($subItem)"> dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
@ -11,19 +11,17 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Scale</label> <label class="gf-form-label width-6">Scale</label>
<div class="gf-form-select-wrapper max-width-15"> <div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select> <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
</div> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form">
<div class="gf-form"> <label class="gf-form-label width-6">Y-Min</label>
<label class="gf-form-label width-6">Y-Min</label> <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur> </div>
</div> <div class="gf-form">
<div class="gf-form"> <label class="gf-form-label width-6">Y-Max</label>
<label class="gf-form-label">Y-Max</label> <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Decimals</label> <label class="gf-form-label width-6">Decimals</label>
@ -34,10 +32,18 @@
<div ng-show="ctrl.panel.yAxis.logBase === 1"> <div ng-show="ctrl.panel.yAxis.logBase === 1">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-6">Buckets <label class="gf-form-label width-6">Bucket</label>
<info-popover mode="right-normal">Number of buckets for Y axis</info-popover> <div class="gf-form-select-wrapper width-7">
</label> <select class="input-small gf-form-input" ng-model="ctrl.panel.yAxis.bucketMode" ng-options="f.value as f.text for f in editor.yBucketModes" ng-change="ctrl.render()"></select>
<metric-segment-model css-class="width-10" property="ctrl.panel.yAxis.buckets" options="editor.yBucketOptions" on-change="ctrl.render()" select-mode="true"></metric-segment> </div>
<input type="number"
class="gf-form-input width-5"
placeholder="auto"
ng-model="ctrl.panel.yAxis.bucketCount"
ng-change="ctrl.render()"
ng-model-onblur>
</input>
<info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
</div> </div>
</div> </div>
</div> </div>