@smartnet360/svelte-components 0.0.1-beta.3 → 0.0.2

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

@@ -0,0 +1,34 @@
+export type Scale = "percent" | "absolute";
+export type Aggregation = "avg" | "max" | "min" | "sum";
+export interface KPI {
+    rawName: string;
+    name: string;
+    scale: Scale;
+    unit: string;
+    color?: string;
+    aggregation: Aggregation;
+}
+export interface Chart {
+    pos: 1 | 2 | 3 | 4;
+    title: string;
+    yLeft: KPI[];
+    yRight: KPI[];
+}
+export interface Section {
+    id: string;
+    title: string;
+    charts: [Chart, Chart, Chart, Chart];
+}
+export type Mode = "tabs" | "scrollspy";
+export interface Layout {
+    layoutName: string;
+    sections: Section[];
+}
+export interface ChartMarker {
+    date: string | Date;
+    label: string;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+    showLabel?: boolean;
+    category?: 'release' | 'incident' | 'maintenance' | 'other';
+}

package/dist/Charts/charts.model.js

@@ -0,0 +1 @@
+export {};

package/dist/Charts/data-utils.d.ts

@@ -0,0 +1,13 @@
+import type { KPI } from './charts.model.js';
+export type AggregationType = 'avg' | 'sum' | 'max' | 'min';
+export declare function aggregateValue(values: number[], aggregation: AggregationType): number;
+export declare function processKPIData(data: any[], kpi: KPI): {
+    values: number[];
+    aggregated: number;
+};
+export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2'): any;
+export declare function createBarTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2'): any;
+export declare function createPieTrace(data: any[], kpi: KPI, timestampField?: string): any;
+export declare function getYAxisTitle(kpis: KPI[]): string;
+export declare function formatValue(value: number, scale: 'percent' | 'absolute', unit: string): string;
+export declare function createDefaultPlotlyLayout(title?: string): any;

package/dist/Charts/data-utils.js

@@ -0,0 +1,131 @@
+export function aggregateValue(values, aggregation) {
+    switch (aggregation) {
+        case 'avg':
+            return values.reduce((sum, val) => sum + val, 0) / values.length;
+        case 'sum':
+            return values.reduce((sum, val) => sum + val, 0);
+        case 'max':
+            return Math.max(...values);
+        case 'min':
+            return Math.min(...values);
+        default:
+            return values[0] || 0;
+    }
+}
+export function processKPIData(data, kpi) {
+    const rawValues = data
+        .map(row => {
+        const val = row[kpi.rawName];
+        return typeof val === 'number' ? val : parseFloat(val);
+    })
+        .filter(val => !isNaN(val));
+    const aggregated = aggregateValue(rawValues, kpi.aggregation);
+    return {
+        values: rawValues,
+        aggregated
+    };
+}
+export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1') {
+    const processed = processKPIData(data, kpi);
+    const timestamps = data.map(row => row[timestampField]);
+    return {
+        x: timestamps,
+        y: processed.values,
+        type: 'scatter',
+        mode: 'lines+markers',
+        name: kpi.name,
+        yaxis: yaxis,
+        line: {
+            color: kpi.color || '#1f77b4',
+            width: 2
+        },
+        marker: {
+            size: 4
+        }
+    };
+}
+export function createBarTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1') {
+    const processed = processKPIData(data, kpi);
+    const timestamps = data.map(row => row[timestampField]);
+    return {
+        x: timestamps,
+        y: processed.values,
+        type: 'bar',
+        name: kpi.name,
+        yaxis: yaxis,
+        marker: {
+            color: kpi.color || '#1f77b4'
+        }
+    };
+}
+export function createPieTrace(data, kpi, timestampField = 'TIMESTAMP') {
+    const processed = processKPIData(data, kpi);
+    const timestamps = data.map(row => row[timestampField]);
+    // For pie charts, we'll show the latest value
+    const latestValue = processed.values[processed.values.length - 1];
+    const latestTimestamp = timestamps[timestamps.length - 1];
+    return {
+        values: [latestValue],
+        labels: [kpi.name],
+        type: 'pie',
+        name: `${kpi.name} (${latestTimestamp})`,
+        marker: {
+            colors: [kpi.color || '#1f77b4']
+        }
+    };
+}
+export function getYAxisTitle(kpis) {
+    if (kpis.length === 0)
+        return '';
+    // If all KPIs have the same unit, use that
+    const units = [...new Set(kpis.map(kpi => kpi.unit))];
+    return units.length === 1 ? units[0] : 'Mixed Units';
+}
+export function formatValue(value, scale, unit) {
+    if (scale === 'percent') {
+        return `${value.toFixed(2)}${unit}`;
+    }
+    return `${value.toLocaleString()}${unit}`;
+}
+export function createDefaultPlotlyLayout(title) {
+    return {
+        title: title ? {
+            text: title,
+            font: {
+                size: 16,
+                color: '#2c3e50',
+                weight: 600
+            },
+            x: 0.5,
+            xanchor: 'center'
+        } : undefined,
+        showlegend: true,
+        legend: {
+            x: 1,
+            y: 1,
+            xanchor: 'right',
+            yanchor: 'top',
+            font: { size: 12 }
+        },
+        xaxis: {
+            title: {
+                text: 'Time',
+                font: { size: 12, color: '#7f8c8d' }
+            },
+            showgrid: true,
+            gridcolor: '#ecf0f1',
+            linecolor: '#bdc3c7',
+            tickfont: { size: 11 }
+        },
+        yaxis: {
+            showgrid: true,
+            gridcolor: '#ecf0f1',
+            linecolor: '#bdc3c7',
+            tickfont: { size: 11 }
+        },
+        margin: { l: 60, r: 60, t: 60, b: 50 },
+        paper_bgcolor: 'rgba(0,0,0,0)',
+        plot_bgcolor: 'rgba(0,0,0,0)',
+        font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' }
+    };
+}

