Fix the csv download issue

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package.json

@@ -1,8 +1,60 @@
-import { MultiGraphDashboardFromConfig } from './Components/Dashboard/MultiGraphDashboardFromConfig';
 import './styles/styles.css';
 
 function App() {
-  return <MultiGraphDashboardFromConfig config='./config.json' />;
+  return (
+    <div
+      style={{
+        height: '90vh',
+        maxWidth: '712px',
+        margin: '0 auto',
+        padding: '2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <img width='56' alt='undp-logo' src='/undp-logo-blue.svg' />
+      <h3
+        className='undp-viz-typography'
+        style={{ textAlign: 'center', paddingTop: '24px' }}
+      >
+        UNDP Data Visualization Library
+      </h3>
+      <p className='undp-viz-typography' style={{ textAlign: 'center' }}>
+        This open-source graphing library, developed by the United Nations
+        Development Programme, offers ready-to-use charts, including bar charts,
+        line charts, area charts, and more. You can access the documentation{' '}
+        <a
+          href='https://data-viz.data.undp.org/'
+          target='_blank'
+          rel='noreferrer'
+          className='undp-viz-style'
+        >
+          here
+        </a>
+        .
+      </p>
+      <p
+        className='undp-viz-typography'
+        style={{
+          fontSize: '16px',
+          textAlign: 'center',
+        }}
+      >
+        {' '}
+        For any feedback or inquiries, please feel free to reach out to us at{' '}
+        <a
+          href='mailto:data@undp.org'
+          target='_blank'
+          rel='noreferrer'
+          className='undp-viz-style'
+        >
+          data@undp.org
+        </a>{' '}
+      </p>
+    </div>
+  );
 }
 
 export default App;

src/App.tsx

@@ -19,13 +19,27 @@ interface Props {
   mode: 'dark' | 'light';
 }
 
+const transformDataForCsv = (data: any) => {
+  if (!data) return {};
+  return data.map((obj: any) => {
+    const newObj = { ...obj };
+
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        newObj[key] = `${value.join(',')}`;
+      }
+    });
+
+    return newObj;
+  });
+};
 export function CsvDownloadButton(props: Props) {
   const {
     buttonContent,
     buttonType = 'quaternary',
     buttonArrow = false,
     csvData,
-    fileName = 'data',
+    fileName = 'data13',
     headers,
     separator = ',',
     buttonSmall = false,
@@ -34,9 +48,9 @@ export function CsvDownloadButton(props: Props) {
   return (
     <CSVLink
       headers={headers}
-      enclosingCharacter=''
+      enclosingCharacter='"'
       separator={separator}
-      data={csvData}
+      data={transformDataForCsv(csvData)}
       filename={`${fileName}.csv`}
       asyncOnClick
       target='_blank'