IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(graph): changed how graph stores panel yaxis options

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-29 14:54:33 +02:00
parent 32c8f495ab
commit 4871a8f43e
6 changed files with 196 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/app/features/dashboard/dashboardSrv.js
View File

@ -212,7 +212,7 @@ function (angular, $, _, moment) {
var i, j, k;
var oldVersion = this.schemaVersion;
var panelUpgrades = [];
this.schemaVersion = 11;
this.schemaVersion = 12;
if (oldVersion === this.schemaVersion) {
return;
@ -409,6 +409,49 @@ function (angular, $, _, moment) {
});
}
if (oldVersion < 12) {
// update graph yaxes changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'graph') { return; }
if (!panel.yaxes) {
panel.yaxes = [
{
show: panel['y-axis'],
min: panel.grid.leftMin,
max: panel.grid.leftMax,
logBase: panel.grid.leftLogBase,
format: panel.y_formats[0],
label: panel.leftYAxisLabel,
},
{
show: panel['y-axis'],
min: panel.grid.rightMin,
max: panel.grid.rightMax,
logBase: panel.grid.rightLogBase,
format: panel.y_formats[1],
label: panel.rightYAxisLabel,
}
];
panel.xaxis = {
show: panel['x-axis'],
};
delete panel.grid.leftMin;
delete panel.grid.leftMax;
delete panel.grid.leftLogBase;
delete panel.grid.rightMin;
delete panel.grid.rightMax;
delete panel.grid.rightLogBase;
delete panel.y_formats;
delete panel.leftYAxisLabel;
delete panel.rightYAxisLabel;
delete panel['y-axis'];
delete panel['x-axis'];
}
});
}
if (panelUpgrades.length === 0) {
return;
}

171
public/app/plugins/panel/graph/axisEditor.html
View File

@ -1,116 +1,87 @@
<div class="editor-row gf-form-group">
<div class="section">
<h5 class="section-heading">Left Y</h5>
<div class="section" ng-repeat="yaxis in ctrl.panel.yaxes">
<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-5">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $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="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
<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>
<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="ctrl.panel.grid.leftMin" ng-change="ctrl.render()" ng-model-onblur>
<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 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="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
<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 class="gf-form">
<label class="gf-form-label width-5">Label</label>
<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section">
<h5 class="section-heading">Right Y</h5>
<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-5">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $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="ctrl.panel.grid.rightLogBase" 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="ctrl.panel.grid.rightMin" 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="ctrl.panel.grid.rightMax" 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="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</div>
<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" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Show Axis
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
<label for="hideYAxis" class="cr1"></label>
</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">
Thresholds
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
</li>
<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 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&#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>

35
public/app/plugins/panel/graph/graph.js
View File

