@smartnet360/svelte-components 0.0.2 → 0.0.4

package/dist/Charts/ChartCard.svelte

@@ -25,17 +25,20 @@
 		if (!chartDiv || !data?.length) return;
 
 		const traces: any[] = [];
+		let colorIndex = 0;
 
 		// Add left Y-axis traces
 		chart.yLeft.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1');
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y1', colorIndex);
 			traces.push(trace);
+			colorIndex++;
 		});
 
 		// Add right Y-axis traces
 		chart.yRight.forEach(kpi => {
-			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2');
+			const trace = createTimeSeriesTrace(data, kpi, 'TIMESTAMP', 'y2', colorIndex);
 			traces.push(trace);
+			colorIndex++;
 		});
 
 		// Create default modern layout
@@ -56,7 +59,14 @@
 				y: 1,
 				xanchor: 'right',
 				yanchor: 'top',
-				font: { size: 12 }
+				font: { 
+					family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+					size: 11,
+					color: '#6B7280'
+				},
+				bgcolor: 'rgba(255,255,255,0.9)',
+				bordercolor: '#6B7280',
+				borderwidth: 1
 			},
 			xaxis: {
 				showgrid: true,
@@ -77,7 +87,17 @@
 			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' }
+			font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
+			hovermode: 'x unified',
+			hoverlabel: {
+				font: {
+					family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+					size: 11,
+					color: '#6B7280'
+				},
+				bgcolor: 'rgba(255,255,255,0.9)',
+				bordercolor: '#6B7280'
+			}
 		};
 
 		// Add second Y-axis if we have right-side KPIs

