Skip to content

Commit

Permalink
Correct Y axis context menu's consistency, and make bug fixes to the …
Browse files Browse the repository at this point in the history
…menu:

 - Enable changing of y axis min and max, and log scaling, at one time.
	Clicking OK accepts all changes, clicking Cancel rejects them.
 - Prevent Highcharts Error ubccr#10 by explicitly naming log/linear axis
	type on HC chart update.
 - Filter user inputs to axis minimum value when log is selected.
 - Add support for change stack: anything done in context menu should
	be treated atomically.
 - Destroy context menu after use to prevent memory leaks.
 - Incorporate feedback from eslint linter.
  • Loading branch information
jsperhac authored and ryanrath committed Apr 27, 2017
1 parent 90061e8 commit 875dea9
Showing 1 changed file with 96 additions and 60 deletions.
156 changes: 96 additions & 60 deletions html/gui/js/modules/metric_explorer/MetricExplorer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1606,6 +1606,7 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
if (instance === undefined) {
instance = CCR.xdmod.ui.metricExplorer;
}
var handler;
var axisIndex = axis.options.index;
var axisTitle = axis.options.title.text;
var originalTitle = axis.options.otitle;
Expand Down Expand Up @@ -1649,31 +1650,94 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
allLogScale = (allLogScale === undefined || allLogScale === true) && record.get('log_scale');
}
}
});

var setLog = new Ext.form.Checkbox({
checked: allLogScale === true,
value: allLogScale, // value to initialize field
boxLabel: 'Log Scale Y Axis',
iconCls: 'log_scale',
xtype: 'checkbox',
listeners: {
specialkey: function(field, e) {
if (e.getKey() == e.ENTER) {
handler();
}
},
check: function(t, ch) {
t.setValue(ch);
}
}
});

var menu = new Ext.menu.Menu({
scope: instance,
showSeparator: false,
ignoreParentClicks: true,
items: [
'<span class="menu-title">Y Axis [' + (axisIndex + 1) + ']</span><br/>',
'<span class="menu-title">min:</span><br/>',
minField,
'<span class="menu-title">max:</span><br/>',
maxField,
setLog // log scaling checkbox
],
listeners: {
'show': {
fn: function(menu) {
menu.getEl().slideIn('t', {
easing: 'easeIn',
duration: 0.2
});
}
},
'hide': {
fn: function(menu) {
menu.destroy();
}
}
}
});

var handler = function() {
/**
* Calculate the new maximum number based on the smallest
* power of the base that is still larger than the
* current maximum value.
*/
function calcMax(base, cur_max) {
var result = 0;
var exponent = 1;
while (result < cur_max) {
result = Math.pow(base, exponent);
exponent += 1;
}
return result;
}

handler = function() {
var oldMin = axis.min,
oldMax = axis.max,
allLog = setLog.getValue(),
axisType = null,
newMin = minField.getValue(),
newMax = maxField.getValue();

if (axis.isLog) {
// disable the undo stack so this can be treated as a single change:
instance.fireEvent('disable_commit');

/**
* Calculate the new maximum number based on the smallest
* power of the base that is still larger than the
* current maximum value.
*/
function calcMax(base, cur_max) {
var result = 0;
var exponent = 1;
while (result < cur_max) {
result = Math.pow(base, exponent);
exponent += 1;
// Set log_scale to the value of allLog
instance.datasetStore.each(function(record) {
for (var i = 0; i < yAxisDatasetIds.length; i++) {
if (Math.abs(yAxisDatasetIds[i] - record.data.id) < 1e-14) {
record.set('log_scale', allLog);
}
return result;
}
});

// Calculate best min and max for log plot
if (allLog) {

axisType = 'logarithmic';

/* This is only pre-defined until we decide to either
* update the tick-value for log-axis charts, or give
Expand All @@ -1684,14 +1748,20 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
/* Calculate a new maximum value so things look right on the screen. */
newMax = calcMax(defaultBase, newMax);

if (newMin == "" || newMin == 0) {
/* Do not permit minimum <= 0 */
if (newMin == "" || newMin <= 0) {
newMin = null;
}
}

if (newMin == "") {
newMin = 0;
}
} else {

axisType = 'linear';

if (newMin == "") {
newMin = 0;
}
} // if (allLog)

if (newMax == "") {
newMax = null;
}
Expand Down Expand Up @@ -1719,55 +1789,21 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
axis.target.yAxis[axisIndex].update({
min: newMin,
max: newMax,
type: axisType,
startOnTick: newMin == null,
endOnTick: newMax == null
}, true);

instance.saveQuery();
}
menu.hide();

// re-enable the undo stack to treat this as a single change
instance.fireEvent('enable_commit', true);

menu.destroy();
};

var menu = new Ext.menu.Menu({
scope: instance,
showSeparator: false,
ignoreParentClicks: true,
items: [
'<span class="menu-title">Y Axis [' + (axisIndex + 1) + ']</span><br/>',
'<span class="menu-title">min:</span><br/>',
minField,
'<span class="menu-title">max:</span><br/>',
maxField
],
listeners: {
'show': {
fn: function(menu) {
menu.getEl().slideIn('t', {
easing: 'easeIn',
duration: 0.2
});
}
}
}
});

menu.addItem({
text: 'Log Scale Y Axis',
iconCls: 'log_scale',
xtype: 'menucheckitem',
checked: allLogScale === true,
listeners: {
checkchange: function(t, check) {
instance.datasetStore.each(function(record) {
for (var i = 0; i < yAxisDatasetIds.length; i++) {
if (Math.abs(yAxisDatasetIds[i] - record.data.id) < 1e-14) {
record.set('log_scale', check);
}
}
});
}
}
});
if (axisTitle == null || axisTitle == '') {
menu.addItem('-');
menu.addItem({
Expand Down Expand Up @@ -1822,7 +1858,7 @@ Ext.apply(XDMoD.Module.MetricExplorer, {
xtype: 'button',
text: 'Cancel',
handler: function() {
menu.hide();
menu.destroy();
}
}]
});
Expand Down

0 comments on commit 875dea9

Please sign in to comment.