@smartnet360/svelte-components 0.0.37 → 0.0.39

package/dist/apps/site-check/SiteCheck.svelte

@@ -2,8 +2,8 @@
 
 <script lang="ts">
 	import { TreeView, createTreeStore } from '../../core/TreeView';
-	import { ChartComponent, type Layout } from '../../core/Charts';
-	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord } from './index';
+	import { ChartComponent, type Layout, type CellStylingConfig } from '../../core/Charts';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
 	import { onMount } from 'svelte';
@@ -14,9 +14,10 @@
 		baseLayout: Layout;
 		baseMetrics: string[];
         mode: Mode;
+		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
 	}
 
-	let { rawData, baseLayout, baseMetrics, mode = "scrollspy" }: Props = $props();
+	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", cellStyling = defaultCellStyling }: Props = $props();
 
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
@@ -74,12 +75,12 @@
 
 	// Expand layout based on selected cells
 	let chartLayout = $derived.by(() => {
-		const expanded = expandLayoutForCells(baseLayout, filteredData);
+		const expanded = expandLayoutForCells(baseLayout, filteredData, cellStyling);
 		log('📐 Chart Layout:', {
-			grid: expanded.grid,
 			sectionsCount: expanded.sections.length,
 			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
-			firstSection: expanded.sections[0]
+			firstSection: expanded.sections[0],
+			cellStylingEnabled: !!cellStyling
 		});
 		return expanded;
 	});

package/dist/apps/site-check/SiteCheck.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Layout } from '../../core/Charts';
+import { type Layout, type CellStylingConfig } from '../../core/Charts';
 import { type CellTrafficRecord } from './index';
 import type { Mode } from '../../index.js';
 interface Props {
@@ -6,6 +6,7 @@ interface Props {
     baseLayout: Layout;
     baseMetrics: string[];
     mode: Mode;
+    cellStyling?: CellStylingConfig;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/apps/site-check/default-cell-styling.d.ts

@@ -0,0 +1,6 @@
+import type { CellStylingConfig } from '../../core/Charts';
+/**
+ * Default cell styling configuration for SiteCheck component
+ * Provides band colors and sector line styles for network cells
+ */
+export declare const defaultCellStyling: CellStylingConfig;

package/dist/apps/site-check/default-cell-styling.js

@@ -0,0 +1,24 @@
+/**
+ * Default cell styling configuration for SiteCheck component
+ * Provides band colors and sector line styles for network cells
+ */
+export const defaultCellStyling = {
+    bandColors: {
+        "LTE700": "#DC2626",
+        "LTE800": "#EA580C",
+        "LTE900": "#D97706",
+        "LTE1800": "#2563EB",
+        "LTE2100": "#7C3AED",
+        "LTE2600": "#DB2777",
+        "NR700": "#B91C1C",
+        "NR2100": "#059669",
+        "NR3500": "#0891B2",
+        "NR26000": "#BE185D"
+    },
+    sectorLineStyles: {
+        "1": "solid",
+        "2": "dash",
+        "3": "dot",
+        "4": "dashdot"
+    }
+};

package/dist/apps/site-check/default-cell-styling.json

@@ -0,0 +1,20 @@
+{
+  "bandColors": {
+    "LTE700": "#DC2626",
+    "LTE800": "#EA580C",
+    "LTE900": "#D97706",
+    "LTE1800": "#2563EB",
+    "LTE2100": "#7C3AED",
+    "LTE2600": "#DB2777",
+    "NR700": "#B91C1C",
+    "NR2100": "#059669",
+    "NR3500": "#0891B2",
+    "NR26000": "#BE185D"
+  },
+  "sectorLineStyles": {
+    "1": "solid",
+    "2": "dash",
+    "3": "dot",
+    "4": "dashdot"
+  }
+}

package/dist/apps/site-check/helper.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from '../../core/Charts';
+import type { Layout, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
@@ -6,9 +6,10 @@ import type { CellTrafficRecord } from './';
  *
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
  * @returns Expanded layout with cell-specific KPIs
  */
-export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[]): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], stylingConfig?: CellStylingConfig): Layout;
 /**
  * Extract base metric names from a layout configuration
  * Returns unique metric rawNames that need to be pivoted

package/dist/apps/site-check/helper.js

@@ -1,20 +1,23 @@
+import { createStyledKPI, sortCellsByBandFrequency } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
  * Takes a base layout (with one KPI per metric) and expands it to include one KPI per cell
  *
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
  * @returns Expanded layout with cell-specific KPIs
  */
