BL-823_fe_i_want_export_raw-data

package.json

@@ -23,9 +23,11 @@
     "@reduxjs/toolkit": "^1.8.2",
     "antd": "^4.18.4",
     "axios": "^0.21.1",
+    "axios-progress-bar": "^1.2.0",
     "craco-less": "^1.20.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
+    "js-file-download": "^0.4.12",
     "plotly.js": "^1.54.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/Layout/Footer.jsx

@@ -1,10 +1,25 @@
-import { Button, Space, Typography, Layout, Image } from 'antd';
 import React from 'react';
+import { Button, Space, Typography, Layout, Image } from 'antd';
 import Logo from '../../styles/Images/WhiteLogo.png';
+import { DownloadButton } from '../common/DownloadButton'
+import '../../styles/styles.css'
+
 const { Text } = Typography;
 function FooterContent() {
+
+  const downloadBtnInfo = {
+    BTN_TXT:'Download all data',
+    MSG_LOADING:'Downloading all data...',
+    DOWNLOAD_TXT:'downloading CSV file',
+    MSG_DOWNLOAD_FINISHED:'Downloading finished',
+    STYLING:{background: '#404C4A', color:'#FFFFFF' , borderColor:'#8D8D99'}
+  }
+
   return (
     <div>
+      <div className='download-btn-container'>
+        <DownloadButton className='download-btn' downloadBtnInfo={downloadBtnInfo} />
+      </div>
       {/*logo*/}
       <div>
         <Image width={100} src={Logo} preview={false} alt="HRF logo white" />
@@ -32,7 +47,7 @@ function FooterContent() {
 function SubFooter() {
   const { Footer } = Layout;
   return (
-    <Footer style={{ backgroundColor: '#403737' }}>
+    <Footer style={{ backgroundColor: '#404C4A' }}>
       <Space direction="horizontal">
         <Button
           type="text"

src/components/common/DownloadButton.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { Button, message} from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+import Axios from 'axios';
+import { loadProgressBar } from 'axios-progress-bar'
+import fileDownload from 'js-file-download';
+import '../../styles/nprogress.css'
+import 'antd/dist/antd.css';
+
+const CSV_FILENAME = 'USCIS_Asylum_Data.zip';
+const DEFAULT_DOWNLOAD_URL= 'http://localhost:3000/test-raw-data.zip';
+
+const defaultInfo = {
+  BTN_TXT:'Download Report .csv',
+  MSG_LOADING:'Downloading data...',
+  DOWNLOAD_TXT:'downloading CSV file',
+  MSG_DOWNLOAD_FINISHED:'Downloading finished',
+  STYLING:{background: '#FD8960', color:'#FFFFFF' , borderColor:'#8D8D99'}
+}
+
+function DownloadButton(props){
+  const info = props.downloadBtnInfo || defaultInfo;
+  const { BTN_TXT, MSG_LOADING, DOWNLOAD_TXT, MSG_DOWNLOAD_FINISHED, STYLING } = info;
+  const [txt, setTxt] = useState(BTN_TXT);
+  const url = process.env.REACT_APP_DOWNLOAD_RAW_CSV_DATA_URL || DEFAULT_DOWNLOAD_URL;
+  const STYLE = STYLING || defaultInfo.STYLING
+
+  loadProgressBar({showSpinner:false})
+
+  const downloadCsv = () => {
+    setTxt(DOWNLOAD_TXT);
+    message.loading(MSG_LOADING, 0);
+
+      Axios.get(url, {
+        responseType: 'blob'
+      }).then(res => {
+        message.destroy()
+        message.success(MSG_DOWNLOAD_FINISHED);
+        setTxt(BTN_TXT);
+        fileDownload(res.data, CSV_FILENAME);
+      });
+
+  }
+
+
+    return(
+        <Button 
+          icon={<DownloadOutlined />}
+          type="ghost"
+          size="large"
+          onClick={() => downloadCsv()}
+          style={STYLE}
+      >{txt}
+      </Button>
+    )
+
+}
+
+export  {DownloadButton};

src/styles/nprogress.css

@@ -0,0 +1,73 @@
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+  }
+
+  #nprogress .bar {
+    background: #29d;
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 5px;
+  }
+
+  /* Fancy blur effect */
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+        -ms-transform: rotate(3deg) translate(0px, -4px);
+            transform: rotate(3deg) translate(0px, -4px);
+  }
+
+  /* Remove these to get rid of the spinner */
+  #nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+  }
+
+  #nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: #29d;
+    border-left-color: #29d;
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+            animation: nprogress-spinner 400ms linear infinite;
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .spinner,
+  .nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+  }
+
+  @-webkit-keyframes nprogress-spinner {
+    0%   { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  @keyframes nprogress-spinner {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }

src/styles/styles.css

@@ -93,4 +93,12 @@ p {
 p {
     color: var(--primary-color-champagne)
 }
-*/
+*/
+
+.download-btn-container{
+    position: absolute;
+    top: 0;
+    right:0;
+    padding: 1rem;
+
+}

src/utils/saveVisualizations.js

@@ -0,0 +1,22 @@
+export const saveSvg = () => {
+  let getSvg = document.querySelector('.main-svg');
+  getSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  let svgData = getSvg.outerHTML;
+  let svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  let svgUrl = URL.createObjectURL(svgBlob);
+  let downloadLink = document.createElement('a');
+  downloadLink.href = svgUrl;
+  downloadLink.download = 'asylum-data';
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+};
+
+export const savePng = () => {
+  let ele = document
+    .querySelector('.svg-container')
+    .getElementsByClassName('modebar');
+  for (let i = 0; i < ele.length; i++) {
+    ele[i].getElementsByClassName('modebar-btn')[0].click();
+  }
+};