PDF Export

frontend/package.json

@@ -18,6 +18,7 @@
         "@lrd/e3-sdk": "^1.0.11",
         "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
+        "@react-pdf/renderer": "^4.1.6",
         "@react-rxjs/core": "^0.10.7",
         "@react-rxjs/utils": "^0.9.7",
         "antd": "^5.18.0",
@@ -30,6 +31,7 @@
         "effect": "^3.12.1",
         "fast-xml-parser": "4.4.1",
         "framer-motion": "^11.2.10",
+        "html-to-image": "^1.11.11",
         "html-to-react": "^1.7.0",
         "monocle-ts": "^2.3.13",
         "object-hash": "^3.0.0",
@@ -38,6 +40,7 @@
         "react-csv": "^2.2.2",
         "react-data-grid": "7.0.0-beta.43",
         "react-dom": "^18.3.1",
+        "react-pdf": "^9.1.1",
         "react-router-dom": "^6.23.1",
         "rxjs": "^7.8.1",
         "ts-pattern": "^5.1.2",

frontend/src/components/CSVDownload.ts

@@ -1,4 +1,5 @@
-import { Alternative, Project } from "blcc-format/Format";
+import { Project } from "blcc-format/Format";
+import { db } from "model/db";
 import { lccRow } from "./allResultStreams";
 
 type lccBaselineRow = {
@@ -86,13 +87,23 @@ type altResults = {
     resourceUsage: resourceUsageRow[][];
 };
 
-const CSVDownload = (
-    project: Project,
-    alternatives: Alternative[],
-    summary: summary,
-    annual: annual,
-    altResults: altResults
-) => {
+const fetchData = async () => {
+    try {
+        const result = await db.alternatives.toArray();
+        if (!result || result.length === 0) {
+            console.log("No alternatives found.");
+            return [];
+        }
+        return result;
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return [];
+    }
+};
+
+const alternatives = await fetchData();
+
+const CSVDownload = (project: Project[] | undefined, summary: summary, annual: annual, altResults: altResults) => {
     let altNames: string[] = alternatives?.map((alt) => alt?.name);
     console.log(summary, annual, altResults);
 
@@ -285,7 +296,7 @@ const CSVDownload = (
         [new Date().toLocaleTimeString()],
         [],
         ["BLCC Project Results"],
-        [project?.name],
+        [project?.[0]?.name],
         [],
         ["Summary"],
         [],

frontend/src/components/Pdf.tsx

@@ -0,0 +1,86 @@
+import { Document, Image, Page, Text, View } from "@react-pdf/renderer";
+import { Project } from "blcc-format/Format";
+
+import { db } from "model/db";
+import { altResults, annual, summary } from "./allResultStreams";
+import Alternatives from "./pdf-components/Alternatives";
+import GeneralInformation from "./pdf-components/GeneralInformation";
+import NISTHeader from "./pdf-components/NISTHeader";
+import PageNumber from "./pdf-components/PageNumber";
+import PdfDisclaimer from "./pdf-components/PdfDisclaimer";
+import { styles } from "./pdf-components/pdfStyles";
+import Results from "./pdf-components/Results";
+
+const fetchData = async () => {
+    try {
+        const [alternatives, costs] = await Promise.all([
+            db.alternatives.toArray().then((result) => {
+                if (result === undefined || result.length === 0) {
+                    console.log("No alternatives found.");
+                    return [];
+                }
+                return result;
+            }),
+            db.costs.toArray().then((result) => {
+                if (result === undefined || result.length === 0) {
+                    console.log("No costs found.");
+                    return [];
+                }
+                return result;
+            })
+        ]);
+        return [alternatives, costs];
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return [[], []];
+    }
+};
+
+const [alternatives, costs] = await fetchData();
+
+const Pdf = (props: {
+    project: Project[];
+    summary: summary;
+    annual: annual;
+    altResults: altResults;
+    graphSources: string[];
+}) => {
+    const { project, summary, annual, altResults, graphSources } = props;
+
+    console.log(project, alternatives, costs);
+
+    return (
+        <Document>
+            <Page style={styles.page} size="LETTER">
+                <NISTHeader />
+                <View style={styles.blccHeader}>
+                    <Image style={styles.logo} src="../public/logo.png" />
+                    <Text style={styles.date}>
+                        Report Generated: {`${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`}
+                    </Text>
+                </View>
+                <GeneralInformation project={project} />
+                <PageNumber />
+            </Page>
+            <Page size="LETTER">
+                <NISTHeader />
+                <Alternatives alternatives={alternatives} costs={costs} releaseYear={project[0]?.releaseYear} />
+                <PageNumber />
+            </Page>
+            <Page size="LETTER">
+                <NISTHeader />
+                <Results
+                    alternatives={alternatives}
+                    summary={summary}
+                    annual={annual}
+                    altResults={altResults}
+                    graphs={graphSources}
+                />
+                <PdfDisclaimer />
+                <PageNumber />
+            </Page>
+        </Document>
+    );
+};
+
+export default Pdf;

frontend/src/components/ResultsAppBar.tsx

@@ -1,27 +1,38 @@
 import { mdiArrowLeft, mdiContentSave, mdiFileDownload, mdiLoading, mdiPlay, mdiTableArrowDown } from "@mdi/js";
 import Icon from "@mdi/react";
-import type { Alternative, Cost, Project } from "blcc-format/Format";
+import { pdf } from "@react-pdf/renderer";
+import type { Project } from "blcc-format/Format";
 import AppBar from "components/AppBar";
 import ButtonBar from "components/ButtonBar";
 import HelpButtons from "components/HelpButtons";
 import { Button, ButtonType } from "components/input/Button";
 import { useSubscribe } from "hooks/UseSubscribe";
+import * as htmlToImage from "html-to-image";
 import { db } from "model/db";
 import { Model, costs$, useAlternatives, useProject } from "model/Model";
 import { ResultModel } from "model/ResultModel";
-import React from "react";
+import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Subject, withLatestFrom } from "rxjs";
 import { download } from "util/DownloadFile";
+import Pdf from "./Pdf";
+
 import {
     altNPV,
+    altNpvRow,
+    annualNPVComparisonRow,
     lccBaseline,
+    lccBaselineRow,
+    lccResourceRow,
     lccResourceRows,
+    lccRow,
     lccRows,
     npvAll,
+    npvAllRow,
     npvComparison,
     npvCosts,
-    resourceUsage
+    resourceUsage,
+    resourceUsageRow
 } from "./allResultStreams";
 import CSVDownload from "./CSVDownload";
 
@@ -31,14 +42,96 @@ const csvClick$ = new Subject<void>();
 
 export default function ResultsAppBar() {
     const navigate = useNavigate();
-    const project: Project = useProject();
-    const alternatives: Alternative[] = useAlternatives();
-    let costs: Cost[] = [];
-    costs$.subscribe((data) => {
-        costs = data;
-    });
 
-    useSubscribe(pdfClick$, () => {}); //TODO Create and download PDF
+    // need to handle error properly - discuss with Luke for Modal
+    const fetchProject = async () => {
+        try {
+            const result = await db.projects.where("id").equals(1).toArray(); // Assuming you want the result as an array
+
+            if (result === undefined || result.length === 0) {
+                console.log("No project found.");
+            } else {
+                return result; // Process the result
+            }
+        } catch (error) {
+            console.error("Error fetching project:", error);
+        }
+    };
+
+    let project: Project[] | undefined;
+    fetchProject().then((p) => (project = p));
+
+    const generatePdf = useCallback(
+        (
+            _: undefined,
+            lccRows: lccRow[],
+            lccBaseline: lccBaselineRow[],
+            npvCosts: { [key: string]: string }[],
+            lccResourceRows: lccResourceRow[],
+            npvComparison: annualNPVComparisonRow[],
+            altNPV: altNpvRow[][],
+            resourceUsage: resourceUsageRow[][],
+            npvAll: npvAllRow[][]
+        ) => {
+            const pdfGraphs = document.getElementsByClassName("result-graph");
+            // if (pdfGraphs.length === 0) return;
+
+            const promises = [...pdfGraphs].map((graph) =>
+                htmlToImage.toPng(graph as HTMLElement).then((graphSrc) => graphSrc)
+            );
+
+            Promise.all(promises).then((graphSources) => {
+                console.log(graphSources);
+                const blob = pdf(
+                    <Pdf
+                        project={project}
+                        summary={{ lccRows, lccBaseline, npvCosts, lccResourceRows }}
+                        annual={{ npvComparison, npvAll }}
+                        altResults={{ altNPV, resourceUsage }}
+                        graphSources={(graphSources as string[]) || []}
+                    />
+                ).toBlob();
+
+                blob.then((blob: Blob | MediaSource) => {
+                    const url = window.URL.createObjectURL(blob);
+                    const link = document.createElement("a");
+                    link.href = url;
+                    link.download = `${project?.[0]?.name}.pdf`;
+                    link.click();
+                });
+            });
+        },
+        [project]
+    );
+
+    useSubscribe(
+        pdfClick$.pipe(
+            withLatestFrom(
+                lccRows,
+                lccBaseline,
+                npvCosts,
+                lccResourceRows,
+                npvComparison,
+                altNPV,
+                resourceUsage,
+                npvAll
+            )
+        ),
+        ([_, lccRows, lccBaseline, npvCosts, lccResourceRows, npvComparison, altNPV, resourceUsage, npvAll]) => {
+            console.log("clicked");
+            generatePdf(
+                _,
+                lccRows,
+                lccBaseline,
+                npvCosts,
+                lccResourceRows,
+                npvComparison,
+                altNPV,
+                resourceUsage,
+                npvAll
+            );
+        }
+    ); //TODO Create and download PDF
     useSubscribe(
         csvClick$.pipe(
             withLatestFrom(
@@ -58,11 +151,11 @@ export default function ResultsAppBar() {
             const altResults = { altNPV, resourceUsage };
             // Trigger CSV download
             const link = document.createElement("a");
-            const csvData = CSVDownload(project, alternatives, summary, annual, altResults);
+            const csvData = CSVDownload(project, summary, annual, altResults);
             const csvBlob = new Blob([csvData.join("\n")], { type: "text/csv" });
             const url = window.URL.createObjectURL(csvBlob);
             link.href = url;
-            link.download = `${project.name}.csv`; // Set the desired file name
+            link.download = `${project?.[0]?.name}.csv`; // Set the desired file name
             link.click();
             window.URL.revokeObjectURL(url); // Clean up the URL object
         }