Skip to content

E
edx-platform
Commit def8eb47 by Valera Rozuvan Committed by Alexander Kryklia
Options

Refactoring. Added ability to add dynamic element output to graph labels.… 

Refactoring. Added ability to add dynamic element output to graph labels. Updated 2 demos for GST. "Falsified Clinic Data", and "Sample Size and Power".
parent 9cabaf1e
Showing with 117 additions and 34 deletions
common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
...@@ -25,15 +25,14 @@ define('ElOutput', ['logme'], function (logme) { ...@@ -25,15 +25,14 @@ define('ElOutput', ['logme'], function (logme) {
return; return;
function processFuncObj(obj) { function processFuncObj(obj) {
var outputEl, paramNames, funcString, func; var paramNames, funcString, func, special, el;
// We are only interested in functions that are meant for output to an // We are only interested in functions that are meant for output to an
// element. // element.
if (typeof obj['@output'] !== 'string') { if (
return; (typeof obj['@output'] !== 'string') ||
} (obj['@output'].toLowerCase() !== 'element')
) {
if (obj['@output'].toLowerCase() !== 'element') {
return; return;
} }
...@@ -55,14 +54,6 @@ define('ElOutput', ['logme'], function (logme) { ...@@ -55,14 +54,6 @@ define('ElOutput', ['logme'], function (logme) {
// ASCII text equivalents. // ASCII text equivalents.
funcString = $('<div>').html(funcString).text(); funcString = $('<div>').html(funcString).text();
outputEl = $('#' + obj['@el_id']);
if (outputEl.length !== 1) {
logme('ERROR: The element with id "' + obj['@el_id'] + '" was not found.');
return;
}
paramNames = state.getAllParameterNames(); paramNames = state.getAllParameterNames();
paramNames.push(funcString); paramNames.push(funcString);
...@@ -86,9 +77,25 @@ define('ElOutput', ['logme'], function (logme) { ...@@ -86,9 +77,25 @@ define('ElOutput', ['logme'], function (logme) {
paramNames.pop(); paramNames.pop();
outputEl.html(func.apply(window, state.getAllParameterValues())); special = false;
if (obj['@el_id'][0] === '_') {
special = true;
} else {
el = $('#' + obj['@el_id']);
if (el.length !== 1) {
logme(
'ERROR: DOM element with ID "' + obj['@el_id'] + '" ' +
'not found. Dynamic element not created.'
);
return;
}
el.html(func.apply(window, state.getAllParameterValues()));
}
state.addDynamicEl(outputEl, func); state.addDynamicEl(el, func, obj['@el_id'], special);
} }
} }
......
common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
...@@ -8,7 +8,9 @@ define('Graph', ['logme'], function (logme) { ...@@ -8,7 +8,9 @@ define('Graph', ['logme'], function (logme) {
function Graph(gstId, config, state) { function Graph(gstId, config, state) {
var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange, var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
asymptotes; asymptotes, plotObj;
plotObj = null;
state.barsConfig = { state.barsConfig = {
'N': 0, 'N': 0,
...@@ -519,7 +521,7 @@ define('Graph', ['logme'], function (logme) { ...@@ -519,7 +521,7 @@ define('Graph', ['logme'], function (logme) {
function addFunction(funcString, color, line, dot, label, function addFunction(funcString, color, line, dot, label,
pointSize, fillArea, bar, disableAutoReturn) { pointSize, fillArea, bar, disableAutoReturn) {
var newFunctionObject, func, paramNames; var newFunctionObject, func, paramNames, matches;
// The main requirement is function string. Without it we can't // The main requirement is function string. Without it we can't
// create a function, and the series cannot be calculated. // create a function, and the series cannot be calculated.
...@@ -671,6 +673,17 @@ define('Graph', ['logme'], function (logme) { ...@@ -671,6 +673,17 @@ define('Graph', ['logme'], function (logme) {
} }
if (typeof label === 'string') { if (typeof label === 'string') {
matches = label.match(/%%_[^%]*%%/g);
if (
($.isArray(matches) === true) &&
(matches.length > 0)
) {
newFunctionObject['specialLabel'] = true;
} else {
newFunctionObject['specialLabel'] = false;
}
newFunctionObject['label'] = label; newFunctionObject['label'] = label;
} }
...@@ -688,7 +701,7 @@ define('Graph', ['logme'], function (logme) { ...@@ -688,7 +701,7 @@ define('Graph', ['logme'], function (logme) {
function generateData() { function generateData() {
var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y, var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
start, end, step, tempX; start, end, step, tempX, matches;
paramValues = state.getAllParameterValues(); paramValues = state.getAllParameterValues();
...@@ -801,8 +814,36 @@ define('Graph', ['logme'], function (logme) { ...@@ -801,8 +814,36 @@ define('Graph', ['logme'], function (logme) {
// See if a user defined a label for this function. // See if a user defined a label for this function.
if (functionObj.hasOwnProperty('label') === true) { if (functionObj.hasOwnProperty('label') === true) {
if (functionObj.specialLabel === true) {
matches = functionObj.label.match(/%%_[^%]*%%/g);
if ($.isArray(matches) === true) {
(function (c1) {
var el_id, func, tempLabel;
tempLabel = functionObj.label;
while (c1 < matches.length) {
el_id = matches[c1].replace(/%/g, '');
func = state.getFuncForSpecialLabel(el_id);
if (func !== null) {
tempLabel = tempLabel.replace(
matches[c1],
func.apply(window, state.getAllParameterValues())
);
}
c1 += 1;
}
seriesObj.label = tempLabel;
}(0));
}
} else {
seriesObj.label = functionObj.label; seriesObj.label = functionObj.label;
} }
}
// Should the data points be connected by a line? // Should the data points be connected by a line?
seriesObj.lines = { seriesObj.lines = {
...@@ -841,9 +882,10 @@ define('Graph', ['logme'], function (logme) { ...@@ -841,9 +882,10 @@ define('Graph', ['logme'], function (logme) {
paramValues = state.getAllParameterValues(); paramValues = state.getAllParameterValues();
// Tell Flot to draw the graph to our specification. // Tell Flot to draw the graph to our specification. If this is the
// first time, then call $.plot.
$.plot( if (plotObj === null) {
plotObj = $.plot(
plotDiv, plotDiv,
dataSeries, dataSeries,
{ {
...@@ -868,6 +910,13 @@ define('Graph', ['logme'], function (logme) { ...@@ -868,6 +910,13 @@ define('Graph', ['logme'], function (logme) {
} }
} }
); );
}
// Otherwise, use stored plot object.
else {
plotObj.setData(dataSeries);
plotObj.setupGrid();
plotObj.draw();
}
// The first time that the graph gets added to the page, the legend // The first time that the graph gets added to the page, the legend
// is created from scratch. When it appears, MathJax works some // is created from scratch. When it appears, MathJax works some
...@@ -909,7 +958,7 @@ define('Graph', ['logme'], function (logme) { ...@@ -909,7 +958,7 @@ define('Graph', ['logme'], function (logme) {
if (asymptote.type === 'x') { if (asymptote.type === 'x') {
markings.push({ markings.push({
'color': asymptote.color, 'color': asymptote.color,
'lineWidth': 1, 'lineWidth': 2,
'xaxis': { 'xaxis': {
'from': val, 'from': val,
'to': val 'to': val
...@@ -918,7 +967,7 @@ define('Graph', ['logme'], function (logme) { ...@@ -918,7 +967,7 @@ define('Graph', ['logme'], function (logme) {
} else { } else {
markings.push({ markings.push({
'color': asymptote.color, 'color': asymptote.color,
'lineWidth': 1, 'lineWidth': 2,
'yaxis': { 'yaxis': {
'from': val, 'from': val,
'to': val 'to': val
......
common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js
...@@ -64,12 +64,12 @@ define( ...@@ -64,12 +64,12 @@ define(
Sliders(gstId, state); Sliders(gstId, state);
Inputs(gstId, gstClass, state); Inputs(gstId, gstClass, state);
// Configure functions that output to an element instead of the graph.
ElOutput(config, state);
// Configure and display the graph. Attach event for the graph to be // Configure and display the graph. Attach event for the graph to be
// updated on any change of a slider or a text input. // updated on any change of a slider or a text input.
Graph(gstId, config, state); Graph(gstId, config, state);
// Configure functions that output to an element instead of the graph.
ElOutput(config, state);
} }
}); });
......
common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js
...@@ -18,9 +18,10 @@ define('State', ['logme'], function (logme) { ...@@ -18,9 +18,10 @@ define('State', ['logme'], function (logme) {
function State(gstId, config) { function State(gstId, config) {
var parameters, allParameterNames, allParameterValues, var parameters, allParameterNames, allParameterValues,
plotDiv, dynamicEl; plotDiv, dynamicEl, dynamicElByElId;
dynamicEl = []; dynamicEl = [];
dynamicElByElId = {};
stateInst += 1; stateInst += 1;
logme('MESSAGE: Creating state instance # ' + stateInst + '.'); logme('MESSAGE: Creating state instance # ' + stateInst + '.');
...@@ -95,7 +96,9 @@ define('State', ['logme'], function (logme) { ...@@ -95,7 +96,9 @@ define('State', ['logme'], function (logme) {
'getAllParameterValues': getAllParameterValues, 'getAllParameterValues': getAllParameterValues,
'bindUpdatePlotEvent': bindUpdatePlotEvent, 'bindUpdatePlotEvent': bindUpdatePlotEvent,
'addDynamicEl': addDynamicEl 'addDynamicEl': addDynamicEl,
'getFuncForSpecialLabel': getFuncForSpecialLabel
}; };
function getAllParameterNames() { function getAllParameterNames() {
...@@ -122,11 +125,33 @@ define('State', ['logme'], function (logme) { ...@@ -122,11 +125,33 @@ define('State', ['logme'], function (logme) {
plotDiv.bind('update_plot', callback); plotDiv.bind('update_plot', callback);
} }
function addDynamicEl(outputEl, func) { function addDynamicEl(el, func, elId, special) {
dynamicEl.push({ var newLength;
'outputEl': outputEl,
'func': func newLength = dynamicEl.push({
'el': el,
'func': func,
'elId': elId,
'special': special
}); });
if (typeof dynamicElByElId[elId] !== 'undefined') {
logme(
'ERROR: Duplicate dynamic element ID "' + elId + '" found.'
);
} else {
dynamicElByElId[elId] = dynamicEl[newLength - 1];
}
}
function getFuncForSpecialLabel(elId) {
if (typeof dynamicElByElId[elId] === 'undefined') {
logme('ERROR: Special label with ID "' + elId + '" does not exist.');
return null;
}
return dynamicElByElId[elId].func;
} }
function getParameterValue(paramName) { function getParameterValue(paramName) {
...@@ -221,7 +246,9 @@ define('State', ['logme'], function (logme) { ...@@ -221,7 +246,9 @@ define('State', ['logme'], function (logme) {
allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum; allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
for (c1 = 0; c1 < dynamicEl.length; c1++) { for (c1 = 0; c1 < dynamicEl.length; c1++) {
dynamicEl[c1].outputEl.html(dynamicEl[c1].func.apply(window, allParameterValues)); if (dynamicEl[c1].special !== true) {
dynamicEl[c1].el.html(dynamicEl[c1].func.apply(window, allParameterValues));
}
} }
// If we have a plot DIV to work with, tell to update. // If we have a plot DIV to work with, tell to update.
......
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