Skip to content

N
nexpie-grafana-theme
Commit 3dc30e4d by Torkel Ödegaard
Options

Major reworking of the graph axis editor tab

parent 1a49d51d
Showing with 225 additions and 121 deletions
src/app/components/kbn.js
......@@ -485,5 +485,33 @@ function($, _, moment) {
return new RegExp(match[1], match[2]);
};
kbn.getUnitFormats = function() {
return [
{
text: 'none',
submenu: [
{text: 'none' , value: 'none'},
{text: 'short', value: 'short'},
]
},
{
text: 'duration',
submenu: [
{text: 'nanoseconds (ns)' , value: 'ns'},
{text: 'microseconds (µs)', value: 'µs'},
{text: 'milliseconds (ms)', value: 'ms'},
]
},
{
text: 'data',
submenu: [
{text: 'bit', value: 'bit'},
{text: 'bytes', value: 'bytes'},
{text: 'kilobytes', value: 'kbytes'},
]
},
];
};
return kbn;
});
src/app/directives/dropdown.typeahead.js
......@@ -17,35 +17,47 @@ function (angular, app, _, $) {
var buttonTemplate = '<a class="grafana-target-segment grafana-target-function dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' data-placement="top"><i class="icon-plus"></i></a>';
' data-placement="top"><i class="fa fa-plus"></i></a>';
return {
scope: {
"menuItems": "=dropdownTypeahead",
"dropdownTypeaheadOnSelect": "&dropdownTypeaheadOnSelect"
menuItems: "=dropdownTypeahead",
dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect",
model: '=ngModel'
},
link: function($scope, elem) {
link: function($scope, elem, attrs) {
var $input = $(inputTemplate);
var $button = $(buttonTemplate);
$input.appendTo(elem);
$button.appendTo(elem);
var typeaheadValues = _.reduce($scope.menuItems, function(memo, value) {
_.each(value.submenu, function(item) {
if (attrs.linkText) {
$button.html(attrs.linkText);
}
if (attrs.ngModel) {
$scope.$watch('model', function(newValue) {
_.each($scope.menuItems, function(item){
_.each(item.submenu, function(subItem) {
if (subItem.value === newValue) {
$button.html(subItem.text);
}
});
});
});
}
var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) {
_.each(value.submenu, function(item, subIndex) {
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')';
memo.push(value.text + ' ' + item.text);
});
return memo;
}, []);
$scope.menuItemSelected = function(optionIndex, valueIndex) {
var option = $scope.menuItems[optionIndex];
var result = {
$item: option.submenu[valueIndex],
$optionIndex: optionIndex,
$valueIndex: valueIndex
};
$scope.dropdownTypeaheadOnSelect(result);
$scope.menuItemSelected = function(index, subIndex) {
var item = $scope.menuItems[index];
$scope.dropdownTypeaheadOnSelect({$item: item, $subItem: item.submenu[subIndex]});
};
$input.attr('data-provide', 'typeahead');
......@@ -55,12 +67,11 @@ function (angular, app, _, $) {
items: 10,
updater: function (value) {
var result = {};
_.each($scope.menuItems, function(menuItem, optionIndex) {
_.each(menuItem.submenu, function(submenuItem, valueIndex) {
_.each($scope.menuItems, function(menuItem) {
_.each(menuItem.submenu, function(submenuItem) {
if (value === (menuItem.text + ' ' + submenuItem.text)) {
result.$item = submenuItem;
result.$optionIndex = optionIndex;
result.$valueIndex = valueIndex;
result.$item = menuItem;
result.$subItem = submenuItem;
}
});
});
......
src/app/panels/graph/axisEditor.html
<div class="editor-row">
<div class="section">
<h5>Left Y Axis</h5>
<div class="editor-option">
<label class="small">Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'kbytes', 'mbytes', 'bits', 'bps', 'Bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.leftMin" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Max / <a ng-click="toggleGridMinMax('leftMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.leftMax)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.leftMax" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Label</label>
<input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
</div>
</div>
<div class="section">
<h5>Right Y Axis</h5>
<div class="editor-option">
<label class="small">Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'kbytes', 'mbytes', 'bits', 'bps', 'Bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.rightMin" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Label</label>
<input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
</div>
</div>
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<strong>Left Y Axis</strong>
</li>
<li class="grafana-target-segment">
Unit
</li>
<li class="dropdown" style="width: 150px;"
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="text" class="input-small grafana-target-segment-input" placeholder="auto">
</li>
<li class="grafana-target-segment">
Min
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
</li>
<li class="grafana-target-segment">
Label
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" value="">
</li>
<li class="grafana-target-segment">
Show
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<strong>Right Y Axis</strong>
</li>
<li class="grafana-target-segment">
Unit
</li>
<li class="dropdown" style="width: 150px"
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="text" class="input-small grafana-target-segment-input" placeholder="auto">
</li>
<li class="grafana-target-segment">
Min
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
</li>
<li class="grafana-target-segment">
Label
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" value="">
</li>
<li class="grafana-target-segment">
Show
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Legend styles</h5>
<editor-opt-bool text="Show" model="panel.legend.show" change="get_data();"></editor-opt-bool>
<editor-opt-bool text="Values" model="panel.legend.values" change="render()"></editor-opt-bool>
<editor-opt-bool text="Table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
<editor-opt-bool text="Hide empty" model="panel.legend.hideEmpty" tip="Hides series with only null values" change="render()"></editor-opt-bool>
<div class="editor-row" style="margin-top: 20px">
<div class="section">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<strong>Thresholds</strong>
</li>
<li class="grafana-target-segment">
Level 1
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input">
</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="text" class="input-small grafana-target-segment-input">
</li>
<li class="grafana-target-segment">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="grafana-target-segment">
Line mode
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="section" ng-if="panel.legend.values">
<h5>Legend values</h5>
<editor-opt-bool text="Min" model="panel.legend.min" change="render()"></editor-opt-bool>
<editor-opt-bool text="Max" model="panel.legend.max" change="render()"></editor-opt-bool>
<editor-opt-bool text="Current" model="panel.legend.current" change="render()"></editor-opt-bool>
<editor-opt-bool text="Total" model="panel.legend.total" change="render()"></editor-opt-bool>
<editor-opt-bool text="Avg" model="panel.legend.avg" change="render()"></editor-opt-bool>
</div>
<div class="section">
<h5>Grid thresholds</h5>
<div class="editor-option">
<label class="small">Level1</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Level2</label>
<input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</div>
<editor-opt-bool text="Line mode" model="panel.grid.thresholdLine" change="render()"></editor-opt-bool>
</div>
<div class="section">
<h5>Show Axes</h5>
<editor-opt-bool text="X-Axis" model="panel['x-axis']" change="render()"></editor-opt-bool>
<editor-opt-bool text="Y-axis" model="panel['y-axis']" change="render()"></editor-opt-bool>
</div>
<div class="editor-row" style="margin-top: 20px">
<div class="section">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 90px">
<strong>Legend</strong>
</li>
<li class="grafana-target-segment">
Show: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Table: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Right side: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Hide empty: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Min: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Max: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Avg: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Total: <input type="checkbox">
</li>
<li class="grafana-target-segment">
Current: <input type="checkbox">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
src/app/panels/graph/module.js
......@@ -104,6 +104,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.hiddenSeries = {};
$scope.seriesList = [];
$scope.unitFormats = kbn.getUnitFormats();
$scope.setUnitFormat = function(axis, subItem) {
$scope.panel.y_formats[axis] = subItem.value;
$scope.render();
};
$scope.updateTimeRange = function () {
$scope.range = timeSrv.timeRange();
......
src/app/panels/graph/seriesOverridesCtrl.js
......@@ -20,26 +20,21 @@ define([
option.index = $scope.overrideMenu.length;
option.values = values;
option.submenu = _.map(values, function(value, index) {
return {
text: String(value),
click: 'menuItemSelected(' + option.index + ',' + index + ')'
};
option.submenu = _.map(values, function(value) {
return { text: String(value), value: value };
});
$scope.overrideMenu.push(option);
};
$scope.setOverride = function(optionIndex, valueIndex) {
var option = $scope.overrideMenu[optionIndex];
var value = option.values[valueIndex];
$scope.override[option.propertyName] = value;
$scope.setOverride = function(item, subItem) {
$scope.override[item.propertyName] = subItem.value;
// automatically disable lines for this series and the fill bellow to series
// can be removed by the user if they still want lines
if (option.propertyName === 'fillBelowTo') {
if (item.propertyName === 'fillBelowTo') {
$scope.override['lines'] = false;
$scope.addSeriesOverride({ alias: value, lines: false });
$scope.addSeriesOverride({ alias: subItem.value, lines: false });
}
$scope.updateCurrentOverrides();
......
src/app/panels/graph/styleEditor.html
......@@ -89,7 +89,7 @@
{{option.name}}: {{option.value}}
</li>
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($optionIndex, $valueIndex)">
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</li>
</ul>
......
src/app/panels/singlestat/editor.html
......@@ -39,13 +39,7 @@
<h5>Formats</h5>
<div class="editor-option">
<label class="small">Unit format</label>
<<<<<<< HEAD
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
||||||| merged common ancestors
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
=======
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
>>>>>>> 09a0ef2013eecb12864b71ea324e645576049a56
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
</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