@smartnet360/svelte-components 0.0.42 → 0.0.44

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

@@ -3,47 +3,81 @@
 <script lang="ts">
 	import { TreeView, createTreeStore } from '../../core/TreeView';
 	import { ChartComponent,  type Layout, type CellStylingConfig } from '../../core/Charts';
-	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling } from './index';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling, type TreeGroupingConfig, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
-	import { onMount } from 'svelte';
     import type {ChartMarker, Mode } from '../../index.js';
+	import { checkHealth, getMessage } from '../../core/FeatureRegistry';
 
 	interface Props {
 		rawData: CellTrafficRecord[];
-		baseLayout: Layout;
+		multiCellLayout: Layout;         // Layout for multiple cells (also used as fallback)
+		singleLteLayout?: Layout;        // Optional: Layout for single LTE cell
+		singleNrLayout?: Layout;         // Optional: Layout for single NR cell
 		baseMetrics: string[];
         mode: Mode;
 		markers?: ChartMarker[];
 		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
+		initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
+		showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
 	}
 
-	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling }: Props = $props();
+	let { rawData, multiCellLayout, singleLteLayout, singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, showGroupingSelector = true }: Props = $props();
+
+	// Check feature health
+	let isHealthy = $state(checkHealth('sitecheck'));
+
+	// Internal state for current grouping
+	let treeGrouping = $state<TreeGroupingConfig>(initialGrouping);
+
+	// Available grouping presets
+	const groupingPresets = [
+		{ label: 'Site → Azimuth → Cell', value: { level0: 'site', level1: 'azimuth', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Site → Band → Cell', value: { level0: 'site', level1: 'band', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Band → Site → Cell', value: { level0: 'band', level1: 'site', level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Band → Azimuth → Cell', value: { level0: 'band', level1: 'azimuth', level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Azimuth → Site → Cell', value: { level0: 'azimuth', level1: 'site', level2: 'cell' } as TreeGroupingConfig },
+		{ label: 'Band → Cell', value: { level0: 'band', level1: null, level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Site → Cell (2-level)', value: { level0: 'site', level1: null, level2: 'cell' } as TreeGroupingConfig },
+		// { label: 'Azimuth → Cell (2-level)', value: { level0: 'azimuth', level1: null, level2: 'cell' } as TreeGroupingConfig },
+	];
 
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
-	onMount(() => {
-		log('🚀 SiteCheck Initializing', {
-			totalRecords: rawData.length,
-			baseMetrics,
-			mode
-		});
+	// Rebuild tree whenever treeGrouping changes
+	$effect(() => {
 
-		// Build tree nodes from raw data
-		const treeNodes = buildTreeNodes(rawData);
+		log('� Rebuilding tree with grouping', { treeGrouping });
+
+		// Clear any existing localStorage data to prevent stale state
+		const storageKey = 'site-check:treeState';
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem(storageKey);
+			log('🧹 Cleared localStorage:', storageKey);
+		}
+
+		// Build tree nodes from raw data with custom grouping
+		const treeNodes = buildTreeNodes(rawData, treeGrouping);
 		log('🌲 Tree Nodes Built', {
 			nodeCount: treeNodes.length,
-			firstNode: treeNodes[0]
+			firstNode: treeNodes[0],
+			grouping: treeGrouping
 		});
-
+		if(isHealthy === false) {
+			console.log('Configuration Required');
+			return;
+		}
 		// Create tree store
 		treeStore = createTreeStore({
 			nodes: treeNodes,
 			namespace: 'site-check',
-			persistState: true,
+			persistState: false,  // Don't persist when grouping changes dynamically
 			defaultExpandAll: false
 		});
-		log('✅ Tree Store Created', { namespace: 'site-check' });
+		log('✅ Tree Store Created', { 
+			namespace: 'site-check',
+			grouping: treeGrouping 
+		});
 	});
 
 	// Derive chart data from tree selection
@@ -74,10 +108,11 @@
 		return transformed;
 	});
 
-	// Expand layout based on selected cells
+	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		const expanded = expandLayoutForCells(baseLayout, filteredData, cellStyling);
+		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, cellStyling);
 		log('📐 Chart Layout:', {
+			layoutName: selectedBaseLayout.layoutName,
 			sectionsCount: expanded.sections.length,
 			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
 			firstSection: expanded.sections[0],
@@ -100,21 +135,92 @@
 		log('📡 Total Sites:', count);
 		return count;
 	});
+
+	// Detect cell technology (LTE vs NR) for single-cell layout selection
+	let cellTechnology = $derived.by(() => {
+		if (totalCells !== 1) return null;
+		
+		const cell = filteredData[0];
+		const band = cell?.band?.toUpperCase() || '';
+		
+		if (band.startsWith('LTE')) {
+			log('📡 Detected Technology: LTE', { band });
+			return 'LTE';
+		}
+		if (band.startsWith('NR') || band.startsWith('5G')) {
+			log('📡 Detected Technology: NR', { band });
+			return 'NR';
+		}
+		
+		log('📡 Detected Technology: UNKNOWN', { band });
+		return 'UNKNOWN';
+	});
+
+	// Select appropriate layout based on cell count and technology
+	let selectedBaseLayout = $derived.by(() => {
+		// Multiple cells → always use multi-cell layout
+		if (totalCells !== 1) {
+			log('📐 Layout Selection: Multi-cell (count=' + totalCells + ')');
+			return multiCellLayout;
+		}
+		
+		// Single LTE cell → use LTE layout if available, otherwise fallback
+		if (cellTechnology === 'LTE' && singleLteLayout) {
+			log('📐 Layout Selection: Single LTE (optimized)');
+			return singleLteLayout;
+		}
+		
+		// Single NR cell → use NR layout if available, otherwise fallback
+		if (cellTechnology === 'NR' && singleNrLayout) {
+			log('📐 Layout Selection: Single NR (optimized)');
+			return singleNrLayout;
+		}
+		
+		// Fallback to multi-cell layout for single cells (works fine)
+		log('📐 Layout Selection: Multi-cell (fallback for single cell)', { 
+			technology: cellTechnology,
+			lteLayout: !!singleLteLayout,
+			nrLayout: !!singleNrLayout
+		});
+		return multiCellLayout;
+	});
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">
 	<!-- Main Content -->
-	<div class="row flex-grow-1 ">
+	<div class="row flex-grow-1" style="min-height: 0;">
 		<!-- Left: Tree View -->
-		<div class="col-lg-3 col-md-4 border-end bg-white overflow-auto">
-			<div class="p-3">
-				<!-- <h5 class="mb-3">
-					<span class="me-2">📡</span>
-					Site Selection
-				</h5> -->
+		<div class="col-lg-3 col-md-4 border-end bg-white d-flex flex-column" style="min-height: 0; height: 100%;">
+			<!-- Grouping Selector -->
+			{#if showGroupingSelector}
+				<div class="p-3 border-bottom flex-shrink-0">
+					<label for="groupingSelect" class="form-label small fw-semibold mb-2">
+						Tree Grouping
+					</label>
+					<select 
+						id="groupingSelect"
+						class="form-select form-select-sm"
+						onchange={(e) => {
+							const index = parseInt(e.currentTarget.value);
+							treeGrouping = groupingPresets[index].value;
+						}}
+					>
+						{#each groupingPresets as preset, i}
+							<option value={i} selected={JSON.stringify(preset.value) === JSON.stringify(treeGrouping)}>
+								{preset.label}
+							</option>
+						{/each}
+					</select>
+					<!-- <div class="text-muted small mt-1">
+						{treeGrouping.level0}{treeGrouping.level1 ? ` → ${treeGrouping.level1}` : ''} → {treeGrouping.level2}
+					</div> -->
+				</div>
+			{/if}
 
+			<!-- Tree View -->
+			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
 				{#if treeStore}
-					<TreeView store={$treeStore!} showControls={false} showIndeterminate={true} height="100%" />
+					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
 				{/if}
 			</div>
 		</div>
@@ -133,12 +239,11 @@
 			{:else}
 				<div class="d-flex align-items-center justify-content-center h-100">
 					<div class="text-center text-muted">
-						<div class="mb-3" style="font-size: 4rem;">📊</div>
 						<h5>No Data Selected</h5>
-						<p>Select one or more cells from the tree to display KPI charts.</p>
 					</div>
 				</div>
 			{/if}
 		</div>
 	</div>
 </div>
+

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

@@ -1,13 +1,17 @@
 import { type Layout, type CellStylingConfig } from '../../core/Charts';
-import { type CellTrafficRecord } from './index';
+import { type CellTrafficRecord, type TreeGroupingConfig } from './index';
 import type { ChartMarker, Mode } from '../../index.js';
 interface Props {
     rawData: CellTrafficRecord[];
-    baseLayout: Layout;
+    multiCellLayout: Layout;
+    singleLteLayout?: Layout;
+    singleNrLayout?: Layout;
     baseMetrics: string[];
     mode: Mode;
     markers?: ChartMarker[];
     cellStyling?: CellStylingConfig;
+    initialGrouping?: TreeGroupingConfig;
+    showGroupingSelector?: boolean;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/apps/site-check/data-loader.d.ts

@@ -11,6 +11,25 @@ export interface CellTrafficRecord {
     band: string;
     metrics: Record<string, number>;
 }
+/**
+ * Tree grouping field types
+ */
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+/**
+ * Configuration for tree hierarchy grouping
+ * Defines which fields appear at each level of the tree
+ * - For 3-level tree: level0 → level1 → cell
+ * - For 2-level tree: level0 → cell (set level1 to null)
+ */
+export interface TreeGroupingConfig {
+    level0: TreeGroupField;
+    level1: TreeGroupField | null;
+    level2: 'cell';
+}
+/**
+ * Default tree grouping: Site → Azimuth → Cell (3-level)
+ */
+export declare const defaultTreeGrouping: TreeGroupingConfig;
 /**
  * Load cell traffic data from CSV file
  */

package/dist/apps/site-check/data-loader.js

@@ -2,6 +2,14 @@
  * Data Loader for Site Check Component
  * Loads and parses cell_traffic_with_band.csv
  */
+/**
+ * Default tree grouping: Site → Azimuth → Cell (3-level)
+ */
+export const defaultTreeGrouping = {
+    level0: 'site',
+    level1: 'azimuth',
+    level2: 'cell'
+};
 /**
  * Load cell traffic data from CSV file
  */

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

@@ -3,7 +3,7 @@
  * Public API exports for cell traffic KPI visualization
  */
 export { default as SiteCheck } from './SiteCheck.svelte';
-export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, type CellTrafficRecord } from './data-loader.js';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping, type CellTrafficRecord, type TreeGroupingConfig, type TreeGroupField } from './data-loader.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

@@ -5,7 +5,7 @@
 // Components
 export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
-export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping } from './data-loader.js';
 // Data transforms
 export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
 // Helper functions

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

@@ -0,0 +1,56 @@
+/**
+ * Data Transforms for Site Check Component
+ * 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)
+ */
+export declare function buildTreeNodes(data: CellTrafficRecord[]): TreeNode[];
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export declare function filterChartData(data: CellTrafficRecord[], checkedPaths: Set<string>): CellTrafficRecord[];
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @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-old.js

@@ -0,0 +1,273 @@
+/**
+ * Data Transforms for Site Check Component
+ * 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)
+ */
+export function buildTreeNodes(data) {
+    log('🔄 Building tree nodes', { recordCount: data.length });
+    // Group by site → azimuth → cell
+    const siteMap = new Map();
+    data.forEach((record) => {
+        if (!siteMap.has(record.siteName)) {
+            siteMap.set(record.siteName, new Map());
+        }
+        const azimuthMap = siteMap.get(record.siteName);
+        if (!azimuthMap.has(record.azimuth)) {
+            azimuthMap.set(record.azimuth, new Map());
+        }
+        const cellMap = azimuthMap.get(record.azimuth);
+        // Store one record per cell (we just need metadata, not all time series)
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    // Build tree structure
+    const treeNodes = [];
+    Array.from(siteMap.entries())
+        .sort(([a], [b]) => a.localeCompare(b))
+        .forEach(([siteName, azimuthMap]) => {
+        const siteNode = {
+            id: siteName, // Simple ID
+            label: `Site ${siteName}`,
+            // icon: '📡',
+            metadata: { type: 'site', siteName },
+            defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
+            children: []
+        };
+        Array.from(azimuthMap.entries())
+            .sort(([a], [b]) => a - b)
+            .forEach(([azimuth, cellMap]) => {
+            const sectorNode = {
+                id: `${azimuth}`, // Simple ID (just azimuth)
+                label: `${azimuth}° Sector`,
+                // icon: '📍',
+                metadata: { type: 'sector', azimuth, siteName },
+                defaultExpanded: false,
+                defaultChecked: false, // Don't check parent nodes
+                children: []
+            };
+            // 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})`,
+                    icon: getBandIcon(record.band),
+                    metadata: {
+                        type: 'cell',
+                        cellName,
+                        band: record.band,
+                        siteName: record.siteName,
+                        sector: record.sector,
+                        azimuth: record.azimuth
+                    },
+                    defaultChecked: true
+                };
+                sectorNode.children.push(cellNode);
+            });
+            siteNode.children.push(sectorNode);
+        });
+        treeNodes.push(siteNode);
+    });
+    log('✅ Tree nodes built', {
+        totalNodes: treeNodes.length,
+        totalSites: siteMap.size,
+        sampleSite: treeNodes[0]?.label
+    });
+    return treeNodes;
+}
+/**
+ * Get icon emoji based on band technology
+ */
+function getBandIcon(band) {
+    return '';
+    if (band.startsWith('NR'))
+        return '📶'; // 5G
+    if (band.startsWith('LTE'))
+        return '📱'; // 4G
+    return '📡'; // Fallback
+}
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export function filterChartData(data, checkedPaths) {
+    log('🔄 Filtering chart data', {
+        totalRecords: data.length,
+        checkedPathsCount: checkedPaths.size,
+        paths: Array.from(checkedPaths)
+    });
+    // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
+    const selectedCells = new Set();
+    checkedPaths.forEach((path) => {
+        const parts = path.split(':');
+        if (parts.length === 3) {
+            // This is a cell-level path (site:azimuth:cellName)
+            selectedCells.add(parts[2]);
+        }
+    });
+    // Filter data to only include selected cells
+    const filtered = data.filter((record) => selectedCells.has(record.cellName));
+    log('✅ Data filtered', {
+        selectedCells: Array.from(selectedCells),
+        filteredRecords: filtered.length,
+        uniqueCells: new Set(filtered.map(r => r.cellName)).size
+    });
+    return filtered;
+}
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export function transformChartData(data, baseMetrics) {
+    log('🔄 Transforming chart data', {
+        inputRecords: data.length,
+        baseMetrics,
+        uniqueCells: new Set(data.map(r => r.cellName)).size
+    });
+    // Group data by date
+    const dateMap = new Map();
+    data.forEach((record) => {
+        if (!dateMap.has(record.date)) {
+            dateMap.set(record.date, new Map());
+        }
+        dateMap.get(record.date).set(record.cellName, record);
+    });
+    // Build pivoted data: one row per date, one column per cell per metric
+    const pivotedData = [];
+    dateMap.forEach((cellsOnDate, date) => {
+        const row = {
+            TIMESTAMP: date
+        };
+        cellsOnDate.forEach((record, cellName) => {
+            // Pivot each base metric into cell-specific columns
+            baseMetrics.forEach((metricName) => {
+                const value = record.metrics[metricName];
+                if (value !== undefined) {
+                    row[`${metricName}_${cellName}`] = value;
+                }
+            });
+            // Store metadata for reference (band, azimuth, etc.)
+            row[`BAND_${cellName}`] = record.band;
+            row[`AZIMUTH_${cellName}`] = record.azimuth;
+        });
+        pivotedData.push(row);
+    });
+    // Sort by date
+    pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
+    log('✅ Data transformed', {
+        outputRows: pivotedData.length,
+        dateRange: pivotedData.length > 0 ?
+            `${pivotedData[0].TIMESTAMP} to ${pivotedData[pivotedData.length - 1].TIMESTAMP}` :
+            'none',
+        columnsPerRow: pivotedData[0] ? Object.keys(pivotedData[0]).length : 0,
+        sampleRow: pivotedData[0]
+    });
+    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;
+}