@smartnet360/svelte-components 0.0.4 → 0.0.10

package/dist/Charts/ChartCard.svelte

@@ -1,26 +1,46 @@
 <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;
 
@@ -41,63 +61,13 @@
 			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: { 
-					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: {
-				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' },
-			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'
-			}
+		// 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
@@ -187,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, Section } 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,25 +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>
 
 <!-- Reusable chart grid snippet -->
 {#snippet chartGrid(section: Section)}
-	<div class="chart-grid">
+	{@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} />
+				<ChartCard
+					{chart}
+					{data}
+					{markers}
+					{plotlyLayout}
+					{enableAdaptation}
+					sectionId={section.id}
+					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
+				/>
 			</div>
 		{/each}
 	</div>
 {/snippet}
 
-<div class="chart-component">
-	{#if mode === 'tabs'}
+<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 -->
@@ -60,7 +233,7 @@
 						class="tab-section {section.id === activeTabId ? 'active' : 'hidden'}"
 						data-section-id="{section.id}"
 					>
-						<!-- 2x2 Grid -->
+						<!-- Chart Grid -->
 						{@render chartGrid(section)}
 					</div>
 				{/each}
@@ -84,13 +257,33 @@
 			<div class="scrollspy-content">
 				{#each layout.sections as section}
 					<div class="section-content" id="{section.id}">
-						<!-- 2x2 Grid -->
+							<!-- 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>
@@ -100,6 +293,7 @@
 		height: 100%;
 		display: flex;
 		flex-direction: column;
+		position: relative;
 	}
 
 	/* Tab Mode */
@@ -190,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 {
@@ -222,4 +497,4 @@
 		min-height: 80px; /* Even smaller minimum for grid */
 		max-height: 100%; /* Constrain to slot */
 	}
-</style>
+</style>

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

@@ -6,8 +6,10 @@ export interface KPI {
     unit: string;
     color?: string;
 }
+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[];
@@ -15,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.js

@@ -38,7 +38,7 @@ export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', y
             smoothing: 0.3,
             dash: yaxis === 'y1' ? 'solid' : 'dot' // Y1 = solid, Y2 = dotted
         },
-        hovertemplate: `<b> ${kpi.name}</b><br>` +
+        hovertemplate: `<b>${kpi.name}</b><br>` +
             `Value: %{y:,.2f} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
@@ -91,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,

package/dist/Charts/index.d.ts

@@ -1,6 +1,6 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker } from './charts.model.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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.4",
+	"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",