@smartnet360/svelte-components 0.0.32 → 0.0.34

package/dist/core/Charts/ChartCard.svelte

@@ -37,6 +37,7 @@
 	// Chart container div and state
 	let chartDiv: HTMLElement;
 	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
+	let chartInitialized = $state(false); // Track if chart has been created
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
@@ -229,7 +230,15 @@
 			displaylogo: false
 		};
 
-		Plotly.newPlot(chartDiv, traces, finalLayout, config);
+		// Use Plotly.react() for updates (preserves zoom/pan) or newPlot for initial render
+		if (chartInitialized) {
+			// Update existing chart - much faster, preserves user interactions
+			Plotly.react(chartDiv, traces, finalLayout, config);
+		} else {
+			// Initial chart creation
+			Plotly.newPlot(chartDiv, traces, finalLayout, config);
+			chartInitialized = true;
+		}
 		
 		// Resize immediately after creation to ensure proper sizing
 		setTimeout(() => {
@@ -291,6 +300,12 @@
 					clearTimeout(resizeTimeout);
 				}
 				resizeObserver.disconnect();
+				
+				// Clean up Plotly chart
+				if (chartDiv && chartInitialized) {
+					Plotly.purge(chartDiv);
+					chartInitialized = false;
+				}
 			};
 		}
 	});
@@ -334,6 +349,7 @@
 		transition: box-shadow 0.2s ease;
 		overflow: hidden; /* Prevent content overflow */
 		box-sizing: border-box; /* Include padding in size calculations */
+		contain: layout style paint; /* Browser optimization: isolate rendering from rest of page */
 	}
 
 	.chart-card:hover {

package/dist/core/Charts/adapt.js

@@ -2,6 +2,56 @@
  * Chart-specific adaptation utilities for Plotly layouts
  * Handles size-based adaptations while preserving external styling/theming
  */
+/**
+ * Adapts hover behavior based on container size and series count
+ * Optimizes tooltip display and performance for different chart sizes
+ */
+function adaptHoverBehavior(layout, containerSize, chartInfo) {
+    const { width, height } = containerSize;
+    const isTiny = width < 250 || height < 200;
+    const isSmall = width < 400 || height < 300;
+    const isMedium = width < 600 || height < 400;
+    const totalSeries = chartInfo.leftSeriesCount + chartInfo.rightSeriesCount;
+    // Priority 1: Disable hover in tiny charts (performance + UX)
+    if (isTiny) {
+        layout.hovermode = 'closest'; // Single point instead of unified
+        if (layout.hoverlabel) {
+            layout.hoverlabel.font = layout.hoverlabel.font || {};
+            layout.hoverlabel.font.size = 9; // Smaller font
+        }
+        return layout;
+    }
+    // Priority 2: Simplify hover in small charts
+    if (isSmall) {
+        layout.hovermode = 'x'; // Single point instead of unified
+        if (layout.hoverlabel) {
+            layout.hoverlabel.font = layout.hoverlabel.font || {};
+            layout.hoverlabel.font.size = 9; // Smaller font
+        }
+        return layout;
+    }
+    // Priority 3: Adaptive hover mode based on series count
+    if (totalSeries > 4 && isMedium) {
+        // Too many series in medium chart - switch to closest
+        layout.hovermode = 'x';
+    }
+    else if (totalSeries > 8) {
+        // Very many series - even in large charts, use x
+        layout.hovermode = 'x';
+    }
+    // Otherwise keep default 'x unified' from base layout
+    // Priority 4: Adaptive hover label font size
+    if (layout.hoverlabel) {
+        layout.hoverlabel.font = layout.hoverlabel.font || {};
+        if (isMedium) {
+            layout.hoverlabel.font.size = 10;
+        }
+        else {
+            layout.hoverlabel.font.size = 11; // Default for large
+        }
+    }
+    return layout;
+}
 /**
  * Adapts a Plotly layout based on container size
  * Preserves external styling while optimizing functional properties
@@ -96,6 +146,8 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
             adaptedLayout.legend.font.size = 11;
         }
     }
+    // Apply adaptive hover behavior (disable in tiny, simplify in small, optimize for series count)
+    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo);
     return adaptedLayout;
 }
 /**

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

@@ -201,7 +201,7 @@ export function createDefaultPlotlyLayout(title) {
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
         font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
-        hovermode: 'x unified',
+        hovermode: 'x',
         hoverlabel: {
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',

package/package.json

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