@smartnet360/svelte-components 0.0.48 → 0.0.49

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

@@ -1,5 +1,6 @@
 import type { Layout, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './';
+import { type StackGroupMode } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
  * Takes a base layout (with one KPI per metric) and expands it to include one KPI per cell
@@ -7,9 +8,10 @@ import type { CellTrafficRecord } from './';
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
  * @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): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], 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

@@ -1,4 +1,4 @@
-import { createStyledKPI, sortCellsByBandFrequency } from './transforms.js';
+import { createStyledKPI, sortCellsByBandFrequency, assignStackGroups } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
  * Takes a base layout (with one KPI per metric) and expands it to include one KPI per cell
@@ -6,9 +6,10 @@ import { createStyledKPI, sortCellsByBandFrequency } from './transforms.js';
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
  * @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) {
+export function expandLayoutForCells(baseLayout, data, stylingConfig, stackGroupMode = 'none') {
     // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
@@ -36,8 +37,8 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig) {
                 ...section,
                 charts: section.charts.map((chart) => ({
                     ...chart,
-                    yLeft: expandKPIs(chart.yLeft, cells, effectiveStyling),
-                    yRight: expandKPIs(chart.yRight, cells, effectiveStyling)
+                    yLeft: expandKPIs(chart.yLeft, cells, effectiveStyling, stackGroupMode),
+                    yRight: expandKPIs(chart.yRight, cells, effectiveStyling, stackGroupMode)
                 }))
             };
         })
@@ -52,10 +53,11 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig) {
  * @param baseKPIs - Array of base KPIs from layout
  * @param cells - Array of [cellName, record] tuples
  * @param stylingConfig - Optional cell styling configuration
- * @returns Expanded array of KPIs (styled or default)
+ * @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) {
-    const expandedKPIs = [];
+function expandKPIs(baseKPIs, cells, stylingConfig, stackGroupMode = 'none') {
+    let expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
         cells.forEach(([cellName, record]) => {
             if (stylingConfig) {
@@ -73,6 +75,8 @@ function expandKPIs(baseKPIs, cells, stylingConfig) {
             }
         });
     });
+    // Apply stackgroups to all expanded KPIs
+    expandedKPIs = assignStackGroups(expandedKPIs, cells, stackGroupMode);
     return expandedKPIs;
 }
 /**

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

@@ -4,6 +4,6 @@
  */
 export { default as SiteCheck } from './SiteCheck.svelte';
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping, type CellTrafficRecord, type TreeGroupingConfig, type TreeGroupField } from './data-loader.js';
-export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.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/index.js

@@ -7,7 +7,7 @@ export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, defaultTreeGrouping } from './data-loader.js';
 // Data transforms
-export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency, assignStackGroups, createStackGroupId } from './transforms.js';
 // Helper functions
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
 // Default cell styling configuration

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

@@ -5,6 +5,32 @@
 import type { TreeNode } from '../../core/TreeView';
 import type { KPI, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord, TreeGroupingConfig } from './data-loader';