package/dist/Charts/ChartComponent.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { Layout, Mode, ChartMarker } from './charts.model.js';
+	import type { Layout, Mode, ChartMarker, Section } from './charts.model.js';
 	import ChartCard from './ChartCard.svelte';
 
 	interface Props {
@@ -19,6 +19,17 @@
 	let activeTabId = $state(layout.sections[0]?.id || '');
 </script>
 
+<!-- Reusable chart grid snippet -->
+{#snippet chartGrid(section: Section)}
+	<div class="chart-grid">
+		{#each section.charts as chart}
+			<div class="chart-slot">
+				<ChartCard {chart} {data} {markers} {plotlyLayout} {enableAdaptation} />
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
 <div class="chart-component">
 	{#if mode === 'tabs'}
 		<!-- Tab Mode with Navigation -->
@@ -50,13 +61,7 @@
 						data-section-id="{section.id}"
 					>
 						<!-- 2x2 Grid -->
-						<div class="chart-grid">
-							{#each section.charts as chart}
-								<div class="chart-slot">
-									<ChartCard {chart} {data} {plotlyLayout} />
-								</div>
-							{/each}
-						</div>
+						{@render chartGrid(section)}
 					</div>
 				{/each}
 			</div>
@@ -80,13 +85,7 @@
 				{#each layout.sections as section}
 					<div class="section-content" id="{section.id}">
 						<!-- 2x2 Grid -->
-						<div class="chart-grid">
-							{#each section.charts as chart}
-								<div class="chart-slot">
-									<ChartCard {chart} {data} {markers} {plotlyLayout} {enableAdaptation} />
-								</div>
-							{/each}
-						</div>
+						{@render chartGrid(section)}
 					</div>
 				{/each}
 			</div>

package/dist/Charts/adapt.js

@@ -90,7 +90,10 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
     // Adaptive legend font size
     if (adaptedLayout.legend?.font && adaptedLayout.showlegend) {
         if (isSmall) {
-            adaptedLayout.legend.font.size = 10;
+            adaptedLayout.legend.font.size = 9;
+        }
+        else {
+            adaptedLayout.legend.font.size = 11;
         }
     }
     return adaptedLayout;
@@ -154,24 +157,22 @@ export function createMarkerAnnotations(markers, containerSize, enableAdaptation
             else if (sizeCategory === 'large')
                 fontSize = 10;
         }
-        // Adaptive label positioning
-        const yPosition = sizeCategory === 'small' ? 0.95 : 0.9;
         return {
             x: marker.date,
-            y: yPosition,
+            y: 1, // Top of chart area
             yref: 'paper',
             text: marker.label,
-            showarrow: true,
-            arrowhead: 2,
-            arrowcolor: marker.color || '#ff0000',
-            arrowsize: sizeCategory === 'small' ? 0.8 : 1,
+            showarrow: false, // Remove arrow
+            yanchor: 'bottom', // Anchor to bottom so text appears below the top line
+            xanchor: 'center', // Center the text horizontally
             font: {
                 size: fontSize,
                 color: marker.color || '#ff0000'
             },
-            bgcolor: 'rgba(255,255,255,0.8)',
+            bgcolor: 'rgba(255,255,255,0.9)', // More opaque background
             bordercolor: marker.color || '#ff0000',
-            borderwidth: 1
+            borderwidth: 1,
+            borderpad: 2
         };
     });
 }

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

@@ -1,12 +1,10 @@
 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;

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

@@ -1,13 +1,6 @@
 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 processKPIData(data: any[], kpi: KPI): number[];
+export declare function createTimeSeriesTrace(data: any[], kpi: KPI, timestampField?: string, yaxis?: 'y1' | 'y2', colorIndex?: number): 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

@@ -1,77 +1,46 @@
-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;
-    }
-}
+// Modern color palette similar to Chart.js
+const modernColors = [
+    '#3B82F6', // Blue
+    '#EF4444', // Red
+    '#10B981', // Emerald
+    '#F59E0B', // Amber
+    '#8B5CF6', // Violet
+    '#06B6D4', // Cyan
+    '#F97316', // Orange
+    '#84CC16', // Lime
+    '#EC4899', // Pink
+    '#6B7280' // Gray
+];
 export function processKPIData(data, kpi) {
-    const rawValues = data
+    return 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);
+export function createTimeSeriesTrace(data, kpi, timestampField = 'TIMESTAMP', yaxis = 'y1', colorIndex = 0) {
+    const values = processKPIData(data, kpi);
     const timestamps = data.map(row => row[timestampField]);
+    // Use KPI color if provided, otherwise cycle through modern colors
+    const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     return {
         x: timestamps,
-        y: processed.values,
+        y: values,
         type: 'scatter',
-        mode: 'lines+markers',
+        mode: 'lines', // Only lines, no markers
         name: kpi.name,
         yaxis: yaxis,
         line: {
-            color: kpi.color || '#1f77b4',
-            width: 2
+            color: traceColor,
+            width: 3,
+            shape: 'spline',
+            smoothing: 0.3,
+            dash: yaxis === 'y1' ? 'solid' : 'dot' // Y1 = solid, Y2 = dotted
         },
-        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']
-        }
+        hovertemplate: `<b> ${kpi.name}</b><br>` +
+            `Value: %{y:,.2f} ${kpi.unit}<br>` +
+            '<extra></extra>'
     };
 }
 export function getYAxisTitle(kpis) {
@@ -105,7 +74,14 @@ export function createDefaultPlotlyLayout(title) {
             y: 1,
             xanchor: 'right',
             yanchor: 'top',
-            font: { size: 12 }
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11,
+                color: '#6B7280'
+            },
+            bgcolor: 'rgba(255,255,255,0.9)',
+            bordercolor: '#6B7280',
+            borderwidth: 1
         },
         xaxis: {
             title: {
@@ -126,6 +102,16 @@ export function createDefaultPlotlyLayout(title) {
         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' }
+        font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
+        hovermode: 'x unified',
+        hoverlabel: {
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11,
+                color: '#6B7280'
+            },
+            bgcolor: 'rgba(255,255,255,0.9)',
+            bordercolor: '#6B7280'
+        }
     };
 }

package/dist/Charts/index.d.ts

@@ -1,7 +1,6 @@
 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 type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker } from './charts.model.js';
+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';

package/dist/Charts/index.js

@@ -1,4 +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 { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';

package/dist/index.d.ts

@@ -1,2 +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';
+export { ChartComponent, ChartCard, type Layout, type Section, type Chart, type KPI, type Mode, type Scale, type ChartMarker, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';

package/dist/index.js

@@ -1,2 +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';
+export { ChartComponent, ChartCard, createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './Charts/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,7 +32,8 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"plotly.js-dist-min": "^3.1.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",