@smartnet360/svelte-components 0.0.1 → 0.0.2

package/dist/Charts/ChartCard.svelte

@@ -0,0 +1,204 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Plotly from 'plotly.js-dist-min';
+	import type { Chart as ChartModel, ChartMarker } from './charts.model.js';
+	import { createTimeSeriesTrace, getYAxisTitle } from './data-utils.js';
+	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
+
+	interface Props {
+		chart: ChartModel;
+		data: any[];
+		markers?: ChartMarker[]; // Global markers for all charts
+		plotlyLayout?: any; // Optional custom Plotly layout for styling/theming
+		enableAdaptation?: boolean; // Enable size-based adaptations (default: true)
+	}
+
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true }: Props = $props();
+
+	// Chart container div and state
+	let chartDiv: HTMLElement;
+	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
+
+	function renderChart() {
+		if (!chartDiv || !data?.length) return;
+
+		const traces: any[] = [];
+
+		// Add left Y-axis traces
+		chart.yLeft.forEach(kpi => {
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1');
+			traces.push(trace);
+		});
+
+		// Add right Y-axis traces
+		chart.yRight.forEach(kpi => {
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2');
+			traces.push(trace);
+		});
+
+		// Create default modern layout
+		const defaultLayout: any = {
+			title: {
+				text: chart.title,
+				font: {
+					size: 16,
+					color: '#2c3e50',
+					weight: 600
+				},
+				x: 0.5,
+				xanchor: 'center'
+			},
+			showlegend: true,
+			legend: {
+				x: 1,
+				y: 1,
+				xanchor: 'right',
+				yanchor: 'top',
+				font: { size: 12 }
+			},
+			xaxis: {
+				showgrid: true,
+				gridcolor: '#ecf0f1',
+				linecolor: '#bdc3c7',
+				tickfont: { size: 11 }
+			},
+			yaxis: {
+				title: {
+					text: getYAxisTitle(chart.yLeft),
+					font: { size: 12, color: '#7f8c8d' }
+				},
+				showgrid: true,
+				gridcolor: '#ecf0f1',
+				linecolor: '#bdc3c7',
+				tickfont: { size: 11 }
+			},
+			margin: { l: 60, r: 60, t: 60, b: 50 },
+			paper_bgcolor: 'rgba(0,0,0,0)',
+			plot_bgcolor: 'rgba(0,0,0,0)',
+			font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' }
+		};
+
+		// Add second Y-axis if we have right-side KPIs
+		if (chart.yRight.length > 0) {
+			defaultLayout.yaxis2 = {
+				title: {
+					text: getYAxisTitle(chart.yRight),
+					font: { size: 12, color: '#7f8c8d' }
+				},
+				overlaying: 'y',
+				side: 'right',
+				showgrid: false,
+				linecolor: '#bdc3c7',
+				tickfont: { size: 11 }
+			};
+		}
+
+		// Merge external layout with defaults, then apply size adaptations
+		let finalLayout = plotlyLayout ? 
+			{ ...defaultLayout, ...plotlyLayout } : 
+			defaultLayout;
+
+		// Apply size-based adaptations using helper
+		finalLayout = adaptPlotlyLayout(
+			finalLayout, 
+			containerSize, 
+			{ 
+				leftSeriesCount: chart.yLeft.length, 
+				rightSeriesCount: chart.yRight.length 
+			},
+			{ enableAdaptation }
+		);
+
+		// Add markers to the layout
+		finalLayout = addMarkersToLayout(finalLayout, markers || [], containerSize, enableAdaptation);
+
+		const config = {
+			responsive: true,
+			displayModeBar: false,
+			displaylogo: false
+		};
+
+		Plotly.newPlot(chartDiv, traces, finalLayout, config);
+		
+		// Resize immediately after creation to ensure proper sizing
+		setTimeout(() => {
+			if (chartDiv) {
+				Plotly.Plots.resize(chartDiv);
+			}
+		}, 0);
+	}
+
+	onMount(() => {
+		// Initial container size measurement
+		if (chartDiv) {
+			const rect = chartDiv.getBoundingClientRect();
+			containerSize.width = rect.width;
+			containerSize.height = rect.height;
+		}
+
+		renderChart();
+		
+		// Set up ResizeObserver to handle container size changes
+		if (chartDiv && window.ResizeObserver) {
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					const { width, height } = entry.contentRect;
+					
+					// Update container size state
+					containerSize.width = width;
+					containerSize.height = height;
+					
+					if (chartDiv && chartDiv.children.length > 0) {
+						// Re-render chart with new adaptive layout
+						renderChart();
+					}
+				}
+			});
+			
+			resizeObserver.observe(chartDiv);
+			
+			// Clean up observer on component destroy
+			return () => {
+				resizeObserver.disconnect();
+			};
+		}
+	});
+</script>
+
+<div class="chart-card">
+	<div
+		bind:this={chartDiv}
+		class="chart-container"
+	></div>
+</div>
+
+<style>
+	.chart-card {
+		width: 100%;
+		height: 100%;
+		min-height: 100px; /* Much smaller minimum for grid usage */
+		max-height: 100%; /* Prevent exceeding parent */
+		background: white;
+		border-radius: 8px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		transition: box-shadow 0.2s ease;
+		overflow: hidden; /* Prevent content overflow */
+		box-sizing: border-box; /* Include padding in size calculations */
+	}
+
+	.chart-card:hover {
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+	}
+
+	.chart-container {
+		width: 100%;
+		height: 100%;
+		min-height: 100px; /* Much smaller minimum for grid usage */
+		max-height: 100%; /* Prevent exceeding parent */
+		padding: 4px; /* Even smaller padding for grid constraints */
+		box-sizing: border-box; /* Include padding in size calculations */
+		overflow: hidden; /* Prevent Plotly overflow */
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Chart as ChartModel, ChartMarker } from './charts.model.js';
+interface Props {
+    chart: ChartModel;
+    data: any[];
+    markers?: ChartMarker[];
+    plotlyLayout?: any;
+    enableAdaptation?: boolean;
+}
+declare const ChartCard: import("svelte").Component<Props, {}, "">;
+type ChartCard = ReturnType<typeof ChartCard>;
+export default ChartCard;

