bertieb
/
dice-roller
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 5 Wiki Activity
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
from
tags/v0.1.3
bertieb 3 years ago
parent
b15ccf90c4
commit
0799b45039
2 changed files with 86 additions and 5 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      src/html/index.html
  2. +84
    -5
      src/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/asphotheme.css">
<link rel="stylesheet" href="css/dashboard.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://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="bundle.js" type="text/javascript"></script>
<script src="palette.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">


+ 84
- 5
src/ts/frontend.ts View File

@@ -12,21 +12,21 @@ function getResults():void {
resultsCard.append(`<div class="card-body">`); resultsCard.append(`<div class="card-body">`);
let resultsCardBody = $("#results").find("div.card-body"); let resultsCardBody = $("#results").find("div.card-body");
resultsCardBody.append(`<h2 class="card-title">Asphodice Results</h2>`); 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"> 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-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 class="col alert alert-warning"><strong>Not rerolled:</strong> ${rollstats.rerollCounts.false} (${(rollstats.rerollCounts.false / rollstats.numRolls * 100).toFixed(2)} %)</div>
</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"> 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> <tbody></tbody>
</table>`); </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"> 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> <tbody></tbody>
</table>`); </table>`);


@@ -53,6 +53,85 @@ function getResults():void {
<td>${outcomePercent}</td> <td>${outcomePercent}</td>
</tr>`); </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,
},
}
});
} }






Write Preview
Loading…
Cancel
Save