@smartnet360/svelte-components 0.0.16 → 0.0.19

package/dist/core/Charts/ChartCard.svelte

@@ -41,6 +41,27 @@
 		});
 	}
 
+	// Deep merge helper function for layout objects
+	function deepMerge(target: any, source: any): any {
+		if (!source) return target;
+		
+		const output = { ...target };
+		
+		for (const key in source) {
+			if (source.hasOwnProperty(key)) {
+				if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+					// Recursively merge nested objects
+					output[key] = deepMerge(output[key] || {}, source[key]);
+				} else {
+					// Direct assignment for primitives and arrays
+					output[key] = source[key];
+				}
+			}
+		}
+		
+		return output;
+	}
+
 	function renderChart() {
 		if (!chartDiv || !data?.length) return;
 
@@ -85,10 +106,11 @@
 			};
 		}
 
-		// Merge external layout with defaults, then apply size adaptations
-		let finalLayout = plotlyLayout ? 
-			{ ...defaultLayout, ...plotlyLayout } : 
-			defaultLayout;
+		// Merge external layout with defaults using deep merge
+		// Use structuredClone for deep copy to prevent mutation of defaultLayout
+		let finalLayout = structuredClone(
+			plotlyLayout ? deepMerge(defaultLayout, plotlyLayout) : defaultLayout
+		);
 
 		// Apply size-based adaptations using helper
 		finalLayout = adaptPlotlyLayout(

package/dist/core/Charts/editor/ChartLayoutEditor.svelte

@@ -0,0 +1,281 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { editorStore, currentLayout, isDirty, savedLayouts } from './editorState.js';
+	import LayoutTreeView from './LayoutTreeView.svelte';
+	import GridPreview from './GridPreview.svelte';
+	import PropertiesPanel from './PropertiesPanel.svelte';
+	import KPIPicker from './KPIPicker.svelte';
+
+	let showKPIPicker = $state(false);
+	let showLibrary = $state(false);
+	let kpiPickerContext = $state<{
+		sectionId: string;
+		chartIndex: number;
+		side: 'yLeft' | 'yRight';
+	} | null>(null);
+
+	function handleNewLayout() {
+		const name = prompt('Enter layout name:', 'New Layout');
+		if (name) {
+			editorStore.newLayout(name);
+		}
+	}
+
+	function handleSave() {
+		editorStore.saveToLibrary();
+		alert('Layout saved to library!');
+	}
+
+	function handleExport() {
+		const json = editorStore.exportToJSON();
+		if (!json) {
+			alert('No layout to export');
+			return;
+		}
+
+		// Download as JSON file
+		const blob = new Blob([json], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `${$currentLayout?.layoutName || 'layout'}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handleImport() {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = '.json';
+		input.onchange = (e) => {
+			const file = (e.target as HTMLInputElement).files?.[0];
+			if (file) {
+				const reader = new FileReader();
+				reader.onload = (event) => {
+					const json = event.target?.result as string;
+					if (editorStore.importFromJSON(json)) {
+						alert('Layout imported successfully!');
+					} else {
+						alert('Failed to import layout. Please check the file format.');
+					}
+				};
+				reader.readAsText(file);
+			}
+		};
+		input.click();
+	}
+
+	function handleOpenKPIPicker(event: CustomEvent<{ sectionId: string; chartIndex: number; side: 'yLeft' | 'yRight' }>) {
+		kpiPickerContext = event.detail;
+		showKPIPicker = true;
+	}
+
+	function handleKPISelected(event: CustomEvent<any>) {
+		if (kpiPickerContext) {
+			editorStore.addKPI(
+				kpiPickerContext.sectionId,
+				kpiPickerContext.chartIndex,
+				kpiPickerContext.side,
+				event.detail
+			);
+		}
+		showKPIPicker = false;
+		kpiPickerContext = null;
+	}
+
+	function handleLoadFromLibrary(layoutName: string) {
+		const layout = $savedLayouts.find(l => l.layoutName === layoutName);
+		if (layout) {
+			editorStore.loadLayout(layout);
+			showLibrary = false;
+		}
+	}
+
+	function handleDeleteFromLibrary(layoutName: string) {
+		if (confirm(`Delete "${layoutName}" from library?`)) {
+			editorStore.deleteFromLibrary(layoutName);
+		}
+	}
+</script>
+
+<div class="editor-container d-flex flex-column vh-100">
+	<!-- Top Toolbar -->
+	<nav class="navbar navbar-dark bg-dark border-bottom">
+		<div class="container-fluid">
+			<span class="navbar-brand mb-0 h1">
+				<i class="bi bi-bar-chart-line-fill me-2"></i>
+				Chart Layout Editor
+			</span>
+			<div class="d-flex gap-2">
+				<button class="btn btn-sm btn-outline-light" onclick={handleNewLayout}>
+					<i class="bi bi-file-plus"></i> New
+				</button>
+				<button class="btn btn-sm btn-outline-light" onclick={() => (showLibrary = true)}>
+					<i class="bi bi-folder2-open"></i> Library
+				</button>
+				<button class="btn btn-sm btn-outline-light" onclick={handleImport}>
+					<i class="bi bi-upload"></i> Import
+				</button>
+				<button 
+					class="btn btn-sm btn-primary" 
+					onclick={handleSave}
+					disabled={!$currentLayout}
+				>
+					<i class="bi bi-save"></i> Save
+					{#if $isDirty}
+						<span class="badge bg-warning ms-1">*</span>
+					{/if}
+				</button>
+				<button 
+					class="btn btn-sm btn-success" 
+					onclick={handleExport}
+					disabled={!$currentLayout}
+				>
+					<i class="bi bi-download"></i> Export JSON
+				</button>
+			</div>
+		</div>
+	</nav>
+
+	{#if !$currentLayout}
+		<!-- Empty State -->
+		<div class="flex-grow-1 d-flex align-items-center justify-content-center bg-light">
+			<div class="text-center">
+				<i class="bi bi-file-earmark-bar-graph display-1 text-muted"></i>
+				<h3 class="mt-3">No Layout Open</h3>
+				<p class="text-muted">Create a new layout or import an existing one to get started</p>
+				<div class="d-flex gap-2 justify-content-center mt-4">
+					<button class="btn btn-primary" onclick={handleNewLayout}>
+						<i class="bi bi-plus-circle"></i> Create New Layout
+					</button>
+					<button class="btn btn-outline-secondary" onclick={handleImport}>
+						<i class="bi bi-upload"></i> Import Layout
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<!-- Main Editor Layout -->
+		<div class="editor-main d-flex flex-grow-1 overflow-hidden">
+			<!-- Left Panel: Tree View -->
+			<div class="panel-left border-end bg-white overflow-auto" style="width: 280px; min-width: 280px;">
+				<LayoutTreeView />
+			</div>
+
+			<!-- Center Panel: Grid Preview -->
+			<div class="panel-center flex-grow-1 bg-light overflow-auto">
+				<GridPreview on:openkpipicker={handleOpenKPIPicker} />
+			</div>
+
+			<!-- Right Panel: Properties -->
+			<div class="panel-right border-start bg-white overflow-auto" style="width: 320px; min-width: 320px;">
+				<PropertiesPanel on:openkpipicker={handleOpenKPIPicker} />
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- KPI Picker Modal -->
+{#if showKPIPicker}
+	<KPIPicker 
+		show={showKPIPicker}
+		on:select={handleKPISelected}
+		on:close={() => { showKPIPicker = false; kpiPickerContext = null; }}
+	/>
+{/if}
+
+<!-- Library Modal -->
+{#if showLibrary}
+	<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-scrollable">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">
+						<i class="bi bi-folder2-open me-2"></i>
+						Saved Layouts
+					</h5>
+					<button type="button" class="btn-close" onclick={() => (showLibrary = false)}></button>
+				</div>
+				<div class="modal-body">
+					{#if $savedLayouts.length > 0}
+						<div class="list-group">
+							{#each $savedLayouts as layout}
+								<div class="list-group-item">
+									<div class="d-flex justify-content-between align-items-center">
+										<div class="flex-grow-1">
+											<h6 class="mb-1">{layout.layoutName}</h6>
+											<small class="text-muted">
+												{layout.sections.length} sections
+											</small>
+										</div>
+										<div class="btn-group btn-group-sm">
+											<button
+												class="btn btn-outline-primary"
+												onclick={() => handleLoadFromLibrary(layout.layoutName)}
+											>
+												<i class="bi bi-folder-open"></i> Load
+											</button>
+											<button
+												class="btn btn-outline-danger"
+												onclick={() => handleDeleteFromLibrary(layout.layoutName)}
+											>
+												<i class="bi bi-trash"></i>
+											</button>
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="alert alert-info">
+							<i class="bi bi-info-circle me-2"></i>
+							No saved layouts yet. Create and save a layout to see it here.
+						</div>
+					{/if}
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-secondary" onclick={() => (showLibrary = false)}>
+						Close
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.editor-container {
+		background: #f8f9fa;
+	}
+
+	.panel-left,
+	.panel-center,
+	.panel-right {
+		height: 100%;
+	}
+
+	/* Ensure scrolling works properly */
+	.overflow-auto {
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	/* Custom scrollbar styling */
+	.overflow-auto::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.overflow-auto::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.overflow-auto::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 4px;
+	}
+
+	.overflow-auto::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

package/dist/core/Charts/editor/ChartLayoutEditor.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ChartLayoutEditor: import("svelte").Component<Record<string, never>, {}, "">;
+type ChartLayoutEditor = ReturnType<typeof ChartLayoutEditor>;
+export default ChartLayoutEditor;

package/dist/core/Charts/editor/GridPreview.svelte

@@ -0,0 +1,212 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { editorStore, currentLayout, selection } from './editorState.js';
+	import type { ChartGrid } from '../charts.model.js';
+
+	const dispatch = createEventDispatcher();
+
+	function getGridDimensions(grid: ChartGrid): { rows: number; cols: number } {
+		const map: Record<ChartGrid, { rows: number; cols: number }> = {
+			'2x2': { rows: 2, cols: 2 },
+			'3x3': { rows: 3, cols: 3 },
+			'4x4': { rows: 4, cols: 4 },
+			'1x2': { rows: 1, cols: 2 },
+			'1x4': { rows: 1, cols: 4 },
+			'1x8': { rows: 1, cols: 8 }
+		};
+		return map[grid] || { rows: 2, cols: 2 };
+	}
+
+	function handleChartClick(sectionId: string, chartIndex: number) {
+		editorStore.select({ type: 'chart', sectionId, chartIndex });
+	}
+
+	function isChartSelected(sectionId: string, chartIndex: number): boolean {
+		return (
+			$selection.type === 'chart' &&
+			$selection.sectionId === sectionId &&
+			$selection.chartIndex === chartIndex
+		);
+	}
+</script>
+
+<div class="grid-preview h-100 p-4 overflow-auto">
+	{#if $currentLayout}
+		<div class="mb-3">
+			<h5 class="text-muted">
+				<i class="bi bi-eye"></i> Preview: {$currentLayout.layoutName}
+			</h5>
+		</div>
+
+		{#each $currentLayout.sections as section}
+			{@const { rows, cols } = getGridDimensions(section.grid || '2x2')}
+			
+			<div class="section-preview mb-4 border rounded bg-white p-3 shadow-sm">
+				<!-- Section Header -->
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h6 class="mb-0">
+						<i class="bi bi-grid-3x3-gap me-2"></i>
+						{section.title}
+					</h6>
+					<span class="badge bg-secondary">{section.grid || '2x2'}</span>
+				</div>
+
+				<!-- Grid -->
+				<div 
+					class="grid-container"
+					style="
+						display: grid;
+						grid-template-columns: repeat({cols}, 1fr);
+						grid-template-rows: repeat({rows}, 200px);
+						gap: 0.75rem;
+					"
+				>
+					{#each section.charts as chart, cIdx}
+						<button
+							class="grid-cell border rounded p-2 position-relative"
+							class:selected={isChartSelected(section.id, cIdx)}
+							onclick={() => handleChartClick(section.id, cIdx)}
+						>
+							{#if chart.pos}
+								<div class="position-badge">{chart.pos}</div>
+							{/if}
+							
+							<div class="h-100 d-flex flex-column">
+								<div class="chart-title fw-bold mb-2 text-truncate">
+									{chart.title}
+								</div>
+								
+								<div class="flex-grow-1 overflow-auto">
+									{#if chart.yLeft.length > 0}
+										<div class="kpi-list mb-2">
+											<small class="text-muted d-block mb-1">
+												<i class="bi bi-bar-chart-line"></i> Left Axis
+											</small>
+											{#each chart.yLeft as kpi}
+												<div class="kpi-badge badge bg-success text-truncate mb-1">
+													{kpi.name}
+												</div>
+											{/each}
+										</div>
+									{/if}
+									
+									{#if chart.yRight.length > 0}
+										<div class="kpi-list">
+											<small class="text-muted d-block mb-1">
+												<i class="bi bi-bar-chart-line-fill"></i> Right Axis
+											</small>
+											{#each chart.yRight as kpi}
+												<div class="kpi-badge badge bg-warning text-truncate mb-1">
+													{kpi.name}
+												</div>
+											{/each}
+										</div>
+									{/if}
+
+									{#if chart.yLeft.length === 0 && chart.yRight.length === 0}
+										<div class="text-center text-muted small mt-3">
+											<i class="bi bi-plus-circle"></i>
+											<div>No KPIs</div>
+										</div>
+									{/if}
+								</div>
+							</div>
+						</button>
+					{/each}
+
+					<!-- Empty cells if needed -->
+					{#each Array(rows * cols - section.charts.length) as _, idx}
+						<div class="grid-cell-empty border rounded d-flex align-items-center justify-content-center text-muted">
+							<i class="bi bi-dash-circle"></i>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="alert alert-info">
+				<i class="bi bi-info-circle me-2"></i>
+				No sections in this layout. Use the tree view to add sections.
+			</div>
+		{/each}
+	{:else}
+		<div class="text-center text-muted mt-5">
+			<i class="bi bi-eye-slash display-4"></i>
+			<p class="mt-3">No layout to preview</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.grid-preview {
+		background: #f8f9fa;
+	}
+
+	.section-preview {
+		transition: box-shadow 0.2s;
+	}
+
+	.section-preview:hover {
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
+	}
+
+	.grid-cell {
+		background: white;
+		border: 2px solid #dee2e6;
+		cursor: pointer;
+		transition: all 0.2s;
+		text-align: left;
+		overflow: hidden;
+	}
+
+	.grid-cell:hover {
+		border-color: #0d6efd;
+		box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+		transform: translateY(-2px);
+	}
+
+	.grid-cell.selected {
+		border-color: #0d6efd;
+		border-width: 3px;
+		background-color: #e7f1ff;
+	}
+
+	.grid-cell-empty {
+		background: #f8f9fa;
+		border: 2px dashed #dee2e6;
+	}
+
+	.position-badge {
+		position: absolute;
+		top: 0.25rem;
+		right: 0.25rem;
+		background: #6c757d;
+		color: white;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.75rem;
+		font-weight: bold;
+	}
+
+	.chart-title {
+		font-size: 0.9rem;
+		color: #212529;
+	}
+
+	.kpi-list {
+		font-size: 0.75rem;
+	}
+
+	.kpi-badge {
+		display: block;
+		width: 100%;
+		text-align: left;
+		font-size: 0.7rem;
+		padding: 0.25rem 0.5rem;
+	}
+</style>

package/dist/core/Charts/editor/GridPreview.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const GridPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type GridPreview = ReturnType<typeof GridPreview>;
+export default GridPreview;