@smartnet360/svelte-components 0.0.33 → 0.0.35

package/dist/core/Charts/adapt.js

@@ -5,42 +5,22 @@
 /**
  * Adapts hover behavior based on container size and series count
  * Optimizes tooltip display and performance for different chart sizes
- * Respects configured hover mode, with exception for tiny charts (always 'closest' for performance)
  */
-function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMode) {
+function adaptHoverBehavior(layout, containerSize, chartInfo) {
     const { width, height } = containerSize;
     const isTiny = width < 250 || height < 200;
     const isSmall = width < 400 || height < 300;
     const isMedium = width < 600 || height < 400;
     const totalSeries = chartInfo.leftSeriesCount + chartInfo.rightSeriesCount;
-    // EXCEPTION: Always use 'closest' in tiny charts for performance (override user setting)
+    // Priority 1: Disable hover in tiny charts (performance + UX)
     if (isTiny) {
-        layout.hovermode = 'closest';
+        layout.hovermode = 'closest'; // Single point instead of unified
         if (layout.hoverlabel) {
             layout.hoverlabel.font = layout.hoverlabel.font || {};
             layout.hoverlabel.font.size = 9; // Smaller font
         }
         return layout;
     }
-    // If user configured a specific hover mode, respect it (except tiny override above)
-    if (configuredHoverMode !== undefined) {
-        layout.hovermode = configuredHoverMode;
-        // Still apply adaptive font sizing based on container size
-        if (layout.hoverlabel) {
-            layout.hoverlabel.font = layout.hoverlabel.font || {};
-            if (isSmall) {
-                layout.hoverlabel.font.size = 9;
-            }
-            else if (isMedium) {
-                layout.hoverlabel.font.size = 10;
-            }
-            else {
-                layout.hoverlabel.font.size = 11;
-            }
-        }
-        return layout;
-    }
-    // No configured mode - apply full adaptive logic (default: 'x')
     // Priority 2: Simplify hover in small charts
     if (isSmall) {
         layout.hovermode = 'x'; // Single point instead of unified
@@ -52,17 +32,14 @@ function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMod
     }
     // Priority 3: Adaptive hover mode based on series count
     if (totalSeries > 4 && isMedium) {
-        // Too many series in medium chart - switch to x
+        // Too many series in medium chart - switch to closest
         layout.hovermode = 'x';
     }
     else if (totalSeries > 8) {
         // Very many series - even in large charts, use x
         layout.hovermode = 'x';
     }
-    else {
-        // Default for large charts with reasonable series count
-        layout.hovermode = 'x';
-    }
+    // Otherwise keep default 'x unified' from base layout
     // Priority 4: Adaptive hover label font size
     if (layout.hoverlabel) {
         layout.hoverlabel.font = layout.hoverlabel.font || {};
@@ -80,7 +57,7 @@ function adaptHoverBehavior(layout, containerSize, chartInfo, configuredHoverMod
  * Preserves external styling while optimizing functional properties
  */
 export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config = {}) {
-    const { enableAdaptation = true, configuredHoverMode } = config;
+    const { enableAdaptation = true } = config;
     if (!enableAdaptation)
         return baseLayout;
     const { width, height } = containerSize;
@@ -170,7 +147,7 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
         }
     }
     // Apply adaptive hover behavior (disable in tiny, simplify in small, optimize for series count)
-    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo, configuredHoverMode);
+    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo);
     return adaptedLayout;
 }
 /**

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;
@@ -30,12 +33,10 @@ export interface Section {
     movingAverage?: MovingAverageConfig;
 }
 export type Mode = "tabs" | "scrollspy";
-export type HoverMode = 'x' | 'y' | 'closest' | 'x unified' | 'y unified' | false;
 export interface Layout {
     layoutName: string;
     sections: Section[];
     movingAverage?: MovingAverageConfig;
-    hoverMode?: HoverMode;
 }
 export interface ChartMarker {
     date: string | Date;

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;

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:} ${kpi.unit}<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})`;
@@ -201,7 +254,7 @@ export function createDefaultPlotlyLayout(title) {
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
         font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
-        hovermode: 'x', // Default hover mode (can be overridden by layout.hoverMode or adaptive behavior)
+        hovermode: 'x',
         hoverlabel: {
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',

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

@@ -1,6 +1,6 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition, HoverMode } from './charts.model.js';
+export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition } from './charts.model.js';
 export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
 export type { ContainerSize, ChartInfo, AdaptationConfig } from './adapt.js';

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.33",
+	"version": "0.0.35",
 	"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;