@smartnet360/svelte-components 0.0.13 → 0.0.15

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

@@ -2,25 +2,18 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
   import { loadAntennas } from '../utils/db-utils';
   import type { Antenna } from '../db';
   import AntennaControls from './AntennaControls.svelte';
   import AntennaSettingsModal from './AntennaSettingsModal.svelte';
-  import { 
-    createAntennaChartData,
-    createChartLayout,
-    createChartConfig,
-    generateChartTitle,
-    type PlotlyTraceData
-  } from '../utils/plotly-chart-utils';
-
-  let Plotly: any;
-  let chartDiv = $state<HTMLDivElement>();
+  import { PolarLineChart, PolarBarChart, PolarAreaChart } from './chart-engines/index';
+
+  // Chart engine types
+  type ChartEngineType = 'polar-line' | 'polar-bar' | 'polar-area';
+
   let antennas = $state<Antenna[]>([]);
   let selectedAntenna = $state<Antenna | null>(null);
   let selectedAntenna2 = $state<Antenna | null>(null);
-  let chartInitialized = $state(false);
 
   // External Bootstrap slider values
   let ant1ElectricalTilt = $state(0);
@@ -31,6 +24,12 @@
   // Viewing mode and pattern visibility
   let viewMode = $state<'single' | 'compare'>('single');
   let patternType = $state<'horizontal' | 'vertical'>('vertical');
+  
+  // Chart engine selection
+  let chartEngine = $state<ChartEngineType>('polar-line');
+
+  // Pattern display mode - normalized vs gain-adjusted
+  let patternDisplayMode = $state<'normalized' | 'gain-adjusted'>('normalized');
 
   // Settings modal state
   let showSettingsModal = $state(false);
@@ -40,12 +39,35 @@
 
   // Handle antenna selection from controls
   function handleAntenna1Change(antenna: Antenna | null) {
+    console.log('📥 [PARENT] handleAntenna1Change called:', {
+      antenna: antenna ? {
+        name: antenna.name,
+        frequency: antenna.frequency,
+        tilt: antenna.tilt
+      } : null,
+      previousAntenna: selectedAntenna ? {
+        name: selectedAntenna.name,
+        frequency: selectedAntenna.frequency,
+        tilt: selectedAntenna.tilt
+      } : null,
+      timestamp: new Date().toISOString()
+    });
+
     selectedAntenna = antenna;
     if (antenna) {
       // Update available electrical tilts based on selected antenna
+      const previousTilts = [...availableElectricalTilts];
       availableElectricalTilts = antenna.tilt ? 
         antenna.tilt.split(',').map(t => t.trim()) : 
         ['0', '2', '4', '6', '8'];
+      
+      console.log('🔧 [PARENT] Updated available tilts and reset positions:', {
+        from: previousTilts,
+        to: availableElectricalTilts,
+        electricalTiltReset: ant1ElectricalTilt,
+        mechanicalTiltReset: ant1MechanicalTilt
+      });
+
       ant1ElectricalTilt = 0;
       ant1MechanicalTilt = 0;
     }
@@ -61,10 +83,22 @@
 
   // Handle electrical tilt changes from controls
   function handleTilt1Change(tilt: number) {
+    console.log('📥 [PARENT] handleTilt1Change called:', {
+      tilt,
+      previousTilt: ant1ElectricalTilt,
+      changed: tilt !== ant1ElectricalTilt,
+      timestamp: new Date().toISOString()
+    });
     ant1ElectricalTilt = tilt;
   }
 
   function handleTilt2Change(tilt: number) {
+    console.log('📥 [PARENT] handleTilt2Change called:', {
+      tilt,
+      previousTilt: ant2ElectricalTilt,
+      changed: tilt !== ant2ElectricalTilt,
+      timestamp: new Date().toISOString()
+    });
     ant2ElectricalTilt = tilt;
   }
 
@@ -118,89 +152,38 @@
     }
   }
 
