@smartnet360/svelte-components 0.0.20 → 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/package.json

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