Create charts.js
Browse files
charts.js
ADDED
@@ -0,0 +1,253 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { chartConfig } from './config.js';
|
2 |
+
|
3 |
+
// Import Chart.js as a module instead of individual components
|
4 |
+
import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js';
|
5 |
+
|
6 |
+
// Import annotation plugin
|
7 |
+
import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-annotation.min.js';
|
8 |
+
|
9 |
+
export function initCharts() {
|
10 |
+
const { theme } = chartConfig;
|
11 |
+
|
12 |
+
// Enhanced gradient with multiple color stops
|
13 |
+
function createGradient(ctx) {
|
14 |
+
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
15 |
+
gradient.addColorStop(0, 'rgba(75, 192, 192, 0.8)');
|
16 |
+
gradient.addColorStop(0.5, 'rgba(75, 192, 192, 0.3)');
|
17 |
+
gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)');
|
18 |
+
return gradient;
|
19 |
+
}
|
20 |
+
|
21 |
+
// Shared chart options with enhanced styling
|
22 |
+
const chartOptions = {
|
23 |
+
responsive: true,
|
24 |
+
maintainAspectRatio: true,
|
25 |
+
aspectRatio: 16/9,
|
26 |
+
layout: {
|
27 |
+
padding: {
|
28 |
+
top: 20,
|
29 |
+
right: 20,
|
30 |
+
bottom: 40,
|
31 |
+
left: 40
|
32 |
+
}
|
33 |
+
},
|
34 |
+
plugins: {
|
35 |
+
legend: {
|
36 |
+
labels: {
|
37 |
+
color: theme.text,
|
38 |
+
font: {
|
39 |
+
family: "'JetBrains Mono', monospace",
|
40 |
+
weight: 'bold'
|
41 |
+
},
|
42 |
+
boxWidth: 40,
|
43 |
+
usePointStyle: true,
|
44 |
+
pointStyle: 'rectRounded'
|
45 |
+
}
|
46 |
+
}
|
47 |
+
},
|
48 |
+
scales: {
|
49 |
+
x: {
|
50 |
+
grid: {
|
51 |
+
color: theme.grid,
|
52 |
+
borderColor: theme.grid,
|
53 |
+
tickColor: theme.grid
|
54 |
+
},
|
55 |
+
ticks: {
|
56 |
+
color: theme.text,
|
57 |
+
font: {
|
58 |
+
weight: 'bold'
|
59 |
+
}
|
60 |
+
},
|
61 |
+
title: {
|
62 |
+
display: true,
|
63 |
+
text: 'Moduli Parameter t',
|
64 |
+
color: theme.text,
|
65 |
+
font: {
|
66 |
+
family: "'JetBrains Mono', monospace",
|
67 |
+
size: 14,
|
68 |
+
weight: 'bold'
|
69 |
+
}
|
70 |
+
}
|
71 |
+
},
|
72 |
+
y: {
|
73 |
+
grid: {
|
74 |
+
color: theme.grid,
|
75 |
+
borderColor: theme.grid,
|
76 |
+
tickColor: theme.grid
|
77 |
+
},
|
78 |
+
ticks: {
|
79 |
+
color: theme.text,
|
80 |
+
font: {
|
81 |
+
weight: 'bold'
|
82 |
+
}
|
83 |
+
},
|
84 |
+
title: {
|
85 |
+
display: true,
|
86 |
+
text: 'Effective Potential V(t)',
|
87 |
+
color: theme.text,
|
88 |
+
font: {
|
89 |
+
family: "'JetBrains Mono', monospace",
|
90 |
+
size: 14,
|
91 |
+
weight: 'bold'
|
92 |
+
}
|
93 |
+
}
|
94 |
+
}
|
95 |
+
}
|
96 |
+
};
|
97 |
+
|
98 |
+
// Initialize potential landscape chart
|
99 |
+
const potentialCtx = document.getElementById('potential-landscape').getContext('2d');
|
100 |
+
const potentialGradient = createGradient(potentialCtx);
|
101 |
+
|
102 |
+
new Chart(potentialCtx, {
|
103 |
+
type: 'line',
|
104 |
+
data: {
|
105 |
+
labels: chartConfig.potentialData.labels,
|
106 |
+
datasets: [{
|
107 |
+
label: 'Effective Potential V(t)',
|
108 |
+
data: chartConfig.potentialData.values,
|
109 |
+
borderColor: theme.primary,
|
110 |
+
backgroundColor: potentialGradient,
|
111 |
+
borderWidth: 2,
|
112 |
+
pointBackgroundColor: theme.primary,
|
113 |
+
pointBorderColor: theme.primary,
|
114 |
+
pointHoverBackgroundColor: theme.highlight,
|
115 |
+
pointHoverBorderColor: theme.highlight,
|
116 |
+
tension: 0.4,
|
117 |
+
fill: true
|
118 |
+
}]
|
119 |
+
},
|
120 |
+
options: {
|
121 |
+
...chartOptions,
|
122 |
+
plugins: {
|
123 |
+
...chartOptions.plugins,
|
124 |
+
annotation: {
|
125 |
+
annotations: {
|
126 |
+
unstablePoint: {
|
127 |
+
type: 'point',
|
128 |
+
xValue: chartConfig.potentialData.unstablePoint.x,
|
129 |
+
yValue: chartConfig.potentialData.unstablePoint.y,
|
130 |
+
radius: 8,
|
131 |
+
backgroundColor: 'rgba(255, 0, 0, 0.8)',
|
132 |
+
borderColor: 'rgba(255, 0, 0, 0.2)',
|
133 |
+
borderWidth: 4,
|
134 |
+
label: {
|
135 |
+
content: chartConfig.potentialData.unstablePoint.label,
|
136 |
+
enabled: true,
|
137 |
+
position: 'top',
|
138 |
+
color: theme.text,
|
139 |
+
font: {
|
140 |
+
family: "'JetBrains Mono', monospace"
|
141 |
+
}
|
142 |
+
}
|
143 |
+
},
|
144 |
+
stablePoint: {
|
145 |
+
type: 'point',
|
146 |
+
xValue: chartConfig.potentialData.stablePoint.x,
|
147 |
+
yValue: chartConfig.potentialData.stablePoint.y,
|
148 |
+
radius: 8,
|
149 |
+
backgroundColor: 'rgba(0, 255, 0, 0.8)',
|
150 |
+
borderColor: 'rgba(0, 255, 0, 0.2)',
|
151 |
+
borderWidth: 4,
|
152 |
+
label: {
|
153 |
+
content: chartConfig.potentialData.stablePoint.label,
|
154 |
+
enabled: true,
|
155 |
+
position: 'top',
|
156 |
+
color: theme.text,
|
157 |
+
font: {
|
158 |
+
family: "'JetBrains Mono', monospace"
|
159 |
+
}
|
160 |
+
}
|
161 |
+
}
|
162 |
+
}
|
163 |
+
}
|
164 |
+
}
|
165 |
+
}
|
166 |
+
});
|
167 |
+
|
168 |
+
// Initialize gauge coupling chart
|
169 |
+
const gaugeCtx = document.getElementById('gauge-coupling-interplay').getContext('2d');
|
170 |
+
const gaugeGradient = createGradient(gaugeCtx);
|
171 |
+
|
172 |
+
new Chart(gaugeCtx, {
|
173 |
+
type: 'line',
|
174 |
+
data: {
|
175 |
+
labels: chartConfig.gaugeCouplingData.labels,
|
176 |
+
datasets: [{
|
177 |
+
label: 'Effective Gauge Coupling g(t)',
|
178 |
+
data: chartConfig.gaugeCouplingData.values,
|
179 |
+
borderColor: theme.secondary,
|
180 |
+
backgroundColor: gaugeGradient,
|
181 |
+
borderWidth: 2,
|
182 |
+
pointBackgroundColor: theme.secondary,
|
183 |
+
pointBorderColor: theme.secondary,
|
184 |
+
pointHoverBackgroundColor: theme.highlight,
|
185 |
+
pointHoverBorderColor: theme.highlight,
|
186 |
+
tension: 0.4,
|
187 |
+
fill: true
|
188 |
+
}]
|
189 |
+
},
|
190 |
+
options: {
|
191 |
+
...chartOptions,
|
192 |
+
scales: {
|
193 |
+
...chartOptions.scales,
|
194 |
+
y: {
|
195 |
+
...chartOptions.scales.y,
|
196 |
+
title: {
|
197 |
+
display: true,
|
198 |
+
text: 'Effective Gauge Coupling g(t)',
|
199 |
+
color: theme.text,
|
200 |
+
font: {
|
201 |
+
family: "'JetBrains Mono', monospace",
|
202 |
+
size: 14,
|
203 |
+
weight: 'bold'
|
204 |
+
}
|
205 |
+
}
|
206 |
+
}
|
207 |
+
},
|
208 |
+
plugins: {
|
209 |
+
...chartOptions.plugins,
|
210 |
+
annotation: {
|
211 |
+
annotations: {
|
212 |
+
stableGauge: {
|
213 |
+
type: 'point',
|
214 |
+
xValue: chartConfig.gaugeCouplingData.stablePoint.x,
|
215 |
+
yValue: chartConfig.gaugeCouplingData.stablePoint.y,
|
216 |
+
radius: 8,
|
217 |
+
backgroundColor: 'rgba(0, 255, 0, 0.8)',
|
218 |
+
borderColor: 'rgba(0, 255, 0, 0.2)',
|
219 |
+
borderWidth: 4,
|
220 |
+
label: {
|
221 |
+
content: chartConfig.gaugeCouplingData.stablePoint.label,
|
222 |
+
enabled: true,
|
223 |
+
position: 'top',
|
224 |
+
color: theme.text,
|
225 |
+
font: {
|
226 |
+
family: "'JetBrains Mono', monospace"
|
227 |
+
}
|
228 |
+
}
|
229 |
+
},
|
230 |
+
higherGauge: {
|
231 |
+
type: 'point',
|
232 |
+
xValue: chartConfig.gaugeCouplingData.higherPoint.x,
|
233 |
+
yValue: chartConfig.gaugeCouplingData.higherPoint.y,
|
234 |
+
radius: 8,
|
235 |
+
backgroundColor: 'rgba(255, 165, 0, 0.8)',
|
236 |
+
borderColor: 'rgba(255, 165, 0, 0.2)',
|
237 |
+
borderWidth: 4,
|
238 |
+
label: {
|
239 |
+
content: chartConfig.gaugeCouplingData.higherPoint.label,
|
240 |
+
enabled: true,
|
241 |
+
position: 'top',
|
242 |
+
color: theme.text,
|
243 |
+
font: {
|
244 |
+
family: "'JetBrains Mono', monospace"
|
245 |
+
}
|
246 |
+
}
|
247 |
+
}
|
248 |
+
}
|
249 |
+
}
|
250 |
+
}
|
251 |
+
}
|
252 |
+
});
|
253 |
+
}
|