+/**
+ * Stackgroup mode types for dynamic stacking strategies
+ */
+export type StackGroupMode = 'band' | 'site' | 'azimuth' | 'sector' | 'cell' | 'none';
+/**
+ * Generate a deterministic, production-safe stackgroup ID
+ * This function ensures stackgroups are:
+ * - Consistent across dev and prod builds
+ * - Never undefined, null, or empty
+ * - Properly stringified and sanitized
+ *
+ * @param value - The grouping value (band, site, etc.)
+ * @param mode - The grouping mode/strategy
+ * @returns Normalized stackgroup string
+ */
+export declare function createStackGroupId(value: string | number | null | undefined, mode: StackGroupMode): string;
+/**
+ * Assign stackgroups to KPIs based on cell metadata and grouping mode
+ * This is production-safe and works identically in dev and build modes
+ *
+ * @param kpis - Array of KPIs to assign stackgroups to
+ * @param cells - Array of [cellName, record] tuples with metadata
+ * @param mode - Grouping strategy (band, site, azimuth, etc.)
+ * @returns KPIs with stackGroup field populated
+ */
+export declare function assignStackGroups(kpis: KPI[], cells: [string, CellTrafficRecord][], mode: StackGroupMode): KPI[];
 /**
  * Extract band from cell name using regex pattern matching
  * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.

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

@@ -3,6 +3,93 @@
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
 import { log } from '../../core/logger';
+/**
+ * Generate a deterministic, production-safe stackgroup ID
+ * This function ensures stackgroups are:
+ * - Consistent across dev and prod builds
+ * - Never undefined, null, or empty
+ * - Properly stringified and sanitized
+ *
+ * @param value - The grouping value (band, site, etc.)
+ * @param mode - The grouping mode/strategy
+ * @returns Normalized stackgroup string
+ */
+export function createStackGroupId(value, mode) {
+    // Sanitize the value - convert to string and handle nullish values
+    const sanitizedValue = value != null ? String(value).trim() : 'default';
+    // If mode is 'none', return a single stackgroup for all traces
+    if (mode === 'none') {
+        return 'stack_all';
+    }
+    // Build deterministic ID: stack_{mode}_{value}
+    // This ensures all traces with same mode+value get identical stackgroup
+    return `stack_${mode}_${sanitizedValue}`;
+}
+/**
+ * Assign stackgroups to KPIs based on cell metadata and grouping mode
+ * This is production-safe and works identically in dev and build modes
+ *
+ * @param kpis - Array of KPIs to assign stackgroups to
+ * @param cells - Array of [cellName, record] tuples with metadata
+ * @param mode - Grouping strategy (band, site, azimuth, etc.)
+ * @returns KPIs with stackGroup field populated
+ */
+export function assignStackGroups(kpis, cells, mode) {
+    // Create a mapping of cellName → metadata for quick lookup
+    const cellMetadata = new Map(cells);
+    return kpis.map(kpi => {
+        // Extract cellName from the rawName (format: "METRIC_CELLNAME")
+        const cellName = kpi.rawName.split('_').slice(1).join('_');
+        const record = cellMetadata.get(cellName);
+        if (!record) {
+            // Fallback if cell not found - use default stackgroup
+            log('⚠️ Cell not found for KPI, using default stackgroup', {
+                kpiRawName: kpi.rawName,
+                cellName
+            });
+            return {
+                ...kpi,
+                stackGroup: createStackGroupId(null, mode)
+            };
+        }
+        // Get the grouping value based on mode
+        let groupValue;
+        switch (mode) {
+            case 'band':
+                groupValue = record.band;
+                break;
+            case 'site':
+                groupValue = record.siteName;
+                break;
+            case 'azimuth':
+                groupValue = record.azimuth;
+                break;
+            case 'sector':
+                groupValue = record.sector;
+                break;
+            case 'cell':
+                groupValue = record.cellName;
+                break;
+            case 'none':
+            default:
+                groupValue = null;
+                break;
+        }
+        // Create deterministic stackgroup ID
+        const stackGroup = createStackGroupId(groupValue, mode);
+        log('📊 Assigned stackgroup', {
+            kpiName: kpi.name,
+            cellName,
+            mode,
+            groupValue,
+            stackGroup
+        });
+        return {
+            ...kpi,
+            stackGroup
+        };
+    });
+}
 /**
  * Band frequency mapping for consistent ordering
  * Maps band strings to their actual frequencies in MHz

package/dist/core/Charts/charts.model.d.ts

@@ -14,6 +14,7 @@ export interface KPI {
     color?: string;
     lineStyle?: LineStyle;
     movingAverage?: MovingAverageConfig;
+    stackGroup?: string;
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ChartGrid = "2x2" | "3x3" | "4x4" | "1x2" | "1x4" | "1x8";

package/dist/core/Charts/data-utils.js

@@ -96,6 +96,9 @@ export function calculateMovingAverage(values, window) {
 export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
+    // Use KPI-level stackgroup if available, otherwise fall back to chart-level stackgroup
+    // This allows per-KPI stackgroup assignment (production-safe for dynamic grouping)
+    const effectiveStackGroup = kpi.stackGroup || stackGroup;
     // Base trace configuration
     const baseTrace = {
         x: timestamps,
@@ -126,7 +129,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 type: 'scatter',
                 mode: 'lines',
                 fill: 'tonexty',
-                stackgroup: stackGroup || 'one',
+                stackgroup: effectiveStackGroup || 'one',
                 line: {
                     width: 1.5, // Visible border width
                     color: darkenColor(traceColor, 0.25) // 25% darker border for better separation
@@ -139,7 +142,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 type: 'scatter',
                 mode: 'lines',
                 fill: 'tonexty',
-                stackgroup: stackGroup || 'one',
+                stackgroup: effectiveStackGroup || 'one',
                 groupnorm: 'percent',
                 line: {
                     width: 1.5, // Visible border width

package/package.json

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