@smartnet360/svelte-components 0.0.34 → 0.0.36

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

@@ -72,27 +72,76 @@ export function calculateMovingAverage(values, window) {
     maCache.set(cacheKey, result);
     return result;
 }
-export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0) {
+export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
-    return {
+    // Base trace configuration
+    const baseTrace = {
         x: timestamps,
         y: values,
-        type: 'scatter',
-        mode: 'lines', // Only lines, no markers
         name: kpi.name,
         yaxis: yaxis,
-        line: {
-            color: traceColor,
-            width: 3,
-            shape: 'spline',
-            smoothing: 0.3,
-            dash: yaxis === 'y1' ? 'solid' : 'dot' // Y1 = solid, Y2 = dotted
-        },
         hovertemplate: `<b>${kpi.name}</b><br>` +
             `Value: %{y:,.2f} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
+    // Configure based on chart type
+    switch (chartType) {
+        case 'stacked-area':
+            return {
+                ...baseTrace,
+                type: 'scatter',
+                mode: 'lines',
+                fill: 'tonexty',
+                stackgroup: stackGroup || 'one',
+                line: { width: 0.5, color: traceColor },
+                fillcolor: traceColor
+            };
+        case 'stacked-percentage':
+            return {
+                ...baseTrace,
+                type: 'scatter',
+                mode: 'lines',
+                fill: 'tonexty',
+                stackgroup: stackGroup || 'one',
+                groupnorm: 'percent',
+                line: { width: 0.5, color: traceColor },
+                fillcolor: traceColor,
+                hovertemplate: `<b>${kpi.name}</b><br>` +
+                    `Percentage: %{y:.1f}%<br>` +
+                    '<extra></extra>'
+            };
+        case 'bar':
+            return {
+                ...baseTrace,
+                type: 'bar',
+                marker: { color: traceColor }
+            };
+        case 'scatter':
+            return {
+                ...baseTrace,
+                type: 'scatter',
+                mode: 'markers',
+                marker: {
+                    color: traceColor,
+                    size: 8
+                }
+            };
+        case 'line':
+        default:
+            return {
+                ...baseTrace,
+                type: 'scatter',
+                mode: 'lines',
+                line: {
+                    color: traceColor,
+                    width: 3,
+                    shape: 'spline',
+                    smoothing: 0.3,
+                    dash: yaxis === 'y1' ? 'solid' : 'dot'
+                }
+            };
+    }
 }
 /**
  * Create time series trace(s) with optional moving average
@@ -101,23 +150,27 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
  * @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 function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0) {
+export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
     const traces = [];
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Add original trace (unless explicitly disabled)
     if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {
-        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex);
+        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup);
         // If MA is enabled, make the original line slightly transparent
         if (kpi.movingAverage?.enabled) {
             originalTrace.opacity = 0.4;
-            originalTrace.line.width = 2;
+            if (originalTrace.line) {
+                originalTrace.line.width = 2;
+            }
         }
         traces.push(originalTrace);
     }
-    // Add moving average trace if configured
-    if (kpi.movingAverage?.enabled) {
+    // Add moving average trace if configured (only for line charts)
+    if (kpi.movingAverage?.enabled && (chartType === 'line' || !chartType)) {
         const maValues = calculateMovingAverage(values, kpi.movingAverage.window);
         const maLabel = kpi.movingAverage.label ||
             `${kpi.name} (MA${kpi.movingAverage.window})`;

package/dist/core/TreeView/TreeView.svelte

@@ -81,12 +81,12 @@
 	{/if}
 
 	<div class="tree-content">
-		<div class="tree-help-text">
+		<!-- <div class="tree-help-text">
 			<small class="text-muted">
 				<i class="bi bi-info-circle"></i>
 				Click checkboxes to select/deselect. Click arrows to expand/collapse.
 			</small>
-		</div>
+		</div> -->
 
 		<div class="tree-nodes">
 			{#each rootNodes as rootNode (rootNode.path)}

package/dist/core/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Desktop/index.js';
 export * from './Charts/index.js';
 export * from './TreeView/index.js';
-export * from './TreeChartView/index.js';

package/dist/core/index.js

@@ -6,5 +6,3 @@ export * from './Desktop/index.js';
 export * from './Charts/index.js';
 // TreeView generic hierarchical component
 export * from './TreeView/index.js';
-// TreeChartView combined layout component
-export * from './TreeChartView/index.js';

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export * from './core/index.js';
 export * from './apps/index.js';
-export * from './cellular/index.js';

package/dist/index.js

@@ -4,5 +4,3 @@
 export * from './core/index.js';
 // Complete applications
 export * from './apps/index.js';
-// Cellular network components
-export * from './cellular/index.js';

package/package.json

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

package/dist/cellular/CellularChartsView.svelte

@@ -1,293 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">
-	import type { CellularSite, CellLine } from './cellular.model.js';
-	import type { Layout } from '../core/Charts/charts.model.js';
-	import type { TreeNode } from '../core/TreeView/tree.model.js';
-	import ChartComponent from '../core/Charts/ChartComponent.svelte';
-	import { TreeView, createTreeStore } from '../core/TreeView';
-	import { getBandColor, getBandLabel } from './mock-cellular-data.js';
-
-	interface Props {
-		sites: CellularSite[];
-	}
-
-	let { sites }: Props = $props();
-
-	// Transform cellular sites to TreeNode structure
-	let treeNodes = $derived.by((): TreeNode[] => {
-		return sites.map(site => ({
-			id: site.siteId,
-			label: site.siteName,
-			icon: '📡',
-			defaultExpanded: false,
-			defaultChecked: true,  // Explicitly set
-			children: site.sectors.map(sector => ({
-				id: sector.sectorId,  // Just the sector ID, not full path
-				label: sector.sectorName,
-				icon: '📶',
-				defaultExpanded: false,
-				defaultChecked: true,  // Explicitly set
-				children: sector.cells.map(cell => ({
-					id: String(cell.band),  // Just the band number
-					label: getBandLabel(cell.band),
-					icon: '📻',
-					defaultChecked: true,  // Explicitly set
-					metadata: {
-						band: cell.band,
-						color: getBandColor(cell.band)
-					}
-				}))
-			}))
-		}));
-	});
-
-	// Create tree store with persistence
-	let treeStore = $derived(
-		createTreeStore({
-			nodes: treeNodes,
-			namespace: 'cellular-sites',
-			persistState: true,  // Re-enabled - state will be saved/restored
-			defaultExpandAll: false,
-			showIndeterminate: true
-		})
-	);
-
-	// Flatten sites into cell lines
-	let cellLines = $derived.by((): CellLine[] => {
-		const lines: CellLine[] = [];
-
-		sites.forEach(site => {
-			site.sectors.forEach(sector => {
-				sector.cells.forEach(cell => {
-					// Path construction matches tree-utils.ts flattenTree logic
-					// Root: "siteId"
-					// Level 1: "siteId:sectorId"  
-					// Level 2: "siteId:sectorId:band"
-					const cellKey = `${site.siteId}:${sector.sectorId}:${cell.band}`;
-					
-					// Check visibility from tree store
-					const isVisible = $treeStore.state.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;
-	});
-
-	// Filter visible cell lines for chart display
-	let visibleCellLines = $derived(cellLines.filter(line => line.visible));
-
-	// Transform cell lines into chart data format
-	let chartData = $derived.by(() => {
-		const data: any[] = [];
-
-		visibleCellLines.forEach(line => {
-			// Create one row per timestamp with all KPI values
-			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;
-	});
-
-	// Chart layout configuration - dynamically build KPIs from visible cells
-	let chartLayout = $derived.by((): Layout => {
-		const throughputKPIs = visibleCellLines.map(line => ({
-			rawName: `DL_THROUGHPUT_${line.cellId}`,
-			name: line.label,
-			scale: 'absolute' as const,
-			unit: 'Mbps',
-			color: line.color
-		}));
-
-		const taKPIs = visibleCellLines.map(line => ({
-			rawName: `AVG_TA_${line.cellId}`,
-			name: line.label,
-			scale: 'absolute' as const,
-			unit: 'μs',
-			color: line.color
-		}));
-
-		return {
-			layoutName: 'Cellular KPIs',
-			sections: [
-				{
-					id: 'kpis',
-					title: 'KPIs',
-					grid: '2x2',
-					charts: [
-						{
-							title: 'Downlink Throughput',
-							yLeft: throughputKPIs,
-							yRight: []
-						},
-						{
-							title: 'Average Timing Advance',
-							yLeft: taKPIs,
-							yRight: []
-						}
-					]
-				}
-			]
-		};
-	});
-</script>
-
-<div class="cellular-charts-view">
-	<!-- Left: Site Tree -->
-	<aside class="site-selector">
-		<TreeView store={$treeStore} showControls={true} height="100%" />
-	</aside>
-
-	<!-- Right: Charts -->
-	<main class="charts-area">
-		<div class="charts-header">
-			<h5 class="mb-0">Cellular Network KPIs</h5>
-			<div class="stats">
-				<span class="badge bg-primary">
-					{visibleCellLines.length} of {cellLines.length} cells visible
-				</span>
-			</div>
-		</div>
-		<div class="charts-container">
-			{#if visibleCellLines.length === 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 Cells Selected</h4>
-						<p class="text-muted">
-							Select one or more cells from the tree on the left to display KPI charts.
-						</p>
-					</div>
-				</div>
-			{:else}
-				<ChartComponent
-					layout={chartLayout}
-					data={chartData}
-					mode="tabs"
-					showGlobalControls={true}
-					enableAdaptation={true}
-				/>
-			{/if}
-		</div>
-	</main>
-</div>
-
-<style>
-	.cellular-charts-view {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		gap: 0;
-		background-color: #fff;
-	}
-
-	.site-selector {
-		width: 300px;
-		flex-shrink: 0;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	.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) {
-		.site-selector {
-			width: 250px;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.cellular-charts-view {
-			flex-direction: column;
-		}
-
-		.site-selector {
-			width: 100%;
-			height: 300px;
-			border-right: none;
-			border-bottom: 1px solid #dee2e6;
-		}
-	}
-</style>

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

@@ -1,7 +0,0 @@
-import type { CellularSite } from './cellular.model.js';
-interface Props {
-    sites: CellularSite[];
-}
-declare const CellularChartsView: import("svelte").Component<Props, {}, "">;
-type CellularChartsView = ReturnType<typeof CellularChartsView>;
-export default CellularChartsView;