| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <div class="editor-row gf-form-group">
- <div class="section">
- <h5 class="section-heading">Left Y</h5>
- <gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
- <div class="gf-form">
- <label class="gf-form-label width-5">Unit</label>
- <div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)"></div>
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-5">Scale</label>
- <div class="gf-form-select-wrapper max-width-15">
- <select class="gf-form-input" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
- </div>
- </div>
- <div class="gf-form-inline">
- <div class="gf-form max-width-10">
- <label class="gf-form-label width-5">Y-Min</label>
- <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMin" 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="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
- </div>
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-5">Label</label>
- <input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
- </div>
- </div>
- <div class="section">
- <h5 class="section-heading">Right Y</h5>
- <gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
- <div class="gf-form">
- <label class="gf-form-label width-5">Unit</label>
- <div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)"></div>
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-5">Scale</label>
- <div class="gf-form-select-wrapper max-width-15">
- <select class="gf-form-input" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
- </div>
- </div>
- <div class="gf-form-inline">
- <div class="gf-form max-width-10">
- <label class="gf-form-label width-5">Y-Min</label>
- <input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMin" 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="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMax" ng-change="ctrl.render()" ng-model-onblur>
- </div>
- </div>
- <div class="gf-form">
- <label class="gf-form-label width-5">Label</label>
- <input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
- </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
- <input class="cr1" id="hideXAxis" type="checkbox"
- ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
- <label for="hideXAxis" class="cr1"></label>
- </li>
- <li class="tight-form-item last">
- Y-Axis
- <input class="cr1" id="hideYAxis" type="checkbox"
- ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.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="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
- </li>
- <li class="tight-form-item">
- <spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
- </li>
- <li class="tight-form-item">
- Level 2
- </li>
- <li>
- <input type="number" class="input-small tight-form-input"
- ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
- </li>
- <li class="tight-form-item">
- <spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
- </li>
- <li class="tight-form-item last">
- <editor-checkbox text="Line mode" model="ctrl.panel.grid.thresholdLine" change="ctrl.render()"></editor-checkbox>
- </li>
- </ul>
- <div class="clearfix"></div>
- </div>
- </div>
- </div>
- <div class="editor-row">
- <div class="section">
- <div class="tight-form">
- <ul class="tight-form-list">
- <li class="tight-form-item" style="width: 80px">
- Legend
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Show" model="ctrl.panel.legend.show" change="ctrl.refresh()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Table" model="ctrl.panel.legend.alignAsTable" change="ctrl.render()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Right side" model="ctrl.panel.legend.rightSide" change="ctrl.render()"></editor-checkbox>
- </li>
- <li ng-if="ctrl.panel.legend.rightSide" class="tight-form-item">
- Side width
- </li>
- <li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
- <input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
- ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
- </li>
- </ul>
- <div class="clearfix"></div>
- </div>
- <div class="tight-form">
- <ul class="tight-form-list">
- <li class="tight-form-item" style="width: 80px">
- Hide series
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="With only nulls" model="ctrl.panel.legend.hideEmpty" change="ctrl.render()"></editor-checkbox>
- </li>
- <li class="tight-form-item last">
- <editor-checkbox text="With only zeroes" model="ctrl.panel.legend.hideZero" change="ctrl.render()"></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: 80px">
- Values
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Min" model="ctrl.panel.legend.min" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Max" model="ctrl.panel.legend.max" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Avg" model="ctrl.panel.legend.avg" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Current" model="ctrl.panel.legend.current" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- <editor-checkbox text="Total" model="ctrl.panel.legend.total" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
- </li>
- <li class="tight-form-item">
- Decimals
- </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="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
- </li>
- </ul>
- <div class="clearfix"></div>
- </div>
- </div>
- </div>
|