@smartnet360/svelte-components 0.0.17 → 0.0.20

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

@@ -0,0 +1,217 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { KPI } from '../charts.model.js';
+
+	interface Props {
+		show: boolean;
+		availableKPIs: KPI[];
+	}
+
+	let { show, availableKPIs }: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	let searchQuery = $state('');
+	let selectedKPI = $state<KPI | null>(null);
+
+	// Local search function
+	function searchKPIs(query: string, kpis: KPI[]): KPI[] {
+		const lowerQuery = query.toLowerCase();
+		return kpis.filter(
+			kpi =>
+				kpi.name.toLowerCase().includes(lowerQuery) ||
+				kpi.rawName.toLowerCase().includes(lowerQuery)
+		);
+	}
+
+	let filteredKPIs = $derived(
+		searchQuery ? searchKPIs(searchQuery, availableKPIs) : availableKPIs
+	);
+
+	function handleSelect(kpi: KPI) {
+		selectedKPI = kpi;
+	}
+
+	function handleConfirm() {
+		if (selectedKPI) {
+			dispatch('select', selectedKPI);
+			handleClose();
+		}
+	}
+
+	function handleClose() {
+		searchQuery = '';
+		selectedKPI = null;
+		dispatch('close');
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			handleClose();
+		} else if (e.key === 'Enter' && selectedKPI) {
+			handleConfirm();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show}
+	<!-- Bootstrap Modal -->
+	<div class="modal fade show d-block" tabindex="-1" role="dialog" style="background-color: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
+			<div class="modal-content">
+				<!-- Header -->
+				<div class="modal-header">
+					<h5 class="modal-title">
+						<i class="bi bi-search me-2"></i>
+						Select KPI
+					</h5>
+					<button type="button" class="btn-close" onclick={handleClose}></button>
+				</div>
+
+				<!-- Body -->
+				<div class="modal-body">
+					<!-- Search Input -->
+					<div class="mb-3">
+						<div class="input-group">
+							<span class="input-group-text">
+								<i class="bi bi-search"></i>
+							</span>
+							<input
+								type="text"
+								class="form-control"
+								placeholder="Search KPIs by name or raw name..."
+								bind:value={searchQuery}
+								autofocus
+							/>
+							{#if searchQuery}
+								<button
+									class="btn btn-outline-secondary"
+									onclick={() => (searchQuery = '')}
+								>
+									<i class="bi bi-x"></i>
+								</button>
+							{/if}
+						</div>
+						<small class="text-muted">
+							Showing {filteredKPIs.length} of {availableKPIs.length} KPIs
+						</small>
+					</div>
+
+					<!-- KPI List -->
+					<div class="kpi-list-container">
+						{#if filteredKPIs.length > 0}
+							<div class="list-group">
+								{#each filteredKPIs as kpi}
+									<button
+										class="list-group-item list-group-item-action"
+										class:active={selectedKPI?.rawName === kpi.rawName}
+										onclick={() => handleSelect(kpi)}
+									>
+										<div class="d-flex w-100 justify-content-between align-items-start">
+											<div class="flex-grow-1">
+												<h6 class="mb-1">{kpi.name}</h6>
+												<p class="mb-1 text-muted small">
+													<code>{kpi.rawName}</code>
+												</p>
+												<div class="d-flex gap-2 align-items-center">
+													<span class="badge bg-secondary">{kpi.scale}</span>
+													<span class="badge bg-info">{kpi.unit}</span>
+													{#if kpi.color}
+														<span class="color-preview" style="background-color: {kpi.color}"></span>
+													{/if}
+												</div>
+											</div>
+											{#if selectedKPI?.rawName === kpi.rawName}
+												<i class="bi bi-check-circle-fill text-success fs-4"></i>
+											{/if}
+										</div>
+									</button>
+								{/each}
+							</div>
+						{:else}
+							<div class="alert alert-warning">
+								<i class="bi bi-exclamation-triangle me-2"></i>
+								No KPIs found matching "{searchQuery}"
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Footer -->
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" onclick={handleClose}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={handleConfirm}
+						disabled={!selectedKPI}
+					>
+						<i class="bi bi-check-lg me-1"></i>
+						Add KPI
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal {
+		overflow-y: auto;
+	}
+
+	.kpi-list-container {
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	.list-group-item {
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.list-group-item:hover:not(.active) {
+		background-color: #f8f9fa;
+	}
+
+	.list-group-item.active {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+	}
+
+	.list-group-item.active h6,
+	.list-group-item.active p,
+	.list-group-item.active .text-muted {
+		color: white !important;
+	}
+
+	.list-group-item.active code {
+		background-color: rgba(255, 255, 255, 0.2);
+		color: white;
+	}
+
+	.color-preview {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		border-radius: 4px;
+		border: 2px solid #dee2e6;
+	}
+
+	code {
+		background-color: #f8f9fa;
+		padding: 0.2rem 0.4rem;
+		border-radius: 3px;
+		font-size: 0.875rem;
+	}
+
+	.badge {
+		font-size: 0.75rem;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { KPI } from '../charts.model.js';
+interface Props {
+    show: boolean;
+    availableKPIs: KPI[];
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const KpiPicker: $$__sveltets_2_IsomorphicComponent<Props, {
+    select: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type KpiPicker = InstanceType<typeof KpiPicker>;
+export default KpiPicker;

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

@@ -0,0 +1,180 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { editorStore, currentLayout, selection } from './editorState.js';
+
+	function handleSelectLayout() {
+		editorStore.select({ type: 'layout' });
+	}
+
+	function handleSelectSection(sectionId: string) {
+		editorStore.select({ type: 'section', sectionId });
+	}
+
+	function handleSelectChart(sectionId: string, chartIndex: number) {
+		editorStore.select({ type: 'chart', sectionId, chartIndex });
+	}
+
+	function handleAddSection() {
+		editorStore.addSection();
+	}
+
+	function handleAddChart(sectionId: string) {
+		editorStore.addChart(sectionId);
+	}
+
+	function isSelected(type: string, sectionId?: string, chartIndex?: number): boolean {
+		if ($selection.type !== type) return false;
+		if (type === 'section') return $selection.sectionId === sectionId;
+		if (type === 'chart') return $selection.sectionId === sectionId && $selection.chartIndex === chartIndex;
+		return type === 'layout';
+	}
+</script>
+
+<div class="tree-view h-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="p-3 border-bottom bg-light">
+		<h6 class="mb-0">
+			<i class="bi bi-diagram-3"></i> Structure
+		</h6>
+	</div>
+
+	<!-- Tree Content -->
+	<div class="flex-grow-1 overflow-auto p-2">
+		{#if $currentLayout}
+			<!-- Layout Node -->
+			<div class="list-group mb-2">
+				<div
+					class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+					class:active={isSelected('layout')}
+					role="button"
+					tabindex="0"
+					onclick={handleSelectLayout}
+					onkeydown={(e) => e.key === 'Enter' && handleSelectLayout()}
+				>
+					<div>
+						<i class="bi bi-file-earmark-text me-2"></i>
+						<strong>{$currentLayout.layoutName}</strong>
+					</div>
+					<button
+						class="btn btn-sm btn-primary"
+						onclick={(e) => {
+							e.stopPropagation();
+							handleAddSection();
+						}}
+						title="Add Section"
+					>
+						<i class="bi bi-plus-lg me-1"></i>
+						<span>Section</span>
+					</button>
+				</div>
+			</div>
+
+			<!-- Sections -->
+			{#each $currentLayout.sections as section, sIdx}
+				<div class="ms-3 mb-2">
+					<div class="list-group">
+						<!-- Section Node -->
+						<div
+							class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+							class:active={isSelected('section', section.id)}
+							role="button"
+							tabindex="0"
+							onclick={() => handleSelectSection(section.id)}
+							onkeydown={(e) => e.key === 'Enter' && handleSelectSection(section.id)}
+						>
+							<div class="flex-grow-1">
+								<i class="bi bi-grid-3x3-gap me-2"></i>
+								<span>{section.title}</span>
+								<span class="badge bg-secondary ms-2">{section.grid || '2x2'}</span>
+							</div>
+							<button
+								class="btn btn-sm btn-success"
+								onclick={(e) => {
+									e.stopPropagation();
+									handleAddChart(section.id);
+								}}
+								title="Add Chart"
+							>
+								<i class="bi bi-plus-lg me-1"></i>
+								<span>Chart</span>
+							</button>
+						</div>
+
+						<!-- Charts in Section -->
+						{#if section.charts && section.charts.length > 0}
+							<div class="ms-3 mt-1">
+								{#each section.charts as chart, cIdx}
+									<button
+										class="list-group-item list-group-item-action mb-1"
+										class:active={isSelected('chart', section.id, cIdx)}
+										onclick={() => handleSelectChart(section.id, cIdx)}
+									>
+										<div class="d-flex align-items-start">
+											<i class="bi bi-bar-chart me-2 mt-1"></i>
+											<div class="flex-grow-1">
+												<div class="fw-bold">{chart.title}</div>
+												<small class="text-muted">
+													{#if chart.pos}
+														<span class="badge bg-info me-1">Pos: {chart.pos}</span>
+													{/if}
+													<span class="badge bg-success me-1">L: {chart.yLeft.length}</span>
+													<span class="badge bg-warning">R: {chart.yRight.length}</span>
+												</small>
+											</div>
+										</div>
+									</button>
+								{/each}
+							</div>
+						{:else}
+							<div class="ms-3 mt-1">
+								<div class="text-muted small p-2">
+									<i class="bi bi-info-circle me-1"></i>
+									No charts yet
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{:else}
+				<div class="alert alert-info small m-2">
+					<i class="bi bi-info-circle me-1"></i>
+					No sections yet. Click the blue <strong>"+ Section"</strong> button above.
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tree-view {
+		font-size: 0.9rem;
+	}
+
+	.list-group-item {
+		padding: 0.5rem 0.75rem;
+		border-radius: 0.25rem;
+		margin-bottom: 0.25rem;
+		cursor: pointer;
+	}
+
+	.list-group-item.active {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+		color: white;
+	}
+
+	.list-group-item:not(.active):hover {
+		background-color: #f8f9fa;
+	}
+
+	.badge {
+		font-size: 0.7rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+	.btn-sm {
+		padding: 0.15rem 0.4rem;
+		font-size: 0.75rem;
+	}
+</style>

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

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