@smartnet360/svelte-components 0.0.19 → 0.0.21

package/dist/core/Charts/ChartCard.svelte

@@ -3,8 +3,8 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from 'svelte';
 	import Plotly from 'plotly.js-dist-min';
-	import type { Chart as ChartModel, ChartMarker } from './charts.model.js';
-	import { createTimeSeriesTrace, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
+	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 
 	const dispatch = createEventDispatcher<{
@@ -23,9 +23,11 @@
 		plotlyLayout?: any; // Optional custom Plotly layout for styling/theming
 		enableAdaptation?: boolean; // Enable size-based adaptations (default: true)
 		sectionId?: string;
+		sectionMovingAverage?: MovingAverageConfig; // Section-level MA config
+		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId }: Props = $props();
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -68,17 +70,55 @@
 		const traces: any[] = [];
 		let colorIndex = 0;
 
-		// Add left Y-axis traces
+		// Helper function to apply MA with full hierarchy:
+		// KPI > Chart > Section > Layout (higher priority wins)
+		const applyMovingAverageHierarchy = (kpi: any) => {
+			// If KPI has its own MA config, use it (highest priority)
+			if (kpi.movingAverage) {
+				return kpi;
+			}
+			
+			// Check chart-level MA
+			if (chart.movingAverage) {
+				return {
+					...kpi,
+					movingAverage: chart.movingAverage
+				};
+			}
+			
+			// Check section-level MA
+			if (sectionMovingAverage) {
+				return {
+					...kpi,
+					movingAverage: sectionMovingAverage
+				};
+			}
+			
+			// Check layout-level MA (lowest priority, global default)
+			if (layoutMovingAverage) {
+				return {
+					...kpi,
+					movingAverage: layoutMovingAverage
+				};
+			}
+			
+			// No MA configuration at any level
+			return kpi;
+		};
+
+		// Add left Y-axis traces (with moving average support)
 		chart.yLeft.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1', colorIndex);
-			traces.push(trace);
+			const kpiWithMA = applyMovingAverageHierarchy(kpi);
+			const kpiTraces = createTimeSeriesTraceWithMA(data, kpiWithMA, 'TIMESTAMP', 'y1', colorIndex);
+			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 
-		// Add right Y-axis traces
+		// Add right Y-axis traces (with moving average support)
 		chart.yRight.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2', colorIndex);
-			traces.push(trace);
+			const kpiWithMA = applyMovingAverageHierarchy(kpi);
+			const kpiTraces = createTimeSeriesTraceWithMA(data, kpiWithMA, 'TIMESTAMP', 'y2', colorIndex);
+			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Chart as ChartModel, ChartMarker } from './charts.model.js';
+import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
 interface Props {
     chart: ChartModel;
     data: any[];
@@ -6,6 +6,8 @@ interface Props {
     plotlyLayout?: any;
     enableAdaptation?: boolean;
     sectionId?: string;
+    sectionMovingAverage?: MovingAverageConfig;
+    layoutMovingAverage?: MovingAverageConfig;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/core/Charts/ChartComponent.svelte

@@ -246,6 +246,8 @@
 					{plotlyLayout}
 					{enableAdaptation}
 					sectionId={section.id}
+					sectionMovingAverage={section.movingAverage}
+					layoutMovingAverage={layout.movingAverage}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
 				/>
 			</div>
@@ -343,6 +345,8 @@
 					{plotlyLayout}
 					{enableAdaptation}
 					sectionId={activeZoom.section.id}
+					sectionMovingAverage={activeZoom.section.movingAverage}
+					layoutMovingAverage={layout.movingAverage}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
 				/>
 			</div>

package/dist/core/Charts/charts.model.d.ts

@@ -1,10 +1,17 @@
 export type Scale = "percent" | "absolute";
+export interface MovingAverageConfig {
+    enabled: boolean;
+    window: number;
+    showOriginal?: boolean;
+    label?: string;
+}
 export interface KPI {
     rawName: string;
     name: string;
     scale: Scale;
     unit: string;
     color?: string;
+    movingAverage?: MovingAverageConfig;
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ChartGrid = "2x2" | "3x3" | "4x4" | "1x2" | "1x4" | "1x8";
@@ -13,17 +20,20 @@ export interface Chart {
     title: string;
     yLeft: KPI[];
     yRight: KPI[];
+    movingAverage?: MovingAverageConfig;
 }
 export interface Section {
     id: string;
     title: string;
     charts: Chart[];
     grid?: ChartGrid;
+    movingAverage?: MovingAverageConfig;
 }
 export type Mode = "tabs" | "scrollspy";
 export interface Layout {
     layoutName: string;
     sections: Section[];
+    movingAverage?: MovingAverageConfig;
 }
 export interface ChartMarker {
     date: string | Date;

package/dist/core/Charts/data-utils.d.ts

@@ -1,6 +1,23 @@
 import type { KPI } from './charts.model.js';
 export declare function processKPIData(data: any[], kpi: KPI): number[];
+/**
+ * Calculate moving average for a series of values
+ * @param values - Array of numeric values
+ * @param window - Number of periods for MA calculation
+ * @returns Array of moving average values (NaN for insufficient data points)
+ */
+export declare function calculateMovingAverage(values: number[], window: number): number[];
 export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): any;
+/**
+ * Create time series trace(s) with optional moving average
+ * @param data - Raw data array
+ * @param kpi - KPI configuration (may include movingAverage config)
+ * @param timestampField - Field name for timestamp column
+ * @param yaxis - Which Y-axis to use ('y1' or 'y2')
+ * @param colorIndex - Index for color selection
+ * @returns Array of traces (original + MA if configured)
+ */
+export declare function createTimeSeriesTraceWithMA(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): 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

@@ -19,6 +19,28 @@ export function processKPIData(data, kpi) {
     })
         .filter(val => !isNaN(val));
 }
+/**
+ * Calculate moving average for a series of values
+ * @param values - Array of numeric values
+ * @param window - Number of periods for MA calculation
+ * @returns Array of moving average values (NaN for insufficient data points)
+ */
+export function calculateMovingAverage(values, window) {
+    const result = [];
+    for (let i = 0; i < values.length; i++) {
+        if (i < window - 1) {
+            // Not enough data points yet - use NaN to skip these points
+            result.push(NaN);
+        }
+        else {
+            // Calculate average of the window
+            const windowValues = values.slice(i - window + 1, i + 1);
+            const sum = windowValues.reduce((a, b) => a + b, 0);
+            result.push(sum / window);
+        }
+    }
+    return result;
+}
 export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
     const values = processKPIData(data, kpi);
     const timestamps = data.map(row => row[timestampField]);
@@ -43,6 +65,57 @@ export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', y
             '<extra></extra>'
     };
 }
