@smartnet360/svelte-components 0.0.11 → 0.0.13

package/dist/apps/antenna-pattern/components/PlotlyRadarChart.svelte

@@ -0,0 +1,252 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import type { PlotlyRadarData } from '../helpers/plotly-utils';
+  import { createPlotlyRadarConfig, createTiltSliders } from '../helpers/plotly-utils';
+
+  interface Props {
+    data: PlotlyRadarData[];
+    title?: string;
+    minValue?: number;
+    maxValue?: number;
+    height?: string;
+    showSliders?: boolean;
+    showPatternToggle?: boolean;
+    availableTilts1?: string[];
+    availableTilts2?: string[];
+    activeTiltIndex1?: number;
+    activeTiltIndex2?: number;
+    onTiltChange?: (antennaIndex: 1 | 2, tiltIndex: number) => void;
+    onDataUpdate?: (newData: PlotlyRadarData[]) => void;
+  }
+
+  let {
+    data = [],
+    title = '',
+    minValue = -70,
+    maxValue = 0,
+    height = '400px',
+    showSliders = false,
+    showPatternToggle = false,
+    availableTilts1 = [],
+    availableTilts2 = [],
+    activeTiltIndex1 = 0,
+    activeTiltIndex2 = 0,
+    onTiltChange,
+    onDataUpdate
+  }: Props = $props();
+
+  let chartDiv = $state<HTMLDivElement>();
+  let Plotly: any;
+  let chartInitialized = $state(false);
+
+  // Watch for data changes and update chart
+  $effect(() => {
+    if (chartInitialized && Plotly && data.length > 0) {
+      updateChart();
+    }
+  });
+
+  onMount(async () => {
+    if (browser) {
+      try {
+        // Import Plotly dynamically for SSR compatibility
+        Plotly = await import('plotly.js-dist-min');
+        await initializeChart();
+      } catch (error) {
+        console.error('Failed to load Plotly:', error);
+      }
+    }
+  });
+
+  async function initializeChart() {
+    if (!Plotly || !chartDiv || !data.length) {
+      console.log('PlotlyRadarChart - Cannot initialize:', {
+        hasPlotly: !!Plotly,
+        hasChartDiv: !!chartDiv,
+        dataLength: data.length
+      });
+      return;
+    }
+
+    console.log('PlotlyRadarChart - Initializing with data:', {
+      dataCount: data.length,
+      sampleData: data[0],
+      title,
+      showSliders
+    });
+
+    const { data: plotData, layout, config } = createPlotlyRadarConfig(
+      data,
+      title,
+      minValue,
+      maxValue
+    );
+
+    // Add sliders if requested and available
+    const sliders = createSliders();
+    if (sliders.length > 0) {
+      layout.sliders = sliders;
+      console.log('Added sliders:', sliders.length);
+    }
+
+    // Add pattern toggle if requested
+    if (showPatternToggle) {
+      layout.updatemenus = [createPatternToggleMenu()];
+    }
+
+    console.log('PlotlyRadarChart - Final layout:', layout);
+    console.log('PlotlyRadarChart - Plot data:', plotData);
+
+    try {
+      await Plotly.newPlot(chartDiv, plotData, layout, config);
+      chartInitialized = true;
+      console.log('PlotlyRadarChart - Successfully initialized');
+
+      // Set up event listeners using Plotly's event system
+      if (chartDiv) {
+        chartDiv.addEventListener('plotly_sliderchange', handleSliderChange);
+        chartDiv.addEventListener('plotly_sliderend', handleSliderChange);
+        chartDiv.addEventListener('plotly_buttonclicked', handleButtonClick);
+      }
+    } catch (error) {
+      console.error('Failed to create Plotly chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const { data: plotData, layout } = createPlotlyRadarConfig(
+        data,
+        title,
+        minValue,
+        maxValue
+      );
+
+      await Plotly.react(chartDiv, plotData, layout);
+    } catch (error) {
+      console.error('Failed to update Plotly chart:', error);
+    }
+  }
+
+  function createSliders() {
+    if (!showSliders) return [];
+    
+    // Only create sliders if we have tilts available
+    const sliders = createTiltSliders(
+      availableTilts1,
+      availableTilts2,
+      activeTiltIndex1,
+      activeTiltIndex2,
+      onTiltChange
+    );
+    
+    // Filter out empty sliders
+    return sliders.filter(slider => slider.steps && slider.steps.length > 1);
+  }
+
+  function createPatternToggleMenu() {
+    return {
+      type: 'buttons',
+      direction: 'left',
+      showactive: true,
+      x: 0.1,
+      y: 1.15,
+      buttons: [
+        {
+          label: 'Horizontal',
+          method: 'restyle',
+          args: [{ visible: true }, [0, 1]]
+        },
+        {
+          label: 'Vertical', 
+          method: 'restyle',
+          args: [{ visible: true }, [0, 1]]
+        }
+      ]
+    };
+  }
+
+  function handleSliderChange(eventData: any) {
+    console.log('Slider change event:', eventData);
+    
+    // Handle slider changes and notify parent
+    if (onTiltChange && eventData && eventData.detail) {
+      const step = eventData.detail.step;
+      const sliderIndex = eventData.detail.slider.active;
+      const slider = eventData.detail.slider;
+      
+      console.log('Slider details:', { step, sliderIndex, slider });
+      
+      // Determine which antenna slider was changed based on position or other identifier
+      const antennaIndex = slider.x < 0.3 ? 1 : 2;
+      onTiltChange(antennaIndex, sliderIndex);
+    }
+  }
+
+  function handleButtonClick(eventData: any) {
+    // Handle button clicks (pattern toggle)
+    console.log('Button clicked:', eventData);
+  }
+
+  // Export methods for parent components
+  export function resizeChart() {
+    if (Plotly && chartDiv && chartInitialized) {
+      Plotly.Plots.resize(chartDiv);
+    }
+  }
+
+  export function downloadChart(filename: string = 'antenna_pattern') {
+    if (Plotly && chartDiv && chartInitialized) {
+      Plotly.downloadImage(chartDiv, {
+        format: 'png',
+        width: 800,
+        height: 800,
+        filename
+      });
+    }
+  }
+</script>
+
+<div class="plotly-chart-container" style:height>
+  <div bind:this={chartDiv} class="plotly-chart"></div>
+</div>
+
+<style>
+  .plotly-chart-container {
+    width: 100%;
+    position: relative;
+  }
+
+  .plotly-chart {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Override Plotly's default styles to match Bootstrap theme */
+  :global(.plotly .modebar) {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border-radius: 4px !important;
+  }
+
+  :global(.plotly .modebar-btn) {
+    background: transparent !important;
+    border: none !important;
+    color: #6c757d !important;
+  }
+
+  :global(.plotly .modebar-btn:hover) {
+    background: rgba(0, 0, 0, 0.05) !important;
+    color: #495057 !important;
+  }
+
+  :global(.plotly .modebar-btn.active) {
+    background: #007bff !important;
+    color: white !important;
+  }
+</style>

package/dist/apps/antenna-pattern/components/PlotlyRadarChart.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { PlotlyRadarData } from '../helpers/plotly-utils';
+interface Props {
+    data: PlotlyRadarData[];
+    title?: string;
+    minValue?: number;
+    maxValue?: number;
+    height?: string;
+    showSliders?: boolean;
+    showPatternToggle?: boolean;
+    availableTilts1?: string[];
+    availableTilts2?: string[];
+    activeTiltIndex1?: number;
+    activeTiltIndex2?: number;
+    onTiltChange?: (antennaIndex: 1 | 2, tiltIndex: number) => void;
+    onDataUpdate?: (newData: PlotlyRadarData[]) => void;
+}
+declare const PlotlyRadarChart: import("svelte").Component<Props, {
+    resizeChart: () => void;
+    downloadChart: (filename?: string) => void;
+}, "">;
+type PlotlyRadarChart = ReturnType<typeof PlotlyRadarChart>;
+export default PlotlyRadarChart;

package/dist/apps/antenna-pattern/db.d.ts

@@ -0,0 +1,24 @@
+import Dexie, { type Table } from 'dexie';
+export interface Antenna {
+    id?: number;
+    name: string;
+    frequency: number;
+    gain_dBd: number;
+    tilt: string;
+    comment?: string;
+    horizontal: number;
+    pattern: number[];
+    vertical_pattern: number[];
+    polarization?: string;
+    x_pol?: string;
+    co?: string;
+    tilt_from_filename?: string;
+    sourcePath?: string;
+}
+declare class AntennaDatabase extends Dexie {
+    antennas: Table<Antenna, number>;
+    constructor();
+    hasData(): Promise<boolean>;
+}
+export declare const db: AntennaDatabase;
+export {};

package/dist/apps/antenna-pattern/db.js

@@ -0,0 +1,15 @@
+import Dexie, {} from 'dexie';
+class AntennaDatabase extends Dexie {
+    antennas;
+    constructor() {
+        super('antennaDB');
+        this.version(1).stores({
+            antennas: '++id, name, frequency, tilt'
+        });
+    }
+    async hasData() {
+        const count = await this.antennas.count();
+        return count > 0;
+    }
+}
+export const db = new AntennaDatabase();

package/dist/apps/antenna-pattern/helpers/plotly-utils.d.ts

@@ -0,0 +1,54 @@
+import type { Antenna } from '../db';
+export interface PlotlyRadarData {
+    r: (number | null)[];
+    theta: number[];
+    type: 'scatterpolar';
+    mode: 'lines';
+    name: string;
+    line: {
+        color: string;
+        width: number;
+    };
+    fill?: 'tonext' | 'toself' | 'none';
+    fillcolor?: string;
+}
+export interface AntennaPattern {
+    horizontal: number[];
+    vertical: number[];
+}
+/**
+ * Creates a Plotly polar/radar chart configuration for antenna patterns
+ */
+export declare function createPlotlyRadarConfig(data: PlotlyRadarData[], title?: string, minValue?: number, maxValue?: number): {
+    data: any[];
+    layout: any;
+    config: any;
+};
+export declare function convertAntennaToPlotlyData(antenna: Antenna, mechanicalTilt: number, patternType: 'horizontal' | 'vertical', name: string, color: string, fillColor?: string): PlotlyRadarData;
+/**
+ * Applies mechanical tilt to vertical pattern data
+/**
+ * Creates Plotly slider configuration for electrical tilt control
+ */
+export declare function createTiltSliders(availableTilts1: string[], availableTilts2: string[], activeTiltIndex1: number, activeTiltIndex2: number, onTiltChange?: (antennaIndex: 1 | 2, tiltIndex: number) => void): any[];
+/**
+ * Creates a simple mechanical tilt slider for single antenna view
+ */
+export declare function createMechanicalTiltSlider(currentTilt?: number, minTilt?: number, maxTilt?: number): any;
+/**
+ * Creates update menu for pattern type switching
+ */
+export declare function createPatternToggle(): any;
+/**
+ * Calculates pattern comparison error between two antennas
+ */
+export declare function calculatePatternError(pattern1: number[], pattern2: number[], threshold?: number): number;
+/**
+ * Gets CSS color values for consistent theming
+ */
+export declare function getThemeColors(): {
+    primary: string;
+    secondary: string;
+    primaryRgb: string;
+    secondaryRgb: string;
+};

package/dist/apps/antenna-pattern/helpers/plotly-utils.js

@@ -0,0 +1,324 @@
+/**
+ * Creates a Plotly polar/radar chart configuration for antenna patterns
+ */
+export function createPlotlyRadarConfig(data, title = '', minValue = -70, maxValue = 0) {
+    const layout = {
+        title: {
+            text: title,
+            font: { size: 16 },
+            x: 0.5,
+            y: 0.95
+        },
+        polar: {
+            radialaxis: {
+                visible: true,
+                range: [minValue, maxValue],
+                tickfont: { size: 10 },
+                gridcolor: 'rgba(0, 0, 0, 0.1)',
+                linecolor: 'rgba(0, 0, 0, 0.2)',
+                tickmode: 'linear',
+                tick0: minValue,
+                dtick: 10
+            },
+            angularaxis: {
+                visible: true,
+                tickfont: { size: 10 },
+                rotation: 90, // Start at top (like compass)
+                direction: 'clockwise',
+                gridcolor: 'rgba(0, 0, 0, 0.1)',
+                linecolor: 'rgba(0, 0, 0, 0.2)',
+                tickmode: 'array',
+                tickvals: [0, 45, 90, 135, 180, 225, 270, 315],
+                ticktext: ['0°', '45°', '90°', '135°', '180°', '225°', '270°', '315°']
+            },
+            bgcolor: 'rgba(255, 255, 255, 0)'
+        },
+        showlegend: true,
+        legend: {
+            x: 0.02,
+            y: 0.98,
+            bgcolor: 'rgba(255, 255, 255, 0.9)',
+            bordercolor: 'rgba(0, 0, 0, 0.2)',
+            borderwidth: 1,
+            font: { size: 12 }
+        },
+        margin: { t: 100, r: 80, b: 120, l: 80 }, // Increased bottom margin for sliders
+        autosize: true
+    };
+    const config = {
+        responsive: true,
+        displayModeBar: true,
+        displaylogo: false,
+        modeBarButtonsToRemove: [
+            'zoom2d',
+            'pan2d',
+            'select2d',
+            'lasso2d',
+            'zoomIn2d',
+            'zoomOut2d',
+            'autoScale2d',
+            'resetScale2d',
+            'toggleSpikelines',
+            'toImage'
+        ]
+    };
+    return { data, layout, config };
+}
+/**
+ * Converts antenna pattern data to Plotly format
+ */
+/**
+ * Converts attenuation values to dB signal strength
+ * Raw antenna data represents attenuation where:
+ * - 0 = maximum signal (no attenuation)
+ * - Larger values = more attenuation (weaker signal)
+ * This function converts to dB by negating the attenuation values
+ */
+function attenuationToDb(attenuationValues) {
+    return attenuationValues.map(value => {
+        // For attenuation values, 0 is max signal, so we negate the dB value
+        // to represent the reduction from the max signal
+        return -value;
+    });
+}
+export function convertAntennaToPlotlyData(antenna, mechanicalTilt, patternType, name, color, fillColor) {
+    // Get the correct pattern array based on type
+    // For horizontal: use 'pattern' array
+    // For vertical: use 'vertical_pattern' array
+    const pattern = patternType === 'horizontal' ? antenna.pattern : antenna.vertical_pattern;
+    console.log(`convertAntennaToPlotlyData - ${patternType} for ${antenna.name}:`, {
+        antennaName: antenna.name,
+        patternType,
+        hasPattern: !!pattern,
+        patternLength: pattern?.length,
+        patternSample: pattern?.slice(0, 10), // First 10 values
+        mechanicalTilt
+    });
+    // Ensure we have valid pattern data
+    if (!pattern || !Array.isArray(pattern) || pattern.length === 0) {
+        console.warn(`No ${patternType} pattern data available for antenna:`, antenna.name);
+        return {
+            r: [],
+            theta: [],
+            type: 'scatterpolar',
+            mode: 'lines',
+            name,
+            line: { color, width: 2 }
+        };
+    }
+    // Process the pattern data - ensure we have 360 data points
+    let processedPattern = Array.from({ length: 360 }, (_, i) => {
+        if (patternType === 'vertical' && mechanicalTilt !== 0) {
+            // Apply mechanical tilt by shifting the index
+            const shiftedIndex = (i - Math.round(mechanicalTilt) + 360) % 360;
+            return pattern[shiftedIndex] || 0;
+        }
+        else {
+            // No mechanical tilt for horizontal pattern
+            return pattern[i] || 0;
+        }
+    });
+    // Convert attenuation values to dB (always use dB scale like the Chart.js version)
+    processedPattern = attenuationToDb(processedPattern);
+    console.log(`Processed ${patternType} pattern:`, {
+        originalSample: pattern.slice(0, 5),
+        processedSample: processedPattern.slice(0, 5),
+        dataRange: {
+            min: Math.min(...processedPattern),
+            max: Math.max(...processedPattern)
+        }
+    });
+    // Generate theta values (0-359 degrees)
+    // For vertical patterns, rotate clockwise by 90 degrees
+    const theta = Array.from({ length: 360 }, (_, i) => {
+        if (patternType === 'vertical') {
+            // Rotate vertical pattern clockwise by 90 degrees
+            return (i + 90) % 360;
+        }
+        else {
+            // Keep horizontal pattern as-is
+            return i;
+        }
+    });
+    const plotlyData = {
+        r: processedPattern,
+        theta,
+        type: 'scatterpolar',
+        mode: 'lines',
+        name,
+        line: {
+            color,
+            width: 2
+        }
+    };
+    if (fillColor) {
+        plotlyData.fill = 'toself';
+        plotlyData.fillcolor = fillColor;
+    }
+    return plotlyData;
+}
+/**
+ * Applies mechanical tilt to vertical pattern data
+/**
+ * Creates Plotly slider configuration for electrical tilt control
+ */
+export function createTiltSliders(availableTilts1, availableTilts2, activeTiltIndex1, activeTiltIndex2, onTiltChange) {
+    const sliders = [];
+    // Antenna 1 electrical tilt slider (positioned at bottom left)
+    if (availableTilts1.length > 1) {
+        sliders.push({
+            active: activeTiltIndex1,
+            currentvalue: {
+                visible: true,
+                prefix: 'Antenna 1 E-Tilt: ',
+                suffix: '°',
+                xanchor: 'left',
+                font: { size: 12, color: '#0d6efd' }
+            },
+            pad: { t: 20, b: 10 },
+            len: 0.35,
+            x: 0.05,
+            y: 0,
+            steps: availableTilts1.map((tilt, i) => ({
+                label: `${tilt}°`,
+                value: tilt,
+                method: 'animate',
+                args: [
+                    [`frame_${i}`],
+                    {
+                        mode: 'immediate',
+                        transition: { duration: 300 },
+                        frame: { duration: 300 }
+                    }
+                ]
+            }))
+        });
+    }
+    // Antenna 2 electrical tilt slider (positioned at bottom right)  
+    if (availableTilts2.length > 1) {
+        sliders.push({
+            active: activeTiltIndex2,
+            currentvalue: {
+                visible: true,
+                prefix: 'Antenna 2 E-Tilt: ',
+                suffix: '°',
+                xanchor: 'right',
+                font: { size: 12, color: '#fd7e14' }
+            },
+            pad: { t: 20, b: 10 },
+            len: 0.35,
+            x: 0.60,
+            y: 0,
+            steps: availableTilts2.map((tilt, i) => ({
+                label: `${tilt}°`,
+                value: tilt,
+                method: 'animate',
+                args: [
+                    [`frame_${i}`],
+                    {
+                        mode: 'immediate',
+                        transition: { duration: 300 },
+                        frame: { duration: 300 }
+                    }
+                ]
+            }))
+        });
+    }
+    return sliders;
+}
+/**
+ * Creates a simple mechanical tilt slider for single antenna view
+ */
+export function createMechanicalTiltSlider(currentTilt = 0, minTilt = -10, maxTilt = 10) {
+    const tiltRange = maxTilt - minTilt;
+    const activeIndex = currentTilt - minTilt;
+    return {
+        active: activeIndex,
+        currentvalue: {
+            visible: true,
+            prefix: 'Mechanical Tilt: ',
+            suffix: '°',
+            xanchor: 'center',
+            font: { size: 12, color: '#198754' }
+        },
+        pad: { t: 20, b: 10 },
+        len: 0.6,
+        x: 0.2,
+        y: 0,
+        steps: Array.from({ length: tiltRange + 1 }, (_, i) => {
+            const tiltValue = minTilt + i;
+            return {
+                label: `${tiltValue}°`,
+                value: tiltValue.toString(),
+                method: 'restyle',
+                args: [
+                    {
+                        // This will trigger a custom event that we can listen for
+                        'meta': [tiltValue]
+                    },
+                    [1] // Apply to vertical pattern trace (index 1)
+                ]
+            };
+        })
+    };
+}
+/**
+ * Creates update menu for pattern type switching
+ */
+export function createPatternToggle() {
+    return {
+        type: 'buttons',
+        direction: 'left',
+        showactive: true,
+        x: 0.1,
+        y: 1.15,
+        buttons: [
+            {
+                label: 'Horizontal',
+                method: 'restyle',
+                args: [{ visible: [true, true] }, [0, 1]]
+            },
+            {
+                label: 'Vertical',
+                method: 'restyle',
+                args: [{ visible: [true, true] }, [2, 3]]
+            }
+        ]
+    };
+}
+/**
+ * Calculates pattern comparison error between two antennas
+ */
+export function calculatePatternError(pattern1, pattern2, threshold = -3) {
+    let totalError = 0;
+    let validPoints = 0;
+    for (let i = 0; i < Math.min(pattern1.length, pattern2.length); i++) {
+        const val1 = pattern1[i];
+        const val2 = pattern2[i];
+        if (val1 !== null && val2 !== null && val1 >= threshold && val2 >= threshold) {
+            totalError += Math.abs(val1 - val2);
+            validPoints++;
+        }
+    }
+    return validPoints > 0 ? totalError / validPoints : Infinity;
+}
+/**
+ * Gets CSS color values for consistent theming
+ */
+export function getThemeColors() {
+    if (typeof document === 'undefined') {
+        return {
+            primary: '#0d6efd',
+            secondary: '#fd7e14',
+            primaryRgb: '13, 110, 253',
+            secondaryRgb: '253, 126, 20'
+        };
+    }
+    const styles = getComputedStyle(document.documentElement);
+    return {
+        primary: styles.getPropertyValue('--bs-primary').trim() || '#0d6efd',
+        secondary: styles.getPropertyValue('--bs-warning').trim() || '#fd7e14',
+        primaryRgb: styles.getPropertyValue('--bs-primary-rgb').trim() || '13, 110, 253',
+        secondaryRgb: styles.getPropertyValue('--bs-warning-rgb').trim() || '253, 126, 20'
+    };
+}