IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

heatmap: refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-05-04 19:56:20 +02:00
parent 61b51c0cbf
commit 5acabc6ccb
3 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@ export class AxesEditorCtrl {
unitFormats: any;
logScales: any;
dataFormats: any;
yBucketModes: any[];
/** @ngInject */
constructor($scope, uiSegmentSrv) {
@ -29,11 +28,6 @@ export class AxesEditorCtrl {
'Time series': 'timeseries',
'Time series Pre-bucketed': 'tsbuckets'
};
this.yBucketModes = [
{text: 'Count', value: 'count'},
{text: 'Interval', value: 'interval'},
];
}
setUnitFormat(subItem) {

12
public/app/plugins/panel/heatmap/heatmap_ctrl.ts
View File

@ -30,7 +30,11 @@ let panelDefaults = {
dataFormat: 'timeseries',
xAxis: {
show: true,
buckets: 'auto',
buckets: {
mode: 'count',
count: null,
size: null,
},
},
yAxis: {
show: true,
@ -40,7 +44,11 @@ let panelDefaults = {
splitFactor: null,
min: null,
max: null,
buckets: 'auto',
buckets: {
mode: 'count',
count: null,
size: null,
},
removeZeroValues: false
},
tooltip: {

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

@ -4,9 +4,9 @@
<div class="gf-form">
<label class="gf-form-label width-6">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-10"
ng-model="ctrl.panel.yAxis.format"
dropdown-typeahead2="editor.unitFormats"
dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
ng-model="ctrl.panel.yAxis.format"
dropdown-typeahead2="editor.unitFormats"
dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
</div>
</div>
<div class="gf-form">
@ -26,54 +26,66 @@
<div class="gf-form">
<label class="gf-form-label width-6">Decimals</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
bs-tooltip="'Override automatic decimal precision for axis.'"
ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
bs-tooltip="'Override automatic decimal precision for axis.'"
ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">
<h5 class="section-heading">Buckets</h5>
<div ng-show="ctrl.panel.yAxis.logBase === 1">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-6">Bucket</label>
<div class="gf-form-select-wrapper width-7">
<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>
</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>
<label class="gf-form-label">Y Axis</label>
<label class="gf-form-label">Buckets</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for Y axis.'"
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label">Size</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">X Axis</label>
<label class="gf-form-label">Buckets</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for Y axis.'"
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label">Size</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" data-placement="right"
bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
</div>
<div ng-show="ctrl.panel.yAxis.logBase !== 1">
<div class="gf-form">
<label class="gf-form-label width-7">Split Buckets</label>
<input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label width-7">Split Factor</label>
<input type="number"
class="gf-form-input width-3"
placeholder="1"
data-placement="right"
bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
</input>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">X Axis</h5>
<h5 class="section-heading">Data format</h5>
<div class="gf-form">
<label class="gf-form-label width-6">Buckets</label>
<input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
bs-tooltip="'Number of buckets for X axis.'"
ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Data format</h5>
<div class="gf-form">
<label class="gf-form-label width-5">Format</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
<label class="gf-form-label width-5">Format</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
</div>