@smartnet360/svelte-components 0.0.17 → 0.0.20

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

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

package/dist/core/Charts/index.js

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

package/package.json

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