@smartnet360/svelte-components 0.0.11 → 0.0.13

package/dist/apps/antenna-pattern/utils/plotly-chart-utils.d.ts

@@ -0,0 +1,101 @@
+import type { Antenna } from '../db';
+export interface PlotlyTraceData {
+    r: number[];
+    theta: number[];
+    type: 'scatterpolar';
+    mode: 'lines';
+    name: string;
+    line: {
+        color: string;
+        width: number;
+        dash?: string;
+    };
+}
+/**
+ * Convert antenna pattern data to Plotly trace format
+ */
+export declare function convertAntennaPattern(pattern: number[], name: string, color: string, width?: number, mechanicalTilt?: number): PlotlyTraceData;
+/**
+ * Get line color based on tilt values
+ */
+export declare function getLineColor(eTilt: number, mTilt: number, baseColor: string): string;
+/**
+ * Get line width based on tilt values
+ */
+export declare function getLineWidth(eTilt: number, mTilt: number): number;
+/**
+ * Create Plotly chart layout configuration
+ */
+export declare function createChartLayout(title: string): {
+    title: {
+        text: string;
+        font: {
+            size: number;
+            color: string;
+        };
+        x: number;
+        y: number;
+    };
+    polar: {
+        radialaxis: {
+            visible: boolean;
+            range: number[];
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            tickmode: string;
+            tick0: number;
+            dtick: number;
+            ticksuffix: string;
+        };
+        angularaxis: {
+            visible: boolean;
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            direction: string;
+            period: number;
+            rotation: number;
+            ticksuffix: string;
+        };
+        bgcolor: string;
+    };
+    margin: {
+        t: number;
+        r: number;
+        b: number;
+        l: number;
+    };
+    height: number;
+    paper_bgcolor: string;
+    plot_bgcolor: string;
+    legend: {
+        orientation: string;
+        x: number;
+        y: number;
+        xanchor: string;
+    };
+};
+/**
+ * Create Plotly chart configuration
+ */
+export declare function createChartConfig(): {
+    responsive: boolean;
+    displayModeBar: boolean;
+    displaylogo: boolean;
+    modeBarButtonsToRemove: string[];
+};
+/**
+ * Generate chart data for antenna patterns
+ */
+export declare function createAntennaChartData(selectedAntenna: Antenna | null, selectedAntenna2: Antenna | null, viewMode: 'single' | 'compare', showHorizontalPatterns: boolean, showVerticalPatterns: boolean, ant1ElectricalTilt: number, ant1MechanicalTilt: number, ant2ElectricalTilt: number, ant2MechanicalTilt: number): PlotlyTraceData[];
+/**
+ * Generate chart title based on viewing mode and selected antennas
+ */
+export declare function generateChartTitle(viewMode: 'single' | 'compare', selectedAntenna: Antenna | null, selectedAntenna2: Antenna | null): string;

package/dist/apps/antenna-pattern/utils/plotly-chart-utils.js

