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

Merge branch 'heatmap-refactor'

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-05-04 19:56:29 +02:00
commit f167d459fe
4 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,11 +10,10 @@ export class AxesEditorCtrl {
dataFormats: any; dataFormats: any;
/** @ngInject */ /** @ngInject */
constructor($scope) { constructor($scope, uiSegmentSrv) {
$scope.editor = this; $scope.editor = this;
this.panelCtrl = $scope.ctrl; this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
this.unitFormats = kbn.getUnitFormats(); this.unitFormats = kbn.getUnitFormats();
this.logScales = { this.logScales = {

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

@ -28,12 +28,13 @@ let panelDefaults = {
fillBackground: false fillBackground: false
}, },
dataFormat: 'timeseries', dataFormat: 'timeseries',
xBucketSize: null,
xBucketNumber: null,
yBucketSize: null,
yBucketNumber: null,
xAxis: { xAxis: {
show: true show: true,
buckets: {
mode: 'count',
count: null,
size: null,
},
}, },
yAxis: { yAxis: {
show: true, show: true,
@ -43,6 +44,11 @@ let panelDefaults = {
splitFactor: null, splitFactor: null,
min: null, min: null,
max: null, max: null,
buckets: {
mode: 'count',
count: null,
size: null,
},
removeZeroValues: false removeZeroValues: false
}, },
tooltip: { tooltip: {

1
public/app/plugins/panel/heatmap/module.html
View File

@ -7,6 +7,5 @@
<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div> <div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
</div> </div>
<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>

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

@ -1,95 +1,91 @@
<div class="editor-row"> <div class="editor-row">
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Y Axis</h5> <h5 class="section-heading">Y Axis</h5>
<gf-form-switch class="gf-form" label-class="width-5"
label="Show"
checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-5">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)">
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-5">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 max-width-10"> <label class="gf-form-label width-6">Y-Min</label>
<label class="gf-form-label width-5">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" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Max</label>
<input type="text" class="gf-form-input" 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-10">Decimals</label> <label class="gf-form-label width-6">Y-Max</label>
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right" <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>
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="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>
</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 ng-show="ctrl.panel.yAxis.logBase === 1">
<div class="gf-form"> <div class="gf-form-inline">
<label class="gf-form-label width-10">Buckets</label> <div class="gf-form">
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right" <label class="gf-form-label">Y Axis</label>
bs-tooltip="'Number of buckets for Y axis.'" <label class="gf-form-label">Buckets</label>
ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur> <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>
<div class="gf-form"> <div class="gf-form-inline">
<label class="gf-form-label width-10">Bucket Size</label> <div class="gf-form">
<input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right" <label class="gf-form-label">X Axis</label>
bs-tooltip="'Size of bucket. Has priority over Buckets option.'" <label class="gf-form-label">Buckets</label>
ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur> <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> </div>
<div ng-show="ctrl.panel.yAxis.logBase !== 1"> <div ng-show="ctrl.panel.yAxis.logBase !== 1">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-10">Split Buckets</label> <label class="gf-form-label width-7">Split Factor</label>
<input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right" <input type="number"
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.'" class="gf-form-input width-3"
ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur> 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>
<gf-form-switch class="gf-form" label-class="width-10"
label="Remove zero values"
checked="ctrl.panel.yAxis.removeZeroValues" on-change="ctrl.render()">
</gf-form-switch>
</div> </div>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">X Axis</h5> <h5 class="section-heading">Data format</h5>
<gf-form-switch class="gf-form" label-class="width-8"
label="Show"
checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Buckets</label> <label class="gf-form-label width-5">Format</label>
<input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right" <div class="gf-form-select-wrapper max-width-15">
bs-tooltip="'Number of buckets for X axis.'" <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>
ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur> </div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Bucket Size</label>
<input type="text" class="gf-form-input width-8" 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 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>
</div> </div>
</div> </div>
</div> </div>
</div>