mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Major reworking of the graph axis editor tab
This commit is contained in:
Torkel Ödegaard
parent
1a49d51d42
commit
3dc30e4d8b
@ -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;
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,90 +1,160 @@
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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="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">
|
||||
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">
|
||||
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 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>
|
||||
|
||||
<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="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>
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user