@smartnet360/svelte-components 0.0.31 → 0.0.33

package/dist/core/Charts/ChartCard.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from 'svelte';
 	import Plotly from 'plotly.js-dist-min';
-	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig, HoverMode } from './charts.model.js';
 	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
@@ -23,6 +23,7 @@
 		markers?: ChartMarker[]; // Global markers for all charts
 		plotlyLayout?: any; // Optional custom Plotly layout for styling/theming
 		enableAdaptation?: boolean; // Enable size-based adaptations (default: true)
+		configuredHoverMode?: HoverMode; // Global hover mode from layout config
 		sectionId?: string;
 		sectionMovingAverage?: MovingAverageConfig; // Section-level MA config
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
@@ -32,11 +33,12 @@
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, configuredHoverMode, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// 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();
@@ -209,7 +211,7 @@
 				leftSeriesCount: chart.yLeft.length, 
 				rightSeriesCount: chart.yRight.length 
 			},
-			{ enableAdaptation }
+			{ enableAdaptation, configuredHoverMode }
 		);
 
 		// Add markers to the layout only if runtime control allows
@@ -229,7 +231,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(() => {
@@ -274,8 +284,9 @@
 							containerSize.height = height;
 							
 							if (chartDiv && chartDiv.children.length > 0) {
-								// Use Plotly.Plots.resize for better performance than full re-render
-								Plotly.Plots.resize(chartDiv);
+								// Re-render chart to apply size-based adaptations
+								// This recalculates layout with new containerSize for proper adaptation
+								renderChart();
 							}
 						}
 					}
@@ -290,6 +301,12 @@
 					clearTimeout(resizeTimeout);
 				}
 				resizeObserver.disconnect();
+				
+				// Clean up Plotly chart
+				if (chartDiv && chartInitialized) {
+					Plotly.purge(chartDiv);
+					chartInitialized = false;
+				}
 			};
 		}
 	});
@@ -333,6 +350,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/ChartCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+import type { Chart as ChartModel, ChartMarker, MovingAverageConfig, HoverMode } from './charts.model.js';
 import { type ProcessedChartData } from './data-processor.js';
 interface Props {
     chart: ChartModel;
@@ -6,6 +6,7 @@ interface Props {
     markers?: ChartMarker[];
     plotlyLayout?: any;
     enableAdaptation?: boolean;
+    configuredHoverMode?: HoverMode;
     sectionId?: string;
     sectionMovingAverage?: MovingAverageConfig;
     layoutMovingAverage?: MovingAverageConfig;

package/dist/core/Charts/ChartComponent.svelte

@@ -300,6 +300,7 @@
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}
+					configuredHoverMode={layout.hoverMode}
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
@@ -442,6 +443,7 @@
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}
+					configuredHoverMode={layout.hoverMode}
 					sectionId={activeZoom.section.id}
 					sectionMovingAverage={activeZoom.section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}

package/dist/core/Charts/adapt.d.ts

@@ -2,7 +2,7 @@
  * Chart-specific adaptation utilities for Plotly layouts
  * Handles size-based adaptations while preserving external styling/theming
  */
-import type { ChartMarker } from './charts.model.js';
+import type { ChartMarker, HoverMode } from './charts.model.js';
 export interface ContainerSize {
     width: number;
     height: number;
@@ -13,6 +13,7 @@ export interface ChartInfo {
 }
 export interface AdaptationConfig {
     enableAdaptation?: boolean;
+    configuredHoverMode?: HoverMode;
 }
 /**
  * Adapts a Plotly layout based on container size

package/dist/core/Charts/adapt.js

@@ -2,12 +2,85 @@
  * 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
+ * Respects configured hover mode, with exception for tiny charts (always 'closest' for performance)
+ */
+function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMode) {
+    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;
+    // EXCEPTION: Always use 'closest' in tiny charts for performance (override user setting)
+    if (isTiny) {
+        layout.hovermode = 'closest';
+        if (layout.hoverlabel) {
+            layout.hoverlabel.font = layout.hoverlabel.font || {};
+            layout.hoverlabel.font.size = 9; // Smaller font
+        }
+        return layout;
+    }
+    // If user configured a specific hover mode, respect it (except tiny override above)
+    if (configuredHoverMode !== undefined) {
+        layout.hovermode = configuredHoverMode;
+        // Still apply adaptive font sizing based on container size
+        if (layout.hoverlabel) {
+            layout.hoverlabel.font = layout.hoverlabel.font || {};
+            if (isSmall) {
+                layout.hoverlabel.font.size = 9;
+            }
+            else if (isMedium) {
+                layout.hoverlabel.font.size = 10;
+            }
+            else {
+                layout.hoverlabel.font.size = 11;
+            }
+        }
+        return layout;
+    }
+    // No configured mode - apply full adaptive logic (default: 'x')
+    // 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 x
+        layout.hovermode = 'x';
+    }
+    else if (totalSeries > 8) {
+        // Very many series - even in large charts, use x
+        layout.hovermode = 'x';
+    }
+    else {
+        // Default for large charts with reasonable series count
+        layout.hovermode = 'x';
+    }
+    // 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
  */
 export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config = {}) {
-    const { enableAdaptation = true } = config;
+    const { enableAdaptation = true, configuredHoverMode } = config;
     if (!enableAdaptation)
         return baseLayout;
     const { width, height } = containerSize;
@@ -96,6 +169,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, configuredHoverMode);
     return adaptedLayout;
 }
 /**

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

@@ -30,10 +30,12 @@ export interface Section {
     movingAverage?: MovingAverageConfig;
 }
 export type Mode = "tabs" | "scrollspy";
+export type HoverMode = 'x' | 'y' | 'closest' | 'x unified' | 'y unified' | false;
 export interface Layout {
     layoutName: string;
     sections: Section[];
     movingAverage?: MovingAverageConfig;
+    hoverMode?: HoverMode;
 }
 export interface ChartMarker {
     date: string | Date;

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

@@ -90,7 +90,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
             dash: yaxis === 'y1' ? 'solid' : 'dot' // Y1 = solid, Y2 = dotted
         },
         hovertemplate: `<b>${kpi.name}</b><br>` +
-            `Value: %{y:,.2f} ${kpi.unit}<br>` +
+            `Value: %{y:} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
 }
@@ -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', // Default hover mode (can be overridden by layout.hoverMode or adaptive behavior)
         hoverlabel: {
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',

package/dist/core/Charts/index.d.ts

@@ -1,6 +1,6 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition } from './charts.model.js';
+export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition, HoverMode } from './charts.model.js';
 export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
 export type { ContainerSize, ChartInfo, AdaptationConfig } from './adapt.js';

package/package.json

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