@smartnet360/svelte-components 0.0.49 → 0.0.51

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/helper.js

@@ -63,14 +63,18 @@ function expandKPIs(baseKPIs, cells, stylingConfig, stackGroupMode = 'none') {
             if (stylingConfig) {
                 // Apply custom styling (band colors, sector line styles)
                 const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, stylingConfig);
-                expandedKPIs.push(styledKPI);
+                expandedKPIs.push({
+                    ...styledKPI,
+                    stackGroup: undefined // Initialize for treeshake-safe property assignment
+                });
             }
             else {
                 // Use Chart component default behavior: keep base KPI name
                 // Just update rawName to reference the pivoted column
                 expandedKPIs.push({
                     ...baseKPI,
-                    rawName: `${baseKPI.rawName}_${cellName}`
+                    rawName: `${baseKPI.rawName}_${cellName}`,
+                    stackGroup: undefined // Initialize for treeshake-safe property assignment
                 });
             }
         });

package/dist/core/Charts/ChartComponent.svelte

@@ -16,6 +16,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,7 +55,7 @@
 		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();
 	
 	// Log component initialization
 	$effect(() => {
@@ -353,6 +354,7 @@
 			onUpdate={handleControlsUpdate}
 			isExpanded={showControlsPanel}
 			onToggle={() => showControlsPanel = !showControlsPanel}
+			persistSettings={persistSettings}
 		/>
 	{/if}
 	

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,98 @@
 		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);
 	}
 </script>
 
@@ -435,17 +479,20 @@
 	}
 
 	.floating-controls-panel :global(.btn-outline-primary) {
-		border-color: rgba(13, 110, 253, 0.3);
+		color: var(--bs-primary, #0d6efd);
+		border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 30%, transparent);
 	}
 
 	.floating-controls-panel :global(.btn-outline-primary:hover) {
-		background-color: rgba(13, 110, 253, 0.1);
-		border-color: rgba(13, 110, 253, 0.5);
+		color: var(--bs-btn-hover-color, #fff);
+		background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
+		border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 50%, transparent);
 	}
 
 	.floating-controls-panel :global(.btn-check:checked + .btn-outline-primary) {
-		background-color: #0d6efd;
-		border-color: #0d6efd;
+		color: var(--bs-btn-active-color, #fff);
+		background-color: var(--bs-primary, #0d6efd);
+		border-color: var(--bs-primary, #0d6efd);
 	}
 
 	.floating-controls-panel :global(.btn-group) {

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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.49",
+	"version": "0.0.51",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",