-export function expandLayoutForCells(baseLayout, data) {
-    // Get unique cells and their metadata
+export function expandLayoutForCells(baseLayout, data, stylingConfig) {
+    // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
         if (!cellMap.has(record.cellName)) {
             cellMap.set(record.cellName, record);
         }
     });
-    const cells = Array.from(cellMap.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Sort cells by band frequency instead of alphabetically
+    const cells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
     // Deep clone the layout structure and expand KPIs
     const expandedLayout = {
         layoutName: baseLayout.layoutName,
@@ -22,8 +25,8 @@ export function expandLayoutForCells(baseLayout, data) {
             ...section,
             charts: section.charts.map((chart) => ({
                 ...chart,
-                yLeft: expandKPIs(chart.yLeft, cells),
-                yRight: expandKPIs(chart.yRight, cells)
+                yLeft: expandKPIs(chart.yLeft, cells, stylingConfig),
+                yRight: expandKPIs(chart.yRight, cells, stylingConfig)
             }))
         }))
     };
@@ -31,22 +34,20 @@ export function expandLayoutForCells(baseLayout, data) {
 }
 /**
  * Expand a single KPI into multiple KPIs (one per cell)
+ * Now uses createStyledKPI to apply band colors and sector line styles
  *
  * @param baseKPIs - Array of base KPIs from layout
  * @param cells - Array of [cellName, record] tuples
- * @returns Expanded array of KPIs with cell-specific rawNames and colors
+ * @param stylingConfig - Optional cell styling configuration
+ * @returns Expanded array of KPIs with cell-specific styling
  */
-function expandKPIs(baseKPIs, cells) {
+function expandKPIs(baseKPIs, cells, stylingConfig) {
     const expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
-        cells.forEach(([cellName, record], index) => {
-            expandedKPIs.push({
-                rawName: `${baseKPI.rawName}_${cellName}`,
-                name: `${cellName} (${record.band}) - ${baseKPI.name}`,
-                scale: baseKPI.scale,
-                unit: baseKPI.unit,
-                color: getColorForIndex(index)
-            });
+        cells.forEach(([cellName, record]) => {
+            // Use createStyledKPI to apply band color and sector line style
+            const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, stylingConfig);
+            expandedKPIs.push(styledKPI);
         });
     });
     return expandedKPIs;

package/dist/apps/site-check/index.d.ts

@@ -4,5 +4,6 @@
  */
 export { default as SiteCheck } from './SiteCheck.svelte';
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, type CellTrafficRecord } from './data-loader.js';
-export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
+export { defaultCellStyling } from './default-cell-styling.js';

package/dist/apps/site-check/index.js

@@ -7,6 +7,8 @@ export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
 // Data transforms
-export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
-// Helper utilities (for external configuration)
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
+// Helper functions
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
+// Default cell styling configuration
+export { defaultCellStyling } from './default-cell-styling.js';

package/dist/apps/site-check/transforms.d.ts

@@ -3,7 +3,27 @@
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
 import type { TreeNode } from '../../core/TreeView';
