@smartnet360/svelte-components 0.0.13 → 0.0.14

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;

package/dist/apps/antenna-pattern/components/chart-engines/PolarLineChart.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 { 
+    createPolarLineChartData,
+    createPolarLineLayout,
+    type PolarLineTraceData
+  } from '../../utils/chart-engines/polar-line-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 Line 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 line 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 = createPolarLineChartData(
+      selectedAntenna,
+      selectedAntenna2,
+      viewMode,
+      patternType === 'horizontal',
+      patternType === 'vertical',
+      ant1ElectricalTilt,
+      ant1MechanicalTilt,
+      ant2ElectricalTilt,
+      ant2MechanicalTilt,
+      patternDisplayMode
+    );
+    
+    const layout = createPolarLineLayout(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 line chart initialized');
+    } catch (error) {
+      console.error('Failed to create polar line chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const data = createPolarLineChartData(
+        selectedAntenna,
+        selectedAntenna2,
+        viewMode,
+        patternType === 'horizontal',
+        patternType === 'vertical',
+        ant1ElectricalTilt,
+        ant1MechanicalTilt,
+        ant2ElectricalTilt,
+        ant2MechanicalTilt,
+        patternDisplayMode
+      );
+      
+      const layout = createPolarLineLayout(title);
+      await Plotly.react(chartDiv, data, layout);
+    } catch (error) {
+      console.error('Failed to update polar line chart:', error);
+    }
+  }
+</script>
+
+<div bind:this={chartDiv} style="height: 700px;"></div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarLineChart.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 PolarLineChart: import("svelte").Component<Props, {}, "">;
+type PolarLineChart = ReturnType<typeof PolarLineChart>;
+export default PolarLineChart;

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

@@ -0,0 +1,9 @@
+export { default as PolarLineChart } from './PolarLineChart.svelte';
+export { default as PolarBarChart } from './PolarBarChart.svelte';
+export { default as PolarAreaChart } from './PolarAreaChart.svelte';
+export type { PolarLineTraceData } from '../../utils/chart-engines/polar-line-utils';
+export type { PolarBarTraceData } from '../../utils/chart-engines/polar-bar-utils';
+export type { PolarAreaTraceData } from '../../utils/chart-engines/polar-area-utils';
+export * from '../../utils/chart-engines/polar-line-utils';
+export * from '../../utils/chart-engines/polar-bar-utils';
+export * from '../../utils/chart-engines/polar-area-utils';

package/dist/apps/antenna-pattern/components/chart-engines/index.js

@@ -0,0 +1,8 @@
+// Chart Engine Components
+export { default as PolarLineChart } from './PolarLineChart.svelte';
+export { default as PolarBarChart } from './PolarBarChart.svelte';
+export { default as PolarAreaChart } from './PolarAreaChart.svelte';
+// Chart Engine Utilities
+export * from '../../utils/chart-engines/polar-line-utils';
+export * from '../../utils/chart-engines/polar-bar-utils';
+export * from '../../utils/chart-engines/polar-area-utils';

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

@@ -6,6 +6,7 @@ export { default as JsonImporter } from './components/JsonImporter.svelte';
 export { default as MSIConverter } from './components/MSIConverter.svelte';
 export { default as DbNotification } from './components/DbNotification.svelte';
 export { default as AntennaDataDropdown } from './components/AntennaDataDropdown.svelte';
+export { PolarLineChart, PolarBarChart } from './components/chart-engines/index';
 export { antennas, selectedAntenna, searchQuery, filteredAntennas } from './stores/antennas';
 export { dbStatus, dataOperationStatus, updateDbStatus, trackDataOperation } from './stores/db-status';
 export { db, type Antenna } from './db';

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

@@ -7,6 +7,8 @@ export { default as JsonImporter } from './components/JsonImporter.svelte';
 export { default as MSIConverter } from './components/MSIConverter.svelte';
 export { default as DbNotification } from './components/DbNotification.svelte';
 export { default as AntennaDataDropdown } from './components/AntennaDataDropdown.svelte';
