@smartnet360/svelte-components 0.0.37 → 0.0.39

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

@@ -11,6 +11,27 @@ const modernColors = [
     '#EC4899', // Pink
     '#6B7280' // Gray
 ];
+/**
+ * Darken a hex color by a given amount
+ * @param color - Hex color string (e.g., '#3B82F6')
+ * @param amount - Amount to darken (0-1, where 0.2 = 20% darker)
+ * @returns Darkened hex color
+ */
+function darkenColor(color, amount) {
+    // Remove # if present
+    const hex = color.replace('#', '');
+    // Parse RGB components
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+    // Darken each component
+    const newR = Math.round(r * (1 - amount));
+    const newG = Math.round(g * (1 - amount));
+    const newB = Math.round(b * (1 - amount));
+    // Convert back to hex
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
 // Cache for processed KPI data to avoid reprocessing on every render
 const dataCache = new WeakMap();
 export function processKPIData(data, kpi) {
@@ -72,7 +93,7 @@ export function calculateMovingAverage(values, window) {
     maCache.set(cacheKey, result);
     return result;
 }
-export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Base trace configuration
@@ -85,6 +106,18 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
             `Value: %{y:,.2f} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
+    // Add colored hover styling if enabled
+    if (coloredHover) {
+        baseTrace.hoverlabel = {
+            bgcolor: traceColor,
+            bordercolor: traceColor,
+            font: {
+                color: '#ffffff', // White text for better contrast
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+            }
+        };
+    }
     // Configure based on chart type
     switch (chartType) {
         case 'stacked-area':
@@ -94,7 +127,10 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 mode: 'lines',
                 fill: 'tonexty',
                 stackgroup: stackGroup || 'one',
-                line: { width: 0.5, color: traceColor },
+                line: {
+                    width: 1.5, // Visible border width
+                    color: darkenColor(traceColor, 0.25) // 25% darker border for better separation
+                },
                 fillcolor: traceColor
             };
         case 'stacked-percentage':
@@ -105,7 +141,10 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 fill: 'tonexty',
                 stackgroup: stackGroup || 'one',
                 groupnorm: 'percent',
-                line: { width: 0.5, color: traceColor },
+                line: {
+                    width: 1.5, // Visible border width
+                    color: darkenColor(traceColor, 0.25) // 25% darker border for better separation
+                },
                 fillcolor: traceColor,
                 hovertemplate: `<b>${kpi.name}</b><br>` +
                     `Percentage: %{y:.1f}%<br>` +
@@ -138,7 +177,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                     width: 3,
                     shape: 'spline',
                     smoothing: 0.3,
-                    dash: yaxis === 'y1' ? 'solid' : 'dot'
+                    dash: kpi.lineStyle || (yaxis === 'y1' ? 'solid' : 'dot')
                 }
             };
     }
@@ -154,12 +193,12 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
  * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     const traces = [];
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Add original trace (unless explicitly disabled)
     if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {
-        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup);
+        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup, coloredHover);
         // If MA is enabled, make the original line slightly transparent
         if (kpi.movingAverage?.enabled) {
             originalTrace.opacity = 0.4;
@@ -190,7 +229,18 @@ export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1
             },
             hovertemplate: `<b>${maLabel}</b><br>` +
                 `Value: %{y:,.2f} ${kpi.unit}<br>` +
-                '<extra></extra>'
+                '<extra></extra>',
+            ...(coloredHover && {
+                hoverlabel: {
+                    bgcolor: traceColor,
+                    bordercolor: traceColor,
+                    font: {
+                        color: '#ffffff',
+                        family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                        size: 11
+                    }
+                }
+            })
         };
         traces.push(maTrace);
     }
@@ -209,7 +259,7 @@ export function formatValue(value, scale, unit) {
     }
     return `${value.toLocaleString()}${unit}`;
 }
-export function createDefaultPlotlyLayout(title) {
+export function createDefaultPlotlyLayout(title, hoverMode, coloredHover = true) {
     return {
         title: title ? {
             text: title,
@@ -254,8 +304,17 @@ export function createDefaultPlotlyLayout(title) {
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
         font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
-        hovermode: 'x',
-        hoverlabel: {
+        hovermode: hoverMode !== undefined ? hoverMode : 'x',
+        hoverlabel: coloredHover ? {
+            // When coloredHover is enabled, let each trace control its own hover colors
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+                // color will be set per trace when coloredHover is true
+            }
+            // bgcolor and bordercolor will be set per trace when coloredHover is true
+        } : {
+            // Default hover styling when coloredHover is disabled
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
                 size: 11,

package/dist/core/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, ChartGrid, ChartPosition } from './charts.model.js';
+export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition, HoverMode, LineStyle, CellStylingConfig } 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/core/Settings/FieldRenderer.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import type { FieldDefinition } from './types';
+	
+	/**
+	 * Generic Field Renderer
+	 * 
+	 * Renders a form field based on its type definition.
+	 * Uses Bootstrap form components for styling.
+	 * Works with hierarchical store structure.
+	 */
+	
+	export let field: FieldDefinition;
+	export let segmentId: string;
+	export let store: any; // The hierarchical settings store
+	export let value: any;
+	
+	// Generate unique ID for form elements
+	const inputId = `field-${segmentId}-${field.id}`;
+	
+	// Handle value changes - update the hierarchical store
+	function handleChange(newValue: any) {
+		store.update(segmentId, field.id, newValue);
+	}
+</script>
+
+<div class="field-wrapper mb-3">
+	{#if field.type === 'boolean'}
+		<div class="form-check form-switch">
+			<input
+				id={inputId}
+				type="checkbox"
+				class="form-check-input"
+				checked={value}
+				disabled={field.disabled}
+				on:change={(e) => handleChange(e.currentTarget.checked)}
+			/>
+			<label class="form-check-label" for={inputId}>
+				{field.label}
+			</label>
+			{#if field.description}
+				<div class="form-text">{field.description}</div>
+			{/if}
+		</div>
+	{:else if field.type === 'text'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<input
+			id={inputId}
+			type="text"
+			class="form-control"
+			value={value}
+			placeholder={field.placeholder}
+			maxlength={field.maxLength}
+			pattern={field.pattern}
+			disabled={field.disabled}
+			on:input={(e) => handleChange(e.currentTarget.value)}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'number'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<div class="input-group">
+			<input
+				id={inputId}
+				type="number"
+				class="form-control"
+				value={value}
+				min={field.min}
+				max={field.max}
+				step={field.step}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+			/>
+			{#if field.unit}
+				<span class="input-group-text">{field.unit}</span>
+			{/if}
+		</div>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'range'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.showValue !== false}
+				<span class="badge bg-secondary ms-2">{value}{field.unit || ''}</span>
+			{/if}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<input
+			id={inputId}
+			type="range"
+			class="form-range"
+			value={value}
+			min={field.min}
+			max={field.max}
+			step={field.step || 1}
+			disabled={field.disabled}
+			on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'color'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<div class="input-group" style="max-width: 200px;">
+			<input
+				id={inputId}
+				type="color"
+				class="form-control form-control-color"
+				value={value}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(e.currentTarget.value)}
+			/>
+			<input
+				type="text"
+				class="form-control"
+				value={value}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(e.currentTarget.value)}
+			/>
+		</div>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'select'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<select
+			id={inputId}
+			class="form-select"
+			value={value}
+			disabled={field.disabled}
+			on:change={(e) => handleChange(e.currentTarget.value)}
+		>
+			{#each field.options as option}
+				<option value={option.value}>
+					{option.label}
+				</option>
+			{/each}
+		</select>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'radio'}
+		<label class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		{#each field.options as option, index}
+			<div class="form-check">
+				<input
+					id={`${inputId}-${index}`}
+					type="radio"
+					class="form-check-input"
+					name={field.id}
+					value={option.value}
+					checked={value === option.value}
+					disabled={field.disabled}
+					on:change={() => handleChange(option.value)}
+				/>
+				<label class="form-check-label" for={`${inputId}-${index}`}>
+					{option.label}
+					{#if option.description}
+						<small class="text-muted d-block">{option.description}</small>
+					{/if}
+				</label>
+			</div>
+		{/each}
+		{#if field.description}
+			<div class="form-text mt-2">{field.description}</div>
+		{/if}
+	{:else if field.type === 'custom'}
+		<label class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<svelte:component
+			this={field.component}
+			{value}
+			disabled={field.disabled}
+			on:change={(e: CustomEvent) => handleChange(e.detail)}
+			{...field.componentProps}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.field-wrapper {
+		animation: fadeIn 0.2s ease-in;
+	}
+	
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-5px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	
+	.text-muted {
+		cursor: help;
+	}
+</style>

package/dist/core/Settings/FieldRenderer.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FieldDefinition } from './types';
+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 FieldRenderer: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * Generic Field Renderer
+         *
+         * Renders a form field based on its type definition.
+         * Uses Bootstrap form components for styling.
+         * Works with hierarchical store structure.
+         */ field: FieldDefinition;
+    segmentId: string;
+    store: any;
+    value: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldRenderer = InstanceType<typeof FieldRenderer>;
+export default FieldRenderer;

package/dist/core/Settings/Settings.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { SettingsSchema } from './types';
+	import { createSettingsStore } from './store';
+	import FieldRenderer from './FieldRenderer.svelte';
+	
+	/**
+	 * Settings Component
+	 * 
+	 * Reusable settings panel that accepts a schema and renders
+	 * a data-driven UI with automatic persistence.
+	 * Provides hierarchical access: $settings.segment.field
+	 * 
+	 * @example
+	 * ```svelte
+	 * const settings = createSettingsStore(mySchema, 'myApp');
+	 * <Settings schema={mySchema} {settings} />
+	 * 
+	 * // Access settings in parent:
+	 * $settings.appearance.theme
+	 * $settings.editor.fontSize
+	 * ```
+	 */
+	
+	/** The settings schema defining all segments and fields */
+	export let schema: SettingsSchema;
+	
+	/** The settings store instance (create externally for access in parent) */
+	export let settings: ReturnType<typeof createSettingsStore>;
+	
+	/** Optional: Callback when settings change */
+	export let onChange: ((values: any) => void) | undefined = undefined;
+	
+	// Current values (hierarchical structure: { segment: { field: value } })
+	let currentValues: Record<string, Record<string, any>> = {};
+	
+	// Track collapsed state of segments
+	let collapsedSegments = new Map<string, boolean>();
+	
+	onMount(() => {
+		// Initialize collapsed states from schema
+		schema.segments.forEach((segment) => {
+			collapsedSegments.set(segment.id, segment.collapsed || false);
+		});
+		
+		// Subscribe to store changes
+		const unsubscribe = settings.subscribe((values) => {
+			currentValues = values;
+			if (onChange) {
+				onChange(values);
+			}
+		});
+		
+		return unsubscribe;
+	});
+	
+	function toggleSegment(segmentId: string) {
+		const current = collapsedSegments.get(segmentId) || false;
+		collapsedSegments.set(segmentId, !current);
+		collapsedSegments = collapsedSegments; // Trigger reactivity
+	}
+	
+	function resetSegmentHandler(segmentId: string) {
+		if (confirm(`Reset "${segmentId}" settings to defaults?`)) {
+			settings.resetSegment(segmentId);
+		}
+	}
+	
+	function resetAll() {
+		if (confirm('Reset all settings to defaults?')) {
+			settings.resetAll();
+		}
+	}
+	
+	// Check if a field should be visible based on visibleIf condition
+	function isFieldVisible(field: any, segmentId: string): boolean {
+		if (!field.visibleIf) return true;
+		// Pass the entire hierarchical structure to visibleIf
+		return field.visibleIf(currentValues);
+	}
+</script>
+
+<div class="settings-container">
+	<!-- Header -->
+	<div class="settings-header mb-4">
+		<div class="d-flex justify-content-between align-items-center">
+			<div>
+				<h2 class="mb-1">Settings</h2>
+				{#if schema.version}
+					<small class="text-muted">Schema v{schema.version}</small>
+				{/if}
+			</div>
+			<button class="btn btn-outline-secondary btn-sm" on:click={resetAll}>
+				Reset All
+			</button>
+		</div>
+	</div>
+	
+	<!-- Settings Cards -->
+	<div class="settings-grid">
+		{#each schema.segments as segment (segment.id)}
+			<div class="card settings-card">
+				<!-- Card Header -->
+				<div class="card-header">
+					<div class="d-flex justify-content-between align-items-center">
+						<div class="d-flex align-items-center gap-2">
+							{#if segment.icon}
+								<span class="segment-icon">{segment.icon}</span>
+							{/if}
+							<div>
+								<h5 class="mb-0">{segment.title}</h5>
+								{#if segment.description}
+									<small class="text-muted">{segment.description}</small>
+								{/if}
+							</div>
+						</div>
+						<div class="d-flex gap-2">
+							<button
+								class="btn btn-sm btn-link text-decoration-none p-0"
+								on:click={() => resetSegmentHandler(segment.id)}
+								title="Reset to defaults"
+							>
+								↺
+							</button>
+							<button
+								class="btn btn-sm btn-link text-decoration-none p-0"
+								on:click={() => toggleSegment(segment.id)}
+								title={collapsedSegments.get(segment.id) ? 'Expand' : 'Collapse'}
+							>
+								{collapsedSegments.get(segment.id) ? '▶' : '▼'}
+							</button>
+						</div>
+					</div>
+				</div>
+				
+				<!-- Card Body -->
+				{#if !collapsedSegments.get(segment.id)}
+					<div class="card-body">
+						{#each segment.fields as field (field.id)}
+							{#if isFieldVisible(field, segment.id)}
+								<FieldRenderer
+									{field}
+									segmentId={segment.id}
+									store={settings}
+									value={currentValues[segment.id]?.[field.id]}
+								/>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.settings-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 1rem;
+	}
+	
+	.settings-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+		gap: 1.5rem;
+	}
+	
+	.settings-card {
+		border: 1px solid var(--bs-border-color);
+		border-radius: 0.5rem;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+		transition: box-shadow 0.2s ease;
+	}
+	
+	.settings-card:hover {
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	}
+	
+	.card-header {
+		background-color: var(--bs-light);
+		border-bottom: 1px solid var(--bs-border-color);
+		padding: 1rem;
+	}
+	
+	.segment-icon {
+		font-size: 1.5rem;
+	}
+	
+	.card-body {
+		padding: 1.5rem;
+	}
+	
+	@media (max-width: 768px) {
+		.settings-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/dist/core/Settings/Settings.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { SettingsSchema } from './types';
+import { createSettingsStore } from './store';
+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 Settings: $$__sveltets_2_IsomorphicComponent<{
+    /** The settings schema defining all segments and fields */ schema: SettingsSchema;
+    /** The settings store instance (create externally for access in parent) */ settings: ReturnType<typeof createSettingsStore>;
+    /** Optional: Callback when settings change */ onChange?: ((values: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Settings = InstanceType<typeof Settings>;
+export default Settings;

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

@@ -0,0 +1,9 @@
+/**
+ * Settings System - Public API
+ *
+ * A data-driven, reusable settings component for SvelteKit applications.
+ * Supports hierarchical access with TypeScript autocomplete.
+ */
+export { default as Settings } from './Settings.svelte';
+export { createSettingsStore, createFieldMap, type InferSettingsType } from './store';
+export type { SettingsSchema, SettingsStore, SettingsValues, SegmentDefinition, FieldDefinition, BaseFieldDefinition, BooleanFieldDefinition, TextFieldDefinition, NumberFieldDefinition, RangeFieldDefinition, ColorFieldDefinition, SelectFieldDefinition, RadioFieldDefinition, CustomFieldDefinition } from './types';

package/dist/core/Settings/index.js

@@ -0,0 +1,8 @@
+/**
+ * Settings System - Public API
+ *
+ * A data-driven, reusable settings component for SvelteKit applications.
+ * Supports hierarchical access with TypeScript autocomplete.
+ */
+export { default as Settings } from './Settings.svelte';
+export { createSettingsStore, createFieldMap } from './store';