@smartnet360/svelte-components 0.0.3 → 0.0.10

package/dist/Charts/ChartCard.svelte

@@ -1,83 +1,73 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { onMount } from 'svelte';
+	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 } from './data-utils.js';
+	import { createTimeSeriesTrace, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 
+	const dispatch = createEventDispatcher<{
+		chartcontextmenu: {
+			chart: ChartModel;
+			sectionId?: string;
+			clientX: number;
+			clientY: number;
+		};
+	}>();
+
 	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)
+		sectionId?: string;
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true }: Props = $props();
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
 	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
 
+	function handleContextMenu(event: MouseEvent) {
+		event.preventDefault();
+		dispatch('chartcontextmenu', {
+			chart,
+			sectionId,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+	}
+
 	function renderChart() {
 		if (!chartDiv || !data?.length) return;
 
 		const traces: any[] = [];
+		let colorIndex = 0;
 
 		// Add left Y-axis traces
 		chart.yLeft.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1');
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1', colorIndex);
 			traces.push(trace);
+			colorIndex++;
 		});
 
 		// Add right Y-axis traces
 		chart.yRight.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2');
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2', colorIndex);
 			traces.push(trace);
+			colorIndex++;
 		});
 
-		// 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' }
+		// Create default modern layout using the centralized function
+		const defaultLayout: any = createDefaultPlotlyLayout(chart.title);
+		
+		// Override specific properties for this chart
+		defaultLayout.yaxis.title = {
+			text: getYAxisTitle(chart.yLeft),
+			font: { size: 12, color: '#7f8c8d' }
 		};
 
 		// Add second Y-axis if we have right-side KPIs
@@ -167,7 +157,7 @@
 	});
 </script>
 
-<div class="chart-card">
+<div class="chart-card" role="group" oncontextmenu={handleContextMenu}>
 	<div
 		bind:this={chartDiv}
 		class="chart-container"

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

@@ -5,7 +5,30 @@ interface Props {
     markers?: ChartMarker[];
     plotlyLayout?: any;
     enableAdaptation?: boolean;
+    sectionId?: string;
 }
