@smartnet360/svelte-components 0.0.21 → 0.0.23

package/dist/cellular/mock-cellular-data.js

@@ -0,0 +1,241 @@
+/**
+ * Generate realistic time series data for testing
+ */
+function generateTimeSeries(startDate, points, baseValue, variance, intervalMinutes = 15) {
+    const data = [];
+    const current = new Date(startDate);
+    for (let i = 0; i < points; i++) {
+        const noise = (Math.random() - 0.5) * variance;
+        const trend = Math.sin((i / points) * Math.PI * 2) * (variance / 2); // Sinusoidal pattern
+        const value = Math.max(0, baseValue + noise + trend);
+        data.push({
+            timestamp: current.toISOString(),
+            value: Math.round(value * 100) / 100 // Round to 2 decimals
+        });
+        current.setMinutes(current.getMinutes() + intervalMinutes);
+    }
+    return data;
+}
+/**
+ * Get base throughput value for a frequency band (Mbps)
+ */
+function getThroughputBase(band) {
+    const baseValues = {
+        700: 30,
+        800: 35,
+        900: 40,
+        1800: 60,
+        2100: 80,
+        2600: 100,
+        3500: 150 // C-Band
+    };
+    return baseValues[band];
+}
+/**
+ * Get base timing advance value for a frequency band (microseconds)
+ */
+function getTimingAdvanceBase(band) {
+    // Lower frequency = larger cell = higher TA
+    const baseValues = {
+        700: 8.5,
+        800: 7.8,
+        900: 7.2,
+        1800: 5.5,
+        2100: 4.8,
+        2600: 4.2,
+        3500: 3.5
+    };
+    return baseValues[band];
+}
+/**
+ * Generate a single cell with KPI data
+ */
+function generateCell(siteId, sectorId, band, startDate, points = 96 // 24 hours at 15-min intervals
+) {
+    const cellId = `${siteId}-${sectorId}-${band}`;
+    return {
+        cellId,
+        band,
+        kpis: {
+            throughput: generateTimeSeries(startDate, points, getThroughputBase(band), getThroughputBase(band) * 0.3, // 30% variance
+            15),
+            timingAdvance: generateTimeSeries(startDate, points, getTimingAdvanceBase(band), 1.5, // ±1.5 μs variance
+            15)
+        }
+    };
+}
+/**
+ * Generate mock cellular sites for testing
+ */
+export function generateMockCellularData() {
+    const startDate = new Date('2025-10-09T00:00:00Z');
+    const points = 96; // 24 hours of data
+    return [
+        // Site A - Urban, 3 sectors, multiple bands
+        {
+            siteId: 'site-a',
+            siteName: 'Site A (Urban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-a', 'sec-1', 700, startDate, points),
+                        generateCell('site-a', 'sec-1', 2100, startDate, points),
+                        generateCell('site-a', 'sec-1', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 120,
+                    cells: [
+                        generateCell('site-a', 'sec-2', 700, startDate, points),
+                        generateCell('site-a', 'sec-2', 1800, startDate, points),
+                        generateCell('site-a', 'sec-2', 2100, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 240,
+                    cells: [
+                        generateCell('site-a', 'sec-3', 1800, startDate, points),
+                        generateCell('site-a', 'sec-3', 2600, startDate, points),
+                        generateCell('site-a', 'sec-3', 3500, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site B - Suburban, 2 sectors, fewer bands
+        {
+            siteId: 'site-b',
+            siteName: 'Site B (Suburban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-b', 'sec-1', 800, startDate, points),
+                        generateCell('site-b', 'sec-1', 2100, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 180,
+                    cells: [
+                        generateCell('site-b', 'sec-2', 800, startDate, points),
+                        generateCell('site-b', 'sec-2', 1800, startDate, points),
+                        generateCell('site-b', 'sec-2', 2600, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site C - Rural, 4 sectors, low-band focus
+        {
+            siteId: 'site-c',
+            siteName: 'Site C (Rural)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-c', 'sec-1', 700, startDate, points),
+                        generateCell('site-c', 'sec-1', 900, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 90,
+                    cells: [
+                        generateCell('site-c', 'sec-2', 700, startDate, points),
+                        generateCell('site-c', 'sec-2', 1800, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 180,
+                    cells: [
+                        generateCell('site-c', 'sec-3', 800, startDate, points),
+                        generateCell('site-c', 'sec-3', 900, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-4',
+                    sectorName: 'Sector 4',
+                    azimuth: 270,
+                    cells: [
+                        generateCell('site-c', 'sec-4', 700, startDate, points),
+                        generateCell('site-c', 'sec-4', 2100, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site D - Dense Urban, 3 sectors, high-band focus
+        {
+            siteId: 'site-d',
+            siteName: 'Site D (Dense Urban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-d', 'sec-1', 2100, startDate, points),
+                        generateCell('site-d', 'sec-1', 2600, startDate, points),
+                        generateCell('site-d', 'sec-1', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 120,
+                    cells: [
+                        generateCell('site-d', 'sec-2', 1800, startDate, points),
+                        generateCell('site-d', 'sec-2', 2600, startDate, points),
+                        generateCell('site-d', 'sec-2', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 240,
+                    cells: [
+                        generateCell('site-d', 'sec-3', 2100, startDate, points),
+                        generateCell('site-d', 'sec-3', 2600, startDate, points),
+                        generateCell('site-d', 'sec-3', 3500, startDate, points)
+                    ]
+                }
+            ]
+        }
+    ];
+}
+/**
+ * Get color for frequency band (consistent color scheme)
+ */
+export function getBandColor(band) {
+    const colors = {
+        700: '#e74c3c', // Red
+        800: '#e67e22', // Orange
+        900: '#f39c12', // Yellow-Orange
+        1800: '#3498db', // Blue
+        2100: '#9b59b6', // Purple
+        2600: '#1abc9c', // Teal
+        3500: '#2ecc71' // Green (C-Band)
+    };
+    return colors[band];
+}
+/**
+ * Get label for frequency band
+ */
+export function getBandLabel(band) {
+    if (band === 3500)
+        return `${band} MHz (C-Band)`;
+    return `${band} MHz`;
+}

package/dist/core/Charts/ChartCard.svelte

@@ -25,9 +25,11 @@
 		sectionId?: string;
 		sectionMovingAverage?: MovingAverageConfig; // Section-level MA config
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
+		runtimeMAOverride?: MovingAverageConfig | null; // Runtime override from global controls
+		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage }: Props = $props();
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -71,34 +73,67 @@
 		let colorIndex = 0;
 
 		// Helper function to apply MA with full hierarchy:
-		// KPI > Chart > Section > Layout (higher priority wins)
+		// Runtime Override > KPI > Chart > Section > Layout (higher priority wins)
 		const applyMovingAverageHierarchy = (kpi: any) => {
-			// If KPI has its own MA config, use it (highest priority)
+			// Step 1: Get base MA config from hierarchy (KPI > Chart > Section > Layout)
+			let baseMA: MovingAverageConfig | undefined;
+			
 			if (kpi.movingAverage) {
-				return kpi;
+				baseMA = kpi.movingAverage;
+			} else if (chart.movingAverage) {
+				baseMA = chart.movingAverage;
+			} else if (sectionMovingAverage) {
+				baseMA = sectionMovingAverage;
+			} else if (layoutMovingAverage) {
+				baseMA = layoutMovingAverage;
 			}
 			
-			// Check chart-level MA
-			if (chart.movingAverage) {
-				return {
-					...kpi,
-					movingAverage: chart.movingAverage
-				};
+			// Step 2: Apply runtime overrides (highest priority)
+			if (runtimeMAOverride !== undefined && runtimeMAOverride !== null) {
+				// Runtime override explicitly disables MA
+				if (runtimeMAOverride.enabled === false) {
+					return {
+						...kpi,
+						movingAverage: { enabled: false, window: 7, showOriginal: true }
+					};
+				}
+				
+				// Runtime override provides window - merge with base or use override
+				if (baseMA) {
+					return {
+						...kpi,
+						movingAverage: {
+							enabled: runtimeMAOverride.enabled ?? baseMA.enabled,
+							window: runtimeMAOverride.window ?? baseMA.window,
+							showOriginal: runtimeShowOriginal ?? baseMA.showOriginal,
+							label: baseMA.label
+						}
+					};
+				} else {
+					// No base config, use runtime override entirely
+					return {
+						...kpi,
+						movingAverage: runtimeMAOverride
+					};
+				}
 			}
 			
-			// Check section-level MA
-			if (sectionMovingAverage) {
+			// Step 3: Apply showOriginal runtime control if set
+			if (baseMA && runtimeShowOriginal !== undefined) {
 				return {
 					...kpi,
-					movingAverage: sectionMovingAverage
+					movingAverage: {
+						...baseMA,
+						showOriginal: runtimeShowOriginal
+					}
 				};
 			}
 			
-			// Check layout-level MA (lowest priority, global default)
-			if (layoutMovingAverage) {
+			// Step 4: Return KPI with base MA or no MA
+			if (baseMA) {
 				return {
 					...kpi,
-					movingAverage: layoutMovingAverage
+					movingAverage: baseMA
 				};
 			}
 			
@@ -217,6 +252,20 @@
 			};
 		}
 	});
+	
+	// React to prop changes - re-render chart when runtime controls change
+	$effect(() => {
+		// Watch these props and re-render when they change
+		runtimeMAOverride;
+		runtimeShowOriginal;
+		data;
+		markers;
+		
+		// Only re-render if chartDiv is already initialized
+		if (chartDiv && chartDiv.children.length > 0) {
+			renderChart();
+		}
+	});
 </script>
 
 <div class="chart-card" role="group" oncontextmenu={handleContextMenu}>

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     sectionId?: string;
     sectionMovingAverage?: MovingAverageConfig;
     layoutMovingAverage?: MovingAverageConfig;
+    runtimeMAOverride?: MovingAverageConfig | null;
+    runtimeShowOriginal?: 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> & {

package/dist/core/Charts/ChartComponent.svelte

@@ -2,8 +2,9 @@
 
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { Layout, Mode, ChartMarker, Section, ChartGrid, Chart } from './charts.model.js';
+	import type { Layout, Mode, ChartMarker, Section, ChartGrid, Chart, GlobalChartControls, MovingAverageConfig } from './charts.model.js';
 	import ChartCard from './ChartCard.svelte';
+	import GlobalControls from './GlobalControls.svelte';
 
 	interface Props {
 		layout: Layout;
@@ -12,6 +13,7 @@
 		markers?: ChartMarker[]; // Global markers for all charts
 		plotlyLayout?: any; // Optional custom Plotly layout
 		enableAdaptation?: boolean; // Enable size-based adaptations
+		showGlobalControls?: boolean; // Show/hide global controls section (default: true)
 	}
 
 	const GRID_DIMENSIONS: Record<ChartGrid, { rows: number; columns: number }> = {
@@ -50,7 +52,49 @@
 		section: Section;
 	}
 
-	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true }: Props = $props();
+	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
+	
+	// Global runtime controls state
+	let globalControls = $state<GlobalChartControls>({
+		movingAverage: {
+			enabled: true,
+			windowOverride: undefined,
+			showOriginal: true
+		}
+	});
+	
+	// Handler for global controls updates
+	function handleControlsUpdate(updatedControls: GlobalChartControls) {
+		globalControls = updatedControls;
+	}
+	
+	// Toggle state for showing/hiding the controls panel
+	let showControlsPanel = $state(true);
+	
+	// Derived reactive state for MA override - automatically updates when globalControls changes
+	let effectiveMAOverride = $derived.by(() => {
+		const maControls = globalControls.movingAverage;
+		
+		if (!maControls) return null;
+		
+		// If MA is disabled globally, return disabled config
+		if (!maControls.enabled) {
+			return { enabled: false, window: 7, showOriginal: true };
+		}
+		
+		// If window override is set, return override config
+		if (maControls.windowOverride !== undefined) {
+			return {
+				enabled: true,
+				window: maControls.windowOverride,
+				showOriginal: maControls.showOriginal ?? true
+			};
+		}
+		
+		// If only showOriginal is different, we need to pass that through
+		// Return null to use configured values (handled in ChartCard)
+		return null;
+	});
 	
 	// Internal tab state management
 	let activeTabId = $state(layout.sections[0]?.id || '');
@@ -248,6 +292,8 @@
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
+					runtimeMAOverride={effectiveMAOverride}
+					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
 				/>
 			</div>
@@ -256,28 +302,50 @@
 {/snippet}
 
 <div class="chart-component" bind:this={componentElement}>
+	<!-- Global Controls Section (appears above tabs/scrollspy) -->
+	{#if showGlobalControls && showControlsPanel}
+		<GlobalControls controls={globalControls} onUpdate={handleControlsUpdate} />
+	{/if}
+	
 	<!-- Always render the main content (tabs or scrollspy) -->
 	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
-			<!-- Tab Navigation -->
-			<ul class="nav nav-tabs" role="tablist">
-				{#each layout.sections as section, index}
-					<li class="nav-item" role="presentation">
-						<button
-							class="nav-link {section.id === activeTabId ? 'active' : ''}"
-							id="{section.id}-tab"
-							type="button"
-							role="tab"
-							aria-controls="{section.id}"
-							aria-selected="{section.id === activeTabId}"
-							onclick={() => activeTabId = section.id}
-						>
-							{section.title}
-						</button>
-					</li>
-				{/each}
-			</ul>
+			<!-- Tab Navigation with Controls Toggle -->
+			<div class="nav-tabs-wrapper">
+				<ul class="nav nav-tabs" role="tablist">
+					{#each layout.sections as section, index}
+						<li class="nav-item" role="presentation">
+							<button
+								class="nav-link {section.id === activeTabId ? 'active' : ''}"
+								id="{section.id}-tab"
+								type="button"
+								role="tab"
+								aria-controls="{section.id}"
+								aria-selected="{section.id === activeTabId}"
+								onclick={() => activeTabId = section.id}
+							>
+								{section.title}
+							</button>
+						</li>
+					{/each}
+				</ul>
+				
+				<!-- Controls Toggle Button -->
+				{#if showGlobalControls}
+					<button
+						class="btn btn-sm btn-outline-secondary controls-toggle"
+						onclick={() => showControlsPanel = !showControlsPanel}
+						title={showControlsPanel ? "Hide Controls" : "Show Controls"}
+						type="button"
+					>
+						<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+						</svg>
+						<span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span>
+					</button>
+				{/if}
+			</div>
 
 			<!-- Tab Content -->
 			<div class="tab-content">
@@ -295,21 +363,38 @@
 	{:else if mode === 'scrollspy'}
 		<!-- ScrollSpy Mode with Navigation -->
 		<div class="scrollspy-container">
-			<!-- ScrollSpy Navigation -->
+			<!-- ScrollSpy Navigation with Controls Toggle -->
 			<nav class="scrollspy-nav">
-				<ul class="nav nav-pills">
-					{#each layout.sections as section}
-						<li class="nav-item">
-							<a 
-								class="nav-link {section.id === activeSectionId ? 'active' : ''}" 
-								href="#{section.id}"
-								onclick={(e) => scrollToSection(section.id, e)}
-							>
-								{section.title}
-							</a>
-						</li>
-					{/each}
-				</ul>
+				<div class="nav-wrapper">
+					<ul class="nav nav-pills">
+						{#each layout.sections as section}
+							<li class="nav-item">
+								<a 
+									class="nav-link {section.id === activeSectionId ? 'active' : ''}" 
+									href="#{section.id}"
+									onclick={(e) => scrollToSection(section.id, e)}
+								>
+									{section.title}
+								</a>
+							</li>
+						{/each}
+					</ul>
+					
+					<!-- Controls Toggle Button -->
+					{#if showGlobalControls}
+						<button
+							class="btn btn-sm btn-outline-secondary controls-toggle"
+							onclick={() => showControlsPanel = !showControlsPanel}
+							title={showControlsPanel ? "Hide Controls" : "Show Controls"}
+							type="button"
+						>
+							<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+								<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+							</svg>
+							<span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span>
+						</button>
+					{/if}
+				</div>
 			</nav>
 
 			<!-- ScrollSpy Content -->
@@ -347,6 +432,8 @@
 					sectionId={activeZoom.section.id}
 					sectionMovingAverage={activeZoom.section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
+					runtimeMAOverride={effectiveMAOverride}
+					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
 				/>
 			</div>
@@ -593,4 +680,49 @@
 		min-height: 80px; /* Even smaller minimum for grid */
 		max-height: 100%; /* Constrain to slot */
 	}
+
+	/* Tab navigation wrapper with toggle button */
+	.nav-tabs-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		border-bottom: 1px solid #dee2e6;
+	}
+
+	.nav-tabs-wrapper .nav-tabs {
+		flex-grow: 1;
+		border-bottom: none;
+		margin-bottom: 0;
+	}
+
+	.controls-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		white-space: nowrap;
+		border-radius: 0.25rem;
+		transition: all 0.2s ease;
+	}
+
+	.controls-toggle:hover {
+		background-color: #f8f9fa;
+		border-color: #6c757d;
+	}
+
+	.controls-toggle svg {
+		flex-shrink: 0;
+	}
+
+	/* ScrollSpy navigation wrapper with toggle button */
+	.scrollspy-nav .nav-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.scrollspy-nav .nav-wrapper .nav {
+		flex-grow: 1;
+	}
 </style>
+
+

package/dist/core/Charts/ChartComponent.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     markers?: ChartMarker[];
     plotlyLayout?: any;
     enableAdaptation?: boolean;
+    showGlobalControls?: boolean;
 }
 declare const ChartComponent: import("svelte").Component<Props, {}, "">;
 type ChartComponent = ReturnType<typeof ChartComponent>;