@smartnet360/svelte-components 0.0.19 → 0.0.20

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

@@ -6,6 +6,13 @@
 	import GridPreview from './GridPreview.svelte';
 	import PropertiesPanel from './PropertiesPanel.svelte';
 	import KPIPicker from './KPIPicker.svelte';
+	import type { KPI } from '../charts.model.js';
+
+	interface Props {
+		availableKPIs: KPI[];
+	}
+
+	let { availableKPIs }: Props = $props();
 
 	let showKPIPicker = $state(false);
 	let showLibrary = $state(false);
@@ -180,6 +187,7 @@
 {#if showKPIPicker}
 	<KPIPicker 
 		show={showKPIPicker}
+		{availableKPIs}
 		on:select={handleKPISelected}
 		on:close={() => { showKPIPicker = false; kpiPickerContext = null; }}
 	/>

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

@@ -1,3 +1,7 @@
-declare const ChartLayoutEditor: import("svelte").Component<Record<string, never>, {}, "">;
+import type { KPI } from '../charts.model.js';
+interface Props {
+    availableKPIs: KPI[];
+}
+declare const ChartLayoutEditor: import("svelte").Component<Props, {}, "">;
 type ChartLayoutEditor = ReturnType<typeof ChartLayoutEditor>;
 export default ChartLayoutEditor;

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

@@ -2,22 +2,32 @@
 
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { availableKPIs, searchKPIs } from '../../../../routes/charts/schemas/available-kpis.js';
 	import type { KPI } from '../charts.model.js';
 
 	interface Props {
 		show: boolean;
+		availableKPIs: KPI[];
 	}
 
-	let { show }: Props = $props();
+	let { show, availableKPIs }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
 	let searchQuery = $state('');
 	let selectedKPI = $state<KPI | null>(null);
 
+	// Local search function
+	function searchKPIs(query: string, kpis: KPI[]): KPI[] {
+		const lowerQuery = query.toLowerCase();
+		return kpis.filter(
+			kpi =>
+				kpi.name.toLowerCase().includes(lowerQuery) ||
+				kpi.rawName.toLowerCase().includes(lowerQuery)
+		);
+	}
+
 	let filteredKPIs = $derived(
-		searchQuery ? searchKPIs(searchQuery) : availableKPIs
+		searchQuery ? searchKPIs(searchQuery, availableKPIs) : availableKPIs
 	);
 
 	function handleSelect(kpi: KPI) {

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

@@ -1,5 +1,7 @@
+import type { KPI } from '../charts.model.js';
 interface Props {
     show: boolean;
+    availableKPIs: KPI[];
 }
 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/editor/exampleKPIs.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Example KPI Configuration
+ *
+ * This is a reference example showing the structure for availableKPIs.
+ * In your application, you should:
+ * 1. Load KPIs from your backend API
+ * 2. Store in a JSON file specific to your domain
+ * 3. Generate dynamically based on your data schema
+ */
+import type { KPI } from '../charts.model.js';
+/**
+ * Example KPI list structure
+ * Each KPI must have: rawName, name, scale, unit, and optional color
+ */
+export declare const exampleKPIs: KPI[];
+/**
+ * KPI Interface Reference:
+ *
+ * interface KPI {
+ *   rawName: string;      // Column name in your data source
+ *   name: string;         // Display name shown in UI
+ *   scale: 'percent' | 'absolute';  // Data type
+ *   unit: string;         // Unit of measurement (%, GB, users, etc.)
+ *   color?: string;       // Optional hex color for chart line
+ * }
+ */
+/**
+ * Usage Example:
+ *
+ * <script>
+ *   import { ChartLayoutEditor } from '..';
+ *   import { exampleKPIs } from './exampleKPIs';
+ *   // OR load from API:
+ *   // const myKPIs = await fetch('/api/kpis').then(r => r.json());
+ * </script>
+ *
+ * <ChartLayoutEditor availableKPIs={exampleKPIs} />
+ */

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

@@ -0,0 +1,66 @@
+/**
+ * Example KPI Configuration
+ *
+ * This is a reference example showing the structure for availableKPIs.
+ * In your application, you should:
+ * 1. Load KPIs from your backend API
+ * 2. Store in a JSON file specific to your domain
+ * 3. Generate dynamically based on your data schema
+ */
+/**
+ * Example KPI list structure
+ * Each KPI must have: rawName, name, scale, unit, and optional color
+ */
+export const exampleKPIs = [
+    {
+        rawName: 'CCSR_PC',
+        name: 'CCSR Success Rate',
+        scale: 'percent',
+        unit: '%',
+        color: '#2ca02c' // Optional: hex color for the trace
+    },
+    {
+        rawName: 'DL_GBYTES',
+        name: 'Downlink Traffic',
+        scale: 'absolute',
+        unit: 'GB',
+        color: '#06B6D4'
+    },
+    {
+        rawName: 'UL_GBYTES',
+        name: 'Uplink Traffic',
+        scale: 'absolute',
+        unit: 'GB',
+        color: '#84CC16'
+    },
+    {
+        rawName: 'AVG_USERS',
+        name: 'Average Connected Users',
+        scale: 'absolute',
+        unit: 'users',
+        color: '#EF4444'
+    }
+];
+/**
+ * KPI Interface Reference:
+ *
+ * interface KPI {
+ *   rawName: string;      // Column name in your data source
+ *   name: string;         // Display name shown in UI
+ *   scale: 'percent' | 'absolute';  // Data type
+ *   unit: string;         // Unit of measurement (%, GB, users, etc.)
+ *   color?: string;       // Optional hex color for chart line
+ * }
+ */
+/**
+ * Usage Example:
+ *
+ * <script>
+ *   import { ChartLayoutEditor } from '..';
+ *   import { exampleKPIs } from './exampleKPIs';
+ *   // OR load from API:
+ *   // const myKPIs = await fetch('/api/kpis').then(r => r.json());
+ * </script>
+ *
+ * <ChartLayoutEditor availableKPIs={exampleKPIs} />
+ */

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

@@ -7,3 +7,4 @@ 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';
+export { exampleKPIs } from './editor/exampleKPIs.js';

package/dist/core/Charts/index.js

@@ -5,3 +5,4 @@ export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnn
 // Editor exports
 export { default as ChartLayoutEditor } from './editor/ChartLayoutEditor.svelte';
 export { editorStore, currentLayout, savedLayouts, selection, isDirty, selectedItem } from './editor/editorState.js';
+export { exampleKPIs } from './editor/exampleKPIs.js';

package/package.json

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