@lobb-js/lobb-ext-reports 0.5.0 → 0.6.1

package/dist/lib/components/gridStack.svelte

@@ -45,11 +45,11 @@
 
 		setTimeout(() => { initialized = true; }, 0);
 
-		grid.on("dragstop resizestop", () => {
+		grid.on("dragstop", () => {
 			grid?.compact();
 		});
 
-		grid.on("change", () => {
+		function saveLayout() {
 			if (!onLayoutChange || !initialized) return;
 			const currentCols = grid!.getColumn();
 			if (currentCols === 1) return;
@@ -66,6 +66,13 @@
 					h: node.h,
 				}));
 			if (sorted.length > 0) onLayoutChange(sorted);
+		}
+
+		grid.on("change", saveLayout);
+
+		grid.on("resizestop", () => {
+			grid?.compact();
+			saveLayout();
 		});
 
 		resizeObserver = new ResizeObserver((entries) => {
@@ -102,4 +109,16 @@
 		background: transparent;
 		padding: 0.5rem;
 	}
+
+	:global(.grid-stack-placeholder > .placeholder-content) {
+		position: absolute !important;
+		width: auto !important;
+		border: 2px dashed color-mix(in oklab, var(--muted-foreground) 25%, transparent) !important;
+		border-radius: 0.375rem !important;
+		background-color: rgba(0, 0, 0, 0.06) !important;
+	}
+
+	:global(.dark .grid-stack-placeholder > .placeholder-content) {
+		background-color: rgba(255, 255, 255, 0.06) !important;
+	}
 </style>

package/dist/lib/components/pages/reports/components/chart.svelte

@@ -8,20 +8,27 @@
 		chartRecord: any;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
-		context?: Record<string, any>;
 	}
 
 	const {
 		chartRecord,
 		onChartDeleted,
 		onChartEdited,
-		context,
 		...props
 	}: Props = $props();
 
 	const utils = props.utils;
 	const { UpdateDetailViewButton, Button } = utils.components;
 	const icons = utils.components.Icons;
+
+	function findCustomChartComponent(type: string): any {
+		const extensions = utils.ctx?.extensions ?? {};
+		for (const ext of Object.values(extensions) as any[]) {
+			const comp = ext.components?.[`reports.chart.${type}`];
+			if (comp) return comp;
+		}
+		return null;
+	}
 	let dataPromise = $state(getChartData());
 
 	async function getChartData() {
@@ -30,7 +37,6 @@
 			chartRecord.id,
 			{
 				action: "run_query",
-				context: JSON.stringify(context),
 			},
 		);
 
@@ -117,9 +123,14 @@
 				{:else if data.type === "metric"}
 					<Metric input={data.input} />
 				{:else}
-					<div class="text-muted-foreground">
-						The ({data.type}) chart type is unsupported
-					</div>
+					{@const CustomChart = findCustomChartComponent(data.type)}
+					{#if CustomChart}
+						<CustomChart input={data.input} {...props} />
+					{:else}
+						<div class="text-muted-foreground">
+							The ({data.type}) chart type is unsupported
+						</div>
+					{/if}
 				{/if}
 			{/await}
 		</svelte:boundary>

package/dist/lib/components/pages/reports/components/exportButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { toPng } from "html-to-image";
+	import { jsPDF } from "jspdf";
+
+	interface Props {
+		report: any;
+		utils: any;
+	}
+
+	const { report, utils }: Props = $props();
+	const { Button, Icons } = utils.components;
+
+	let exporting = $state(false);
+
+	async function handleExport() {
+		const container = document.querySelector<HTMLElement>(".charts-export-container");
+		if (!container || !report) return;
+		exporting = true;
+
+		try {
+			const backgroundColor = getComputedStyle(document.documentElement).backgroundColor;
+
+			const imgData = await toPng(container, {
+				pixelRatio: 2,
+				backgroundColor,
+				style: {
+					overflow: "visible",
+					height: `${container.scrollHeight}px`,
+				},
+			});
+
+			const img = new Image();
+			img.src = imgData;
+			await new Promise((r) => (img.onload = r));
+
+			const pdf = new jsPDF({ orientation: "landscape", unit: "px" });
+			const pageWidth = pdf.internal.pageSize.getWidth();
+			const pageHeight = pdf.internal.pageSize.getHeight();
+			const ratio = Math.min(pageWidth / img.width, pageHeight / img.height);
+
+			pdf.addImage(imgData, "PNG", 0, 0, img.width * ratio, img.height * ratio);
+			pdf.save(`${report.name ?? "report"}.pdf`);
+		} finally {
+			exporting = false;
+		}
+	}
+</script>
+
+<Button
+	variant="outline"
+	class="h-7 px-3 text-xs font-normal"
+	Icon={exporting ? Icons.LoaderCircle : Icons.Upload}
+	onclick={handleExport}
+	disabled={exporting}
+>
+	{exporting ? "Exporting..." : "Export"}
+</Button>

package/dist/lib/components/pages/reports/components/exportButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExportButtonProps = typeof __propDef.props;
+export type ExportButtonEvents = typeof __propDef.events;
+export type ExportButtonSlots = typeof __propDef.slots;
+export default class ExportButton extends SvelteComponentTyped<ExportButtonProps, ExportButtonEvents, ExportButtonSlots> {
+}
+export {};

package/dist/lib/components/pages/reports/components/report.svelte

@@ -1,33 +1,15 @@
 <script lang="ts">
-	import type { ExtensionProps } from "@lobb-js/studio";
-	import type { DateRange } from "bits-ui";
 	import { onMount } from "svelte";
 	import GridStackComponent from "../../../gridStack.svelte";
 	import Chart from "./chart.svelte";
+	import ExportButton from "./exportButton.svelte";
 
-	interface Props extends ExtensionProps {
-		reportId: string;
-	}
-
-	const props: Props = $props();
-	const { intlDate } = props.utils;
+	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
 		Icons,
-		RangeCalendarButton
-	} = props.utils.components;
-
-	let dateRangeValue: DateRange = $state({
-		start: intlDate.today(intlDate.getLocalTimeZone()).subtract({ days: 30 }),
-		end: intlDate.today(intlDate.getLocalTimeZone()),
-	});
-	let context = $derived({
-		dateRange: {
-			start: dateRangeValue.start?.toString(),
-			end: dateRangeValue.end?.toString(),
-		},
-	});
+	} = utils.components;
 
 	let report: any = $state(null);
 	let charts: any[] = $state([]);
