@smartnet360/svelte-components 0.0.42 → 0.0.44

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

@@ -4,7 +4,7 @@
  */
 import type { TreeNode } from '../../core/TreeView';
 import type { KPI, CellStylingConfig } from '../../core/Charts';
-import type { CellTrafficRecord } from './data-loader';
+import type { CellTrafficRecord, TreeGroupingConfig } from './data-loader';
 /**
  * Extract band from cell name using regex pattern matching
  * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
@@ -25,12 +25,16 @@ export declare function getBandFrequency(band: string | null): number;
  */
 export declare function sortCellsByBandFrequency(items: [string, CellTrafficRecord][]): [string, CellTrafficRecord][];
 /**
- * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ * Build hierarchical tree structure with configurable grouping
+ * Supports both 2-level (level0 → cell) and 3-level (level0 → level1 → cell) trees
+ * @param data - Cell traffic records
+ * @param grouping - Tree grouping configuration (defaults to Site → Azimuth → Cell)
  */
-export declare function buildTreeNodes(data: CellTrafficRecord[]): TreeNode[];
+export declare function buildTreeNodes(data: CellTrafficRecord[], grouping?: TreeGroupingConfig): TreeNode[];
 /**
  * Filter chart data based on selected tree paths
  * Only include cells that are checked in the tree
+ * Handles both 2-level (level0:cellName) and 3-level (level0:level1:cellName) paths
  */
 export declare function filterChartData(data: CellTrafficRecord[], checkedPaths: Set<string>): CellTrafficRecord[];
 /**
@@ -39,18 +43,15 @@ export declare function filterChartData(data: CellTrafficRecord[], checkedPaths:
  * 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'])
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['DL_GBYTES', 'UL_GBYTES'])
  */
 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
+ * Create a styled KPI with band colors and sector line styles
+ * @param metricName - Base metric name (e.g., 'DL_GBYTES')
+ * @param cellRecord - Cell traffic record with metadata
+ * @param unit - Unit string (e.g., 'GB', '%')
+ * @param stylingConfig - Optional styling configuration
+ * @returns KPI with cell-specific styling applied
  */
 export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, stylingConfig?: CellStylingConfig): KPI;

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

@@ -62,21 +62,34 @@ export function sortCellsByBandFrequency(items) {
     });
 }
 /**
- * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ * Build hierarchical tree structure with configurable grouping
+ * Supports both 2-level (level0 → cell) and 3-level (level0 → level1 → cell) trees
+ * @param data - Cell traffic records
+ * @param grouping - Tree grouping configuration (defaults to Site → Azimuth → Cell)
  */
