@smartnet360/svelte-components 0.0.17 → 0.0.19

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;
+    }
+});

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

@@ -4,3 +4,6 @@ export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid,
 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';
+export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
+export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';
+export type { Selection, SelectionType, EditorState } from './editor/editorState.js';

package/dist/core/Charts/index.js

@@ -2,3 +2,6 @@ export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
 export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
+// Editor exports
+export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
+export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';

package/package.json

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