@@ -35,13 +17,13 @@
 
 	async function loadCharts() {
 		loading = true;
-		const reportsRes = await props.utils.lobb.findAll("reports_dashboards", {
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
 			sort: "id",
-			filter: { id: props.reportId },
+			filter: { id: reportId },
 		});
 		report = (await reportsRes.json()).data[0];
 
-		const chartsRes = await props.utils.lobb.findAll("reports_charts", {
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
 			filter: { report_id: report.id },
 		});
 		charts = (await chartsRes.json()).data;
@@ -50,7 +32,7 @@
 
 	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
 		for (const change of changes) {
-			await props.utils.lobb.updateOne("reports_charts", change.id, {
+			await utils.lobb.updateOne("reports_charts", change.id, {
 				sort_order: change.order,
 				col_span: change.w,
 				row_span: change.h,
@@ -67,7 +49,7 @@
 
 <div class="report-layout">
 	{#if loading}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
 			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
 			<div class="flex flex-col items-center justify-center">
 				<div class="text-muted-foreground">Loading the dashboard...</div>
@@ -84,7 +66,7 @@
 				</div>
 			</div>
 			<div class="flex gap-2 self-end">
-				<RangeCalendarButton bind:value={dateRangeValue} />
+				<ExportButton {report} {utils} />
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: props.reportId, name: report.name } }}
@@ -98,7 +80,7 @@
 			</div>
 		</div>
 
-		<div class="overflow-auto p-2">
+		<div class="charts-export-container overflow-auto p-2">
 			{#if charts.length === 0}
 				<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
 					<Icons.CircleSlash2 class="opacity-50" size="50" />
@@ -117,15 +99,13 @@
 								{...gridItemAttrs(chart)}
 							>
 								<div class="grid-stack-item-content">
-									{#key context}
-										<Chart
-											chartRecord={chart}
-											onChartDeleted={async () => await loadCharts()}
-											onChartEdited={async () => await loadCharts()}
-											{context}
-											{...props}
-										/>
-									{/key}
+									<Chart
+										chartRecord={chart}
+										onChartDeleted={async () => await loadCharts()}
+										onChartEdited={async () => await loadCharts()}
+										{utils}
+										{...props}
+									/>
 								</div>
 							</div>
 						{/each}

package/extensions/reports/studio/lib/components/gridStack.svelte

@@ -45,11 +45,11 @@
 
 		setTimeout(() => { initialized = true; }, 0);
 
-		grid.on("dragstop resizestop", () => {
+		grid.on("dragstop", () => {
 			grid?.compact();
 		});
 
-		grid.on("change", () => {
+		function saveLayout() {
 			if (!onLayoutChange || !initialized) return;
 			const currentCols = grid!.getColumn();
 			if (currentCols === 1) return;
@@ -66,6 +66,13 @@
 					h: node.h,
 				}));
 			if (sorted.length > 0) onLayoutChange(sorted);
+		}
+
+		grid.on("change", saveLayout);
+
+		grid.on("resizestop", () => {
+			grid?.compact();
+			saveLayout();
 		});
 
 		resizeObserver = new ResizeObserver((entries) => {
@@ -102,4 +109,16 @@
 		background: transparent;
 		padding: 0.5rem;
 	}
+
+	:global(.grid-stack-placeholder > .placeholder-content) {
+		position: absolute !important;
+		width: auto !important;
+		border: 2px dashed color-mix(in oklab, var(--muted-foreground) 25%, transparent) !important;
+		border-radius: 0.375rem !important;
+		background-color: rgba(0, 0, 0, 0.06) !important;
+	}
+
+	:global(.dark .grid-stack-placeholder > .placeholder-content) {
+		background-color: rgba(255, 255, 255, 0.06) !important;
+	}
 </style>

package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte

@@ -8,20 +8,27 @@
 		chartRecord: any;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
-		context?: Record<string, any>;
 	}
 
 	const {
 		chartRecord,
 		onChartDeleted,
 		onChartEdited,
-		context,
 		...props
 	}: Props = $props();
 
 	const utils = props.utils;
 	const { UpdateDetailViewButton, Button } = utils.components;
 	const icons = utils.components.Icons;
+
+	function findCustomChartComponent(type: string): any {
+		const extensions = utils.ctx?.extensions ?? {};
+		for (const ext of Object.values(extensions) as any[]) {
+			const comp = ext.components?.[`reports.chart.${type}`];
+			if (comp) return comp;
+		}
+		return null;
+	}
 	let dataPromise = $state(getChartData());
 
 	async function getChartData() {
@@ -30,7 +37,6 @@
 			chartRecord.id,
 			{
 				action: "run_query",
-				context: JSON.stringify(context),
 			},
 		);
 
@@ -117,9 +123,14 @@
 				{:else if data.type === "metric"}
 					<Metric input={data.input} />
 				{:else}
-					<div class="text-muted-foreground">
-						The ({data.type}) chart type is unsupported
-					</div>
+					{@const CustomChart = findCustomChartComponent(data.type)}
+					{#if CustomChart}
+						<CustomChart input={data.input} {...props} />
+					{:else}
+						<div class="text-muted-foreground">
+							The ({data.type}) chart type is unsupported
+						</div>
+					{/if}
 				{/if}
 			{/await}
 		</svelte:boundary>

package/extensions/reports/studio/lib/components/pages/reports/components/exportButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { toPng } from "html-to-image";
+	import { jsPDF } from "jspdf";
+
+	interface Props {
+		report: any;
+		utils: any;
+	}
+
+	const { report, utils }: Props = $props();
+	const { Button, Icons } = utils.components;
+
+	let exporting = $state(false);
+
+	async function handleExport() {
+		const container = document.querySelector<HTMLElement>(".charts-export-container");
+		if (!container || !report) return;
+		exporting = true;
+
+		try {
+			const backgroundColor = getComputedStyle(document.documentElement).backgroundColor;
+
+			const imgData = await toPng(container, {
+				pixelRatio: 2,
+				backgroundColor,
+				style: {
+					overflow: "visible",
+					height: `${container.scrollHeight}px`,
+				},
+			});
+
+			const img = new Image();
+			img.src = imgData;
+			await new Promise((r) => (img.onload = r));
+
+			const pdf = new jsPDF({ orientation: "landscape", unit: "px" });
+			const pageWidth = pdf.internal.pageSize.getWidth();
+			const pageHeight = pdf.internal.pageSize.getHeight();
+			const ratio = Math.min(pageWidth / img.width, pageHeight / img.height);
+
+			pdf.addImage(imgData, "PNG", 0, 0, img.width * ratio, img.height * ratio);
+			pdf.save(`${report.name ?? "report"}.pdf`);
+		} finally {
+			exporting = false;
+		}
+	}
+</script>
+
+<Button
+	variant="outline"
+	class="h-7 px-3 text-xs font-normal"
+	Icon={exporting ? Icons.LoaderCircle : Icons.Upload}
+	onclick={handleExport}
+	disabled={exporting}
+>
+	{exporting ? "Exporting..." : "Export"}
+</Button>

package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte

@@ -1,33 +1,15 @@
 <script lang="ts">
-	import type { ExtensionProps } from "@lobb-js/studio";
-	import type { DateRange } from "bits-ui";
 	import { onMount } from "svelte";
 	import GridStackComponent from "../../../gridStack.svelte";
 	import Chart from "./chart.svelte";
+	import ExportButton from "./exportButton.svelte";
 
-	interface Props extends ExtensionProps {
-		reportId: string;
-	}
-
-	const props: Props = $props();
-	const { intlDate } = props.utils;
+	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
 		Icons,
-		RangeCalendarButton
-	} = props.utils.components;
-
-	let dateRangeValue: DateRange = $state({
-		start: intlDate.today(intlDate.getLocalTimeZone()).subtract({ days: 30 }),
-		end: intlDate.today(intlDate.getLocalTimeZone()),
-	});
-	let context = $derived({
-		dateRange: {
-			start: dateRangeValue.start?.toString(),
-			end: dateRangeValue.end?.toString(),
-		},
-	});
+	} = utils.components;
 
 	let report: any = $state(null);
 	let charts: any[] = $state([]);
@@ -35,13 +17,13 @@
 
 	async function loadCharts() {
 		loading = true;
-		const reportsRes = await props.utils.lobb.findAll("reports_dashboards", {
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
 			sort: "id",
-			filter: { id: props.reportId },
+			filter: { id: reportId },
 		});
 		report = (await reportsRes.json()).data[0];
 
-		const chartsRes = await props.utils.lobb.findAll("reports_charts", {
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
 			filter: { report_id: report.id },
 		});
 		charts = (await chartsRes.json()).data;
@@ -50,7 +32,7 @@
 
 	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
 		for (const change of changes) {
-			await props.utils.lobb.updateOne("reports_charts", change.id, {
+			await utils.lobb.updateOne("reports_charts", change.id, {
 				sort_order: change.order,
 				col_span: change.w,
 				row_span: change.h,
@@ -67,7 +49,7 @@
 
 <div class="report-layout">
 	{#if loading}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
 			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
 			<div class="flex flex-col items-center justify-center">
 				<div class="text-muted-foreground">Loading the dashboard...</div>
@@ -84,7 +66,7 @@
 				</div>
 			</div>
 			<div class="flex gap-2 self-end">
-				<RangeCalendarButton bind:value={dateRangeValue} />
+				<ExportButton {report} {utils} />
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: props.reportId, name: report.name } }}
@@ -98,7 +80,7 @@
 			</div>
 		</div>
 
-		<div class="overflow-auto p-2">
+		<div class="charts-export-container overflow-auto p-2">
 			{#if charts.length === 0}
 				<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
 					<Icons.CircleSlash2 class="opacity-50" size="50" />
@@ -117,15 +99,13 @@
 								{...gridItemAttrs(chart)}
 							>
 								<div class="grid-stack-item-content">
-									{#key context}
-										<Chart
-											chartRecord={chart}
-											onChartDeleted={async () => await loadCharts()}
-											onChartEdited={async () => await loadCharts()}
-											{context}
-											{...props}
-										/>
-									{/key}
+									<Chart
+										chartRecord={chart}
+										onChartDeleted={async () => await loadCharts()}
+										onChartEdited={async () => await loadCharts()}
+										{utils}
+										{...props}
+									/>
 								</div>
 							</div>
 						{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
@@ -38,13 +38,15 @@
     "chart.js": "^4.4.8",
     "gridstack": "^12.6.0",
     "hono": "^4.7.0",
+    "html-to-image": "^1.11.13",
+    "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",
     "openapi-types": "^12.1.3"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@playwright/test": "^1.58.2",
-    "@lobb-js/studio": "^0.18.1",
+    "@lobb-js/studio": "^0.19.1",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.55.0",