Create charts.js

charts.js

@@ -0,0 +1,253 @@
+import { chartConfig } from './config.js';
+
+// Import Chart.js as a module instead of individual components
+import 'https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.js';
+
+// Import annotation plugin
+import 'https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js';
+
+export function initCharts() {
+    const { theme } = chartConfig;
+
+    // Enhanced gradient with multiple color stops
+    function createGradient(ctx) {
+        const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+        gradient.addColorStop(0, 'rgba(75, 192, 192, 0.8)');
+        gradient.addColorStop(0.5, 'rgba(75, 192, 192, 0.3)');
+        gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)');
+        return gradient;
+    }
+
+    // Shared chart options with enhanced styling
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: true,
+        aspectRatio: 16/9,
+        layout: {
+            padding: {
+                top: 20,
+                right: 20,
+                bottom: 40,
+                left: 40
+            }
+        },
+        plugins: {
+            legend: {
+                labels: {
+                    color: theme.text,
+                    font: {
+                        family: "'JetBrains Mono', monospace",
+                        weight: 'bold'
+                    },
+                    boxWidth: 40,
+                    usePointStyle: true,
+                    pointStyle: 'rectRounded'
+                }
+            }
+        },
+        scales: {
+            x: {
+                grid: {
+                    color: theme.grid,
+                    borderColor: theme.grid,
+                    tickColor: theme.grid
+                },
+                ticks: {
+                    color: theme.text,
+                    font: {
+                        weight: 'bold'
+                    }
+                },
+                title: {
+                    display: true,
+                    text: 'Moduli Parameter t',
+                    color: theme.text,
+                    font: {
+                        family: "'JetBrains Mono', monospace",
+                        size: 14,
+                        weight: 'bold'
+                    }
+                }
+            },
+            y: {
+                grid: {
+                    color: theme.grid,
+                    borderColor: theme.grid,
+                    tickColor: theme.grid
+                },
+                ticks: {
+                    color: theme.text,
+                    font: {
+                        weight: 'bold'
+                    }
+                },
+                title: {
+                    display: true,
+                    text: 'Effective Potential V(t)',
+                    color: theme.text,
+                    font: {
+                        family: "'JetBrains Mono', monospace",
+                        size: 14,
+                        weight: 'bold'
+                    }
+                }
+            }
+        }
+    };
+
+    // Initialize potential landscape chart 
+    const potentialCtx = document.getElementById('potential-landscape').getContext('2d');
+    const potentialGradient = createGradient(potentialCtx);
+    
+    new Chart(potentialCtx, {
+        type: 'line',
+        data: {
+            labels: chartConfig.potentialData.labels,
+            datasets: [{
+                label: 'Effective Potential V(t)',
+                data: chartConfig.potentialData.values,
+                borderColor: theme.primary,
+                backgroundColor: potentialGradient,
+                borderWidth: 2,
+                pointBackgroundColor: theme.primary,
+                pointBorderColor: theme.primary,
+                pointHoverBackgroundColor: theme.highlight,
+                pointHoverBorderColor: theme.highlight,
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            ...chartOptions,
+            plugins: {
+                ...chartOptions.plugins,
+                annotation: {
+                    annotations: {
+                        unstablePoint: {
+                            type: 'point',
+                            xValue: chartConfig.potentialData.unstablePoint.x,
+                            yValue: chartConfig.potentialData.unstablePoint.y,
+                            radius: 8,
+                            backgroundColor: 'rgba(255, 0, 0, 0.8)',
+                            borderColor: 'rgba(255, 0, 0, 0.2)',
+                            borderWidth: 4,
+                            label: {
+                                content: chartConfig.potentialData.unstablePoint.label,
+                                enabled: true,
+                                position: 'top',
+                                color: theme.text,
+                                font: {
+                                    family: "'JetBrains Mono', monospace"
+                                }
+                            }
+                        },
+                        stablePoint: {
+                            type: 'point',
+                            xValue: chartConfig.potentialData.stablePoint.x,
+                            yValue: chartConfig.potentialData.stablePoint.y,
+                            radius: 8,
+                            backgroundColor: 'rgba(0, 255, 0, 0.8)',
+                            borderColor: 'rgba(0, 255, 0, 0.2)',
+                            borderWidth: 4,
+                            label: {
+                                content: chartConfig.potentialData.stablePoint.label,
+                                enabled: true,
+                                position: 'top',
+                                color: theme.text,
+                                font: {
+                                    family: "'JetBrains Mono', monospace"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Initialize gauge coupling chart
+    const gaugeCtx = document.getElementById('gauge-coupling-interplay').getContext('2d');
+    const gaugeGradient = createGradient(gaugeCtx);
+
+    new Chart(gaugeCtx, {
+        type: 'line',
+        data: {
+            labels: chartConfig.gaugeCouplingData.labels,
+            datasets: [{
+                label: 'Effective Gauge Coupling g(t)',
+                data: chartConfig.gaugeCouplingData.values,
+                borderColor: theme.secondary,
+                backgroundColor: gaugeGradient,
+                borderWidth: 2,
+                pointBackgroundColor: theme.secondary,
+                pointBorderColor: theme.secondary,
+                pointHoverBackgroundColor: theme.highlight,
+                pointHoverBorderColor: theme.highlight,
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            ...chartOptions,
+            scales: {
+                ...chartOptions.scales,
+                y: {
+                    ...chartOptions.scales.y,
+                    title: {
+                        display: true,
+                        text: 'Effective Gauge Coupling g(t)',
+                        color: theme.text,
+                        font: {
+                            family: "'JetBrains Mono', monospace",
+                            size: 14,
+                            weight: 'bold'
+                        }
+                    }
+                }
+            },
+            plugins: {
+                ...chartOptions.plugins,
+                annotation: {
+                    annotations: {
+                        stableGauge: {
+                            type: 'point',
+                            xValue: chartConfig.gaugeCouplingData.stablePoint.x,
+                            yValue: chartConfig.gaugeCouplingData.stablePoint.y,
+                            radius: 8,
+                            backgroundColor: 'rgba(0, 255, 0, 0.8)',
+                            borderColor: 'rgba(0, 255, 0, 0.2)',
+                            borderWidth: 4,
+                            label: {
+                                content: chartConfig.gaugeCouplingData.stablePoint.label,
+                                enabled: true,
+                                position: 'top',
+                                color: theme.text,
+                                font: {
+                                    family: "'JetBrains Mono', monospace"
+                                }
+                            }
+                        },
+                        higherGauge: {
+                            type: 'point',
+                            xValue: chartConfig.gaugeCouplingData.higherPoint.x,
+                            yValue: chartConfig.gaugeCouplingData.higherPoint.y,
+                            radius: 8,
+                            backgroundColor: 'rgba(255, 165, 0, 0.8)',
+                            borderColor: 'rgba(255, 165, 0, 0.2)',
+                            borderWidth: 4,
+                            label: {
+                                content: chartConfig.gaugeCouplingData.higherPoint.label,
+                                enabled: true,
+                                position: 'top',
+                                color: theme.text,
+                                font: {
+                                    family: "'JetBrains Mono', monospace"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    });
+}