@lobb-js/lobb-ext-reports 0.4.1 → 0.6.0

package/dist/lib/components/gridStack.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { onMount, onDestroy, type Snippet } from "svelte";
+	import { GridStack } from "gridstack";
+	import "gridstack/dist/gridstack.min.css";
+
+	interface Props {
+		column?: number;
+		cellHeight?: string;
+		onLayoutChange?: (changes: { id: string; order: number; w: number; h: number }[]) => void;
+		children: Snippet;
+	}
+
+	let {
+		column = 12,
+		cellHeight = "150px",
+		onLayoutChange,
+		children,
+	}: Props = $props();
+
+	let gridEl: HTMLElement | undefined = $state();
+	let grid: GridStack | null = null;
+	let initialized = false;
+	let resizeObserver: ResizeObserver | null = null;
+
+	onMount(() => {
+		if (!gridEl) return;
+
+		grid = GridStack.init(
+			{
+				column,
+				cellHeight,
+				margin: "0.5rem",
+				float: false,
+				animate: true,
+				columnOpts: {
+					layout: "moveScale",
+					breakpointForWindow: false,
+					breakpoints: [
+						{ w: 480,  c: 1 },
+					],
+				},
+			},
+			gridEl,
+		);
+
+		setTimeout(() => { initialized = true; }, 0);
+
+		grid.on("dragstop resizestop", () => {
+			grid?.compact();
+		});
+
+		grid.on("change", () => {
+			if (!onLayoutChange || !initialized) return;
+			const currentCols = grid!.getColumn();
+			if (currentCols === 1) return;
+			const sorted = (grid!.engine.nodes as any[])
+				.filter((n) => {
+					const id = n.el?.getAttribute("data-gs-id");
+					return id != null && id !== "null";
+				})
+				.sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x))
+				.map((node, index) => ({
+					id: node.el!.getAttribute("data-gs-id") as string,
+					order: index,
+					w: Math.round(node.w * (column / currentCols)),
+					h: node.h,
+				}));
+			if (sorted.length > 0) onLayoutChange(sorted);
+		});
+
+		resizeObserver = new ResizeObserver((entries) => {
+			window.dispatchEvent(new Event("resize"));
+			const width = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
+			if (width <= 480) {
+				grid?.disable();
+			} else {
+				grid?.enable();
+			}
+		});
+		resizeObserver.observe(gridEl);
+	});
+
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
+		grid?.destroy(false);
+		grid = null;
+	});
+</script>
+
+<div class="grid-stack" bind:this={gridEl}>
+	{@render children()}
+</div>
+
+<style>
+	:global(.grid-stack-item-content) {
+		inset: 0;
+		position: absolute;
+	}
+
+	:global(.grid-stack) {
+		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/gridStack.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import "gridstack/dist/gridstack.min.css";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridStackProps = typeof __propDef.props;
+export type GridStackEvents = typeof __propDef.events;
+export type GridStackSlots = typeof __propDef.slots;
+export default class GridStack extends SvelteComponentTyped<GridStackProps, GridStackEvents, GridStackSlots> {
+}
+export {};

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

@@ -2,25 +2,33 @@
 	import type { ExtensionProps } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
+	import Metric from "./charts/metric.svelte";
 
 	interface Props extends ExtensionProps {
 		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() {
@@ -29,7 +37,6 @@
 			chartRecord.id,
 			{
 				action: "run_query",
-				context: JSON.stringify(context),
 			},
 		);
 
@@ -57,7 +64,7 @@
 	}
 </script>
 
-<div class="gridContainer h-96 rounded-md border bg-background">
+<div class="gridContainer h-full rounded-md border bg-background">
 	<div class="flex items-center justify-between border-b p-2 text-sm">
 		<div>{chartRecord.title}</div>
 		<div class="flex">
@@ -78,7 +85,7 @@
 			></Button>
 		</div>
 	</div>
-	<div class="flex items-center justify-center overflow-auto">
+	<div class="flex min-h-0 items-center justify-center overflow-hidden">
 		<svelte:boundary>
 			{#snippet failed(error, reset)}
 				<div
@@ -93,7 +100,7 @@
 			{/snippet}
 			{#await dataPromise}
 				<div
-					class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
+					class="flex flex-col gap-4 h-full w-full justify-center items-center"
 				>
 					<icons.LoaderCircle
 						class="animate-spin opacity-50"
@@ -113,10 +120,17 @@
 					<Table input={data.input} {...props} />
 				{:else if data.type === "chartjs"}
 					<ChartJs input={data.input} {...props} />
+				{: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/charts/metric.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Input {
+		value: string | number;
+		label?: string;
+		prefix?: string;
+		suffix?: string;
+	}
+
+	interface Props {
+		input: Input;
+	}
+
+	const { input }: Props = $props();
+</script>
+
+<div class="flex h-full w-full select-none flex-col items-center justify-center gap-1 p-4">
+	<div class="text-5xl font-bold tabular-nums tracking-tight">
+		{#if input.prefix}<span class="text-2xl font-medium text-muted-foreground">{input.prefix}</span>{/if}{input.value}{#if input.suffix}<span class="text-2xl font-medium text-muted-foreground">{input.suffix}</span>{/if}
+	</div>
+	{#if input.label}
+		<div class="text-sm text-muted-foreground">{input.label}</div>
+	{/if}
+</div>

package/dist/lib/components/pages/reports/components/charts/metric.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 MetricProps = typeof __propDef.props;
+export type MetricEvents = typeof __propDef.events;
+export type MetricSlots = typeof __propDef.slots;
+export default class Metric extends SvelteComponentTyped<MetricProps, MetricEvents, MetricSlots> {
+}
+export {};

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,156 +1,126 @@
 <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 chartsPromise = $state(getCharts());
+	let charts: any[] = $state([]);
+	let loading = $state(true);
+
+	async function loadCharts() {
+		loading = true;
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: { id: reportId },
+		});
+		report = (await reportsRes.json()).data[0];
+
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
+			filter: { report_id: report.id },
+		});
+		charts = (await chartsRes.json()).data;
+		loading = false;
+	}
 
-	async function getCharts() {
-		const reportsResponse = await props.utils.lobb.findAll(
-			"reports_dashboards",
-			{
-				sort: "id",
-				filter: {
-					id: props.reportId,
-				},
-			},
-		);
-		report = (await reportsResponse.json()).data[0];
-		const chartsResponse = await props.utils.lobb.findAll(
-			"reports_charts",
-			{
-				filter: {
-					report_id: report.id,
-				},
-			},
-		);
-		return (await chartsResponse.json()).data;
+	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
+		for (const change of changes) {
+			await utils.lobb.updateOne("reports_charts", change.id, {
+				sort_order: change.order,
+				col_span: change.w,
+				row_span: change.h,
+			});
+		}
 	}
 
-	async function reloadChart() {
-		chartsPromise = new Promise(() => {});
-		chartsPromise = Promise.resolve(await getCharts());
+	function gridItemAttrs(chart: any): Record<string, unknown> {
+		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
 	}
+
+	onMount(() => loadCharts());
 </script>
 
-<div class="gridContainer relative h-full w-full flex-col overflow-auto">
-	{#await chartsPromise}
-		<div
-			class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
-		>
+<div class="report-layout">
+	{#if loading}
+		<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>
-				<div class="text-muted-foreground text-xs">
-					Loading all the charts of the selected dashboard
-				</div>
+				<div class="text-muted-foreground">Loading the dashboard...</div>
+				<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
 			</div>
 		</div>
-	{:then charts}
-		<div
-			class="flex justify-between gap-2 overflow-auto border-b bg-background p-2"
-		>
+	{:else}
+		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
 			<div class="flex gap-2">
-				<div class="mt-1">
-					<SidebarTrigger />
-				</div>
+				<div class="mt-1"><SidebarTrigger /></div>
 				<div class="flex flex-col justify-center">
 					<h2 class="font-medium text-primary">{report.name}</h2>
-					<div class="text-xs text-muted-foreground">
-						{report.description}
-					</div>
+					<div class="text-xs text-muted-foreground">{report.description}</div>
 				</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,
-						},
-					}}
+					values={{ report_id: { id: props.reportId, name: report.name } }}
 					variant="default"
 					class="h-7 px-3 text-xs font-normal"
 					Icon={Icons.Plus}
-					onSuccessfullSave={async () => await reloadChart()}
+					onSuccessfullSave={async () => await loadCharts()}
 				>
 					Create chart
 				</CreateDetailViewButton>
 			</div>
 		</div>
-		<div class="overflow-auto">
-			<div class="chartsGridContainer w-full flex-wrap gap-4 p-4">
-				{#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" />
-						<div class="flex flex-col items-center justify-center">
-							<div>No charts available</div>
-							<div class="text-xs">
-								Create a new chart to fill this report page
-							</div>
-						</div>
+
+		<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" />
+					<div class="flex flex-col items-center justify-center">
+						<div>No charts available</div>
+						<div class="text-xs">Create a new chart to fill this report page</div>
 					</div>
-				{:else}
-					{#each charts as chart}
-						{#key context}
-							<Chart
-								chartRecord={chart}
-								onChartDeleted={async () => await reloadChart()}
-								onChartEdited={async () => await reloadChart()}
-								{context}
-								{...props}
-							/>
-						{/key}
-					{/each}
-				{/if}
-			</div>
+				</div>
+			{:else}
+				{#key charts}
+					<GridStackComponent onLayoutChange={handleLayoutChange}>
+						{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
+							<div
+								class="grid-stack-item"
+								data-gs-id={chart.id}
+								{...gridItemAttrs(chart)}
+							>
+								<div class="grid-stack-item-content">
+									<Chart
+										chartRecord={chart}
+										onChartDeleted={async () => await loadCharts()}
+										onChartEdited={async () => await loadCharts()}
+										{utils}
+										{...props}
+									/>
+								</div>
+							</div>
+						{/each}
+					</GridStackComponent>
+				{/key}
+			{/if}
 		</div>
-	{/await}
+	{/if}
 </div>
 
 <style>
-	.gridContainer {
+	.report-layout {
 		display: grid;
-		grid-template-columns: 1fr;
 		grid-template-rows: auto 1fr;
-	}
-
-	.chartsGridContainer {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-		grid-gap: 10px;
+		width: 100%;
+		height: 100%;
 	}
 </style>

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

@@ -63,7 +63,7 @@
 
 <Sidebar title="Reports" data={sideBarData}>
 	{#snippet belowSearch()}
-		<div class="p-2 pb-0">
+		<div class="p-2">
 			<CreateDetailViewButton
 				collectionName="reports_dashboards"
 				variant="outline"
@@ -105,7 +105,7 @@
 			</div>
 		{/if}
 	{/snippet}
-	<div class="relative h-full w-full bg-muted">
+	<div class="flex h-full w-full flex-col bg-muted">
 		{#if reportId}
 			{#key reportId}
 				<Report {utils} {reportId} {...props} />

package/extensions/reports/collections/charts.ts

@@ -8,30 +8,47 @@ export const charts: CollectionConfig = {
     },
     "report_id": {
       "type": "integer",
-      "validators": {
-        "required": true,
-      },
+      "required": true,
     },
     "title": {
       "type": "string",
       "length": 255,
-      "validators": {
-        "required": true,
-      },
+      "required": true,
     },
     "description": {
       "type": "string",
       "length": 255,
     },
+    "sort_order": {
+      "type": "integer",
+    },
+    "row_span": {
+      "type": "integer",
+      "default": 2,
+    },
+    "col_span": {
+      "type": "integer",
+      "default": 6,
+      "enum": [
+        { "value": 1, "description": "1/12" },
+        { "value": 2, "description": "2/12" },
+        { "value": 3, "description": "3/12" },
+        { "value": 4, "description": "4/12" },
+        { "value": 5, "description": "5/12" },
+        { "value": 6, "description": "6/12" },
+        { "value": 7, "description": "7/12" },
+        { "value": 8, "description": "8/12" },
+        { "value": 9, "description": "9/12" },
+        { "value": 10, "description": "10/12" },
+        { "value": 11, "description": "11/12" },
+        { "value": 12, "description": "Full width" },
+      ],
+    },
     "chart": {
       "type": "text",
-      "validators": {
-        "required": true,
-      },
-      "pre_processors": {
-        "default":
-          "async function chart(query: QueryFn, context: Record<string, unknown>) {\n\treturn {\n\t\ttype: 'table',\n\t\tinput: {\n\t\t\tdata: []\n\t\t}\n\t};\n}",
-      },
+      "required": true,
+      "default":
+        "async function chart(query: QueryFn, context: Record<string, unknown>) {\n\treturn {\n\t\ttype: 'table',\n\t\tinput: {\n\t\t\tdata: []\n\t\t}\n\t};\n}",
       "ui": {
         "input": {
           "type": "code",

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

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { onMount, onDestroy, type Snippet } from "svelte";
+	import { GridStack } from "gridstack";
+	import "gridstack/dist/gridstack.min.css";
+
+	interface Props {
+		column?: number;
+		cellHeight?: string;
+		onLayoutChange?: (changes: { id: string; order: number; w: number; h: number }[]) => void;
+		children: Snippet;
+	}
+
+	let {
+		column = 12,
+		cellHeight = "150px",
+		onLayoutChange,
+		children,
+	}: Props = $props();
+
+	let gridEl: HTMLElement | undefined = $state();
+	let grid: GridStack | null = null;
+	let initialized = false;
+	let resizeObserver: ResizeObserver | null = null;
+
+	onMount(() => {
+		if (!gridEl) return;
+
+		grid = GridStack.init(
+			{
+				column,
+				cellHeight,
+				margin: "0.5rem",
+				float: false,
+				animate: true,
+				columnOpts: {
+					layout: "moveScale",
+					breakpointForWindow: false,
+					breakpoints: [
+						{ w: 480,  c: 1 },
+					],
+				},
+			},
+			gridEl,
+		);
+
+		setTimeout(() => { initialized = true; }, 0);
+
+		grid.on("dragstop resizestop", () => {
+			grid?.compact();
+		});
+
+		grid.on("change", () => {
+			if (!onLayoutChange || !initialized) return;
+			const currentCols = grid!.getColumn();
+			if (currentCols === 1) return;
+			const sorted = (grid!.engine.nodes as any[])
+				.filter((n) => {
+					const id = n.el?.getAttribute("data-gs-id");
+					return id != null && id !== "null";
+				})
+				.sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x))
+				.map((node, index) => ({
+					id: node.el!.getAttribute("data-gs-id") as string,
+					order: index,
+					w: Math.round(node.w * (column / currentCols)),
+					h: node.h,
+				}));
+			if (sorted.length > 0) onLayoutChange(sorted);
+		});
+
+		resizeObserver = new ResizeObserver((entries) => {
+			window.dispatchEvent(new Event("resize"));
+			const width = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
+			if (width <= 480) {
+				grid?.disable();
+			} else {
+				grid?.enable();
+			}
+		});
+		resizeObserver.observe(gridEl);
+	});
+
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
+		grid?.destroy(false);
+		grid = null;
+	});
+</script>
+
+<div class="grid-stack" bind:this={gridEl}>
+	{@render children()}
+</div>
+
+<style>
+	:global(.grid-stack-item-content) {
+		inset: 0;
+		position: absolute;
+	}
+
+	:global(.grid-stack) {
+		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

@@ -2,25 +2,33 @@
 	import type { ExtensionProps } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
+	import Metric from "./charts/metric.svelte";
 
 	interface Props extends ExtensionProps {
 		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() {
@@ -29,7 +37,6 @@
 			chartRecord.id,
 			{
 				action: "run_query",
-				context: JSON.stringify(context),
 			},
 		);
 
@@ -57,7 +64,7 @@
 	}
 </script>
 
-<div class="gridContainer h-96 rounded-md border bg-background">
+<div class="gridContainer h-full rounded-md border bg-background">
 	<div class="flex items-center justify-between border-b p-2 text-sm">
 		<div>{chartRecord.title}</div>
 		<div class="flex">
@@ -78,7 +85,7 @@
 			></Button>
 		</div>
 	</div>
-	<div class="flex items-center justify-center overflow-auto">
+	<div class="flex min-h-0 items-center justify-center overflow-hidden">
 		<svelte:boundary>
 			{#snippet failed(error, reset)}
 				<div
@@ -93,7 +100,7 @@
 			{/snippet}
 			{#await dataPromise}
 				<div
-					class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
+					class="flex flex-col gap-4 h-full w-full justify-center items-center"
 				>
 					<icons.LoaderCircle
 						class="animate-spin opacity-50"
@@ -113,10 +120,17 @@
 					<Table input={data.input} {...props} />
 				{:else if data.type === "chartjs"}
 					<ChartJs input={data.input} {...props} />
+				{: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/charts/metric.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Input {
+		value: string | number;
+		label?: string;
+		prefix?: string;
+		suffix?: string;
+	}
+
+	interface Props {
+		input: Input;
+	}
+
+	const { input }: Props = $props();
+</script>
+
+<div class="flex h-full w-full select-none flex-col items-center justify-center gap-1 p-4">
+	<div class="text-5xl font-bold tabular-nums tracking-tight">
+		{#if input.prefix}<span class="text-2xl font-medium text-muted-foreground">{input.prefix}</span>{/if}{input.value}{#if input.suffix}<span class="text-2xl font-medium text-muted-foreground">{input.suffix}</span>{/if}
+	</div>
+	{#if input.label}
+		<div class="text-sm text-muted-foreground">{input.label}</div>
+	{/if}
+</div>

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,156 +1,126 @@
 <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 chartsPromise = $state(getCharts());
+	let charts: any[] = $state([]);
+	let loading = $state(true);
+
+	async function loadCharts() {
+		loading = true;
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: { id: reportId },
+		});
+		report = (await reportsRes.json()).data[0];
+
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
+			filter: { report_id: report.id },
+		});
+		charts = (await chartsRes.json()).data;
+		loading = false;
+	}
 
-	async function getCharts() {
-		const reportsResponse = await props.utils.lobb.findAll(
-			"reports_dashboards",
-			{
-				sort: "id",
-				filter: {
-					id: props.reportId,
-				},
-			},
-		);
-		report = (await reportsResponse.json()).data[0];
-		const chartsResponse = await props.utils.lobb.findAll(
-			"reports_charts",
-			{
-				filter: {
-					report_id: report.id,
-				},
-			},
-		);
-		return (await chartsResponse.json()).data;
+	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
+		for (const change of changes) {
+			await utils.lobb.updateOne("reports_charts", change.id, {
+				sort_order: change.order,
+				col_span: change.w,
+				row_span: change.h,
+			});
+		}
 	}
 
-	async function reloadChart() {
-		chartsPromise = new Promise(() => {});
-		chartsPromise = Promise.resolve(await getCharts());
+	function gridItemAttrs(chart: any): Record<string, unknown> {
+		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
 	}
+
+	onMount(() => loadCharts());
 </script>
 
-<div class="gridContainer relative h-full w-full flex-col overflow-auto">
-	{#await chartsPromise}
-		<div
-			class="flex flex-col gap-4 h-full w-full absolute justify-center items-center"
-		>
+<div class="report-layout">
+	{#if loading}
+		<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>
-				<div class="text-muted-foreground text-xs">
-					Loading all the charts of the selected dashboard
-				</div>
+				<div class="text-muted-foreground">Loading the dashboard...</div>
+				<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
 			</div>
 		</div>
-	{:then charts}
-		<div
-			class="flex justify-between gap-2 overflow-auto border-b bg-background p-2"
-		>
+	{:else}
+		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
 			<div class="flex gap-2">
-				<div class="mt-1">
-					<SidebarTrigger />
-				</div>
+				<div class="mt-1"><SidebarTrigger /></div>
 				<div class="flex flex-col justify-center">
 					<h2 class="font-medium text-primary">{report.name}</h2>
-					<div class="text-xs text-muted-foreground">
-						{report.description}
-					</div>
+					<div class="text-xs text-muted-foreground">{report.description}</div>
 				</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,
-						},
-					}}
+					values={{ report_id: { id: props.reportId, name: report.name } }}
 					variant="default"
 					class="h-7 px-3 text-xs font-normal"
 					Icon={Icons.Plus}
-					onSuccessfullSave={async () => await reloadChart()}
+					onSuccessfullSave={async () => await loadCharts()}
 				>
 					Create chart
 				</CreateDetailViewButton>
 			</div>
 		</div>
-		<div class="overflow-auto">
-			<div class="chartsGridContainer w-full flex-wrap gap-4 p-4">
-				{#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" />
-						<div class="flex flex-col items-center justify-center">
-							<div>No charts available</div>
-							<div class="text-xs">
-								Create a new chart to fill this report page
-							</div>
-						</div>
+
+		<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" />
+					<div class="flex flex-col items-center justify-center">
+						<div>No charts available</div>
+						<div class="text-xs">Create a new chart to fill this report page</div>
 					</div>
-				{:else}
-					{#each charts as chart}
-						{#key context}
-							<Chart
-								chartRecord={chart}
-								onChartDeleted={async () => await reloadChart()}
-								onChartEdited={async () => await reloadChart()}
-								{context}
-								{...props}
-							/>
-						{/key}
-					{/each}
-				{/if}
-			</div>
+				</div>
+			{:else}
+				{#key charts}
+					<GridStackComponent onLayoutChange={handleLayoutChange}>
+						{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
+							<div
+								class="grid-stack-item"
+								data-gs-id={chart.id}
+								{...gridItemAttrs(chart)}
+							>
+								<div class="grid-stack-item-content">
+									<Chart
+										chartRecord={chart}
+										onChartDeleted={async () => await loadCharts()}
+										onChartEdited={async () => await loadCharts()}
+										{utils}
+										{...props}
+									/>
+								</div>
+							</div>
+						{/each}
+					</GridStackComponent>
+				{/key}
+			{/if}
 		</div>
-	{/await}
+	{/if}
 </div>
 
 <style>
-	.gridContainer {
+	.report-layout {
 		display: grid;
-		grid-template-columns: 1fr;
 		grid-template-rows: auto 1fr;
-	}
-
-	.chartsGridContainer {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-		grid-gap: 10px;
+		width: 100%;
+		height: 100%;
 	}
 </style>

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

@@ -63,7 +63,7 @@
 
 <Sidebar title="Reports" data={sideBarData}>
 	{#snippet belowSearch()}
-		<div class="p-2 pb-0">
+		<div class="p-2">
 			<CreateDetailViewButton
 				collectionName="reports_dashboards"
 				variant="outline"
@@ -105,7 +105,7 @@
 			</div>
 		{/if}
 	{/snippet}
-	<div class="relative h-full w-full bg-muted">
+	<div class="flex h-full w-full flex-col bg-muted">
 		{#if reportId}
 			{#key reportId}
 				<Report {utils} {reportId} {...props} />

package/extensions/reports/tests/configs/simple.ts

@@ -33,21 +33,15 @@ export const simpleConfig: Config = {
         donor_name: {
           type: "string",
           length: 255,
-          validators: {
-            required: true,
-          },
+          required: true,
         },
         amount: {
           type: "decimal",
-          validators: {
-            required: true,
-          },
+          required: true,
         },
         created_at: {
           type: "date",
-          pre_processors: {
-            default: "{{ now }}",
-          },
+          default: "{{ now }}",
         },
       },
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.4.1",
-  "license": "AGPL-3.0-only",
+  "version": "0.6.0",
+  "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,16 +34,19 @@
     "package": "svelte-package --input extensions/reports/studio"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.14.0",
+    "@lobb-js/core": "^0.23.0",
     "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.8.1",
+    "@lobb-js/studio": "^0.19.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.55.0",