@smartnet360/svelte-components 0.0.83 → 0.0.85

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, type ColorDimension, defaultTreeGrouping } from './index';
 	import { expandLayoutForCells } from './helper';
 	import { log } from '../../core/logger';
     import type {ChartMarker, Mode } from '../../index.js';
@@ -58,19 +58,39 @@
 	// 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 },
+	// 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: 'sector', label: 'Sector' }
 	];
 
-	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;
+		treeGrouping = {
+			level0: value,
+			level1: newLevel1
+		};
+	}
+
+	function handleLevel1Change(value: TreeGroupField | 'none') {
+		const newLevel1 = value === 'none' ? null : value;
+		treeGrouping = {
+			level0: treeGrouping.level0,
+			level1: newLevel1
+		};
+	}
+
+	// Get available options for level1 (exclude level0)
+	let availableLevel1Options = $derived.by(() => {
+		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
+	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	// Rebuild tree whenever treeGrouping changes
 	$effect(() => {
@@ -137,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;
 	});
@@ -280,34 +301,67 @@
 								<i class="bi bi-search"></i>
 							</button>
 						</div>
-					</div>
-				{/if}
+			</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>
+		<!-- Grouping Selector -->
+		{#if showGroupingSelector}
+			<div class="p-3 border-bottom flex-shrink-0">
+				<div class="small fw-semibold mb-2">Tree Grouping</div>
+				
+				<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="groupingSelect"
+							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) => {
-								const index = parseInt(e.currentTarget.value);
-								treeGrouping = groupingPresets[index].value;
+								colorDimension = e.currentTarget.value as ColorDimension;
+								log('🎨 Color dimension changed:', colorDimension);
 							}}
 						>
-							{#each groupingPresets as preset, i}
-								<option value={i} selected={JSON.stringify(preset.value) === JSON.stringify(treeGrouping)}>
-									{preset.label}
-								</option>
-							{/each}
+							<option value="band">Band</option>
+							<option value="site">Site</option>
 						</select>
 					</div>
-				{/if}
-			{/if}
-
-			<!-- Tree View -->
+				</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

@@ -15,19 +15,23 @@ export interface CellTrafficRecord {
  * Tree grouping field types
  */
 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 → cell
+ * 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: 'cell';
 }
 /**
- * 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

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

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

@@ -6,11 +6,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 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 function expandLayoutForCells(baseLayout, data, grouping, stylingConfig, stackGroupMode = 'none') {
+export function expandLayoutForCells(baseLayout, data, grouping, colorDimension, stylingConfig, stackGroupMode = 'none') {
     // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
@@ -38,8 +39,8 @@ export function expandLayoutForCells(baseLayout, data, grouping, stylingConfig,
                 ...section,
                 charts: section.charts.map((chart) => ({
                     ...chart,
-                    yLeft: expandKPIs(chart.yLeft, cells, grouping, effectiveStyling, stackGroupMode),
-                    yRight: expandKPIs(chart.yRight, cells, grouping, effectiveStyling, stackGroupMode)
+                    yLeft: expandKPIs(chart.yLeft, cells, grouping, colorDimension, effectiveStyling, stackGroupMode),
+                    yRight: expandKPIs(chart.yRight, cells, grouping, colorDimension, effectiveStyling, stackGroupMode)
                 }))
             };
         })
@@ -54,17 +55,18 @@ export function expandLayoutForCells(baseLayout, data, grouping, stylingConfig,
  * @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 colorDimension - Which field to use for coloring (site or band)
  * @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, grouping, stylingConfig, stackGroupMode = 'none') {
+function expandKPIs(baseKPIs, cells, grouping, colorDimension, 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, grouping, stylingConfig);
+                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, colorDimension, stylingConfig);
                 expandedKPIs.push({
                     ...styledKPI,
                     stackGroup: undefined // Initialize for treeshake-safe property assignment

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, defaultTreeGrouping, type CellTrafficRecord, type TreeGroupingConfig, type TreeGroupField } from './data-loader.js';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping, type CellTrafficRecord, type TreeGroupingConfig, type TreeGroupField, type ColorDimension } from './data-loader.js';
 export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency, assignStackGroups, createStackGroupId, type StackGroupMode } from './transforms.js';
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
 export { defaultCellStyling } from './default-cell-styling.js';

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, TreeGroupingConfig } from './data-loader';
+import type { CellTrafficRecord, TreeGroupingConfig, ColorDimension } from './data-loader';
 /**
  * Stackgroup mode types for dynamic stacking strategies
  */
@@ -75,11 +75,13 @@ export declare function transformChartData(data: CellTrafficRecord[], baseMetric
 /**
  * Create a styled KPI with band colors and sector line styles
  * Label format adapts to tree grouping configuration
+ * Color assignment adapts to colorDimension selection
  * @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 colorDimension - Which field to use for coloring (site or band)
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, stylingConfig?: CellStylingConfig): KPI;
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig): KPI;

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

@@ -154,7 +154,7 @@ export function sortCellsByBandFrequency(items) {
  * @param data - Cell traffic records
  * @param grouping - Tree grouping configuration (defaults to Site → Azimuth → Cell)
  */
-export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimuth', level2: 'cell' }) {
+export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimuth' }) {
     log('🔄 Building tree nodes', {
         recordCount: data.length,
         grouping,
@@ -441,20 +441,60 @@ export function transformChartData(data, baseMetrics) {
     });
     return pivotedData;
 }
+/**
+ * Generate a consistent color for a site name using a hash function
+ * Same site will always get the same color
+ * @param siteName - Site name to generate color for
+ * @returns Hex color string
+ */
+function generateSiteColor(siteName) {
+    // Modern color palette for sites
+    const siteColors = [
+        '#3B82F6', // Blue
+        '#EF4444', // Red
+        '#10B981', // Emerald
+        '#F59E0B', // Amber
+        '#8B5CF6', // Violet
+        '#06B6D4', // Cyan
+        '#F97316', // Orange
+        '#84CC16', // Lime
+        '#EC4899', // Pink
+        '#14B8A6', // Teal
+        '#F43F5E', // Rose
+        '#A855F7' // Purple
+    ];
+    // Simple hash function for consistent color assignment
+    let hash = 0;
+    for (let i = 0; i < siteName.length; i++) {
+        hash = siteName.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    hash = Math.abs(hash);
+    return siteColors[hash % siteColors.length];
+}
 /**
  * Create a styled KPI with band colors and sector line styles
  * Label format adapts to tree grouping configuration
+ * Color assignment adapts to colorDimension selection
  * @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 colorDimension - Which field to use for coloring (site or band)
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingConfig) {
+export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDimension, stylingConfig) {
     const { band, sector, azimuth, cellName, siteName } = cellRecord;
-    // Get color from band (if config provided)
-    const color = stylingConfig?.bandColors?.[band];
+    // Determine color based on colorDimension
+    let color;
+    if (colorDimension === 'band') {
+        // Get color from band colors config
+        color = stylingConfig?.bandColors?.[band];
+    }
+    else if (colorDimension === 'site') {
+        // Generate consistent color for site
+        color = generateSiteColor(siteName);
+    }
     // Get line style from sector (if config provided)
     const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
     // Generate label based on tree grouping configuration
@@ -475,6 +515,7 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingC
         band,
         sector,
         azimuth,
+        colorDimension,
         color,
         lineStyle
     });
@@ -483,14 +524,18 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingC
 /**
  * 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 (all levels)
+ * @returns Formatted label string matching complete tree hierarchy (only non-null levels)
  */
 function generateAdaptiveLabel(record, grouping) {
     const { level0, level1 } = 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}°`;
@@ -506,6 +551,9 @@ function generateAdaptiveLabel(record, grouping) {
     };
     // Get field values from record
     const getFieldValue = (field) => {
+        if (field === 'cell') {
+            return record.cellName;
+        }
         switch (field) {
             case 'site':
                 return record.siteName;
@@ -517,19 +565,16 @@ function generateAdaptiveLabel(record, grouping) {
                 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}`;
+    // 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)));
     }
+    // Cell is always the final leaf node
+    parts.push(record.cellName);
+    // Join with arrow separator
+    return parts.join(' → ');
 }

package/package.json

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