@smartnet360/svelte-components 0.0.50 → 0.0.53

package/dist/apps/site-check/SiteCheck.svelte

@@ -22,9 +22,13 @@
 		showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
 		onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
 		searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
+		plotlyLayout?: Record<string, any>; // Optional Plotly layout configuration
 	}
 
-	let { rawData, multiCellLayout, singleLteLayout, singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, showGroupingSelector = true, onSearch, searchPlaceholder = "Search..." }: Props = $props();
+	let { rawData, multiCellLayout, singleLteLayout, 
+		singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], 
+		cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, 
+		showGroupingSelector = true, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
 
 	// Search state
 	let searchTerm = $state('');
@@ -319,6 +323,8 @@
 					markers={markers}
 					showGlobalControls={true}
 					enableAdaptation={true}
+					plotlyLayout={plotlyLayout}
+					persistSettings={true}
 				/>
 			{:else}
 				<div class="d-flex align-items-center justify-content-center h-100">

package/dist/apps/site-check/SiteCheck.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     showGroupingSelector?: boolean;
     onSearch?: (searchTerm: string) => void;
     searchPlaceholder?: string;
+    plotlyLayout?: Record<string, any>;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/apps/site-check/transforms.js

@@ -229,7 +229,7 @@ export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimu
                         sector: record.sector,
                         azimuth: record.azimuth
                     },
-                    defaultChecked: true
+                    defaultChecked: false // Start unselected
                 };
                 level1Node.children.push(cellNode);
             });
@@ -293,7 +293,7 @@ function build2LevelTree(data, grouping) {
                     sector: record.sector,
                     azimuth: record.azimuth
                 },
-                defaultChecked: true
+                defaultChecked: false // Start unselected
             };
             level0Node.children.push(cellNode);
         });

package/dist/core/Charts/ChartCard.svelte

@@ -8,6 +8,7 @@
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
 	import { log } from '../logger';
+	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
 		chart: ChartModel;
@@ -39,6 +40,7 @@
 	let chartDiv: HTMLElement;
 	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
 	let chartInitialized = $state(false); // Track if chart has been created
+	let isHealthy = $state(checkHealth('charts'));
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
@@ -268,6 +270,7 @@
 	}
 
 	onMount(() => {
+
 		log('📈 ChartCard mounted', {
 			chartTitle: chart.title,
 			leftKPIs: chart.yLeft.length,
@@ -286,7 +289,9 @@
 				height: rect.height
 			});
 		}
-
+		if(!isHealthy){
+			return;
+		}
 		renderChart();
 		
 		// Set up ResizeObserver with debouncing to prevent excessive re-renders

package/dist/core/Charts/ChartComponent.svelte

@@ -7,6 +7,7 @@
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
 	import { log } from '../logger';
+	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
 		layout: Layout;
@@ -16,6 +17,7 @@
 		plotlyLayout?: any; // Optional custom Plotly layout
 		enableAdaptation?: boolean; // Enable size-based adaptations
 		showGlobalControls?: boolean; // Show/hide global controls section (default: true)
+		persistSettings?: boolean; // Enable localStorage persistence for global controls (default: false)
 	}
 
 	const GRID_DIMENSIONS: Record<ChartGrid, { rows: number; columns: number }> = {
@@ -54,8 +56,8 @@
 		section: Section;
 	}
 