package/dist/Charts/ChartComponent.svelte

@@ -0,0 +1,226 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Layout, Mode, ChartMarker } from './charts.model.js';
+	import ChartCard from './ChartCard.svelte';
+
+	interface Props {
+		layout: Layout;
+		data: any[];
+		mode: Mode;
+		markers?: ChartMarker[]; // Global markers for all charts
+		plotlyLayout?: any; // Optional custom Plotly layout
+		enableAdaptation?: boolean; // Enable size-based adaptations
+	}
+
+	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true }: Props = $props();
+	
+	// Internal tab state management
+	let activeTabId = $state(layout.sections[0]?.id || '');
+</script>
+
+<div class="chart-component">
+	{#if mode === 'tabs'}
+		<!-- Tab Mode with Navigation -->
+		<div class="tabs-container">
+			<!-- Tab Navigation -->
+			<ul class="nav nav-tabs" role="tablist">
+				{#each layout.sections as section, index}
+					<li class="nav-item" role="presentation">
+						<button
+							class="nav-link {section.id === activeTabId ? 'active' : ''}"
+							id="{section.id}-tab"
+							type="button"
+							role="tab"
+							aria-controls="{section.id}"
+							aria-selected="{section.id === activeTabId}"
+							onclick={() => activeTabId = section.id}
+						>
+							{section.title}
+						</button>
+					</li>
+				{/each}
+			</ul>
+
+			<!-- Tab Content -->
+			<div class="tab-content">
+				{#each layout.sections as section, index}
+					<div 
+						class="tab-section {section.id === activeTabId ? 'active' : 'hidden'}"
+						data-section-id="{section.id}"
+					>
+						<!-- 2x2 Grid -->
+						<div class="chart-grid">
+							{#each section.charts as chart}
+								<div class="chart-slot">
+									<ChartCard {chart} {data} {plotlyLayout} />
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else if mode === 'scrollspy'}
+		<!-- ScrollSpy Mode with Navigation -->
+		<div class="scrollspy-container">
+			<!-- ScrollSpy Navigation -->
+			<nav class="scrollspy-nav">
+				<ul class="nav nav-pills">
+					{#each layout.sections as section}
+						<li class="nav-item">
+							<a class="nav-link" href="#{section.id}">{section.title}</a>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+
+			<!-- ScrollSpy Content -->
+			<div class="scrollspy-content">
+				{#each layout.sections as section}
+					<div class="section-content" id="{section.id}">
+						<!-- 2x2 Grid -->
+						<div class="chart-grid">
+							{#each section.charts as chart}
+								<div class="chart-slot">
+									<ChartCard {chart} {data} {markers} {plotlyLayout} {enableAdaptation} />
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Child-first component - adapts to parent container */
+	.chart-component {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Tab Mode */
+	.tabs-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.nav-tabs {
+		flex-shrink: 0;
+		margin-bottom: 0.125rem; /* Minimal margin */
+		padding: 0; /* Remove any padding */
+	}
+
+	/* Compact tabs for grid usage */
+	.nav-tabs .nav-link {
+		padding: 0.25rem 0.5rem; /* Much smaller padding */
+		font-size: 0.75rem; /* Smaller font */
+		border: none;
+		border-bottom: 2px solid transparent;
+	}
+
+	.nav-tabs .nav-link.active {
+		border-bottom-color: #007bff;
+		background: none;
+	}
+
+	.tab-content {
+		flex-grow: 1;
+		min-height: 0;
+		position: relative;
+		overflow: hidden; /* Prevent overflow */
+	}
+
+	.tab-section {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		transition: opacity 0.2s ease;
+	}
+
+	.tab-section.active {
+		opacity: 1;
+		z-index: 1;
+	}
+
+	.tab-section.hidden {
+		opacity: 0;
+		z-index: 0;
+		pointer-events: none;
+	}
+
+	/* ScrollSpy Mode */
+	.scrollspy-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.scrollspy-nav {
+		flex-shrink: 0;
+		padding: 0.125rem; /* Minimal padding */
+		background-color: #f8f9fa;
+		margin-bottom: 0.125rem; /* Minimal margin */
+	}
+
+	/* Compact scrollspy nav for grid usage */
+	.scrollspy-nav .nav-pills .nav-link {
+		padding: 0.25rem 0.5rem; /* Much smaller padding */
+		font-size: 0.75rem; /* Smaller font */
+		margin-right: 0.25rem;
+	}
+
+	.scrollspy-content {
+		flex-grow: 1;
+		overflow-y: auto;
+		min-height: 0;
+	}
+
+	.section-content {
+		width: 100%;
+		height: 100%;
+		margin-bottom: 0.5rem; /* Reduce margin */
+	}
+
+	/* 2x2 Chart Grid - responsive to container */
+	.chart-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		gap: 0.25rem; /* Reduce gap */
+		width: 100%;
+		height: 100%;
+		min-height: 0; /* Remove fixed minimum to allow full flexibility */
+		max-height: 100%; /* Ensure it doesn't exceed container */
+	}
+
+	.chart-slot {
+		display: flex;
+		min-height: 0; /* Allow grid to shrink */
+		min-width: 0;
+		max-height: 100%; /* Prevent exceeding grid cell */
+		max-width: 100%;
+		overflow: hidden; /* Prevent slot overflow */
+	}
+
+	/* Ensure ChartCard adapts to slot size */
+	.chart-slot :global(.chart-card) {
+		flex-grow: 1;
+		min-height: 80px; /* Even smaller minimum for grid */
+		max-height: 100%; /* Constrain to slot */
+	}
+
+	.chart-slot :global(.chart-container) {
+		min-height: 80px; /* Even smaller minimum for grid */
+		max-height: 100%; /* Constrain to slot */
+	}
+</style>

package/dist/Charts/ChartComponent.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Layout, Mode, ChartMarker } from './charts.model.js';
+interface Props {
+    layout: Layout;
+    data: any[];
+    mode: Mode;
+    markers?: ChartMarker[];
+    plotlyLayout?: any;
+    enableAdaptation?: boolean;
+}
+declare const ChartComponent: import("svelte").Component<Props, {}, "">;
+type ChartComponent = ReturnType<typeof ChartComponent>;
+export default ChartComponent;

package/dist/Charts/adapt.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Chart-specific adaptation utilities for Plotly layouts
+ * Handles size-based adaptations while preserving external styling/theming
+ */
+import type { ChartMarker } from './charts.model.js';
+export interface ContainerSize {
+    width: number;
+    height: number;
+}
+export interface ChartInfo {
+    leftSeriesCount: number;
+    rightSeriesCount: number;
+}
+export interface AdaptationConfig {
+    enableAdaptation?: boolean;
+}
+/**
+ * Adapts a Plotly layout based on container size
+ * Preserves external styling while optimizing functional properties
+ */
+export declare function adaptPlotlyLayout(baseLayout: any, containerSize: ContainerSize, chartInfo: ChartInfo, config?: AdaptationConfig): any;
+/**
+ * Helper to get size category for debugging/logging
+ */
+export declare function getSizeCategory(containerSize: ContainerSize): 'tiny' | 'small' | 'medium' | 'large';
+/**
+ * Create Plotly shapes for chart markers (vertical lines)
+ */
+export declare function createMarkerShapes(markers: ChartMarker[], yAxisRange?: [number, number]): any[];
+/**
+ * Create Plotly annotations for chart marker labels
+ */
+export declare function createMarkerAnnotations(markers: ChartMarker[], containerSize: ContainerSize, enableAdaptation?: boolean): any[];
+/**
+ * Add markers to a Plotly layout
+ */
+export declare function addMarkersToLayout(layout: any, markers: ChartMarker[], containerSize: ContainerSize, enableAdaptation?: boolean): any;

package/dist/Charts/adapt.js

@@ -0,0 +1,192 @@
+/**
+ * Chart-specific adaptation utilities for Plotly layouts
+ * Handles size-based adaptations while preserving external styling/theming
+ */
+/**
+ * Adapts a Plotly layout based on container size
+ * Preserves external styling while optimizing functional properties
+ */
+export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config = {}) {
+    const { enableAdaptation = true } = config;
+    if (!enableAdaptation)
+        return baseLayout;
+    const { width, height } = containerSize;
+    const adaptedLayout = { ...baseLayout };
+    // Size categories for adaptation rules
+    const isTiny = width < 250 || height < 200;
+    const isSmall = width < 400 || height < 300;
+    const isMedium = width < 600 || height < 400;
+    // Adaptive font scaling for title
+    if (adaptedLayout.title?.font) {
+        if (isTiny) {
+            adaptedLayout.title.font.size = Math.max(10, adaptedLayout.title.font.size * 0.7);
+        }
+        else if (isSmall) {
+            adaptedLayout.title.font.size = Math.max(12, adaptedLayout.title.font.size * 0.8);
+        }
+    }
+    // Adaptive legend behavior
+    if (isTiny) {
+        adaptedLayout.showlegend = false;
+    }
+    else if (isSmall && chartInfo.leftSeriesCount + chartInfo.rightSeriesCount > 2) {
+        // Hide legend for small containers with many series
+        adaptedLayout.showlegend = false;
+    }
+    // Adaptive margins
+    if (isTiny) {
+        adaptedLayout.margin = { l: 35, r: 25, t: 30, b: 25 };
+    }
+    else if (isSmall) {
+        adaptedLayout.margin = { l: 45, r: 35, t: 40, b: 35 };
+    }
+    else if (isMedium) {
+        adaptedLayout.margin = { l: 50, r: 45, t: 50, b: 40 };
+    }
+    // Adaptive axis font sizes
+    if (adaptedLayout.xaxis?.tickfont) {
+        if (isTiny) {
+            adaptedLayout.xaxis.tickfont.size = 8;
+        }
+        else if (isSmall) {
+            adaptedLayout.xaxis.tickfont.size = 9;
+        }
+    }
+    if (adaptedLayout.yaxis?.tickfont) {
+        if (isTiny) {
+            adaptedLayout.yaxis.tickfont.size = 8;
+        }
+        else if (isSmall) {
+            adaptedLayout.yaxis.tickfont.size = 9;
+        }
+    }
+    if (adaptedLayout.yaxis?.title?.font) {
+        if (isTiny) {
+            adaptedLayout.yaxis.title.font.size = 9;
+        }
+        else if (isSmall) {
+            adaptedLayout.yaxis.title.font.size = 10;
+        }
+    }
+    // Apply same adaptations to second Y-axis
+    if (adaptedLayout.yaxis2) {
+        if (adaptedLayout.yaxis2.tickfont) {
+            if (isTiny) {
+                adaptedLayout.yaxis2.tickfont.size = 8;
+            }
+            else if (isSmall) {
+                adaptedLayout.yaxis2.tickfont.size = 9;
+            }
+        }
+        if (adaptedLayout.yaxis2.title?.font) {
+            if (isTiny) {
+                adaptedLayout.yaxis2.title.font.size = 9;
+            }
+            else if (isSmall) {
+                adaptedLayout.yaxis2.title.font.size = 10;
+            }
+        }
+    }
+    // Adaptive legend font size
+    if (adaptedLayout.legend?.font && adaptedLayout.showlegend) {
+        if (isSmall) {
+            adaptedLayout.legend.font.size = 10;
+        }
+    }
+    return adaptedLayout;
+}
+/**
+ * Helper to get size category for debugging/logging
+ */
+export function getSizeCategory(containerSize) {
+    const { width, height } = containerSize;
+    if (width < 250 || height < 200)
+        return 'tiny';
+    if (width < 400 || height < 300)
+        return 'small';
+    if (width < 600 || height < 400)
+        return 'medium';
+    return 'large';
+}
+/**
+ * Create Plotly shapes for chart markers (vertical lines)
+ */
+export function createMarkerShapes(markers, yAxisRange) {
+    if (!markers || markers.length === 0)
+        return [];
+    return markers.map(marker => ({
+        type: 'line',
+        x0: marker.date,
+        x1: marker.date,
+        y0: yAxisRange ? yAxisRange[0] : 0,
+        y1: yAxisRange ? yAxisRange[1] : 1,
+        yref: yAxisRange ? 'y' : 'paper',
+        line: {
+            color: marker.color || '#ff0000',
+            width: 2,
+            dash: marker.style === 'dashed' ? 'dash' : marker.style === 'dotted' ? 'dot' : 'solid'
+        }
+    }));
+}
+/**
+ * Create Plotly annotations for chart marker labels
+ */
+export function createMarkerAnnotations(markers, containerSize, enableAdaptation = true) {
+    if (!markers || markers.length === 0)
+        return [];
+    const sizeCategory = getSizeCategory(containerSize);
+    return markers
+        .filter(marker => {
+        // Hide labels in tiny containers if adaptation is enabled
+        if (enableAdaptation && sizeCategory === 'tiny')
+            return false;
+        // Respect individual marker showLabel setting
+        return marker.showLabel !== false;
+    })
+        .map(marker => {
+        // Adaptive font sizing
+        let fontSize = 10;
+        if (enableAdaptation) {
+            if (sizeCategory === 'small')
+                fontSize = 8;
+            else if (sizeCategory === 'medium')
+                fontSize = 9;
+            else if (sizeCategory === 'large')
+                fontSize = 10;
+        }
+        // Adaptive label positioning
+        const yPosition = sizeCategory === 'small' ? 0.95 : 0.9;
+        return {
+            x: marker.date,
+            y: yPosition,
+            yref: 'paper',
+            text: marker.label,
+            showarrow: true,
+            arrowhead: 2,
+            arrowcolor: marker.color || '#ff0000',
+            arrowsize: sizeCategory === 'small' ? 0.8 : 1,
+            font: {
+                size: fontSize,
+                color: marker.color || '#ff0000'
+            },
+            bgcolor: 'rgba(255,255,255,0.8)',
+            bordercolor: marker.color || '#ff0000',
+            borderwidth: 1
+        };
+    });
+}
+/**
+ * Add markers to a Plotly layout
+ */
+export function addMarkersToLayout(layout, markers, containerSize, enableAdaptation = true) {
+    if (!markers || markers.length === 0)
+        return layout;
+    const updatedLayout = { ...layout };
+    // Add marker shapes (vertical lines)
+    const shapes = createMarkerShapes(markers);
+    updatedLayout.shapes = updatedLayout.shapes ? [...updatedLayout.shapes, ...shapes] : shapes;
+    // Add marker annotations (labels)
+    const annotations = createMarkerAnnotations(markers, containerSize, enableAdaptation);
+    updatedLayout.annotations = updatedLayout.annotations ? [...updatedLayout.annotations, ...annotations] : annotations;
+    return updatedLayout;
+}