Skip to content

GitLab

M
morpheus.js
Commit 82b2520a authored by Joshua Gould's avatar Joshua Gould
Browse files
Options

profile chart beta

parent b6a8bac5
Hide whitespace changes
Inline Side-by-side
Showing with 763 additions and 592 deletions
src/tools/chart_tool2.js
View file @ 82b2520a
...@@ -4,25 +4,25 @@ ...@@ -4,25 +4,25 @@
* @param chartOptions.getVisibleTrackNames * @param chartOptions.getVisibleTrackNames
* {Function} * {Function}
*/ */
morpheus.ChartTool2 = function(chartOptions) { morpheus.ChartTool2 = function (chartOptions) {
var _this = this; var _this = this;
this.getVisibleTrackNames = chartOptions.getVisibleTrackNames; this.getVisibleTrackNames = chartOptions.getVisibleTrackNames;
this.project = chartOptions.project; this.project = chartOptions.project;
var project = this.project; var project = this.project;
this.$el = $('<div class="container-fluid">' this.$el = $('<div class="container-fluid">'
+ '<div class="row">' + '<div class="row">'
+ '<div name="configPane" class="col-xs-2"></div>' + '<div name="configPane" class="col-xs-2"></div>'
+ '<div class="col-xs-10"><div style="position:relative;" name="chartDiv"></div></div>' + '<div class="col-xs-10"><div style="position:relative;" name="chartDiv"></div></div>'
+ '</div></div>'); + '</div></div>');
var formBuilder = new morpheus.FormBuilder({ var formBuilder = new morpheus.FormBuilder({
vertical : true vertical: true
}); });
this.formBuilder = formBuilder; this.formBuilder = formBuilder;
formBuilder.append({ formBuilder.append({
name : 'chart_type', name: 'chart_type',
type : 'select', type: 'select',
options : [ 'boxplot', 'row scatter', 'column scatter' ] options: ['boxplot', 'row scatter', 'column scatter', 'row profile', 'column profile']
}); });
var rowOptions = []; var rowOptions = [];
var columnOptions = []; var columnOptions = [];
...@@ -30,70 +30,70 @@ morpheus.ChartTool2 = function(chartOptions) { ...@@ -30,70 +30,70 @@ morpheus.ChartTool2 = function(chartOptions) {
var numericColumnOptions = []; var numericColumnOptions = [];
var options = []; var options = [];
var numericOptions = []; var numericOptions = [];
var updateOptions = function() { var updateOptions = function () {
var dataset = project.getFullDataset(); var dataset = project.getFullDataset();
rowOptions = [ { rowOptions = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
columnOptions = [ { columnOptions = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
numericRowOptions = [ { numericRowOptions = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
numericColumnOptions = [ { numericColumnOptions = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
options = [ { options = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
numericOptions = [ { numericOptions = [{
name : '(None)', name: '(None)',
value : '' value: ''
} ]; }];
morpheus.MetadataUtil.getMetadataNames(dataset.getRowMetadata()) morpheus.MetadataUtil.getMetadataNames(dataset.getRowMetadata())
.forEach( .forEach(
function(name) { function (name) {
var dataType = morpheus.VectorUtil var dataType = morpheus.VectorUtil
.getDataType(dataset.getRowMetadata() .getDataType(dataset.getRowMetadata()
.getByName(name)); .getByName(name));
if (dataType === 'number' if (dataType === 'number'
|| dataType === '[number]') { || dataType === '[number]') {
numericRowOptions.push({ numericRowOptions.push({
name : name + ' (row)', name: name + ' (row)',
value : name + '_r' value: name + '_r'
}); });
} }
rowOptions.push({ rowOptions.push({
name : name + ' (row)', name: name + ' (row)',
value : name + '_r' value: name + '_r'
}); });
}); });
morpheus.MetadataUtil.getMetadataNames(dataset.getColumnMetadata()) morpheus.MetadataUtil.getMetadataNames(dataset.getColumnMetadata())
.forEach( .forEach(
function(name) { function (name) {
var dataType = morpheus.VectorUtil var dataType = morpheus.VectorUtil
.getDataType(dataset.getColumnMetadata() .getDataType(dataset.getColumnMetadata()
.getByName(name)); .getByName(name));
if (dataType === 'number' if (dataType === 'number'
|| dataType === '[number]') { || dataType === '[number]') {
numericColumnOptions.push({ numericColumnOptions.push({
name : name + ' (column)', name: name + ' (column)',
value : name + '_c' value: name + '_c'
}); });
} }
columnOptions.push({ columnOptions.push({
name : name + ' (column)', name: name + ' (column)',
value : name + '_c' value: name + '_c'
}); });
}); });
options = options.concat(rowOptions.slice(1)); options = options.concat(rowOptions.slice(1));
options = options.concat(columnOptions.slice(1)); options = options.concat(columnOptions.slice(1));
...@@ -104,78 +104,79 @@ morpheus.ChartTool2 = function(chartOptions) { ...@@ -104,78 +104,79 @@ morpheus.ChartTool2 = function(chartOptions) {
updateOptions(); updateOptions();
formBuilder.append({ formBuilder.append({
name : 'group_columns_by', name: 'group_columns_by',
type : 'select', type: 'select',
options : options options: options
}); });
formBuilder.append({ formBuilder.append({
name : 'group_rows_by', name: 'group_rows_by',
type : 'select', type: 'select',
options : options options: options
}); });
formBuilder.append({ formBuilder.append({
name : 'axis_label', name: 'axis_label',
type : 'select', type: 'select',
options : rowOptions options: rowOptions
}); });
formBuilder.append({ formBuilder.append({
name : 'show_points', name: 'show_points',
type : 'checkbox', type: 'checkbox',
value : true value: true
}); });
formBuilder.append({ formBuilder.append({
name : 'color', name: 'color',
type : 'select', type: 'select',
options : options options: options
}); });
formBuilder.append({ formBuilder.append({
name : 'size', name: 'size',
type : 'select', type: 'select',
options : numericOptions options: numericOptions
}); });
function setVisibility() { function setVisibility() {
// 'boxplot', 'row scatter', 'column scatter', 'row profile', 'column profile'
var chartType = formBuilder.getValue('chart_type'); var chartType = formBuilder.getValue('chart_type');
var isBoxplot = chartType === 'boxplot';
// formBuilder.setVisible('points', isBoxplot); formBuilder.setVisible('group_rows_by', chartType === 'boxplot');
formBuilder.setVisible('group_rows_by', isBoxplot); formBuilder.setVisible('group_columns_by', chartType === 'boxplot');
formBuilder.setVisible('group_columns_by', isBoxplot); if (chartType !== 'boxplot') {
if (!isBoxplot) {
formBuilder.setOptions('axis_label', formBuilder.setOptions('axis_label',
chartType === 'row scatter' ? rowOptions : columnOptions, (chartType === 'row scatter' || chartType === 'column profile') ? rowOptions : columnOptions,
true); true);
formBuilder.setOptions('color', formBuilder.setOptions('color',
chartType === 'row scatter' ? columnOptions : rowOptions, (chartType === 'row scatter' || chartType === 'column profile') ? columnOptions : rowOptions,
true); true);
formBuilder.setOptions('size', formBuilder.setOptions('size',
chartType === 'row scatter' ? numericColumnOptions (chartType === 'row scatter' || chartType === 'row profile') ? numericColumnOptions
: numericRowOptions, true); : numericRowOptions, true);
} else { } else {
formBuilder.setOptions('color', options, true); formBuilder.setOptions('color', options, true);
formBuilder.setOptions('size', numericOptions, true); formBuilder.setOptions('size', numericOptions, true);
} }
formBuilder.setVisible('axis_label', !isBoxplot); formBuilder.setVisible('axis_label', chartType !== 'boxplot');
} }
formBuilder.$form.find('select').on('change', function() {
formBuilder.$form.find('select').on('change', function () {
setVisibility(); setVisibility();
_this.draw(); _this.draw();
}); });
formBuilder.$form.find('input').on('click', function() { formBuilder.$form.find('input').on('click', function () {
_this.draw(); _this.draw();
}); });
setVisibility(); setVisibility();
// chart types: boxplot, scatter // chart types: boxplot, scatter
// add: tooltip, color, size, allow boxplot and scatter of attributes? // add: tooltip, color, size, allow boxplot and scatter of attributes?
var draw = function() { var draw = function () {
_.debounce(_this.draw(), 100); _.debounce(_this.draw(), 100);
}; };
var trackChanged = function() { var trackChanged = function () {
updateOptions(); updateOptions();
setVisibility(); setVisibility();
formBuilder.setOptions('group_columns_by', options, true); formBuilder.setOptions('group_columns_by', options, true);
...@@ -191,94 +192,96 @@ morpheus.ChartTool2 = function(chartOptions) { ...@@ -191,94 +192,96 @@ morpheus.ChartTool2 = function(chartOptions) {
formBuilder.$form.appendTo($configPane); formBuilder.$form.appendTo($configPane);
this.$el.appendTo($dialog); this.$el.appendTo($dialog);
$dialog.dialog({ $dialog.dialog({
close : function(event, ui) { close: function (event, ui) {
project.off('trackChanged.chart', trackChanged); project.off('trackChanged.chart', trackChanged);
project.getRowSelectionModel().off('selectionChanged.chart', draw); project.getRowSelectionModel().off('selectionChanged.chart', draw);
project.getColumnSelectionModel().off('selectionChanged.chart', project.getColumnSelectionModel().off('selectionChanged.chart',
draw); draw);
_this.$el.empty(); _this.$el.empty();
}, },
resizable : true,
height : 600, resizable: true,
width : 900 height: 600,
width: 900
}); });
this.$dialog = $dialog;
this.draw(); this.draw();
}; };
morpheus.ChartTool2.getPlotlyDefaults = function() { morpheus.ChartTool2.getPlotlyDefaults = function () {
var layout = { var layout = {
autosize : false, autosize: false,
paper_bgcolor : 'rgb(255,255,255)', paper_bgcolor: 'rgb(255,255,255)',
plot_bgcolor : 'rgb(229,229,229)', plot_bgcolor: 'rgb(229,229,229)',
showlegend : false, showlegend: false,
margin : { margin: {
l : 80, l: 80,
r : 0, r: 0,
t : 10, t: 10,
b : 14, b: 14,
autoexpand : true autoexpand: true
}, },
xaxis : { xaxis: {
zeroline : false, zeroline: false,
titlefont : { titlefont: {
size : 12 size: 12
}, },
gridcolor : 'rgb(255,255,255)', gridcolor: 'rgb(255,255,255)',
showgrid : true, showgrid: true,
showline : false, showline: false,
showticklabels : true, showticklabels: true,
tickcolor : 'rgb(127,127,127)', tickcolor: 'rgb(127,127,127)',
ticks : 'outside', ticks: 'outside',
type : 'linear' type: 'linear'
}, },
yaxis : { yaxis: {
zeroline : false, zeroline: false,
titlefont : { titlefont: {
size : 12 size: 12
}, },
gridcolor : 'rgb(255,255,255)', gridcolor: 'rgb(255,255,255)',
showgrid : true, showgrid: true,
showline : false, showline: false,
showticklabels : true, showticklabels: true,
tickcolor : 'rgb(127,127,127)', tickcolor: 'rgb(127,127,127)',
ticks : 'outside', ticks: 'outside',
type : 'linear' type: 'linear'
} }
}; };
var config = { var config = {
showLink : false, showLink: false,
displaylogo : false, displaylogo: false,
staticPlot : false, staticPlot: false,
showHints : true, showHints: true,
modeBarButtonsToRemove : [ 'sendDataToCloud' ] modeBarButtonsToRemove: ['sendDataToCloud']
}; };
return { return {
layout : layout, layout: layout,
config : config config: config
}; };
}; };
morpheus.ChartTool2.getVectorInfo = function(value) { morpheus.ChartTool2.getVectorInfo = function (value) {
var field = value.substring(0, value.length - 2); var field = value.substring(0, value.length - 2);
var isColumns = value.substring(value.length - 2) === '_c'; var isColumns = value.substring(value.length - 2) === '_c';
return { return {
field : field, field: field,
isColumns : isColumns isColumns: isColumns
}; };
}; };
morpheus.ChartTool2.prototype = { morpheus.ChartTool2.prototype = {
annotate : function(options) { annotate: function (options) {
var _this = this; var _this = this;
var formBuilder = new morpheus.FormBuilder(); var formBuilder = new morpheus.FormBuilder();
formBuilder.append({ formBuilder.append({
name : 'annotation_name', name: 'annotation_name',
type : 'text', type: 'text',
required : true required: true
}); });
formBuilder.append({ formBuilder.append({
name : 'annotation_value', name: 'annotation_value',
type : 'text', type: 'text',
required : true required: true
}); });
// formBuilder.append({ // formBuilder.append({
// name : 'annotate', // name : 'annotate',
...@@ -288,78 +291,78 @@ morpheus.ChartTool2.prototype = { ...@@ -288,78 +291,78 @@ morpheus.ChartTool2.prototype = {
// value : 'Rows' // value : 'Rows'
// }); // });
morpheus.FormBuilder morpheus.FormBuilder
.showOkCancel({ .showOkCancel({
title : 'Annotate Selection', title: 'Annotate Selection',
content : formBuilder.$form, content: formBuilder.$form,
okCallback : function() { okCallback: function () {
var dataset = options.dataset; var dataset = options.dataset;
var eventData = options.eventData; var eventData = options.eventData;
var array = options.array; var array = options.array;
var value = formBuilder.getValue('annotation_value'); var value = formBuilder.getValue('annotation_value');
var annotationName = formBuilder var annotationName = formBuilder
.getValue('annotation_name'); .getValue('annotation_name');
// var annotate = formBuilder.getValue('annotate'); // var annotate = formBuilder.getValue('annotate');
var isRows = true; var isRows = true;
var isColumns = true; var isColumns = true;
var existingRowVector = null; var existingRowVector = null;
var rowVector = null; var rowVector = null;
if (isRows) { if (isRows) {
existingRowVector = dataset.getRowMetadata() existingRowVector = dataset.getRowMetadata()
.getByName(annotationName); .getByName(annotationName);
rowVector = dataset.getRowMetadata().add( rowVector = dataset.getRowMetadata().add(
annotationName); annotationName);
} }
var existingColumnVector = null; var existingColumnVector = null;
var columnVector = null; var columnVector = null;
if (isColumns) { if (isColumns) {
existingColumnVector = dataset.getColumnMetadata() existingColumnVector = dataset.getColumnMetadata()
.getByName(annotationName); .getByName(annotationName);
columnVector = dataset.getColumnMetadata().add( columnVector = dataset.getColumnMetadata().add(
annotationName); annotationName);
} }
for (var p = 0, nselected = eventData.points.length; p < nselected; p++) {
var item = array[eventData.points[p].pointNumber];
if (isRows) {
if (_.isArray(item.row)) {
item.row.forEach(function(r) {
rowVector.setValue(r, value);
});
} else {
rowVector.setValue(item.row, value);
}
} for (var p = 0, nselected = eventData.points.length; p < nselected; p++) {
if (isColumns) { var item = array[eventData.points[p].pointNumber];
columnVector.setValue(item.column, value); if (isRows) {
} if (_.isArray(item.row)) {
} item.row.forEach(function (r) {
if (isRows) { rowVector.setValue(r, value);
morpheus.VectorUtil
.maybeConvertStringToNumber(rowVector);
_this.project.trigger('trackChanged', {
vectors : [ rowVector ],
render : existingRowVector != null ? []
: [ morpheus.VectorTrack.RENDER.TEXT ],
columns : false
});
}
if (isColumns) {
morpheus.VectorUtil
.maybeConvertStringToNumber(columnVector);
_this.project.trigger('trackChanged', {
vectors : [ columnVector ],
render : existingColumnVector != null ? []
: [ morpheus.VectorTrack.RENDER.TEXT ],
columns : true
}); });
} else {
rowVector.setValue(item.row, value);
} }
} }
}); if (isColumns) {
columnVector.setValue(item.column, value);
}
}
if (isRows) {
morpheus.VectorUtil
.maybeConvertStringToNumber(rowVector);
_this.project.trigger('trackChanged', {
vectors: [rowVector],
render: existingRowVector != null ? []
: [morpheus.VectorTrack.RENDER.TEXT],
columns: false
});
}
if (isColumns) {
morpheus.VectorUtil
.maybeConvertStringToNumber(columnVector);
_this.project.trigger('trackChanged', {
vectors: [columnVector],
render: existingColumnVector != null ? []
: [morpheus.VectorTrack.RENDER.TEXT],
columns: true
});
}
}
});
}, },
_createScatter : function(options) { _createScatter: function (options) {
var dataset = options.dataset; var dataset = options.dataset;
var colorByVector = options.colorByVector; var colorByVector = options.colorByVector;
var colorModel = options.colorModel; var colorModel = options.colorModel;
...@@ -368,7 +371,7 @@ morpheus.ChartTool2.prototype = { ...@@ -368,7 +371,7 @@ morpheus.ChartTool2.prototype = {
var heatmap = this.heatmap; var heatmap = this.heatmap;
var myPlot = options.myPlot; var myPlot = options.myPlot;
var isColumnScatter = options.isColumnScatter; var isColumnChart = options.isColumnChart;
// scatter // scatter
var x = []; var x = [];
var y = []; var y = [];
...@@ -381,31 +384,31 @@ morpheus.ChartTool2.prototype = { ...@@ -381,31 +384,31 @@ morpheus.ChartTool2.prototype = {
y.push(dataset.getValue(options.rowIndexOne, j)); y.push(dataset.getValue(options.rowIndexOne, j));
x.push(dataset.getValue(options.rowIndexTwo, j)); x.push(dataset.getValue(options.rowIndexTwo, j));
array.push({ array.push({
row : [ options.rowIndexOne, options.rowIndexTwo ], row: [options.rowIndexOne, options.rowIndexTwo],
column : j column: j
}); });
if (colorByVector) { if (colorByVector) {
var colorByValue = colorByVector.getValue(j); var colorByValue = colorByVector.getValue(j);
color.push(colorModel.getMappedValue(colorByVector, color.push(colorModel.getMappedValue(colorByVector,
colorByValue)); colorByValue));
} }
if (sizeByVector) { if (sizeByVector) {
var sizeByValue = sizeByVector.getValue(j); var sizeByValue = sizeByVector.getValue(j);
size.push(sizeFunction(sizeByValue)); size.push(sizeFunction(sizeByValue));
} }
var obj = { var obj = {
j : j j: j
}; };
obj.toString = function() { obj.toString = function () {
var trackNames = _this.getVisibleTrackNames(!isColumnScatter); var trackNames = _this.getVisibleTrackNames(!isColumnChart);
var s = []; var s = [];
for (var i = 0; i < trackNames.length; i++) { for (var i = 0; i < trackNames.length; i++) {
var v = dataset.getColumnMetadata() var v = dataset.getColumnMetadata()
.getByName(trackNames[i]); .getByName(trackNames[i]);
if (v) { if (v) {
morpheus.HeatMapTooltipProvider.vectorToString(v, morpheus.HeatMapTooltipProvider.vectorToString(v,
this.j, s, '<br>'); this.j, s, '<br>');
} }
} }
...@@ -417,62 +420,199 @@ morpheus.ChartTool2.prototype = { ...@@ -417,62 +420,199 @@ morpheus.ChartTool2.prototype = {
// TODO add R^2 // TODO add R^2
var trace = { var trace = {
x : x, x: x,
y : y, y: y,
marker : { marker: {
color : color, color: color,
size : size, size: size,
symbol : 'circle-open' symbol: 'circle-open'
}, },
text : text, text: text,
mode : 'markers', mode: 'markers',
type : 'scatter' // scattergl type: 'scatter' // scattergl
}; };
var selection = null; var selection = null;
var _this = this; var _this = this;
var config = $ var config = $
.extend( .extend(
true, true,
{}, {},
options.config, options.config,
{ {
modeBarButtonsToAdd : [ [ { modeBarButtonsToAdd: [[{
name : 'annotate', name: 'annotate',
title : 'Annotate Selection', title: 'Annotate Selection',
attr : 'dragmode', attr: 'dragmode',
val : 'annotate', val: 'annotate',
icon : { icon: {
'width' : 1792, 'width': 1792,
'path' : 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z', 'path': 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z',
'ascent' : 1792, 'ascent': 1792,
'descent' : 0 'descent': 0
}, },
click : function() { click: function () {
if (!selection) { if (!selection) {
morpheus.FormBuilder morpheus.FormBuilder
.showInModal({ .showInModal({
title : 'Annotate Selection', title: 'Annotate Selection',
html : 'Please select points in the chart', html: 'Please select points in the chart',
close : 'Close' close: 'Close'
}); });
} else { } else {
_this.annotate({ _this.annotate({
array : array, array: array,
eventData : selection, eventData: selection,
dataset : dataset dataset: dataset
}); });
} }
} }
} ] ] }]]
}); });
Plotly.newPlot(myPlot, [ trace ], options.layout, config); Plotly.newPlot(myPlot, [trace], options.layout, config);
myPlot.on('plotly_selected', function (eventData) {
selection = eventData;
});
},
_createProfile: function (options) {
var dataset = options.dataset;
// only allow coloring by row
var colorByVector = options.colorByVector;
var colorModel = options.colorModel;
var sizeByVector = options.sizeByVector;
var sizeFunction = options.sizeFunction;
var axisLabelVector = options.axisLabelVector;
var isColumnChart = options.isColumnChart;
var heatmap = this.heatmap;
var myPlot = options.myPlot;
var traces = [];
var ticktext = [];
var tickvals = [];
console.log(dataset.getRowCount(), dataset.getColumnCount());
for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) {
ticktext.push(axisLabelVector != null ? axisLabelVector.getValue(j) : '' + j);
tickvals.push(j);
}
for (var i = 0, nrows = dataset.getRowCount(); i < nrows; i++) {
// each row is a new trace
var x = [];
var y = [];
var text = [];
var size = sizeByVector ? [] : 6;
var color = colorByVector ? colorModel.getMappedValue(colorByVector,
colorByVector.getValue(i)) : undefined;
for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) {
x.push(j);
y.push(dataset.getValue(i, j));
myPlot.on('plotly_selected', function(eventData) { if (sizeByVector) {
var sizeByValue = sizeByVector.getValue(j);
size.push(sizeFunction(sizeByValue));
}
var obj = {
i: i,
j: j
};
obj.toString = function () {
var trackNames = _this.getVisibleTrackNames(!isColumnChart);
var s = [];
for (var i = 0; i < trackNames.length; i++) {
var v = dataset.getColumnMetadata()
.getByName(trackNames[i]);
if (v) {
morpheus.HeatMapTooltipProvider.vectorToString(v,
this.j, s, '<br>');
}
}
return s.join('');
};
text.push(obj);
}
var trace = {
x: x,
y: y,
name: colorByVector ? colorByVector.getValue(i) : '',
tickmode: 'array',
marker: {
size: size,
symbol: 'circle'
},
text: text,
mode: 'markers+lines',
type: 'scatter' // scattergl
};
traces.push(trace);
}
var selection = null;
var _this = this;
options.layout.xaxis.tickvals = tickvals;
options.layout.xaxis.ticktext = ticktext;
options.layout.xaxis.tickmode = 'array';
var config = $
.extend(
true,
{},
options.config,
{
modeBarButtonsToAdd: [[{
name: 'annotate',
title: 'Annotate Selection',
attr: 'dragmode',
val: 'annotate',
icon: {
'width': 1792,
'path': 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z',
'ascent': 1792,
'descent': 0
},
click: function () {
if (!selection) {
morpheus.FormBuilder
.showInModal({
title: 'Annotate Selection',
html: 'Please select points in the chart',
close: 'Close'
});
} else {
_this.annotate({
eventData: selection,
dataset: dataset
});
}
}
}]]
});
var $parent = $(myPlot).parent();
options.layout.width = $parent.width();
options.layout.height = this.$dialog.height() - 30;
Plotly.newPlot(myPlot, traces, options.layout, config);
myPlot.on('plotly_selected', function (eventData) {
selection = eventData; selection = eventData;
}); });
function resize() {
var width = $parent.width();
var height = _this.$dialog.height() - 30;
Plotly.relayout(myPlot, {
width: width,
height: height
});
}
this.$dialog.on('dialogresize', resize);
$(myPlot).on('remove', function () {
_this.$dialog.off('dialogresize');
});
}, },
_createBoxPlot : function(options) { _createBoxPlot: function (options) {
var array = options.array; // array of items var array = options.array; // array of items
var points = options.points; var points = options.points;
var colorByVector = options.colorByVector; var colorByVector = options.colorByVector;
...@@ -488,7 +628,7 @@ morpheus.ChartTool2.prototype = { ...@@ -488,7 +628,7 @@ morpheus.ChartTool2.prototype = {
var sizeFunction = options.sizeFunction; var sizeFunction = options.sizeFunction;
var sizeByGetter = options.sizeByGetter; var sizeByGetter = options.sizeByGetter;
var size = sizeFunction ? [] : 6; var size = sizeFunction ? [] : 6;
var scale = d3.scale.linear().domain([ 0, 1 ]).range([ -0.3, -1 ]); var scale = d3.scale.linear().domain([0, 1]).range([-0.3, -1]);
for (var k = 0, nitems = array.length; k < nitems; k++) { for (var k = 0, nitems = array.length; k < nitems; k++) {
var item = array[k]; var item = array[k];
y.push(dataset.getValue(item.row, item.column)); y.push(dataset.getValue(item.row, item.column));
...@@ -498,26 +638,26 @@ morpheus.ChartTool2.prototype = { ...@@ -498,26 +638,26 @@ morpheus.ChartTool2.prototype = {
if (colorByVector) { if (colorByVector) {
var colorByValue = colorByGetter(item); var colorByValue = colorByGetter(item);
color.push(colorModel.getMappedValue(colorByVector, color.push(colorModel.getMappedValue(colorByVector,
colorByValue)); colorByValue));
} }
if (sizeFunction) { if (sizeFunction) {
var sizeByValue = sizeByGetter(item); var sizeByValue = sizeByGetter(item);
size.push(sizeFunction(sizeByValue)); size.push(sizeFunction(sizeByValue));
} }
var obj = { var obj = {
row : item.row, row: item.row,
column : item.column column: item.column
}; };
obj.toString = function() { obj.toString = function () {
var s = []; var s = [];
var trackNames = _this.getVisibleTrackNames(true); var trackNames = _this.getVisibleTrackNames(true);
for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) { for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) {
var v = dataset.getColumnMetadata().getByName( var v = dataset.getColumnMetadata().getByName(
trackNames[trackIndex]); trackNames[trackIndex]);
if (v) { if (v) {
morpheus.HeatMapTooltipProvider.vectorToString(v, morpheus.HeatMapTooltipProvider.vectorToString(v,
this.column, s, '<br>'); this.column, s, '<br>');
} }
} }
...@@ -526,10 +666,10 @@ morpheus.ChartTool2.prototype = { ...@@ -526,10 +666,10 @@ morpheus.ChartTool2.prototype = {
for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) { for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) {
var v = dataset.getRowMetadata().getByName( var v = dataset.getRowMetadata().getByName(
trackNames[trackIndex]); trackNames[trackIndex]);
if (v) { if (v) {
morpheus.HeatMapTooltipProvider.vectorToString(v, morpheus.HeatMapTooltipProvider.vectorToString(v,
this.row, s, '<br>'); this.row, s, '<br>');
} }
} }
...@@ -541,73 +681,73 @@ morpheus.ChartTool2.prototype = { ...@@ -541,73 +681,73 @@ morpheus.ChartTool2.prototype = {
} }
var traces = [ { var traces = [{
name : '', name: '',
y : y, y: y,
type : 'box', type: 'box',
boxpoints : false boxpoints: false
} ]; }];
if (points) { if (points) {
traces.push({ traces.push({
name : '', name: '',
x : x, x: x,
y : y, y: y,
hoverinfo : 'y+text', hoverinfo: 'y+text',
mode : 'markers', mode: 'markers',
type : 'scatter', type: 'scatter',
text : text, text: text,
marker : { marker: {
symbol : 'circle-open', symbol: 'circle-open',
size : size, size: size,
color : color color: color
} }
}); });
} }
var selection = null; var selection = null;
var _this = this; var _this = this;
var config = $ var config = $
.extend( .extend(
true, true,
{}, {},
options.config, options.config,
{ {
modeBarButtonsToAdd : [ [ { modeBarButtonsToAdd: [[{
name : 'annotate', name: 'annotate',
title : 'Annotate Selection', title: 'Annotate Selection',
attr : 'dragmode', attr: 'dragmode',
val : 'annotate', val: 'annotate',
icon : { icon: {
'width' : 1792, 'width': 1792,
'path' : 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z', 'path': 'M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z',
'ascent' : 1792, 'ascent': 1792,
'descent' : 0 'descent': 0
}, },
click : function() { click: function () {
if (!selection) { if (!selection) {
morpheus.FormBuilder morpheus.FormBuilder
.showInModal({ .showInModal({
title : 'Annotate Selection', title: 'Annotate Selection',
html : 'Please select points in the chart', html: 'Please select points in the chart',
close : 'Close' close: 'Close'
}); });
} else { } else {
_this.annotate({ _this.annotate({
array : array, array: array,
eventData : selection, eventData: selection,
dataset : dataset dataset: dataset
}); });
} }
} }
} ] ] }]]
}); });
Plotly.newPlot(myPlot, traces, options.layout, config); Plotly.newPlot(myPlot, traces, options.layout, config);
myPlot.on('plotly_selected', function(eventData) { myPlot.on('plotly_selected', function (eventData) {
selection = eventData; selection = eventData;
}); });
}, },
draw : function() { draw: function () {
var _this = this; var _this = this;
this.$chart.empty(); this.$chart.empty();
var plotlyDefaults = morpheus.ChartTool2.getPlotlyDefaults(); var plotlyDefaults = morpheus.ChartTool2.getPlotlyDefaults();
...@@ -618,19 +758,19 @@ morpheus.ChartTool2.prototype = { ...@@ -618,19 +758,19 @@ morpheus.ChartTool2.prototype = {
var points = this.formBuilder.getValue('show_points'); var points = this.formBuilder.getValue('show_points');
var groupColumnsBy = this.formBuilder.getValue('group_columns_by'); var groupColumnsBy = this.formBuilder.getValue('group_columns_by');
var titleBy = this.formBuilder.getValue('axis_label'); var axisLabel = this.formBuilder.getValue('axis_label');
var colorBy = this.formBuilder.getValue('color'); var colorBy = this.formBuilder.getValue('color');
var sizeBy = this.formBuilder.getValue('size'); var sizeBy = this.formBuilder.getValue('size');
var groupRowsBy = this.formBuilder.getValue('group_rows_by'); var groupRowsBy = this.formBuilder.getValue('group_rows_by');
var chartType = this.formBuilder.getValue('chart_type'); var chartType = this.formBuilder.getValue('chart_type');
var dataset = this.project.getSelectedDataset({ var dataset = this.project.getSelectedDataset({
emptyToAll : false emptyToAll: false
}); });
this.dataset = dataset; this.dataset = dataset;
if (dataset.getRowCount() * dataset.getColumnCount() === 0) { if (dataset.getRowCount() * dataset.getColumnCount() === 0) {
$('<h4>Please select rows and columns in the heat map.</h4>') $('<h4>Please select rows and columns in the heat map.</h4>')
.appendTo(this.$chart); .appendTo(this.$chart);
return; return;
} }
if ((dataset.getRowCount() * dataset.getColumnCount()) > 100000) { if ((dataset.getRowCount() * dataset.getColumnCount()) > 100000) {
...@@ -638,56 +778,90 @@ morpheus.ChartTool2.prototype = { ...@@ -638,56 +778,90 @@ morpheus.ChartTool2.prototype = {
} }
var grid = []; var grid = [];
var rowIds = [ undefined ]; var rowIds = [undefined];
var columnIds = [ undefined ]; var columnIds = [undefined];
var items = []; var items = [];
var heatmap = this.heatmap; var heatmap = this.heatmap;
var colorByInfo = morpheus.ChartTool2.getVectorInfo(colorBy); var colorByInfo = morpheus.ChartTool2.getVectorInfo(colorBy);
var sizeByInfo = morpheus.ChartTool2.getVectorInfo(sizeBy); var sizeByInfo = morpheus.ChartTool2.getVectorInfo(sizeBy);
if (chartType === 'row scatter' || chartType === 'column scatter') { var colorModel = !colorByInfo.isColumns ? this.project.getRowColorModel()
: this.project.getColumnColorModel();
var axisLabelInfo = morpheus.ChartTool2.getVectorInfo(axisLabel);
var axisLabelVector = axisLabelInfo.isColumns ? dataset.getColumnMetadata().getByName(axisLabelInfo.field) : dataset.getRowMetadata().getByName(
axisLabelInfo.field);
var sizeByVector = sizeByInfo.isColumns ? dataset.getColumnMetadata().getByName(sizeByInfo.field) : dataset.getRowMetadata().getByName(
sizeByInfo.field);
var colorByVector = colorByInfo.isColumns ? dataset.getColumnMetadata().getByName(colorByInfo.field) : dataset.getRowMetadata().getByName(
colorByInfo.field);
var titleInfo = morpheus.ChartTool2.getVectorInfo(titleBy); var sizeByScale = null;
if (sizeByVector) {
var minMax = morpheus.VectorUtil.getMinMax(sizeByVector);
sizeByScale = d3.scale.linear().domain(
[minMax.min, minMax.max]).range([3, 16])
.clamp(true);
}
if (chartType === 'row profile' || chartType === 'column profile') {
var $chart = $('<div></div>');
var myPlot = $chart[0];
$chart.appendTo(this.$chart);
if (chartType === 'column profile') {
dataset = new morpheus.TransposedDatasetView(dataset);
}
this
._createProfile({
isColumnChart: chartType === 'column profile',
axisLabelVector: axisLabelVector,
colorByVector: colorByVector,
colorModel: colorModel,
sizeByVector: sizeByVector,
sizeFunction: sizeByScale,
myPlot: myPlot,
dataset: dataset,
config: config,
layout: $
.extend(
true,
{},
layout,
{
showlegend: true,
width: chartWidth,
height: chartHeight,
margin: {
b: 80
},
yaxis: {},
xaxis: {}
})
});
}
if (chartType === 'row scatter' || chartType === 'column scatter') {
var transpose = chartType === 'column scatter';
var isColumnScatter = chartType === 'column scatter'; if (transpose) {
if (isColumnScatter) {
dataset = new morpheus.TransposedDatasetView(dataset); dataset = new morpheus.TransposedDatasetView(dataset);
} }
if (dataset.getRowCount() > 15) { if (dataset.getRowCount() > 20) {
$('<h4>Maximum chart size exceeded.</h4>') $('<h4>Maximum chart size exceeded.</h4>')
.appendTo(this.$chart); .appendTo(this.$chart);
return; return;
} }
// title vector is always rows
var titleVector = dataset.getRowMetadata().getByName(
titleInfo.field);
// color vector is always columns
var colorByVector = dataset.getColumnMetadata().getByName(
colorByInfo.field);
var colorModel = isColumnScatter ? this.project.getRowColorModel()
: this.project.getColumnColorModel();
// size by vector is always columns
var sizeByVector = dataset.getColumnMetadata().getByName(
sizeByInfo.field);
// rowIndexOne is along rows of chart (y axis), rowIndexTwo along x // rowIndexOne is along rows of chart (y axis), rowIndexTwo along x
// axis // axis
var sizeByScale = null;
if (sizeByVector) { // draw grid
var minMax = morpheus.VectorUtil.getMinMax(sizeByVector);
sizeByScale = d3.scale.linear().domain(
[ minMax.min, minMax.max ]).range([ 3, 16 ])
.clamp(true);
}
for (var rowIndexOne = 0, nrows = dataset.getRowCount(); rowIndexOne < nrows; rowIndexOne++) { for (var rowIndexOne = 0, nrows = dataset.getRowCount(); rowIndexOne < nrows; rowIndexOne++) {
for (var rowIndexTwo = 0; rowIndexTwo < nrows; rowIndexTwo++) { for (var rowIndexTwo = 0; rowIndexTwo < nrows; rowIndexTwo++) {
if (rowIndexOne > rowIndexTwo) { if (rowIndexOne > rowIndexTwo) {
continue; continue;
} }
var $chart = $('<div style="width:' + chartWidth var $chart = $('<div style="width:' + chartWidth
+ 'px;height:' + chartHeight + 'px;height:' + chartHeight
+ 'px;position:absolute;left:' + 'px;position:absolute;left:'
+ (rowIndexTwo * chartWidth) + 'px;top:' + (rowIndexTwo * chartWidth) + 'px;top:'
+ (rowIndexOne * chartHeight) + 'px;"></div>'); + (rowIndexOne * chartHeight) + 'px;"></div>');
var myPlot = $chart[0]; var myPlot = $chart[0];
$chart.appendTo(this.$chart); $chart.appendTo(this.$chart);
...@@ -695,284 +869,281 @@ morpheus.ChartTool2.prototype = { ...@@ -695,284 +869,281 @@ morpheus.ChartTool2.prototype = {
var array = []; var array = [];
for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) { for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) {
array.push({ array.push({
row : rowIndexTwo, row: rowIndexTwo,
column : j column: j
}); });
} }
this this
._createBoxPlot({ ._createBoxPlot({
array : array, array: array,
points : points, points: points,
colorByVector : colorByVector, colorByVector: colorByVector,
colorModel : colorModel, colorModel: colorModel,
colorByGetter : function(item) { colorByGetter: function (item) {
return colorByVector return colorByVector
.getValue(item.column); .getValue(item.column);
}, },
sizeByGetter : function(item) { sizeByGetter: function (item) {
return sizeByVector return sizeByVector
.getValue(item.column); .getValue(item.column);
},
sizeFunction: sizeByScale,
myPlot: myPlot,
dataset: dataset,
config: config,
transposed: isColumns,
layout: $
.extend(
true,
{},
layout,
{
width: chartWidth,
height: chartHeight,
margin: {
b: 80
}, },
sizeFunction : sizeByScale, xaxis: {
myPlot : myPlot, title: axisLabelVector == null ? ''
dataset : dataset, : axisLabelVector
config : config, .getValue(rowIndexTwo),
transposed : isColumns, showticklabels: false
layout : $ }
.extend( })
true, });
{},
layout,
{
width : chartWidth,
height : chartHeight,
margin : {
b : 80
},
xaxis : {
title : titleVector == null ? ''
: titleVector
.getValue(rowIndexTwo),
showticklabels : false
}
})
});
} else { } else {
this this
._createScatter({ ._createScatter({
isColumnScatter : isColumnScatter, isColumnChart: transpose,
rowIndexOne : rowIndexOne, rowIndexOne: rowIndexOne,
rowIndexTwo : rowIndexTwo, rowIndexTwo: rowIndexTwo,
colorByVector : colorByVector, colorByVector: colorByVector,
colorModel : colorModel, colorModel: colorModel,
colorByGetter : function(item) { colorByGetter: function (item) {
return colorByVector return colorByVector
.getValue(item.column); .getValue(item.column);
},
sizeByVector: sizeByVector,
sizeFunction: sizeByScale,
myPlot: myPlot,
dataset: dataset,
config: config,
layout: $
.extend(
true,
{},
layout,
{
width: chartWidth,
height: chartHeight,
margin: {
b: 80
}, },
sizeByVector : sizeByVector, yaxis: {
sizeFunction : sizeByScale, title: axisLabelVector == null ? ''
myPlot : myPlot, : axisLabelVector
dataset : dataset, .getValue(rowIndexOne),
config : config, },
layout : $ xaxis: {
.extend( title: axisLabelVector == null ? ''
true, : axisLabelVector
{}, .getValue(rowIndexTwo)
layout, }
{ })
width : chartWidth, });
height : chartHeight,
margin : {
b : 80
},
yaxis : {
title : titleVector == null ? ''
: titleVector
.getValue(rowIndexOne),
},
xaxis : {
title : titleVector == null ? ''
: titleVector
.getValue(rowIndexTwo)
}
})
});
} }
} }
} }
return; } else if (chartType === 'boxplot') {
} for (var i = 0, nrows = dataset.getRowCount(); i < nrows; i++) {
for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) {
// boxplot items.push({
for (var i = 0, nrows = dataset.getRowCount(); i < nrows; i++) { row: i,
for (var j = 0, ncols = dataset.getColumnCount(); j < ncols; j++) { column: j
items.push({ });
row : i, }
column : j
});
} }
} var colorByInfo = morpheus.ChartTool2.getVectorInfo(colorBy);
var colorByInfo = morpheus.ChartTool2.getVectorInfo(colorBy); var colorByVector = colorByInfo.isColumns ? dataset.getColumnMetadata()
var colorByVector = colorByInfo.isColumns ? dataset.getColumnMetadata() .getByName(colorByInfo.field) : dataset.getRowMetadata()
.getByName(colorByInfo.field) : dataset.getRowMetadata() .getByName(colorByInfo.field);
.getByName(colorByInfo.field);
var colorModel = !colorByInfo.isColumns ? this.project
var colorModel = !colorByInfo.isColumns ? this.project .getRowColorModel() : this.project.getColumnColorModel();
.getRowColorModel() : this.project.getColumnColorModel(); var colorByGetter = colorByInfo.isColumns ? function (item) {
var colorByGetter = colorByInfo.isColumns ? function(item) { return colorByVector.getValue(item.column);
return colorByVector.getValue(item.column); } : function (item) {
} : function(item) { return colorByVector.getValue(item.row);
return colorByVector.getValue(item.row); };
}; var sizeByVector = sizeByInfo.isColumns ? dataset.getColumnMetadata()
var sizeByVector = sizeByInfo.isColumns ? dataset.getColumnMetadata() .getByName(sizeByInfo.field) : dataset.getRowMetadata()
.getByName(sizeByInfo.field) : dataset.getRowMetadata() .getByName(sizeByInfo.field);
.getByName(sizeByInfo.field); var sizeByGetter = sizeByInfo.isColumns ? function (item) {
var sizeByGetter = sizeByInfo.isColumns ? function(item) { return sizeByVector.getValue(item.column);
return sizeByVector.getValue(item.column); } : function (item) {
} : function(item) { return sizeByVector.getValue(item.row);
return sizeByVector.getValue(item.row); };
}; var sizeByScale = null;
var sizeByScale = null; if (sizeByVector) {
if (sizeByVector) { var minMax = morpheus.VectorUtil.getMinMax(sizeByVector);
var minMax = morpheus.VectorUtil.getMinMax(sizeByVector); sizeByScale = d3.scale.linear().domain([minMax.min, minMax.max])
sizeByScale = d3.scale.linear().domain([ minMax.min, minMax.max ]) .range([3, 16]).clamp(true);
.range([ 3, 16 ]).clamp(true); }
} if (groupColumnsBy || groupRowsBy) {
if (groupColumnsBy || groupRowsBy) { var rowIdToArray = new morpheus.Map();
var rowIdToArray = new morpheus.Map(); if (groupRowsBy) {
if (groupRowsBy) { var groupRowsByInfo = morpheus.ChartTool2
var groupRowsByInfo = morpheus.ChartTool2 .getVectorInfo(groupRowsBy);
.getVectorInfo(groupRowsBy); var vector = groupRowsByInfo.isColumns ? dataset
var vector = groupRowsByInfo.isColumns ? dataset .getColumnMetadata().getByName(groupRowsByInfo.field)
.getColumnMetadata().getByName(groupRowsByInfo.field)
: dataset.getRowMetadata().getByName( : dataset.getRowMetadata().getByName(
groupRowsByInfo.field); groupRowsByInfo.field);
var getter = groupRowsByInfo.isColumns ? function(item) { var getter = groupRowsByInfo.isColumns ? function (item) {
return vector.getValue(item.column); return vector.getValue(item.column);
} : function(item) { } : function (item) {
return vector.getValue(item.row); return vector.getValue(item.row);
}; };
for (var i = 0, nitems = items.length; i < nitems; i++) { for (var i = 0, nitems = items.length; i < nitems; i++) {
var item = items[i]; var item = items[i];
var value = getter(item); var value = getter(item);
var array = rowIdToArray.get(value); var array = rowIdToArray.get(value);
if (array == undefined) { if (array == undefined) {
array = []; array = [];
rowIdToArray.set(value, array); rowIdToArray.set(value, array);
}
array.push(item);
} }
array.push(item); } else {
rowIdToArray.set(undefined, items);
} }
} else {
rowIdToArray.set(undefined, items);
}
if (groupColumnsBy) { if (groupColumnsBy) {
var name = groupColumnsBy.substring(0, var name = groupColumnsBy.substring(0,
groupColumnsBy.length - 2); groupColumnsBy.length - 2);
var isColumns = groupColumnsBy var isColumns = groupColumnsBy
.substring(groupColumnsBy.length - 2) === '_c'; .substring(groupColumnsBy.length - 2) === '_c';
var vector = isColumns ? dataset.getColumnMetadata().getByName( var vector = isColumns ? dataset.getColumnMetadata().getByName(
name) : dataset.getRowMetadata().getByName(name); name) : dataset.getRowMetadata().getByName(name);
var getter = isColumns ? function(item) { var getter = isColumns ? function (item) {
return vector.getValue(item.column); return vector.getValue(item.column);
} : function(item) { } : function (item) {
return vector.getValue(item.row); return vector.getValue(item.row);
}; };
var columnIdToIndex = new morpheus.Map();
var rowIndex = 0;
rowIdToArray.forEach(function (array, id) {
grid[rowIndex] = [];
for (var i = 0, nitems = array.length; i < nitems; i++) {
var item = array[i];
var value = getter(item);
var columnIndex = columnIdToIndex.get(value);
if (columnIndex === undefined) {
columnIndex = columnIdToIndex.size();
columnIdToIndex.set(value, columnIndex);
}
if (grid[rowIndex][columnIndex] === undefined) {
grid[rowIndex][columnIndex] = [];
}
var columnIdToIndex = new morpheus.Map(); grid[rowIndex][columnIndex].push(item);
var rowIndex = 0;
rowIdToArray.forEach(function(array, id) {
grid[rowIndex] = [];
for (var i = 0, nitems = array.length; i < nitems; i++) {
var item = array[i];
var value = getter(item);
var columnIndex = columnIdToIndex.get(value);
if (columnIndex === undefined) {
columnIndex = columnIdToIndex.size();
columnIdToIndex.set(value, columnIndex);
}
if (grid[rowIndex][columnIndex] === undefined) {
grid[rowIndex][columnIndex] = [];
} }
rowIds[rowIndex] = id;
grid[rowIndex][columnIndex].push(item); rowIndex++;
} });
rowIds[rowIndex] = id; columnIdToIndex.forEach(function (index, id) {
rowIndex++; columnIds[index] = id;
}); });
columnIdToIndex.forEach(function(index, id) {
columnIds[index] = id; } else {
}); var rowIndex = 0;
rowIdToArray.forEach(function (array, id) {
grid[rowIndex] = [array];
rowIds[rowIndex] = id;
rowIndex++;
});
}
} else { } else {
var rowIndex = 0; grid = [[items]];
rowIdToArray.forEach(function(array, id) {
grid[rowIndex] = [ array ];
rowIds[rowIndex] = id;
rowIndex++;
});
} }
} else { var gridRowCount = rowIds.length;
grid = [ [ items ] ]; var gridColumnCount = columnIds.length;
}
for (var i = 0; i < gridRowCount; i++) {
var gridRowCount = rowIds.length; var rowId = rowIds[i];
var gridColumnCount = columnIds.length; var yrange = [Number.MAX_VALUE, -Number.MAX_VALUE];
if (chartType === 'boxplot') {
for (var j = 0; j < gridColumnCount; j++) {
var array = grid[i][j];
if (array) {
for (var k = 0, nitems = array.length; k < nitems; k++) {
var item = array[k];
var value = dataset.getValue(item.row, item.column);
if (!isNaN(value)) {
yrange[0] = Math.min(yrange[0], value);
yrange[1] = Math.max(yrange[1], value);
}
for (var i = 0; i < gridRowCount; i++) {
var rowId = rowIds[i];
var yrange = [ Number.MAX_VALUE, -Number.MAX_VALUE ];
if (chartType === 'boxplot') {
for (var j = 0; j < gridColumnCount; j++) {
var array = grid[i][j];
if (array) {
for (var k = 0, nitems = array.length; k < nitems; k++) {
var item = array[k];
var value = dataset.getValue(item.row, item.column);
if (!isNaN(value)) {
yrange[0] = Math.min(yrange[0], value);
yrange[1] = Math.max(yrange[1], value);
} }
} }
} }
// for now increase range by 1%
var span = yrange[1] - yrange[0];
var delta = (span * 0.01);
yrange[1] += delta;
yrange[0] -= delta;
} }
// for now increase range by 1% for (var j = 0; j < gridColumnCount; j++) {
var span = yrange[1] - yrange[0]; var array = grid[i][j];
var delta = (span * 0.01); var columnId = columnIds[j];
yrange[1] += delta; if (array) {
yrange[0] -= delta;
}
for (var j = 0; j < gridColumnCount; j++) {
var array = grid[i][j];
var columnId = columnIds[j];
if (array) {
var $chart = $('<div style="width:' + chartWidth var $chart = $('<div style="width:' + chartWidth
+ 'px;height:' + chartHeight + 'px;height:' + chartHeight
+ 'px;position:absolute;left:' + (j * chartWidth) + 'px;position:absolute;left:' + (j * chartWidth)
+ 'px;top:' + (i * chartHeight) + 'px;"></div>'); + 'px;top:' + (i * chartHeight) + 'px;"></div>');
$chart.appendTo(this.$chart); $chart.appendTo(this.$chart);
var myPlot = $chart[0]; var myPlot = $chart[0];
if (chartType === 'boxplot') { if (chartType === 'boxplot') {
this._createBoxPlot({ this._createBoxPlot({
layout : $.extend(true, {}, layout, { layout: $.extend(true, {}, layout, {
width : chartWidth, width: chartWidth,
height : chartHeight, height: chartHeight,
yaxis : { yaxis: {
range : yrange, range: yrange,
title : rowId, title: rowId,
}, },
xaxis : { xaxis: {
title : columnId, title: columnId,
showticklabels : false showticklabels: false
} }
}), }),
array : array, array: array,
points : points, points: points,
sizeByGetter : sizeByGetter, sizeByGetter: sizeByGetter,
sizeFunction : sizeByScale, sizeFunction: sizeByScale,
colorModel : colorModel, colorModel: colorModel,
colorByVector : colorByVector, colorByVector: colorByVector,
colorByGetter : colorByGetter, colorByGetter: colorByGetter,
myPlot : myPlot, myPlot: myPlot,
dataset : dataset, dataset: dataset,
config : config config: config
}); });
} }
}
} }
} }
} }
} }
}; };
\ No newline at end of file
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