+import type { KPI, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './data-loader';
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export declare function extractBandFromCell(cellName: string): string | null;
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export declare function getBandFrequency(band: string | null): number;
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export declare function sortCellsByBandFrequency(items: [string, CellTrafficRecord][]): [string, CellTrafficRecord][];
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
  */
@@ -22,3 +42,15 @@ export declare function filterChartData(data: CellTrafficRecord[], checkedPaths:
  * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
  */
 export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms.js

@@ -3,6 +3,64 @@
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
 import { log } from '../../core/logger';
+/**
+ * Band frequency mapping for consistent ordering
+ * Maps band strings to their actual frequencies in MHz
+ */
+const BAND_FREQUENCY_ORDER = {
+    // LTE Bands (by frequency)
+    'LTE700': 700,
+    'LTE800': 800,
+    'LTE900': 900,
+    'LTE1800': 1800,
+    'LTE2100': 2100,
+    'LTE2600': 2600,
+    // NR/5G Bands (by frequency)
+    'NR700': 700.1, // Slightly higher to sort after LTE700
+    'NR2100': 2100.1,
+    'NR3500': 3500,
+    'NR26000': 26000 // mmWave
+};
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export function extractBandFromCell(cellName) {
+    // Match patterns like "LTE700", "NR3500", etc.
+    const match = cellName.match(/(LTE|NR)(\d+)/i);
+    return match ? `${match[1].toUpperCase()}${match[2]}` : null;
+}
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export function getBandFrequency(band) {
+    if (!band)
+        return 999999; // Unknown bands go to end
+    return BAND_FREQUENCY_ORDER[band] || 999999;
+}
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export function sortCellsByBandFrequency(items) {
+    return items.sort((a, b) => {
+        const [cellNameA, recordA] = a;
+        const [cellNameB, recordB] = b;
+        const freqA = getBandFrequency(recordA.band);
+        const freqB = getBandFrequency(recordB.band);
+        // Primary sort: by frequency
+        if (freqA !== freqB) {
+            return freqA - freqB;
+        }
+        // Secondary sort: by cell name for same frequency
+        return cellNameA.localeCompare(cellNameB);
+    });
+}
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
  */
@@ -50,9 +108,9 @@ export function buildTreeNodes(data) {
                 defaultChecked: false, // Don't check parent nodes
                 children: []
             };
-            Array.from(cellMap.entries())
-                .sort(([a], [b]) => a.localeCompare(b))
-                .forEach(([cellName, record]) => {
+            // Sort cells by band frequency (LTE700, LTE800, etc.)
+            const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
+            sortedCells.forEach(([cellName, record]) => {
                 const cellNode = {
                     id: cellName, // Simple ID (just cell name)
                     label: `${cellName} (${record.band})`,
@@ -173,3 +231,43 @@ export function transformChartData(data, baseMetrics) {
     });
     return pivotedData;
 }
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
+    const { band, sector, azimuth, cellName } = cellRecord;
+    // Get color from band (if config provided)
+    const color = stylingConfig?.bandColors?.[band];
+    // Get line style from sector (if config provided)
+    const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
+    // Format name as: Band_Azimuth°
+    const displayName = `${band}_${azimuth}°`;
+    // Build KPI with cell-specific styling
+    const kpi = {
+        rawName: `${metricName}_${cellName}`, // Column name in pivoted data
+        name: displayName,
+        scale: 'absolute',
+        unit,
+        ...(color && { color }),
+        ...(lineStyle && { lineStyle })
+    };
+    log('🎨 Styled KPI created', {
+        metricName,
+        cellName,
+        displayName,
+        band,
+        sector,
+        azimuth,
+        color,
+        lineStyle
+    });
+    return kpi;
+}

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';
@@ -27,13 +27,15 @@
 		sectionId?: string;
 		sectionMovingAverage?: MovingAverageConfig; // Section-level MA config
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
+		layoutHoverMode?: HoverMode; // Layout-level hover mode config
+		layoutColoredHover?: boolean; // Layout-level colored hover config (default: true)
 		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, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -162,7 +164,7 @@
 		// Add left Y-axis traces (with moving average support)
 		resolvedKPIs.left.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex, chartType, stackGroup);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex, chartType, stackGroup, layoutColoredHover);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
@@ -170,13 +172,13 @@
 		// Add right Y-axis traces (with moving average support)
 		resolvedKPIs.right.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex, chartType, stackGroup);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex, chartType, stackGroup, layoutColoredHover);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 
 		// Create default modern layout using the centralized function
-		const defaultLayout: any = createDefaultPlotlyLayout(chart.title);
+		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, layoutHoverMode, layoutColoredHover);
 		
 		// Override specific properties for this chart
 		defaultLayout.yaxis.title = {

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;
@@ -9,6 +9,8 @@ interface Props {
     sectionId?: string;
     sectionMovingAverage?: MovingAverageConfig;
     layoutMovingAverage?: MovingAverageConfig;
+    layoutHoverMode?: HoverMode;
+    layoutColoredHover?: boolean;
     runtimeMAOverride?: MovingAverageConfig | null;
     runtimeShowOriginal?: boolean;
     runtimeShowMarkers?: boolean;

package/dist/core/Charts/ChartComponent.svelte

@@ -64,7 +64,8 @@
 			sections: layout.sections.length,
 			totalCharts: layout.sections.reduce((sum, s) => sum + s.charts.length, 0),
 			enableAdaptation,
-			showGlobalControls
+			showGlobalControls,
+			layoutHoverMode: layout.hoverMode
 		});
 	});
 	
