@smartnet360/svelte-components 0.0.34 → 0.0.35

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

@@ -0,0 +1,96 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { TreeView, createTreeStore } from '../../core/TreeView';
+	import { ChartComponent, type Layout } from '../../core/Charts';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord } from './index';
+	import { expandLayoutForCells } from './helper';
+	import { onMount } from 'svelte';
+    import type { Mode } from '../../index.js';
+
+	interface Props {
+		rawData: CellTrafficRecord[];
+		baseLayout: Layout;
+		baseMetrics: string[];
+        mode: Mode;
+	}
+
+	let { rawData, baseLayout, baseMetrics, mode = "scrollspy" }: Props = $props();
+
+	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
+
+	onMount(() => {
+		// Build tree nodes from raw data
+		const treeNodes = buildTreeNodes(rawData);
+
+		// Create tree store
+		treeStore = createTreeStore({
+			nodes: treeNodes,
+			namespace: 'site-check',
+			persistState: true,
+			defaultExpandAll: false
+		});
+	});
+
+	// Derive chart data from tree selection
+	let filteredData = $derived.by(() => {
+		if (!treeStore) return [];
+		const storeValue = $treeStore;
+		if (!storeValue) return [];
+		return filterChartData(rawData, storeValue.state.checkedPaths);
+	});
+
+	// Transform data using base metrics from layout
+	let chartData = $derived(transformChartData(filteredData, baseMetrics));
+
+	// Expand layout based on selected cells
+	let chartLayout = $derived(expandLayoutForCells(baseLayout, filteredData));
+    console.log('chartLayout', chartLayout);
+
+	let totalRecords = $derived(rawData.length);
+	let visibleRecords = $derived(filteredData.length);
+
+	// Compute simple stats
+	let totalCells = $derived(new Set(filteredData.map((r) => r.cellName)).size);
+	let totalSites = $derived(new Set(filteredData.map((r) => r.siteName)).size);
+</script>
+
+<div class="container-fluid vh-100 d-flex flex-column">
+	<!-- Main Content -->
+	<div class="row flex-grow-1 ">
+		<!-- Left: Tree View -->
+		<div class="col-lg-3 col-md-4 border-end bg-white overflow-auto">
+			<div class="p-3">
+				<!-- <h5 class="mb-3">
+					<span class="me-2">📡</span>
+					Site Selection
+				</h5> -->
+
+				{#if treeStore}
+					<TreeView store={$treeStore!} showControls={false} showIndeterminate={true} height="100%" />
+				{/if}
+			</div>
+		</div>
+
+		<!-- Right: Charts -->
+		<div class="col-lg-9 col-md-8 bg-light overflow-auto">
+			{#if chartData.length > 0}
+				<ChartComponent
+					layout={chartLayout}
+					data={chartData}
+					mode={mode}
+					showGlobalControls={true}
+					enableAdaptation={true}
+				/>
+			{:else}
+				<div class="d-flex align-items-center justify-content-center h-100">
+					<div class="text-center text-muted">
+						<div class="mb-3" style="font-size: 4rem;">📊</div>
+						<h5>No Data Selected</h5>
+						<p>Select one or more cells from the tree to display KPI charts.</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+import { type Layout } from '../../core/Charts';
+import { type CellTrafficRecord } from './index';
+import type { Mode } from '../../index.js';
+interface Props {
+    rawData: CellTrafficRecord[];
+    baseLayout: Layout;
+    baseMetrics: string[];
+    mode: Mode;
+}
+declare const SiteCheck: import("svelte").Component<Props, {}, "">;
+type SiteCheck = ReturnType<typeof SiteCheck>;
+export default SiteCheck;

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

@@ -0,0 +1,29 @@
+/**
+ * Data Loader for Site Check Component
+ * Loads and parses cell_traffic_with_band.csv
+ */
+export interface CellTrafficRecord {
+    date: string;
+    cellName: string;
+    siteName: string;
+    sector: number;
+    azimuth: number;
+    band: string;
+    metrics: Record<string, number>;
+}
+/**
+ * Load cell traffic data from CSV file
+ */
+export declare function loadCellTrafficData(): Promise<CellTrafficRecord[]>;
+/**
+ * Get unique sites from data
+ */
+export declare function getUniqueSites(data: CellTrafficRecord[]): string[];
+/**
+ * Get unique cells from data
+ */
+export declare function getUniqueCells(data: CellTrafficRecord[]): string[];
+/**
+ * Group data by cell name for efficient lookup
+ */
+export declare function groupDataByCell(data: CellTrafficRecord[]): Map<string, CellTrafficRecord[]>;

package/dist/apps/site-check/data-loader.js

@@ -0,0 +1,105 @@
+/**
+ * Data Loader for Site Check Component
+ * Loads and parses cell_traffic_with_band.csv
+ */
+/**
+ * Load cell traffic data from CSV file
+ */
+export async function loadCellTrafficData() {
+    const response = await fetch('/cell_traffic_with_band.csv');
+    if (!response.ok) {
+        throw new Error(`Failed to load CSV: ${response.statusText}`);
+    }
+    const text = await response.text();
+    return parseCsvData(text);
+}
+/**
+ * Parse CSV text into structured records
+ */
+function parseCsvData(csv) {
+    const lines = csv.trim().split('\n');
+    // Parse header to identify metric columns
+    const header = lines[0].split(',').map(h => h.trim());
+    const dataLines = lines.slice(1);
+    return dataLines
+        .map((line) => {
+        const parts = line.split(',');
+        // Handle potential issues with CSV parsing
+        if (parts.length < 8) {
+            console.warn('Skipping malformed CSV line:', line);
+            return null;
+        }
+        // Fixed columns (metadata) - based on known CSV structure
+        const date = parts[0].trim();
+        const cellName = parts[1].trim();
+        const siteName = parts[4].trim();
+        const sector = parseInt(parts[5]);
+        const azimuth = parseInt(parts[6]);
+        const band = parts[7].trim();
+        // Dynamic metrics - automatically map ALL numeric columns from CSV
+        const metrics = {};
+        // Start from column 2 (skip PERIOD_START_TIME, CELL_NAME)
+        // Stop before metadata columns (SITE_NAME, SECTOR, AZIMUTH, band)
+        for (let i = 2; i < Math.min(parts.length, 4); i++) {
+            const columnName = header[i]; // Use exact column name from CSV header
+            const value = parseFloat(parts[i]);
+            if (columnName && !isNaN(value)) {
+                metrics[columnName] = value; // e.g., metrics['DL_GBYTES'] = 123.45
+            }
+        }
+        // Add any additional metric columns after band column
+        for (let i = 8; i < parts.length; i++) {
+            const columnName = header[i];
+            const value = parseFloat(parts[i]);
+            if (columnName && !isNaN(value)) {
+                metrics[columnName] = value;
+            }
+        }
+        return {
+            date,
+            cellName,
+            siteName,
+            sector,
+            azimuth,
+            band,
+            metrics
+        };
+    })
+        .filter((record) => record !== null);
+}
+/**
+ * Get unique sites from data
+ */
+export function getUniqueSites(data) {
+    const sites = new Set();
+    data.forEach((record) => sites.add(record.siteName));
+    return Array.from(sites).sort();
+}
+/**
+ * Get unique cells from data
+ */
+export function getUniqueCells(data) {
+    const cells = new Set();
+    data.forEach((record) => cells.add(record.cellName));
+    return Array.from(cells).sort();
+}
+/**
+ * Group data by cell name for efficient lookup
+ */
+export function groupDataByCell(data) {
+    const grouped = new Map();
+    data.forEach((record) => {
+        if (!grouped.has(record.cellName)) {
+            grouped.set(record.cellName, []);
+        }
+        grouped.get(record.cellName).push(record);
+    });
+    // Sort each cell's data by date
+    grouped.forEach((records) => {
+        records.sort((a, b) => {
+            // Simple date string comparison (works for DD-MMM-YY format)
+            return a.date.localeCompare(b.date);
+        });
+    });
+    return grouped;
+}

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

@@ -0,0 +1,19 @@
+import type { Layout } from '../../core/Charts';
+import type { CellTrafficRecord } from './';
+/**
+ * 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
+ *
+ * @param baseLayout - The base layout configuration from JSON
+ * @param data - Filtered cell traffic records for selected cells
+ * @returns Expanded layout with cell-specific KPIs
+ */
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[]): Layout;
+/**
+ * Extract base metric names from a layout configuration
+ * Returns unique metric rawNames that need to be pivoted
+ *
+ * @param layout - The layout configuration
+ * @returns Array of unique metric names (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export declare function extractBaseMetrics(layout: Layout): string[];

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

@@ -0,0 +1,103 @@
+/**
+ * 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
+ *
+ * @param baseLayout - The base layout configuration from JSON
+ * @param data - Filtered cell traffic records for selected cells
+ * @returns Expanded layout with cell-specific KPIs
+ */
+export function expandLayoutForCells(baseLayout, data) {
+    // Get unique cells and their metadata
+    const cellMap = new Map();
+    data.forEach((record) => {
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    const cells = Array.from(cellMap.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Deep clone the layout structure and expand KPIs
+    const expandedLayout = {
+        layoutName: baseLayout.layoutName,
+        sections: baseLayout.sections.map((section) => ({
+            ...section,
+            charts: section.charts.map((chart) => ({
+                ...chart,
+                yLeft: expandKPIs(chart.yLeft, cells),
+                yRight: expandKPIs(chart.yRight, cells)
+            }))
+        }))
+    };
+    return expandedLayout;
+}
+/**
+ * Expand a single KPI into multiple KPIs (one per cell)
+ *
+ * @param baseKPIs - Array of base KPIs from layout
+ * @param cells - Array of [cellName, record] tuples
+ * @returns Expanded array of KPIs with cell-specific rawNames and colors
+ */
+function expandKPIs(baseKPIs, cells) {
+    const expandedKPIs = [];
+    baseKPIs.forEach((baseKPI) => {
+        cells.forEach(([cellName, record], index) => {
+            expandedKPIs.push({
+                rawName: `${baseKPI.rawName}_${cellName}`,
+                name: `${cellName} (${record.band}) - ${baseKPI.name}`,
+                scale: baseKPI.scale,
+                unit: baseKPI.unit,
+                color: getColorForIndex(index)
+            });
+        });
+    });
+    return expandedKPIs;
+}
+/**
+ * Extract base metric names from a layout configuration
+ * Returns unique metric rawNames that need to be pivoted
+ *
+ * @param layout - The layout configuration
+ * @returns Array of unique metric names (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export function extractBaseMetrics(layout) {
+    const metrics = new Set();
+    layout.sections.forEach((section) => {
+        section.charts.forEach((chart) => {
+            chart.yLeft.forEach((kpi) => metrics.add(kpi.rawName));
+            chart.yRight.forEach((kpi) => metrics.add(kpi.rawName));
+        });
+    });
+    return Array.from(metrics);
+}
+/**
+ * Get a distinct color for each cell line
+ * Uses a predefined color palette with good contrast
+ */
+function getColorForIndex(index) {
+    const colors = [
+        '#0d6efd', // Blue
+        '#198754', // Green
+        '#dc3545', // Red
+        '#ffc107', // Yellow
+        '#0dcaf0', // Cyan
+        '#6f42c1', // Purple
+        '#fd7e14', // Orange
+        '#20c997', // Teal
+        '#d63384', // Pink
+        '#6610f2', // Indigo
+        '#17a2b8', // Info
+        '#28a745', // Success
+        '#e83e8c', // Magenta
+        '#6c757d', // Gray
+        '#007bff', // Primary
+        '#28a745', // Green variant
+        '#17a2b8', // Cyan variant
+        '#ffc107', // Amber
+        '#dc3545', // Danger
+        '#343a40', // Dark
+        '#6c757d', // Secondary
+        '#fd7e14', // Orange variant
+        '#20c997', // Teal variant
+        '#6f42c1' // Violet
+    ];
+    return colors[index % colors.length];
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Site Check Component
+ * Public API exports for cell traffic KPI visualization
+ */
+export { default as SiteCheck } from './SiteCheck.svelte';
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, type CellTrafficRecord } from './data-loader.js';
+export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
+export { expandLayoutForCells, extractBaseMetrics } from './helper.js';

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

@@ -0,0 +1,12 @@
+/**
+ * Site Check Component
+ * Public API exports for cell traffic KPI visualization
+ */
+// Components
+export { default as SiteCheck } from './SiteCheck.svelte';
+// Data loading
+export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
+// Data transforms
+export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
+// Helper utilities (for external configuration)
+export { expandLayoutForCells, extractBaseMetrics } from './helper.js';

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

@@ -0,0 +1,24 @@
+/**
+ * Data Transforms for Site Check Component
+ * Converts raw CSV data to TreeView nodes and Chart configurations
+ */
+import type { TreeNode } from '../../core/TreeView';
+import type { CellTrafficRecord } from './data-loader';
+/**
+ * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ */
+export declare function buildTreeNodes(data: CellTrafficRecord[]): TreeNode[];
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export declare function filterChartData(data: CellTrafficRecord[], checkedPaths: Set<string>): CellTrafficRecord[];
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];

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

@@ -0,0 +1,142 @@
+/**
+ * Data Transforms for Site Check Component
+ * Converts raw CSV data to TreeView nodes and Chart configurations
+ */
+/**
+ * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
+ */
+export function buildTreeNodes(data) {
+    // Group by site → azimuth → cell
+    const siteMap = new Map();
+    data.forEach((record) => {
+        if (!siteMap.has(record.siteName)) {
+            siteMap.set(record.siteName, new Map());
+        }
+        const azimuthMap = siteMap.get(record.siteName);
+        if (!azimuthMap.has(record.azimuth)) {
+            azimuthMap.set(record.azimuth, new Map());
+        }
+        const cellMap = azimuthMap.get(record.azimuth);
+        // Store one record per cell (we just need metadata, not all time series)
+        if (!cellMap.has(record.cellName)) {
+            cellMap.set(record.cellName, record);
+        }
+    });
+    // Build tree structure
+    const treeNodes = [];
+    Array.from(siteMap.entries())
+        .sort(([a], [b]) => a.localeCompare(b))
+        .forEach(([siteName, azimuthMap]) => {
+        const siteNode = {
+            id: siteName, // Simple ID
+            label: `Site ${siteName}`,
+            // icon: '📡',
+            metadata: { type: 'site', siteName },
+            defaultExpanded: false,
+            children: []
+        };
+        Array.from(azimuthMap.entries())
+            .sort(([a], [b]) => a - b)
+            .forEach(([azimuth, cellMap]) => {
+            const sectorNode = {
+                id: `${azimuth}`, // Simple ID (just azimuth)
+                label: `${azimuth}° Sector`,
+                // icon: '📍',
+                metadata: { type: 'sector', azimuth, siteName },
+                defaultExpanded: false,
+                children: []
+            };
+            Array.from(cellMap.entries())
+                .sort(([a], [b]) => a.localeCompare(b))
+                .forEach(([cellName, record]) => {
+                const cellNode = {
+                    id: cellName, // Simple ID (just cell name)
+                    label: `${cellName} (${record.band})`,
+                    icon: getBandIcon(record.band),
+                    metadata: {
+                        type: 'cell',
+                        cellName,
+                        band: record.band,
+                        siteName: record.siteName,
+                        sector: record.sector,
+                        azimuth: record.azimuth
+                    },
+                    defaultChecked: true
+                };
+                sectorNode.children.push(cellNode);
+            });
+            siteNode.children.push(sectorNode);
+        });
+        treeNodes.push(siteNode);
+    });
+    return treeNodes;
+}
+/**
+ * Get icon emoji based on band technology
+ */
+function getBandIcon(band) {
+    return '';
+    if (band.startsWith('NR'))
+        return '📶'; // 5G
+    if (band.startsWith('LTE'))
+        return '📱'; // 4G
+    return '📡'; // Fallback
+}
+/**
+ * Filter chart data based on selected tree paths
+ * Only include cells that are checked in the tree
+ */
+export function filterChartData(data, checkedPaths) {
+    // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
+    const selectedCells = new Set();
+    checkedPaths.forEach((path) => {
+        const parts = path.split(':');
+        if (parts.length === 3) {
+            // This is a cell-level path (site:azimuth:cellName)
+            selectedCells.add(parts[2]);
+        }
+    });
+    // Filter data to only include selected cells
+    return data.filter((record) => selectedCells.has(record.cellName));
+}
+/**
+ * Transform data for chart component consumption
+ * Pivots data so each cell becomes its own KPI column
+ * Transforms from long format (many rows per cell) to wide format (one column per cell)
+ *
+ * @param data - Filtered cell traffic records
+ * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
+ */
+export function transformChartData(data, baseMetrics) {
+    // Group data by date
+    const dateMap = new Map();
+    data.forEach((record) => {
+        if (!dateMap.has(record.date)) {
+            dateMap.set(record.date, new Map());
+        }
+        dateMap.get(record.date).set(record.cellName, record);
+    });
+    // Build pivoted data: one row per date, one column per cell per metric
+    const pivotedData = [];
+    dateMap.forEach((cellsOnDate, date) => {
+        const row = {
+            TIMESTAMP: date
+        };
+        cellsOnDate.forEach((record, cellName) => {
+            // Pivot each base metric into cell-specific columns
+            baseMetrics.forEach((metricName) => {
+                const value = record.metrics[metricName];
+                if (value !== undefined) {
+                    row[`${metricName}_${cellName}`] = value;
+                }
+            });
+            // Store metadata for reference (band, azimuth, etc.)
+            row[`BAND_${cellName}`] = record.band;
+            row[`AZIMUTH_${cellName}`] = record.azimuth;
+        });
+        pivotedData.push(row);
+    });
+    // Sort by date
+    pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
+    return pivotedData;
+}

package/dist/core/Charts/ChartCard.svelte

@@ -155,11 +155,13 @@
 
 		const traces: any[] = [];
 		let colorIndex = 0;
+		const chartType = chart.type || 'line';  // Default to 'line' if not specified
+		const stackGroup = chart.stackGroup;
 
 		// Add left Y-axis traces (with moving average support)
 		resolvedKPIs.left.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex, chartType, stackGroup);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
@@ -167,7 +169,7 @@
 		// Add right Y-axis traces (with moving average support)
 		resolvedKPIs.right.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex, chartType, stackGroup);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});

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

