energylink/public/app/plugins/panel/singlestat/editor.html

<div class="editor-row">
	<div class="section gf-form-group">
		<div class="gf-form-inline">
			<div class="gf-form">
				<label class="gf-form-label width-6"><strong>Big value</strong></label>
			</div>
			<div class="gf-form max-width-11">
				<label class="gf-form-label width-4">Prefix</label>
				<input type="text" class="gf-form-input" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
			</div>
			<div class="gf-form max-width-10">
				<label class="gf-form-label width-4">Value</label>
				<div class="gf-form-select-wrapper max-width-15">
					<select class="gf-form-input"
							ng-model="ctrl.panel.valueName"
							ng-options="f for f in ctrl.valueNameOptions"
							ng-change="ctrl.render()"></select>
				</div>
			</div>
			<div class="gf-form max-width-12">
				<label class="gf-form-label width-5">Postfix</label>
				<input type="text" class="gf-form-input last" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
			</div>
		</div>
		<div class="gf-form-inline">
			<div class="gf-form">
				<label class="gf-form-label width-6"><strong>Font size</strong></label>
			</div>
			<div class="gf-form max-width-11">
				<label class="gf-form-label width-4">Prefix</label>
				<div class="gf-form-select-wrapper max-width-15">
					<select class="gf-form-input"
							ng-model="ctrl.panel.prefixFontSize"
							ng-options="f for f in ctrl.fontSizes"
							ng-change="ctrl.render()"></select>
				</div>
			</div>
			<div class="gf-form max-width-10">
				<label class="gf-form-label width-4">Value</label>
				<div class="gf-form-select-wrapper max-width-15">
					<select class="gf-form-input"
							ng-model="ctrl.panel.valueFontSize"
							ng-options="f for f in ctrl.fontSizes"
							ng-change="ctrl.render()"></select>
				</div>
			</div>
			<div class="gf-form max-width-12">
				<label class="gf-form-label width-5">Postfix</label>
				<div class="gf-form-select-wrapper max-width-15">
					<select class="input-small gf-form-input last"
							ng-model="ctrl.panel.postfixFontSize"
							ng-options="f for f in ctrl.fontSizes"
							ng-change="ctrl.render()"></select>
				</div>
			</div>
		</div>
		<div class="gf-form-inline">
			<div class="gf-form">
				<label class="gf-form-label width-6"><strong>Unit</strong></label>
			</div>
			<div class="gf-form max-width-15">
				<div class="gf-form-dropdown-typeahead max-width-19"
					ng-model="ctrl.panel.format"
					dropdown-typeahead2="ctrl.unitFormats"
					dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
				</div>
			</div>
			<div class="gf-form max-width-11">
				<label class="gf-form-label width-6">Decimals</label>
				<input type="number" class="gf-form-input"
					placeholder="auto" data-placement="right"
					bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
					ng-model="ctrl.panel.decimals"
					ng-change="ctrl.refresh()"
					ng-model-onblur>
			</div>
		</div>
	</div>
</div>

<div class="editor-row">
	<h5 class="section-heading">Coloring</h5>
	<div class="section gf-form-group">
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" label-class="width-8"
				label="Background"
				checked="ctrl.panel.colorBackground"
				on-change="ctrl.render()"></gf-form-switch>
			<gf-form-switch class="gf-form" label-class="width-4"
				label="Value"
				checked="ctrl.panel.colorValue"
				on-change="ctrl.render()"></gf-form-switch>
		</div>
		<div class="gf-form-inline">
			<div class="gf-form max-width-21">
				<label class="gf-form-label width-8">Thresholds
					<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
				</label>
				<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
			</div>
			<div class="gf-form">
				<label class="gf-form-label width-5">Colors</label>
				<span class="gf-form-label">
				  <spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
				</span>
				<span class="gf-form-label">
				  <spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
				</span>
				<span class="gf-form-label">
				  <spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
				</span>
				<div class="gf-form-button">
				  <button class="btn btn-inverse" ng-click="ctrl.invertColorOrder()">
				    invert order
				  </button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="editor-row">
	<h5 class="section-heading">Spark lines</h5>
	<div class="section gf-form-group">
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" label-class="width-4"
				label="Show"
				checked="ctrl.panel.sparkline.show"
				on-change="ctrl.render()"></gf-form-switch>
			<gf-form-switch class="gf-form" label-class="width-10"
				label="Background mode"
				checked="ctrl.panel.sparkline.full"
				on-change="ctrl.render()"></gf-form-switch>
			<div class="gf-form">
				<label class="gf-form-label width-6">Line Color</label>
				<span class="gf-form-label">
				  <spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
				</span>
			</div>
			<div class="gf-form">
				<label class="gf-form-label width-6">Fill Color</label>
				<span class="gf-form-label">
				  <spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
				</span>
			</div>
		</div>
	</div>
</div>

<div class="editor-row">
	<h5 class="section-heading">Gauge</h5>
	<div class="section gf-form-group">
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" label-class="width-4"
				label="Show"
				checked="ctrl.panel.gauge.show"
				on-change="ctrl.render()"></gf-form-switch>
			<div class="gf-form max-width-11">
				<label class="gf-form-label width-4">Min</label>
				<input type="number" class="gf-form-input"
					placeholder="0" data-placement="right"
					ng-model="ctrl.panel.gauge.minValue"
					ng-change="ctrl.refresh()"
					ng-model-onblur>
			</div>
			<div class="gf-form max-width-11">
				<label class="gf-form-label width-4">Max</label>
				<input type="number" class="gf-form-input"
					placeholder="0" data-placement="right"
					ng-model="ctrl.panel.gauge.maxValue"
					ng-change="ctrl.refresh()"
					ng-model-onblur>
			</div>
			<div class="gf-form" ng-show="ctrl.invalidGaugeRange">
				<label class="gf-form-label alert-state-critical">
					&nbsp; <i class="fa fa-warning"></i>
					Min value is bigger than max.
				</label>
			</div>
		</div>
		<div class="gf-form-inline">
			<gf-form-switch class="gf-form" label-class="width-10"
				label="Threshold labels"
				checked="ctrl.panel.gauge.thresholdLabels"
				on-change="ctrl.render()"></gf-form-switch>
			<gf-form-switch class="gf-form" label-class="width-11"
				label="Threshold markers"
				checked="ctrl.panel.gauge.thresholdMarkers"
				on-change="ctrl.render()"></gf-form-switch>
		</div>
	</div>
</div>