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

package/dist/lib/components/gridStack.svelte

@@ -3,17 +3,21 @@
 	import { GridStack } from "gridstack";
 	import "gridstack/dist/gridstack.min.css";
 
+	interface LayoutItem { id: string; order: number; w: number; h: number; }
+
 	interface Props {
 		column?: number;
 		cellHeight?: string;
-		onLayoutChange?: (changes: { id: string; order: number; w: number; h: number }[]) => void;
+		editMode?: boolean;
+		currentLayout?: LayoutItem[];
 		children: Snippet;
 	}
 
 	let {
 		column = 12,
 		cellHeight = "150px",
-		onLayoutChange,
+		editMode = $bindable(false),
+		currentLayout = $bindable([]),
 		children,
 	}: Props = $props();
 
@@ -21,6 +25,42 @@
 	let grid: GridStack | null = null;
 	let initialized = false;
 	let resizeObserver: ResizeObserver | null = null;
+	let lastWidth = 0;
+
+	function getResponsiveColumns(width: number): number {
+		if (width >= 1200) return 12;
+		if (width >= 768) return 6;
+		if (width >= 480) return 2;
+		return 1;
+	}
+
+	function collectLayout(): LayoutItem[] {
+		if (!grid) return [];
+		return (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: node.w,
+				h: node.h,
+			}));
+	}
+
+	$effect(() => {
+		const mode = editMode; // read first so Svelte always tracks it as a dependency
+		if (!grid || !initialized) return;
+		if (mode) {
+			grid.column(12);
+			grid.enable();
+		} else {
+			grid.column(getResponsiveColumns(lastWidth));
+			grid.disable();
+		}
+	});
 
 	onMount(() => {
 		if (!gridEl) return;
@@ -32,49 +72,26 @@
 				margin: "0.5rem",
 				float: false,
 				animate: true,
-				columnOpts: {
-					layout: "moveScale",
-					breakpointForWindow: false,
-					breakpoints: [
-						{ w: 480,  c: 1 },
-					],
-				},
 			},
 			gridEl,
 		);
 
+		lastWidth = gridEl.offsetWidth;
+		grid.column(getResponsiveColumns(lastWidth));
+		grid.disable();
+
 		setTimeout(() => { initialized = true; }, 0);
 
-		grid.on("dragstop resizestop", () => {
+		grid.on("change 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);
+			currentLayout = collectLayout();
 		});
 
 		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();
+			lastWidth = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
+			if (!editMode) {
+				grid?.column(getResponsiveColumns(lastWidth));
 			}
 		});
 		resizeObserver.observe(gridEl);

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

@@ -4,16 +4,25 @@
 	import ChartJs from "./charts/chartJs.svelte";
 	import Metric from "./charts/metric.svelte";
 
+	interface ChartClickEvent {
+		type: string;
+		label: string;
+		value: any;
+		index: number;
+	}
+
 	interface Props extends ExtensionProps {
 		chartRecord: any;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
+		onChartClick?: (event: ChartClickEvent) => void;
 	}
 
 	const {
 		chartRecord,
 		onChartDeleted,
 		onChartEdited,
+		onChartClick,
 		...props
 	}: Props = $props();
 
@@ -119,13 +128,13 @@
 				{#if data.type === "table"}
 					<Table input={data.input} {...props} />
 				{:else if data.type === "chartjs"}
-					<ChartJs input={data.input} {...props} />
+					<ChartJs input={data.input} onClick={onChartClick} {...props} />
 				{:else if data.type === "metric"}
 					<Metric input={data.input} />
 				{:else}
 					{@const CustomChart = findCustomChartComponent(data.type)}
 					{#if CustomChart}
-						<CustomChart input={data.input} {...props} />
+						<CustomChart input={data.input} onClick={onChartClick} {...props} />
 					{:else}
 						<div class="text-muted-foreground">
 							The ({data.type}) chart type is unsupported

package/dist/lib/components/pages/reports/components/charts/chartJs.svelte

@@ -3,13 +3,13 @@
 
 	import { onMount } from 'svelte';
 	import { Chart } from 'chart.js/auto';
-	import { merge } from 'lodash-es';
 
 	interface Props extends ExtensionProps {
 		input: any;
+		onClick?: (event: any) => void;
 	}
 
-	const { input }: Props = $props();
+	const { input, onClick }: Props = $props();
 
 	let canvas: HTMLCanvasElement;
 	let chart: Chart;
@@ -18,18 +18,18 @@
 		if (canvas) {
 			const ctx = canvas.getContext('2d');
 			if (ctx) {
-				chart = new Chart(
-					ctx,
-					merge(
-						{
-							options: {
-								responsive: true,
-								maintainAspectRatio: false
-							}
-						},
-						$state.snapshot(input)
-					)
-				);
+				const snapshot = $state.snapshot(input);
+				chart = new Chart(ctx, {
+					...snapshot,
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						...snapshot.options,
+						...(onClick ? {
+							onClick: onClick
+						} : {}),
+					},
+				});
 			}
 		}
 

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

@@ -2,21 +2,24 @@
 	import { onMount } from "svelte";
 	import GridStackComponent from "../../../gridStack.svelte";
 	import Chart from "./chart.svelte";
-	import ExportButton from "./exportButton.svelte";
 
 	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
+		Button,
 		Icons,
 	} = utils.components;
 
 	let report: any = $state(null);
 	let charts: any[] = $state([]);
 	let loading = $state(true);
