()
| 217 | } |
| 218 | |
| 219 | function createOverviewScoresChart() { |
| 220 | const canvas = document.getElementById("overview-scores-chart"); |
| 221 | if (!canvas || !overviewScoresData) return; |
| 222 | const ctx = canvas.getContext("2d"); |
| 223 | if (overviewScoresChart) overviewScoresChart.destroy(); |
| 224 | |
| 225 | // Prepare datasets |
| 226 | const colors = [ |
| 227 | "#FF6384", |
| 228 | "#36A2EB", |
| 229 | "#FFCE56", |
| 230 | "#4BC0C0", |
| 231 | "#9966FF", |
| 232 | "#FF9F40", |
| 233 | "#C9CBCF", |
| 234 | "#4BC0C0", |
| 235 | "#FF6384", |
| 236 | ]; |
| 237 | let colorIndex = 0; |
| 238 | const datasets = overviewScoresData.players.map((player) => { |
| 239 | const data = overviewScoresData.rounds.map((round, i) => ({ |
| 240 | x: round, |
| 241 | y: overviewScoresData.scores_by_player[player][i], |
| 242 | })); |
| 243 | const color = colors[colorIndex % colors.length]; |
| 244 | colorIndex++; |
| 245 | return { |
| 246 | label: player, |
| 247 | data: data, |
| 248 | borderColor: color, |
| 249 | backgroundColor: color + "20", |
| 250 | borderWidth: 2, |
| 251 | fill: false, |
| 252 | tension: 0.1, |
| 253 | }; |
| 254 | }); |
| 255 | |
| 256 | overviewScoresChart = new Chart(ctx, { |
| 257 | type: "line", |
| 258 | data: { datasets }, |
| 259 | options: { |
| 260 | responsive: true, |
| 261 | maintainAspectRatio: false, |
| 262 | plugins: { |
| 263 | title: { |
| 264 | display: true, |
| 265 | text: `Scores Per Round`, |
| 266 | }, |
| 267 | legend: { |
| 268 | display: true, |
| 269 | position: "top", |
| 270 | }, |
| 271 | }, |
| 272 | scales: { |
| 273 | x: { |
| 274 | title: { display: true, text: "Round" }, |
| 275 | type: "linear", |
| 276 | position: "bottom", |
no outgoing calls
no test coverage detected