Skip to content

[ZEPPELIN-997] Export data to csv #1008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
minahlee wants to merge 4 commits into from
Closed

[ZEPPELIN-997] Export data to csv #1008

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ad6f47
Export data to csv
minahlee Jun 13, 2016
5437c4f
Use split button dropdowns for downloading data
minahlee Jun 14, 2016
e48c303
Fix integration test after adding csv download button
minahlee Jun 14, 2016
dabb603
Add tooltip and change style for dropdown button
minahlee Jun 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,21 @@
ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
</button>
</div>
<span>
<button type="button" class="btn btn-default btn-sm" style="margin-left:10px"
tooltip="Download Data as TSV" tooltip-placement="bottom"
ng-click="exportToTSV()"><i class="fa fa-download"></i>
<span class="btn-group">
<button type="button" class="btn btn-default btn-sm"
style="margin-left:10px"

@corneadoug corneadoug Jun 14, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you restore the tooltip on the main button? (with CSV instead of TSV)

ng-click="exportToDSV(',')">
<i class="fa fa-download"></i>
</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle"

@corneadoug corneadoug Jun 14, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Button size change when the tooltip comes out because of some bootstrap CSS.

you might need to add a new class to this element, something like that would do:

.caretBtn {
    padding-right: 4px !important;
    padding-left: 4px !important;
    width: 20px;
}

It will also reduce the width of the caret button
screen shot 2016-06-14 at 4 28 11 pm

data-toggle="dropdown">
<span class="caret" style="margin: 0px;"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 70px;">
<li ng-click="exportToDSV(',')"><a>CSV</a></li>
<li ng-click="exportToDSV('\t')"><a>TSV</a></li>
</ul>
</span>
<span ng-if="getGraphMode()!='table'"
style="margin-left:5px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
Expand Down
22 changes: 14 additions & 8 deletions zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2145,21 +2145,27 @@ angular.module('zeppelinWebApp')
$scope.keepScrollDown = false;
};

$scope.exportToTSV = function () {
$scope.exportToDSV = function (delimiter) {
var data = $scope.paragraph.result;
var tsv = '';
var dsv = '';
for (var titleIndex in $scope.paragraph.result.columnNames) {
tsv += $scope.paragraph.result.columnNames[titleIndex].name + '\t';
dsv += $scope.paragraph.result.columnNames[titleIndex].name + delimiter;
}
tsv = tsv.substring(0, tsv.length - 1) + '\n';
dsv = dsv.substring(0, dsv.length - 1) + '\n';
for (var r in $scope.paragraph.result.msgTable) {
var row = $scope.paragraph.result.msgTable[r];
var tsvRow = '';
var dsvRow = '';
for (var index in row) {
tsvRow += row[index].value + '\t';
dsvRow += row[index].value + delimiter;
}
tsv += tsvRow.substring(0, tsvRow.length - 1) + '\n';
dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
}
SaveAsService.SaveAs(tsv, 'data', 'tsv');
var extension = '';
if (delimiter === '\t') {
extension = 'tsv';

@felixcheung felixcheung Jun 14, 2016

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is likely out of scope for this change, for csv (likely tsv), strictly speaking we would need to escape any , in the data:
https://en.wikipedia.org/wiki/Comma-separated_values#General_functionality
otherwise when the data is read it will be misaligned.

} else if (delimiter === ',') {
extension = 'csv';
}
SaveAsService.SaveAs(dsv, 'data', extension);
};
});
4 changes: 0 additions & 4 deletions zeppelin-web/src/app/notebook/paragraph/paragraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,10 +449,6 @@ table.dataTable.table-condensed .sorting_desc:after {
font-weight: 500;
}

.dropdown-menu > li:first-child > a:hover {
background-color: transparent;
}

table.table-striped {
border-top: 1px solid #ddd;
margin-top: 20px;
Expand Down