-export function buildTreeNodes(data) {
-    log('🔄 Building tree nodes', { recordCount: data.length });
-    // Group by site → azimuth → cell
-    const siteMap = new Map();
+export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimuth', level2: 'cell' }) {
+    log('🔄 Building tree nodes', {
+        recordCount: data.length,
+        grouping,
+        treeDepth: grouping.level1 === null ? 2 : 3
+    });
+    // Check if this is a 2-level tree (no level1)
+    if (grouping.level1 === null) {
+        return build2LevelTree(data, grouping);
+    }
+    // 3-level tree: Group data by level0 → level1 → cell
+    const level0Map = new Map();
     data.forEach((record) => {
-        if (!siteMap.has(record.siteName)) {
-            siteMap.set(record.siteName, new Map());
+        const level0Value = getFieldValue(record, grouping.level0);
+        const level1Value = getFieldValue(record, grouping.level1); // We know level1 is not null here
+        if (!level0Map.has(level0Value)) {
+            level0Map.set(level0Value, new Map());
         }
-        const azimuthMap = siteMap.get(record.siteName);
-        if (!azimuthMap.has(record.azimuth)) {
-            azimuthMap.set(record.azimuth, new Map());
+        const level1Map = level0Map.get(level0Value);
+        if (!level1Map.has(level1Value)) {
+            level1Map.set(level1Value, new Map());
         }
-        const cellMap = azimuthMap.get(record.azimuth);
+        const cellMap = level1Map.get(level1Value);
         // Store one record per cell (we just need metadata, not all time series)
         if (!cellMap.has(record.cellName)) {
             cellMap.set(record.cellName, record);
@@ -84,35 +97,41 @@ export function buildTreeNodes(data) {
     });
     // 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 },
+    Array.from(level0Map.entries())
+        .sort(([a], [b]) => compareValues(a, b))
+        .forEach(([level0Value, level1Map]) => {
+        const level0Node = {
+            id: String(level0Value),
+            label: formatNodeLabel(grouping.level0, level0Value),
+            metadata: {
+                type: grouping.level0,
+                value: level0Value,
+                grouping: grouping.level0
+            },
             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 },
+        Array.from(level1Map.entries())
+            .sort(([a], [b]) => compareValues(a, b))
+            .forEach(([level1Value, cellMap]) => {
+            const level1Node = {
+                id: String(level1Value),
+                label: formatNodeLabel(grouping.level1, level1Value), // We know level1 is not null here
+                metadata: {
+                    type: grouping.level1,
+                    value: level1Value,
+                    grouping: grouping.level1
+                },
                 defaultExpanded: false,
                 defaultChecked: false, // Don't check parent nodes
                 children: []
             };
-            // Sort cells by band frequency (LTE700, LTE800, etc.)
+            // Sort cells by band frequency
             const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
             sortedCells.forEach(([cellName, record]) => {
                 const cellNode = {
-                    id: cellName, // Simple ID (just cell name)
+                    id: cellName,
                     label: `${cellName} (${record.band})`,
                     icon: getBandIcon(record.band),
                     metadata: {
@@ -125,19 +144,124 @@ export function buildTreeNodes(data) {
                     },
                     defaultChecked: true
                 };
-                sectorNode.children.push(cellNode);
+                level1Node.children.push(cellNode);
             });
-            siteNode.children.push(sectorNode);
+            level0Node.children.push(level1Node);
         });
-        treeNodes.push(siteNode);
+        treeNodes.push(level0Node);
     });
     log('✅ Tree nodes built', {
         totalNodes: treeNodes.length,
-        totalSites: siteMap.size,
-        sampleSite: treeNodes[0]?.label
+        grouping,
+        sampleNode: treeNodes[0]?.label
     });
     return treeNodes;
 }
+/**
+ * Build 2-level tree: level0 → cell (no middle level)
+ */
+function build2LevelTree(data, grouping) {
+    // Group data by level0 → cell
+    const level0Map = new Map();
+    data.forEach((record) => {
+        const level0Value = getFieldValue(record, grouping.level0);
+        if (!level0Map.has(level0Value)) {
+            level0Map.set(level0Value, new Map());
+        }
+        const cellMap = level0Map.get(level0Value);
+        // Store one record per cell
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    // Build tree structure
+    const treeNodes = [];
+    Array.from(level0Map.entries())
+        .sort(([a], [b]) => compareValues(a, b))
+        .forEach(([level0Value, cellMap]) => {
+        const level0Node = {
+            id: String(level0Value),
+            label: formatNodeLabel(grouping.level0, level0Value),
+            metadata: {
+                type: grouping.level0,
+                value: level0Value,
+                grouping: grouping.level0
+            },
+            defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
+            children: []
+        };
+        // Sort cells by band frequency
+        const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
+        sortedCells.forEach(([cellName, record]) => {
+            const cellNode = {
+                id: cellName,
+                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
+            };
+            level0Node.children.push(cellNode);
+        });
+        treeNodes.push(level0Node);
+    });
+    log('✅ 2-level tree nodes built', {
+        totalNodes: treeNodes.length,
+        grouping: `${grouping.level0} → cell`,
+        sampleNode: treeNodes[0]?.label
+    });
+    return treeNodes;
+}
+/**
+ * Get field value from record based on grouping field type
+ */
+function getFieldValue(record, field) {
+    switch (field) {
+        case 'site':
+            return record.siteName;
+        case 'azimuth':
+            return record.azimuth;
+        case 'band':
+            return record.band;
+        case 'sector':
+            return record.sector;
+        default:
+            return record.siteName;
+    }
+}
+/**
+ * Format node label based on field type
+ */
+function formatNodeLabel(field, value) {
+    switch (field) {
+        case 'site':
+            return `Site ${value}`;
+        case 'azimuth':
+            return `${value}° Sector`;
+        case 'band':
+            return `${value}`;
+        case 'sector':
+            return `Sector ${value}`;
+        default:
+            return String(value);
+    }
+}
+/**
+ * Compare values for sorting (handles both strings and numbers)
+ */
+function compareValues(a, b) {
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    return String(a).localeCompare(String(b));
+}
 /**
  * Get icon emoji based on band technology
  */
@@ -152,6 +276,7 @@ function getBandIcon(band) {
 /**
  * Filter chart data based on selected tree paths
  * Only include cells that are checked in the tree
+ * Handles both 2-level (level0:cellName) and 3-level (level0:level1:cellName) paths
  */
 export function filterChartData(data, checkedPaths) {
     log('🔄 Filtering chart data', {
@@ -159,21 +284,24 @@ export function filterChartData(data, checkedPaths) {
         checkedPathsCount: checkedPaths.size,
         paths: Array.from(checkedPaths)
     });
-    // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
+    // Extract cell names from checked leaf paths
     const selectedCells = new Set();
     checkedPaths.forEach((path) => {
         const parts = path.split(':');
         if (parts.length === 3) {
-            // This is a cell-level path (site:azimuth:cellName)
+            // 3-level path: level0:level1:cellName
             selectedCells.add(parts[2]);
         }
+        else if (parts.length === 2) {
+            // 2-level path: level0:cellName
+            selectedCells.add(parts[1]);
+        }
     });
     // Filter data to only include selected cells
     const filtered = data.filter((record) => selectedCells.has(record.cellName));
-    log('✅ Data filtered', {
+    log('✅ Filtered chart data', {
         selectedCells: Array.from(selectedCells),
-        filteredRecords: filtered.length,
-        uniqueCells: new Set(filtered.map(r => r.cellName)).size
+        filteredCount: filtered.length
     });
     return filtered;
 }
@@ -183,13 +311,12 @@ export function filterChartData(data, checkedPaths) {
  * 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'])
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['DL_GBYTES', 'UL_GBYTES'])
  */
 export function transformChartData(data, baseMetrics) {
     log('🔄 Transforming chart data', {
-        inputRecords: data.length,
-        baseMetrics,
-        uniqueCells: new Set(data.map(r => r.cellName)).size
+        rowCount: data.length,
+        baseMetrics
     });
     // Group data by date
     const dateMap = new Map();
@@ -221,26 +348,19 @@ export function transformChartData(data, baseMetrics) {
     });
     // Sort by date
     pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
-    log('✅ Data transformed', {
+    log('✅ Chart 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]
+        sampleColumns: pivotedData[0] ? Object.keys(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
+ * Create a styled KPI with band colors and sector line styles
+ * @param metricName - Base metric name (e.g., 'DL_GBYTES')
+ * @param cellRecord - Cell traffic record with metadata
+ * @param unit - Unit string (e.g., 'GB', '%')
+ * @param stylingConfig - Optional styling configuration
+ * @returns KPI with cell-specific styling applied
  */
 export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
     const { band, sector, azimuth, cellName } = cellRecord;

package/dist/core/Charts/ChartComponent.svelte

@@ -341,16 +341,21 @@
 {/snippet}
 
 <div class="chart-component" bind:this={componentElement}>
-	<!-- Global Controls Section (appears above tabs/scrollspy) -->
-	{#if showGlobalControls && showControlsPanel}
-		<GlobalControls controls={globalControls} onUpdate={handleControlsUpdate} />
+	<!-- Floating Global Controls (renders as fixed position overlay) -->
+	{#if showGlobalControls}
+		<GlobalControls 
+			controls={globalControls} 
+			onUpdate={handleControlsUpdate}
+			isExpanded={showControlsPanel}
+			onToggle={() => showControlsPanel = !showControlsPanel}
+		/>
 	{/if}
 	
 	<!-- Always render the main content (tabs or scrollspy) -->
 	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
-			<!-- Tab Navigation with Controls Toggle -->
+			<!-- Tab Navigation -->
 			<div class="nav-tabs-wrapper">
 				<ul class="nav nav-tabs" role="tablist">
 					{#each layout.sections as section, index}
@@ -369,21 +374,6 @@
 						</li>
 					{/each}
 				</ul>
-				
-				<!-- Controls Toggle Button -->
-				{#if showGlobalControls}
-					<button
-						class="btn btn-sm btn-outline-secondary controls-toggle"
-						onclick={() => showControlsPanel = !showControlsPanel}
-						title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-						type="button"
-					>
-						<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-						</svg>
-						<span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span>
-					</button>
-				{/if}
 			</div>
 
 			<!-- Tab Content -->
@@ -402,7 +392,7 @@
 	{:else if mode === 'scrollspy'}
 		<!-- ScrollSpy Mode with Navigation -->
 		<div class="scrollspy-container">
-			<!-- ScrollSpy Navigation with Controls Toggle -->
+			<!-- ScrollSpy Navigation -->
 			<nav class="scrollspy-nav">
 				<div class="nav-wrapper">
 					<ul class="nav nav-pills">
@@ -418,21 +408,6 @@
 							</li>
 						{/each}
 					</ul>
-					
-					<!-- Controls Toggle Button -->
-					{#if showGlobalControls}
-						<button
-							class="btn btn-sm btn-outline-secondary controls-toggle"
-							onclick={() => showControlsPanel = !showControlsPanel}
-							title={showControlsPanel ? "Hide Controls" : "Show Controls"}
-							type="button"
-						>
-							<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-								<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-							</svg>
-							<!-- <span class="ms-1">{showControlsPanel ? 'Hide' : 'Show'} Controls</span> -->
-						</button>
-					{/if}
 				</div>
 			</nav>
 
@@ -722,11 +697,10 @@
 		max-height: 100%; /* Constrain to slot */
 	}
 
-	/* Tab navigation wrapper with toggle button */
+	/* Tab navigation wrapper */
 	.nav-tabs-wrapper {
 		display: flex;
 		align-items: center;
-		gap: 1rem;
 		border-bottom: 1px solid #dee2e6;
 	}
 
@@ -736,25 +710,7 @@
 		margin-bottom: 0;
 	}
 
-	.controls-toggle {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		white-space: nowrap;
-		border-radius: 0.25rem;
-		transition: all 0.2s ease;
-	}
-
-	.controls-toggle:hover {
-		background-color: #f8f9fa;
-		border-color: #6c757d;
-	}
-
-	.controls-toggle svg {
-		flex-shrink: 0;
-	}
-
-	/* ScrollSpy navigation wrapper with toggle button */
+	/* ScrollSpy navigation wrapper */
 	.scrollspy-nav .nav-wrapper {
 		display: flex;
 		align-items: center;