Export Single Graph to PDF 📂 - Will & Justin #48

package.json

@@ -39,7 +39,10 @@
         "dotenv": "^17.2.3",
         "drizzle-orm": "^0.44.7",
         "framer-motion": "^12.23.24",
+        "html2canvas": "^1.4.1",
+        "html2canvas-pro": "^1.6.6",
         "input-otp": "^1.4.2",
+        "jspdf": "^4.0.0",
         "lucide": "^0.544.0",
         "lucide-react": "^0.545.0",
         "next": "^16.0.7",

src/app/graphs/page.tsx

@@ -20,7 +20,7 @@ import {
     Link,
     Share,
 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import BarGraph, { type BarDataset } from "@/components/BarGraph";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
@@ -35,6 +35,7 @@ import {
     PopoverTrigger,
 } from "@/components/ui/popover";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { downloadGraph } from "@/lib/export-to-pdf";
 
 // define Project type
 type Project = {
@@ -89,6 +90,7 @@ const groupByLabels: Record<string, string> = {
 export default function GraphsPage() {
     const [allProjects, setAllProjects] = useState<Project[]>([]);
     const [filters, setFilters] = useState<Filters>(defaultFilters);
+    //const [isExporting, setIsExporting] = useState(false); potentially for loading stat
     const [gatewayCities, setGatewayCities] = useState<string[]>([]);
     const [chartType, setChartType] = useState<"line" | "bar">("line");
     const [timePeriod, setTimePeriod] = useState<
@@ -103,6 +105,7 @@ export default function GraphsPage() {
         start: 2020,
         end: 2025,
     });
+    const svgRef = useRef<SVGSVGElement | null>(null);
 
     // Fetch all project data
     useEffect(() => {
@@ -398,6 +401,7 @@ export default function GraphsPage() {
                                     variant="outline"
                                     size="sm"
                                     className="flex items-center gap-2"
+                                    onClick={() => downloadGraph(svgRef)}
                                 >
                                     <Share className="w-4 h-4" />
                                     Export
@@ -589,6 +593,7 @@ export default function GraphsPage() {
                                         measuredAsLabels[filters.measuredAs]
                                     }
                                     xAxisLabel={groupByLabels[filters.groupBy]}
+                                    svgRefCopy={svgRef}
                                 />
                             ) : (
                                 <LineGraph
@@ -597,6 +602,7 @@ export default function GraphsPage() {
                                         measuredAsLabels[filters.measuredAs]
                                     }
                                     xAxisLabel={groupByLabels[filters.groupBy]}
+                                    svgRefCopy={svgRef}
                                 />
                             )}
                         </div>

src/app/signin/page.tsx

@@ -1,4 +1,5 @@
 import AuthForm from "@/components/AuthForm";
+import Dashboard from "@/components/Dashboard";
 import WarpShader from "@/components/WarpShader";
 
 export default function SignInPage() {

src/components/BarGraph.tsx

@@ -23,17 +23,22 @@ type BarGraphProps = {
     dataset: BarDataset[];
     yAxisLabel: string;
     xAxisLabel: string;
+    svgRefCopy: React.RefObject<SVGSVGElement | null>;
 };
 
 export default function BarGraph({
     dataset,
     yAxisLabel,
     xAxisLabel,
+    svgRefCopy,
 }: BarGraphProps) {
     const svgRef = useRef<SVGSVGElement | null>(null);
 
     // Use same color scheme as LineGraph
-    const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+    //const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+    const colorScale = d3.scaleOrdinal(
+        d3.schemeCategory10.map((c) => c.toString()),
+    );
 
     useEffect(() => {
         if (!svgRef.current || dataset.length === 0) return;
@@ -181,6 +186,8 @@ export default function BarGraph({
             xOffset += itemWidth;
             return transform;
         });
+
+        svgRefCopy.current = svgRef.current;
     }, [dataset]);
 
     return (

src/components/ConditionalLayout.tsx

@@ -9,13 +9,14 @@ export default function ConditionalLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const pathname = usePathname();
-    const isAuthPage = pathname === "/signin";
+    //const pathname = usePathname();
+
+    //const isAuthPage = pathname === "/signin";
 
     // If on auth pages, just render children without sidebar
-    if (isAuthPage) {
-        return <main className="w-full h-full">{children}</main>;
-    }
+    // if (isAuthPage) {
+    //     return <main className="w-full h-full">{children}</main>;
+    // }
 
     // Otherwise, render with sidebar and responsive layout
     return (

src/components/LineGraph.tsx

@@ -12,12 +12,14 @@ type MultiLineGraphProps = {
     datasets: GraphDataset[];
     yAxisLabel: string;
     xAxisLabel: string;
+    svgRefCopy: React.RefObject<SVGSVGElement | null>;
 };
 
 export default function MultiLineGraph({
     datasets,
     yAxisLabel,
     xAxisLabel,
+    svgRefCopy,
 }: MultiLineGraphProps) {
     const svgRef = useRef<SVGSVGElement | null>(null);
     const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -39,7 +41,11 @@ export default function MultiLineGraph({
     }>({});
 
     // Memoize color scale to prevent re-running useEffect unnecessarily
-    const colorScale = useMemo(() => d3.scaleOrdinal(d3.schemeCategory10), []);
+    //const colorScale = useMemo(() => d3.scaleOrdinal(d3.schemeCategory10), []);
+    const colorScale = useMemo(
+        () => d3.scaleOrdinal(d3.schemeCategory10.map((c) => c.toString())),
+        [],
+    );
 
     useEffect(() => {
         const svg = d3.select(svgRef.current);
@@ -390,6 +396,8 @@ export default function MultiLineGraph({
                 return transform;
             });
         });
+
+        svgRefCopy.current = svgRef.current;
     }, [datasets, xAxisLabel, yAxisLabel, colorScale]);
 
     return (

src/components/Sidebar.tsx

@@ -13,12 +13,12 @@ import {
     ChevronRight,
     User,
 } from "lucide-react";
-import { authClient } from "@/lib/auth-client";
+//import { authClient } from "@/lib/auth-client";
 
 export default function Sidebar() {
     const pathname = usePathname();
     const [isOverviewOpen, setIsOverviewOpen] = useState(false);
-    const { data: session } = authClient.useSession();
+    //const { data: session } = authClient.useSession();
 
     // Automatically open Overview if any subitem is active
     useEffect(() => {
@@ -203,7 +203,7 @@ export default function Sidebar() {
                 </div>
             </div>
 
-            <div className="px-4 py-5 self-center flex items-center gap-3">
+            {/*<div className="px-4 py-5 self-center flex items-center gap-3">
                 <div className="w-8 h-8 rounded-full overflow-hidden bg-muted flex items-center justify-center">
                     {session?.user?.image ? (
                         <img
@@ -218,7 +218,7 @@ export default function Sidebar() {
                 <span className="text-sm font-medium text-foreground overflow-hidden whitespace-nowrap">
                     {session?.user?.email || "Loading..."}
                 </span>
-            </div>
+            </div>*/}
         </aside>
     );
 }

src/lib/export-to-pdf.ts

@@ -0,0 +1,76 @@
+/***************************************************************
+ *
+ *         /src/lib/export-to-pdf.ts
+ *
+ *         Author: Will and Justin
+ *         Date: 2/1/2025
+ *
+ *        Summary: Export an svg graph as a pdf
+ **************************************************************/
+
+import React from "react";
+import html2canvas from "html2canvas-pro";
+import jsPDF from "jspdf";
+
+export async function downloadGraph(
+    svgRef: React.RefObject<SVGSVGElement | null>,
+) {
+    const newSVG = getClonedSvg(svgRef);
+    if (!newSVG) return;
+
+    // Get SVG dimensions from viewBox or attributes with fallbacks
+    const viewBox = newSVG.getAttribute("viewBox");
+    let svgWidth = 1000;
+    let svgHeight = 400;
+    let aspectRatio = svgHeight / svgWidth;
+
+    if (viewBox) {
+        const viewBoxValues = viewBox.split(" ");
+        svgWidth = parseFloat(viewBoxValues[2]) || 1000;
+        svgHeight = parseFloat(viewBoxValues[3]) || 400;
+    } else {
+        const width = newSVG.getAttribute("width");
+        const height = newSVG.getAttribute("height");
+        if (width) svgWidth = parseFloat(width) || 1000;
+        if (height) svgHeight = parseFloat(height) || 400;
+    }
+
+    aspectRatio = svgHeight / svgWidth;
+
+    // Adds the svg element to the page temporarily (offscreen)
+    const wrapper = document.createElement("div");
+    wrapper.style.position = "fixed";
+    wrapper.style.left = "-9999px";
+    wrapper.style.top = "-9999px";
+    wrapper.style.width = `${svgWidth}px`;
+    wrapper.style.height = `${svgHeight}px`;
+    wrapper.appendChild(newSVG);
+    document.body.append(wrapper);
+
+    const canvas = await html2canvas(wrapper, {
+        backgroundColor: "#fff",
+        scale: 2,
+    });
+
+    const pdf = new jsPDF();
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = pdfWidth * aspectRatio;
+
+    // Add image with proper dimensions that match PDF width while preserving aspect ratio
+    pdf.addImage(canvas, "JPEG", 0, 0, pdfWidth, pdfHeight);
+    pdf.save("graph.pdf");
+
+    document.body.removeChild(wrapper);
+}
+
+export function getClonedSvg(
+    svgRef: React.RefObject<SVGSVGElement | null>,
+): SVGSVGElement | null {
+    const original = svgRef.current;
+    if (!original) return null;
+
+    //Creates and returns a clone of the svg element passed in
+    const clone = original.cloneNode(true) as SVGSVGElement;
+
+    return clone;
+}