Added data preset.

src/components/SingleFileUpload.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react"
-import { useToasts } from '@geist-ui/core';
+import { ButtonGroup, Button, Spacer, useToasts } from "@geist-ui/core"
 import PropTypes from "prop-types"
+import { clockifyDataSet1 } from "../data/clockify_data1"
 
 export var fileContent = "{}"
 var uploadFailed = false
@@ -10,14 +11,23 @@ function SingleFileUpload({ onFileUploaded }) {
   const [fileUploaded, setFileUploaded] = useState(false)
 
   const { setToast } = useToasts()
-  const showSuccessToast = () => setToast({ text: "File successfully uploaded", delay: 2000 });
-  const showInvalidCSVToast = () => setToast({ text: "Invalid CSV File", delay: 2000 });
-  const showInvalidFileToast = () => setToast({ text: "Wrong file type", delay: 2000 });
+  const showSuccessToast = () =>
+    setToast({ text: "File successfully uploaded", delay: 2000 })
+  const showInvalidCSVToast = () =>
+    setToast({ text: "Invalid CSV File", delay: 2000 })
+  const showInvalidFileToast = () =>
+    setToast({ text: "Wrong file type", delay: 2000 })
+
+  const loadFirstDataSet = () => {
+    fileContent = clockifyDataSet1
+    uploadFailed = false
+    setFileUploaded(true)
+  }
 
   useEffect(() => {
     if (fileUploaded) {
       onFileUploaded()
-      showSuccessToast();
+      showSuccessToast()
     }
     if (uploadFailed && !fileUploaded) {
       onFileUploaded()
@@ -27,7 +37,7 @@ function SingleFileUpload({ onFileUploaded }) {
   // Reads file.
   var readCallback = function (csvRawData) {
     if (!checkCSVValidity(csvRawData)) {
-      showInvalidCSVToast();
+      showInvalidCSVToast()
       uploadFailed = true
       setFileUploaded(false)
       fileContent = {}
@@ -56,7 +66,7 @@ function SingleFileUpload({ onFileUploaded }) {
     reader.onload = function (evt) {
       var uploadedFile = document.getElementById("fileInput").files[0]
       if (uploadedFile.type != "application/vnd.ms-excel") {
-        showInvalidFileToast();
+        showInvalidFileToast()
         fileContent = "{}"
         return
       }
@@ -70,6 +80,10 @@ function SingleFileUpload({ onFileUploaded }) {
         <h2>Upload file</h2>
         <input id="fileInput" type="file" accept=".csv" onChange={handleChange} />
       </form>
+      <Spacer h={2} />
+      <ButtonGroup>
+        <Button onClick={loadFirstDataSet}>Data Set 1 (26/09/23 - 30/01/24)</Button>
+      </ButtonGroup>
     </div>
   )
 }

src/index.js

@@ -19,30 +19,30 @@ export default function App() {
 
   return (
     <Page>
-    <GeistProvider>
-      <CssBaseline />
-      <Tabs initialValue="1">
-        <Tabs.Item label="Upload File" value="1">
-          <SingleFileUploader onFileUploaded={handleUploadedFile} />
-          <br />
-          <hr />
-          <h3>How to upload a file:</h3>
-          <ul>
-            <li>Go to Clockify</li>  
-            <li>Reports</li>
-            <li>Summary</li>
-            <li>Time Report (Detailed)</li>
-            <li>Export (As a CSV file)</li>
-          </ul>
-        </Tabs.Item>
-        <Tabs.Item label="Project timeline" value="2" disabled={!fileUploaded}>
-          <TimelineAreaChart />
-        </Tabs.Item>
-        <Tabs.Item label="Total time spent" value="3" disabled={!fileUploaded}>
-          <TotalPieChart />
-        </Tabs.Item>
-      </Tabs>
-    </GeistProvider>
+      <GeistProvider>
+        <CssBaseline />
+        <Tabs initialValue="1">
+          <Tabs.Item label="Upload File" value="1">
+            <SingleFileUploader onFileUploaded={handleUploadedFile} />
+            <br />
+            <hr />
+            <h3>How to upload a file:</h3>
+            <ul>
+              <li>Go to Clockify</li>
+              <li>Reports</li>
+              <li>Summary</li>
+              <li>Time Report (Detailed)</li>
+              <li>Export (As a CSV file)</li>
+            </ul>
+          </Tabs.Item>
+          <Tabs.Item label="Project timeline" value="2" disabled={!fileUploaded}>
+            <TimelineAreaChart />
+          </Tabs.Item>
+          <Tabs.Item label="Total time spent" value="3" disabled={!fileUploaded}>
+            <TotalPieChart />
+          </Tabs.Item>
+        </Tabs>
+      </GeistProvider>
     </Page>
   )
 }