mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(): updated and polished legend option forms
This commit is contained in:
Torkel Ödegaard
parent
4871a8f43e
commit
d545902acc
@ -7,10 +7,10 @@ import coreModule from 'app/core/core_module';
|
||||
import Drop from 'tether-drop';
|
||||
|
||||
var template = `
|
||||
<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
|
||||
<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
|
||||
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
|
||||
<input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
|
||||
<label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
|
||||
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
|
||||
<label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -18,10 +18,12 @@ export class SwitchCtrl {
|
||||
onChange: any;
|
||||
checked: any;
|
||||
show: any;
|
||||
id: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor() {
|
||||
constructor($scope) {
|
||||
this.show = true;
|
||||
this.id = $scope.$id;
|
||||
}
|
||||
|
||||
internalOnChange() {
|
||||
|
||||
@ -1,160 +0,0 @@
|
||||
<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-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>
|
||||
@ -123,8 +123,9 @@ class GraphCtrl extends MetricsPanelCtrl {
|
||||
}
|
||||
|
||||
onInitEditMode() {
|
||||
this.addEditorTab('Axes', 'public/app/plugins/panel/graph/axisEditor.html', 2);
|
||||
this.addEditorTab('Display', 'public/app/plugins/panel/graph/styleEditor.html', 3);
|
||||
this.addEditorTab('Axes', 'public/app/plugins/panel/graph/tab_axes.html', 2);
|
||||
this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
|
||||
this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
|
||||
|
||||
this.logScales = {
|
||||
'linear': 1,
|
||||
|
||||
70
public/app/plugins/panel/graph/tab_axes.html
Normal file
70
public/app/plugins/panel/graph/tab_axes.html
Normal file
@ -0,0 +1,70 @@
|
||||
<div class="editor-row">
|
||||
<div class="section gf-form-group" 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 gf-form-group">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="editor-row gf-form-group">
|
||||
<div class="section">
|
||||
<div class="editor-row">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Draw Modes</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Bars" label-class="width-5"
|
||||
@ -14,7 +14,7 @@
|
||||
checked="ctrl.panel.points" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Mode Options</h5>
|
||||
<div class="gf-form" ng-show="ctrl.panel.lines">
|
||||
<label class="gf-form-label width-8">Fill</label>
|
||||
@ -39,7 +39,7 @@
|
||||
checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Misc options</h5>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">Null value</label>
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Multiple Series</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Stack" label-class="width-7"
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="section gf-form-group">
|
||||
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
|
||||
<div class="tight-form-container">
|
||||
<div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
|
||||
74
public/app/plugins/panel/graph/tab_legend.html
Normal file
74
public/app/plugins/panel/graph/tab_legend.html
Normal file
@ -0,0 +1,74 @@
|
||||
<div class="editor-row">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Show" label-class="width-7"
|
||||
checked="ctrl.panel.legend.show" on-change="ctrl.refresh()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="As Table" label-class="width-7"
|
||||
checked="ctrl.panel.legend.alignAsTable" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="To the right" label-class="width-7"
|
||||
checked="ctrl.panel.legend.rightSide" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
|
||||
<div ng-if="ctrl.panel.legend.rightSide" class="gf-form">
|
||||
<label class="gf-form-label width-7">Width</label>
|
||||
<input type="number" class="gf-form-input max-width-5" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Values</h5>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Min" label-class="width-4"
|
||||
checked="ctrl.panel.legend.min" on-change="ctrl.legendValuesOptionChanged()">
|
||||
</gf-form-switch>
|
||||
|
||||
<gf-form-switch class="gf-form max-width-12"
|
||||
label="Max" label-class="width-6" switch-class="max-width-5"
|
||||
checked="ctrl.panel.legend.max" on-change="ctrl.legendCaluesOptionChanged()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Avg" label-class="width-4"
|
||||
checked="ctrl.panel.legend.avg" on-change="ctrl.legendValuesOptionChanged()">
|
||||
</gf-form-switch>
|
||||
|
||||
<gf-form-switch class="gf-form max-width-12"
|
||||
label="Current" label-class="width-6" switch-class="max-width-5"
|
||||
checked="ctrl.panel.legend.current" on-change="ctrl.legendValuesOptionChanged()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<gf-form-switch class="gf-form"
|
||||
label="Total" label-class="width-4"
|
||||
checked="ctrl.panel.legend.total" on-change="ctrl.legendValuesOptionChanged()">
|
||||
</gf-form-switch>
|
||||
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-6">Decimals</label>
|
||||
<input type="number" class="gf-form-input width-5" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Hide series</h5>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="With only nulls" label-class="width-10"
|
||||
checked="ctrl.panel.legend.hideEmpty" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form"
|
||||
label="With only zeros" label-class="width-10"
|
||||
checked="ctrl.panel.legend.hideZero" on-change="ctrl.render()">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user