@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/apps/antenna-pattern/components/AntennaControls.svelte

@@ -56,29 +56,15 @@
     // Get available electrical tilts from antennas with the selected name and frequency
   let availableElectricalTilts = $state<string[]>(['0']);
   $effect(() => {
-    console.log('🔄 [TILTS] Effect triggered - updating available tilts:', {
-      antenna: internalSelectedAntenna?.name,
-      frequency: selectedFrequency,
-      currentTilts: availableElectricalTilts,
-      timestamp: new Date().toISOString()
-    });
-
     let newTilts: string[] = ['0'];
 
     if (internalSelectedAntenna) {
       // Find ALL antennas with the same name and frequency to collect all electrical tilts
       let sameName = antennas.filter(a => a.name === internalSelectedAntenna!.name);
-      console.log('🔍 [TILTS] Found antennas with same name:', sameName.length);
       
       // If frequency is selected, filter by it
       if (selectedFrequency) {
-        const beforeFilter = sameName.length;
         sameName = sameName.filter(a => a.frequency === selectedFrequency);
-        console.log('🔍 [TILTS] After frequency filter:', {
-          before: beforeFilter,
-          after: sameName.length,
-          frequency: selectedFrequency
-        });
       }
       
       const allTilts = new Set<string>();
@@ -96,14 +82,6 @@
       
       // Convert to sorted array
       newTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
-      
-      console.log('✅ [TILTS] Available tilts calculated:', {
-        from: availableElectricalTilts,
-        to: newTilts,
-        changed: JSON.stringify(availableElectricalTilts) !== JSON.stringify(newTilts)
-      });
-    } else {
-      console.log('ℹ️ [TILTS] No antenna selected, using default tilts');
     }
 
     // Only update if actually changed to prevent infinite loops
@@ -141,34 +119,12 @@
 
   // Handle frequency selection
   function handleFrequencyChange(frequency: number) {
-    console.log('🔄 [FREQ] handleFrequencyChange called:', {
-      requestedFrequency: frequency,
-      currentSelectedFrequency: selectedFrequency,
-      currentAntenna: internalSelectedAntenna?.name,
-      currentTiltIndex: internalElectricalTiltIndex,
-      availableTilts: availableElectricalTilts,
-      timestamp: new Date().toISOString()
-    });
-
-    const previousFrequency = selectedFrequency;
     selectedFrequency = frequency;
     
-    console.log('📝 [FREQ] Frequency state updated:', {
-      from: previousFrequency,
-      to: selectedFrequency,
-      changed: previousFrequency !== selectedFrequency
-    });
-    
     if (internalSelectedAntenna) {
       // STEP 1: Calculate available tilts for the new frequency
       let sameName = antennas.filter(a => a.name === internalSelectedAntenna!.name && a.frequency === frequency);
       
-      console.log('🔍 [FREQ] Found antennas with same name and new frequency:', {
-        antennaName: internalSelectedAntenna.name,
-        frequency: frequency,
-        count: sameName.length
-      });
-      
       const allTilts = new Set<string>();
       sameName.forEach(antenna => {
         if (antenna.tilt) {
@@ -183,11 +139,6 @@
       
       const newAvailableTilts = Array.from(allTilts).sort((a, b) => parseFloat(a) - parseFloat(b));
       
-      console.log('🔧 [FREQ] Calculated tilts for new frequency:', {
-        availableTilts: newAvailableTilts,
-        hasZeroTilt: newAvailableTilts.includes('0')
-      });
-      
       // STEP 2: Determine the best tilt index to use
       let bestTiltIndex = 0;
       let bestTiltValue = '0';
@@ -203,12 +154,6 @@
         }
       }
       
-      console.log('🎯 [FREQ] Selected best tilt:', {
-        index: bestTiltIndex,
-        value: bestTiltValue,
-        reason: newAvailableTilts.includes('0') ? 'preferred 0 tilt' : 'first available tilt'
-      });
-      
       // STEP 3: Find antenna with the new frequency and best tilt
       const antennaWithNewFreq = antennas.find(antenna => {
         if (antenna.name !== internalSelectedAntenna!.name) return false;
@@ -224,60 +169,19 @@
         }
         return bestTiltValue === '0';
       });
-      
-      console.log('🎯 [FREQ] Antenna search result:', {
-        found: !!antennaWithNewFreq,
-        searchCriteria: {
-          name: internalSelectedAntenna.name,
-          frequency: frequency,
-          tiltValue: bestTiltValue
-        },
-        antenna: antennaWithNewFreq ? {
-          name: antennaWithNewFreq.name,
-          frequency: antennaWithNewFreq.frequency,
-          tilt: antennaWithNewFreq.tilt
-        } : null
-      });
 
       if (antennaWithNewFreq) {
-        const previousAntenna = internalSelectedAntenna;
-        const previousTiltIndex = internalElectricalTiltIndex;
-        
         internalSelectedAntenna = antennaWithNewFreq;
         internalElectricalTiltIndex = bestTiltIndex;
         
-        console.log('✅ [FREQ] Antenna and tilt updated:', {
-          antenna: {
-            from: {
-              name: previousAntenna.name,
-              frequency: previousAntenna.frequency,
-              tilt: previousAntenna.tilt
-            },
-            to: {
-              name: antennaWithNewFreq.name,
-              frequency: antennaWithNewFreq.frequency,
-              tilt: antennaWithNewFreq.tilt
-            }
-          },
-          tiltIndex: {
-            from: previousTiltIndex,
-            to: bestTiltIndex
-          }
-        });
-
-        console.log('📞 [FREQ] Calling onAntennaChange callback');
         onAntennaChange?.(antennaWithNewFreq);
-        
-        console.log('📞 [FREQ] Calling onElectricalTiltChange callback with index', bestTiltIndex);
         onElectricalTiltChange?.(bestTiltIndex);
       } else {
-        console.warn('⚠️ [FREQ] No antenna found for frequency, keeping current antenna');
         // Reset tilt to 0 as fallback
         internalElectricalTiltIndex = 0;
         onElectricalTiltChange?.(0);
       }
     } else {
-      console.log('ℹ️ [FREQ] No current antenna selected');
       internalElectricalTiltIndex = 0;
       onElectricalTiltChange?.(0);
     }
@@ -498,16 +402,7 @@
             <button 
               type="button" 
               class="btn btn-sm {selectedFrequency === freq ? 'btn-primary' : 'btn-outline-secondary'}"
-              onclick={(e) => {
-                console.log('🖱️ [FREQ] Button clicked:', {
-                  frequency: freq,
-                  currentSelectedFrequency: selectedFrequency,
-                  isAlreadySelected: selectedFrequency === freq,
-                  clickEvent: e.type,
-                  timestamp: new Date().toISOString()
-                });
-                handleFrequencyChange(freq);
-              }}
+              onclick={() => handleFrequencyChange(freq)}
             >
               {freq} MHz
             </button>

package/dist/apps/antenna-pattern/components/AntennaDiagrams.svelte

@@ -39,34 +39,12 @@
 
   // Handle antenna selection from controls
   function handleAntenna1Change(antenna: Antenna | null) {
-    console.log('📥 [PARENT] handleAntenna1Change called:', {
-      antenna: antenna ? {
-        name: antenna.name,
-        frequency: antenna.frequency,
-        tilt: antenna.tilt
-      } : null,
-      previousAntenna: selectedAntenna ? {
-        name: selectedAntenna.name,
-        frequency: selectedAntenna.frequency,
-        tilt: selectedAntenna.tilt
-      } : null,
-      timestamp: new Date().toISOString()
-    });
-
     selectedAntenna = antenna;
     if (antenna) {
       // Update available electrical tilts based on selected antenna
-      const previousTilts = [...availableElectricalTilts];
       availableElectricalTilts = antenna.tilt ? 
         antenna.tilt.split(',').map(t => t.trim()) : 
         ['0', '2', '4', '6', '8'];
-      
-      console.log('🔧 [PARENT] Updated available tilts and reset positions:', {
-        from: previousTilts,
-        to: availableElectricalTilts,
-        electricalTiltReset: ant1ElectricalTilt,
-        mechanicalTiltReset: ant1MechanicalTilt
-      });
 
       ant1ElectricalTilt = 0;
       ant1MechanicalTilt = 0;
@@ -83,22 +61,10 @@
 
   // Handle electrical tilt changes from controls
   function handleTilt1Change(tilt: number) {
-    console.log('📥 [PARENT] handleTilt1Change called:', {
-      tilt,
-      previousTilt: ant1ElectricalTilt,
-      changed: tilt !== ant1ElectricalTilt,
-      timestamp: new Date().toISOString()
-    });
     ant1ElectricalTilt = tilt;
   }
 
   function handleTilt2Change(tilt: number) {
-    console.log('📥 [PARENT] handleTilt2Change called:', {
-      tilt,
-      previousTilt: ant2ElectricalTilt,
-      changed: tilt !== ant2ElectricalTilt,
-      timestamp: new Date().toISOString()
-    });
     ant2ElectricalTilt = tilt;
   }
 
@@ -140,8 +106,6 @@
         ant2ElectricalTilt = 0;
         ant2MechanicalTilt = 0;
       }
-      
-      console.log('Data refreshed from settings modal');
     } catch (error) {
       console.error('Failed to refresh data:', error);
     }

package/dist/apps/antenna-pattern/components/AntennaSettingsModal.svelte

@@ -29,7 +29,6 @@
   async function handleExport() {
     try {
       await exportAntennas();
-      console.log('Data exported successfully');
     } catch (error) {
       console.error('Export failed:', error);
     }
@@ -46,7 +45,6 @@
       await clearAllAntennas();
       showClearConfirm = false;
       handleDataRefresh();
-      console.log('All data cleared successfully');
     } catch (error) {
       console.error('Clear data failed:', error);
     }

package/dist/apps/antenna-pattern/components/PlotlyRadarChart.svelte

@@ -63,21 +63,9 @@
 
   async function initializeChart() {
     if (!Plotly || !chartDiv || !data.length) {
-      console.log('PlotlyRadarChart - Cannot initialize:', {
-        hasPlotly: !!Plotly,
-        hasChartDiv: !!chartDiv,
-        dataLength: data.length
-      });
       return;
     }
 
-    console.log('PlotlyRadarChart - Initializing with data:', {
-      dataCount: data.length,
-      sampleData: data[0],
-      title,
-      showSliders
-    });
-
     const { data: plotData, layout, config } = createPlotlyRadarConfig(
       data,
       title,
@@ -89,7 +77,6 @@
     const sliders = createSliders();
     if (sliders.length > 0) {
       layout.sliders = sliders;
-      console.log('Added sliders:', sliders.length);
     }
 
     // Add pattern toggle if requested
@@ -97,13 +84,9 @@
       layout.updatemenus = [createPatternToggleMenu()];
     }
 
-    console.log('PlotlyRadarChart - Final layout:', layout);
-    console.log('PlotlyRadarChart - Plot data:', plotData);
-
     try {
       await Plotly.newPlot(chartDiv, plotData, layout, config);
       chartInitialized = true;
-      console.log('PlotlyRadarChart - Successfully initialized');
 
       // Set up event listeners using Plotly's event system
       if (chartDiv) {
@@ -172,16 +155,12 @@
   }
 
   function handleSliderChange(eventData: any) {
-    console.log('Slider change event:', eventData);
-    
     // Handle slider changes and notify parent
     if (onTiltChange && eventData && eventData.detail) {
       const step = eventData.detail.step;
       const sliderIndex = eventData.detail.slider.active;
       const slider = eventData.detail.slider;
       
-      console.log('Slider details:', { step, sliderIndex, slider });
-      
       // Determine which antenna slider was changed based on position or other identifier
       const antennaIndex = slider.x < 0.3 ? 1 : 2;
       onTiltChange(antennaIndex, sliderIndex);
@@ -190,7 +169,6 @@
 
   function handleButtonClick(eventData: any) {
     // Handle button clicks (pattern toggle)
-    console.log('Button clicked:', eventData);
   }
 
   // Export methods for parent components

package/dist/apps/antenna-pattern/components/chart-engines/PolarAreaChart.svelte

@@ -45,7 +45,6 @@
     if (browser) {
       try {
         Plotly = await import('plotly.js-dist-min');
-        console.log('Plotly loaded for polar area chart');
         await initializeChart();
       } catch (error) {
         console.error('Failed to load Plotly:', error);
@@ -91,7 +90,6 @@
     try {
       await Plotly.newPlot(chartDiv, data, layout, config);
       chartInitialized = true;
-      console.log('Polar area chart initialized');
     } catch (error) {
       console.error('Failed to create polar area chart:', error);
     }

package/dist/apps/antenna-pattern/components/chart-engines/PolarBarChart.svelte

@@ -45,7 +45,6 @@
     if (browser) {
       try {
         Plotly = await import('plotly.js-dist-min');
-        console.log('Plotly loaded for polar bar chart');
         await initializeChart();
       } catch (error) {
         console.error('Failed to load Plotly:', error);
@@ -90,7 +89,6 @@
     try {
       await Plotly.newPlot(chartDiv, data, layout, config);
       chartInitialized = true;
-      console.log('Polar bar chart initialized');
     } catch (error) {
       console.error('Failed to create polar bar chart:', error);
     }

package/dist/apps/antenna-pattern/components/chart-engines/PolarLineChart.svelte

@@ -45,7 +45,6 @@
     if (browser) {
       try {
         Plotly = await import('plotly.js-dist-min');
-        console.log('Plotly loaded for polar line chart');
         await initializeChart();
       } catch (error) {
         console.error('Failed to load Plotly:', error);
@@ -91,7 +90,6 @@
     try {
       await Plotly.newPlot(chartDiv, data, layout, config);
       chartInitialized = true;
-      console.log('Polar line chart initialized');
     } catch (error) {
       console.error('Failed to create polar line chart:', error);
     }

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

@@ -3,7 +3,7 @@
 <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, type TreeGroupingConfig, type TreeGroupField, defaultTreeGrouping } from './index';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling, type TreeGroupingConfig, type TreeGroupField, type ColorDimension, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
@@ -58,55 +58,38 @@
 	// Internal state for current grouping
 	let treeGrouping = $state<TreeGroupingConfig>(initialGrouping);
 
+	// Color dimension state (defaults to 'band' for semantic RF characteristics)
+	let colorDimension = $state<ColorDimension>('band');
+
 	// Available field options for grouping levels
 	const fieldOptions: { value: TreeGroupField; label: string }[] = [
 		{ value: 'site', label: 'Site' },
 		{ value: 'band', label: 'Band' },
 		{ value: 'azimuth', label: 'Azimuth' },
-		{ value: 'cell', label: 'Cell' }
+		{ value: 'sector', label: 'Sector' }
 	];
 
 	// Handlers for level changes
 	function handleLevel0Change(value: TreeGroupField) {
 		// Clear level1 if it conflicts with new level0
 		const newLevel1 = treeGrouping.level1 === value ? null : treeGrouping.level1;
-		// Clear level2 if it conflicts with new level0
-		let newLevel2 = treeGrouping.level2;
-		if (newLevel2 !== null && newLevel2 !== 'cell' && newLevel2 === value) {
-			newLevel2 = null;
-		}
 		treeGrouping = {
 			level0: value,
-			level1: newLevel1,
-			level2: newLevel2
+			level1: newLevel1
 		};
 	}
 
 	function handleLevel1Change(value: TreeGroupField | 'none') {
 		const newLevel1 = value === 'none' ? null : value;
-		// Clear level2 if it conflicts with new level1
-		let newLevel2 = treeGrouping.level2;
-		if (newLevel2 !== null && newLevel2 !== 'cell' && newLevel2 === newLevel1) {
-			newLevel2 = null;
-		}
 		treeGrouping = {
 			level0: treeGrouping.level0,
-			level1: newLevel1,
-			level2: newLevel2
+			level1: newLevel1
 		};
 	}
 
 	// Get available options for level1 (exclude level0)
 	let availableLevel1Options = $derived.by(() => {
 		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
-	});
-
-	// Get available options for level2 (exclude level0 and level1)
-	let availableLevel2Options = $derived.by(() => {
-		return fieldOptions.filter(opt => 
-			opt.value !== treeGrouping.level0 && 
-			opt.value !== treeGrouping.level1
-		);
 	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	// Rebuild tree whenever treeGrouping changes
@@ -174,16 +157,17 @@
 
 	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		// Pass cellStyling and treeGrouping - helper will decide per-section whether to use styling,
-		// and generate appropriate labels based on grouping
-		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, cellStyling);
+		// Pass cellStyling, treeGrouping, and colorDimension - helper will decide per-section whether to use styling,
+		// and generate appropriate labels based on grouping and colors based on colorDimension
+		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, colorDimension, cellStyling);
 		log('📐 Chart Layout:', {
 			layoutName: selectedBaseLayout.layoutName,
 			layoutDefaultColors: selectedBaseLayout.useDefaultChartColors ?? false,
 			sectionsCount: expanded.sections.length,
 			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
 			firstSection: expanded.sections[0],
-			grouping: treeGrouping
+			grouping: treeGrouping,
+			colorDimension
 		});
 		return expanded;
 	});
@@ -325,60 +309,56 @@
 			<div class="p-3 border-bottom flex-shrink-0">
 				<div class="small fw-semibold mb-2">Tree Grouping</div>
 				
-				<!-- Level 0 (Mandatory) -->
-				<div class="mb-2">
-					<label for="level0Select" class="form-label small mb-1">Level 0 (Root)</label>
-					<select 
-						id="level0Select"
-						class="form-select form-select-sm"
-						value={treeGrouping.level0}
-						onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
-					>
-						{#each fieldOptions as option}
-							<option value={option.value}>{option.label}</option>
-						{/each}
-					</select>
-				</div>
-				
-				<!-- Level 1 (Optional) -->
-				<div class="mb-2">
-					<label for="level1Select" class="form-label small mb-1">Level 1 (Optional)</label>
-					<select 
-						id="level1Select"
-						class="form-select form-select-sm"
-						value={treeGrouping.level1 ?? 'none'}
-						onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
-					>
-						<option value="none">None</option>
-						{#each availableLevel1Options as option}
-							<option value={option.value}>{option.label}</option>
-						{/each}
-					</select>
+				<div class="row g-2 mb-2">
+					<!-- Level 0 (Mandatory) -->
+					<div class="col-4">
+						<label for="level0Select" class="form-label small mb-1">Level 0</label>
+						<select 
+							id="level0Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level0}
+							onchange={(e) => handleLevel0Change(e.currentTarget.value as TreeGroupField)}
+						>
+							{#each fieldOptions as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+					
+					<!-- Level 1 (Optional) -->
+					<div class="col-4">
+						<label for="level1Select" class="form-label small mb-1">Level 1</label>
+						<select 
+							id="level1Select"
+							class="form-select form-select-sm"
+							value={treeGrouping.level1 ?? 'none'}
+							onchange={(e) => handleLevel1Change(e.currentTarget.value as TreeGroupField | 'none')}
+						>
+							<option value="none">None</option>
+							{#each availableLevel1Options as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+					
+					<!-- Color By -->
+					<div class="col-4">
+						<label for="colorDimensionSelect" class="form-label small mb-1">Color By</label>
+						<select 
+							id="colorDimensionSelect"
+							class="form-select form-select-sm"
+							value={colorDimension}
+							onchange={(e) => {
+								colorDimension = e.currentTarget.value as ColorDimension;
+								log('🎨 Color dimension changed:', colorDimension);
+							}}
+						>
+							<option value="band">Band</option>
+							<option value="site">Site</option>
+						</select>
+					</div>
 				</div>
 				
-				<!-- Level 2 (Optional) -->
-				<div class="mb-0">
-					<label for="level2Select" class="form-label small mb-1">Level 2 (Optional)</label>
-					<select 
-						id="level2Select"
-						class="form-select form-select-sm"
-						value={treeGrouping.level2 ?? 'none'}
-						onchange={(e) => {
-							const value = e.currentTarget.value;
-							treeGrouping = {
-								level0: treeGrouping.level0,
-								level1: treeGrouping.level1,
-								level2: value === 'none' ? null : (value as 'cell')
-							};
-						}}
-					>
-						<option value="none">None</option>
-						<option value="cell">Cell</option>
-						{#each availableLevel2Options as option}
-							<option value={option.value}>{option.label}</option>
-						{/each}
-					</select>
-				</div>
 			</div>
 		{/if}
 	{/if}			<!-- Tree View -->

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

@@ -14,21 +14,24 @@ export interface CellTrafficRecord {
 /**
  * Tree grouping field types
  */
-export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'cell';
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+/**
+ * Color dimension types - determines which field is used for chart coloring
+ */
+export type ColorDimension = 'site' | 'band';
 /**
  * Configuration for tree hierarchy grouping
  * Defines which fields appear at each level of the tree
- * - For 3-level tree: level0 → level1 → level2
- * - For 2-level tree: level0 → level1 (set level2 to null)
- * - For 1-level tree: level0 only (set level1 and level2 to null)
+ * Cells are always the leaf nodes (implicit, not configured)
+ * - For 2-level tree: level0 → cell (set level1 to null)
+ * - For 3-level tree: level0 → level1 → cell
  */
 export interface TreeGroupingConfig {
     level0: TreeGroupField;
     level1: TreeGroupField | null;
-    level2: TreeGroupField | 'cell' | null;
 }
 /**
- * Default tree grouping: Site → Azimuth → Cell (3-level)
+ * Default tree grouping: Site → Band → Cell (3-level)
  */
 export declare const defaultTreeGrouping: TreeGroupingConfig;
 /**

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

@@ -3,12 +3,11 @@
  * Loads and parses cell_traffic_with_band.csv
  */
 /**
- * Default tree grouping: Site → Azimuth → Cell (3-level)
+ * Default tree grouping: Site → Band → Cell (3-level)
  */
 export const defaultTreeGrouping = {
     level0: 'site',
-    level1: 'azimuth',
-    level2: 'cell'
+    level1: 'band'
 };
 /**
  * Load cell traffic data from CSV file
@@ -20,14 +19,6 @@ export async function loadCellTrafficData() {
     }
     const text = await response.text();
     const records = parseCsvData(text);
-    // Log sample of converted dates for debugging
-    if (records.length > 0) {
-        console.log('📅 Sample date conversions:', {
-            first: records[0].date,
-            last: records[records.length - 1].date,
-            totalRecords: records.length
-        });
-    }
     return records;
 }
 /**

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

@@ -1,5 +1,5 @@
 import type { Layout, CellStylingConfig } from '../../core/Charts';
-import type { CellTrafficRecord, TreeGroupingConfig } from './';
+import type { CellTrafficRecord, TreeGroupingConfig, ColorDimension } from './';
 import { type StackGroupMode } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
@@ -8,11 +8,12 @@ import { type StackGroupMode } from './transforms.js';
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
  * @param grouping - Current tree grouping configuration (determines label format)
+ * @param colorDimension - Which field to use for coloring (site or band)
  * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
  * @param stackGroupMode - Optional stackgroup strategy for stacked charts (default: 'none' = single stack)
  * @returns Expanded layout with cell-specific KPIs
  */
-export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
 /**
  * Extract base metric names from a layout configuration
  * Returns unique metric rawNames that need to be pivoted