+// Chart Engine Components
+export { PolarLineChart, PolarBarChart } from './components/chart-engines/index';
 // Stores
 export { antennas, selectedAntenna, searchQuery, filteredAntennas } from './stores/antennas';
 export { dbStatus, dataOperationStatus, updateDbStatus, trackDataOperation } from './stores/db-status';

package/dist/apps/antenna-pattern/utils/chart-engines/polar-area-utils.d.ts

@@ -0,0 +1,89 @@
+import type { Antenna } from '../../db';
+export interface PolarAreaTraceData {
+    r: number[];
+    theta: number[];
+    type: 'scatterpolar';
+    mode: 'lines';
+    fill: 'toself';
+    name: string;
+    line: {
+        color: string;
+        width: number;
+    };
+    fillcolor: string;
+    opacity: number;
+}
+/**
+ * Convert antenna pattern to Plotly polar area trace data
+ */
+export declare function convertAntennaPatternToArea(pattern: number[], name: string, baseColor: string, opacity?: number, mechanicalTilt?: number, gainOffset?: number): PolarAreaTraceData;
+/**
+ * Get area colors with appropriate transparency
+ */
+export declare function getAreaColors(electricalTilt: number, mechanicalTilt: number, baseColor: string): {
+    line: string;
+    fill: string;
+};
+/**
+ * Create polar area chart data for antenna patterns
+ */
+export declare function createPolarAreaChartData(selectedAntenna: Antenna | null, selectedAntenna2: Antenna | null, viewMode: 'single' | 'compare', showHorizontalPatterns: boolean, showVerticalPatterns: boolean, ant1ElectricalTilt: number, ant1MechanicalTilt: number, ant2ElectricalTilt: number, ant2MechanicalTilt: number, patternDisplayMode?: 'normalized' | 'gain-adjusted'): PolarAreaTraceData[];
+/**
+ * Create Plotly layout for polar area charts
+ */
+export declare function createPolarAreaLayout(title: string): {
+    title: {
+        text: string;
+        font: {
+            size: number;
+            color: string;
+        };
+        x: number;
+        xanchor: string;
+    };
+    polar: {
+        radialaxis: {
+            visible: boolean;
+            range: number[];
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            tickmode: string;
+            tick0: number;
+            dtick: number;
+            ticksuffix: string;
+        };
+        angularaxis: {
+            visible: boolean;
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            direction: string;
+            period: number;
+            rotation: number;
+            ticksuffix: string;
+        };
+        bgcolor: string;
+    };
+    margin: {
+        t: number;
+        r: number;
+        b: number;
+        l: number;
+    };
+    height: number;
+    paper_bgcolor: string;
+    plot_bgcolor: string;
+    legend: {
+        orientation: string;
+        x: number;
+        y: number;
+        xanchor: string;
+    };
+};

package/dist/apps/antenna-pattern/utils/chart-engines/polar-area-utils.js