+/**
+ * Create time series trace(s) with optional moving average
+ * @param data - Raw data array
+ * @param kpi - KPI configuration (may include movingAverage config)
+ * @param timestampField - Field name for timestamp column
+ * @param yaxis - Which Y-axis to use ('y1' or 'y2')
+ * @param colorIndex - Index for color selection
+ * @returns Array of traces (original + MA if configured)
+ */
+export function createTimeSeriesTraceWithMA(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
+    const traces = [];
+    const values = processKPIData(data, kpi);
+    const timestamps = data.map(row => row[timestampField]);
+    const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
+    // Add original trace (unless explicitly disabled)
+    if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {
+        const originalTrace = createTimeSeriesTrace(data, kpi, timestampField, yaxis, colorIndex);
+        // If MA is enabled, make the original line slightly transparent
+        if (kpi.movingAverage?.enabled) {
+            originalTrace.opacity = 0.4;
+            originalTrace.line.width = 2;
+        }
+        traces.push(originalTrace);
+    }
+    // Add moving average trace if configured
+    if (kpi.movingAverage?.enabled) {
+        const maValues = calculateMovingAverage(values, kpi.movingAverage.window);
+        const maLabel = kpi.movingAverage.label ||
+            `${kpi.name} (MA${kpi.movingAverage.window})`;
+        const maTrace = {
+            x: timestamps,
+            y: maValues,
+            type: 'scatter',
+            mode: 'lines',
+            name: maLabel,
+            yaxis: yaxis,
+            line: {
+                color: traceColor,
+                width: 3,
+                shape: 'spline',
+                smoothing: 0.3,
+                dash: yaxis === 'y1' ? 'solid' : 'dot'
+            },
+            hovertemplate: `<b>${maLabel}</b><br>` +
+                `Value: %{y:,.2f} ${kpi.unit}<br>` +
+                '<extra></extra>'
+        };
+        traces.push(maTrace);
+    }
+    return traces;
+}
 export function getYAxisTitle(kpis) {
     if (kpis.length === 0)
         return '';

package/dist/core/Charts/editor/ChartLayoutEditor.svelte

@@ -6,6 +6,13 @@
 	import GridPreview from './GridPreview.svelte';
 	import PropertiesPanel from './PropertiesPanel.svelte';
 	import KPIPicker from './KPIPicker.svelte';
+	import type { KPI } from '../charts.model.js';
+
+	interface Props {
+		availableKPIs: KPI[];
+	}
+
+	let { availableKPIs }: Props = $props();
 
 	let showKPIPicker = $state(false);
 	let showLibrary = $state(false);
@@ -180,6 +187,7 @@
 {#if showKPIPicker}
 	<KPIPicker 
 		show={showKPIPicker}
+		{availableKPIs}
 		on:select={handleKPISelected}
 		on:close={() => { showKPIPicker = false; kpiPickerContext = null; }}
 	/>

package/dist/core/Charts/editor/ChartLayoutEditor.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const ChartLayoutEditor: import("svelte").Component<Record<string, never>, {}, "">;
+import type { KPI } from '../charts.model.js';
+interface Props {
+    availableKPIs: KPI[];
+}
+declare const ChartLayoutEditor: import("svelte").Component<Props, {}, "">;
 type ChartLayoutEditor = ReturnType<typeof ChartLayoutEditor>;
 export default ChartLayoutEditor;

package/dist/core/Charts/editor/KPIPicker.svelte

@@ -2,22 +2,32 @@
 
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { availableKPIs, searchKPIs } from '../../../../routes/charts/schemas/available-kpis.js';
 	import type { KPI } from '../charts.model.js';
 
 	interface Props {
 		show: boolean;
+		availableKPIs: KPI[];
 	}
 
-	let { show }: Props = $props();
+	let { show, availableKPIs }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
 	let searchQuery = $state('');
 	let selectedKPI = $state<KPI | null>(null);
 
+	// Local search function
+	function searchKPIs(query: string, kpis: KPI[]): KPI[] {
+		const lowerQuery = query.toLowerCase();
+		return kpis.filter(
+			kpi =>
+				kpi.name.toLowerCase().includes(lowerQuery) ||
+				kpi.rawName.toLowerCase().includes(lowerQuery)
+		);
+	}
+
 	let filteredKPIs = $derived(
-		searchQuery ? searchKPIs(searchQuery) : availableKPIs
+		searchQuery ? searchKPIs(searchQuery, availableKPIs) : availableKPIs
 	);
 
 	function handleSelect(kpi: KPI) {

package/dist/core/Charts/editor/KPIPicker.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { KPI } from '../charts.model.js';
 interface Props {
     show: boolean;
+    availableKPIs: KPI[];
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/core/Charts/editor/exampleKPIs.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Example KPI Configuration
+ *
+ * This is a reference example showing the structure for availableKPIs.
+ * In your application, you should:
+ * 1. Load KPIs from your backend API
+ * 2. Store in a JSON file specific to your domain
+ * 3. Generate dynamically based on your data schema
+ */
+import type { KPI } from '../charts.model.js';
+/**
+ * Example KPI list structure
+ * Each KPI must have: rawName, name, scale, unit, and optional color
+ */
+export declare const exampleKPIs: KPI[];
+/**
+ * KPI Interface Reference:
+ *
+ * interface KPI {
+ *   rawName: string;      // Column name in your data source
+ *   name: string;         // Display name shown in UI
+ *   scale: 'percent' | 'absolute';  // Data type
+ *   unit: string;         // Unit of measurement (%, GB, users, etc.)
+ *   color?: string;       // Optional hex color for chart line
+ * }
+ */
+/**
+ * Usage Example:
+ *
+ * <script>
+ *   import { ChartLayoutEditor } from '..';
+ *   import { exampleKPIs } from './exampleKPIs';
+ *   // OR load from API:
+ *   // const myKPIs = await fetch('/api/kpis').then(r => r.json());
+ * </script>
+ *
+ * <ChartLayoutEditor availableKPIs={exampleKPIs} />
+ */

package/dist/core/Charts/editor/exampleKPIs.js

@@ -0,0 +1,66 @@
+/**
+ * Example KPI Configuration
+ *
+ * This is a reference example showing the structure for availableKPIs.
+ * In your application, you should:
+ * 1. Load KPIs from your backend API
+ * 2. Store in a JSON file specific to your domain
+ * 3. Generate dynamically based on your data schema
+ */
+/**
+ * Example KPI list structure
+ * Each KPI must have: rawName, name, scale, unit, and optional color
+ */
+export const exampleKPIs = [
+    {
+        rawName: 'CCSR_PC',
+        name: 'CCSR Success Rate',
+        scale: 'percent',
+        unit: '%',
+        color: '#2ca02c' // Optional: hex color for the trace
+    },
+    {
+        rawName: 'DL_GBYTES',
+        name: 'Downlink Traffic',
+        scale: 'absolute',
+        unit: 'GB',
+        color: '#06B6D4'
+    },
+    {
+        rawName: 'UL_GBYTES',
+        name: 'Uplink Traffic',
+        scale: 'absolute',
+        unit: 'GB',
+        color: '#84CC16'
+    },
+    {
+        rawName: 'AVG_USERS',
+        name: 'Average Connected Users',
+        scale: 'absolute',
+        unit: 'users',
+        color: '#EF4444'
+    }
+];
+/**
+ * KPI Interface Reference:
+ *
+ * interface KPI {
+ *   rawName: string;      // Column name in your data source
+ *   name: string;         // Display name shown in UI
+ *   scale: 'percent' | 'absolute';  // Data type
+ *   unit: string;         // Unit of measurement (%, GB, users, etc.)
+ *   color?: string;       // Optional hex color for chart line
+ * }
+ */
+/**
+ * Usage Example:
+ *
+ * <script>
+ *   import { ChartLayoutEditor } from '..';
+ *   import { exampleKPIs } from './exampleKPIs';
+ *   // OR load from API:
+ *   // const myKPIs = await fetch('/api/kpis').then(r => r.json());
+ * </script>
+ *
+ * <ChartLayoutEditor availableKPIs={exampleKPIs} />
+ */

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

@@ -7,3 +7,4 @@ export type { ContainerSize, ChartInfo, AdaptationConfig } from './adapt.js';
 export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
 export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';
 export type { Selection, SelectionType, EditorState } from './editor/editorState.js';
+export { exampleKPIs } from './editor/exampleKPIs.js';

package/dist/core/Charts/index.js

@@ -5,3 +5,4 @@ export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnn
 // Editor exports
 export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
 export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';
+export { exampleKPIs } from './editor/exampleKPIs.js';

package/package.json

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