@ -115,7 +115,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
for (var i = 0; i < data.length; i++) {
var series = data[i];
var axis = yaxis[series.yaxis - 1];
var formater = kbn.valueFormats[panel.y_formats[series.yaxis - 1]];
var formater = kbn.valueFormats[panel.yaxes[series.yaxis - 1].format];
// decimal override
if (_.isNumber(panel.decimals)) {
@ -132,18 +132,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
}
// add left axis labels
if (panel.leftYAxisLabel) {
if (panel.yaxes[0].label) {
var yaxisLabel = $("<div class='axisLabel left-yaxis-label'></div>")
.text(panel.leftYAxisLabel)
.text(panel.yaxes[0].label)
.appendTo(elem);
yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
}
// add right axis labels
if (panel.rightYAxisLabel) {
if (panel.yaxes[1].label) {
var rightLabel = $("<div class='axisLabel right-yaxis-label'></div>")
.text(panel.rightYAxisLabel)
.text(panel.yaxes[1].label)
.appendTo(elem);
rightLabel.css("margin-top", rightLabel.width() / 2);
@ -151,7 +151,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
}
function processOffsetHook(plot, gridMargin) {
if (panel.leftYAxisLabel) { gridMargin.left = 20; }
if (panel.yaxis) { gridMargin.left = 20; }
if (panel.rightYAxisLabel) { gridMargin.right = 20; }
}
@ -217,7 +217,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
for (var i = 0; i < data.length; i++) {
var series = data[i];
series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode, panel.y_formats);
series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode);
// if hidden remove points and disable stack
if (ctrl.hiddenSeries[series.alias]) {
@ -340,11 +340,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
function configureAxisOptions(data, options) {
var defaults = {
position: 'left',
show: panel['y-axis'],
min: panel.grid.leftMin,
show: panel.yaxes[0].show,
min: panel.yaxes[0].min,
index: 1,
logBase: panel.grid.leftLogBase || 1,
max: panel.percentage && panel.stack ? 100 : panel.grid.leftMax,
logBase: panel.yaxes[0].logBase || 1,
max: panel.percentage && panel.stack ? 100 : panel.yaxes[0].max,
};
options.yaxes.push(defaults);
@ -352,18 +352,19 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
if (_.findWhere(data, {yaxis: 2})) {
var secondY = _.clone(defaults);
secondY.index = 2,
secondY.logBase = panel.grid.rightLogBase || 1,
secondY.show = panel.yaxes[1].show;
secondY.logBase = panel.yaxes[1].logBase || 1,
secondY.position = 'right';
secondY.min = panel.grid.rightMin;
secondY.max = panel.percentage && panel.stack ? 100 : panel.grid.rightMax;
secondY.min = panel.yaxes[1].min;
secondY.max = panel.percentage && panel.stack ? 100 : panel.yaxes[1].max;
options.yaxes.push(secondY);
applyLogScale(options.yaxes[1], data);
configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.y_formats[1]);
configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.yaxes[1].format);
}
applyLogScale(options.yaxes[0], data);
configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.y_formats[0]);
configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.yaxes[0].format);
}
function applyLogScale(axis, data) {
@ -456,7 +457,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
url += panel['x-axis'] ? '' : '&hideAxes=true';
url += panel['y-axis'] ? '' : '&hideYAxis=true';
switch(panel.y_formats[0]) {
switch(panel.yaxes[0].format) {
case 'bytes':
url += '&yUnitSystem=binary';
break;

40
public/app/plugins/panel/graph/module.ts
View File

@ -17,20 +17,28 @@ var panelDefaults = {
datasource: null,
// sets client side (flot) or native graphite png renderer (png)
renderer: 'flot',
// Show/hide the x-axis
'x-axis' : true,
// Show/hide y-axis
'y-axis' : true,
// y axis formats, [left axis,right axis]
y_formats : ['short', 'short'],
// grid options
yaxes: [
{
label: null,
show: true,
logBase: 1,
min: null,
max: null,
format: 'short'
},
{
label: null,
show: true,
logBase: 1,
min: null,
max: null,
format: 'short'
}
],
xaxis: {
show: true
},
grid : {
leftLogBase: 1,
leftMax: null,
rightMax: null,
leftMin: null,
rightMin: null,
rightLogBase: 1,
threshold1: null,
threshold2: null,
threshold1Color: 'rgba(216, 200, 27, 0.27)',
@ -115,8 +123,8 @@ class GraphCtrl extends MetricsPanelCtrl {
}
onInitEditMode() {
this.addEditorTab('Axes & Grid', 'public/app/plugins/panel/graph/axisEditor.html', 2);
this.addEditorTab('Display Styles', 'public/app/plugins/panel/graph/styleEditor.html', 3);
this.addEditorTab('Axes', 'public/app/plugins/panel/graph/axisEditor.html', 2);
this.addEditorTab('Display', 'public/app/plugins/panel/graph/styleEditor.html', 3);
this.logScales = {
'linear': 1,
@ -135,7 +143,7 @@ class GraphCtrl extends MetricsPanelCtrl {
}
setUnitFormat(axis, subItem) {
this.panel.y_formats[axis] = subItem.value;
axis.format = subItem.value;
this.render();
}

24
public/app/plugins/panel/graph/specs/graph_specs.ts
View File

@ -31,7 +31,21 @@ describe('grafanaGraph', function() {
panel: {
legend: {},
grid: { },
y_formats: [],
yaxes: [
{
min: null,
max: null,
format: 'short',
logBase: 1
},
{
min: null,
max: null,
format: 'short',
logBase: 1
}
],
xaxis: {},
seriesOverrides: [],
tooltip: {
shared: true
@ -151,13 +165,7 @@ describe('grafanaGraph', function() {
graphScenario('when logBase is log 10', function(ctx) {
ctx.setup(function(ctrl) {
ctrl.panel.grid = {
leftMax: null,
rightMax: null,
leftMin: null,
rightMin: null,
leftLogBase: 10,
};
ctrl.panel.yaxes[0].logBase = 10;
});
it('should apply axis transform and ticks', function() {

30
public/test/specs/dashboardSrv-specs.js
View File

@ -122,7 +122,10 @@ define([
{
panels: [
{
type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
type: 'graph', legend: true, aliasYAxis: { test: 2 },
y_formats: ['kbyte', 'ms'],
grid: {min: 1, max: 10, rightMin: 5, rightMax: 15, leftLogBase: 1, rightLogBase: 2},
leftYAxisLabel: 'left label',
targets: [{refId: 'A'}, {}],
},
{
@ -172,11 +175,6 @@ define([
expect(graph.legend.show).to.be(true);
});
it('update grid options', function() {
expect(graph.grid.leftMin).to.be(1);
expect(graph.grid.leftMax).to.be(10);
});
it('move aliasYAxis to series override', function() {
expect(graph.seriesOverrides[0].alias).to.be("test");
expect(graph.seriesOverrides[0].yaxis).to.be(2);
@ -193,8 +191,24 @@ define([
expect(table.styles[1].thresholds[1]).to.be("300");
});
it('graph grid to yaxes options', function() {
expect(graph.yaxes[0].min).to.be(1);
expect(graph.yaxes[0].max).to.be(10);
expect(graph.yaxes[0].format).to.be('kbyte');
expect(graph.yaxes[0].label).to.be('left label');
expect(graph.yaxes[0].logBase).to.be(1);
expect(graph.yaxes[1].min).to.be(5);
expect(graph.yaxes[1].max).to.be(15);
expect(graph.yaxes[1].format).to.be('ms');
expect(graph.yaxes[1].logBase).to.be(2);
expect(graph.grid.rightMax).to.be(undefined);
expect(graph.grid.rightLogBase).to.be(undefined);
expect(graph.y_formats).to.be(undefined);
});
it('dashboard schema version should be set to latest', function() {
expect(model.schemaVersion).to.be(11);
expect(model.schemaVersion).to.be(12);
});
});
@ -248,6 +262,8 @@ define([
rows: [{
panels: [{
type: 'graph',
grid: {},
yaxes: [{}, {}],
targets: [{
"alias": "$tag_datacenter $tag_source $col",
"column": "value",