@smartnet360/svelte-components 0.0.17 → 0.0.20

package/dist/core/Charts/editor/PropertiesPanel.svelte

@@ -0,0 +1,286 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { editorStore, currentLayout, selection, selectedItem } from './editorState.js';
+	import type { ChartGrid, Section, Chart } from '../charts.model.js';
+
+	const dispatch = createEventDispatcher();
+
+	const gridOptions: ChartGrid[] = ['2x2', '3x3', '4x4', '1x2', '1x4', '1x8'];
+
+	function handleOpenKPIPicker(side: 'yLeft' | 'yRight') {
+		if ($selection.type === 'chart' && $selection.sectionId && $selection.chartIndex !== undefined) {
+			dispatch('openkpipicker', {
+				sectionId: $selection.sectionId,
+				chartIndex: $selection.chartIndex,
+				side
+			});
+		}
+	}
+
+	function handleRemoveKPI(side: 'yLeft' | 'yRight', kpiIndex: number) {
+		if ($selection.type === 'chart' && $selection.sectionId && $selection.chartIndex !== undefined) {
+			editorStore.removeKPI($selection.sectionId, $selection.chartIndex, side, kpiIndex);
+		}
+	}
+
+	function handleDeleteSection() {
+		if ($selection.sectionId && confirm('Delete this section and all its charts?')) {
+			editorStore.deleteSection($selection.sectionId);
+		}
+	}
+
+	function handleDeleteChart() {
+		if ($selection.sectionId && $selection.chartIndex !== undefined && confirm('Delete this chart?')) {
+			editorStore.deleteChart($selection.sectionId, $selection.chartIndex);
+		}
+	}
+</script>
+
+<div class="properties-panel h-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="p-3 border-bottom bg-light">
+		<h6 class="mb-0">
+			<i class="bi bi-sliders"></i> Properties
+		</h6>
+	</div>
+
+	<!-- Content -->
+	<div class="flex-grow-1 overflow-auto p-3">
+		{#if !$selection.type}
+			<div class="text-center text-muted mt-5">
+				<i class="bi bi-hand-index display-4"></i>
+				<p class="mt-3">Select an item to edit its properties</p>
+			</div>
+		{:else if $selection.type === 'layout'}
+			<!-- Layout Properties -->
+			<div class="mb-3">
+				<label class="form-label fw-bold">Layout Name</label>
+				<input
+					type="text"
+					class="form-control"
+					value={$currentLayout?.layoutName || ''}
+					oninput={(e) => editorStore.updateLayoutName(e.currentTarget.value)}
+				/>
+			</div>
+			
+			<div class="alert alert-info small">
+				<i class="bi bi-info-circle me-1"></i>
+				<strong>{$currentLayout?.sections.length || 0}</strong> sections in this layout
+			</div>
+		{:else if $selection.type === 'section'}
+			{@const section = $selectedItem as Section}
+			{#if section}
+				<!-- Section Properties -->
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h6 class="mb-0">Section</h6>
+					<button class="btn btn-sm btn-outline-danger" onclick={handleDeleteSection}>
+						<i class="bi bi-trash"></i>
+					</button>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Title</label>
+					<input
+						type="text"
+						class="form-control"
+						value={section.title}
+						oninput={(e) =>
+							editorStore.updateSection(section.id, { title: e.currentTarget.value })}
+					/>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Section ID</label>
+					<input
+						type="text"
+						class="form-control"
+						value={section.id}
+						oninput={(e) => editorStore.updateSection(section.id, { id: e.currentTarget.value })}
+					/>
+					<small class="form-text text-muted">Unique identifier for this section</small>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Grid Layout</label>
+					<select
+						class="form-select"
+						value={section.grid || '2x2'}
+						onchange={(e) => editorStore.updateSection(section.id, { grid: e.currentTarget.value as ChartGrid })}
+					>
+						{#each gridOptions as grid}
+							<option value={grid}>{grid}</option>
+						{/each}
+					</select>
+				</div>
+
+				<div class="alert alert-info small">
+					<i class="bi bi-bar-chart me-1"></i>
+					<strong>{section.charts?.length || 0}</strong> charts in this section
+				</div>
+			{/if}
+		{:else if $selection.type === 'chart'}
+			{@const chart = $selectedItem as Chart}
+			{#if chart && $selection.sectionId && $selection.chartIndex !== undefined}
+				<!-- Chart Properties -->
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h6 class="mb-0">Chart</h6>
+					<button class="btn btn-sm btn-outline-danger" onclick={handleDeleteChart}>
+						<i class="bi bi-trash"></i>
+					</button>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Title</label>
+					<input
+						type="text"
+						class="form-control"
+						value={chart.title}
+						oninput={(e) =>
+							editorStore.updateChart($selection.sectionId!, $selection.chartIndex!, {
+								title: e.currentTarget.value
+							})}
+					/>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label">Position (optional)</label>
+					<input
+						type="number"
+						class="form-control"
+						min="1"
+						max="9"
+						value={chart.pos || ''}
+						oninput={(e) => {
+							const val = e.currentTarget.value;
+							const numVal = val ? parseInt(val) : undefined;
+							editorStore.updateChart($selection.sectionId!, $selection.chartIndex!, {
+								pos: (numVal && numVal >= 1 && numVal <= 9) ? numVal as any : undefined
+							});
+						}}
+					/>
+					<small class="form-text text-muted">Grid position (1-9)</small>
+				</div>
+
+				<!-- Left Y-Axis KPIs -->
+				<div class="mb-3">
+					<div class="d-flex justify-content-between align-items-center mb-2">
+						<label class="form-label mb-0">Left Y-Axis KPIs</label>
+						<button
+							class="btn btn-sm btn-outline-success"
+							onclick={() => handleOpenKPIPicker('yLeft')}
+						>
+							<i class="bi bi-plus"></i> Add
+						</button>
+					</div>
+					
+					{#if chart.yLeft.length > 0}
+						<div class="list-group">
+							{#each chart.yLeft as kpi, idx}
+								<div class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="flex-grow-1">
+										<div class="fw-bold">{kpi.name}</div>
+										<small class="text-muted">
+											{kpi.rawName} | {kpi.unit}
+											{#if kpi.color}
+												<span class="color-badge" style="background-color: {kpi.color}"></span>
+											{/if}
+										</small>
+									</div>
+									<button
+										class="btn btn-sm btn-outline-danger"
+										onclick={() => handleRemoveKPI('yLeft', idx)}
+									>
+										<i class="bi bi-x"></i>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="alert alert-secondary small mb-0">
+							No KPIs on left axis
+						</div>
+					{/if}
+				</div>
+
+				<!-- Right Y-Axis KPIs -->
+				<div class="mb-3">
+					<div class="d-flex justify-content-between align-items-center mb-2">
+						<label class="form-label mb-0">Right Y-Axis KPIs</label>
+						<button
+							class="btn btn-sm btn-outline-warning"
+							onclick={() => handleOpenKPIPicker('yRight')}
+						>
+							<i class="bi bi-plus"></i> Add
+						</button>
+					</div>
+					
+					{#if chart.yRight.length > 0}
+						<div class="list-group">
+							{#each chart.yRight as kpi, idx}
+								<div class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="flex-grow-1">
+										<div class="fw-bold">{kpi.name}</div>
+										<small class="text-muted">
+											{kpi.rawName} | {kpi.unit}
+											{#if kpi.color}
+												<span class="color-badge" style="background-color: {kpi.color}"></span>
+											{/if}
+										</small>
+									</div>
+									<button
+										class="btn btn-sm btn-outline-danger"
+										onclick={() => handleRemoveKPI('yRight', idx)}
+									>
+										<i class="bi bi-x"></i>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="alert alert-secondary small mb-0">
+							No KPIs on right axis
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.properties-panel {
+		font-size: 0.9rem;
+	}
+
+	.form-label {
+		font-weight: 600;
+		font-size: 0.85rem;
+		color: #495057;
+	}
+
+	.form-control,
+	.form-select {
+		font-size: 0.875rem;
+	}
+
+	.list-group-item {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.85rem;
+	}
+
+	.color-badge {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 2px;
+		border: 1px solid #dee2e6;
+		margin-left: 0.25rem;
+	}
+
+	.btn-sm {
+		padding: 0.15rem 0.4rem;
+		font-size: 0.75rem;
+	}
+</style>

package/dist/core/Charts/editor/PropertiesPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PropertiesPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    openkpipicker: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type PropertiesPanel = InstanceType<typeof PropertiesPanel>;
+export default PropertiesPanel;

package/dist/core/Charts/editor/editorState.d.ts

@@ -0,0 +1,41 @@
+import type { Layout, Section, Chart, KPI } from '../charts.model.js';
+export type SelectionType = 'layout' | 'section' | 'chart' | 'kpi' | null;
+export interface Selection {
+    type: SelectionType;
+    layoutId?: string;
+    sectionId?: string;
+    chartIndex?: number;
+    kpiSide?: 'yLeft' | 'yRight';
+    kpiIndex?: number;
+}
+export interface EditorState {
+    currentLayout: Layout | null;
+    savedLayouts: Layout[];
+    selection: Selection;
+    isDirty: boolean;
+}
+export declare const editorStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<EditorState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    newLayout: (name?: string) => void;
+    loadLayout: (layout: Layout) => void;
+    updateLayoutName: (name: string) => void;
+    addSection: () => void;
+    updateSection: (sectionId: string, updates: Partial<Section>) => void;
+    deleteSection: (sectionId: string) => void;
+    addChart: (sectionId: string) => void;
+    updateChart: (sectionId: string, chartIndex: number, updates: Partial<Chart>) => void;
+    deleteChart: (sectionId: string, chartIndex: number) => void;
+    addKPI: (sectionId: string, chartIndex: number, side: "yLeft" | "yRight", kpi: KPI) => void;
+    removeKPI: (sectionId: string, chartIndex: number, side: "yLeft" | "yRight", kpiIndex: number) => void;
+    select: (selection: Selection) => void;
+    saveToLibrary: () => void;
+    deleteFromLibrary: (layoutName: string) => void;
+    exportToJSON: () => string;
+    importFromJSON: (json: string) => boolean;
+    reset: () => void;
+};
+export declare const currentLayout: import("svelte/store").Readable<Layout | null>;
+export declare const savedLayouts: import("svelte/store").Readable<Layout[]>;
+export declare const selection: import("svelte/store").Readable<Selection>;
+export declare const isDirty: import("svelte/store").Readable<boolean>;
+export declare const selectedItem: import("svelte/store").Readable<KPI | Chart | Section | Layout | null | undefined>;

package/dist/core/Charts/editor/editorState.js

@@ -0,0 +1,320 @@
+import { writable, derived, get } from 'svelte/store';
+const STORAGE_KEY = 'chartLayoutEditor:layouts';
+const CURRENT_LAYOUT_KEY = 'chartLayoutEditor:currentLayout';
+// Initialize state from localStorage
+function loadFromStorage() {
+    if (typeof window === 'undefined') {
+        return {
+            currentLayout: null,
+            savedLayouts: [],
+            selection: { type: null },
+            isDirty: false
+        };
+    }
+    const savedLayoutsJson = localStorage.getItem(STORAGE_KEY);
+    const currentLayoutJson = localStorage.getItem(CURRENT_LAYOUT_KEY);
+    return {
+        currentLayout: currentLayoutJson ? JSON.parse(currentLayoutJson) : null,
+        savedLayouts: savedLayoutsJson ? JSON.parse(savedLayoutsJson) : [],
+        selection: { type: null },
+        isDirty: false
+    };
+}
+// Create the main store
+function createEditorStore() {
+    const { subscribe, set, update } = writable(loadFromStorage());
+    return {
+        subscribe,
+        // Layout operations
+        newLayout: (name = 'New Layout') => {
+            const newLayout = {
+                layoutName: name,
+                sections: []
+            };
+            update(state => ({
+                ...state,
+                currentLayout: newLayout,
+                selection: { type: 'layout' },
+                isDirty: true
+            }));
+        },
+        loadLayout: (layout) => {
+            // Use JSON parse/stringify to create a clean copy
+            const cleanLayout = JSON.parse(JSON.stringify(layout));
+            update(state => ({
+                ...state,
+                currentLayout: cleanLayout,
+                selection: { type: 'layout' },
+                isDirty: false
+            }));
+            if (typeof window !== 'undefined') {
+                localStorage.setItem(CURRENT_LAYOUT_KEY, JSON.stringify(cleanLayout));
+            }
+        },
+        updateLayoutName: (name) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const updated = { ...state.currentLayout, layoutName: name };
+                return { ...state, currentLayout: updated, isDirty: true };
+            });
+        },
+        // Section operations
+        addSection: () => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const newSection = {
+                    id: `section-${Date.now()}`,
+                    title: 'New Section',
+                    charts: [],
+                    grid: '2x2'
+                };
+                const updated = {
+                    ...state.currentLayout,
+                    sections: [...state.currentLayout.sections, newSection]
+                };
+                return {
+                    ...state,
+                    currentLayout: updated,
+                    selection: { type: 'section', sectionId: newSection.id },
+                    isDirty: true
+                };
+            });
+        },
+        updateSection: (sectionId, updates) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.map(s => s.id === sectionId ? { ...s, ...updates } : s);
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    isDirty: true
+                };
+            });
+        },
+        deleteSection: (sectionId) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.filter(s => s.id !== sectionId);
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    selection: { type: 'layout' },
+                    isDirty: true
+                };
+            });
+        },
+        // Chart operations
+        addChart: (sectionId) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const newChart = {
+                    title: 'New Chart',
+                    yLeft: [],
+                    yRight: []
+                };
+                const sections = state.currentLayout.sections.map(section => {
+                    if (section.id === sectionId) {
+                        return {
+                            ...section,
+                            charts: [...section.charts, newChart]
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    isDirty: true
+                };
+            });
+        },
+        updateChart: (sectionId, chartIndex, updates) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.map(section => {
+                    if (section.id === sectionId) {
+                        const charts = section.charts.map((chart, idx) => idx === chartIndex ? { ...chart, ...updates } : chart);
+                        return { ...section, charts };
+                    }
+                    return section;
+                });
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    isDirty: true
+                };
+            });
+        },
+        deleteChart: (sectionId, chartIndex) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.map(section => {
+                    if (section.id === sectionId) {
+                        const charts = section.charts.filter((_, idx) => idx !== chartIndex);
+                        return { ...section, charts };
+                    }
+                    return section;
+                });
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    selection: { type: 'section', sectionId },
+                    isDirty: true
+                };
+            });
+        },
+        // KPI operations
+        addKPI: (sectionId, chartIndex, side, kpi) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.map(section => {
+                    if (section.id === sectionId) {
+                        const charts = section.charts.map((chart, idx) => {
+                            if (idx === chartIndex) {
+                                return {
+                                    ...chart,
+                                    [side]: [...chart[side], kpi]
+                                };
+                            }
+                            return chart;
+                        });
+                        return { ...section, charts };
+                    }
+                    return section;
+                });
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    isDirty: true
+                };
+            });
+        },
+        removeKPI: (sectionId, chartIndex, side, kpiIndex) => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                const sections = state.currentLayout.sections.map(section => {
+                    if (section.id === sectionId) {
+                        const charts = section.charts.map((chart, idx) => {
+                            if (idx === chartIndex) {
+                                return {
+                                    ...chart,
+                                    [side]: chart[side].filter((_, i) => i !== kpiIndex)
+                                };
+                            }
+                            return chart;
+                        });
+                        return { ...section, charts };
+                    }
+                    return section;
+                });
+                return {
+                    ...state,
+                    currentLayout: { ...state.currentLayout, sections },
+                    isDirty: true
+                };
+            });
+        },
+        // Selection management
+        select: (selection) => {
+            update(state => ({ ...state, selection }));
+        },
+        // Save/Load operations
+        saveToLibrary: () => {
+            update(state => {
+                if (!state.currentLayout)
+                    return state;
+                // Serialize and deserialize to create a clean copy without component references
+                const cleanLayout = JSON.parse(JSON.stringify(state.currentLayout));
+                // Check if layout already exists and update it
+                const existingIndex = state.savedLayouts.findIndex(l => l.layoutName === cleanLayout.layoutName);
+                let savedLayouts;
+                if (existingIndex >= 0) {
+                    savedLayouts = state.savedLayouts.map((l, idx) => idx === existingIndex ? cleanLayout : l);
+                }
+                else {
+                    savedLayouts = [...state.savedLayouts, cleanLayout];
+                }
+                // Save to localStorage
+                if (typeof window !== 'undefined') {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(savedLayouts));
+                    localStorage.setItem(CURRENT_LAYOUT_KEY, JSON.stringify(state.currentLayout));
+                }
+                return { ...state, savedLayouts, isDirty: false };
+            });
+        },
+        deleteFromLibrary: (layoutName) => {
+            update(state => {
+                const savedLayouts = state.savedLayouts.filter(l => l.layoutName !== layoutName);
+                if (typeof window !== 'undefined') {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(savedLayouts));
+                }
+                return { ...state, savedLayouts };
+            });
+        },
+        // Export/Import
+        exportToJSON: () => {
+            const state = get(editorStore);
+            if (!state.currentLayout)
+                return '';
+            return JSON.stringify(state.currentLayout, null, 2);
+        },
+        importFromJSON: (json) => {
+            try {
+                const layout = JSON.parse(json);
+                update(state => ({
+                    ...state,
+                    currentLayout: layout,
+                    selection: { type: 'layout' },
+                    isDirty: true
+                }));
+                return true;
+            }
+            catch (error) {
+                console.error('Failed to import layout:', error);
+                return false;
+            }
+        },
+        // Reset
+        reset: () => {
+            set(loadFromStorage());
+        }
+    };
+}
+export const editorStore = createEditorStore();
+// Derived stores for convenience
+export const currentLayout = derived(editorStore, $state => $state.currentLayout);
+export const savedLayouts = derived(editorStore, $state => $state.savedLayouts);
+export const selection = derived(editorStore, $state => $state.selection);
+export const isDirty = derived(editorStore, $state => $state.isDirty);
+// Helper to get selected item
+export const selectedItem = derived(editorStore, $state => {
+    if (!$state.currentLayout || !$state.selection.type)
+        return null;
+    switch ($state.selection.type) {
+        case 'layout':
+            return $state.currentLayout;
+        case 'section':
+            return $state.currentLayout.sections.find(s => s.id === $state.selection.sectionId);
+        case 'chart': {
+            const section = $state.currentLayout.sections.find(s => s.id === $state.selection.sectionId);
+            return section?.charts[$state.selection.chartIndex];
+        }
+        case 'kpi': {
+            const section = $state.currentLayout.sections.find(s => s.id === $state.selection.sectionId);
+            const chart = section?.charts[$state.selection.chartIndex];
+            const side = $state.selection.kpiSide;
+            return chart?.[side][$state.selection.kpiIndex];
+        }
+        default:
+            return null;
+    }
+});