Skip to content

N
nexpie-grafana-theme
Commit d545902a by Torkel Ödegaard
Options

ux(): updated and polished legend option forms

parent 4871a8f4
Showing with 92 additions and 105 deletions
public/app/core/components/switch.ts
...@@ -7,10 +7,10 @@ import coreModule from 'app/core/core_module'; ...@@ -7,10 +7,10 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop'; import Drop from 'tether-drop';
var template = ` 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"> <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()"> <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<label for="check-{{$id}}" data-on="Yes" data-off="No"></label> <label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label>
</div> </div>
`; `;
...@@ -18,10 +18,12 @@ export class SwitchCtrl { ...@@ -18,10 +18,12 @@ export class SwitchCtrl {
onChange: any; onChange: any;
checked: any; checked: any;
show: any; show: any;
id: any;
/** @ngInject */ /** @ngInject */
constructor() { constructor($scope) {
this.show = true; this.show = true;
this.id = $scope.$id;
} }
internalOnChange() { internalOnChange() {
......
public/app/plugins/panel/graph/module.ts
...@@ -123,8 +123,9 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -123,8 +123,9 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
onInitEditMode() { onInitEditMode() {
this.addEditorTab('Axes', 'public/app/plugins/panel/graph/axisEditor.html', 2); this.addEditorTab('Axes', 'public/app/plugins/panel/graph/tab_axes.html', 2);
this.addEditorTab('Display', 'public/app/plugins/panel/graph/styleEditor.html', 3); 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 = { this.logScales = {
'linear': 1, 'linear': 1,
......
public/app/plugins/panel/graph/axisEditor.html → public/app/plugins/panel/graph/tab_axes.html
<div class="editor-row gf-form-group"> <div class="editor-row">
<div class="section" ng-repeat="yaxis in ctrl.panel.yaxes"> <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 === 0">Left Y</h5>
<h5 class="section-heading" ng-show="$index === 1">Right Y</h5> <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="section"> <div class="section gf-form-group">
<h5 class="section-heading">X-Axis</h5> <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> <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>
...@@ -66,95 +66,5 @@ ...@@ -66,95 +66,5 @@
<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker> <spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
</div> </div>
</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>
</div> </div>
public/app/plugins/panel/graph/styleEditor.html → public/app/plugins/panel/graph/tab_display.html
<div class="editor-row gf-form-group"> <div class="editor-row">
<div class="section"> <div class="section gf-form-group">
<h5 class="section-heading">Draw Modes</h5> <h5 class="section-heading">Draw Modes</h5>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Bars" label-class="width-5" label="Bars" label-class="width-5"
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
checked="ctrl.panel.points" on-change="ctrl.render()"> checked="ctrl.panel.points" on-change="ctrl.render()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="section"> <div class="section gf-form-group">
<h5 class="section-heading">Mode Options</h5> <h5 class="section-heading">Mode Options</h5>
<div class="gf-form" ng-show="ctrl.panel.lines"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Fill</label> <label class="gf-form-label width-8">Fill</label>
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
checked="ctrl.panel.steppedLine" on-change="ctrl.render()"> checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
</gf-form-switch> </gf-form-switch>
</div> </div>
<div class="section"> <div class="section gf-form-group">
<h5 class="section-heading">Misc options</h5> <h5 class="section-heading">Misc options</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-7">Null value</label> <label class="gf-form-label width-7">Null value</label>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<div class="section"> <div class="section gf-form-group">
<h5 class="section-heading">Multiple Series</h5> <h5 class="section-heading">Multiple Series</h5>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Stack" label-class="width-7" label="Stack" label-class="width-7"
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
</div> </div>
<div class="editor-row"> <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> <h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div class="tight-form-container"> <div class="tight-form-container">
<div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> <div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
......
public/app/plugins/panel/graph/tab_legend.html 0 → 100644
<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>
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