@@ -0,0 +1,146 @@
+/**
+ * Convert antenna pattern to Plotly polar area trace data
+ */
+export function convertAntennaPatternToArea(pattern, name, baseColor, opacity = 0.6, mechanicalTilt = 0, gainOffset = 0) {
+    // Convert attenuation to dB (negate values) and apply gain offset
+    let processedPattern = pattern.map(value => -value + gainOffset);
+    // Apply mechanical tilt by shifting the pattern
+    if (mechanicalTilt !== 0) {
+        const shiftedPattern = new Array(360).fill(0);
+        for (let i = 0; i < 360; i++) {
+            const sourceIndex = (i - mechanicalTilt + 360) % 360;
+            shiftedPattern[i] = processedPattern[sourceIndex] || 0;
+        }
+        processedPattern = shiftedPattern;
+    }
+    // Generate theta values (0-359 degrees) with proper rotation
+    const theta = [];
+    const r = [];
+    for (let i = 0; i < pattern.length; i++) {
+        let angle = i;
+        // Apply rotation to point antenna patterns to 0 degrees (North/up)
+        if (name.includes('Vertical')) {
+            angle = (i + 0) % 360; // Vertical patterns point to 0° (North/up)
+        }
+        else {
+            angle = (i + 270) % 360; // Rotate horizontal patterns 270° (or -90°) to point North
+        }
+        theta.push(angle);
+        r.push(processedPattern[i]);
+    }
+    // Close the area by adding the first point at the end
+    theta.push(theta[0]);
+    r.push(r[0]);
+    // Create semi-transparent fill color
+    const fillColor = baseColor.replace('rgb', 'rgba').replace(')', `, ${opacity})`);
+    return {
+        r,
+        theta,
+        type: 'scatterpolar',
+        mode: 'lines',
+        fill: 'toself',
+        name,
+        line: {
+            color: baseColor,
+            width: 2
+        },
+        fillcolor: fillColor,
+        opacity: 1 // Set to 1 since we control opacity via fillcolor
+    };
+}
+/**
+ * Get area colors with appropriate transparency
+ */
+export function getAreaColors(electricalTilt, mechanicalTilt, baseColor) {
+    return {
+        line: baseColor,
+        fill: baseColor.replace('rgb', 'rgba').replace(')', ', 0.3)')
+    };
+}
+/**
+ * Create polar area chart data for antenna patterns
+ */
+export function createPolarAreaChartData(selectedAntenna, selectedAntenna2, viewMode, showHorizontalPatterns, showVerticalPatterns, ant1ElectricalTilt, ant1MechanicalTilt, ant2ElectricalTilt, ant2MechanicalTilt, patternDisplayMode = 'normalized') {
+    const data = [];
+    // Calculate gain offsets for gain-adjusted display mode
+    let ant1GainOffset = 0;
+    let ant2GainOffset = 0;
+    if (patternDisplayMode === 'gain-adjusted' && viewMode === 'compare') {
+        const ant1Gain = selectedAntenna?.gain_dBd || 0;
+        const ant2Gain = selectedAntenna2?.gain_dBd || 0;
+        const maxGain = Math.max(ant1Gain, ant2Gain);
+        // Offset both antennas relative to the highest gain antenna
+        ant1GainOffset = ant1Gain - maxGain;
+        ant2GainOffset = ant2Gain - maxGain;
+    }
+    // Create antenna 1 pattern data based on visibility settings
+    if (selectedAntenna) {
+        if (showHorizontalPatterns) {
+            const horizontalData1 = convertAntennaPatternToArea(selectedAntenna.pattern || [], 'Antenna 1 - Horizontal', 'rgb(0, 102, 204)', 0.4, ant1MechanicalTilt, ant1GainOffset);
+            data.push(horizontalData1);
+        }
+        if (showVerticalPatterns) {
+            const verticalData1 = convertAntennaPatternToArea(selectedAntenna.vertical_pattern || [], 'Antenna 1 - Vertical', 'rgb(0, 61, 122)', 0.3, ant1MechanicalTilt, ant1GainOffset);
+            data.push(verticalData1);
+        }
+    }
+    // Add second antenna if in compare mode and antenna 2 is selected
+    if (viewMode === 'compare' && selectedAntenna2) {
+        if (showHorizontalPatterns) {
+            const horizontalData2 = convertAntennaPatternToArea(selectedAntenna2.pattern || [], 'Antenna 2 - Horizontal', 'rgb(255, 215, 0)', 0.4, ant2MechanicalTilt, ant2GainOffset);
+            data.push(horizontalData2);
+        }
+        if (showVerticalPatterns) {
+            const verticalData2 = convertAntennaPatternToArea(selectedAntenna2.vertical_pattern || [], 'Antenna 2 - Vertical', 'rgb(230, 194, 0)', 0.3, ant2MechanicalTilt, ant2GainOffset);
+            data.push(verticalData2);
+        }
+    }
+    return data;
+}
+/**
+ * Create Plotly layout for polar area charts
+ */
+export function createPolarAreaLayout(title) {
+    return {
+        title: {
+            text: title,
+            font: { size: 16, color: '#212529' },
+            x: 0.5,
+            xanchor: 'center'
+        },
+        polar: {
+            radialaxis: {
+                visible: true,
+                range: [-70, 0],
+                tickfont: { size: 10, color: '#6c757d' },
+                gridcolor: 'rgba(108, 117, 125, 0.3)',
+                linecolor: 'rgba(108, 117, 125, 0.5)',
+                tickmode: 'linear',
+                tick0: -70,
+                dtick: 10,
+                ticksuffix: ' dB'
+            },
+            angularaxis: {
+                visible: true,
+                tickfont: { size: 11, color: '#495057' },
+                gridcolor: 'rgba(108, 117, 125, 0.2)',
+                linecolor: 'rgba(108, 117, 125, 0.4)',
+                direction: 'clockwise',
+                period: 360,
+                rotation: 0,
+                ticksuffix: '°'
+            },
+            bgcolor: 'rgba(248, 249, 250, 0.5)'
+        },
+        margin: { t: 60, r: 40, b: 60, l: 40 },
+        height: 600,
+        paper_bgcolor: 'rgba(255, 255, 255, 0.95)',
+        plot_bgcolor: 'rgba(248, 249, 250, 0.3)',
+        legend: {
+            orientation: 'h',
+            x: 0.5,
+            y: -0.1,
+            xanchor: 'center'
+        }
+    };
+}