-declare const ChartCard: import("svelte").Component<Props, {}, "">;
-type ChartCard = ReturnType<typeof ChartCard>;
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChartCard: $$__sveltets_2_IsomorphicComponent<Props, {
+    chartcontextmenu: CustomEvent<{
+        chart: ChartModel;
+        sectionId?: string;
+        clientX: number;
+        clientY: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChartCard = InstanceType<typeof ChartCard>;
 export default ChartCard;

package/dist/Charts/ChartComponent.svelte

@@ -1,7 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { Layout, Mode, ChartMarker } from './charts.model.js';
+	import { onMount } from 'svelte';
+	import type { Layout, Mode, ChartMarker, Section, ChartGrid, Chart } from './charts.model.js';
 	import ChartCard from './ChartCard.svelte';
 
 	interface Props {
@@ -13,14 +14,197 @@
 		enableAdaptation?: boolean; // Enable size-based adaptations
 	}
 
+	const GRID_DIMENSIONS: Record<ChartGrid, { rows: number; columns: number }> = {
+		'2x2': { rows: 2, columns: 2 },
+		'3x3': { rows: 3, columns: 3 },
+		'1x2': { rows: 1, columns: 2 },
+		'1x4': { rows: 1, columns: 4 },
+		'1x8': { rows: 1, columns: 8 }
+	};
+
+	const DEFAULT_GRID: ChartGrid = '2x2';
+
+	function getGridConfig(grid: ChartGrid | undefined) {
+		const key = grid && GRID_DIMENSIONS[grid] ? grid : DEFAULT_GRID;
+		return { key, ...GRID_DIMENSIONS[key] };
+	}
+
+	interface ContextMenuDetail {
+		chart: Chart;
+		sectionId?: string;
+		clientX: number;
+		clientY: number;
+	}
+
+	interface ContextMenuState {
+		visible: boolean;
+		x: number;
+		y: number;
+		chart: Chart | null;
+		section: Section | null;
+	}
+
+	interface ZoomState {
+		chart: Chart;
+		section: Section;
+	}
+
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true }: Props = $props();
 	
 	// Internal tab state management
 	let activeTabId = $state(layout.sections[0]?.id || '');
+
+	let componentElement: HTMLDivElement;
+	let contextMenuElement = $state<HTMLDivElement | null>(null);
+
+	const contextMenu = $state<ContextMenuState>({
+		visible: false,
+		x: 0,
+		y: 0,
+		chart: null,
+		section: null
+	});
+
+	let zoomedChart = $state<ZoomState | null>(null);
+
+	const MENU_WIDTH = 168;
+	const MENU_HEIGHT = 96;
+
+	function computeMenuPosition(clientX: number, clientY: number) {
+		if (!componentElement) {
+			return { x: clientX, y: clientY };
+		}
+
+		const rect = componentElement.getBoundingClientRect();
+		let x = clientX - rect.left;
+		let y = clientY - rect.top;
+
+		const maxX = Math.max(0, rect.width - MENU_WIDTH);
+		const maxY = Math.max(0, rect.height - MENU_HEIGHT);
+
+		x = Math.min(Math.max(0, x), maxX);
+		y = Math.min(Math.max(0, y), maxY);
+
+		return { x, y };
+	}
+
+	function closeContextMenu() {
+		contextMenu.visible = false;
+		contextMenu.chart = null;
+		contextMenu.section = null;
+	}
+
+	function handleChartContextMenu(detail: ContextMenuDetail, section: Section) {
+		const { x, y } = computeMenuPosition(detail.clientX, detail.clientY);
+
+		contextMenu.visible = true;
+		contextMenu.x = x;
+		contextMenu.y = y;
+		contextMenu.chart = detail.chart;
+		contextMenu.section = section;
+	}
+
+	function zoomSelectedChart() {
+		if (contextMenu.chart && contextMenu.section) {
+			zoomedChart = { chart: contextMenu.chart, section: contextMenu.section };
+		}
+		closeContextMenu();
+	}
+
+	function exitZoom() {
+		zoomedChart = null;
+		closeContextMenu();
+	}
+
+	function handleOverlayKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			exitZoom();
+		}
+	}
+
+	function handleOverlayClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			exitZoom();
+		}
+	}
+
+	onMount(() => {
+		const handleKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				if (zoomedChart) {
+					exitZoom();
+				}
+				closeContextMenu();
+			}
+		};
+
+		const handleGlobalClick = (event: MouseEvent) => {
+			if (!contextMenu.visible) return;
+			const target = event.target as Node;
+			if (contextMenuElement && contextMenuElement.contains(target)) return;
+			closeContextMenu();
+		};
+
+		window.addEventListener('keydown', handleKeydown);
+		window.addEventListener('click', handleGlobalClick);
+
+		return () => {
+			window.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('click', handleGlobalClick);
+		};
+	});
 </script>
 
