@smartnet360/svelte-components 0.0.21 → 0.0.23

package/dist/core/Charts/GlobalControls.svelte

@@ -0,0 +1,188 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { GlobalChartControls } from './charts.model.js';
+
+	interface Props {
+		controls: GlobalChartControls;
+		onUpdate: (controls: GlobalChartControls) => void;
+	}
+
+	let { controls, onUpdate }: Props = $props();
+
+	function updateControls(updates: Partial<GlobalChartControls>) {
+		onUpdate({
+			...controls,
+			...updates
+		});
+	}
+
+	function updateMovingAverage(updates: Partial<NonNullable<GlobalChartControls['movingAverage']>>) {
+		onUpdate({
+			...controls,
+			movingAverage: {
+				...controls.movingAverage!,
+				...updates
+			}
+		});
+	}
+</script>
+
+<div class="global-controls">
+	<div class="controls-section">
+		<!-- <span class="controls-label">Display Controls:</span> -->
+		
+		<!-- Moving Average Controls -->
+		{#if controls.movingAverage}
+			<div class="control-group">
+				<!-- MA Enable Toggle Button -->
+				<input
+					type="checkbox"
+					class="btn-check"
+					id="maToggle"
+					checked={controls.movingAverage.enabled}
+					onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
+				/>
+				<label class="btn btn-outline-primary btn-sm" for="maToggle">
+					Moving Average
+				</label>
+				
+				{#if controls.movingAverage.enabled}
+					<div class="control-subgroup">
+						<!-- MA Window Size -->
+						<div class="btn-group btn-group-sm" role="group" aria-label="MA Window">
+							<input
+								type="radio"
+								class="btn-check"
+								name="maWindow"
+								id="maWindowAuto"
+								checked={controls.movingAverage.windowOverride === undefined}
+								onchange={() => updateMovingAverage({ windowOverride: undefined })}
+							/>
+							<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="maWindow"
+								id="maWindow7"
+								checked={controls.movingAverage.windowOverride === 7}
+								onchange={() => updateMovingAverage({ windowOverride: 7 })}
+							/>
+							<label class="btn btn-outline-primary" for="maWindow7">7</label>
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="maWindow"
+								id="maWindow14"
+								checked={controls.movingAverage.windowOverride === 14}
+								onchange={() => updateMovingAverage({ windowOverride: 14 })}
+							/>
+							<label class="btn btn-outline-primary" for="maWindow14">14</label>
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="maWindow"
+								id="maWindow24"
+								checked={controls.movingAverage.windowOverride === 24}
+								onchange={() => updateMovingAverage({ windowOverride: 24 })}
+							/>
+							<label class="btn btn-outline-primary" for="maWindow24">24</label>
+
+							<input
+								type="radio"
+								class="btn-check"
+								name="maWindow"
+								id="maWindow30"
+								checked={controls.movingAverage.windowOverride === 30}
+								onchange={() => updateMovingAverage({ windowOverride: 30 })}
+							/>
+							<label class="btn btn-outline-primary" for="maWindow30">30</label>
+						</div>
+
+						<!-- Show Original Toggle Button -->
+						<input
+							type="checkbox"
+							class="btn-check"
+							id="showOriginal"
+							checked={controls.movingAverage.showOriginal}
+							onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
+						/>
+						<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
+							Show Original
+						</label>
+					</div>
+				{/if}
+			</div>
+		{/if}
+		
+		<!-- Future controls can be added here -->
+		<!-- Example:
+		<div class="control-group">
+			<div class="form-check form-check-inline">
+				<input type="checkbox" id="markersToggle" />
+				<label for="markersToggle">Markers</label>
+			</div>
+		</div>
+		-->
+	</div>
+</div>
+
+<style>
+	/* Global Controls Section */
+	.global-controls {
+		flex-shrink: 0;
+		background-color: #f8f9fa;
+		border-bottom: 1px solid #dee2e6;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+	}
+
+	.controls-section {
+		display: flex;
+		align-items: center;
+		gap: 1.5rem;
+		flex-wrap: wrap;
+	}
+
+	.controls-label {
+		font-weight: 600;
+		color: #495057;
+		margin-right: 0.5rem;
+	}
+
+	.control-group {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.control-subgroup {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 2px solid #dee2e6;
+	}
+
+	.global-controls :global(.btn-group-sm .btn) {
+		padding: 0.25rem 0.75rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 768px) {
+		.controls-section {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.75rem;
+		}
+		
+		.control-subgroup {
+			flex-wrap: wrap;
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { GlobalChartControls } from './charts.model.js';
+interface Props {
+    controls: GlobalChartControls;
+    onUpdate: (controls: GlobalChartControls) => void;
+}
+declare const GlobalControls: import("svelte").Component<Props, {}, "">;
+type GlobalControls = ReturnType<typeof GlobalControls>;
+export default GlobalControls;

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

@@ -43,3 +43,10 @@ export interface ChartMarker {
     showLabel?: boolean;
     category?: 'release' | 'incident' | 'maintenance' | 'other';
 }
+export interface GlobalChartControls {
+    movingAverage?: {
+        enabled: boolean;
+        windowOverride?: number;
+        showOriginal?: boolean;
+    };
+}

package/dist/core/TreeChartView/TreeChartView.svelte

@@ -0,0 +1,208 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	/**
+	 * TreeChartView - Generic component combining TreeView with ChartComponent
+	 * 
+	 * This is a layout component that provides:
+	 * - Left sidebar with TreeView
+	 * - Right panel with ChartComponent
+	 * - Empty state handling
+	 * - Responsive layout
+	 * 
+	 * All data transformation logic should be done externally by the consumer.
+	 */
+	
+	import type { Layout } from '../Charts/charts.model.js';
+	import type { TreeStoreValue } from '../TreeView/tree.model.js';
+	import ChartComponent from '../Charts/ChartComponent.svelte';
+	import { TreeView } from '../TreeView/index.js';
+
+	interface Props {
+		/** Tree store (created externally with createTreeStore) */
+		treeStore: TreeStoreValue;
+		
+		/** Chart data array (consumer's responsibility to filter based on tree state) */
+		chartData: any[];
+		
+		/** Chart layout configuration */
+		chartLayout: Layout;
+		
+		/** Number of total selectable items */
+		totalItems: number;
+		
+		/** Number of currently visible items */
+		visibleItems: number;
+		
+		/** Chart area title */
+		title?: string;
+		
+		/** Chart display mode */
+		mode?: 'tabs' | 'scrollspy';
+		
+		/** Show global chart controls */
+		showGlobalControls?: boolean;
+		
+		/** Enable chart adaptation */
+		enableAdaptation?: boolean;
+		
+		/** Show tree controls (expand/collapse all, etc.) */
+		showTreeControls?: boolean;
+		
+		/** Tree sidebar width */
+		treeWidth?: string;
+		
+		/** Empty state message */
+		emptyMessage?: string;
+	}
+
+	let {
+		treeStore,
+		chartData,
+		chartLayout,
+		totalItems,
+		visibleItems,
+		title = 'Charts',
+		mode = 'tabs',
+		showGlobalControls = true,
+		enableAdaptation = true,
+		showTreeControls = true,
+		treeWidth = '300px',
+		emptyMessage = 'No items selected. Select items from the tree on the left to display charts.'
+	}: Props = $props();
+</script>
+
+<div class="tree-chart-view">
+	<!-- Left: Tree Selector -->
+	<aside class="tree-sidebar" style:width={treeWidth}>
+		<TreeView 
+			store={treeStore} 
+			showControls={showTreeControls} 
+			height="100%" 
+		/>
+	</aside>
+
+	<!-- Right: Charts Area -->
+	<main class="charts-area">
+		<div class="charts-header">
+			<h5 class="mb-0">{title}</h5>
+			<div class="stats">
+				<span class="badge bg-primary">
+					{visibleItems} of {totalItems} selected
+				</span>
+			</div>
+		</div>
+
+		<div class="charts-container">
+			{#if visibleItems === 0}
+				<div class="empty-state">
+					<div class="empty-state-content">
+						<i class="bi bi-info-circle" style="font-size: 3rem; color: #6c757d;"></i>
+						<h4 class="mt-3">No Items Selected</h4>
+						<p class="text-muted">
+							{emptyMessage}
+						</p>
+					</div>
+				</div>
+			{:else}
+				<ChartComponent
+					layout={chartLayout}
+					data={chartData}
+					{mode}
+					{showGlobalControls}
+					{enableAdaptation}
+				/>
+			{/if}
+		</div>
+	</main>
+</div>
+
+<style>
+	.tree-chart-view {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		gap: 0;
+		background-color: #fff;
+	}
+
+	.tree-sidebar {
+		flex-shrink: 0;
+		height: 100%;
+		overflow: hidden;
+		border-right: 1px solid #dee2e6;
+	}
+
+	.charts-area {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		height: 100%;
+	}
+
+	.charts-header {
+		padding: 1rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #f8f9fa;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.charts-header h5 {
+		margin: 0;
+		color: #495057;
+	}
+
+	.stats {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.charts-container {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	.empty-state-content {
+		text-align: center;
+		max-width: 400px;
+		padding: 2rem;
+	}
+
+	.empty-state-content h4 {
+		color: #495057;
+		margin-bottom: 0.5rem;
+	}
+
+	/* Responsive layout */
+	@media (max-width: 992px) {
+		.tree-sidebar {
+			width: 250px !important;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.tree-chart-view {
+			flex-direction: column;
+		}
+
+		.tree-sidebar {
+			width: 100% !important;
+			height: 300px;
+			border-right: none;
+			border-bottom: 1px solid #dee2e6;
+		}
+	}
+</style>

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

@@ -0,0 +1,42 @@
+/**
+     * TreeChartView - Generic component combining TreeView with ChartComponent
+     *
+     * This is a layout component that provides:
+     * - Left sidebar with TreeView
+     * - Right panel with ChartComponent
+     * - Empty state handling
+     * - Responsive layout
+     *
+     * All data transformation logic should be done externally by the consumer.
+     */
+import type { Layout } from '../Charts/charts.model.js';
+import type { TreeStoreValue } from '../TreeView/tree.model.js';
+interface Props {
+    /** Tree store (created externally with createTreeStore) */
+    treeStore: TreeStoreValue;
+    /** Chart data array (consumer's responsibility to filter based on tree state) */
+    chartData: any[];
+    /** Chart layout configuration */
+    chartLayout: Layout;
+    /** Number of total selectable items */
+    totalItems: number;
+    /** Number of currently visible items */
+    visibleItems: number;
+    /** Chart area title */
+    title?: string;
+    /** Chart display mode */
+    mode?: 'tabs' | 'scrollspy';
+    /** Show global chart controls */
+    showGlobalControls?: boolean;
+    /** Enable chart adaptation */
+    enableAdaptation?: boolean;
+    /** Show tree controls (expand/collapse all, etc.) */
+    showTreeControls?: boolean;
+    /** Tree sidebar width */
+    treeWidth?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare const TreeChartView: import("svelte").Component<Props, {}, "">;
+type TreeChartView = ReturnType<typeof TreeChartView>;
+export default TreeChartView;

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

@@ -0,0 +1,7 @@
+/**
+ * TreeChartView - Combined Layout Component
+ *
+ * Provides a split-screen layout combining TreeView (left) with ChartComponent (right).
+ * This is a LAYOUT component - all data transformation is the consumer's responsibility.
+ */
+export { default as TreeChartView } from './TreeChartView.svelte';

package/dist/core/TreeChartView/index.js

@@ -0,0 +1,7 @@
+/**
+ * TreeChartView - Combined Layout Component
+ *
+ * Provides a split-screen layout combining TreeView (left) with ChartComponent (right).
+ * This is a LAYOUT component - all data transformation is the consumer's responsibility.
+ */
+export { default as TreeChartView } from './TreeChartView.svelte';

package/dist/core/TreeView/TreeNode.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import type { NodeState, TreeStoreValue } from './tree.model';
+	import TreeNode from './TreeNode.svelte';
+
+	interface Props {
+		nodeState: NodeState;
+		store: TreeStoreValue;
+		showIndeterminate?: boolean;
+	}
+
+	let { nodeState, store, showIndeterminate = true }: Props = $props();
+
+	// Computed states
+	let isChecked = $derived(store.state.checkedPaths.has(nodeState.path));
+	let isIndeterminate = $derived(
+		showIndeterminate && store.state.indeterminatePaths.has(nodeState.path)
+	);
+	let isExpanded = $derived(store.state.expandedPaths.has(nodeState.path));
+	let hasChildren = $derived(nodeState.childPaths.length > 0);
+
+	// Get child node states
+	let childNodes = $derived(
+		nodeState.childPaths
+			.map(path => store.state.nodes.get(path))
+			.filter((node): node is NodeState => node !== undefined)
+	);
+
+	// Indentation based on level
+	let indentStyle = $derived(`padding-left: ${nodeState.level * 1.5}rem`);
+
+	function handleToggle() {
+		store.toggle(nodeState.path);
+	}
+
+	function handleExpandToggle() {
+		if (hasChildren) {
+			store.toggleExpand(nodeState.path);
+		}
+	}
+</script>
+
+<div class="tree-node" style={indentStyle}>
+	<div class="tree-node-content">
+		<!-- Expand/Collapse Button -->
+		{#if hasChildren}
+			<button
+				type="button"
+				class="btn btn-sm btn-link expand-toggle p-0"
+				onclick={handleExpandToggle}
+				aria-label={isExpanded ? 'Collapse' : 'Expand'}
+			>
+				{#if isExpanded}
+					<i class="bi bi-chevron-down"></i>
+				{:else}
+					<i class="bi bi-chevron-right"></i>
+				{/if}
+			</button>
+		{:else}
+			<span class="expand-placeholder"></span>
+		{/if}
+
+		<!-- Checkbox -->
+		<div class="form-check">
+			<input
+				type="checkbox"
+				class="form-check-input"
+				class:indeterminate={isIndeterminate}
+				checked={isChecked}
+				indeterminate={isIndeterminate}
+				onchange={handleToggle}
+				id={`checkbox-${nodeState.path}`}
+			/>
+			<label class="form-check-label" for={`checkbox-${nodeState.path}`}>
+				{#if nodeState.node.icon}
+					<span class="node-icon">{nodeState.node.icon}</span>
+				{/if}
+				<span class="node-label">{nodeState.node.label}</span>
+			</label>
+		</div>
+	</div>
+
+	<!-- Recursive Children -->
+	{#if hasChildren && isExpanded}
+		<div class="tree-node-children">
+			{#each childNodes as childNode (childNode.path)}
+				<TreeNode nodeState={childNode} {store} {showIndeterminate} />
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tree-node {
+		position: relative;
+	}
+
+	.tree-node-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0;
+		min-height: 2rem;
+	}
+
+	.expand-toggle {
+		width: 1.5rem;
+		height: 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: #6c757d;
+		text-decoration: none;
+	}
+
+	.expand-toggle:hover {
+		color: #495057;
+		background-color: #f8f9fa;
+		border-radius: 0.25rem;
+	}
+
+	.expand-toggle:focus {
+		outline: 2px solid #0d6efd;
+		outline-offset: 2px;
+	}
+
+	.expand-placeholder {
+		width: 1.5rem;
+		height: 1.5rem;
+		display: inline-block;
+	}
+
+	.form-check {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		margin: 0;
+		flex-shrink: 0;
+	}
+
+	/* Indeterminate checkbox styling */
+	.form-check-input.indeterminate {
+		background-color: #0d6efd;
+		border-color: #0d6efd;
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+	}
+
+	.form-check-label {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+		user-select: none;
+	}
+
+	.node-icon {
+		font-size: 1.1rem;
+		line-height: 1;
+	}
+
+	.node-label {
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+</style>

package/dist/core/TreeView/TreeNode.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { NodeState, TreeStoreValue } from './tree.model';
+import TreeNode from './TreeNode.svelte';
+interface Props {
+    nodeState: NodeState;
+    store: TreeStoreValue;
+    showIndeterminate?: boolean;
+}
+declare const TreeNode: import("svelte").Component<Props, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;