package/dist/apps/antenna-pattern/utils/chart-engines/polar-bar-utils.d.ts

@@ -0,0 +1,88 @@
+import type { Antenna } from '../../db';
+export interface PolarBarTraceData {
+    r: number[];
+    theta: number[];
+    type: 'barpolar';
+    name: string;
+    marker: {
+        color: string;
+        opacity: number;
+        line: {
+            color: string;
+            width: number;
+        };
+    };
+}
+/**
+ * Convert antenna pattern to Plotly polar bar trace data
+ */
+export declare function convertAntennaPatternToBar(pattern: number[], name: string, color: string, opacity?: number, mechanicalTilt?: number): PolarBarTraceData;
+/**
+ * Get bar color with appropriate opacity
+ */
+export declare function getBarColor(electricalTilt: number, mechanicalTilt: number, baseColor: string): string;
+/**
+ * Create polar bar chart data for antenna patterns
+ */
+export declare function createPolarBarChartData(selectedAntenna: Antenna | null, selectedAntenna2: Antenna | null, viewMode: 'single' | 'compare', showHorizontalPatterns: boolean, showVerticalPatterns: boolean, ant1ElectricalTilt: number, ant1MechanicalTilt: number, ant2ElectricalTilt: number, ant2MechanicalTilt: number): PolarBarTraceData[];
+/**
+ * Create Plotly layout for polar bar charts
+ */
+export declare function createPolarBarLayout(title: string): {
+    title: {
+        text: string;
+        font: {
+            size: number;
+            color: string;
+        };
+        x: number;
+        xanchor: string;
+    };
+    polar: {
+        radialaxis: {
+            visible: boolean;
+            range: number[];
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            tickmode: string;
+            tick0: number;
+            dtick: number;
+            ticksuffix: string;
+        };
+        angularaxis: {
+            visible: boolean;
+            tickfont: {
+                size: number;
+                color: string;
+            };
+            gridcolor: string;
+            linecolor: string;
+            direction: string;
+            period: number;
+            rotation: number;
+            ticksuffix: string;
+        };
+        bgcolor: string;
+    };
+    margin: {
+        t: number;
+        r: number;
+        b: number;
+        l: number;
+    };
+    height: number;
+    paper_bgcolor: string;
+    plot_bgcolor: string;
+    legend: {
+        orientation: string;
+        x: number;
+        y: number;
+        xanchor: string;
+    };
+    bargap: number;
+    barnorm: string;
+};