@@ -15,12 +15,15 @@ export interface KPI {
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ChartGrid = "2x2" | "3x3" | "4x4" | "1x2" | "1x4" | "1x8";
+export type ChartType = "line" | "stacked-area" | "stacked-percentage" | "bar" | "scatter";
 export interface Chart {
     pos?: ChartPosition;
     title: string;
+    type?: ChartType;
     yLeft: KPI[];
     yRight: KPI[];
     movingAverage?: MovingAverageConfig;
+    stackGroup?: string;
 }
 export interface Section {
     id: string;

package/dist/core/Charts/data-utils.d.ts

@@ -1,7 +1,7 @@
 import type { KPI } from './charts.model.js';
 export declare function processKPIData(data: any[], kpi: KPI): number[];
 export declare function calculateMovingAverage(values: number[], window: number): number[];
-export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number): any;
+export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any;
 /**
  * Create time series trace(s) with optional moving average
  * @param values - Pre-processed numeric values array for the KPI
@@ -9,9 +9,11 @@ export declare function createTimeSeriesTrace(values: number[], timestamps: any[
  * @param kpi - KPI configuration (may include movingAverage config)
  * @param yaxis - Which Y-axis to use ('y1' or 'y2')
  * @param colorIndex - Index for color selection
+ * @param chartType - Type of chart (line, stacked-area, etc.)
+ * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number): any[];
+export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any[];
 export declare function getYAxisTitle(kpis: KPI[]): string;
 export declare function formatValue(value: number, scale: 'percent' | 'absolute', unit: string): string;
 export declare function createDefaultPlotlyLayout(title?: string): any;