@smartnet360/svelte-components 0.0.26 → 0.0.28

package/dist/core/Charts/ChartCard.svelte

@@ -27,9 +27,11 @@
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
 		runtimeMAOverride?: MovingAverageConfig | null; // Runtime override from global controls
 		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
+		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
+		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal }: Props = $props();
+	let { chart, data, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -198,8 +200,16 @@
 			{ enableAdaptation }
 		);
 
-		// Add markers to the layout
-		finalLayout = addMarkersToLayout(finalLayout, markers || [], containerSize, enableAdaptation);
+		// Add markers to the layout only if runtime control allows
+		if (runtimeShowMarkers) {
+			finalLayout = addMarkersToLayout(finalLayout, markers || [], containerSize, enableAdaptation);
+		}
+		
+		// Apply legend visibility control
+		if (finalLayout.showlegend === undefined || finalLayout.showlegend) {
+			// Only override if legend would normally be shown
+			finalLayout.showlegend = runtimeShowLegend;
+		}
 
 		const config = {
 			responsive: true,

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

@@ -10,6 +10,8 @@ interface Props {
     layoutMovingAverage?: MovingAverageConfig;
     runtimeMAOverride?: MovingAverageConfig | null;
     runtimeShowOriginal?: boolean;
+    runtimeShowMarkers?: boolean;
+    runtimeShowLegend?: boolean;
 }
 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> & {

package/dist/core/Charts/ChartComponent.svelte

@@ -54,12 +54,18 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
 	
-	// Global runtime controls state
+	// Global runtime controls state - initialize from layout config
 	let globalControls = $state<GlobalChartControls>({
 		movingAverage: {
-			enabled: true,
+			enabled: layout.movingAverage?.enabled ?? true,
 			windowOverride: undefined,
-			showOriginal: true
+			showOriginal: layout.movingAverage?.showOriginal ?? true
+		},
+		markers: {
+			enabled: true // Default to showing markers
+		},
+		legend: {
+			enabled: true // Default to showing legend
 		}
 	});
 	
@@ -294,6 +300,8 @@
 					layoutMovingAverage={layout.movingAverage}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
+					runtimeShowMarkers={globalControls.markers?.enabled}
+					runtimeShowLegend={globalControls.legend?.enabled}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
 				/>
 			</div>
@@ -434,6 +442,8 @@
 					layoutMovingAverage={layout.movingAverage}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
+					runtimeShowMarkers={globalControls.markers?.enabled}
+					runtimeShowLegend={globalControls.legend?.enabled}
 					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
 				/>
 			</div>

package/dist/core/Charts/GlobalControls.svelte

@@ -26,6 +26,26 @@
 			}
 		});
 	}
+
+	function updateMarkers(updates: Partial<NonNullable<GlobalChartControls['markers']>>) {
+		onUpdate({
+			...controls,
+			markers: {
+				...controls.markers!,
+				...updates
+			}
+		});
+	}
+
+	function updateLegend(updates: Partial<NonNullable<GlobalChartControls['legend']>>) {
+		onUpdate({
+			...controls,
+			legend: {
+				...controls.legend!,
+				...updates
+			}
+		});
+	}
 </script>
 
 <div class="global-controls">
@@ -117,16 +137,39 @@
 				{/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>
+
+		<!-- Markers Toggle -->
+		{#if controls.markers}
+			<div class="control-group">
+				<input
+					type="checkbox"
+					class="btn-check"
+					id="markersToggle"
+					checked={controls.markers.enabled}
+					onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
+				/>
+				<label class="btn btn-outline-secondary btn-sm" for="markersToggle">
+					Markers
+				</label>
 			</div>
-		</div>
-		-->
+		{/if}
+
+		<!-- Legend Toggle -->
+		{#if controls.legend}
+			<div class="control-group">
+				<input
+					type="checkbox"
+					class="btn-check"
+					id="legendToggle"
+					checked={controls.legend.enabled}
+					onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
+				/>
+				<label class="btn btn-outline-secondary btn-sm" for="legendToggle">
+					Legend
+				</label>
+			</div>
+		{/if}
+		
 	</div>
 </div>
 
@@ -147,12 +190,6 @@
 		flex-wrap: wrap;
 	}
 
-	.controls-label {
-		font-weight: 600;
-		color: #495057;
-		margin-right: 0.5rem;
-	}
-
 	.control-group {
 		display: flex;
 		align-items: center;

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

@@ -49,4 +49,10 @@ export interface GlobalChartControls {
         windowOverride?: number;
         showOriginal?: boolean;
     };
+    markers?: {
+        enabled: boolean;
+    };
+    legend?: {
+        enabled: boolean;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.26",
+	"version": "0.0.28",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",