@smartnet360/svelte-components 0.0.84 → 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, 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

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
     });
@@ -489,7 +530,7 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, stylingC
  * @returns Formatted label string matching complete tree hierarchy (only non-null levels)
  */
 function generateAdaptiveLabel(record, grouping) {
-    const { level0, level1, level2 } = grouping;
+    const { level0, level1 } = grouping;
     // Helper to format field values exactly as shown in tree
     const formatField = (field, value) => {
         if (field === 'cell') {
@@ -532,10 +573,8 @@ function generateAdaptiveLabel(record, grouping) {
     if (level1 !== null) {
         parts.push(formatField(level1, getFieldValue(level1)));
     }
-    // Level 2 (optional)
-    if (level2 !== null) {
-        parts.push(formatField(level2, getFieldValue(level2)));
-    }
+    // Cell is always the final leaf node
+    parts.push(record.cellName);
     // Join with arrow separator
-    return parts.join('_');
+    return parts.join(' → ');
 }

package/package.json

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