@smartnet360/svelte-components 0.0.22 → 0.0.23

package/dist/cellular/SiteTree.svelte

@@ -0,0 +1,286 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CellularSite, VisibilityState } from './cellular.model.js';
+	import { getBandColor, getBandLabel } from './mock-cellular-data.js';
+
+	interface Props {
+		sites: CellularSite[];
+		visibility: VisibilityState;
+		onToggleSite: (siteId: string) => void;
+		onToggleSector: (siteId: string, sectorId: string) => void;
+		onToggleCell: (siteId: string, sectorId: string, band: number) => void;
+	}
+
+	let { sites, visibility, onToggleSite, onToggleSector, onToggleCell }: Props = $props();
+
+	// Track expanded/collapsed state for UI only
+	let expandedSites = $state<Set<string>>(new Set(sites.map(s => s.siteId)));
+	let expandedSectors = $state<Set<string>>(new Set());
+
+	function toggleSiteExpand(siteId: string) {
+		if (expandedSites.has(siteId)) {
+			expandedSites.delete(siteId);
+		} else {
+			expandedSites.add(siteId);
+		}
+		expandedSites = new Set(expandedSites); // Trigger reactivity
+	}
+
+	function toggleSectorExpand(siteId: string, sectorId: string) {
+		const key = `${siteId}:${sectorId}`;
+		if (expandedSectors.has(key)) {
+			expandedSectors.delete(key);
+		} else {
+			expandedSectors.add(key);
+		}
+		expandedSectors = new Set(expandedSectors); // Trigger reactivity
+	}
+
+	function getSectorKey(siteId: string, sectorId: string): string {
+		return `${siteId}:${sectorId}`;
+	}
+
+	function getCellKey(siteId: string, sectorId: string, band: number): string {
+		return `${siteId}:${sectorId}:${band}`;
+	}
+</script>
+
+<div class="site-tree">
+	<div class="tree-header">
+		<h6 class="mb-0">Site Selection</h6>
+	</div>
+
+	<div class="tree-content">
+		{#each sites as site}
+			{@const isSiteVisible = visibility.sites[site.siteId] ?? true}
+			{@const isSiteExpanded = expandedSites.has(site.siteId)}
+			
+			<div class="tree-site">
+				<!-- Site Level -->
+				<div class="tree-item site-item">
+					<button
+						class="expand-btn"
+						onclick={() => toggleSiteExpand(site.siteId)}
+						aria-label={isSiteExpanded ? 'Collapse' : 'Expand'}
+					>
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+							{#if isSiteExpanded}
+								<path d="M2 4l4 4 4-4z" />
+							{:else}
+								<path d="M4 2l4 4-4 4z" />
+							{/if}
+						</svg>
+					</button>
+
+					<input
+						type="checkbox"
+						class="form-check-input"
+						id="site-{site.siteId}"
+						checked={isSiteVisible}
+						onchange={() => onToggleSite(site.siteId)}
+					/>
+
+					<label class="tree-label" for="site-{site.siteId}">
+						<strong>{site.siteName}</strong>
+					</label>
+				</div>
+
+				<!-- Sectors -->
+				{#if isSiteExpanded}
+					<div class="tree-children">
+						{#each site.sectors as sector}
+							{@const sectorKey = getSectorKey(site.siteId, sector.sectorId)}
+							{@const isSectorVisible = visibility.sectors[sectorKey] ?? true}
+							{@const isSectorExpanded = expandedSectors.has(sectorKey)}
+
+							<div class="tree-sector">
+								<!-- Sector Level -->
+								<div class="tree-item sector-item">
+									<button
+										class="expand-btn"
+										onclick={() => toggleSectorExpand(site.siteId, sector.sectorId)}
+										aria-label={isSectorExpanded ? 'Collapse' : 'Expand'}
+									>
+										<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+											{#if isSectorExpanded}
+												<path d="M2 4l4 4 4-4z" />
+											{:else}
+												<path d="M4 2l4 4-4 4z" />
+											{/if}
+										</svg>
+									</button>
+
+									<input
+										type="checkbox"
+										class="form-check-input"
+										id="sector-{sectorKey}"
+										checked={isSectorVisible}
+										onchange={() => onToggleSector(site.siteId, sector.sectorId)}
+									/>
+
+									<label class="tree-label" for="sector-{sectorKey}">
+										{sector.sectorName}
+									</label>
+								</div>
+
+								<!-- Cells (Frequency Bands) -->
+								{#if isSectorExpanded}
+									<div class="tree-children">
+										{#each sector.cells as cell}
+											{@const cellKey = getCellKey(site.siteId, sector.sectorId, cell.band)}
+											{@const isCellVisible = visibility.cells[cellKey] ?? true}
+
+											<div class="tree-item cell-item">
+												<span class="expand-spacer"></span>
+
+												<input
+													type="checkbox"
+													class="form-check-input"
+													id="cell-{cellKey}"
+													checked={isCellVisible}
+													onchange={() => onToggleCell(site.siteId, sector.sectorId, cell.band)}
+												/>
+
+												<label class="tree-label" for="cell-{cellKey}">
+													<span
+														class="band-indicator"
+														style:background-color={getBandColor(cell.band)}
+													></span>
+													{getBandLabel(cell.band)}
+												</label>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.site-tree {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #f8f9fa;
+		border-right: 1px solid #dee2e6;
+	}
+
+	.tree-header {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #fff;
+	}
+
+	.tree-content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.5rem;
+	}
+
+	.tree-site {
+		margin-bottom: 0.5rem;
+	}
+
+	.tree-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s ease;
+	}
+
+	.tree-item:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+
+	.site-item {
+		font-size: 0.95rem;
+	}
+
+	.sector-item {
+		font-size: 0.9rem;
+		margin-left: 1rem;
+	}
+
+	.cell-item {
+		font-size: 0.85rem;
+		margin-left: 2rem;
+	}
+
+	.expand-btn {
+		background: none;
+		border: none;
+		padding: 0;
+		width: 1rem;
+		height: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		color: #6c757d;
+		flex-shrink: 0;
+	}
+
+	.expand-btn:hover {
+		color: #495057;
+	}
+
+	.expand-spacer {
+		width: 1rem;
+		flex-shrink: 0;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		flex-shrink: 0;
+		margin: 0;
+	}
+
+	.tree-label {
+		cursor: pointer;
+		margin: 0;
+		user-select: none;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.tree-children {
+		margin-top: 0.25rem;
+	}
+
+	.band-indicator {
+		display: inline-block;
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 50%;
+		flex-shrink: 0;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	/* Scrollbar styling */
+	.tree-content::-webkit-scrollbar {
+		width: 0.5rem;
+	}
+
+	.tree-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 0.25rem;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

package/dist/cellular/SiteTree.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CellularSite, VisibilityState } from './cellular.model.js';
+interface Props {
+    sites: CellularSite[];
+    visibility: VisibilityState;
+    onToggleSite: (siteId: string) => void;
+    onToggleSector: (siteId: string, sectorId: string) => void;
+    onToggleCell: (siteId: string, sectorId: string, band: number) => void;
+}
+declare const SiteTree: import("svelte").Component<Props, {}, "">;
+type SiteTree = ReturnType<typeof SiteTree>;
+export default SiteTree;

package/dist/cellular/cellular-transforms.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Cellular Data Transformation Utilities
+ *
+ * These functions transform cellular site data into formats needed by TreeChartView.
+ * This is consumer-specific logic, not part of the generic library.
+ */
+import type { CellularSite, CellLine } from './cellular.model';
+import type { TreeNode } from '../core/TreeView/tree.model';
+import type { Layout } from '../core/Charts/charts.model';
+/**
+ * Transform cellular sites into TreeNode structure
+ */
+export declare function cellularSitesToTreeNodes(sites: CellularSite[]): TreeNode[];
+/**
+ * Flatten cellular sites into cell lines with visibility
+ */
+export declare function flattenCellularSites(sites: CellularSite[], checkedPaths: Set<string>): CellLine[];
+/**
+ * Transform cell lines into chart data format
+ */
+export declare function cellLinesToChartData(cellLines: CellLine[]): any[];
+/**
+ * Build chart layout from cell lines
+ */
+export declare function buildCellularChartLayout(cellLines: CellLine[]): Layout;

package/dist/cellular/cellular-transforms.js

@@ -0,0 +1,129 @@
+/**
+ * Cellular Data Transformation Utilities
+ *
+ * These functions transform cellular site data into formats needed by TreeChartView.
+ * This is consumer-specific logic, not part of the generic library.
+ */
+import { getBandColor, getBandLabel } from './mock-cellular-data';
+/**
+ * Transform cellular sites into TreeNode structure
+ */
+export function cellularSitesToTreeNodes(sites) {
+    return sites.map(site => ({
+        id: site.siteId,
+        label: site.siteName,
+        icon: '📡',
+        defaultExpanded: false,
+        defaultChecked: true,
+        children: site.sectors.map(sector => ({
+            id: sector.sectorId,
+            label: sector.sectorName,
+            icon: '📶',
+            defaultExpanded: false,
+            defaultChecked: true,
+            children: sector.cells.map(cell => ({
+                id: String(cell.band),
+                label: getBandLabel(cell.band),
+                icon: '📻',
+                defaultChecked: true,
+                metadata: {
+                    band: cell.band,
+                    color: getBandColor(cell.band)
+                }
+            }))
+        }))
+    }));
+}
+/**
+ * Flatten cellular sites into cell lines with visibility
+ */
+export function flattenCellularSites(sites, checkedPaths) {
+    const lines = [];
+    sites.forEach(site => {
+        site.sectors.forEach(sector => {
+            sector.cells.forEach(cell => {
+                // Path construction matches tree-utils.ts flattenTree logic
+                const cellKey = `${site.siteId}:${sector.sectorId}:${cell.band}`;
+                const isVisible = checkedPaths.has(cellKey);
+                lines.push({
+                    siteId: site.siteId,
+                    siteName: site.siteName,
+                    sectorId: sector.sectorId,
+                    sectorName: sector.sectorName,
+                    cellId: cell.cellId,
+                    band: cell.band,
+                    label: `${site.siteName} - ${sector.sectorName} - ${getBandLabel(cell.band)}`,
+                    color: getBandColor(cell.band),
+                    kpis: cell.kpis,
+                    visible: isVisible
+                });
+            });
+        });
+    });
+    return lines;
+}
+/**
+ * Transform cell lines into chart data format
+ */
+export function cellLinesToChartData(cellLines) {
+    const data = [];
+    cellLines.forEach(line => {
+        const timestamps = new Set(line.kpis.throughput.map(kpi => kpi.timestamp));
+        timestamps.forEach(timestamp => {
+            const throughputPoint = line.kpis.throughput.find(kpi => kpi.timestamp === timestamp);
+            const taPoint = line.kpis.timingAdvance.find(kpi => kpi.timestamp === timestamp);
+            if (throughputPoint && taPoint) {
+                data.push({
+                    TIMESTAMP: timestamp,
+                    [`DL_THROUGHPUT_${line.cellId}`]: throughputPoint.value,
+                    [`AVG_TA_${line.cellId}`]: taPoint.value,
+                    _cellId: line.cellId,
+                    _label: line.label,
+                    _color: line.color
+                });
+            }
+        });
+    });
+    return data;
+}
+/**
+ * Build chart layout from cell lines
+ */
+export function buildCellularChartLayout(cellLines) {
+    const throughputKPIs = cellLines.map(line => ({
+        rawName: `DL_THROUGHPUT_${line.cellId}`,
+        name: line.label,
+        scale: 'absolute',
+        unit: 'Mbps',
+        color: line.color
+    }));
+    const taKPIs = cellLines.map(line => ({
+        rawName: `AVG_TA_${line.cellId}`,
+        name: line.label,
+        scale: 'absolute',
+        unit: 'μs',
+        color: line.color
+    }));
+    return {
+        layoutName: 'Cellular Network KPIs',
+        sections: [
+            {
+                id: 'cellular-kpis',
+                title: 'Network Performance',
+                grid: '1x2',
+                charts: [
+                    {
+                        title: 'Downlink Throughput',
+                        yLeft: throughputKPIs,
+                        yRight: []
+                    },
+                    {
+                        title: 'Average Timing Advance',
+                        yLeft: taKPIs,
+                        yRight: []
+                    }
+                ]
+            }
+        ]
+    };
+}

package/dist/cellular/cellular.model.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Cellular Network Data Models
+ *
+ * Represents hierarchical structure: Site → Sector → Cell (per frequency band)
+ */
+export type FrequencyBand = 700 | 800 | 900 | 1800 | 2100 | 2600 | 3500;
+export interface KPIData {
+    timestamp: string;
+    value: number;
+}
+export interface CellKPIs {
+    throughput: KPIData[];
+    timingAdvance: KPIData[];
+    [key: string]: KPIData[];
+}
+export interface Cell {
+    cellId: string;
+    band: FrequencyBand;
+    kpis: CellKPIs;
+}
+export interface Sector {
+    sectorId: string;
+    sectorName: string;
+    azimuth?: number;
+    cells: Cell[];
+}
+export interface CellularSite {
+    siteId: string;
+    siteName: string;
+    sectors: Sector[];
+}
+/**
+ * Flattened view of a cell for chart rendering
+ * Includes full hierarchy path and visibility state
+ */
+export interface CellLine {
+    siteId: string;
+    siteName: string;
+    sectorId: string;
+    sectorName: string;
+    cellId: string;
+    band: FrequencyBand;
+    label: string;
+    color?: string;
+    kpis: CellKPIs;
+    visible: boolean;
+}
+/**
+ * Visibility state for hierarchical control
+ */
+export interface VisibilityState {
+    sites: Record<string, boolean>;
+    sectors: Record<string, boolean>;
+    cells: Record<string, boolean>;
+}
+/**
+ * Configuration for cellular charts view
+ */
+export interface CellularChartsConfig {
+    sites: CellularSite[];
+    kpis: string[];
+    colorScheme?: 'by-band' | 'by-site' | 'unique';
+}

package/dist/cellular/cellular.model.js

@@ -0,0 +1,6 @@
+/**
+ * Cellular Network Data Models
+ *
+ * Represents hierarchical structure: Site → Sector → Cell (per frequency band)
+ */
+export {};

package/dist/cellular/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Cellular Network Visualization Library
+ *
+ * Provides components for visualizing cellular site data with hierarchical
+ * site/sector/cell selection and KPI charting.
+ */
+export { default as CellularChartsView } from './CellularChartsView.svelte';
+export { default as SiteTree } from './SiteTree.svelte';
+export * from './cellular.model.js';
+export * from './mock-cellular-data.js';
+export * from './cellular-transforms.js';

package/dist/cellular/index.js

@@ -0,0 +1,11 @@
+/**
+ * Cellular Network Visualization Library
+ *
+ * Provides components for visualizing cellular site data with hierarchical
+ * site/sector/cell selection and KPI charting.
+ */
+export { default as CellularChartsView } from './CellularChartsView.svelte';
+export { default as SiteTree } from './SiteTree.svelte';
+export * from './cellular.model.js';
+export * from './mock-cellular-data.js';
+export * from './cellular-transforms.js';

package/dist/cellular/mock-cellular-data.d.ts

@@ -0,0 +1,13 @@
+import type { CellularSite, FrequencyBand } from './cellular.model.js';
+/**
+ * Generate mock cellular sites for testing
+ */
+export declare function generateMockCellularData(): CellularSite[];
+/**
+ * Get color for frequency band (consistent color scheme)
+ */
+export declare function getBandColor(band: FrequencyBand): string;
+/**
+ * Get label for frequency band
+ */
+export declare function getBandLabel(band: FrequencyBand): string;