energylink/public/app/plugins/panel/graph/axisEditor.html

<div class="editor-row gf-form-group">
	<div class="section" 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-5" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>

		<div ng-if="yaxis.show">
			<div class="gf-form">
				<label class="gf-form-label width-5">Unit</label>
				<div class="gf-form-dropdown-typeahead max-width-15" ng-model="yaxis.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $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="yaxis.logBase" 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="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="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.max" 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="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
			</div>
		</div>
	</div>

	<div class="section">
		<h5 class="section-heading">X-Axis</h5>
		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
	</div>
</div>

<div class="section gf-form-group">
	<h5 class="section-heading">Thresholds</h5>
	<div class="gf-form-inline">
		<div class="gf-form">
			<label class="gf-form-label width-5">Level 1</label>
			<input type="number" class="gf-form-input max-width-5" ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
		</div>
		<div class="gf-form">
			<label class="gf-form-label width-5">Color</label>
			<div class="gf-form-label">
				<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
			</div>
		</div>
		<div class="gf-form">
			<label class="gf-form-label width-5">Level 2</label>
			<input type="number" class="gf-form-input max-width-5" ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
		</div>
		<div class="gf-form">
			<label class="gf-form-label width-5">Color</label>
			<div class="gf-form-label">
				<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
			</div>
		</div>
		<!-- 	<li class="tight&#45;form&#45;item"> -->
		<!-- 		Level 2 -->
		<!-- 	</li> -->
		<!-- 	<li> -->
		<!-- 		<input type="number" class="input&#45;small tight&#45;form&#45;input" -->
		<!-- 										 ng&#45;model="ctrl.panel.grid.threshold2" ng&#45;change="ctrl.render()" ng&#45;model&#45;onblur> -->
		<!-- 	</li> -->
		<!-- 	<li class="tight&#45;form&#45;item"> -->
		<!-- 		<spectrum&#45;picker ng&#45;model="ctrl.panel.grid.threshold2Color" ng&#45;change="ctrl.render()" ></spectrum&#45;picker> -->
		<!-- 	</li> -->
		<!-- 	<li class="tight&#45;form&#45;item last"> -->
		<!-- 		<editor&#45;checkbox text="Line mode" model="ctrl.panel.grid.thresholdLine" change="ctrl.render()"></editor&#45;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>