-<div class="chart-component">
-	{#if mode === 'tabs'}
+<!-- Reusable chart grid snippet -->
+{#snippet chartGrid(section: Section)}
+	{@const gridConfig = getGridConfig(section.grid)}
+	<div
+		class="chart-grid"
+		data-grid={gridConfig.key}
+		style:grid-template-columns={`repeat(${gridConfig.columns}, minmax(0, 1fr))`}
+		style:grid-template-rows={`repeat(${gridConfig.rows}, minmax(0, 1fr))`}
+	>
+		{#each section.charts as chart}
+			<div class="chart-slot">
+				<ChartCard
+					{chart}
+					{data}
+					{markers}
+					{plotlyLayout}
+					{enableAdaptation}
+					sectionId={section.id}
+					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
+				/>
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
+<div class="chart-component" bind:this={componentElement}>
+	{#if zoomedChart}
+		{@const activeZoom = zoomedChart as ZoomState}
+		<div
+			class="zoom-overlay"
+			role="button"
+			tabindex="0"
+			onclick={handleOverlayClick}
+			onkeydown={handleOverlayKeydown}
+		>
+			<div class="zoom-container">
+				<button type="button" class="zoom-close" onclick={exitZoom} aria-label="Exit zoom">×</button>
+				<ChartCard
+					chart={activeZoom.chart}
+					{data}
+					{markers}
+					{plotlyLayout}
+					{enableAdaptation}
+					sectionId={activeZoom.section.id}
+					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
+				/>
+			</div>
+		</div>
+	{:else if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
 		<div class="tabs-container">
 			<!-- Tab Navigation -->
@@ -49,14 +233,8 @@
 						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>
+						<!-- Chart Grid -->
+						{@render chartGrid(section)}
 					</div>
 				{/each}
 			</div>
@@ -79,19 +257,33 @@
 			<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>
+							<!-- Chart Grid -->
+						{@render chartGrid(section)}
 					</div>
 				{/each}
 			</div>
 		</div>
 	{/if}
+
+	{#if contextMenu.visible}
+		<div
+			class="chart-context-menu"
+			style:top={`${contextMenu.y}px`}
+			style:left={`${contextMenu.x}px`}
+			bind:this={contextMenuElement}
+		>
+			{#if (!zoomedChart || zoomedChart.chart !== contextMenu.chart) && contextMenu.chart && contextMenu.section}
+				<button type="button" class="menu-item" onclick={zoomSelectedChart}>
+					Zoom to chart
+				</button>
+			{/if}
+			{#if zoomedChart}
+				<button type="button" class="menu-item" onclick={exitZoom}>
+					Exit zoom
+				</button>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -101,6 +293,7 @@
 		height: 100%;
 		display: flex;
 		flex-direction: column;
+		position: relative;
 	}
 
 	/* Tab Mode */
@@ -191,16 +384,97 @@
 		margin-bottom: 0.5rem; /* Reduce margin */
 	}
 
-	/* 2x2 Chart Grid - responsive to container */
+	.chart-context-menu {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		background: #ffffff;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 6px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+		z-index: 20;
+		min-width: 140px;
+	}
+
+	.chart-context-menu .menu-item {
+		background: none;
+		border: none;
+		text-align: left;
+		padding: 0.375rem 0.5rem;
+		border-radius: 4px;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.chart-context-menu .menu-item:hover {
+		background-color: #f1f3f5;
+	}
+
+	.zoom-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 15;
+		padding: 1.5rem;
+		box-sizing: border-box;
+	}
+
+	.zoom-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		max-width: 1200px;
+		max-height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.zoom-container :global(.chart-card) {
+		flex: 1;
+	}
+
+	.zoom-close {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		background: rgba(0, 0, 0, 0.6);
+		color: #ffffff;
+		border: none;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 50%;
+		cursor: pointer;
+		font-size: 1.25rem;
+		line-height: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background 0.2s ease;
+		z-index: 1;
+	}
+
+	.zoom-close:hover {
+		background: rgba(0, 0, 0, 0.75);
+	}
+
+	/* Chart grid adapts to layout configuration */
 	.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 */
+		grid-auto-rows: minmax(0, 1fr);
+		grid-auto-columns: minmax(0, 1fr);
 	}
 
 	.chart-slot {
@@ -223,4 +497,4 @@
 		min-height: 80px; /* Even smaller minimum for grid */
 		max-height: 100%; /* Constrain to slot */
 	}
-</style>
+</style>

package/dist/Charts/adapt.js

@@ -90,7 +90,10 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
     // Adaptive legend font size
     if (adaptedLayout.legend?.font && adaptedLayout.showlegend) {
         if (isSmall) {
-            adaptedLayout.legend.font.size = 10;
+            adaptedLayout.legend.font.size = 9;
+        }
+        else {
+            adaptedLayout.legend.font.size = 11;
         }
     }
     return adaptedLayout;
@@ -154,24 +157,22 @@ export function createMarkerAnnotations(markers, containerSize, enableAdaptation
             else if (sizeCategory === 'large')
                 fontSize = 10;
         }
-        // Adaptive label positioning
-        const yPosition = sizeCategory === 'small' ? 0.95 : 0.9;
         return {
             x: marker.date,
-            y: yPosition,
+            y: 1, // Top of chart area
             yref: 'paper',
             text: marker.label,
-            showarrow: true,
-            arrowhead: 2,
-            arrowcolor: marker.color || '#ff0000',
-            arrowsize: sizeCategory === 'small' ? 0.8 : 1,
+            showarrow: false, // Remove arrow
+            yanchor: 'bottom', // Anchor to bottom so text appears below the top line
+            xanchor: 'center', // Center the text horizontally
             font: {
                 size: fontSize,
                 color: marker.color || '#ff0000'
             },
-            bgcolor: 'rgba(255,255,255,0.8)',
+            bgcolor: 'rgba(255,255,255,0.9)', // More opaque background
             bordercolor: marker.color || '#ff0000',
-            borderwidth: 1
+            borderwidth: 1,
+            borderpad: 2
         };
     });
 }

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

@@ -1,15 +1,15 @@
 export type Scale = "percent" | "absolute";
-export type Aggregation = "avg" | "max" | "min" | "sum";
 export interface KPI {
     rawName: string;
     name: string;
     scale: Scale;
     unit: string;
     color?: string;
-    aggregation: Aggregation;
 }
+export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export type ChartGrid = "2x2" | "3x3" | "1x2" | "1x4" | "1x8";
 export interface Chart {
-    pos: 1 | 2 | 3 | 4;
+    pos?: ChartPosition;
     title: string;
     yLeft: KPI[];
     yRight: KPI[];
@@ -17,7 +17,8 @@ export interface Chart {
 export interface Section {
     id: string;
     title: string;
-    charts: [Chart, Chart, Chart, Chart];
+    charts: Chart[];
+    grid?: ChartGrid;
 }
 export type Mode = "tabs" | "scrollspy";
 export interface Layout {

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

@@ -1,13 +1,6 @@
 import type { KPI } from './charts.model.js';
-export type AggregationType = 'avg' | 'sum' | 'max' | 'min';
-export declare function aggregateValue(values: number[], aggregation: AggregationType): number;
-export declare function processKPIData(data: any[], kpi: KPI): {
-    values: number[];
-    aggregated: number;
-};
-export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2'): any;
-export declare function createBarTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2'): any;
-export declare function createPieTrace(data: any[], kpi: KPI, timestampField?: string): any;
+export declare function processKPIData(data: any[], kpi: KPI): number[];
+export declare function createTimeSeriesTrace(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/Charts/data-utils.js

@@ -1,77 +1,46 @@
-export function aggregateValue(values, aggregation) {
-    switch (aggregation) {
-        case 'avg':
-            return values.reduce((sum, val) => sum + val, 0) / values.length;
-        case 'sum':
-            return values.reduce((sum, val) => sum + val, 0);
-        case 'max':
-            return Math.max(...values);
-        case 'min':
-            return Math.min(...values);
-        default:
-            return values[0] || 0;
-    }
-}
+// Modern color palette similar to Chart.js
+const modernColors = [
+    '#3B82F6', // Blue
+    '#EF4444', // Red
+    '#10B981', // Emerald
+    '#F59E0B', // Amber
+    '#8B5CF6', // Violet
+    '#06B6D4', // Cyan
+    '#F97316', // Orange
+    '#84CC16', // Lime
+    '#EC4899', // Pink
+    '#6B7280' // Gray
+];
 export function processKPIData(data, kpi) {
-    const rawValues = data
+    return data
         .map(row => {
         const val = row[kpi.rawName];
         return typeof val === 'number' ? val : parseFloat(val);
     })
         .filter(val => !isNaN(val));
-    const aggregated = aggregateValue(rawValues, kpi.aggregation);
-    return {
-        values: rawValues,
-        aggregated
-    };
 }
-export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1') {
-    const processed = processKPIData(data, kpi);
+export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
+    const values = processKPIData(data, kpi);
     const timestamps = data.map(row => row[timestampField]);
+    // Use KPI color if provided, otherwise cycle through modern colors
+    const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     return {
         x: timestamps,
-        y: processed.values,
+        y: values,
         type: 'scatter',
-        mode: 'lines+markers',
+        mode: 'lines', // Only lines, no markers
         name: kpi.name,
         yaxis: yaxis,
         line: {
-            color: kpi.color || '#1f77b4',
-            width: 2
+            color: traceColor,
+            width: 3,
+            shape: 'spline',
+            smoothing: 0.3,
+            dash: yaxis === 'y1' ? 'solid' : 'dot' // Y1 = solid, Y2 = dotted
         },
-        marker: {
-            size: 4
-        }
-    };
-}
-export function createBarTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1') {
-    const processed = processKPIData(data, kpi);
-    const timestamps = data.map(row => row[timestampField]);
-    return {
-        x: timestamps,
-        y: processed.values,
-        type: 'bar',
-        name: kpi.name,
-        yaxis: yaxis,
-        marker: {
-            color: kpi.color || '#1f77b4'
-        }
-    };
-}
-export function createPieTrace(data, kpi, timestampField = 'TIMESTAMP') {
-    const processed = processKPIData(data, kpi);
-    const timestamps = data.map(row => row[timestampField]);
-    // For pie charts, we'll show the latest value
-    const latestValue = processed.values[processed.values.length - 1];
-    const latestTimestamp = timestamps[timestamps.length - 1];
-    return {
-        values: [latestValue],
-        labels: [kpi.name],
-        type: 'pie',
-        name: `${kpi.name} (${latestTimestamp})`,
-        marker: {
-            colors: [kpi.color || '#1f77b4']
-        }
+        hovertemplate: `<b>${kpi.name}</b><br>` +
+            `Value: %{y:,.2f} ${kpi.unit}<br>` +
+            '<extra></extra>'
     };
 }
 export function getYAxisTitle(kpis) {
@@ -105,7 +74,14 @@ export function createDefaultPlotlyLayout(title) {
             y: 1,
             xanchor: 'right',
             yanchor: 'top',
-            font: { size: 12 }
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11,
+                color: '#6B7280'
+            },
+            bgcolor: 'rgba(255,255,255,0.9)',
+            bordercolor: '#6B7280',
+            borderwidth: 1
         },
         xaxis: {
             title: {
@@ -115,7 +91,9 @@ export function createDefaultPlotlyLayout(title) {
             showgrid: true,
             gridcolor: '#ecf0f1',
             linecolor: '#bdc3c7',
-            tickfont: { size: 11 }
+            tickfont: { size: 11 },
+            tickformat: '%m-%d',
+            hoverformat: '%Y-%m-%d'
         },
         yaxis: {
             showgrid: true,
@@ -126,6 +104,16 @@ export function createDefaultPlotlyLayout(title) {
         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' }
+        font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
+        hovermode: 'x unified',
+        hoverlabel: {
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11,
+                color: '#6B7280'
+            },
+            bgcolor: 'rgba(255,255,255,0.9)',
+            bordercolor: '#6B7280'
+        }
     };
 }

package/dist/Charts/index.d.ts

@@ -1,7 +1,6 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export type { Layout, Section, Chart, KPI, Mode, Scale, Aggregation, ChartMarker } from './charts.model.js';
-export { createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
-export type { AggregationType } from './data-utils.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/Charts/index.js

@@ -1,4 +1,4 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export { createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
+export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';

package/dist/Desktop/launchHelpers.js

@@ -4,28 +4,31 @@
  * Utility functions to help parent applications implement grid launching functionality.
  * These are optional helpers - parents can implement their own launch logic.
  */
+const createLaunchKey = () => `grid-viewer-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+const snapshotComponents = (components) => components.map(({ id, name, icon, description, category }) => ({
+    id,
+    name,
+    icon,
+    description,
+    category
+}));
+const persistGridConfiguration = (grid, componentConfigs) => {
+    const key = createLaunchKey();
+    const payload = {
+        grid,
+        componentConfigs
+    };
+    localStorage.setItem(key, JSON.stringify(payload));
+    return key;
+};
 /**
  * Create a launch handler that opens grids in new tabs using localStorage
  * This recreates the previous built-in behavior as a reusable helper
  */
 export function createWindowLauncher(gridViewerUrl, availableComponents) {
+    const componentSnapshot = snapshotComponents(availableComponents);
     return (grid) => {
-        // Create temporary storage key
-        const key = `grid-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        // Store only the grid configuration and component IDs - not the actual components
-        const data = {
-            grid,
-            // Store component configs without the actual component objects
-            componentConfigs: availableComponents.map(comp => ({
-                id: comp.id,
-                name: comp.name,
-                icon: comp.icon,
-                description: comp.description,
-                category: comp.category
-            }))
-        };
-        localStorage.setItem(key, JSON.stringify(data));
-        // Open new tab with the key parameter
+        const key = persistGridConfiguration(grid, componentSnapshot);
         const url = `${gridViewerUrl}?key=${key}`;
         const newTab = window.open(url, '_blank');
         // Focus the new tab if it opened successfully
@@ -49,21 +52,9 @@ export function createTabLauncher(gridViewerUrl, availableComponents) {
  * Create a launch handler that uses direct URL navigation (same tab)
  */
 export function createNavigationLauncher(gridViewerUrl, availableComponents) {
+    const componentSnapshot = snapshotComponents(availableComponents);
     return (grid) => {
-        // Create temporary storage key
-        const key = `grid-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const data = {
-            grid,
-            componentConfigs: availableComponents.map(comp => ({
-                id: comp.id,
-                name: comp.name,
-                icon: comp.icon,
-                description: comp.description,
-                category: comp.category
-            }))
-        };
-        localStorage.setItem(key, JSON.stringify(data));
-        // Navigate to the grid viewer in the same tab
+        const key = persistGridConfiguration(grid, componentSnapshot);
         window.location.href = `${gridViewerUrl}?key=${key}`;
     };
 }

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, type ComponentConfig, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, type GridLayoutDefinition, type GridSlot, type ComponentAssignment, type GridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
-export { ChartComponent, ChartCard, type Layout, type Section, type Chart, type KPI, type Mode, type Scale, type Aggregation, createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout, type AggregationType } from './Charts/index.js';
+export { ChartComponent, ChartCard, type Layout, type Section, type Chart, type KPI, type Mode, type Scale, type ChartMarker, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';

package/dist/index.js

@@ -1,2 +1,2 @@
 export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
-export { ChartComponent, ChartCard, createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';
+export { ChartComponent, ChartCard, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.3",
+	"version": "0.0.10",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -11,9 +11,9 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"release:patch": "npm version patch && npm publish --access public",
-		"release:minor": "npm version minor && npm publish --access public",
-		"release:major": "npm version major && npm publish --access public"
+		"release:patch": "npm version patch && npm publish --access public --no-browser",
+		"release:minor": "npm version minor && npm publish --access public --no-browser",
+		"release:major": "npm version major && npm publish --access public --no-browser"
 	},
 	"files": [
 		"dist",
@@ -32,8 +32,8 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"plotly.js-dist-min": "^3.1.0"
+		"plotly.js-dist-min": "^3.1.0",
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",