@smartnet360/svelte-components 0.0.16 → 0.0.19

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

@@ -0,0 +1,207 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { availableKPIs, searchKPIs } from '../../../../routes/charts/schemas/available-kpis.js';
+	import type { KPI } from '../charts.model.js';
+
+	interface Props {
+		show: boolean;
+	}
+
+	let { show }: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	let searchQuery = $state('');
+	let selectedKPI = $state<KPI | null>(null);
+
+	let filteredKPIs = $derived(
+		searchQuery ? searchKPIs(searchQuery) : 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,24 @@
+interface Props {
+    show: boolean;
+}
+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;

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

@@ -0,0 +1,286 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { editorStore, currentLayout, selection, selectedItem } from './editorState.js';
+	import type { ChartGrid, Section, Chart } from '../charts.model.js';
+
+	const dispatch = createEventDispatcher();
+
+	const gridOptions: ChartGrid[] = ['2x2', '3x3', '4x4', '1x2', '1x4', '1x8'];
+
+	function handleOpenKPIPicker(side: 'yLeft' | 'yRight') {
+		if ($selection.type === 'chart' && $selection.sectionId && $selection.chartIndex !== undefined) {
+			dispatch('openkpipicker', {
+				sectionId: $selection.sectionId,
+				chartIndex: $selection.chartIndex,
+				side
+			});
+		}
+	}
+
+	function handleRemoveKPI(side: 'yLeft' | 'yRight', kpiIndex: number) {
+		if ($selection.type === 'chart' && $selection.sectionId && $selection.chartIndex !== undefined) {
+			editorStore.removeKPI($selection.sectionId, $selection.chartIndex, side, kpiIndex);
+		}
+	}
+
+	function handleDeleteSection() {
+		if ($selection.sectionId && confirm('Delete this section and all its charts?')) {
+			editorStore.deleteSection($selection.sectionId);
+		}
+	}
+
+	function handleDeleteChart() {
+		if ($selection.sectionId && $selection.chartIndex !== undefined && confirm('Delete this chart?')) {
+			editorStore.deleteChart($selection.sectionId, $selection.chartIndex);
+		}
+	}
+</script>
+
+<div class="properties-panel h-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="p-3 border-bottom bg-light">
+		<h6 class="mb-0">
+			<i class="bi bi-sliders"></i> Properties
+		</h6>
+	</div>
+
+	<!-- Content -->
+	<div class="flex-grow-1 overflow-auto p-3">
+		{#if !$selection.type}
+			<div class="text-center text-muted mt-5">
+				<i class="bi bi-hand-index display-4"></i>
+				<p class="mt-3">Select an item to edit its properties</p>
+			</div>
+		{:else if $selection.type === 'layout'}
+			<!-- Layout Properties -->
+			<div class="mb-3">
+				<label class="form-label fw-bold">Layout Name</label>
+				<input
+					type="text"
+					class="form-control"
+					value={$currentLayout?.layoutName || ''}
+					oninput={(e) => editorStore.updateLayoutName(e.currentTarget.value)}
+				/>
+			</div>
+			
+			<div class="alert alert-info small">
+				<i class="bi bi-info-circle me-1"></i>
+				<strong>{$currentLayout?.sections.length || 0}</strong> sections in this layout
+			</div>
+		{:else if $selection.type === 'section'}
+			{@const section = $selectedItem as Section}
+			{#if section}
+				<!-- Section Properties -->
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h6 class="mb-0">Section</h6>
+					<button class="btn btn-sm btn-outline-danger" onclick={handleDeleteSection}>
+						<i class="bi bi-trash"></i>
+					</button>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Title</label>
+					<input
+						type="text"
+						class="form-control"
+						value={section.title}
+						oninput={(e) =>
+							editorStore.updateSection(section.id, { title: e.currentTarget.value })}
+					/>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Section ID</label>
+					<input
+						type="text"
+						class="form-control"
+						value={section.id}
+						oninput={(e) => editorStore.updateSection(section.id, { id: e.currentTarget.value })}
+					/>
+					<small class="form-text text-muted">Unique identifier for this section</small>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Grid Layout</label>
+					<select
+						class="form-select"
+						value={section.grid || '2x2'}
+						onchange={(e) => editorStore.updateSection(section.id, { grid: e.currentTarget.value as ChartGrid })}
+					>
+						{#each gridOptions as grid}
+							<option value={grid}>{grid}</option>
+						{/each}
+					</select>
+				</div>
+
+				<div class="alert alert-info small">
+					<i class="bi bi-bar-chart me-1"></i>
+					<strong>{section.charts?.length || 0}</strong> charts in this section
+				</div>
+			{/if}
+		{:else if $selection.type === 'chart'}
+			{@const chart = $selectedItem as Chart}
+			{#if chart && $selection.sectionId && $selection.chartIndex !== undefined}
+				<!-- Chart Properties -->
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h6 class="mb-0">Chart</h6>
+					<button class="btn btn-sm btn-outline-danger" onclick={handleDeleteChart}>
+						<i class="bi bi-trash"></i>
+					</button>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Title</label>
+					<input
+						type="text"
+						class="form-control"
+						value={chart.title}
+						oninput={(e) =>
+							editorStore.updateChart($selection.sectionId!, $selection.chartIndex!, {
+								title: e.currentTarget.value
+							})}
+					/>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Position (optional)</label>
+					<input
+						type="number"
+						class="form-control"
+						min="1"
+						max="9"
+						value={chart.pos || ''}
+						oninput={(e) => {
+							const val = e.currentTarget.value;
+							const numVal = val ? parseInt(val) : undefined;
+							editorStore.updateChart($selection.sectionId!, $selection.chartIndex!, {
+								pos: (numVal && numVal >= 1 && numVal <= 9) ? numVal as any : undefined
+							});
+						}}
+					/>
+					<small class="form-text text-muted">Grid position (1-9)</small>
+				</div>
+
+				<!-- Left Y-Axis KPIs -->
+				<div class="mb-3">
+					<div class="d-flex justify-content-between align-items-center mb-2">
+						<label class="form-label mb-0">Left Y-Axis KPIs</label>
+						<button
+							class="btn btn-sm btn-outline-success"
+							onclick={() => handleOpenKPIPicker('yLeft')}
+						>
+							<i class="bi bi-plus"></i> Add
+						</button>
+					</div>
+					
+					{#if chart.yLeft.length > 0}
+						<div class="list-group">
+							{#each chart.yLeft as kpi, idx}
+								<div class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="flex-grow-1">
+										<div class="fw-bold">{kpi.name}</div>
+										<small class="text-muted">
+											{kpi.rawName} | {kpi.unit}
+											{#if kpi.color}
+												<span class="color-badge" style="background-color: {kpi.color}"></span>
+											{/if}
+										</small>
+									</div>
+									<button
+										class="btn btn-sm btn-outline-danger"
+										onclick={() => handleRemoveKPI('yLeft', idx)}
+									>
+										<i class="bi bi-x"></i>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="alert alert-secondary small mb-0">
+							No KPIs on left axis
+						</div>
+					{/if}
+				</div>
+
+				<!-- Right Y-Axis KPIs -->
+				<div class="mb-3">
+					<div class="d-flex justify-content-between align-items-center mb-2">
+						<label class="form-label mb-0">Right Y-Axis KPIs</label>
+						<button
+							class="btn btn-sm btn-outline-warning"
+							onclick={() => handleOpenKPIPicker('yRight')}
+						>
+							<i class="bi bi-plus"></i> Add
+						</button>
+					</div>
+					
+					{#if chart.yRight.length > 0}
+						<div class="list-group">
+							{#each chart.yRight as kpi, idx}
+								<div class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="flex-grow-1">
+										<div class="fw-bold">{kpi.name}</div>
+										<small class="text-muted">
+											{kpi.rawName} | {kpi.unit}
+											{#if kpi.color}
+												<span class="color-badge" style="background-color: {kpi.color}"></span>
+											{/if}
+										</small>
+									</div>
+									<button
+										class="btn btn-sm btn-outline-danger"
+										onclick={() => handleRemoveKPI('yRight', idx)}
+									>
+										<i class="bi bi-x"></i>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="alert alert-secondary small mb-0">
+							No KPIs on right axis
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.properties-panel {
+		font-size: 0.9rem;
+	}
+
+	.form-label {
+		font-weight: 600;
+		font-size: 0.85rem;
+		color: #495057;
+	}
+
+	.form-control,
+	.form-select {
+		font-size: 0.875rem;
+	}
+
+	.list-group-item {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.85rem;
+	}
+
+	.color-badge {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 2px;
+		border: 1px solid #dee2e6;
+		margin-left: 0.25rem;
+	}
+
+	.btn-sm {
+		padding: 0.15rem 0.4rem;
+		font-size: 0.75rem;
+	}
+</style>