-  // Watch for slider changes and update chart
-  $effect(() => {
-    if (chartInitialized) {
-      updateChart();
-    }
-  });
-
   onMount(async () => {
-    if (browser) {
-      try {
-        // Load Plotly and antenna data
-        Plotly = await import('plotly.js-dist-min');
-        antennas = await loadAntennas();
+    try {
+      // Load antenna data
+      antennas = await loadAntennas();
+        
+      if (antennas.length > 0) {
+        // Set default antenna selection for antenna 1
+        selectedAntenna = antennas[0];
+        if (selectedAntenna.tilt) {
+          availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
+        }
         
-        if (antennas.length > 0) {
-          // Set default antenna selection for antenna 1
-          selectedAntenna = antennas[0];
-          if (selectedAntenna.tilt) {
-            availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
-          }
-          
-          // Set default antenna selection for antenna 2 (for compare mode)
-          if (antennas.length > 1) {
-            selectedAntenna2 = antennas[1];
-          } else {
-            selectedAntenna2 = antennas[0]; // Use same antenna if only one available
-          }
-          
-          await initializeChart();
+        // Set default antenna selection for antenna 2 (for compare mode)
+        if (antennas.length > 1) {
+          selectedAntenna2 = antennas[1];
+        } else {
+          selectedAntenna2 = antennas[0]; // Use same antenna if only one available
         }
-      } catch (error) {
-        console.error('Failed to initialize:', error);
       }
-    }
-  });
-
-  async function initializeChart() {
-    if (!Plotly || !chartDiv) return;
-
-    const data = createAntennaChartData(
-      selectedAntenna,
-      selectedAntenna2,
-      viewMode,
-      patternType === 'horizontal',
-      patternType === 'vertical',
-      ant1ElectricalTilt,
-      ant1MechanicalTilt,
-      ant2ElectricalTilt,
-      ant2MechanicalTilt
-    );
-    const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
-    const layout = createChartLayout(title);
-    const config = createChartConfig();
-
-    try {
-      await Plotly.newPlot(chartDiv, data, layout, config);
-      chartInitialized = true;
-      console.log('Chart initialized with antenna controls');
     } catch (error) {
-      console.error('Failed to create chart:', error);
+      console.error('Failed to initialize:', error);
     }
-  }
-
-  async function updateChart() {
-    if (!Plotly || !chartDiv || !chartInitialized) return;
+  });
 
-    try {
-      const data = createAntennaChartData(
-        selectedAntenna,
-        selectedAntenna2,
-        viewMode,
-        patternType === 'horizontal',
-        patternType === 'vertical',
-        ant1ElectricalTilt,
-        ant1MechanicalTilt,
-        ant2ElectricalTilt,
-        ant2MechanicalTilt
-      );
-      const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
-      await Plotly.react(chartDiv, data, createChartLayout(title));
-    } catch (error) {
-      console.error('Failed to update chart:', error);
+  // Generate chart title based on current selection
+  function generateChartTitle(): string {
+    if (viewMode === 'compare' && selectedAntenna && selectedAntenna2) {
+      return `${selectedAntenna.name} vs ${selectedAntenna2.name}`;
+    } else if (selectedAntenna) {
+      return `${selectedAntenna.name} - Pattern Analysis`;
     }
+    return 'Antenna Pattern Analysis';
   }
 </script>
 
@@ -208,10 +191,10 @@
 
 
   <!-- Viewing Mode and Pattern Visibility Controls -->
-  <div class="row mb-4">
-    <div class="col-md-4">
-      <div class="form-label">Viewing Mode:</div>
-      <div class="btn-group w-100" role="group" aria-label="Viewing mode selection">
+  <div class="row mb-3">
+    <div class="col-md-2">
+      <div class="form-label">View Mode:</div>
+      <div class="btn-group w-100" role="group" aria-label="View mode selection">
         <input 
           type="radio" 
           class="btn-check" 
@@ -219,7 +202,7 @@
           bind:group={viewMode} 
           value="single"
         >
-        <label class="btn btn-outline-primary" for="singleMode">Single Antenna</label>
+        <label class="btn btn-outline-primary" for="singleMode">Single</label>
 
         <input 
           type="radio" 
@@ -232,7 +215,62 @@
       </div>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-md-2">
+      <div class="form-label">Chart Type:</div>
+      <div class="btn-group w-100" role="group" aria-label="Chart type selection">
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarLineChart" 
+          bind:group={chartEngine} 
+          value="polar-line"
+        >
+        <label class="btn btn-outline-primary" for="polarLineChart">Line</label>
+
+        <!-- <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarBarChart" 
+          bind:group={chartEngine} 
+          value="polar-bar"
+        >
+        <label class="btn btn-outline-success" for="polarBarChart">Bar</label> -->
+
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarAreaChart" 
+          bind:group={chartEngine} 
+          value="polar-area"
+        >
+        <label class="btn btn-outline-primary" for="polarAreaChart">Area</label>
+      </div>
+    </div>
+
+    <div class="col-md-3">
+      <div class="form-label">Display Mode:</div>
+      <div class="btn-group w-100" role="group" aria-label="Pattern display mode selection">
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="normalizedMode" 
+          bind:group={patternDisplayMode} 
+          value="normalized"
+        >
+        <label class="btn btn-outline-primary" for="normalizedMode">Pattern</label>
+
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="gainAdjustedMode" 
+          bind:group={patternDisplayMode} 
+          value="gain-adjusted"
+        >
+        <label class="btn btn-outline-primary" for="gainAdjustedMode">+Gain</label>
+      </div>
+    </div>
+
+    <div class="col-md-2">
       <div class="form-label">Pattern Type:</div>
       <div class="btn-group w-100" role="group" aria-label="Pattern type selection">
         <input 
@@ -255,7 +293,7 @@
       </div>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-md-3">
       <div class="form-label">Actions:</div>
       <button 
         type="button" 
@@ -284,11 +322,50 @@
       />
     </div>
 
-    <!-- Center Column - Chart (always centered) -->
+    <!-- Center Column - Chart Engine (always centered) -->
     <div class="col-md-6">
       <div class="card">
         <div class="card-body p-1">
-          <div bind:this={chartDiv} style="height: 700px;"></div>
+          {#if chartEngine === 'polar-line'}
+            <PolarLineChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {:else if chartEngine === 'polar-bar'}
+            <PolarBarChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {:else if chartEngine === 'polar-area'}
+            <PolarAreaChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {/if}
         </div>
       </div>
     </div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarAreaChart.svelte

@@ -0,0 +1,125 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import type { Antenna } from '../../db';
+  import { 
+    createPolarAreaChartData,
+    createPolarAreaLayout,
+    type PolarAreaTraceData
+  } from '../../utils/chart-engines/polar-area-utils';
+
+  interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+  }
+
+  let {
+    selectedAntenna = null,
+    selectedAntenna2 = null,
+    viewMode = 'single',
+    patternType = 'vertical',
+    patternDisplayMode = 'normalized',
+    ant1ElectricalTilt = 0,
+    ant1MechanicalTilt = 0,
+    ant2ElectricalTilt = 0,
+    ant2MechanicalTilt = 0,
+    title = 'Antenna Pattern - Polar Area Chart'
+  }: Props = $props();
+
+  let Plotly: any;
+  let chartDiv = $state<HTMLDivElement>();
+  let chartInitialized = $state(false);
+
+  // Initialize Plotly on mount
+  onMount(async () => {
+    if (browser) {
+      try {
+        Plotly = await import('plotly.js-dist-min');
+        console.log('Plotly loaded for polar area chart');
+        await initializeChart();
+      } catch (error) {
+        console.error('Failed to load Plotly:', error);
+      }
+    }
+  });
+
+  // Update chart when data changes
+  $effect(() => {
+    if (chartInitialized) {
+      updateChart();
+    }
+  });
+
+  async function initializeChart() {
+    if (!Plotly || !chartDiv) return;
+
+    const data = createPolarAreaChartData(
+      selectedAntenna,
+      selectedAntenna2,
+      viewMode,
+      patternType === 'horizontal',
+      patternType === 'vertical',
+      ant1ElectricalTilt,
+      ant1MechanicalTilt,
+      ant2ElectricalTilt,
+      ant2MechanicalTilt,
+      patternDisplayMode
+    );
+    
+    const layout = createPolarAreaLayout(title);
+    const config = {
+      responsive: true,
+      displayModeBar: true,
+      displaylogo: false,
+      modeBarButtonsToRemove: [
+        'zoom2d', 'pan2d', 'select2d', 'lasso2d',
+        'zoomIn2d', 'zoomOut2d', 'autoScale2d', 
+        'resetScale2d', 'toggleSpikelines', 'toImage'
+      ]
+    };
+
+    try {
+      await Plotly.newPlot(chartDiv, data, layout, config);
+      chartInitialized = true;
+      console.log('Polar area chart initialized');
+    } catch (error) {
+      console.error('Failed to create polar area chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const data = createPolarAreaChartData(
+        selectedAntenna,
+        selectedAntenna2,
+        viewMode,
+        patternType === 'horizontal',
+        patternType === 'vertical',
+        ant1ElectricalTilt,
+        ant1MechanicalTilt,
+        ant2ElectricalTilt,
+        ant2MechanicalTilt,
+        patternDisplayMode
+      );
+      
+      const layout = createPolarAreaLayout(title);
+      await Plotly.react(chartDiv, data, layout);
+    } catch (error) {
+      console.error('Failed to update polar area chart:', error);
+    }
+  }
+</script>
+
+<div bind:this={chartDiv} style="height: 700px;"></div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarAreaChart.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Antenna } from '../../db';
+interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+}
+declare const PolarAreaChart: import("svelte").Component<Props, {}, "">;
+type PolarAreaChart = ReturnType<typeof PolarAreaChart>;
+export default PolarAreaChart;

package/dist/apps/antenna-pattern/components/chart-engines/PolarBarChart.svelte

@@ -0,0 +1,121 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import type { Antenna } from '../../db';
+  import { 
+    createPolarBarChartData,
+    createPolarBarLayout,
+    type PolarBarTraceData
+  } from '../../utils/chart-engines/polar-bar-utils';
+
+  interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+  }
+
+  let {
+    selectedAntenna = null,
+    selectedAntenna2 = null,
+    viewMode = 'single',
+    patternType = 'vertical',
+    ant1ElectricalTilt = 0,
+    ant1MechanicalTilt = 0,
+    ant2ElectricalTilt = 0,
+    ant2MechanicalTilt = 0,
+    title = 'Antenna Pattern - Polar Bar Chart'
+  }: Props = $props();
+
+  let Plotly: any;
+  let chartDiv = $state<HTMLDivElement>();
+  let chartInitialized = $state(false);
+
+  // Initialize Plotly on mount
+  onMount(async () => {
+    if (browser) {
+      try {
+        Plotly = await import('plotly.js-dist-min');
+        console.log('Plotly loaded for polar bar chart');
+        await initializeChart();
+      } catch (error) {
+        console.error('Failed to load Plotly:', error);
+      }
+    }
+  });
+
+  // Update chart when data changes
+  $effect(() => {
+    if (chartInitialized) {
+      updateChart();
+    }
+  });
+
+  async function initializeChart() {
+    if (!Plotly || !chartDiv) return;
+
+    const data = createPolarBarChartData(
+      selectedAntenna,
+      selectedAntenna2,
+      viewMode,
+      patternType === 'horizontal',
+      patternType === 'vertical',
+      ant1ElectricalTilt,
+      ant1MechanicalTilt,
+      ant2ElectricalTilt,
+      ant2MechanicalTilt
+    );
+    
+    const layout = createPolarBarLayout(title);
+    const config = {
+      responsive: true,
+      displayModeBar: true,
+      displaylogo: false,
+      modeBarButtonsToRemove: [
+        'zoom2d', 'pan2d', 'select2d', 'lasso2d',
+        'zoomIn2d', 'zoomOut2d', 'autoScale2d', 
+        'resetScale2d', 'toggleSpikelines', 'toImage'
+      ]
+    };
+
+    try {
+      await Plotly.newPlot(chartDiv, data, layout, config);
+      chartInitialized = true;
+      console.log('Polar bar chart initialized');
+    } catch (error) {
+      console.error('Failed to create polar bar chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const data = createPolarBarChartData(
+        selectedAntenna,
+        selectedAntenna2,
+        viewMode,
+        patternType === 'horizontal',
+        patternType === 'vertical',
+        ant1ElectricalTilt,
+        ant1MechanicalTilt,
+        ant2ElectricalTilt,
+        ant2MechanicalTilt
+      );
+      
+      const layout = createPolarBarLayout(title);
+      await Plotly.react(chartDiv, data, layout);
+    } catch (error) {
+      console.error('Failed to update polar bar chart:', error);
+    }
+  }
+</script>
+
+<div bind:this={chartDiv} style="height: 700px;"></div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarBarChart.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Antenna } from '../../db';
+interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+}
+declare const PolarBarChart: import("svelte").Component<Props, {}, "">;
+type PolarBarChart = ReturnType<typeof PolarBarChart>;
+export default PolarBarChart;