@smartnet360/svelte-components 0.0.27 → 0.0.29

package/dist/core/Charts/ChartCard.svelte

@@ -27,9 +27,11 @@
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
 		runtimeMAOverride?: MovingAverageConfig | null; // Runtime override from global controls
 		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
+		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
+		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal }: Props = $props();
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -66,12 +68,8 @@
 		return output;
 	}
 
-	function renderChart() {
-		if (!chartDiv || !data?.length) return;
-
-		const traces: any[] = [];
-		let colorIndex = 0;
-
+	// Memoize MA hierarchy resolution - only recalculate when inputs change
+	let resolvedKPIs = $derived.by(() => {
 		// Helper function to apply MA with full hierarchy:
 		// Runtime Override > KPI > Chart > Section > Layout (higher priority wins)
 		const applyMovingAverageHierarchy = (kpi: any) => {
@@ -141,18 +139,31 @@
 			return kpi;
 		};
 
+		return {
+			left: chart.yLeft.map(applyMovingAverageHierarchy),
+			right: chart.yRight.map(applyMovingAverageHierarchy)
+		};
+	});
+
+	// Extract timestamps once, not for every KPI
+	let timestamps = $derived(data.map(row => row['TIMESTAMP']));
+
+	function renderChart() {
+		if (!chartDiv || !data?.length) return;
+
+		const traces: any[] = [];
+		let colorIndex = 0;
+
 		// Add left Y-axis traces (with moving average support)
-		chart.yLeft.forEach(kpi => {
-			const kpiWithMA = applyMovingAverageHierarchy(kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(data, kpiWithMA, 'TIMESTAMP', 'y1', colorIndex);
+		resolvedKPIs.left.forEach(kpi => {
+			const kpiTraces = createTimeSeriesTraceWithMA(data, kpi, 'TIMESTAMP', 'y1', colorIndex, timestamps);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 
 		// Add right Y-axis traces (with moving average support)
-		chart.yRight.forEach(kpi => {
-			const kpiWithMA = applyMovingAverageHierarchy(kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(data, kpiWithMA, 'TIMESTAMP', 'y2', colorIndex);
+		resolvedKPIs.right.forEach(kpi => {
+			const kpiTraces = createTimeSeriesTraceWithMA(data, kpi, 'TIMESTAMP', 'y2', colorIndex, timestamps);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
@@ -182,10 +193,10 @@
 		}
 
 		// Merge external layout with defaults using deep merge
-		// Use structuredClone for deep copy to prevent mutation of defaultLayout
-		let finalLayout = structuredClone(
-			plotlyLayout ? deepMerge(defaultLayout, plotlyLayout) : defaultLayout
-		);
+		// Only deep merge if plotlyLayout is provided (optimization)
+		let finalLayout = plotlyLayout 
+			? deepMerge(defaultLayout, plotlyLayout) 
+			: defaultLayout;
 
 		// Apply size-based adaptations using helper
 		finalLayout = adaptPlotlyLayout(
@@ -198,8 +209,16 @@
 			{ enableAdaptation }
 		);
 
-		// Add markers to the layout
-		finalLayout = addMarkersToLayout(finalLayout, markers || [], containerSize, enableAdaptation);
+		// Add markers to the layout only if runtime control allows
+		if (runtimeShowMarkers) {
+			finalLayout = addMarkersToLayout(finalLayout, markers || [], containerSize, enableAdaptation);
+		}
+		
+		// Apply legend visibility control
+		if (finalLayout.showlegend === undefined || finalLayout.showlegend) {
+			// Only override if legend would normally be shown
+			finalLayout.showlegend = runtimeShowLegend;
+		}
 
 		const config = {
 			responsive: true,
@@ -227,43 +246,67 @@
 
 		renderChart();
 		
-		// Set up ResizeObserver to handle container size changes
+		// Set up ResizeObserver with debouncing to prevent excessive re-renders
 		if (chartDiv && window.ResizeObserver) {
+			let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+			
 			const resizeObserver = new ResizeObserver((entries) => {
-				for (const entry of entries) {
-					const { width, height } = entry.contentRect;
-					
-					// Update container size state
-					containerSize.width = width;
-					containerSize.height = height;
-					
-					if (chartDiv && chartDiv.children.length > 0) {
-						// Re-render chart with new adaptive layout
-						renderChart();
-					}
+				// Clear previous timeout
+				if (resizeTimeout) {
+					clearTimeout(resizeTimeout);
 				}
+				
+				// Debounce resize events - wait 150ms after last resize
+				resizeTimeout = setTimeout(() => {
+					for (const entry of entries) {
+						const { width, height } = entry.contentRect;
+						
+						// Only re-render if size actually changed significantly (>5px)
+						const widthChanged = Math.abs(containerSize.width - width) > 5;
+						const heightChanged = Math.abs(containerSize.height - height) > 5;
+						
+						if (widthChanged || heightChanged) {
+							// Update container size state
+							containerSize.width = width;
+							containerSize.height = height;
+							
+							if (chartDiv && chartDiv.children.length > 0) {
+								// Use Plotly.Plots.resize for better performance than full re-render
+								Plotly.Plots.resize(chartDiv);
+							}
+						}
+					}
+				}, 150);
 			});
 			
 			resizeObserver.observe(chartDiv);
 			
 			// Clean up observer on component destroy
 			return () => {
+				if (resizeTimeout) {
+					clearTimeout(resizeTimeout);
+				}
 				resizeObserver.disconnect();
 			};
 		}
 	});
 	
-	// React to prop changes - re-render chart when runtime controls change
+	// React to prop changes - debounce re-renders for better performance
 	$effect(() => {
 		// Watch these props and re-render when they change
-		runtimeMAOverride;
-		runtimeShowOriginal;
-		data;
-		markers;
+		const currentData = data;
+		const currentMarkers = markers;
+		const currentMAOverride = runtimeMAOverride;
+		const currentShowOriginal = runtimeShowOriginal;
+		const currentShowMarkers = runtimeShowMarkers;
+		const currentShowLegend = runtimeShowLegend;
 		
 		// Only re-render if chartDiv is already initialized
 		if (chartDiv && chartDiv.children.length > 0) {
-			renderChart();
+			// Use requestAnimationFrame to batch updates
+			requestAnimationFrame(() => {
+				renderChart();
+			});
 		}
 	});
 </script>

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

@@ -10,6 +10,8 @@ interface Props {
     layoutMovingAverage?: MovingAverageConfig;
     runtimeMAOverride?: MovingAverageConfig | null;
     runtimeShowOriginal?: boolean;
+    runtimeShowMarkers?: boolean;
+    runtimeShowLegend?: 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

@@ -60,6 +60,12 @@
 			enabled: layout.movingAverage?.enabled ?? true,
 			windowOverride: undefined,
 			showOriginal: layout.movingAverage?.showOriginal ?? true
+		},
+		markers: {
+			enabled: true // Default to showing markers
+		},
+		legend: {
+			enabled: true // Default to showing legend
 		}
 	});
 	
@@ -294,6 +300,8 @@
 					layoutMovingAverage={layout.movingAverage}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
+					runtimeShowMarkers={globalControls.markers?.enabled}
+					runtimeShowLegend={globalControls.legend?.enabled}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
 				/>
 			</div>
@@ -434,6 +442,8 @@
 					layoutMovingAverage={layout.movingAverage}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
+					runtimeShowMarkers={globalControls.markers?.enabled}
+					runtimeShowLegend={globalControls.legend?.enabled}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
 				/>
 			</div>

package/dist/core/Charts/GlobalControls.svelte

@@ -26,6 +26,26 @@
 			}
 		});
 	}
+
+	function updateMarkers(updates: Partial<NonNullable<GlobalChartControls['markers']>>) {
+		onUpdate({
+			...controls,
+			markers: {
+				...controls.markers!,
+				...updates
+			}
+		});
+	}
+
+	function updateLegend(updates: Partial<NonNullable<GlobalChartControls['legend']>>) {
+		onUpdate({
+			...controls,
+			legend: {
+				...controls.legend!,
+				...updates
+			}
+		});
+	}
 </script>
 
 <div class="global-controls">
@@ -117,16 +137,39 @@
 				{/if}
 			</div>
 		{/if}
-		
-		<!-- Future controls can be added here -->
-		<!-- Example:
-		<div class="control-group">
-			<div class="form-check form-check-inline">
-				<input type="checkbox" id="markersToggle" />
-				<label for="markersToggle">Markers</label>
+
+		<!-- Markers Toggle -->
+		{#if controls.markers}
+			<div class="control-group">
+				<input
+					type="checkbox"
+					class="btn-check"
+					id="markersToggle"
+					checked={controls.markers.enabled}
+					onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
+				/>
+				<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
+					Markers
+				</label>
 			</div>
-		</div>
-		-->
+		{/if}
+
+		<!-- Legend Toggle -->
+		{#if controls.legend}
+			<div class="control-group">
+				<input
+					type="checkbox"
+					class="btn-check"
+					id="legendToggle"
+					checked={controls.legend.enabled}
+					onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
+				/>
+				<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
+					Legend
+				</label>
+			</div>
+		{/if}
+		
 	</div>
 </div>
 
@@ -147,12 +190,6 @@
 		flex-wrap: wrap;
 	}
 
-	.controls-label {
-		font-weight: 600;
-		color: #495057;
-		margin-right: 0.5rem;
-	}
-
 	.control-group {
 		display: flex;
 		align-items: center;

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

@@ -49,4 +49,10 @@ export interface GlobalChartControls {
         windowOverride?: number;
         showOriginal?: boolean;
     };
+    markers?: {
+        enabled: boolean;
+    };
+    legend?: {
+        enabled: boolean;
+    };
 }

package/dist/core/Charts/data-utils.d.ts

@@ -1,11 +1,5 @@
 import type { KPI } from './charts.model.js';
 export declare function processKPIData(data: any[], kpi: KPI): number[];
-/**
- * Calculate moving average for a series of values
- * @param values - Array of numeric values
- * @param window - Number of periods for MA calculation
- * @returns Array of moving average values (NaN for insufficient data points)
- */
 export declare function calculateMovingAverage(values: number[], window: number): number[];
 export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): any;
 /**
@@ -15,9 +9,10 @@ export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampFi
  * @param timestampField - Field name for timestamp column
  * @param yaxis - Which Y-axis to use ('y1' or 'y2')
  * @param colorIndex - Index for color selection
+ * @param precomputedTimestamps - Optional pre-extracted timestamps array (performance optimization)
  * @returns Array of traces (original + MA if configured)
  */
-export declare function createTimeSeriesTraceWithMA(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): any[];
+export declare function createTimeSeriesTraceWithMA(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number, precomputedTimestamps?: any[]): any[];
 export declare function getYAxisTitle(kpis: KPI[]): string;
 export declare function formatValue(value: number, scale: 'percent' | 'absolute', unit: string): string;
 export declare function createDefaultPlotlyLayout(title?: string): any;

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

@@ -11,13 +11,28 @@ const modernColors = [
     '#EC4899', // Pink
     '#6B7280' // Gray
 ];
+// Cache for processed KPI data to avoid reprocessing on every render
+const dataCache = new WeakMap();
 export function processKPIData(data, kpi) {
-    return data
+    // Check cache first
+    let kpiCache = dataCache.get(data);
+    if (kpiCache && kpiCache.has(kpi.rawName)) {
+        return kpiCache.get(kpi.rawName);
+    }
+    // Process data
+    const processed = data
         .map(row => {
         const val = row[kpi.rawName];
         return typeof val === 'number' ? val : parseFloat(val);
     })
         .filter(val => !isNaN(val));
+    // Store in cache
+    if (!kpiCache) {
+        kpiCache = new Map();
+        dataCache.set(data, kpiCache);
+    }
+    kpiCache.set(kpi.rawName, processed);
+    return processed;
 }
 /**
  * Calculate moving average for a series of values
@@ -25,7 +40,15 @@ export function processKPIData(data, kpi) {
  * @param window - Number of periods for MA calculation
  * @returns Array of moving average values (NaN for insufficient data points)
  */
+// Cache for moving average calculations
+const maCache = new Map();
 export function calculateMovingAverage(values, window) {
+    // Create cache key from values length + window + first/last few values
+    const cacheKey = `${values.length}-${window}-${values[0]}-${values[values.length - 1]}`;
+    // Check cache
+    if (maCache.has(cacheKey)) {
+        return maCache.get(cacheKey);
+    }
     const result = [];
     for (let i = 0; i < values.length; i++) {
         if (i < window - 1) {
@@ -39,6 +62,14 @@ export function calculateMovingAverage(values, window) {
             result.push(sum / window);
         }
     }
+    // Store in cache (limit cache size to prevent memory leaks)
+    if (maCache.size > 100) {
+        const firstKey = maCache.keys().next().value;
+        if (firstKey !== undefined) {
+            maCache.delete(firstKey);
+        }
+    }
+    maCache.set(cacheKey, result);
     return result;
 }
 export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
@@ -72,12 +103,13 @@ export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', y
  * @param timestampField - Field name for timestamp column
  * @param yaxis - Which Y-axis to use ('y1' or 'y2')
  * @param colorIndex - Index for color selection
+ * @param precomputedTimestamps - Optional pre-extracted timestamps array (performance optimization)
  * @returns Array of traces (original + MA if configured)
  */
-export function createTimeSeriesTraceWithMA(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
+export function createTimeSeriesTraceWithMA(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0, precomputedTimestamps) {
     const traces = [];
     const values = processKPIData(data, kpi);
-    const timestamps = data.map(row => row[timestampField]);
+    const timestamps = precomputedTimestamps || data.map(row => row[timestampField]);
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Add original trace (unless explicitly disabled)
     if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {

package/package.json

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