2010-04-10 10:28:06 +02:00
|
|
|
function ScatterplotDialog() {
|
|
|
|
this._createDialog();
|
|
|
|
}
|
|
|
|
|
|
|
|
ScatterplotDialog.prototype._createDialog = function() {
|
|
|
|
var self = this;
|
|
|
|
var frame = DialogSystem.createDialog();
|
|
|
|
frame.width("900px");
|
|
|
|
|
|
|
|
var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix').appendTo(frame);
|
|
|
|
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
|
|
|
|
var footer = $(
|
|
|
|
'<div class="dialog-footer">' +
|
|
|
|
'<table width="100%"><tr>' +
|
|
|
|
'<td class="left" style="text-align: left"></td>' +
|
|
|
|
'<td class="right" style="text-align: right"></td>' +
|
|
|
|
'</tr></table>' +
|
|
|
|
'</div>'
|
|
|
|
).appendTo(frame);
|
|
|
|
|
|
|
|
var html = $(
|
|
|
|
'<div class="grid-layout layout-normal">' +
|
|
|
|
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
|
|
|
|
'</div>'
|
|
|
|
).appendTo(body);
|
|
|
|
|
|
|
|
this._elmts = DOM.bind(html);
|
|
|
|
|
|
|
|
var left_footer = footer.find(".left");
|
|
|
|
|
|
|
|
var right_footer = footer.find(".right");
|
|
|
|
$('<button></button>').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer);
|
|
|
|
|
|
|
|
this._renderMatrix(theProject.columnModel.columns);
|
|
|
|
this._level = DialogSystem.showDialog(frame);
|
|
|
|
};
|
|
|
|
|
|
|
|
ScatterplotDialog.prototype._renderMatrix = function(columns) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
var container = this._elmts.tableContainer;
|
|
|
|
|
|
|
|
if (columns.length > 0) {
|
|
|
|
var table = $('<table></table>').addClass("scatterplot-matrix-table")[0];
|
|
|
|
|
|
|
|
for (var i = 0; i < columns.length; i++) {
|
|
|
|
var tr = table.insertRow(table.rows.length);
|
|
|
|
for (var j = 0; j < i; j++) {
|
2010-04-12 21:22:49 +02:00
|
|
|
var cx = columns[i];
|
|
|
|
var cy = columns[j];
|
|
|
|
var plotter_params = {
|
|
|
|
'cx' : cx.name,
|
|
|
|
'cy' : cy.name,
|
|
|
|
'w' : 20,
|
|
|
|
'h' : 20
|
|
|
|
};
|
|
|
|
var params = {
|
2010-04-10 10:28:06 +02:00
|
|
|
project: theProject.id,
|
|
|
|
engine: JSON.stringify(ui.browsingEngine.getJSON()),
|
2010-04-12 21:22:49 +02:00
|
|
|
plotter: JSON.stringify(plotter_params)
|
|
|
|
}
|
|
|
|
var url = "/command/get-scatterplot?" + $.param(params);
|
|
|
|
var name = cx.name + '(x) vs. ' + cy.name + '(y)';
|
|
|
|
var cell = $(tr.insertCell(j));
|
|
|
|
var link = $('<a href="javascript:{}"></a>').attr("title",name).click(function() {
|
|
|
|
ui.browsingEngine.addFacet(
|
|
|
|
"scatterplot",
|
|
|
|
{
|
|
|
|
"name" : name,
|
|
|
|
"x_column" : cx.name,
|
|
|
|
"y_column" : cy.name,
|
|
|
|
"expression" : "value",
|
|
|
|
"mode" : "scatterplot"
|
|
|
|
}
|
|
|
|
);
|
|
|
|
//self._dismiss();
|
2010-04-10 10:28:06 +02:00
|
|
|
});
|
2010-04-12 21:22:49 +02:00
|
|
|
var plot = $('<img src="' + url + '" />').addClass("scatterplot").appendTo(link);
|
|
|
|
link.appendTo(cell);
|
2010-04-10 10:28:06 +02:00
|
|
|
}
|
|
|
|
$(tr.insertCell(i)).text(columns[i]);
|
|
|
|
for (var j = i + 1; j < columns.length; j++) {
|
|
|
|
$(tr.insertCell(j)).text(" ");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
container.empty().append(table);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
container.html(
|
|
|
|
'<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">There are no columns in this dataset</div></div>'
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
ScatterplotDialog.prototype._dismiss = function() {
|
|
|
|
DialogSystem.dismissUntil(this._level - 1);
|
|
|
|
};
|
|
|
|
|