charts.js

import { chartConfig } from './config.js';

// Import Chart.js as a module instead of individual components
import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js';

// Import annotation plugin
import 'https://cdn.jsdelivr.net/npm/[email protected]/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"
                                }
                            }
                        }
                    }
                }
            }
        }
    });
}