Skip to content

N
nexpie-grafana-theme
Commit 7c10af01 by Torkel Ödegaard
Options

feat(singlestat): slight layout changes to options tab

parent 7b7ba46f
Showing with 120 additions and 187 deletions
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="section gf-form-group">
<h5 class="section-heading">Value</h5>
<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="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-4">Stat</label>
<div class="gf-form-select-wrapper width-7">
<select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
</div>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<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>
<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="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-4">Prefix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<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>
<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 class="gf-form">
<label class="gf-form-label width-4">Postfix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Unit</h5>
<div class="gf-form-inline">
<div class="gf-form">
<div class="gf-form-dropdown-typeahead" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">Decimals</label>
<input type="number" class="gf-form-input width-5" 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 class="section gf-form-group">
<h5 class="section-heading">Coloring</h5>
<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>
<div class="gf-form">
<label class="gf-form-label width-8">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>
<span class="gf-form-label">
<a ng-click="ctrl.invertColorOrder()">
Invert
</a>
</span>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Spark lines</h5>
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.sparkline.show">
<gf-form-switch class="gf-form" label-class="width-9" 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-9">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-9">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 class="section gf-form-group">
<h5 class="section-heading">Gauge</h5>
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.gauge.show">
<div class="gf-form">
<label class="gf-form-label width-9">Min</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Max</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<gf-form-switch class="gf-form" label-class="width-9" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-9" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment