@smartnet360/svelte-components 0.0.115 → 0.0.116

package/dist/core/CellTable/CellTable.svelte

@@ -10,6 +10,7 @@
 		RowSelectionEvent,
 		RowClickEvent,
 		RowDblClickEvent,
+		RowContextMenuEvent,
 		DataChangeEvent
 	} from './types';
 	import {
@@ -34,6 +35,8 @@
 		onrowclick?: (event: RowClickEvent) => void;
 		/** Row double-click event */
 		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Row context menu (right-click) event */
+		onrowcontextmenu?: (event: RowContextMenuEvent) => void;
 		/** Data change event (filter, sort, etc.) */
 		ondatachange?: (event: DataChangeEvent) => void;
 	}
@@ -58,6 +61,7 @@
 		onselectionchange,
 		onrowclick,
 		onrowdblclick,
+		onrowcontextmenu,
 		ondatachange
 	}: Props = $props();
 
@@ -152,6 +156,16 @@
 			}
 		});
 
+		table.on('rowContext', (e, row) => {
+			if (onrowcontextmenu) {
+				(e as MouseEvent).preventDefault();
+				onrowcontextmenu({
+					row: (row as RowComponent).getData() as CellData,
+					event: e as MouseEvent
+				});
+			}
+		});
+
 		table.on('rowSelectionChanged', (data, rows) => {
 			if (onselectionchange) {
 				const cellData = data as CellData[];

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

@@ -1,6 +1,6 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
-import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent } from './types';
+import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent } from './types';
 interface Props extends CellTableProps {
     /** Row selection change event */
     onselectionchange?: (event: RowSelectionEvent) => void;
@@ -8,6 +8,8 @@ interface Props extends CellTableProps {
     onrowclick?: (event: RowClickEvent) => void;
     /** Row double-click event */
     onrowdblclick?: (event: RowDblClickEvent) => void;
+    /** Row context menu (right-click) event */
+    onrowcontextmenu?: (event: RowContextMenuEvent) => void;
     /** Data change event (filter, sort, etc.) */
     ondatachange?: (event: DataChangeEvent) => void;
 }

package/dist/core/CellTable/CellTableDemo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CellTablePanel from './CellTablePanel.svelte';
-	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent } from './types';
+	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent, CellData } from './types';
 	import { generateCellsFromPreset, getGeneratorInfo, type GeneratorPreset } from '../../shared/demo';
 
 	let datasetSize: GeneratorPreset = $state('small');
@@ -42,6 +42,29 @@
 		console.log('Selection changed:', event.ids);
 	}
 	
+	// Context menu action handlers
+	function handleViewCell(cell: CellData) {
+		console.log('View cell:', cell.id, cell.cellName);
+		alert(`Viewing cell: ${cell.cellName}`);
+	}
+	
+	function handleEditCell(cell: CellData) {
+		console.log('Edit cell:', cell.id, cell.cellName);
+		alert(`Edit cell: ${cell.cellName}`);
+	}
+	
+	function handleDeleteCell(cell: CellData) {
+		console.log('Delete cell:', cell.id, cell.cellName);
+		if (confirm(`Delete cell ${cell.cellName}?`)) {
+			demoCells = demoCells.filter(c => c.id !== cell.id);
+		}
+	}
+	
+	function handleShowOnMap(cell: CellData) {
+		console.log('Show on map:', cell.latitude, cell.longitude);
+		alert(`Show on map: ${cell.cellName}\nLat: ${cell.latitude}\nLon: ${cell.longitude}`);
+	}
+	
 	function regenerateData() {
 		demoCells = generateCellsFromPreset(datasetSize);
 	}
@@ -242,6 +265,28 @@
 					</div>
 				</div>
 			{/snippet}
+
+			{#snippet contextMenu({ row, closeMenu })}
+				<div class="dropdown-menu show shadow-lg" style="min-width: 180px;">
+					<h6 class="dropdown-header text-truncate" style="max-width: 200px;">
+						<i class="bi bi-broadcast me-1"></i>{row.cellName}
+					</h6>
+					<div class="dropdown-divider"></div>
+					<button class="dropdown-item" onclick={() => { handleViewCell(row); closeMenu(); }}>
+						<i class="bi bi-eye me-2 text-primary"></i>View Details
+					</button>
+					<button class="dropdown-item" onclick={() => { handleEditCell(row); closeMenu(); }}>
+						<i class="bi bi-pencil me-2 text-warning"></i>Edit Cell
+					</button>
+					<button class="dropdown-item" onclick={() => { handleShowOnMap(row); closeMenu(); }}>
+						<i class="bi bi-geo-alt me-2 text-info"></i>Show on Map
+					</button>
+					<div class="dropdown-divider"></div>
+					<button class="dropdown-item text-danger" onclick={() => { handleDeleteCell(row); closeMenu(); }}>
+						<i class="bi bi-trash me-2"></i>Delete Cell
+					</button>
+				</div>
+			{/snippet}
 		</CellTablePanel>
 	</div>
 </div>

package/dist/core/CellTable/CellTablePanel.svelte

@@ -10,6 +10,7 @@
 		RowSelectionEvent,
 		RowClickEvent,
 		RowDblClickEvent,
+		RowContextMenuEvent,
 		DataChangeEvent,
 		TechColorMap,
 		StatusColorMap
@@ -68,6 +69,8 @@
 		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
 		/** Custom details sidebar content */
 		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
+		/** Custom context menu content (right-click on row) */
+		contextMenu?: Snippet<[{ row: CellData; closeMenu: () => void }]>;
 	}
 
 	let {
@@ -96,9 +99,15 @@
 		headerSearch,
 		headerActions,
 		footer,
-		detailsContent
+		detailsContent,
+		contextMenu
 	}: Props = $props();
 
+	// Context menu state
+	let contextMenuVisible = $state(false);
+	let contextMenuRow: CellData | null = $state(null);
+	let contextMenuPosition = $state({ x: 0, y: 0 });
+
 	// Storage keys
 	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
 	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
@@ -239,6 +248,26 @@
 		updateScrollSpyGroups();
 	}
 
