@smartnet360/svelte-components 0.0.33 → 0.0.34

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, HoverMode } from './charts.model.js';
+	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } 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,7 +23,6 @@
 		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
@@ -33,7 +32,7 @@
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, configuredHoverMode, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -211,7 +210,7 @@
 				leftSeriesCount: chart.yLeft.length, 
 				rightSeriesCount: chart.yRight.length 
 			},
-			{ enableAdaptation, configuredHoverMode }
+			{ enableAdaptation }
 		);
 
 		// Add markers to the layout only if runtime control allows

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

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

package/dist/core/Charts/ChartComponent.svelte

@@ -300,7 +300,6 @@
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}
-					configuredHoverMode={layout.hoverMode}
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
@@ -443,7 +442,6 @@
 					{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, HoverMode } from './charts.model.js';
+import type { ChartMarker } from './charts.model.js';
 export interface ContainerSize {
     width: number;
     height: number;
@@ -13,7 +13,6 @@ export interface ChartInfo {
 }
 export interface AdaptationConfig {
     enableAdaptation?: boolean;
-    configuredHoverMode?: HoverMode;
 }
 /**
  * Adapts a Plotly layout based on container size

package/dist/core/Charts/adapt.js

@@ -5,42 +5,22 @@
 /**
  * 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) {
+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;
-    // EXCEPTION: Always use 'closest' in tiny charts for performance (override user setting)
+    // Priority 1: Disable hover in tiny charts (performance + UX)
     if (isTiny) {
-        layout.hovermode = 'closest';
+        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;
     }
-    // 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
@@ -52,17 +32,14 @@ function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMod
     }
     // Priority 3: Adaptive hover mode based on series count
     if (totalSeries > 4 && isMedium) {
-        // Too many series in medium chart - switch to x
+        // 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';
     }
-    else {
-        // Default for large charts with reasonable series count
-        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 || {};
@@ -80,7 +57,7 @@ function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMod
  * Preserves external styling while optimizing functional properties
  */
 export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config = {}) {
-    const { enableAdaptation = true, configuredHoverMode } = config;
+    const { enableAdaptation = true } = config;
     if (!enableAdaptation)
         return baseLayout;
     const { width, height } = containerSize;
@@ -170,7 +147,7 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
         }
     }
     // Apply adaptive hover behavior (disable in tiny, simplify in small, optimize for series count)
-    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo, configuredHoverMode);
+    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo);
     return adaptedLayout;
 }
 /**

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

@@ -30,12 +30,10 @@ 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:} ${kpi.unit}<br>` +
+            `Value: %{y:,.2f} ${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', // Default hover mode (can be overridden by layout.hoverMode or adaptive behavior)
+        hovermode: 'x',
         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, HoverMode } from './charts.model.js';
+export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition } 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.33",
+	"version": "0.0.34",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",