@@ -0,0 +1,152 @@
+/**
+ * Convert antenna pattern data to Plotly trace format
+ */
+export function convertAntennaPattern(pattern, name, color, width = 2, mechanicalTilt = 0) {
+    // Convert attenuation to dB (negate values)
+    let processedPattern = pattern.map(value => -value);
+    // Apply mechanical tilt by shifting the pattern
+    if (mechanicalTilt !== 0) {
+        const shiftedPattern = new Array(360).fill(0);
+        for (let i = 0; i < 360; i++) {
+            const sourceIndex = (i - mechanicalTilt + 360) % 360;
+            shiftedPattern[i] = processedPattern[sourceIndex] || 0;
+        }
+        processedPattern = shiftedPattern;
+    }
+    // Generate theta values (0-359 degrees) with 90° counter-clockwise rotation
+    const theta = Array.from({ length: pattern.length }, (_, i) => {
+        if (name.includes('Vertical')) {
+            return (i) % 360; // Rotate vertical patterns 180° (90° for axis + 90° counter-clockwise)
+        }
+        return (i) % 360; // Rotate horizontal patterns 90° counter-clockwise
+    });
+    return {
+        r: processedPattern,
+        theta,
+        type: 'scatterpolar',
+        mode: 'lines',
+        name,
+        line: {
+            color,
+            width,
+            dash: 'solid' // Always solid lines
+        }
+    };
+}
+/**
+ * Get line color based on tilt values
+ */
+export function getLineColor(eTilt, mTilt, baseColor) {
+    // Always return the base color - no dynamic color changes
+    return baseColor;
+}
+/**
+ * Get line width based on tilt values
+ */
+export function getLineWidth(eTilt, mTilt) {
+    // Always return fixed line width - no dynamic width changes
+    return 2;
+}
+/**
+ * Create Plotly chart layout configuration
+ */
+export function createChartLayout(title) {
+    return {
+        title: {
+            text: title,
+            font: { size: 18, color: '#212529' },
+            x: 0.5,
+            y: 0.95
+        },
+        polar: {
+            radialaxis: {
+                visible: true,
+                range: [-70, 0],
+                tickfont: { size: 11, color: '#495057' },
+                gridcolor: 'rgba(108, 117, 125, 0.2)',
+                linecolor: 'rgba(108, 117, 125, 0.4)',
+                tickmode: 'linear',
+                tick0: -70,
+                dtick: 10,
+                ticksuffix: ' dB'
+            },
+            angularaxis: {
+                visible: true,
+                tickfont: { size: 11, color: '#495057' },
+                gridcolor: 'rgba(108, 117, 125, 0.2)',
+                linecolor: 'rgba(108, 117, 125, 0.4)',
+                direction: 'clockwise',
+                period: 360,
+                rotation: 0,
+                ticksuffix: '°'
+            },
+            bgcolor: 'rgba(248, 249, 250, 0.5)'
+        },
+        margin: { t: 60, r: 40, b: 60, l: 40 },
+        height: 600,
+        paper_bgcolor: 'rgba(255, 255, 255, 0.95)',
+        plot_bgcolor: 'rgba(248, 249, 250, 0.3)',
+        legend: {
+            orientation: 'h',
+            x: 0.5,
+            y: -0.1,
+            xanchor: 'center'
+        }
+    };
+}
+/**
+ * Create Plotly chart configuration
+ */
+export function createChartConfig() {
+    return {
+        responsive: true,
+        displayModeBar: true,
+        displaylogo: false,
+        modeBarButtonsToRemove: [
+            'zoom2d', 'pan2d', 'select2d', 'lasso2d',
+            'zoomIn2d', 'zoomOut2d', 'autoScale2d',
+            'resetScale2d', 'toggleSpikelines', 'toImage'
+        ]
+    };
+}
+/**
+ * Generate chart data for antenna patterns
+ */
+export function createAntennaChartData(selectedAntenna, selectedAntenna2, viewMode, showHorizontalPatterns, showVerticalPatterns, ant1ElectricalTilt, ant1MechanicalTilt, ant2ElectricalTilt, ant2MechanicalTilt) {
+    const data = [];
+    // Create antenna 1 pattern data based on visibility settings
+    if (selectedAntenna) {
+        if (showHorizontalPatterns) {
+            const horizontalData1 = convertAntennaPattern(selectedAntenna.pattern || [], 'Antenna 1 - Horizontal', getLineColor(ant1ElectricalTilt, ant1MechanicalTilt, '#0066cc'), getLineWidth(ant1ElectricalTilt, ant1MechanicalTilt));
+            data.push(horizontalData1);
+        }
+        if (showVerticalPatterns) {
+            const verticalData1 = convertAntennaPattern(selectedAntenna.vertical_pattern || [], 'Antenna 1 - Vertical', getLineColor(ant1ElectricalTilt, ant1MechanicalTilt, '#003d7a'), getLineWidth(ant1ElectricalTilt, ant1MechanicalTilt), ant1MechanicalTilt);
+            data.push(verticalData1);
+        }
+    }
+    // Add second antenna if in compare mode and antenna 2 is selected
+    if (viewMode === 'compare' && selectedAntenna2) {
+        if (showHorizontalPatterns) {
+            const horizontalData2 = convertAntennaPattern(selectedAntenna2.pattern || [], 'Antenna 2 - Horizontal', getLineColor(ant2ElectricalTilt, ant2MechanicalTilt, '#ffd700'), getLineWidth(ant2ElectricalTilt, ant2MechanicalTilt));
+            data.push(horizontalData2);
+        }
+        if (showVerticalPatterns) {
+            const verticalData2 = convertAntennaPattern(selectedAntenna2.vertical_pattern || [], 'Antenna 2 - Vertical', getLineColor(ant2ElectricalTilt, ant2MechanicalTilt, '#e6c200'), getLineWidth(ant2ElectricalTilt, ant2MechanicalTilt), ant2MechanicalTilt);
+            data.push(verticalData2);
+        }
+    }
+    return data;
+}
+/**
+ * Generate chart title based on viewing mode and selected antennas
+ */
+export function generateChartTitle(viewMode, selectedAntenna, selectedAntenna2) {
+    if (viewMode === 'compare' && selectedAntenna && selectedAntenna2) {
+        return `Compare: ${selectedAntenna.name} vs ${selectedAntenna2.name}`;
+    }
+    if (selectedAntenna) {
+        return `Antenna Pattern: ${selectedAntenna.name}`;
+    }
+    return 'Antenna Pattern Viewer';
+}