+	function handleRowContextMenu(event: RowContextMenuEvent) {
+		if (contextMenu) {
+			contextMenuRow = event.row;
+			contextMenuPosition = { x: event.event.clientX, y: event.event.clientY };
+			contextMenuVisible = true;
+		}
+	}
+
+	function closeContextMenu() {
+		contextMenuVisible = false;
+		contextMenuRow = null;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.context-menu-container')) {
+			closeContextMenu();
+		}
+	}
+
 	function updateScrollSpyGroups() {
 		if (scrollSpyEnabled && groupBy !== 'none') {
 			// Small delay to ensure table has updated
@@ -477,6 +506,7 @@
 				onselectionchange={handleSelectionChange}
 				ondatachange={handleDataChange}
 				onrowclick={handleRowClick}
+				onrowcontextmenu={handleRowContextMenu}
 				{onrowdblclick}
 			/>
 		</div>
@@ -617,8 +647,21 @@
 			{@render footer({ selectedRows, selectedCount })}
 		</div>
 	{/if}
+
+	<!-- Context Menu (portal-like, fixed position) -->
+	{#if contextMenuVisible && contextMenuRow && contextMenu}
+		<div 
+			class="context-menu-container"
+			style="position: fixed; left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px; z-index: 1050;"
+		>
+			{@render contextMenu({ row: contextMenuRow, closeMenu: closeContextMenu })}
+		</div>
+	{/if}
 </div>
 
+<!-- Click outside handler -->
+<svelte:window onclick={contextMenuVisible ? handleClickOutside : undefined} />
+
 <style>
 	.cell-table-panel {
 		background-color: var(--bs-body-bg, #fff);
@@ -694,4 +737,20 @@
 	.scrollspy-badge:active {
 		transform: translateY(0);
 	}
+
+	/* Context menu styling */
+	.context-menu-container {
+		animation: contextMenuFadeIn 0.1s ease-out;
+	}
+
+	@keyframes contextMenuFadeIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
 </style>

package/dist/core/CellTable/CellTablePanel.svelte.d.ts

@@ -61,6 +61,11 @@ interface Props {
         cell: CellData | null;
         closeSidebar: () => void;
     }]>;
+    /** Custom context menu content (right-click on row) */
+    contextMenu?: Snippet<[{
+        row: CellData;
+        closeMenu: () => void;
+    }]>;
 }
 declare const CellTablePanel: import("svelte").Component<Props, {
     getSelectedRows: () => CellData[];

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -100,7 +100,8 @@
 		{ value: 'physical', label: 'Physical' },
 		{ value: 'network', label: 'Network' },
 		{ value: 'planning', label: 'Planning' },
-		{ value: 'compare', label: 'Compare (Atoll/Nwt)' }
+		{ value: 'compare', label: 'Compare (Atoll/NW)' },
+		{ value: 'kpi', label: 'KPI Trends' }
 	];
 
 	function handleGroupChange(e: Event) {

package/dist/core/CellTable/column-config.d.ts

@@ -61,6 +61,23 @@ export declare function heightFormatter(cell: CellComponent): string;
  * - Gray: one or both values missing
  */
 export declare function createCompareFormatter(atollField: string, nwtField: string): (cell: CellComponent) => string;
+/**
+ * Creates a sparkline SVG formatter for KPI time-series data
+ * Renders a mini line chart showing trend over time
+ *
+ * @param options Configuration for the sparkline
+ */
+export interface SparklineOptions {
+    width?: number;
+    height?: number;
+    lineColor?: string;
+    fillColor?: string;
+    showDots?: boolean;
+    showLastValue?: boolean;
+    unit?: string;
+    decimals?: number;
+}
+export declare function createSparklineFormatter(options?: SparklineOptions): (cell: CellComponent) => string;
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500

package/dist/core/CellTable/column-config.js

@@ -60,6 +60,7 @@ export const COLUMN_GROUPS = {
     atoll: ['atollET', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
     compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
+    kpi: ['kpiTraffic', 'kpiThroughput', 'kpiAvailability', 'kpiSuccessRate'],
 };
 /**
  * Create a technology badge formatter
@@ -166,6 +167,55 @@ export function createCompareFormatter(atollField, nwtField) {
         return `<span class="badge" style="background-color: ${bgColor}; color: ${textColor}; font-size: 0.75rem; font-weight: normal;">${atollStr} | ${nwtStr}</span>`;
     };
 }
+export function createSparklineFormatter(options = {}) {
+    const { width = 80, height = 24, lineColor = '#0d6efd', fillColor = 'rgba(13,110,253,0.2)', showDots = false, showLastValue = true, unit = '', decimals = 1 } = options;
+    return (cell) => {
+        const data = cell.getValue();
+        if (!data || !Array.isArray(data) || data.length === 0) {
+            return '<span class="text-muted">—</span>';
+        }
+        const values = data.filter(v => typeof v === 'number' && !isNaN(v));
+        if (values.length === 0) {
+            return '<span class="text-muted">—</span>';
+        }
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const range = max - min || 1;
+        const padding = 2;
+        const chartWidth = showLastValue ? width - 35 : width - 4;
+        const chartHeight = height - 4;
+        // Generate SVG path
+        const points = values.map((v, i) => {
+            const x = padding + (i / (values.length - 1 || 1)) * (chartWidth - padding * 2);
+            const y = padding + (1 - (v - min) / range) * (chartHeight - padding * 2);
+            return { x, y, v };
+        });
+        // Line path
+        const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');
+        // Fill path (closed polygon)
+        const fillPath = `${linePath} L ${points[points.length - 1].x.toFixed(1)} ${chartHeight - padding} L ${padding} ${chartHeight - padding} Z`;
+        // Dots
+        const dots = showDots
+            ? points.map(p => `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="1.5" fill="${lineColor}"/>`).join('')
+            : '';
+        // Last value text
+        const lastValue = values[values.length - 1];
+        const valueText = showLastValue
+            ? `<text x="${width - 2}" y="${height / 2 + 4}" text-anchor="end" font-size="10" fill="#333">${lastValue.toFixed(decimals)}${unit}</text>`
+            : '';
+        // Trend indicator (comparing last vs first)
+        const trend = values.length > 1 ? values[values.length - 1] - values[0] : 0;
+        const trendColor = trend >= 0 ? '#198754' : '#dc3545';
+        return `
+			<svg width="${width}" height="${height}" style="vertical-align: middle;">
+				<path d="${fillPath}" fill="${fillColor}" />
+				<path d="${linePath}" fill="none" stroke="${lineColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				${dots}
+				${valueText}
+			</svg>
+		`.trim().replace(/\s+/g, ' ');
+    };
+}
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
@@ -455,6 +505,63 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: createCompareFormatter('atollBW', 'nwBW'),
             headerTooltip: 'Atoll BW | Network BW',
         },
+        // KPI Sparkline columns
+        {
+            title: 'Traffic',
+            field: 'kpiTraffic',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '',
+                lineColor: '#0d6efd',
+                fillColor: 'rgba(13,110,253,0.15)',
+                decimals: 0
+            }),
+            headerTooltip: 'Traffic volume trend (GB)',
+            headerSort: false,
+        },
+        {
+            title: 'Throughput',
+            field: 'kpiThroughput',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '',
+                lineColor: '#6f42c1',
+                fillColor: 'rgba(111,66,193,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Throughput trend (Mbps)',
+            headerSort: false,
+        },
+        {
+            title: 'Avail %',
+            field: 'kpiAvailability',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '%',
+                lineColor: '#198754',
+                fillColor: 'rgba(25,135,84,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Availability trend (%)',
+            headerSort: false,
+        },
+        {
+            title: 'Success %',
+            field: 'kpiSuccessRate',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '%',
+                lineColor: '#fd7e14',
+                fillColor: 'rgba(253,126,20,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Success rate trend (%)',
+            headerSort: false,
+        },
         // Position columns
         {
             title: 'Latitude',
@@ -549,6 +656,9 @@ export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, st
         case 'compare':
             visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
             break;
+        case 'kpi':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
+            break;
         case 'default':
         default:
             visibleFields = [
@@ -621,6 +731,11 @@ export function getColumnMetadata() {
         { field: 'comparePW', title: 'Δ PW', group: 'Compare' },
         { field: 'compareRS', title: 'Δ RS', group: 'Compare' },
         { field: 'compareBW', title: 'Δ BW', group: 'Compare' },
+        // KPI Trends
+        { field: 'kpiTraffic', title: 'Traffic', group: 'KPI' },
+        { field: 'kpiThroughput', title: 'Throughput', group: 'KPI' },
+        { field: 'kpiAvailability', title: 'Availability', group: 'KPI' },
+        { field: 'kpiSuccessRate', title: 'Success Rate', group: 'KPI' },
         // Position
         { field: 'latitude', title: 'Latitude', group: 'Position' },
         { field: 'longitude', title: 'Longitude', group: 'Position' },
@@ -651,6 +766,8 @@ export function getPresetVisibleFields(preset) {
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
         case 'compare':
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
+        case 'kpi':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
         case 'default':
         default:
             return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];

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

@@ -9,5 +9,5 @@ export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
 export { default as ColumnPicker } from './ColumnPicker.svelte';
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
-export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
+export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
 export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/types.d.ts

@@ -16,7 +16,7 @@ export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
  */
-export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare';
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare' | 'kpi';
 /**
  * Column visibility configuration
  */
@@ -93,6 +93,13 @@ export interface RowDblClickEvent {
     row: CellData;
     event: MouseEvent;
 }
+/**
+ * Row context menu (right-click) event data
+ */
+export interface RowContextMenuEvent {
+    row: CellData;
+    event: MouseEvent;
+}
 /**
  * Data change event data
  */
@@ -123,4 +130,5 @@ export interface ColumnGroups {
     atoll: string[];
     position: string[];
     compare: string[];
+    kpi: string[];
 }

package/dist/shared/demo/cell-generator.js

@@ -4,6 +4,21 @@
  * Generates realistic cell network data with configurable parameters.
  * Supports density zones, multiple technologies, and various site configurations.
  */
+/**
+ * Generate mock KPI time-series data
+ * Creates an array of values with realistic variation
+ */
+function generateMockKpiData(days, min, max, random) {
+    const data = [];
+    let current = min + random() * (max - min);
+    for (let i = 0; i < days; i++) {
+        // Add some realistic variation (±10%)
+        const variation = (random() - 0.5) * 0.2 * (max - min);
+        current = Math.max(min, Math.min(max, current + variation));
+        data.push(Math.round(current * 10) / 10);
+    }
+    return data;
+}
 /**
  * Preset configurations
  */
@@ -211,6 +226,11 @@ export function generateCells(config) {
                     pci: cellCounter % 504,
                     nwRS: 450.0,
                     nwBW: 10.0,
+                    // KPI time-series mock data (7 days)
+                    kpiTraffic: generateMockKpiData(7, 50, 200, random),
+                    kpiThroughput: generateMockKpiData(7, 20, 80, random),
+                    kpiAvailability: generateMockKpiData(7, 95, 100, random),
+                    kpiSuccessRate: generateMockKpiData(7, 90, 100, random),
                     other: {
                         city: ['Tehran', 'Shiraz', 'Isfahan', 'Mashhad', 'Tabriz'][siteNum % 5],
                         bcc: bandIndex % 8,

package/dist/shared/demo/cell-types.d.ts

@@ -45,6 +45,10 @@ export interface Cell {
     nwBW?: number;
     pci?: number;
     rru: string;
+    kpiTraffic?: number[];
+    kpiThroughput?: number[];
+    kpiAvailability?: number[];
+    kpiSuccessRate?: number[];
     other?: Record<string, unknown>;
     customSubgroup: string;
 }

package/package.json

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