FDS-653 Dashboard as pdf report export feature

package.json

@@ -84,6 +84,7 @@
     "@ollion/flow-system-icon": "latest",
     "@ollion/flow-table": "workspace:*",
     "d3": "^7.6.1",
+    "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "lit": "^3.1.0"
   },

packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts

@@ -50,7 +50,7 @@ export class FDashboard extends FRoot {
 	render() {
 		return html`
 			<div class="grid-stack" ${ref(this.gridStackElement)}>
-				${this.config.widgets.map(wgt => {
+				${this.config?.widgets.map(wgt => {
 					return keyed(
 						wgt.id,
 						html`<div

packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts

@@ -35,7 +35,7 @@ export class FTimeseriesChart extends FRoot {
 	 * @attribute comments baout title
 	 */
 	@property({ type: Object })
-	config!: FTimeseriesChartConfig;
+	config: FTimeseriesChartConfig = { data: [] };
 
 	chartContainer: Ref<FDiv> = createRef<FDiv>();
 	chartLegends: Ref<FDiv> = createRef<FDiv>();
@@ -252,7 +252,7 @@ export class FTimeseriesChart extends FRoot {
 			height="100%"
 		>
 			<f-div class="f-timeseries-container" ${ref(this.chartContainer)}
-				>${svg`<svg xmlns="http://www.w3.org/2000/svg"></svg>`}
+				>${svg`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>`}
 				<f-div
 					state="custom,#000000"
 					variant="curved"

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FButton, FDiv, flowElement, FRoot, FSearch, FText } from "@ollion/flow-core";
 import { html, HTMLTemplateResult, nothing, PropertyValueMap, unsafeCSS } from "lit";
-import { ifDefined } from "lit-html/directives/if-defined.js";
 import { property, query, state } from "lit/decorators.js";
 import { FTable, FTableSelectable, FTableSize, FTableVariant } from "../f-table/f-table";
 import { FTcell, FTcellActions, FTcellAlign } from "../f-tcell/f-tcell";
@@ -226,8 +225,8 @@ export class FTableSchema extends FRoot {
 							aria-sort="${this.sortBy === columnHeader[0] ? this.ariaSortOrder : "none"}"
 							.align=${columnHeader[1].align}
 							data-background="${this.stickyCellBackground}"
-							?sticky-left=${ifDefined(sticky)}
-							?sticky-top=${ifDefined(this.stickyHeader)}
+							?sticky-left=${sticky}
+							?sticky-top=${this.stickyHeader}
 							@selected-column=${this.handleColumnSelection}
 							@update-row-selection=${(event: CustomEvent<boolean>) =>
 								this.handleHeaderInput(event, columnHeader[1])}
@@ -297,7 +296,7 @@ export class FTableSchema extends FRoot {
 							.actions=${actions}
 							.align=${cell.align}
 							data-background="${this.stickyCellBackground}"
-							?sticky-left=${ifDefined(sticky)}
+							?sticky-left=${sticky}
 							>${this.getCellTemplate(row.data[columnHeader[0]], highlightTerm)}
 						</f-tcell>`;
 					})}

stories/flow-dashboard/f-dashboard.stories.ts

@@ -1,14 +1,11 @@
 import { Meta } from "@storybook/web-components";
 import { html } from "lit-html";
-import {
-	FDashboard,
-	FDashboardConfig,
-	FDashboardWidget,
-	FTimeseriesChartConfig
-} from "@ollion/flow-dashboard";
+import type { FDashboard, FDashboardConfig, FDashboardWidget } from "@ollion/flow-dashboard";
 import { generateTimeseriesChartData } from "./mock-data-utils";
 import { faker } from "@faker-js/faker";
 import { createRef, ref } from "lit/directives/ref.js";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
 export default {
 	title: "@ollion/flow-dashboard/f-dashboard",
@@ -32,7 +29,7 @@ const getWidgets = () => {
 	];
 	const widgets: FDashboardWidget[] = [];
 	const startFrom = new Date();
-	for (let index = 0; index < 10; index++) {
+	for (let index = 0; index < 20; index++) {
 		if (index % 2 === 0) {
 			widgets.push({
 				type: "timeseries",
@@ -52,7 +49,9 @@ const getWidgets = () => {
 					>
 						<f-icon .source=${faker.helpers.arrayElement(iconsNames)} size="large"></f-icon>
 						<f-div direction="column" align="middle-left">
-							<f-text ellipsis .tooltip=${name} variant="heading" weight="medium">${name}</f-text>
+							<f-text ellipsis .tooltip=${name} variant="heading" weight="medium"
+								><a href="https://ollion.com/">${name}</a></f-text
+							>
 							<f-text ellipsis .tooltip=${description} size="small">${description}</f-text>
 						</f-div>
 					</f-div>`;
@@ -101,8 +100,10 @@ const getWidgets = () => {
 
 	return widgets;
 };
+
 const Template = () => {
 	const dashboardRef = createRef<FDashboard>();
+	const imgRef = createRef<HTMLImageElement>();
 	const dashboardConfig: FDashboardConfig = {
 		widgets: getWidgets()
 	};
@@ -114,7 +115,68 @@ const Template = () => {
 		}
 	};
 
-	return html`<f-div height="100%" width="100%" gap="small" direction="column">
+	/**
+	 * Download file as image in pdf
+	 *
+	 *
+	 */
+	const downloadFile = () => {
+		const element = document.querySelector("#dashboard-to-export") as FDashboard;
+
+		html2canvas(element, { scale: 1 }).then(function (canvas) {
+			const imgData = canvas.toDataURL("image/png");
+			const imgWidth = 794;
+			const pageHeight = 1115;
+			const imgHeight = (canvas.height * imgWidth) / canvas.width;
+			let heightLeft = imgHeight;
+			// Initialize jsPDF
+			const pdf = new jsPDF({
+				orientation: "p",
+				unit: "px",
+				format: [794, 1115]
+			});
+			pdf.setDisplayMode("original");
+			let position = 0; // give some top padding to first page
+
+			const allAnchors = element.querySelectorAll("a");
+			for (let l = 0; l < allAnchors.length; l++) {
+				const anchorElement = allAnchors.item(l);
+				const linkX = anchorElement.getBoundingClientRect().x - element.getBoundingClientRect().x;
+				const linkY = anchorElement.getBoundingClientRect().y - element.getBoundingClientRect().y;
+				const linkWidth = anchorElement.offsetWidth;
+				const linkHeight = anchorElement.offsetHeight;
+
+				pdf.link(linkX, linkY, linkWidth, linkHeight, {
+					url: anchorElement.href
+				});
+			}
+
+			pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+			heightLeft -= pageHeight;
+
+			while (heightLeft >= 0) {
+				position += heightLeft - imgHeight; // top padding for other pages
+				pdf.addPage();
+
+				pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+				heightLeft -= pageHeight;
+			}
+
+			// Save the PDF
+			pdf.save("canvas_to_pdf.pdf");
+		});
+	};
+
+	return html`<f-div
+		width="100%"
+		id="dashboard-to-export"
+		gap="small"
+		overflow="scroll"
+		state="default"
+		direction="column"
+	>
+		<f-text><a href="https://ollion.com/">Ollion</a></f-text>
+
 		<f-div
 			variant="curved"
 			state="primary"
@@ -123,11 +185,16 @@ const Template = () => {
 			gap="auto"
 			align="middle-left"
 		>
-			<f-text state="inherit">Click on randomize button to generate new data</f-text>
-			<f-button @click=${randomize} label="randomize"></f-button>
+			<f-text state="inherit">Click on export button to generate pdf</f-text>
+			<f-button @click=${downloadFile} label="export"></f-button>
 		</f-div>
 
-		<f-dashboard ${ref(dashboardRef)} .config=${dashboardConfig}> </f-dashboard>
+		<f-dashboard
+			style="background:var(--color-surface-default)"
+			${ref(dashboardRef)}
+			.config=${dashboardConfig}
+		>
+		</f-dashboard>
 	</f-div>`;
 };