diff --git a/src/tools/chart_tool2.js b/src/tools/chart_tool2.js index 41ed3ca71b27dad91b055b181c96e0235d79e01c..8417ccc564fe5cfbd53693b2deb580c1df665b5a 100644 --- a/src/tools/chart_tool2.js +++ b/src/tools/chart_tool2.js @@ -21,7 +21,7 @@ morpheus.ChartTool2 = function (chartOptions) { this.formBuilder = formBuilder; formBuilder.append({ name: 'chart_type', - type: 'select', + type: 'bootstrap-select', options: ['boxplot', 'row scatter', 'column scatter', 'row profile', 'column profile'] }); var rowOptions = []; @@ -105,18 +105,18 @@ morpheus.ChartTool2 = function (chartOptions) { updateOptions(); formBuilder.append({ name: 'group_columns_by', - type: 'select', + type: 'bootstrap-select', options: options }); formBuilder.append({ name: 'group_rows_by', - type: 'select', + type: 'bootstrap-select', options: options }); formBuilder.append({ name: 'axis_label', - type: 'select', + type: 'bootstrap-select', options: rowOptions }); formBuilder.append({ @@ -127,20 +127,26 @@ morpheus.ChartTool2 = function (chartOptions) { formBuilder.append({ name: 'color', - type: 'select', + type: 'bootstrap-select', options: options }); formBuilder.append({ name: 'size', - type: 'select', + type: 'bootstrap-select', options: numericOptions }); + formBuilder.append({ + name: 'tooltip', + type: 'bootstrap-select', + multiple: true, + search: true, + options: options.slice(1) + }); function setVisibility() { // 'boxplot', 'row scatter', 'column scatter', 'row profile', 'column profile' var chartType = formBuilder.getValue('chart_type'); - formBuilder.setVisible('group_rows_by', chartType === 'boxplot'); formBuilder.setVisible('group_columns_by', chartType === 'boxplot'); if (chartType !== 'boxplot') { @@ -162,9 +168,21 @@ morpheus.ChartTool2 = function (chartOptions) { } - formBuilder.$form.find('select').on('change', function () { - setVisibility(); - _this.draw(); + this.tooltip = []; + formBuilder.$form.find('select').on('change', function (e) { + if ($(this).attr('name') === 'tooltip') { + var tooltipVal = _this.formBuilder.getValue('tooltip'); + _this.tooltip = []; + if (tooltipVal != null) { + tooltipVal.forEach(function (tip) { + _this.tooltip.push(morpheus.ChartTool2.getVectorInfo(tip)); + }); + } + } else { + setVisibility(); + _this.draw(); + } + }); formBuilder.$form.find('input').on('click', function () { _this.draw(); @@ -400,18 +418,15 @@ morpheus.ChartTool2.prototype = { 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, + for (var tipIndex = 0; tipIndex < _this.tooltip.length; tipIndex++) { + var tip = _this.tooltip[tipIndex]; + if (tip.isColumns) { + morpheus.HeatMapTooltipProvider.vectorToString(dataset.getColumnMetadata().getByName(tip.field), this.j, s, '
'); } - } + return s.join(''); }; @@ -489,7 +504,6 @@ morpheus.ChartTool2.prototype = { 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); @@ -516,21 +530,22 @@ morpheus.ChartTool2.prototype = { 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, + for (var tipIndex = 0; tipIndex < _this.tooltip.length; tipIndex++) { + var tip = _this.tooltip[tipIndex]; + if (tip.isColumns) { + morpheus.HeatMapTooltipProvider.vectorToString(dataset.getColumnMetadata().getByName(tip.field), this.j, s, '
'); + } else { + morpheus.HeatMapTooltipProvider.vectorToString(dataset.getRowMetadata().getByName(tip.field), + this.i, s, '
'); } - } + return s.join(''); }; + text.push(obj); } var trace = { @@ -635,7 +650,6 @@ morpheus.ChartTool2.prototype = { var item = array[k]; y.push(dataset.getValue(item.row, item.column)); if (points) { - x.push(scale(Math.random())); if (colorByVector) { var colorByValue = colorByGetter(item); @@ -647,34 +661,22 @@ morpheus.ChartTool2.prototype = { size.push(sizeFunction(sizeByValue)); } var obj = { - row: item.row, - column: item.column + i: item.row, + j: item.column }; obj.toString = function () { var s = []; - var trackNames = _this.getVisibleTrackNames(true); - - for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) { - var v = dataset.getColumnMetadata().getByName( - trackNames[trackIndex]); - if (v) { - morpheus.HeatMapTooltipProvider.vectorToString(v, - this.column, s, '
'); + for (var tipIndex = 0; tipIndex < _this.tooltip.length; tipIndex++) { + var tip = _this.tooltip[tipIndex]; + if (tip.isColumns) { + morpheus.HeatMapTooltipProvider.vectorToString(dataset.getColumnMetadata().getByName(tip.field), + this.j, s, '
'); + } else { + morpheus.HeatMapTooltipProvider.vectorToString(dataset.getRowMetadata().getByName(tip.field), + this.i, s, '
'); } - } - trackNames = _this.getVisibleTrackNames(false); - - for (var trackIndex = 0; trackIndex < trackNames.length; trackIndex++) { - var v = dataset.getRowMetadata().getByName( - trackNames[trackIndex]); - if (v) { - morpheus.HeatMapTooltipProvider.vectorToString(v, - this.row, s, '
'); - } - - } return s.join(''); };