#459: Export task to CSV

unitaryfund · Mar 7, 2022 · 7c60dd4 · 7c60dd4
1 parent 577fd13
commit 7c60dd4
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
     "chart.js": "^3.7.1",
     "chartjs-adapter-moment": "^1.0.0",
     "chartjs-plugin-datalabels": "^2.0.0",
+    "export-to-csv": "^0.2.1",
+    "export-to-csv-fix-source-map": "^0.2.1",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
     "rc-table": "^7.17.1",

diff --git a/src/views/Task.js b/src/views/Task.js
@@ -15,6 +15,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import SotaChart from '../components/SotaChart'
 import { FacebookShareButton, TwitterShareButton, FacebookIcon, TwitterIcon } from 'react-share'
 import moment from 'moment'
+import { ExportToCsv } from 'export-to-csv'
 
 library.add(faEdit)
 
@@ -29,6 +30,7 @@ class Task extends React.Component {
       item: { submissions: [], childTasks: [], parentTask: {} },
       allTaskNames: [],
       results: [],
+      resultsJson: [],
       chartData: {},
       chartKey: '',
       metricNames: [],
@@ -41,6 +43,7 @@ class Task extends React.Component {
     this.handleOnChange = this.handleOnChange.bind(this)
     this.handleTrimTasks = this.handleTrimTasks.bind(this)
     this.sliceChartData = this.sliceChartData.bind(this)
+    this.handleCsvExport = this.handleCsvExport.bind(this)
   }
 
   handleShowEditModal () {
@@ -150,7 +153,17 @@ class Task extends React.Component {
             return 0
           }
         })
-        this.setState({ results: results })
+        const resultsJson = results.map(row =>
+          ({
+            key: row.id,
+            submissionId: this.state.item.submissions.find(e => e.name === row.submissionName).id,
+            name: row.submissionName,
+            methodName: row.methodName,
+            metricName: row.metricName,
+            metricValue: row.metricValue,
+            tableDate: row.evaluatedAt ? new Date(row.evaluatedAt).toLocaleDateString() : new Date(row.createdAt).toLocaleDateString()
+          }))
+        this.setState({ results: results, resultsJson: resultsJson })
         this.sliceChartData(results)
       })
       .catch(err => {
@@ -225,6 +238,22 @@ class Task extends React.Component {
     this.setState({ metricNames: metricNames, chartKey: chartKey, chartData: chartData, isLowerBetterDict: isLowerBetterDict })
   }
 
+  handleCsvExport () {
+    const options = {
+      filename: this.state.item.name,
+      fieldSeparator: ',',
+      quoteStrings: '"',
+      decimalSeparator: '.',
+      showLabels: true,
+      showTitle: false,
+      useTextFile: false,
+      useBom: true,
+      useKeysAsHeaders: true
+    }
+    const csvExporter = new ExportToCsv(options)
+    csvExporter.generateCsv(this.state.resultsJson)
+  }
+
   render () {
     return (
       <div id='metriq-main-content'>
@@ -357,7 +386,7 @@ class Task extends React.Component {
               </div>
               <br />
               {(this.state.results.length > 0) &&
-                <h2>Results</h2>}
+                <h2>Results <button className='btn btn-primary' onClick={this.handleCsvExport}>Export to CSV</button></h2>}
               {(this.state.results.length > 0) &&
                 <div className='row'>
                   <div className='col-md-12'>
@@ -393,16 +422,7 @@ class Task extends React.Component {
                         key: 'metricValue',
                         width: 300
                       }]}
-                      data={this.state.results.map(row =>
-                        ({
-                          key: row.id,
-                          submissionId: this.state.item.submissions.find(e => e.name === row.submissionName).id,
-                          name: row.submissionName,
-                          methodName: row.methodName,
-                          metricName: row.metricName,
-                          metricValue: row.metricValue,
-                          tableDate: row.evaluatedAt ? new Date(row.evaluatedAt).toLocaleDateString() : new Date(row.createdAt).toLocaleDateString()
-                        }))}
+                      data={this.state.resultsJson}
                       onRow={(record) => ({
                         onClick () { window.location.href = '/Submission/' + record.submissionId }
                       })}