| import { chartConfig } from './config.js'; |
|
|
| |
| import 'https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.js'; |
|
|
| |
| import 'https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js'; |
|
|
| export function initCharts() { |
| const { theme } = chartConfig; |
|
|
| |
| 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; |
| } |
|
|
| |
| 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' |
| } |
| } |
| } |
| } |
| }; |
|
|
| |
| 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" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }); |
|
|
| |
| 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" |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| }); |
| } |
