Merge pull request #88 from sbv-world-health-org-metrics/ajhenry/cvs-…

…download Add csv download button
github-community-projects · Jan 24, 2024 · ad4d300 · ad4d300
2 parents 3b06686 + de09b1d
commit ad4d300
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/who-metrics-ui/package-lock.json b/who-metrics-ui/package-lock.json
diff --git a/who-metrics-ui/package.json b/who-metrics-ui/package.json
@@ -22,7 +22,9 @@
     "@vercel/analytics": "^0.1.10",
     "autoprefixer": "^10.4.13",
     "eslint-config-next": "^13.2.0",
+    "file-saver": "^2.0.5",
     "js-cookie": "^3.0.1",
+    "json-2-csv": "^5.0.1",
     "kysely": "^0.23.4",
     "kysely-planetscale": "^1.3.0",
     "next": "^13.2.0",
@@ -41,6 +43,7 @@
   },
   "homepage": "https://sbv-world-health-org-metrics.github.io/sbv-world-health-org-metrics/",
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/glob": "^8.1.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",

diff --git a/who-metrics-ui/src/components/RepositoriesTable.tsx b/who-metrics-ui/src/components/RepositoriesTable.tsx
@@ -14,13 +14,15 @@ import {
   Tooltip
 } from '@primer/react';
 import { Text } from '@tremor/react';
+import { json2csv } from 'json-2-csv';
 import DataGrid, {
   Column,
   type RenderHeaderCellProps,
   type SortColumn
 } from 'react-data-grid';
 import { Popover } from 'react-tiny-popover';
 
+import { saveAs } from 'file-saver';
 import {
   createContext,
   FC,
@@ -30,6 +32,7 @@ import {
   useState
 } from 'react';
 import Data from '../data/data.json';
+
 const repos = Object.values(Data['repositories']);
 type Repo = (typeof repos)[0];
 
@@ -388,6 +391,12 @@ const defaultFilters: Filter = {
   },
 };
 
+// Helper for generating the csv blob
+const generateCSV = (data: Repo[]): Blob => {
+  const output = json2csv(data);
+  return new Blob([output], { type: 'text/csv' });
+};
+
 const RepositoriesTable = () => {
   const [globalFilters, setGlobalFilters] = useState<Filter>(defaultFilters);
 
@@ -617,6 +626,8 @@ const RepositoriesTable = () => {
     [globalFilters],
   );
 
+  const displayRows = filterRepos(sortRepos(repos));
+
   return (
     <div className="h-full flex flex-col">
       <div className="py-2">
@@ -627,7 +638,7 @@ const RepositoriesTable = () => {
             </Tooltip>
             <Text>{subTitle()}</Text>
           </div>
-          <div>
+          <div className="flex flex-row items-center space-x-2">
             <Button
               variant="invisible"
               onClick={() => {
@@ -637,6 +648,14 @@ const RepositoriesTable = () => {
             >
               Clear All Filters
             </Button>
+            <Button
+              variant="invisible"
+              onClick={() => {
+                saveAs(generateCSV(displayRows), "output.csv");
+              }}
+            >
+              Download CSV
+            </Button>
           </div>
         </div>
       </div>
@@ -645,7 +664,7 @@ const RepositoriesTable = () => {
         <div className="h-64 flex-grow">
           <DataGrid
             columns={dataGridColumns}
-            rows={filterRepos(sortRepos(repos))}
+            rows={displayRows}
             rowKeyGetter={(repo) => repo.repoName}
             defaultColumnOptions={{
               sortable: true,