@@ -327,6 +328,7 @@
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
+					layoutHoverMode={layout.hoverMode}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					runtimeShowMarkers={globalControls.markers?.enabled}

package/dist/core/Charts/adapt.js

@@ -4,46 +4,36 @@
  */
 /**
  * Adapts hover behavior based on container size and series count
- * Optimizes tooltip display and performance for different chart sizes
+ * Preserves user's configured hover mode unless adaptation is critical for performance/UX
  */
-function adaptHoverBehavior(layout, containerSize, chartInfo) {
+function adaptHoverBehavior(layout, containerSize, chartInfo, originalHoverMode) {
     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
+    // Only override hover mode in critical cases for performance/UX
     if (isSmall) {
-        layout.hovermode = 'x'; // Single point instead of unified
+        // Force 'closest' in small charts for performance and readability
+        layout.hovermode = 'closest';
         if (layout.hoverlabel) {
             layout.hoverlabel.font = layout.hoverlabel.font || {};
-            layout.hoverlabel.font.size = 9; // Smaller font
+            layout.hoverlabel.font.size = 9;
         }
         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';
+    // For all other sizes, preserve the user's configured hover mode
+    if (originalHoverMode !== undefined) {
+        layout.hovermode = originalHoverMode;
     }
-    // Otherwise keep default 'x unified' from base layout
-    // Priority 4: Adaptive hover label font size
+    // If no original hover mode provided, keep whatever is in the layout
+    // Only adapt font sizes, not hover behavior for non-tiny charts
     if (layout.hoverlabel) {
         layout.hoverlabel.font = layout.hoverlabel.font || {};
-        if (isMedium) {
+        if (isSmall) {
+            layout.hoverlabel.font.size = 9;
+        }
+        else if (isMedium) {
             layout.hoverlabel.font.size = 10;
         }
         else {
@@ -62,6 +52,8 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
         return baseLayout;
     const { width, height } = containerSize;
     const adaptedLayout = { ...baseLayout };
+    // Preserve the original hover mode before any adaptations
+    const originalHoverMode = baseLayout.hovermode;
     // Size categories for adaptation rules
     const isTiny = width < 250 || height < 200;
     const isSmall = width < 400 || height < 300;
@@ -146,8 +138,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);
+    // Apply adaptive hover behavior (preserve user config except in tiny charts)
+    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo, originalHoverMode);
     return adaptedLayout;
 }
 /**

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

@@ -1,4 +1,5 @@
 export type Scale = "percent" | "absolute";
+export type LineStyle = 'solid' | 'dash' | 'dot' | 'dashdot' | 'longdash' | 'longdashdot';
 export interface MovingAverageConfig {
     enabled: boolean;
     window: number;
@@ -11,6 +12,7 @@ export interface KPI {
     scale: Scale;
     unit: string;
     color?: string;
+    lineStyle?: LineStyle;
     movingAverage?: MovingAverageConfig;
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
@@ -33,10 +35,13 @@ 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;
+    coloredHover?: boolean;
 }
 export interface ChartMarker {
     date: string | Date;
@@ -59,3 +64,7 @@ export interface GlobalChartControls {
         enabled: boolean;
     };
 }
+export interface CellStylingConfig {
+    bandColors: Record<string, string>;
+    sectorLineStyles: Record<string, LineStyle>;
+}

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

@@ -1,7 +1,7 @@
-import type { KPI } from './charts.model.js';
+import type { KPI, HoverMode } from './charts.model.js';
 export declare function processKPIData(data: any[], kpi: KPI): number[];
 export declare function calculateMovingAverage(values: number[], window: number): number[];
-export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any;
+export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string, coloredHover?: boolean): any;
 /**
  * Create time series trace(s) with optional moving average
  * @param values - Pre-processed numeric values array for the KPI
@@ -13,7 +13,7 @@ export declare function createTimeSeriesTrace(values: number[], timestamps: any[
  * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any[];
+export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string, coloredHover?: boolean): 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;
+export declare function createDefaultPlotlyLayout(title?: string, hoverMode?: HoverMode, coloredHover?: boolean): any;