@smartnet360/svelte-components 0.0.22 → 0.0.23

package/dist/cellular/mock-cellular-data.js

@@ -0,0 +1,241 @@
+/**
+ * Generate realistic time series data for testing
+ */
+function generateTimeSeries(startDate, points, baseValue, variance, intervalMinutes = 15) {
+    const data = [];
+    const current = new Date(startDate);
+    for (let i = 0; i < points; i++) {
+        const noise = (Math.random() - 0.5) * variance;
+        const trend = Math.sin((i / points) * Math.PI * 2) * (variance / 2); // Sinusoidal pattern
+        const value = Math.max(0, baseValue + noise + trend);
+        data.push({
+            timestamp: current.toISOString(),
+            value: Math.round(value * 100) / 100 // Round to 2 decimals
+        });
+        current.setMinutes(current.getMinutes() + intervalMinutes);
+    }
+    return data;
+}
+/**
+ * Get base throughput value for a frequency band (Mbps)
+ */
+function getThroughputBase(band) {
+    const baseValues = {
+        700: 30,
+        800: 35,
+        900: 40,
+        1800: 60,
+        2100: 80,
+        2600: 100,
+        3500: 150 // C-Band
+    };
+    return baseValues[band];
+}
+/**
+ * Get base timing advance value for a frequency band (microseconds)
+ */
+function getTimingAdvanceBase(band) {
+    // Lower frequency = larger cell = higher TA
+    const baseValues = {
+        700: 8.5,
+        800: 7.8,
+        900: 7.2,
+        1800: 5.5,
+        2100: 4.8,
+        2600: 4.2,
+        3500: 3.5
+    };
+    return baseValues[band];
+}
+/**
+ * Generate a single cell with KPI data
+ */
+function generateCell(siteId, sectorId, band, startDate, points = 96 // 24 hours at 15-min intervals
+) {
+    const cellId = `${siteId}-${sectorId}-${band}`;
+    return {
+        cellId,
+        band,
+        kpis: {
+            throughput: generateTimeSeries(startDate, points, getThroughputBase(band), getThroughputBase(band) * 0.3, // 30% variance
+            15),
+            timingAdvance: generateTimeSeries(startDate, points, getTimingAdvanceBase(band), 1.5, // ±1.5 μs variance
+            15)
+        }
+    };
+}
+/**
+ * Generate mock cellular sites for testing
+ */
+export function generateMockCellularData() {
+    const startDate = new Date('2025-10-09T00:00:00Z');
+    const points = 96; // 24 hours of data
+    return [
+        // Site A - Urban, 3 sectors, multiple bands
+        {
+            siteId: 'site-a',
+            siteName: 'Site A (Urban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-a', 'sec-1', 700, startDate, points),
+                        generateCell('site-a', 'sec-1', 2100, startDate, points),
+                        generateCell('site-a', 'sec-1', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 120,
+                    cells: [
+                        generateCell('site-a', 'sec-2', 700, startDate, points),
+                        generateCell('site-a', 'sec-2', 1800, startDate, points),
+                        generateCell('site-a', 'sec-2', 2100, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 240,
+                    cells: [
+                        generateCell('site-a', 'sec-3', 1800, startDate, points),
+                        generateCell('site-a', 'sec-3', 2600, startDate, points),
+                        generateCell('site-a', 'sec-3', 3500, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site B - Suburban, 2 sectors, fewer bands
+        {
+            siteId: 'site-b',
+            siteName: 'Site B (Suburban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-b', 'sec-1', 800, startDate, points),
+                        generateCell('site-b', 'sec-1', 2100, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 180,
+                    cells: [
+                        generateCell('site-b', 'sec-2', 800, startDate, points),
+                        generateCell('site-b', 'sec-2', 1800, startDate, points),
+                        generateCell('site-b', 'sec-2', 2600, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site C - Rural, 4 sectors, low-band focus
+        {
+            siteId: 'site-c',
+            siteName: 'Site C (Rural)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-c', 'sec-1', 700, startDate, points),
+                        generateCell('site-c', 'sec-1', 900, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 90,
+                    cells: [
+                        generateCell('site-c', 'sec-2', 700, startDate, points),
+                        generateCell('site-c', 'sec-2', 1800, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 180,
+                    cells: [
+                        generateCell('site-c', 'sec-3', 800, startDate, points),
+                        generateCell('site-c', 'sec-3', 900, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-4',
+                    sectorName: 'Sector 4',
+                    azimuth: 270,
+                    cells: [
+                        generateCell('site-c', 'sec-4', 700, startDate, points),
+                        generateCell('site-c', 'sec-4', 2100, startDate, points)
+                    ]
+                }
+            ]
+        },
+        // Site D - Dense Urban, 3 sectors, high-band focus
+        {
+            siteId: 'site-d',
+            siteName: 'Site D (Dense Urban)',
+            sectors: [
+                {
+                    sectorId: 'sec-1',
+                    sectorName: 'Sector 1',
+                    azimuth: 0,
+                    cells: [
+                        generateCell('site-d', 'sec-1', 2100, startDate, points),
+                        generateCell('site-d', 'sec-1', 2600, startDate, points),
+                        generateCell('site-d', 'sec-1', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-2',
+                    sectorName: 'Sector 2',
+                    azimuth: 120,
+                    cells: [
+                        generateCell('site-d', 'sec-2', 1800, startDate, points),
+                        generateCell('site-d', 'sec-2', 2600, startDate, points),
+                        generateCell('site-d', 'sec-2', 3500, startDate, points)
+                    ]
+                },
+                {
+                    sectorId: 'sec-3',
+                    sectorName: 'Sector 3',
+                    azimuth: 240,
+                    cells: [
+                        generateCell('site-d', 'sec-3', 2100, startDate, points),
+                        generateCell('site-d', 'sec-3', 2600, startDate, points),
+                        generateCell('site-d', 'sec-3', 3500, startDate, points)
+                    ]
+                }
+            ]
+        }
+    ];
+}
+/**
+ * Get color for frequency band (consistent color scheme)
+ */
+export function getBandColor(band) {
+    const colors = {
+        700: '#e74c3c', // Red
+        800: '#e67e22', // Orange
+        900: '#f39c12', // Yellow-Orange
+        1800: '#3498db', // Blue
+        2100: '#9b59b6', // Purple
+        2600: '#1abc9c', // Teal
+        3500: '#2ecc71' // Green (C-Band)
+    };
+    return colors[band];
+}
+/**
+ * Get label for frequency band
+ */
+export function getBandLabel(band) {
+    if (band === 3500)
+        return `${band} MHz (C-Band)`;
+    return `${band} MHz`;
+}

package/dist/core/TreeChartView/TreeChartView.svelte

@@ -0,0 +1,208 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	/**
+	 * TreeChartView - Generic component combining TreeView with ChartComponent
+	 * 
+	 * This is a layout component that provides:
+	 * - Left sidebar with TreeView
+	 * - Right panel with ChartComponent
+	 * - Empty state handling
+	 * - Responsive layout
+	 * 
+	 * All data transformation logic should be done externally by the consumer.
+	 */
+	
+	import type { Layout } from '../Charts/charts.model.js';
+	import type { TreeStoreValue } from '../TreeView/tree.model.js';
+	import ChartComponent from '../Charts/ChartComponent.svelte';
+	import { TreeView } from '../TreeView/index.js';
+
+	interface Props {
+		/** Tree store (created externally with createTreeStore) */
+		treeStore: TreeStoreValue;
+		
+		/** Chart data array (consumer's responsibility to filter based on tree state) */
+		chartData: any[];
+		
+		/** Chart layout configuration */
+		chartLayout: Layout;
+		
+		/** Number of total selectable items */
+		totalItems: number;
+		
+		/** Number of currently visible items */
+		visibleItems: number;
+		
+		/** Chart area title */
+		title?: string;
+		
+		/** Chart display mode */
+		mode?: 'tabs' | 'scrollspy';
+		
+		/** Show global chart controls */
+		showGlobalControls?: boolean;
+		
+		/** Enable chart adaptation */
+		enableAdaptation?: boolean;
+		
+		/** Show tree controls (expand/collapse all, etc.) */
+		showTreeControls?: boolean;
+		
+		/** Tree sidebar width */
+		treeWidth?: string;
+		
+		/** Empty state message */
+		emptyMessage?: string;
+	}
+
+	let {
+		treeStore,
+		chartData,
+		chartLayout,
+		totalItems,
+		visibleItems,
+		title = 'Charts',
+		mode = 'tabs',
+		showGlobalControls = true,
+		enableAdaptation = true,
+		showTreeControls = true,
+		treeWidth = '300px',
+		emptyMessage = 'No items selected. Select items from the tree on the left to display charts.'
+	}: Props = $props();
+</script>
+
+<div class="tree-chart-view">
+	<!-- Left: Tree Selector -->
+	<aside class="tree-sidebar" style:width={treeWidth}>
+		<TreeView 
+			store={treeStore} 
+			showControls={showTreeControls} 
+			height="100%" 
+		/>
+	</aside>
+
+	<!-- Right: Charts Area -->
+	<main class="charts-area">
+		<div class="charts-header">
+			<h5 class="mb-0">{title}</h5>
+			<div class="stats">
+				<span class="badge bg-primary">
+					{visibleItems} of {totalItems} selected
+				</span>
+			</div>
+		</div>
+
+		<div class="charts-container">
+			{#if visibleItems === 0}
+				<div class="empty-state">
+					<div class="empty-state-content">
+						<i class="bi bi-info-circle" style="font-size: 3rem; color: #6c757d;"></i>
+						<h4 class="mt-3">No Items Selected</h4>
+						<p class="text-muted">
+							{emptyMessage}
+						</p>
+					</div>
+				</div>
+			{:else}
+				<ChartComponent
+					layout={chartLayout}
+					data={chartData}
+					{mode}
+					{showGlobalControls}
+					{enableAdaptation}
+				/>
+			{/if}
+		</div>
+	</main>
+</div>
+
+<style>
+	.tree-chart-view {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		gap: 0;
+		background-color: #fff;
+	}
+
+	.tree-sidebar {
+		flex-shrink: 0;
+		height: 100%;
+		overflow: hidden;
+		border-right: 1px solid #dee2e6;
+	}
+
+	.charts-area {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		height: 100%;
+	}
+
+	.charts-header {
+		padding: 1rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #f8f9fa;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.charts-header h5 {
+		margin: 0;
+		color: #495057;
+	}
+
+	.stats {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.charts-container {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	.empty-state-content {
+		text-align: center;
+		max-width: 400px;
+		padding: 2rem;
+	}
+
+	.empty-state-content h4 {
+		color: #495057;
+		margin-bottom: 0.5rem;
+	}
+
+	/* Responsive layout */
+	@media (max-width: 992px) {
+		.tree-sidebar {
+			width: 250px !important;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.tree-chart-view {
+			flex-direction: column;
+		}
+
+		.tree-sidebar {
+			width: 100% !important;
+			height: 300px;
+			border-right: none;
+			border-bottom: 1px solid #dee2e6;
+		}
+	}
+</style>

package/dist/core/TreeChartView/TreeChartView.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+     * TreeChartView - Generic component combining TreeView with ChartComponent
+     *
+     * This is a layout component that provides:
+     * - Left sidebar with TreeView
+     * - Right panel with ChartComponent
+     * - Empty state handling
+     * - Responsive layout
+     *
+     * All data transformation logic should be done externally by the consumer.
+     */
+import type { Layout } from '../Charts/charts.model.js';
+import type { TreeStoreValue } from '../TreeView/tree.model.js';
+interface Props {
+    /** Tree store (created externally with createTreeStore) */
+    treeStore: TreeStoreValue;
+    /** Chart data array (consumer's responsibility to filter based on tree state) */
+    chartData: any[];
+    /** Chart layout configuration */
+    chartLayout: Layout;
+    /** Number of total selectable items */
+    totalItems: number;
+    /** Number of currently visible items */
+    visibleItems: number;
+    /** Chart area title */
+    title?: string;
+    /** Chart display mode */
+    mode?: 'tabs' | 'scrollspy';
+    /** Show global chart controls */
+    showGlobalControls?: boolean;
+    /** Enable chart adaptation */
+    enableAdaptation?: boolean;
+    /** Show tree controls (expand/collapse all, etc.) */
+    showTreeControls?: boolean;
+    /** Tree sidebar width */
+    treeWidth?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare const TreeChartView: import("svelte").Component<Props, {}, "">;
+type TreeChartView = ReturnType<typeof TreeChartView>;
+export default TreeChartView;

package/dist/core/TreeChartView/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TreeChartView - Combined Layout Component
+ *
+ * Provides a split-screen layout combining TreeView (left) with ChartComponent (right).
+ * This is a LAYOUT component - all data transformation is the consumer's responsibility.
+ */
+export { default as TreeChartView } from './TreeChartView.svelte';

package/dist/core/TreeChartView/index.js

@@ -0,0 +1,7 @@
+/**
+ * TreeChartView - Combined Layout Component
+ *
+ * Provides a split-screen layout combining TreeView (left) with ChartComponent (right).
+ * This is a LAYOUT component - all data transformation is the consumer's responsibility.
+ */
+export { default as TreeChartView } from './TreeChartView.svelte';

package/dist/core/TreeView/TreeNode.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import type { NodeState, TreeStoreValue } from './tree.model';
+	import TreeNode from './TreeNode.svelte';
+
+	interface Props {
+		nodeState: NodeState;
+		store: TreeStoreValue;
+		showIndeterminate?: boolean;
+	}
+
+	let { nodeState, store, showIndeterminate = true }: Props = $props();
+
+	// Computed states
+	let isChecked = $derived(store.state.checkedPaths.has(nodeState.path));
+	let isIndeterminate = $derived(
+		showIndeterminate && store.state.indeterminatePaths.has(nodeState.path)
+	);
+	let isExpanded = $derived(store.state.expandedPaths.has(nodeState.path));
+	let hasChildren = $derived(nodeState.childPaths.length > 0);
+
+	// Get child node states
+	let childNodes = $derived(
+		nodeState.childPaths
+			.map(path => store.state.nodes.get(path))
+			.filter((node): node is NodeState => node !== undefined)
+	);
+
+	// Indentation based on level
+	let indentStyle = $derived(`padding-left: ${nodeState.level * 1.5}rem`);
+
+	function handleToggle() {
+		store.toggle(nodeState.path);
+	}
+
+	function handleExpandToggle() {
+		if (hasChildren) {
+			store.toggleExpand(nodeState.path);
+		}
+	}
+</script>
+
+<div class="tree-node" style={indentStyle}>
+	<div class="tree-node-content">
+		<!-- Expand/Collapse Button -->
+		{#if hasChildren}
+			<button
+				type="button"
+				class="btn btn-sm btn-link expand-toggle p-0"
+				onclick={handleExpandToggle}
+				aria-label={isExpanded ? 'Collapse' : 'Expand'}
+			>
+				{#if isExpanded}
+					<i class="bi bi-chevron-down"></i>
+				{:else}
+					<i class="bi bi-chevron-right"></i>
+				{/if}
+			</button>
+		{:else}
+			<span class="expand-placeholder"></span>
+		{/if}
+
+		<!-- Checkbox -->
+		<div class="form-check">
+			<input
+				type="checkbox"
+				class="form-check-input"
+				class:indeterminate={isIndeterminate}
+				checked={isChecked}
+				indeterminate={isIndeterminate}
+				onchange={handleToggle}
+				id={`checkbox-${nodeState.path}`}
+			/>
+			<label class="form-check-label" for={`checkbox-${nodeState.path}`}>
+				{#if nodeState.node.icon}
+					<span class="node-icon">{nodeState.node.icon}</span>
+				{/if}
+				<span class="node-label">{nodeState.node.label}</span>
+			</label>
+		</div>
+	</div>
+
+	<!-- Recursive Children -->
+	{#if hasChildren && isExpanded}
+		<div class="tree-node-children">
+			{#each childNodes as childNode (childNode.path)}
+				<TreeNode nodeState={childNode} {store} {showIndeterminate} />
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tree-node {
+		position: relative;
+	}
+
+	.tree-node-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0;
+		min-height: 2rem;
+	}
+
+	.expand-toggle {
+		width: 1.5rem;
+		height: 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: #6c757d;
+		text-decoration: none;
+	}
+
+	.expand-toggle:hover {
+		color: #495057;
+		background-color: #f8f9fa;
+		border-radius: 0.25rem;
+	}
+
+	.expand-toggle:focus {
+		outline: 2px solid #0d6efd;
+		outline-offset: 2px;
+	}
+
+	.expand-placeholder {
+		width: 1.5rem;
+		height: 1.5rem;
+		display: inline-block;
+	}
+
+	.form-check {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		margin: 0;
+		flex-shrink: 0;
+	}
+
+	/* Indeterminate checkbox styling */
+	.form-check-input.indeterminate {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+	}
+
+	.form-check-label {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+		user-select: none;
+	}
+
+	.node-icon {
+		font-size: 1.1rem;
+		line-height: 1;
+	}
+
+	.node-label {
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+</style>

package/dist/core/TreeView/TreeNode.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NodeState, TreeStoreValue } from './tree.model';
+import TreeNode from './TreeNode.svelte';
+interface Props {
+    nodeState: NodeState;
+    store: TreeStoreValue;
+    showIndeterminate?: boolean;
+}
+declare const TreeNode: import("svelte").Component<Props, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;