@smartnet360/svelte-components 0.0.37 → 0.0.38

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,12 +1,14 @@
+import { createStyledKPI } 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) {
+export function expandLayoutForCells(baseLayout, data, stylingConfig) {
     // Get unique cells and their metadata
     const cellMap = new Map();
     data.forEach((record) => {
@@ -22,8 +24,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 +33,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 } 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 } 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,6 +3,7 @@
  * 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';
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
@@ -22,3 +23,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

@@ -173,3 +173,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);
 		
 		// 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;

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

@@ -72,7 +72,7 @@ export function calculateMovingAverage(values, window) {
     maCache.set(cacheKey, result);
     return result;
 }
-export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Base trace configuration
@@ -85,6 +85,18 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
             `Value: %{y:,.2f} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
+    // Add colored hover styling if enabled
+    if (coloredHover) {
+        baseTrace.hoverlabel = {
+            bgcolor: traceColor,
+            bordercolor: traceColor,
+            font: {
+                color: '#ffffff', // White text for better contrast
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+            }
+        };
+    }
     // Configure based on chart type
     switch (chartType) {
         case 'stacked-area':
@@ -138,7 +150,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                     width: 3,
                     shape: 'spline',
                     smoothing: 0.3,
-                    dash: yaxis === 'y1' ? 'solid' : 'dot'
+                    dash: kpi.lineStyle || (yaxis === 'y1' ? 'solid' : 'dot')
                 }
             };
     }
@@ -154,12 +166,12 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
  * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     const traces = [];
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Add original trace (unless explicitly disabled)
     if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {
-        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup);
+        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup, coloredHover);
         // If MA is enabled, make the original line slightly transparent
         if (kpi.movingAverage?.enabled) {
             originalTrace.opacity = 0.4;
@@ -190,7 +202,18 @@ export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1
             },
             hovertemplate: `<b>${maLabel}</b><br>` +
                 `Value: %{y:,.2f} ${kpi.unit}<br>` +
-                '<extra></extra>'
+                '<extra></extra>',
+            ...(coloredHover && {
+                hoverlabel: {
+                    bgcolor: traceColor,
+                    bordercolor: traceColor,
+                    font: {
+                        color: '#ffffff',
+                        family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                        size: 11
+                    }
+                }
+            })
         };
         traces.push(maTrace);
     }
@@ -209,7 +232,7 @@ export function formatValue(value, scale, unit) {
     }
     return `${value.toLocaleString()}${unit}`;
 }
-export function createDefaultPlotlyLayout(title) {
+export function createDefaultPlotlyLayout(title, hoverMode, coloredHover = true) {
     return {
         title: title ? {
             text: title,
@@ -254,8 +277,17 @@ 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',
-        hoverlabel: {
+        hovermode: hoverMode !== undefined ? hoverMode : 'x',
+        hoverlabel: coloredHover ? {
+            // When coloredHover is enabled, let each trace control its own hover colors
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+                // color will be set per trace when coloredHover is true
+            }
+            // bgcolor and bordercolor will be set per trace when coloredHover is true
+        } : {
+            // Default hover styling when coloredHover is disabled
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
                 size: 11,

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, LineStyle, CellStylingConfig } 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.37",
+	"version": "0.0.38",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",