@smartnet360/svelte-components 0.0.82 → 0.0.84

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, defaultTreeGrouping } from './index';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling, type TreeGroupingConfig, type TreeGroupField, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
@@ -58,19 +58,56 @@
 	// 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 },
+	// 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' }
 	];
 
-	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
+	// 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
+		};
+	}
+
+	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
+		};
+	}
+
+	// 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
 	$effect(() => {
@@ -137,14 +174,16 @@
 
 	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		// Pass cellStyling - helper will decide per-section whether to use it
-		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, cellStyling);
+		// 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);
 		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]
+			firstSection: expanded.sections[0],
+			grouping: treeGrouping
 		});
 		return expanded;
 	});
@@ -278,34 +317,71 @@
 								<i class="bi bi-search"></i>
 							</button>
 						</div>
-					</div>
-				{/if}
-
-				<!-- 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>
-				{/if}
-			{/if}
+			</div>
+		{/if}
 
-			<!-- Tree View -->
+		<!-- Grouping Selector -->
+		{#if showGroupingSelector}
+			<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>
+				
+				<!-- 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 -->
 			<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
 				{#if treeStore}
 					<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />

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

@@ -14,17 +14,18 @@ export interface CellTrafficRecord {
 /**
  * Tree grouping field types
  */
-export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'cell';
 /**
  * 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)
+ * - 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)
  */
 export interface TreeGroupingConfig {
     level0: TreeGroupField;
     level1: TreeGroupField | null;
-    level2: 'cell';
+    level2: TreeGroupField | 'cell' | null;
 }
 /**
  * Default tree grouping: Site → Azimuth → Cell (3-level)

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

@@ -1,5 +1,5 @@
 import type { Layout, CellStylingConfig } from '../../core/Charts';
-import type { CellTrafficRecord } from './';
+import type { CellTrafficRecord, TreeGroupingConfig } from './';
 import { type StackGroupMode } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
@@ -7,11 +7,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 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[], stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): 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

@@ -5,11 +5,12 @@ import { createStyledKPI, sortCellsByBandFrequency, assignStackGroups } from './
  *
  * @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 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 function expandLayoutForCells(baseLayout, data, stylingConfig, stackGroupMode = 'none') {
+export function expandLayoutForCells(baseLayout, data, grouping, stylingConfig, stackGroupMode = 'none') {
     // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
@@ -37,8 +38,8 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig, stackGroup
                 ...section,
                 charts: section.charts.map((chart) => ({
                     ...chart,
-                    yLeft: expandKPIs(chart.yLeft, cells, effectiveStyling, stackGroupMode),
-                    yRight: expandKPIs(chart.yRight, cells, effectiveStyling, stackGroupMode)
+                    yLeft: expandKPIs(chart.yLeft, cells, grouping, effectiveStyling, stackGroupMode),
+                    yRight: expandKPIs(chart.yRight, cells, grouping, effectiveStyling, stackGroupMode)
                 }))
             };
         })
@@ -52,17 +53,18 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig, stackGroup
  *
  * @param baseKPIs - Array of base KPIs from layout
  * @param cells - Array of [cellName, record] tuples
+ * @param grouping - Current tree grouping configuration (determines label format)
  * @param stylingConfig - Optional cell styling configuration
  * @param stackGroupMode - Stackgroup strategy for this set of KPIs
  * @returns Expanded array of KPIs (styled or default, with stackgroups assigned)
  */
-function expandKPIs(baseKPIs, cells, stylingConfig, stackGroupMode = 'none') {
+function expandKPIs(baseKPIs, cells, grouping, stylingConfig, stackGroupMode = 'none') {
     let expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
         cells.forEach(([cellName, record]) => {
             if (stylingConfig) {
                 // Apply custom styling (band colors, sector line styles)
-                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, stylingConfig);
+                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, stylingConfig);
                 expandedKPIs.push({
                     ...styledKPI,
                     stackGroup: undefined // Initialize for treeshake-safe property assignment
@@ -78,8 +80,7 @@ function expandKPIs(baseKPIs, cells, stylingConfig, stackGroupMode = 'none') {
                 });
             }
         });
-    });
-    // Apply stackgroups to all expanded KPIs
+    }); // Apply stackgroups to all expanded KPIs
     expandedKPIs = assignStackGroups(expandedKPIs, cells, stackGroupMode);
     return expandedKPIs;
 }

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

@@ -74,10 +74,12 @@ export declare function filterChartData(data: CellTrafficRecord[], checkedPaths:
 export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];
 /**
  * Create a styled KPI with band colors and sector line styles
+ * Label format adapts to tree grouping configuration
  * @param metricName - Base metric name (e.g., 'DL_GBYTES')
  * @param cellRecord - Cell traffic record with metadata
  * @param unit - Unit string (e.g., 'GB', '%')
+ * @param grouping - Current tree grouping configuration (determines label format)
  * @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;
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, stylingConfig?: CellStylingConfig): KPI;

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

@@ -443,20 +443,22 @@ export function transformChartData(data, baseMetrics) {
 }
 /**
  * Create a styled KPI with band colors and sector line styles
+ * Label format adapts to tree grouping configuration
  * @param metricName - Base metric name (e.g., 'DL_GBYTES')
  * @param cellRecord - Cell traffic record with metadata
  * @param unit - Unit string (e.g., 'GB', '%')
+ * @param grouping - Current tree grouping configuration (determines label format)
  * @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;
+export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingConfig) {
+    const { band, sector, azimuth, cellName, siteName } = 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}°`;
+    // Generate label based on tree grouping configuration
+    const displayName = generateAdaptiveLabel(cellRecord, grouping);
     // Build KPI with cell-specific styling
     const kpi = {
         rawName: `${metricName}_${cellName}`, // Column name in pivoted data
@@ -478,3 +480,62 @@ export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
     });
     return kpi;
 }
+/**
+ * Generate adaptive label based on tree grouping configuration
+ * Label exactly matches the complete tree path shown in the tree view
+ * Only includes levels that are not null in the grouping config
+ * @param record - Cell traffic record with all metadata
+ * @param grouping - Current tree grouping configuration
+ * @returns Formatted label string matching complete tree hierarchy (only non-null levels)
+ */
+function generateAdaptiveLabel(record, grouping) {
+    const { level0, level1, level2 } = grouping;
+    // Helper to format field values exactly as shown in tree
+    const formatField = (field, value) => {
+        if (field === 'cell') {
+            return value; // Cell name as-is
+        }
+        switch (field) {
+            case 'azimuth':
+                return `${value}°`;
+            case 'sector':
+                return `Sector ${value}`;
+            case 'band':
+                return value;
+            case 'site':
+                return value;
+            default:
+                return String(value);
+        }
+    };
+    // Get field values from record
+    const getFieldValue = (field) => {
+        if (field === 'cell') {
+            return record.cellName;
+        }
+        switch (field) {
+            case 'site':
+                return record.siteName;
+            case 'band':
+                return record.band;
+            case 'azimuth':
+                return record.azimuth;
+            case 'sector':
+                return record.sector;
+        }
+    };
+    // Build label parts only for non-null levels
+    const parts = [];
+    // Level 0 is always present
+    parts.push(formatField(level0, getFieldValue(level0)));
+    // Level 1 (optional)
+    if (level1 !== null) {
+        parts.push(formatField(level1, getFieldValue(level1)));
+    }
+    // Level 2 (optional)
+    if (level2 !== null) {
+        parts.push(formatField(level2, getFieldValue(level2)));
+    }
+    // Join with arrow separator
+    return parts.join('_');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.82",
+	"version": "0.0.84",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",