|
|
|
@@ -1,7 +1,33 @@ |
|
|
|
import { RollStats } from "./rollstats" |
|
|
|
import { Outcomes } from "./asphodice" |
|
|
|
import palette from "google-palette" |
|
|
|
import { Chart } from "chart.js" |
|
|
|
|
|
|
|
let rollstats = new RollStats(); |
|
|
|
let barChartOptions = { scales: { |
|
|
|
yAxes: [{ |
|
|
|
ticks: { |
|
|
|
beginAtZero: true, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let rollstats = new RollStats(); |
|
|
|
|
|
|
|
function hexColours(numColours: number): Array<string> { |
|
|
|
return palette("cb-Set1", numColours).map( function (hex: string) { |
|
|
|
return `#${String(hex)}`; }) |
|
|
|
} |
|
|
|
|
|
|
|
function buildData(): string { |
|
|
|
let output = ""; |
|
|
|
return output; |
|
|
|
} |
|
|
|
|
|
|
|
function buildCharts(): string { |
|
|
|
let output = ""; |
|
|
|
return output; |
|
|
|
} |
|
|
|
|
|
|
|
function getResults():void { |
|
|
|
console.log("getting results"); |
|
|
|
@@ -45,7 +71,7 @@ function getResults():void { |
|
|
|
let okeys = Object.keys(oc); |
|
|
|
for (var i = 0; i < okeys.length; i++) { |
|
|
|
let tb = $("#outcomeTable").find("tbody"); |
|
|
|
let outcome: Outcomes = okeys[i]; |
|
|
|
let outcome: Outcomes = okeys[i] as Outcomes; |
|
|
|
let outcomeCount = rollstats.outcomeCounts[outcome]; |
|
|
|
let outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2); |
|
|
|
tb.append(`<tr> <td>${outcome}</td> |
|
|
|
@@ -58,7 +84,7 @@ function getResults():void { |
|
|
|
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 balanceCanvas: any = $("#balanceChart"); |
|
|
|
let balanceChart = new Chart(balanceCanvas, { |
|
|
|
type: "bar", |
|
|
|
data: { |
|
|
|
@@ -66,27 +92,15 @@ function getResults():void { |
|
|
|
datasets: [{ |
|
|
|
label: "Outcome Balance Counts", |
|
|
|
data: Object.values(rollstats.balanceCounts), |
|
|
|
backgroundColor: palette("tol", Object.values(rollstats.balanceCounts).length).map(function(hex) { return `#${String(hex)}`; }), |
|
|
|
backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), |
|
|
|
}], |
|
|
|
}, |
|
|
|
options: { |
|
|
|
title: { |
|
|
|
text: "Balance Count Chart", |
|
|
|
display: false, |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
yAxes: [{ |
|
|
|
ticks: { |
|
|
|
beginAtZero: true, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
options: barChartOptions, |
|
|
|
}); |
|
|
|
|
|
|
|
resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcomes</h4>`); |
|
|
|
resultsCardBody.append(`<canvas id="outcomesChart"></canvas>`); |
|
|
|
let outcomesCanvas = $("#outcomesChart"); |
|
|
|
let outcomesCanvas: any = $("#outcomesChart"); |
|
|
|
let outcomesChart = new Chart(outcomesCanvas, { |
|
|
|
type: "bar", |
|
|
|
data: { |
|
|
|
@@ -94,27 +108,15 @@ function getResults():void { |
|
|
|
datasets: [{ |
|
|
|
label: "Outcome Counts", |
|
|
|
data: Object.values(rollstats.outcomeCounts), |
|
|
|
backgroundColor: palette("tol", Object.values(rollstats.outcomeCounts).length).map(function(hex) { return `#${String(hex)}`; }), |
|
|
|
backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), |
|
|
|
}], |
|
|
|
}, |
|
|
|
options: { |
|
|
|
title: { |
|
|
|
text: "Balance Count Chart", |
|
|
|
display: false, |
|
|
|
}, |
|
|
|
scales: { |
|
|
|
yAxes: [{ |
|
|
|
ticks: { |
|
|
|
beginAtZero: true, |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
options: barChartOptions, |
|
|
|
}); |
|
|
|
|
|
|
|
resultsCardBody.append(`<h4 class="card-subtitle my-1">Rerolls</h4>`); |
|
|
|
resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`); |
|
|
|
let rerollsCanvas = $("#rerollsChart"); |
|
|
|
let rerollsCanvas: any = $("#rerollsChart"); |
|
|
|
let rerollsChart = new Chart(rerollsCanvas, { |
|
|
|
type: "doughnut", |
|
|
|
data: { |
|
|
|
@@ -122,7 +124,7 @@ function getResults():void { |
|
|
|
datasets: [{ |
|
|
|
label: "Reroll Counts", |
|
|
|
data: Object.values(rollstats.rerollCounts), |
|
|
|
backgroundColor: palette("tol", Object.values(rollstats.rerollCounts).length).map(function(hex) { return `#${String(hex)}`; }), |
|
|
|
backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length), |
|
|
|
}], |
|
|
|
}, |
|
|
|
options: { |
|
|
|
|
