@smartnet360/svelte-components 0.0.28 → 0.0.30

package/dist/core/Charts/ChartCard.svelte

@@ -19,6 +19,7 @@
 	interface Props {
 		chart: ChartModel;
 		data: any[];
+		timestamps: any[]; // Pre-extracted timestamps from ChartComponent
 		markers?: ChartMarker[]; // Global markers for all charts
 		plotlyLayout?: any; // Optional custom Plotly layout for styling/theming
 		enableAdaptation?: boolean; // Enable size-based adaptations (default: true)
@@ -31,7 +32,7 @@
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, data, timestamps, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -68,12 +69,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) => {
@@ -143,18 +140,28 @@
 			return kpi;
 		};
 
+		return {
+			left: chart.yLeft.map(applyMovingAverageHierarchy),
+			right: chart.yRight.map(applyMovingAverageHierarchy)
+		};
+	});
+
+	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++;
 		});
@@ -184,10 +191,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(
@@ -237,43 +244,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

@@ -2,6 +2,7 @@ import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './ch
 interface Props {
     chart: ChartModel;
     data: any[];
+    timestamps: any[];
     markers?: ChartMarker[];
     plotlyLayout?: any;
     enableAdaptation?: boolean;

package/dist/core/Charts/ChartComponent.svelte

@@ -54,6 +54,9 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
 	
+	// Extract timestamps once at component level - all charts share the same time series
+	let timestamps = $derived(data.map(row => row['TIMESTAMP']));
+	
 	// Global runtime controls state - initialize from layout config
 	let globalControls = $state<GlobalChartControls>({
 		movingAverage: {
@@ -292,6 +295,7 @@
 				<ChartCard
 					{chart}
 					{data}
+					{timestamps}
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}
@@ -434,6 +438,7 @@
 				<ChartCard
 					chart={activeZoom.chart}
 					{data}
+					{timestamps}
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}

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.28",
+	"version": "0.0.30",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",