@smartnet360/svelte-components 0.0.30 → 0.0.32

package/dist/core/Charts/ChartCard.svelte

@@ -6,6 +6,7 @@
 	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';
+	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
 
 	const dispatch = createEventDispatcher<{
 		chartcontextmenu: {
@@ -18,8 +19,7 @@
 
 	interface Props {
 		chart: ChartModel;
-		data: any[];
-		timestamps: any[]; // Pre-extracted timestamps from ChartComponent
+		processedData: ProcessedChartData; // Pre-processed KPI values and timestamps
 		markers?: ChartMarker[]; // Global markers for all charts
 		plotlyLayout?: any; // Optional custom Plotly layout for styling/theming
 		enableAdaptation?: boolean; // Enable size-based adaptations (default: true)
@@ -32,7 +32,7 @@
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, data, timestamps, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -146,22 +146,27 @@
 		};
 	});
 
+	// Timestamps are already extracted in processedData
+	let timestamps = $derived(processedData.timestamps);
+
 	function renderChart() {
-		if (!chartDiv || !data?.length) return;
+		if (!chartDiv || !processedData?.kpiValues.size) return;
 
 		const traces: any[] = [];
 		let colorIndex = 0;
 
 		// Add left Y-axis traces (with moving average support)
 		resolvedKPIs.left.forEach(kpi => {
-			const kpiTraces = createTimeSeriesTraceWithMA(data, kpi, 'TIMESTAMP', 'y1', colorIndex, timestamps);
+			const values = getKPIValues(processedData, kpi);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 
 		// Add right Y-axis traces (with moving average support)
 		resolvedKPIs.right.forEach(kpi => {
-			const kpiTraces = createTimeSeriesTraceWithMA(data, kpi, 'TIMESTAMP', 'y2', colorIndex, timestamps);
+			const values = getKPIValues(processedData, kpi);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
@@ -269,8 +274,9 @@
 							containerSize.height = height;
 							
 							if (chartDiv && chartDiv.children.length > 0) {
-								// Use Plotly.Plots.resize for better performance than full re-render
-								Plotly.Plots.resize(chartDiv);
+								// Re-render chart to apply size-based adaptations
+								// This recalculates layout with new containerSize for proper adaptation
+								renderChart();
 							}
 						}
 					}
@@ -292,7 +298,7 @@
 	// React to prop changes - debounce re-renders for better performance
 	$effect(() => {
 		// Watch these props and re-render when they change
-		const currentData = data;
+		const currentProcessedData = processedData;
 		const currentMarkers = markers;
 		const currentMAOverride = runtimeMAOverride;
 		const currentShowOriginal = runtimeShowOriginal;

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

@@ -1,8 +1,8 @@
 import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+import { type ProcessedChartData } from './data-processor.js';
 interface Props {
     chart: ChartModel;
-    data: any[];
-    timestamps: any[];
+    processedData: ProcessedChartData;
     markers?: ChartMarker[];
     plotlyLayout?: any;
     enableAdaptation?: boolean;

package/dist/core/Charts/ChartComponent.svelte

@@ -5,6 +5,7 @@
 	import type { Layout, Mode, ChartMarker, Section, ChartGrid, Chart, GlobalChartControls, MovingAverageConfig } from './charts.model.js';
 	import ChartCard from './ChartCard.svelte';
 	import GlobalControls from './GlobalControls.svelte';
+	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
 
 	interface Props {
 		layout: Layout;
@@ -54,8 +55,9 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
 	
-	// Extract timestamps once at component level - all charts share the same time series
-	let timestamps = $derived(data.map(row => row['TIMESTAMP']));
+	// Preprocess raw data once - automatically memoized by Svelte's $derived
+	// This extracts all KPI values and timestamps, cached until data or layout changes
+	let processedData = $derived(getPreprocessedData(data, layout));
 	
 	// Global runtime controls state - initialize from layout config
 	let globalControls = $state<GlobalChartControls>({
@@ -294,8 +296,7 @@
 			<div class="chart-slot">
 				<ChartCard
 					{chart}
-					{data}
-					{timestamps}
+					{processedData}
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}
@@ -437,8 +438,7 @@
 				</button>
 				<ChartCard
 					chart={activeZoom.chart}
-					{data}
-					{timestamps}
+					{processedData}
 					{markers}
 					{plotlyLayout}
 					{enableAdaptation}

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

@@ -0,0 +1,43 @@
+import type { Layout, KPI } from './charts.model.js';
+/**
+ * Preprocessed chart data structure
+ * Contains extracted numeric values and timestamps, ready for chart rendering
+ */
+export interface ProcessedChartData {
+    /** Map of KPI rawName to numeric values array */
+    kpiValues: Map<string, number[]>;
+    /** Extracted timestamps array */
+    timestamps: any[];
+    /** Original raw data reference (for cache invalidation) */
+    _rawDataRef: any[];
+}
+/**
+ * Extract all unique KPI rawNames from a layout configuration
+ * This determines which columns we need to extract from raw data
+ */
+export declare function extractKPINames(layout: Layout): Set<string>;
+/**
+ * Process raw data into numeric arrays for each KPI
+ * Handles type conversion and filtering of invalid values
+ *
+ * @param data - Raw data array from API/database
+ * @param layout - Chart layout configuration containing all KPIs
+ * @param timestampField - Name of timestamp field in raw data (default: 'TIMESTAMP')
+ * @returns Preprocessed data ready for chart rendering
+ */
+export declare function preprocessChartData(data: any[], layout: Layout, timestampField?: string): ProcessedChartData;
+/**
+ * Get preprocessed chart data with automatic caching
+ * Returns cached result if raw data hasn't changed
+ *
+ * @param data - Raw data array
+ * @param layout - Chart layout configuration
+ * @param timestampField - Name of timestamp field (default: 'TIMESTAMP')
+ * @returns Preprocessed data (cached or freshly computed)
+ */
+export declare function getPreprocessedData(data: any[], layout: Layout, timestampField?: string): ProcessedChartData;
+/**
+ * Helper to get values for a specific KPI from preprocessed data
+ * Returns empty array if KPI not found
+ */
+export declare function getKPIValues(processedData: ProcessedChartData, kpi: KPI): number[];

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

@@ -0,0 +1,89 @@
+/**
+ * Extract all unique KPI rawNames from a layout configuration
+ * This determines which columns we need to extract from raw data
+ */
+export function extractKPINames(layout) {
+    const kpiNames = new Set();
+    for (const section of layout.sections) {
+        for (const chart of section.charts) {
+            // Collect from left Y-axis KPIs
+            for (const kpi of chart.yLeft) {
+                kpiNames.add(kpi.rawName);
+            }
+            // Collect from right Y-axis KPIs
+            for (const kpi of chart.yRight) {
+                kpiNames.add(kpi.rawName);
+            }
+        }
+    }
+    return kpiNames;
+}
+/**
+ * Process raw data into numeric arrays for each KPI
+ * Handles type conversion and filtering of invalid values
+ *
+ * @param data - Raw data array from API/database
+ * @param layout - Chart layout configuration containing all KPIs
+ * @param timestampField - Name of timestamp field in raw data (default: 'TIMESTAMP')
+ * @returns Preprocessed data ready for chart rendering
+ */
+export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP') {
+    // Extract all unique KPI names we need to process
+    const kpiNames = extractKPINames(layout);
+    // Initialize the result map
+    const kpiValues = new Map();
+    // Process each KPI column
+    for (const kpiName of kpiNames) {
+        const values = data
+            .map(row => {
+            const val = row[kpiName];
+            // Convert to number if it's a string, return as-is if already a number
+            return typeof val === 'number' ? val : parseFloat(val);
+        })
+            .filter(val => !isNaN(val)); // Remove invalid values
+        kpiValues.set(kpiName, values);
+    }
+    // Extract timestamps once
+    const timestamps = data.map(row => row[timestampField]);
+    return {
+        kpiValues,
+        timestamps,
+        _rawDataRef: data // Keep reference for cache invalidation
+    };
+}
+/**
+ * Memoized wrapper for preprocessChartData
+ * Uses WeakMap to cache results by raw data reference
+ * Cache is automatically garbage collected when raw data is no longer referenced
+ */
+const preprocessCache = new WeakMap();
+/**
+ * Get preprocessed chart data with automatic caching
+ * Returns cached result if raw data hasn't changed
+ *
+ * @param data - Raw data array
+ * @param layout - Chart layout configuration
+ * @param timestampField - Name of timestamp field (default: 'TIMESTAMP')
+ * @returns Preprocessed data (cached or freshly computed)
+ */
+export function getPreprocessedData(data, layout, timestampField = 'TIMESTAMP') {
+    // Check cache first
+    const cached = preprocessCache.get(data);
+    if (cached) {
+        // Verify cache is still valid (data reference matches)
+        if (cached._rawDataRef === data) {
+            return cached;
+        }
+    }
+    // Cache miss or invalid - compute and cache
+    const processed = preprocessChartData(data, layout, timestampField);
+    preprocessCache.set(data, processed);
+    return processed;
+}
+/**
+ * Helper to get values for a specific KPI from preprocessed data
+ * Returns empty array if KPI not found
+ */
+export function getKPIValues(processedData, kpi) {
+    return processedData.kpiValues.get(kpi.rawName) || [];
+}

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

@@ -1,18 +1,17 @@
 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(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): any;
+export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number): any;
 /**
  * Create time series trace(s) with optional moving average
- * @param data - Raw data array
+ * @param values - Pre-processed numeric values array for the KPI
+ * @param timestamps - Pre-extracted timestamps 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
- * @param precomputedTimestamps - Optional pre-extracted timestamps array (performance optimization)
  * @returns Array of traces (original + MA if configured)
  */
-export declare function createTimeSeriesTraceWithMA(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number, precomputedTimestamps?: any[]): any[];
+export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, 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

@@ -72,9 +72,7 @@ export function calculateMovingAverage(values, window) {
     maCache.set(cacheKey, result);
     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]);
+export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     return {
@@ -98,22 +96,19 @@ export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', y
 }
 /**
  * Create time series trace(s) with optional moving average
- * @param data - Raw data array
+ * @param values - Pre-processed numeric values array for the KPI
+ * @param timestamps - Pre-extracted timestamps 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
- * @param precomputedTimestamps - Optional pre-extracted timestamps array (performance optimization)
  * @returns Array of traces (original + MA if configured)
  */
-export function createTimeSeriesTraceWithMA(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0, precomputedTimestamps) {
+export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0) {
     const traces = [];
-    const values = processKPIData(data, kpi);
-    const timestamps = precomputedTimestamps || 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);
+        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex);
         // If MA is enabled, make the original line slightly transparent
         if (kpi.movingAverage?.enabled) {
             originalTrace.opacity = 0.4;

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

@@ -4,6 +4,8 @@ export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid,
 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';
+export { getPreprocessedData, extractKPINames, getKPIValues, preprocessChartData } from './data-processor.js';
+export type { ProcessedChartData } from './data-processor.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';

package/dist/core/Charts/index.js

@@ -2,6 +2,7 @@ export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
 export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
+export { getPreprocessedData, extractKPINames, getKPIValues, preprocessChartData } from './data-processor.js';
 // Editor exports
 export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
 export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';

package/package.json

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