123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- <div class="editor-row">
- <div class="gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
- <h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
- <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
- <gf-form-switch
- class="gf-form"
- label="Show"
- label-class="width-6"
- checked="yaxis.show"
- on-change="ctrl.render()"
- ></gf-form-switch>
- <div ng-if="yaxis.show">
- <div class="gf-form gf-form--grow">
- <label class="gf-form-label width-6">
- Unit
- <info-popover mode="right-normal">The default unit used when not defined by the datasource or in the Fields or Overrides configuration.</info-popover>
- </label>
- <unit-picker on-change="ctrl.setUnitFormat(yaxis)" value="yaxis.format" class="flex-grow-1" />
- </div>
- </div>
- <div class="gf-form">
- <label for="yaxis-scale-select-{{$index}}" class="gf-form-label width-6">Scale</label>
- <div class="gf-form-select-wrapper max-width-20">
- <select
- id="yaxis-scale-select-{{$index}}"
- class="gf-form-input"
- ng-model="yaxis.logBase"
- ng-options="v as k for (k, v) in ctrl.logScales"
- ng-change="ctrl.render()"
- ></select>
- </div>
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-6">Y-Min</label>
- <input
- type="text"
- class="gf-form-input"
- placeholder="auto"
- empty-to-null
- ng-model="yaxis.min"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-6">Y-Max</label>
- <input
- type="text"
- class="gf-form-input"
- placeholder="auto"
- empty-to-null
- ng-model="yaxis.max"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- <div ng-if="yaxis.show">
- <div class="gf-form">
- <label class="gf-form-label width-6">Decimals</label>
- <input
- type="number"
- class="gf-form-input width-5"
- placeholder="auto"
- empty-to-null
- bs-tooltip="'Override automatic decimal precision for y-axis'"
- data-placement="right"
- ng-model="yaxis.decimals"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- <div class="gf-form">
- <label for="yaxis-label-select-{{$index}}" class="gf-form-label width-6">Label</label>
- <input
- id="yaxis-label-select-{{$index}}"
- type="text"
- class="gf-form-input max-width-20"
- ng-model="yaxis.label"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- </div>
- </div>
- <div class="gf-form-group">
- <h5 class="section-heading">Y-Axes</h5>
- <gf-form-switch
- class="gf-form"
- label="Align Y-Axes"
- label-class="width-6"
- switch-class="width-5"
- checked="ctrl.panel.yaxis.align"
- on-change="ctrl.render()"
- ></gf-form-switch>
- <div class="gf-form" ng-show="ctrl.panel.yaxis.align">
- <label class="gf-form-label width-6">
- Level
- </label>
- <input
- type="number"
- class="gf-form-input width-6"
- placeholder="0"
- ng-model="ctrl.panel.yaxis.alignLevel"
- ng-change="ctrl.render()"
- ng-model-onblur
- bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'"
- data-placement="right"
- />
- </div>
- </div>
- <div class="gf-form-group" aria-label="{{ctrl.selectors.xAxisSection}}">
- <h5 class="section-heading">X-Axis</h5>
- <gf-form-switch
- class="gf-form"
- label="Show"
- label-class="width-6"
- checked="ctrl.panel.xaxis.show"
- on-change="ctrl.render()"
- ></gf-form-switch>
- <div class="gf-form">
- <label for="xaxis-mode-select" class="gf-form-label width-6">Mode</label>
- <div class="gf-form-select-wrapper max-width-15">
- <select
- id="xaxis-mode-select"
- class="gf-form-input"
- ng-model="ctrl.panel.xaxis.mode"
- ng-options="v as k for (k, v) in ctrl.xAxisModes"
- ng-change="ctrl.xAxisModeChanged()"
- ></select>
- </div>
- </div>
- <!-- Series mode -->
- <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
- <label class="gf-form-label width-6">Value</label>
- <metric-segment-model
- property="ctrl.panel.xaxis.values[0]"
- options="ctrl.xAxisStatOptions"
- on-change="ctrl.xAxisValueChanged()"
- custom="false"
- css-class="width-10"
- select-mode="true"
- ></metric-segment-model>
- </div>
- <!-- Histogram mode -->
- <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
- <label class="gf-form-label width-6">Buckets</label>
- <input
- type="number"
- class="gf-form-input max-width-8"
- ng-model="ctrl.panel.xaxis.buckets"
- placeholder="auto"
- ng-change="ctrl.render()"
- ng-model-onblur
- bs-tooltip="'Number of buckets'"
- data-placement="right"
- />
- </div>
- <div class="gf-form-inline" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
- <div class="gf-form">
- <label class="gf-form-label width-6">X-Min</label>
- <input
- type="number"
- class="gf-form-input width-5"
- placeholder="auto"
- empty-to-null
- ng-model="ctrl.panel.xaxis.min"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-6">X-Max</label>
- <input
- type="number"
- class="gf-form-input width-5"
- placeholder="auto"
- empty-to-null
- ng-model="ctrl.panel.xaxis.max"
- ng-change="ctrl.render()"
- ng-model-onblur
- />
- </div>
- </div>
- </div>
- </div>
|