+	let editMode = $state(false);
+	let containerWidth = $state(0);
+	let currentLayout = $state<{ id: string; order: number; w: number; h: number }[]>([]);
 
-	async function loadCharts() {
-		loading = true;
+	async function loadCharts({ showLoading = true } = {}) {
+		if (showLoading) loading = true;
 		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
 			sort: "id",
 			filter: { id: reportId },
@@ -27,10 +30,10 @@
 			filter: { report_id: report.id },
 		});
 		charts = (await chartsRes.json()).data;
-		loading = false;
+		if (showLoading) loading = false;
 	}
 
-	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
+	async function saveChartsLayout(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,
@@ -40,14 +43,25 @@
 		}
 	}
 
-	function gridItemAttrs(chart: any): Record<string, unknown> {
+	function getChartGridSize(chart: any): Record<string, unknown> {
 		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
 	}
 
+	function handleChartClick(_event: any, elements: any[], chart: any) {
+		if (!elements.length) return;
+		const { index, datasetIndex } = elements[0];
+		const dataset = chart.data.datasets[datasetIndex];
+		utils.emitEvent("reports.chart.click", {
+			label: chart.data.labels?.[index],
+			value: dataset.data[index],
+			ids: dataset.ids?.[index],
+		});
+	}
+
 	onMount(() => loadCharts());
 </script>
 
-<div class="report-layout">
+<div class="report-layout" bind:clientWidth={containerWidth}>
 	{#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" />
@@ -66,17 +80,50 @@
 				</div>
 			</div>
 			<div class="flex gap-2 self-end">
-				<ExportButton {report} {utils} />
-				<CreateDetailViewButton
-					collectionName="reports_charts"
-					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 loadCharts()}
-				>
-					Create chart
-				</CreateDetailViewButton>
+				{#if editMode}
+					<Button
+						variant="ghost"
+						class="h-7 px-3 text-xs font-normal text-muted-foreground"
+						onclick={() => {
+							editMode = false;
+							loadCharts({ showLoading: false });
+						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="default"
+						class="h-7 px-3 text-xs font-normal"
+						Icon={Icons.Check}
+						onclick={async () => {
+							await saveChartsLayout(currentLayout);
+							editMode = false;
+						}}
+					>
+						Save layout
+					</Button>
+				{:else}
+					{#if containerWidth >= 1200}
+						<Button
+							variant="outline"
+							class="h-7 px-3 text-xs font-normal"
+							Icon={Icons.LayoutDashboard}
+							onclick={() => (editMode = true)}
+						>
+							Edit layout
+						</Button>
+					{/if}
+					<CreateDetailViewButton
+						collectionName="reports_charts"
+						values={{ report_id: { id: reportId, name: report.name } }}
+						variant="default"
+						class="h-7 px-3 text-xs font-normal"
+						Icon={Icons.Plus}
+						onSuccessfullSave={async () => await loadCharts()}
+					>
+						Create chart
+					</CreateDetailViewButton>
+				{/if}
 			</div>
 		</div>
 
@@ -91,18 +138,19 @@
 				</div>
 			{:else}
 				{#key charts}
-					<GridStackComponent onLayoutChange={handleLayoutChange}>
+					<GridStackComponent bind:editMode bind:currentLayout>
 						{#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)}
+								{...getChartGridSize(chart)}
 							>
 								<div class="grid-stack-item-content">
 									<Chart
 										chartRecord={chart}
 										onChartDeleted={async () => await loadCharts()}
 										onChartEdited={async () => await loadCharts()}
+										onChartClick={handleChartClick}
 										{utils}
 										{...props}
 									/>

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

@@ -3,17 +3,21 @@
 	import { GridStack } from "gridstack";
 	import "gridstack/dist/gridstack.min.css";
 
+	interface LayoutItem { id: string; order: number; w: number; h: number; }
+
 	interface Props {
 		column?: number;
 		cellHeight?: string;
-		onLayoutChange?: (changes: { id: string; order: number; w: number; h: number }[]) => void;
+		editMode?: boolean;
+		currentLayout?: LayoutItem[];
 		children: Snippet;
 	}
 
 	let {
 		column = 12,
 		cellHeight = "150px",
-		onLayoutChange,
+		editMode = $bindable(false),
+		currentLayout = $bindable([]),
 		children,
 	}: Props = $props();
 
@@ -21,6 +25,42 @@
 	let grid: GridStack | null = null;
 	let initialized = false;
 	let resizeObserver: ResizeObserver | null = null;
+	let lastWidth = 0;
+
+	function getResponsiveColumns(width: number): number {
+		if (width >= 1200) return 12;
+		if (width >= 768) return 6;
+		if (width >= 480) return 2;
+		return 1;
+	}
+
+	function collectLayout(): LayoutItem[] {
+		if (!grid) return [];
+		return (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: node.w,
+				h: node.h,
+			}));
+	}
+
+	$effect(() => {
+		const mode = editMode; // read first so Svelte always tracks it as a dependency
+		if (!grid || !initialized) return;
+		if (mode) {
+			grid.column(12);
+			grid.enable();
+		} else {
+			grid.column(getResponsiveColumns(lastWidth));
+			grid.disable();
+		}
+	});
 
 	onMount(() => {
 		if (!gridEl) return;
@@ -32,49 +72,26 @@
 				margin: "0.5rem",
 				float: false,
 				animate: true,
-				columnOpts: {
-					layout: "moveScale",
-					breakpointForWindow: false,
-					breakpoints: [
-						{ w: 480,  c: 1 },
-					],
-				},
 			},
 			gridEl,
 		);
 
+		lastWidth = gridEl.offsetWidth;
+		grid.column(getResponsiveColumns(lastWidth));
+		grid.disable();
+
 		setTimeout(() => { initialized = true; }, 0);
 
-		grid.on("dragstop resizestop", () => {
+		grid.on("change 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);
+			currentLayout = collectLayout();
 		});
 
 		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();
+			lastWidth = entries[0]?.contentRect.width ?? gridEl!.offsetWidth;
+			if (!editMode) {
+				grid?.column(getResponsiveColumns(lastWidth));
 			}
 		});
 		resizeObserver.observe(gridEl);

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

@@ -4,16 +4,25 @@
 	import ChartJs from "./charts/chartJs.svelte";
 	import Metric from "./charts/metric.svelte";
 
+	interface ChartClickEvent {
+		type: string;
+		label: string;
+		value: any;
+		index: number;
+	}
+
 	interface Props extends ExtensionProps {
 		chartRecord: any;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
+		onChartClick?: (event: ChartClickEvent) => void;
 	}
 
 	const {
 		chartRecord,
 		onChartDeleted,
 		onChartEdited,
+		onChartClick,
 		...props
 	}: Props = $props();
 
@@ -119,13 +128,13 @@
 				{#if data.type === "table"}
 					<Table input={data.input} {...props} />
 				{:else if data.type === "chartjs"}
-					<ChartJs input={data.input} {...props} />
+					<ChartJs input={data.input} onClick={onChartClick} {...props} />
 				{:else if data.type === "metric"}
 					<Metric input={data.input} />
 				{:else}
 					{@const CustomChart = findCustomChartComponent(data.type)}
 					{#if CustomChart}
-						<CustomChart input={data.input} {...props} />
+						<CustomChart input={data.input} onClick={onChartClick} {...props} />
 					{:else}
 						<div class="text-muted-foreground">
 							The ({data.type}) chart type is unsupported

package/extensions/reports/studio/lib/components/pages/reports/components/charts/chartJs.svelte

@@ -3,13 +3,13 @@
 
 	import { onMount } from 'svelte';
 	import { Chart } from 'chart.js/auto';
-	import { merge } from 'lodash-es';
 
 	interface Props extends ExtensionProps {
 		input: any;
+		onClick?: (event: any) => void;
 	}
 
-	const { input }: Props = $props();
+	const { input, onClick }: Props = $props();
 
 	let canvas: HTMLCanvasElement;
 	let chart: Chart;
@@ -18,18 +18,18 @@
 		if (canvas) {
 			const ctx = canvas.getContext('2d');
 			if (ctx) {
-				chart = new Chart(
-					ctx,
-					merge(
-						{
-							options: {
-								responsive: true,
-								maintainAspectRatio: false
-							}
-						},
-						$state.snapshot(input)
-					)
-				);
+				const snapshot = $state.snapshot(input);
+				chart = new Chart(ctx, {
+					...snapshot,
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						...snapshot.options,
+						...(onClick ? {
+							onClick: onClick
+						} : {}),
+					},
+				});
 			}
 		}
 

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

@@ -2,21 +2,24 @@
 	import { onMount } from "svelte";
 	import GridStackComponent from "../../../gridStack.svelte";
 	import Chart from "./chart.svelte";
-	import ExportButton from "./exportButton.svelte";
 
 	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
+		Button,
 		Icons,
 	} = utils.components;
 
 	let report: any = $state(null);
 	let charts: any[] = $state([]);
 	let loading = $state(true);
+	let editMode = $state(false);
+	let containerWidth = $state(0);
+	let currentLayout = $state<{ id: string; order: number; w: number; h: number }[]>([]);
 
-	async function loadCharts() {
-		loading = true;
+	async function loadCharts({ showLoading = true } = {}) {
+		if (showLoading) loading = true;
 		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
 			sort: "id",
 			filter: { id: reportId },
@@ -27,10 +30,10 @@
 			filter: { report_id: report.id },
 		});
 		charts = (await chartsRes.json()).data;
-		loading = false;
+		if (showLoading) loading = false;
 	}
 
-	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
+	async function saveChartsLayout(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,
@@ -40,14 +43,25 @@
 		}
 	}
 
-	function gridItemAttrs(chart: any): Record<string, unknown> {
+	function getChartGridSize(chart: any): Record<string, unknown> {
 		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
 	}
 
+	function handleChartClick(_event: any, elements: any[], chart: any) {
+		if (!elements.length) return;
+		const { index, datasetIndex } = elements[0];
+		const dataset = chart.data.datasets[datasetIndex];
+		utils.emitEvent("reports.chart.click", {
+			label: chart.data.labels?.[index],
+			value: dataset.data[index],
+			ids: dataset.ids?.[index],
+		});
+	}
+
 	onMount(() => loadCharts());
 </script>
 
-<div class="report-layout">
+<div class="report-layout" bind:clientWidth={containerWidth}>
 	{#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" />
@@ -66,17 +80,50 @@
 				</div>
 			</div>
 			<div class="flex gap-2 self-end">
-				<ExportButton {report} {utils} />
-				<CreateDetailViewButton
-					collectionName="reports_charts"
-					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 loadCharts()}
-				>
-					Create chart
-				</CreateDetailViewButton>
+				{#if editMode}
+					<Button
+						variant="ghost"
+						class="h-7 px-3 text-xs font-normal text-muted-foreground"
+						onclick={() => {
+							editMode = false;
+							loadCharts({ showLoading: false });
+						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="default"
+						class="h-7 px-3 text-xs font-normal"
+						Icon={Icons.Check}
+						onclick={async () => {
+							await saveChartsLayout(currentLayout);
+							editMode = false;
+						}}
+					>
+						Save layout
+					</Button>
+				{:else}
+					{#if containerWidth >= 1200}
+						<Button
+							variant="outline"
+							class="h-7 px-3 text-xs font-normal"
+							Icon={Icons.LayoutDashboard}
+							onclick={() => (editMode = true)}
+						>
+							Edit layout
+						</Button>
+					{/if}
+					<CreateDetailViewButton
+						collectionName="reports_charts"
+						values={{ report_id: { id: reportId, name: report.name } }}
+						variant="default"
+						class="h-7 px-3 text-xs font-normal"
+						Icon={Icons.Plus}
+						onSuccessfullSave={async () => await loadCharts()}
+					>
+						Create chart
+					</CreateDetailViewButton>
+				{/if}
 			</div>
 		</div>
 
@@ -91,18 +138,19 @@
 				</div>
 			{:else}
 				{#key charts}
-					<GridStackComponent onLayoutChange={handleLayoutChange}>
+					<GridStackComponent bind:editMode bind:currentLayout>
 						{#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)}
+								{...getChartGridSize(chart)}
 							>
 								<div class="grid-stack-item-content">
 									<Chart
 										chartRecord={chart}
 										onChartDeleted={async () => await loadCharts()}
 										onChartEdited={async () => await loadCharts()}
+										onChartClick={handleChartClick}
 										{utils}
 										{...props}
 									/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
@@ -34,7 +34,7 @@
     "package": "svelte-package --input extensions/reports/studio"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.23.0",
+    "@lobb-js/core": "^0.25.0",
     "chart.js": "^4.4.8",
     "gridstack": "^12.6.0",
     "hono": "^4.7.0",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@playwright/test": "^1.58.2",
-    "@lobb-js/studio": "^0.19.0",
+    "@lobb-js/studio": "^0.21.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.55.0",

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

@@ -1,57 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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/extensions/reports/studio/lib/components/pages/reports/components/exportButton.svelte

@@ -1,57 +0,0 @@
-<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>