Skip to content

Commit

Permalink
Feature/export to csv (#12)
Browse files Browse the repository at this point in the history
* Add export to csv functionality

- Using utils/export
- Copied from the business-index-ui

* Add config/export with name of CSV

* Add export to JSON button to ResultsTable
  • Loading branch information
ONS-Tom authored and ONS-Anthony committed Nov 20, 2017
1 parent ce98ca0 commit 8424764
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 1 deletion.
12 changes: 11 additions & 1 deletion src/components/ResultsTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import 'react-table/react-table.css';
import SummaryTable from '../components/SummaryTable';
import ChildRefTable from '../components/ChildRefTable';
import { employmentBands, legalStatusBands, tradingStatusBands, turnoverBands } from '../utils/convertBands';
import { downloadCSV, downloadJSON } from '../utils/export';

const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, convertBands }) => {
return (
Expand Down Expand Up @@ -63,7 +64,16 @@ const ResultsTable = ({ results, showFilter, showPagination, defaultPageSize, co
);
}}
/>
<br /><br />
<br />
<div className="sdc-isolation">
<div className="summary">
<h2 className="summary__title saturn" id="">Export Results</h2>
<button className="btn btn--secondary" onClick={() => downloadCSV(results)}>Save as CSV</button>
&nbsp;
<button className="btn btn--secondary" onClick={() => downloadJSON(results)}>Save as JSON</button>
</div>
</div>
<br />
<SummaryTable
title="Useful Information"
items={[
Expand Down
5 changes: 5 additions & 0 deletions src/config/export.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const exportCsv = {
NAME: 'BusinessIndexResults',
};

export default exportCsv;
47 changes: 47 additions & 0 deletions src/utils/export.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import config from '../config/export';

const { NAME } = config;

export function exportCSV(header, results) {
const columnNames = ['id', 'businessName', 'postCode', 'industryCode', 'legalStatus', 'tradingStatus', 'turnover', 'employmentBands', 'companyNo'];
let CSV = '';
CSV += `${header}\r\n`; // Firstly, insert the header
// Go through the results, putting them in the CSV string
for (let i = 0; i < results.length; i += 1) {
let row = '';
// If there is missing data, insert an empty string
for (let j = 0; j < columnNames.length; j += 1) {
if (results[i][columnNames[j]] === undefined) {
row += '"",';
} else {
row += `"${results[i][columnNames[j]]}",`;
}
}
CSV += `${row}\r\n`;
}
return CSV;
}

export function downloadCSV(results) {
const header = 'UBRN,Business Name,PostCode,Industry Code,Legal Status,Trading Status,Turnover,Employment,Company Reference Number';
const csv = exportCSV(header, results, NAME);
const uri = `data:text/csv;charset=utf-8,${escape(csv)}`;
const link = document.createElement('a');
link.href = uri;
const filename = `${NAME}.csv`;
link.download = filename;
// Below append/remove child is to ensure the download button works on
// Firefox, link.click()
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

export function downloadJSON(results) {
const jsonStr = JSON.stringify(results, null, 2);
const uri = `data:text/json;charset=utf-8,${escape(jsonStr)}`;
const link = document.createElement('a');
link.href = uri;
link.download = `${NAME}.json`;
link.click();
}

0 comments on commit 8424764

Please sign in to comment.