Formatting in frontend code

webapp/src/components/graphing/BarGraph.tsx

-import React, {ReactElement} from 'react';
-import {Bar} from 'react-chartjs-2';
-import {DataSetProps} from './types';
+import React, { ReactElement } from 'react';
+import { Bar } from 'react-chartjs-2';
+import { DataSetProps } from './types';
 
 
 import {
@@ -25,7 +25,7 @@ ChartJS.register(
 
 function BarGraph(data: DataSetProps): ReactElement {
     return (
-        <Bar data={data.data} options={{}}/>
+        <Bar data={data.data} options={{}} />
     );
 }
 

webapp/src/components/graphing/LineGraph.tsx

-import React, {ReactElement} from 'react';
-import {Line} from 'react-chartjs-2';
-import {DataSetProps} from './types';
+import React, { ReactElement } from 'react';
+import { Line } from 'react-chartjs-2';
+import { DataSetProps } from './types';
 
 
 import {
- Chart as ChartJS,
+  Chart as ChartJS,
   CategoryScale,
   LinearScale,
   PointElement,
@@ -38,9 +38,9 @@ const options = {
   },
 };
 function LineGraph(data: DataSetProps): ReactElement {
-    return (
-        <Line data={data.data} options={options}/>
-    );
+  return (
+    <Line data={data.data} options={options} />
+  );
 }
 
 export default LineGraph;

webapp/src/components/graphing/types.ts

 export type DatasetEntry = {
-    backgroundColor: string,
-    borderColor?: string,
-    data: (number|null)[],
-    label: string
-
-}
+    backgroundColor: string;
+    borderColor?: string;
+    data: (number | null)[];
+    label: string;
+};
 
 export type DataSetProps = {
     data: {
-        datasets: DatasetEntry[],
-        labels: string[]
-    }
-}
+        datasets: DatasetEntry[];
+        labels: string[];
+    };
+};

webapp/src/pages/About.tsx

-import React, {ReactElement} from 'react';
+import React, { ReactElement } from 'react';
 // import AnnualReport from './AnnualReport';
 // import DataAnalysis from './DataAnalysis';
 // import Navigation from './Navigation';
@@ -13,7 +13,7 @@ function About(): ReactElement {
   return (
 
     <div>
-        <h1>About Page</h1>
+      <h1>About Page</h1>
     </div>
   );
 }

webapp/src/pages/AnnualReport.tsx

-import React, {ReactElement} from 'react';
+import React, { ReactElement } from 'react';
 
 function AnnualReport(): ReactElement {
 
 
   return (
     <div>
-        <h1>Annual Report</h1>
+      <h1>Annual Report</h1>
     </div>
   );
 }

webapp/src/pages/DataAnalysis.tsx

@@ -62,7 +62,7 @@ function DataAnalysis(): ReactElement {
 
     useEffect(() => {
         const loadData = async () => {
-            console.log("budgetResponse "+ budgetResponse)
+            console.log("budgetResponse " + budgetResponse)
             if (budgetResponse == undefined) {
                 api<Budget[]>('/api/budget/', {})
                     .then((budget: Budget[]) => {
@@ -73,7 +73,7 @@ function DataAnalysis(): ReactElement {
                         if (entry)
                             options.plugins.title.text = entry.title;
                         setBudget(budget)
-                        console.log("budgetResponse after api "+ budgetResponse)
+                        console.log("budgetResponse after api " + budgetResponse)
                         convertToBudgetPerYearDataResponse(budget)
                     })
                     .catch(error => {
@@ -113,7 +113,7 @@ function DataAnalysis(): ReactElement {
 
     const convertToBudgetPerYearDataResponse = (budgetResponse: Budget[]) => {
         const barResponse = budgetResponse != undefined ? budgetResponse : empty_budget_response;
-        console.log("barResponse "+barResponse);
+        console.log("barResponse " + barResponse);
         console.log(barResponse.map((item) => item.BUDGET_YEAR));
         const labelsYear = [...new Set(barResponse.map((item) => item.BUDGET_YEAR))];
         const labelsNREN = [...new Set(barResponse.map((item) => item.NREN))];

webapp/src/pages/Landing.tsx

@@ -31,7 +31,7 @@ function Landing(): ReactElement {
 
                                 <Card border='light' style={{ width: "18rem" }}>
                                     <Link to="/data">
-                                        <Card.Img src={SectionDataLogo}/>
+                                        <Card.Img src={SectionDataLogo} />
                                         <Card.Body>
                                             <Card.Title>Compendium Data</Card.Title>
                                             <Card.Text>
@@ -46,7 +46,7 @@ function Landing(): ReactElement {
                             </Col>
                             <Col align={"center"}>
                                 <Card border='light' style={{ width: "18rem" }}>
-                                    <Card.Img src={SectionReportsLogo}/>
+                                    <Card.Img src={SectionReportsLogo} />
                                     <Card.Body>
                                         <Card.Title>Compendium Reports</Card.Title>
                                         <Card.Text>