@smartnet360/svelte-components 0.0.82 → 0.0.83

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

@@ -63,11 +63,11 @@
 		{ 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 → 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 },
+		{ 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);
@@ -137,14 +137,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;
 	});

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,56 @@ 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
+ * @param record - Cell traffic record with all metadata
+ * @param grouping - Current tree grouping configuration
+ * @returns Formatted label string matching complete tree hierarchy (all levels)
+ */
+function generateAdaptiveLabel(record, grouping) {
+    const { level0, level1 } = grouping;
+    // Helper to format field values exactly as shown in tree
+    const formatField = (field, value) => {
+        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) => {
+        switch (field) {
+            case 'site':
+                return record.siteName;
+            case 'band':
+                return record.band;
+            case 'azimuth':
+                return record.azimuth;
+            case 'sector':
+                return record.sector;
+        }
+    };
+    // Build label matching complete tree path (including cell)
+    const cellLabel = record.cellName;
+    if (level1 === null) {
+        // 2-level tree: level0 → cell
+        // Show: level0 → cellName (e.g., "SiteA → AB12141", "LTE2100 → AB12141")
+        const level0Value = formatField(level0, getFieldValue(level0));
+        return `${level0Value}_${cellLabel}`;
+    }
+    else {
+        // 3-level tree: level0 → level1 → cell
+        // Show: level0 → level1 → cellName (e.g., "SiteA → 120° → AB12141")
+        const level0Value = formatField(level0, getFieldValue(level0));
+        const level1Value = formatField(level1, getFieldValue(level1));
+        return `${level0Value}_${level1Value}_${cellLabel}`;
+    }
+}

package/package.json

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