energylink/src/app/panels/graph/axisEditor.html

<div class="editor-row">
	<div class="section" style="margin-bottom: 20px">
		<div class="grafana-target">
			<div class="grafana-target-inner">
				<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 80px">
						<strong>Left Y</strong>
					</li>
					<li class="grafana-target-segment">
						Unit
					</li>
					<li class="dropdown" style="width: 130px;"
						ng-model="panel.y_formats[0]"
						dropdown-typeahead="unitFormats"
						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
					</li>
					<li class="grafana-target-segment">
						&nbsp;&nbsp; Grid Max
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
					   	empty-to-null ng-model="panel.grid.leftMax"
							ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						Min
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
					  	empty-to-null ng-model="panel.grid.leftMin"
							ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						Label
					</li>
					<li>
						<input type="text" class="input-small grafana-target-segment-input last"
					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="grafana-target-inner">
				<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 80px">
						<strong>Right Y</strong>
					</li>
					<li class="grafana-target-segment">
						Unit
					</li>
					<li class="dropdown" style="width: 130px"
						ng-model="panel.y_formats[1]"
						dropdown-typeahead="unitFormats"
						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
					</li>
					<li class="grafana-target-segment">
						&nbsp;&nbsp; Grid Max
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
					   	empty-to-null ng-model="panel.grid.rightMax"
							ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						Min
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
					  	empty-to-null ng-model="panel.grid.rightMin"
							ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						Label
					</li>
					<li>
						<input type="text" class="input-small grafana-target-segment-input last"
					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>

	<div class="section" style="margin-bottom: 20px">
		<div class="grafana-target">
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 80px">
						<strong>Show Axis</strong>
					</li>
					<li class="grafana-target-segment">
						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="grafana-target-segment 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="grafana-target-inner">
				<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 80px">
						<strong>Thresholds</strong>
					</li>
					<li class="grafana-target-segment">
						Level 1
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input"
					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
					</li>
					<li class="grafana-target-segment">
						Level 2
					</li>
					<li>
						<input type="number" class="input-small grafana-target-segment-input"
					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
					</li>
					<li class="grafana-target-segment">
						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
					</li>
					<li class="grafana-target-segment last">
						Line mode&nbsp;
						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
						<label for="panel.grid.thresholdLine" class="cr1"></label>

					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</div>

<div class="editor-row">
	<div class="section">
		<div class="grafana-target">
			<div class="grafana-target-inner">
				<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 80px">
						<strong>Legend</strong>
					</li>
					<li class="grafana-target-segment">
						Show&nbsp;
						<input class="cr1" id="panel.legend.show" type="checkbox"
						    ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
						<label for="panel.legend.show" class="cr1"></label>
					</li>
					<li class="grafana-target-segment">
						Table&nbsp;
						<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
						    ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
						<label for="panel.legend.alignAsTable" class="cr1"></label>
					</li>
					<li class="grafana-target-segment">
						Right side&nbsp;
						<input class="cr1" id="panel.legend.rightSide" type="checkbox"
						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
						<label for="panel.legend.rightSide" class="cr1"></label>
					</li>
					<li class="grafana-target-segment last">
						<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
						<label for="panel.legend.hideEmpty" class="cr1"></label>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div class="section">
		<div class="grafana-target">
			<div class="grafana-target-inner">
				<ul class="grafana-segment-list">
					<li class="grafana-target-segment" style="width: 100px">
						<strong>Legend values</strong>
					</li>
					<li class="grafana-target-segment">
						Min&nbsp;
						<input class="cr1" id="panel.legend.min" type="checkbox"
						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render()">
						<label for="panel.legend.min" class="cr1"></label>
					</li>
					<li class="grafana-target-segment">
						Max&nbsp;
						<input class="cr1" id="panel.legend.max" type="checkbox"
						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render()">
						<label for="panel.legend.max" class="cr1"></label>
					</li>
					<li class="grafana-target-segment">
						Avg&nbsp;
						<input class="cr1" id="panel.legend.avg" type="checkbox"
						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
						<label for="panel.legend.avg" class="cr1"></label>
					</li>
					<li class="grafana-target-segment last">
						Current&nbsp;
						<input class="cr1" id="panel.legend.current" type="checkbox"
						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
						<label for="panel.legend.total" class="cr1"></label>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</div>