Browse Source
Add charts to frontend (Chart.js)
This is still pretty quick and dirty, with lots of refactoring and general tidying up ahead; but it gives an example structure to start fromtags/v0.1.3
2 changed files with 86 additions and 5 deletions
Split View
Diff Options
-
+2 -0src/html/index.html
-
+84 -5src/ts/frontend.ts
+ 2
- 0
src/html/index.html
View File
| @@ -8,7 +8,9 @@ | |||
| <link rel="stylesheet" href="css/asphotheme.css"> | |||
| <link rel="stylesheet" href="css/dashboard.css"> | |||
| <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script> | |||
| <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js"></script> | |||
| <script src="bundle.js" type="text/javascript"></script> | |||
| <script src="palette.js"></script> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
+ 84
- 5
src/ts/frontend.ts
View File
| @@ -12,21 +12,21 @@ function getResults():void { | |||
| resultsCard.append(`<div class="card-body">`); | |||
| let resultsCardBody = $("#results").find("div.card-body"); | |||
| resultsCardBody.append(`<h2 class="card-title">Asphodice Results</h2>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle">Rerolls</h3>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle my-1">Rerolls</h3>`); | |||
| resultsCardBody.append(`<div class="row my-3 mx-auto"> | |||
| <div class="col alert alert-success"><strong>Rerolled:</strong> ${rollstats.rerollCounts.true} (${(rollstats.rerollCounts.true / rollstats.numRolls * 100).toFixed(2)} %)</div> | |||
| <div class="col alert alert-warning"><strong>Not rerolled:</strong> ${rollstats.rerollCounts.false} (${(rollstats.rerollCounts.false / rollstats.numRolls * 100).toFixed(2)} %)</div> | |||
| </div>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle">Outcome Balances</h3>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle my-1">Outcome Balances</h3>`); | |||
| resultsCardBody.append(`<table class="table table-striped" id="balanceTable"> | |||
| <thead><td>Balance</td> <td>Count</td> <td>Percentage</td></thead> | |||
| <thead><th>Balance</th> <th>Count</th> <th>Percentage</th></thead> | |||
| <tbody></tbody> | |||
| </table>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle">Outcomes</h3>`); | |||
| resultsCardBody.append(`<h3 class="card-subtitle my-1">Outcomes</h3>`); | |||
| resultsCardBody.append(`<table class="table table-striped" id="outcomeTable"> | |||
| <thead><td>Outcome</td> <td>Count</td> <td>Percentage</td></thead> | |||
| <thead><th>Outcome</th> <th>Count</th> <th>Percentage</th></thead> | |||
| <tbody></tbody> | |||
| </table>`); | |||
| @@ -53,6 +53,85 @@ function getResults():void { | |||
| <td>${outcomePercent}</td> | |||
| </tr>`); | |||
| } | |||
| // Charts | |||
| resultsCardBody.append(`<h3 class="card-subtitle my-2">Charts</h3>`); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcome Balances</h4>`); | |||
| resultsCardBody.append(`<canvas id="balanceChart"></canvas>`); | |||
| let balanceCanvas = $("#balanceChart"); | |||
| let balanceChart = new Chart(balanceCanvas, { | |||
| type: "bar", | |||
| data: { | |||
| labels: Object.keys(rollstats.balanceCounts), | |||
| datasets: [{ | |||
| label: "Outcome Balance Counts", | |||
| data: Object.values(rollstats.balanceCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.balanceCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| }], | |||
| }, | |||
| options: { | |||
| title: { | |||
| text: "Balance Count Chart", | |||
| display: false, | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: true, | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| }); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcomes</h4>`); | |||
| resultsCardBody.append(`<canvas id="outcomesChart"></canvas>`); | |||
| let outcomesCanvas = $("#outcomesChart"); | |||
| let outcomesChart = new Chart(outcomesCanvas, { | |||
| type: "bar", | |||
| data: { | |||
| labels: Object.keys(rollstats.outcomeCounts), | |||
| datasets: [{ | |||
| label: "Outcome Counts", | |||
| data: Object.values(rollstats.outcomeCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.outcomeCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| }], | |||
| }, | |||
| options: { | |||
| title: { | |||
| text: "Balance Count Chart", | |||
| display: false, | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| ticks: { | |||
| beginAtZero: true, | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| }); | |||
| resultsCardBody.append(`<h4 class="card-subtitle my-1">Rerolls</h4>`); | |||
| resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`); | |||
| let rerollsCanvas = $("#rerollsChart"); | |||
| let rerollsChart = new Chart(rerollsCanvas, { | |||
| type: "doughnut", | |||
| data: { | |||
| labels: Object.keys(rollstats.rerollCounts), | |||
| datasets: [{ | |||
| label: "Reroll Counts", | |||
| data: Object.values(rollstats.rerollCounts), | |||
| backgroundColor: palette("tol", Object.values(rollstats.rerollCounts).length).map(function(hex) { return `#${String(hex)}`; }), | |||
| }], | |||
| }, | |||
| options: { | |||
| title: { | |||
| text: "Rerolls Chart", | |||
| display: false, | |||
| }, | |||
| } | |||
| }); | |||
| } | |||