TheGreatUnknown commited on
Commit
9a02038
·
verified ·
1 Parent(s): e692ee0

Create charts.js

Browse files
Files changed (1) hide show
  1. charts.js +253 -0
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
+ }