package/dist/apps/index.d.ts

@@ -0,0 +1 @@
+export * from './antenna-pattern/index.js';

package/dist/apps/index.js

@@ -0,0 +1,6 @@
+// Apps barrel export
+// Re-export all app modules for clean consumption
+// Antenna Pattern Analysis App
+export * from './antenna-pattern/index.js';
+// Test app (if needed for demos)
+// export * from './test/index.js';

package/dist/{Charts → core/Charts}/ChartComponent.svelte

@@ -17,6 +17,7 @@
 	const GRID_DIMENSIONS: Record<ChartGrid, { rows: number; columns: number }> = {
 		'2x2': { rows: 2, columns: 2 },
 		'3x3': { rows: 3, columns: 3 },
+		'4x4': { rows: 4, columns: 4 },
 		'1x2': { rows: 1, columns: 2 },
 		'1x4': { rows: 1, columns: 4 },
 		'1x8': { rows: 1, columns: 8 }
@@ -53,6 +54,10 @@
 	
 	// Internal tab state management
 	let activeTabId = $state(layout.sections[0]?.id || '');
+	
+	// ScrollSpy state management
+	let activeSectionId = $state(layout.sections[0]?.id || '');
+	let scrollspyContent = $state<HTMLDivElement | null>(null);
 
 	let componentElement: HTMLDivElement;
 	let contextMenuElement = $state<HTMLDivElement | null>(null);
@@ -129,6 +134,59 @@
 		}
 	}
 