-	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
-	
+	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true, persistSettings = false }: Props = $props();
+	let isHealthy = $state(checkHealth('charts'));
 	// Log component initialization
 	$effect(() => {
 		log('📊 ChartComponent initialized', {
@@ -88,6 +90,9 @@
 		},
 		hoverMode: {
 			mode: layout.hoverMode ?? 'x' // Default to 'x' if not specified
+		},
+		adaptive: {
+			enabled: enableAdaptation // Initialize from prop, always present
 		}
 	});
 	
@@ -272,6 +277,7 @@
 	}
 
 	onMount(() => {
+
 		const handleKeydown = (event: KeyboardEvent) => {
 			if (event.key === 'Escape') {
 				if (zoomedChart) {
@@ -328,7 +334,7 @@
 					{processedData}
 					{markers}
 					{plotlyLayout}
-					{enableAdaptation}
+					enableAdaptation={globalControls.adaptive?.enabled ?? true}
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
@@ -353,6 +359,7 @@
 			onUpdate={handleControlsUpdate}
 			isExpanded={showControlsPanel}
 			onToggle={() => showControlsPanel = !showControlsPanel}
+			persistSettings={persistSettings}
 		/>
 	{/if}
 	
@@ -447,7 +454,7 @@
 					{processedData}
 					{markers}
 					{plotlyLayout}
-					{enableAdaptation}
+					enableAdaptation={globalControls.adaptive?.enabled ?? true}
 					sectionId={activeZoom.section.id}
 					sectionMovingAverage={activeZoom.section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}

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

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

package/dist/core/Charts/GlobalControls.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { GlobalChartControls, HoverMode } from './charts.model.js';
 
 	interface Props {
@@ -8,55 +9,110 @@
 		onUpdate: (controls: GlobalChartControls) => void;
 		isExpanded?: boolean;
 		onToggle?: () => void;
+		persistSettings?: boolean; // Optional: enable localStorage persistence
 	}
 
-	let { controls, onUpdate, isExpanded = false, onToggle }: Props = $props();
+	let { controls, onUpdate, isExpanded = false, onToggle, persistSettings = false }: Props = $props();
+
+	const STORAGE_KEY = 'chart-global-controls';
+
+	// Load saved settings on mount
+	onMount(() => {
+		if (persistSettings && typeof window !== 'undefined') {
+			try {
+				const saved = localStorage.getItem(STORAGE_KEY);
+				if (saved) {
+					const savedControls = JSON.parse(saved) as GlobalChartControls;
+					onUpdate(savedControls);
+				}
+			} catch (error) {
+				console.warn('Failed to load chart controls from localStorage:', error);
+			}
+		}
+	});
+
+	// Save settings to localStorage
+	function saveSettings(updatedControls: GlobalChartControls) {
+		if (persistSettings && typeof window !== 'undefined') {
+			try {
+				console.log('💾 Saving chart controls to localStorage:', updatedControls);
+				localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedControls));
+				console.log('✅ Saved successfully');
+			} catch (error) {
+				console.warn('Failed to save chart controls to localStorage:', error);
+			}
+		} else {
+			console.log('⚠️ Not saving: persistSettings =', persistSettings);
+		}
+	}
 
 	function updateControls(updates: Partial<GlobalChartControls>) {
-		onUpdate({
+		const newControls = {
 			...controls,
 			...updates
-		});
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
 	}
 
 	function updateMovingAverage(updates: Partial<NonNullable<GlobalChartControls['movingAverage']>>) {
-		onUpdate({
+		const newControls = {
 			...controls,
 			movingAverage: {
 				...controls.movingAverage!,
 				...updates
 			}
-		});
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
 	}
 
 	function updateMarkers(updates: Partial<NonNullable<GlobalChartControls['markers']>>) {
-		onUpdate({
+		const newControls = {
 			...controls,
 			markers: {
 				...controls.markers!,
 				...updates
 			}
-		});
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
 	}
 
 	function updateLegend(updates: Partial<NonNullable<GlobalChartControls['legend']>>) {
-		onUpdate({
+		const newControls = {
 			...controls,
 			legend: {
 				...controls.legend!,
 				...updates
 			}
-		});
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
 	}
 
 	function updateHoverMode(updates: Partial<NonNullable<GlobalChartControls['hoverMode']>>) {
-		onUpdate({
+		const newControls = {
 			...controls,
 			hoverMode: {
 				...controls.hoverMode!,
 				...updates
 			}
-		});
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
+	}
+
+	function updateAdaptive(updates: Partial<NonNullable<GlobalChartControls['adaptive']>>) {
+		const newControls = {
+			...controls,
+			adaptive: {
+				...controls.adaptive!,
+				...updates
+			}
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
 	}
 </script>
 
@@ -102,7 +158,11 @@
 								checked={controls.markers.enabled}
 								onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
 							/>
-							<label class="btn btn-outline-primary btn-sm" for="markersToggle">
+							<label 
+								class="btn btn-outline-primary btn-sm" 
+								for="markersToggle"
+								title="Show or hide data point markers on charts"
+							>
 								Markers
 							</label>
 						</div>
@@ -118,17 +178,41 @@
 								checked={controls.legend.enabled}
 								onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
 							/>
-							<label class="btn btn-outline-primary btn-sm" for="legendToggle">
+							<label 
+								class="btn btn-outline-primary btn-sm" 
+								for="legendToggle"
+								title="Show or hide the chart legend with series names"
+							>
 								Legend
 							</label>
 						</div>
 					{/if}
+
+					<!-- Adaptive Toggle (Always Present - Not Optional) -->
+					<div class="control-group-inline">
+						<input
+							type="checkbox"
+							class="btn-check"
+							id="adaptiveToggle"
+							checked={controls.adaptive?.enabled ?? true}
+							onchange={() => updateAdaptive({ enabled: !(controls.adaptive?.enabled ?? true) })}
+						/>
+						<label 
+							class="btn btn-outline-primary btn-sm" 
+							for="adaptiveToggle"
+							title="Enable adaptive chart display based on chart size and data density"
+						>
+							Adaptive
+						</label>
+					</div>
 				</div>
 
 				<!-- Hover Mode Controls -->
 				{#if controls.hoverMode}
 					<div class="control-group">
-						<div class="control-label">Hover Mode</div>
+						<div class="control-label" title="Control how hover tooltips appear when you move your mouse over the chart">
+							Hover Mode
+						</div>
 						<div class="btn-group btn-group-sm" role="group" aria-label="Hover Mode">
 							<input
 								type="radio"
@@ -138,7 +222,13 @@
 								checked={controls.hoverMode.mode === 'x'}
 								onchange={() => updateHoverMode({ mode: 'x' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeX">X-Axis</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeX"
+								title="Show all data points at the same X-axis position"
+							>
+								X-Axis
+							</label>
 
 							<!-- <input
 								type="radio"
@@ -158,7 +248,13 @@
 								checked={controls.hoverMode.mode === 'closest'}
 								onchange={() => updateHoverMode({ mode: 'closest' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeClosest">Closest</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeClosest"
+								title="Show only the single closest data point to your cursor"
+							>
+								Closest
+							</label>
 
 							<input
 								type="radio"
@@ -168,7 +264,13 @@
 								checked={controls.hoverMode.mode === 'x unified'}
 								onchange={() => updateHoverMode({ mode: 'x unified' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeXUnified">X-Unified</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeXUnified"
+								title="Show all data points at the same X position with a single unified tooltip"
+							>
+								X-Unified
+							</label>
 
 							<!-- <input
 								type="radio"
@@ -188,7 +290,13 @@
 								checked={controls.hoverMode.mode === false}
 								onchange={() => updateHoverMode({ mode: false })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeFalse">Off</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeFalse"
+								title="Disable hover tooltips completely"
+							>
+								Off
+							</label>
 						</div>
 					</div>
 				{/if}
@@ -204,7 +312,11 @@
 							checked={controls.movingAverage.enabled}
 							onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
 						/>
-						<label class="btn btn-outline-primary btn-sm" for="maToggle">
+						<label 
+							class="btn btn-outline-primary btn-sm" 
+							for="maToggle"
+							title="Apply smoothing to chart data using moving average calculations"
+						>
 							Moving Average
 						</label>
 						
@@ -220,7 +332,13 @@
 										checked={controls.movingAverage.windowOverride === undefined}
 										onchange={() => updateMovingAverage({ windowOverride: undefined })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindowAuto"
+										title="Default size from settings"
+									>
+										Auto
+									</label>
 
 									<input
 										type="radio"
@@ -230,7 +348,13 @@
 										checked={controls.movingAverage.windowOverride === 7}
 										onchange={() => updateMovingAverage({ windowOverride: 7 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow7">7</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow7"
+										title="Use a 7-period moving average window"
+									>
+										7
+									</label>
 
 									<input
 										type="radio"
@@ -240,7 +364,13 @@
 										checked={controls.movingAverage.windowOverride === 14}
 										onchange={() => updateMovingAverage({ windowOverride: 14 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow14">14</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow14"
+										title="Use a 14-period moving average window"
+									>
+										14
+									</label>
 
 									<input
 										type="radio"
@@ -250,7 +380,13 @@
 										checked={controls.movingAverage.windowOverride === 24}
 										onchange={() => updateMovingAverage({ windowOverride: 24 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow24">24</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow24"
+										title="Use a 24-period moving average window"
+									>
+										24
+									</label>
 
 									<input
 										type="radio"
@@ -260,7 +396,13 @@
 										checked={controls.movingAverage.windowOverride === 30}
 										onchange={() => updateMovingAverage({ windowOverride: 30 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow30">30</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow30"
+										title="Use a 30-period moving average window"
+									>
+										30
+									</label>
 								</div>
 
 								<!-- Show Original Toggle Button -->
@@ -271,7 +413,11 @@
 									checked={controls.movingAverage.showOriginal}
 									onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
 								/>
-								<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
+								<label 
+									class="btn btn-outline-primary btn-sm ms-2" 
+									for="showOriginal"
+									title="Display both the original data and the moving average together"
+								>
 									Show Original
 								</label>
 							</div>

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

@@ -4,6 +4,7 @@ interface Props {
     onUpdate: (controls: GlobalChartControls) => void;
     isExpanded?: boolean;
     onToggle?: () => void;
+    persistSettings?: boolean;
 }
 declare const GlobalControls: import("svelte").Component<Props, {}, "">;
 type GlobalControls = ReturnType<typeof GlobalControls>;

package/dist/core/Charts/adapt.js

@@ -9,7 +9,7 @@
 function adaptHoverBehavior(layout, containerSize, chartInfo, originalHoverMode) {
     const { width, height } = containerSize;
     const isTiny = width < 250 || height < 200;
-    const isSmall = width < 400 || height < 300;
+    const isSmall = width < 250 || height < 200;
     const isMedium = width < 600 || height < 400;
     const totalSeries = chartInfo.leftSeriesCount + chartInfo.rightSeriesCount;
     // Only override hover mode in critical cases for performance/UX

package/dist/core/Charts/charts.model.d.ts

@@ -69,6 +69,9 @@ export interface GlobalChartControls {
     hoverMode?: {
         mode: HoverMode;
     };
+    adaptive?: {
+        enabled: boolean;
+    };
 }
 export interface CellStylingConfig {
     bandColors: Record<string, string>;

package/dist/core/Charts/data-utils.js

@@ -302,7 +302,14 @@ export function createDefaultPlotlyLayout(title, hoverMode, coloredHover = true)
             showgrid: true,
             gridcolor: '#ecf0f1',
             linecolor: '#bdc3c7',
-            tickfont: { size: 11 }
+            tickfont: { size: 11 },
+            // Show Y-axis marker with line when in 'closest' hover mode
+            // showspikes: hoverMode === 'closest',
+            // spikemode: 'marker',  // Line to axis + triangle marker
+            // spikesnap: 'cursor',         // Snap to cursor position
+            // spikethickness: 1,           // Line thickness
+            // spikecolor: '#000000ff',       // Primary blue color
+            // spikedash: 'dot'             // Dotted line
         },
         margin: { l: 60, r: 60, t: 60, b: 50 },
         paper_bgcolor: 'rgba(0,0,0,0)',

package/dist/core/FeatureRegistry/index.js

@@ -1,4 +1,4 @@
-const R = new Date('2025-12-31T23:59:59Z').getTime();
+const R = new Date('2026-03-31T23:59:59Z').getTime();
 export function checkHealth(feature) {
     // Skip check during SSR
     if (typeof window === 'undefined')

package/dist/core/index.d.ts

@@ -3,5 +3,4 @@ export * from './Charts/index.js';
 export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
-export * from './Map/index.js';
 export * from './FeatureRegistry/index.js';

package/dist/core/index.js

@@ -11,6 +11,7 @@ export * from './Settings/index.js';
 // Logger utility for debugging and monitoring
 export * from './logger/index.js';
 // Map component - Mapbox GL + Deck.GL integration
-export * from './Map/index.js';
+// TODO: Moved to top-level src/lib/map module
+// export * from './Map/index.js';
 // FeatureRegistry - Component access management
 export * from './FeatureRegistry/index.js';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './core/index.js';
+export * from './map/index.js';
 export * from './apps/index.js';

package/dist/index.js

@@ -2,5 +2,7 @@
 // This approach keeps the main index clean and allows for easy expansion
 // Core components (Desktop orchestration + Charts + TreeView)
 export * from './core/index.js';
+// Map components (Mapbox cellular visualization)
+export * from './map/index.js';
 // Complete applications
 export * from './apps/index.js';