| 1385 | } |
| 1386 | |
| 1387 | build() { |
| 1388 | this.container.innerHTML = ""; |
| 1389 | const title = document.createElement("h3"); |
| 1390 | title.textContent = "Wahrscheinlichkeiten der Ziffern"; |
| 1391 | this.container.appendChild(title); |
| 1392 | |
| 1393 | this.chartElement = document.createElement("div"); |
| 1394 | this.chartElement.className = "prediction-chart"; |
| 1395 | this.container.appendChild(this.chartElement); |
| 1396 | |
| 1397 | for (let digit = 0; digit < 10; digit += 1) { |
| 1398 | const row = document.createElement("div"); |
| 1399 | row.className = "prediction-bar-container"; |
| 1400 | |
| 1401 | const label = document.createElement("span"); |
| 1402 | label.className = "prediction-label"; |
| 1403 | label.textContent = String(digit); |
| 1404 | |
| 1405 | const track = document.createElement("div"); |
| 1406 | track.className = "prediction-bar-track"; |
| 1407 | |
| 1408 | const bar = document.createElement("div"); |
| 1409 | bar.className = "prediction-bar"; |
| 1410 | track.appendChild(bar); |
| 1411 | |
| 1412 | const value = document.createElement("span"); |
| 1413 | value.className = "prediction-percentage"; |
| 1414 | value.textContent = "0.0%"; |
| 1415 | |
| 1416 | row.appendChild(label); |
| 1417 | row.appendChild(track); |
| 1418 | row.appendChild(value); |
| 1419 | this.chartElement.appendChild(row); |
| 1420 | this.rows.push({ bar, value }); |
| 1421 | } |
| 1422 | } |
| 1423 | |
| 1424 | update(probabilities) { |
| 1425 | if (!probabilities.length) return; |