+	// ScrollSpy functionality
+	function updateActiveSection() {
+		const content = scrollspyContent;
+		if (!content || mode !== 'scrollspy') return;
+		
+		const scrollTop = content.scrollTop;
+		const containerHeight = content.clientHeight;
+		
+		// Find which section is most visible
+		let mostVisibleSection = layout.sections[0]?.id || '';
+		let maxVisibleArea = 0;
+		
+		layout.sections.forEach(section => {
+			const element = content.querySelector(`#${section.id}`) as HTMLElement;
+			if (!element) return;
+			
+			const rect = element.getBoundingClientRect();
+			const containerRect = content.getBoundingClientRect();
+			
+			// Calculate visible area of this section
+			const visibleTop = Math.max(0, containerRect.top - rect.top);
+			const visibleBottom = Math.min(rect.height, containerRect.bottom - rect.top);
+			const visibleArea = Math.max(0, visibleBottom - visibleTop);
+			
+			if (visibleArea > maxVisibleArea) {
+				maxVisibleArea = visibleArea;
+				mostVisibleSection = section.id;
+			}
+		});
+		
+		if (mostVisibleSection !== activeSectionId) {
+			activeSectionId = mostVisibleSection;
+		}
+	}
+
+	function scrollToSection(sectionId: string, event?: Event) {
+		if (event) {
+			event.preventDefault();
+		}
+		
+		const content = scrollspyContent;
+		if (!content) return;
+		
+		const element = content.querySelector(`#${sectionId}`) as HTMLElement;
+		if (element) {
+			element.scrollIntoView({ 
+				behavior: 'smooth', 
+				block: 'start' 
+			});
+			activeSectionId = sectionId;
+		}
+	}
+
 	onMount(() => {
 		const handleKeydown = (event: KeyboardEvent) => {
 			if (event.key === 'Escape') {
@@ -146,12 +204,26 @@
 			closeContextMenu();
 		};
 
+		const handleScrollSpyScroll = () => {
+			updateActiveSection();
+		};
+
 		window.addEventListener('keydown', handleKeydown);
 		window.addEventListener('click', handleGlobalClick);
+		
+		// Add scroll listener for scrollspy mode
+		if (scrollspyContent && mode === 'scrollspy') {
+			scrollspyContent.addEventListener('scroll', handleScrollSpyScroll);
+			// Initialize active section
+			updateActiveSection();
+		}
 
 		return () => {
 			window.removeEventListener('keydown', handleKeydown);
 			window.removeEventListener('click', handleGlobalClick);
+			if (scrollspyContent) {
+				scrollspyContent.removeEventListener('scroll', handleScrollSpyScroll);
+			}
 		};
 	});
 </script>
@@ -182,29 +254,8 @@
 {/snippet}
 
 <div class="chart-component" bind:this={componentElement}>
-	{#if zoomedChart}
-		{@const activeZoom = zoomedChart as ZoomState}
-		<div
-			class="zoom-overlay"
-			role="button"
-			tabindex="0"
-			onclick={handleOverlayClick}
-			onkeydown={handleOverlayKeydown}
-		>
-			<div class="zoom-container">
-				<button type="button" class="zoom-close" onclick={exitZoom} aria-label="Exit zoom">×</button>
-				<ChartCard
-					chart={activeZoom.chart}
-					{data}
-					{markers}
-					{plotlyLayout}
-					{enableAdaptation}
-					sectionId={activeZoom.section.id}
-					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
-				/>
-			</div>
-		</div>
-	{:else if mode === 'tabs'}
+	<!-- Always render the main content (tabs or scrollspy) -->
+	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
 			<!-- Tab Navigation -->
@@ -247,14 +298,20 @@
 				<ul class="nav nav-pills">
 					{#each layout.sections as section}
 						<li class="nav-item">
-							<a class="nav-link" href="#{section.id}">{section.title}</a>
+							<a 
+								class="nav-link {section.id === activeSectionId ? 'active' : ''}" 
+								href="#{section.id}"
+								onclick={(e) => scrollToSection(section.id, e)}
+							>
+								{section.title}
+							</a>
 						</li>
 					{/each}
 				</ul>
 			</nav>
 
 			<!-- ScrollSpy Content -->
-			<div class="scrollspy-content">
+			<div class="scrollspy-content" bind:this={scrollspyContent}>
 				{#each layout.sections as section}
 					<div class="section-content" id="{section.id}">
 							<!-- Chart Grid -->
@@ -265,6 +322,33 @@
 		</div>
 	{/if}
 
+	<!-- Zoom Overlay - rendered on top when active -->
+	{#if zoomedChart}
+		{@const activeZoom = zoomedChart as ZoomState}
+		<div
+			class="zoom-overlay"
+			role="button"
+			tabindex="0"
+			onclick={handleOverlayClick}
+			onkeydown={handleOverlayKeydown}
+		>
+			<div class="zoom-container">
+				<button type="button" class="zoom-close" onclick={exitZoom} aria-label="Exit zoom">
+					&times;
+				</button>
+				<ChartCard
+					chart={activeZoom.chart}
+					{data}
+					{markers}
+					{plotlyLayout}
+					{enableAdaptation}
+					sectionId={activeZoom.section.id}
+					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
+				/>
+			</div>
+		</div>
+	{/if}
+
 	{#if contextMenu.visible}
 		<div
 			class="chart-context-menu"
@@ -423,7 +507,7 @@
 		justify-content: center;
 		background: rgba(0, 0, 0, 0.4);
 		z-index: 15;
-		padding: 1.5rem;
+		padding: 0.5rem;
 		box-sizing: border-box;
 	}
 
@@ -431,7 +515,7 @@
 		position: relative;
 		width: 100%;
 		height: 100%;
-		max-width: 1200px;
+		max-width: 100%;
 		max-height: 100%;
 		display: flex;
 		flex-direction: column;
@@ -443,26 +527,34 @@
 
 	.zoom-close {
 		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		background: rgba(0, 0, 0, 0.6);
-		color: #ffffff;
-		border: none;
-		width: 2rem;
-		height: 2rem;
-		border-radius: 50%;
+		top: 1rem;
+		right: 1rem;
+		background: rgba(255, 255, 255, 0.9);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 8px;
+		width: 2.5rem;
+		height: 2.5rem;
 		cursor: pointer;
-		font-size: 1.25rem;
-		line-height: 1;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: background 0.2s ease;
+		backdrop-filter: blur(8px);
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+		transition: all 0.2s ease;
 		z-index: 1;
+		opacity: 0.8;
 	}
 
 	.zoom-close:hover {
-		background: rgba(0, 0, 0, 0.75);
+		background: rgba(255, 255, 255, 1);
+		border-color: rgba(0, 0, 0, 0.2);
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+		opacity: 1;
+		transform: scale(1.05);
+	}
+
+	.zoom-close:active {
+		transform: scale(0.95);
 	}
 
 	/* Chart grid adapts to layout configuration */

package/dist/{Charts → core/Charts}/charts.model.d.ts

@@ -7,7 +7,7 @@ export interface KPI {
     color?: string;
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-export type ChartGrid = "2x2" | "3x3" | "1x2" | "1x4" | "1x8";
+export type ChartGrid = "2x2" | "3x3" | "4x4" | "1x2" | "1x4" | "1x8";
 export interface Chart {
     pos?: ChartPosition;
     title: string;

package/dist/{Desktop → core/Desktop}/GridRenderer.svelte

@@ -5,7 +5,7 @@
    * Reusable component that renders a GridConfiguration using Half/Quarter components.
    * Can be used in full-screen mode, embedded in other apps, or anywhere else.
    */
-  import { Half, Quarter, ResizeHandle, resizeStore } from '../index.js';
+  import { Half, Quarter, ResizeHandle, resizeStore } from '../../index.js';
   import type { GridConfiguration } from './gridLayouts.js';
 
   // Props

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Desktop/index.js';
+export * from './Charts/index.js';

package/dist/core/index.js

@@ -0,0 +1,6 @@
+// Core component library exports
+// This barrel export consolidates Desktop and Charts components
+// Desktop orchestration components
+export * from './Desktop/index.js';
+// Chart visualization components  
+export * from './Charts/index.js';

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, type ComponentConfig, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, type GridLayoutDefinition, type GridSlot, type ComponentAssignment, type GridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
-export { ChartComponent, ChartCard, type Layout, type Section, type Chart, type KPI, type Mode, type Scale, type ChartMarker, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';
+export * from './core/index.js';
+export * from './apps/index.js';

package/dist/index.js

@@ -1,2 +1,6 @@
-export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
-export { ChartComponent, ChartCard, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';
+// Main library export - clean barrel export pattern
+// This approach keeps the main index clean and allows for easy expansion
+// Core components (Desktop orchestration + Charts)
+export * from './core/index.js';
+// Complete applications
+export * from './apps/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.11",
+	"version": "0.0.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -61,6 +61,10 @@
 	],
 	"dependencies": {
 		"bootstrap": "^5.2.3",
-		"plotly.js-dist-min": "^3.1.0"
+		"plotly.js-dist-min": "^3.1.0",
+		"@sveltejs/adapter-static": "^3.0.9",
+		"bootstrap-icons": "^1.13.1",
+		"chart.js": "^4.4.9",
+		"dexie": "^4.0.11"
 	}
 }