package/dist/Charts/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ChartComponent } from './ChartComponent.svelte';
+export { default as ChartCard } from './ChartCard.svelte';
+export type { Layout, Section, Chart, KPI, Mode, Scale, Aggregation, ChartMarker } from './charts.model.js';
+export { createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
+export type { AggregationType } from './data-utils.js';
+export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
+export type { ContainerSize, ChartInfo, AdaptationConfig } from './adapt.js';

package/dist/Charts/index.js

@@ -0,0 +1,4 @@
+export { default as ChartComponent } from './ChartComponent.svelte';
+export { default as ChartCard } from './ChartCard.svelte';
+export { createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
+export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';

package/dist/Charts/plotly.d.ts

@@ -0,0 +1,4 @@
+declare module 'plotly.js-dist-min' {
+	const Plotly: any;
+	export default Plotly;
+}

package/dist/Desktop/Desktop.svelte

@@ -18,6 +18,7 @@
   export let theme: 'light' | 'dark' = 'light';
   export let maxGrids: number = 10;
   export let onLaunch: ((grid: GridConfiguration) => void) | null = null;
+  export let onOpen: ((grids: GridConfiguration[]) => void) | null = null;
 
   // State
   let savedGrids: GridConfiguration[] = [];
@@ -164,6 +165,7 @@
   // Load data on mount
   onMount(() => {
     loadSavedGrids();
+    if (onOpen) onOpen(savedGrids);
     
     // Add keyboard event listener
     const handleKeydown = (event: KeyboardEvent) => {

package/dist/Desktop/Desktop.svelte.d.ts

@@ -19,6 +19,7 @@ declare const Desktop: $$__sveltets_2_IsomorphicComponent<{
     theme?: "light" | "dark";
     maxGrids?: number;
     onLaunch?: ((grid: GridConfiguration) => void) | null;
+    onOpen?: ((grids: GridConfiguration[]) => void) | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Desktop/GridRenderer.svelte

@@ -77,7 +77,7 @@
 </script>
 
 <!-- Slot rendering snippet -->
-{#snippet slotContent(slotId, slotName)}
+{#snippet slotContent(slotId: string, slotName: string)}
   {@const slot = renderSlot(slotId, slotName)}
   {#if slot.hasComponent}
     <div class="component-wrapper">

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, type ComponentConfig, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, type GridLayoutDefinition, type GridSlot, type ComponentAssignment, type GridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
+export { ChartComponent, ChartCard, type Layout, type Section, type Chart, type KPI, type Mode, type Scale, type Aggregation, createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout, type AggregationType } from './Charts/index.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';
+export { ChartComponent, ChartCard, createTimeSeriesTrace, createBarTrace, createPieTrace, getYAxisTitle, formatValue, aggregateValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.1-beta.3",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -11,14 +11,13 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"release:beta": "npm version prerelease --preid=beta && npm publish --tag beta --access public",
-		"release:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha --access public",
-		"release:patch": "npm version patch && npm publish --tag latest --access public",
-		"release:minor": "npm version minor && npm publish --tag latest --access public",
-		"release:major": "npm version major && npm publish --tag latest --access public"
+		"release:patch": "npm version patch && npm publish --access public",
+		"release:minor": "npm version minor && npm publish --access public",
+		"release:major": "npm version major && npm publish --access public"
 	},
 	"files": [
-		"dist"
+		"dist",
+		"!dist/**/*.md"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -60,6 +59,7 @@
 		"svelte"
 	],
 	"dependencies": {
-		"bootstrap": "^5.2.3"
+		"bootstrap": "^5.2.3",
+		"plotly.js-dist-min": "^3.1.0"
 	}
 }

package/dist/Desktop/Grid/README.md

@@ -1,331 +0,0 @@
-# Desktop Grid Component
-
-## Overview
-
-The Desktop Grid component provides a flexible, component-based approach to creating complex desktop layouts with dynamic resizing capabilities. The system uses composable Half and Quarter components that can be nested to build any desired layout, combined with a ResizeHandle for interactive resizing.
-
-## Component-Based Approach
-
-### Core Components
-
-- **Half**: Flexible component for splitting space in half (left, right, top, bottom)
-- **Quarter**: Component that renders two quarters inside one half with dynamic internal proportions
-- **ResizeHandle**: Interactive draggable handle for resizing grid areas
-- **resizeStore**: Svelte store for managing resize state across components
-
-### Advantages
-
-- **Explicit**: Code clearly shows the intended layout
-- **Interactive**: Built-in resize handles for dynamic layout changes
-- **Reusable**: Components can be combined in various ways
-- **Maintainable**: Each component handles one specific responsibility
-- **Flexible**: Easy to nest and compose complex layouts
-- **Stateful**: Shared store manages resize state across components
-
-## Usage
-
-### Half Component
-
-```svelte
-<script lang="ts">
-  export let position: 'left' | 'right' | 'top' | 'bottom' = 'left';
-</script>
-
-<div class="half {position}">
-  <slot />
-</div>
-
-<style>
-  .half {
-    display: grid;
-    place-items: center;
-    border: 1px solid #ccc;
-  }
-
-  /* Positions */
-  .left  { grid-column: 1 / 2; grid-row: 1 / -1; }
-  .right { grid-column: 2 / 3; grid-row: 1 / -1; }
-  .top   { grid-row: 1 / 2; grid-column: 1 / -1; }
-  .bottom{ grid-row: 2 / 3; grid-column: 1 / -1; }
-</style>
-```
-
-### Quarter Component
-
-```svelte
-<script lang="ts">
-  export let position: 'left' | 'right' | 'top' | 'bottom';
-  export let topHeight: number = 50;    // Percentage for top/left section
-  export let bottomHeight: number = 50; // Percentage for bottom/right section
-</script>
-
-<div class="quarters {position}" style="--top-height: {topHeight}%; --bottom-height: {bottomHeight}%">
-  <div class="quarter top-or-left">
-    <slot name="top-or-left" />
-  </div>
-  <div class="quarter bottom-or-right">
-    <slot name="bottom-or-right" />
-  </div>
-</div>
-
-<style>
-  .quarters {
-    border: 1px solid #aaa;
-    display: grid;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Left and Right quarters are stacked (vertical split) */
-  .quarters.left,
-  .quarters.right {
-    grid-template-rows: var(--top-height) var(--bottom-height);
-    grid-template-columns: 1fr;
-  }
-
-  /* Top and Bottom quarters are side-by-side (horizontal split) */
-  .quarters.top,
-  .quarters.bottom {
-    grid-template-columns: var(--top-height) var(--bottom-height);
-    grid-template-rows: 1fr;
-  }
-
-### ResizeHandle Component
-
-```svelte
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let position: 'center' | 'left' | 'right' | 'top' | 'bottom' = 'center';
-  export let horizontalSize: number = 50;
-  export let verticalSize: number = 50;
-
-  const dispatch = createEventDispatcher();
-</script>
-
-<div
-  class="resize-handle {position}"
-  class:dragging={isDragging}
-  style="cursor: {cursorStyle}"
-  on:mousedown={handleMouseDown}
-  role="button"
-  tabindex="0"
-  aria-label="Resize handle"
->
-  <div class="handle-indicator"></div>
-</div>
-
-<!-- Dispatches 'resize' event with { horizontalSize, verticalSize } -->
-```
-
-### resizeStore
-
-```typescript
-import { writable } from 'svelte/store';
-
-export interface ResizeState {
-  leftWidth: number;
-  rightWidth: number;
-  topHeight: number;
-  bottomHeight: number;
-  quarterSplit: number;
-}
-
-const resizeStore = createResizeStore();
-
-export const resizeStore = {
-  subscribe: resizeStore.subscribe,
-  set: resizeStore.set,
-  update,
-  reset: () => set(initialState),
-  updateLeftWidth: (width: number) => update(state => ({...})),
-  updateTopHeight: (height: number) => update(state => ({...})),
-  update2D: (horizontalSize: number, verticalSize: number) => update(state => ({
-    ...state,
-    leftWidth: Math.max(10, Math.min(90, horizontalSize)),
-    rightWidth: 100 - Math.max(10, Math.min(90, horizontalSize)),
-    topHeight: Math.max(10, Math.min(90, verticalSize)),
-    bottomHeight: 100 - Math.max(10, Math.min(90, verticalSize))
-  }))
-};
-```
-
-## Usage Examples
-
-### Basic Resizable Layout with Store
-
-```svelte
-<script lang="ts">
-  import { Quarter, ResizeHandle, resizeStore } from './lib/index.js';
-
-  let leftWidth = 50;
-  let rightWidth = 50;
-  let topHeight = 50;
-  let bottomHeight = 50;
-
-  // Subscribe to store changes
-  resizeStore.subscribe((state) => {
-    leftWidth = state.leftWidth;
-    rightWidth = state.rightWidth;
-    topHeight = state.topHeight;
-    bottomHeight = state.bottomHeight;
-  });
-
-  function handleResize(event: CustomEvent) {
-    const { horizontalSize, verticalSize } = event.detail;
-    resizeStore.update2D(horizontalSize, verticalSize);
-  }
-</script>
-
-<div class="desktop" style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%">
-  <Quarter position="left" {topHeight} {bottomHeight}>
-    <Chart slot="top-or-left" />
-    <List slot="bottom-or-right" />
-  </Quarter>
-
-  <Quarter position="right" {topHeight} {bottomHeight}>
-    <Form slot="top-or-left" />
-    <Text slot="bottom-or-right" />
-  </Quarter>
-
-  <ResizeHandle
-    position="center"
-    horizontalSize={leftWidth}
-    verticalSize={topHeight}
-    on:resize={handleResize}
-  />
-</div>
-```
-
-### Left Half + Right Quarters with Resizing
-
-```svelte
-<div class="desktop" style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%">
-  <Half position="left">
-    <Chart />
-  </Half>
-
-  <Quarter position="right" {topHeight} {bottomHeight}>
-    <Map slot="top-or-left" />
-    <Table slot="bottom-or-right" />
-  </Quarter>
-
-  <ResizeHandle
-    position="center"
-    horizontalSize={leftWidth}
-    verticalSize={topHeight}
-    on:resize={handleResize}
-  />
-</div>
-```
-
-## Visual Examples
-
-### Dynamic Resizable Layout
-```
-+---------+----+     +-----+--+      +---+-----+
-|         | 25 |     |     |25|      |   |  75 |
-|   50%   +----+  →  | 60% +--+  →   |50%|+----+
-|         | 25 |     |     |25|      |   |  25 |
-+---------+----+     +-----+--+      +---+-----+
-```
-
-### Desktop Container Setup
-```css
-.desktop {
-  display: grid;
-  /* Dynamic columns and rows controlled by store */
-  grid-template-columns: var(--left-width, 50%) var(--right-width, 50%);
-  grid-template-rows: var(--top-height, 50%) var(--bottom-height, 50%);
-  height: 100vh;
-  position: relative; /* For absolute positioned resize handle */
-}
-```
-
-### Resize Handle Positioning
-```css
-.resize-handle.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-}
-```
-
-## Features
-
-### ✅ Dynamic Resizing
-- **ResizeHandle**: Interactive draggable handle for 2D resizing
-- **Real-time Updates**: Components respond immediately to size changes
-- **Constrained Values**: Automatic min/max limits (10%-90%)
-- **Smooth Animation**: CSS transitions for visual feedback
-
-### ✅ State Management
-- **Shared Store**: Centralized resize state across all components
-- **Reactive Updates**: Automatic UI updates when store changes
-- **TypeScript Support**: Full type safety for resize operations
-
-### ✅ Flexible Layouts
-- **Dynamic Proportions**: Quarter components accept custom height ratios
-- **Nested Components**: Combine Half and Quarter components freely
-- **CSS Grid**: Modern layout system with full browser support
-
-### ✅ Component Architecture
-- **Slot-based**: Flexible content insertion with named slots
-- **Composable**: Easy to combine and nest components
-- **Accessible**: Proper ARIA labels and keyboard navigation
-
-## Current Implementation Status
-
-### ✅ Completed Features
-- Half and Quarter layout components
-- Interactive ResizeHandle with mouse/touch support
-- Svelte store for state management
-- Dynamic Quarter component proportions
-- Test page with dummy components
-- Full TypeScript support
-- CSS Grid responsive layouts
-
-### 🔄 Future Enhancements
-- Add keyboard navigation for resize handles
-- Implement maximize/fullscreen functionality
-- Add animation presets for smooth transitions
-- Create additional layout primitives (thirds, fifths)
-- Add drag-to-resize from component edges
-
-## Test Implementation
-
-The system includes a comprehensive test page (`/src/routes/test/+page.svelte`) that demonstrates:
-
-### Dummy Components
-- **Chart**: Interactive bar chart with customizable data
-- **List**: Task list with checkboxes for project management
-- **Form**: Working contact form with validation
-- **Text**: Scrollable content area for documentation
-
-### Test Features
-- **Live Resizing**: Drag the center handle to resize all quadrants
-- **Debug Info**: Real-time display of current proportions
-- **Responsive Design**: Components adapt to size changes
-- **Interactive Content**: All dummy components are fully functional
-
-### Usage in Test
-```svelte
-<Quarter position="left" {topHeight} {bottomHeight}>
-  <Chart slot="top-or-left" title="Sales Analytics" data={[25, 45, 30, 60, 40]} />
-  <List slot="bottom-or-right" title="Project Tasks" items={["Design review", "Code review", "Testing", "Deployment"]} />
-</Quarter>
-
-<Quarter position="right" {topHeight} {bottomHeight}>
-  <Form slot="top-or-left" title="Contact Support" />
-  <Text slot="bottom-or-right" title="System Status" content="All systems operational..." />
-</Quarter>
-```
-
-## Trade-offs
-
-- May require more components than a single grid engine
-- Resizing logic coordination may need shared state management
-- Nesting complexity for very complex layouts