grafana/public/app/panels/graph/axisEditor.html

214 lines
6.9 KiB
HTML

<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Left Y
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 140px;"
ng-model="panel.y_formats[0]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Scale type
</li>
<li>
<select class="input-small tight-form-input" style="width: 113px" ng-model="panel.grid.leftLogBase" ng-options="v as k for (k, v) in logScales" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Right Y
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 140px"
ng-model="panel.y_formats[1]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Scale type
</li>
<li>
<select class="input-small tight-form-input" style="width: 113px" ng-model="panel.grid.rightLogBase" ng-options="v as k for (k, v) in logScales" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Show Axis
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
<label for="hideYAxis" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Thresholds
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Level 2
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Line mode" model="panel.grid.thresholdLine" change="render()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px">
Legend
</li>
<li class="tight-form-item">
<editor-checkbox text="Show" model="panel.legend.show" change="get_data()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Table" model="panel.legend.alignAsTable" change="render()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Right side" model="panel.legend.rightSide" change="render()"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Hide empty" model="panel.legend.hideEmpty" change="render()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 105px">
Legend values
</li>
<li class="tight-form-item">
<editor-checkbox text="Min" model="panel.legend.min" change="legendValuesOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Max" model="panel.legend.max" change="legendValuesOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Avg" model="panel.legend.avg" change="legendValuesOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Current" model="panel.legend.current" change="legendValuesOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Total" model="panel.legend.total" change="legendValuesOptionChanged()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 105px">
<strong>Decimals</strong>
</li>
<li style="width: 105px">
<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>