bertieb
/
dice-roller
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 5 Wiki Activity
Browse Source

Add Chart.js & google-palette node deps, refactor

tags/v0.1.3
bertieb 3 years ago
parent
0799b45039
commit
0f8d65331b
3 changed files with 39 additions and 35 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      package.json
  2. +0
    -1
      src/html/index.html
  3. +36
    -34
      src/ts/frontend.ts

+ 3
- 0
package.json View File

@@ -4,6 +4,7 @@
"description": "Dice roller for Asphodel. Includes statistical information", "description": "Dice roller for Asphodel. Includes statistical information",
"devDependencies": { "devDependencies": {
"@types/chai": "^4.2.14", "@types/chai": "^4.2.14",
"@types/chart.js": "^2.9.30",
"@types/jquery": "^3.5.5", "@types/jquery": "^3.5.5",
"@types/mocha": "^8.2.0", "@types/mocha": "^8.2.0",
"@types/node": "^14.14.22", "@types/node": "^14.14.22",
@@ -20,6 +21,8 @@
"dependencies": { "dependencies": {
"bootstrap": "^5.0.0-beta2", "bootstrap": "^5.0.0-beta2",
"chai": "^4.3.0", "chai": "^4.3.0",
"chart.js": "^2.9.4",
"google-palette": "^1.1.0",
"mocha": "^8.2.1", "mocha": "^8.2.1",
"ts-node": "^9.1.1" "ts-node": "^9.1.1"
}, },


+ 0
- 1
src/html/index.html View File

@@ -10,7 +10,6 @@
<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="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">


+ 36
- 34
src/ts/frontend.ts View File

@@ -1,7 +1,33 @@
import { RollStats } from "./rollstats" import { RollStats } from "./rollstats"
import { Outcomes } from "./asphodice" 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 { function getResults():void {
console.log("getting results"); console.log("getting results");
@@ -45,7 +71,7 @@ function getResults():void {
let okeys = Object.keys(oc); let okeys = Object.keys(oc);
for (var i = 0; i < okeys.length; i++) { for (var i = 0; i < okeys.length; i++) {
let tb = $("#outcomeTable").find("tbody"); let tb = $("#outcomeTable").find("tbody");
let outcome: Outcomes = okeys[i];
let outcome: Outcomes = okeys[i] as Outcomes;
let outcomeCount = rollstats.outcomeCounts[outcome]; let outcomeCount = rollstats.outcomeCounts[outcome];
let outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2); let outcomePercent = (outcomeCount / rollstats.numRolls * 100).toFixed(2);
tb.append(`<tr> <td>${outcome}</td> 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(`<h3 class="card-subtitle my-2">Charts</h3>`);
resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcome Balances</h4>`); resultsCardBody.append(`<h4 class="card-subtitle my-1">Outcome Balances</h4>`);
resultsCardBody.append(`<canvas id="balanceChart"></canvas>`); resultsCardBody.append(`<canvas id="balanceChart"></canvas>`);
let balanceCanvas = $("#balanceChart");
let balanceCanvas: any = $("#balanceChart");
let balanceChart = new Chart(balanceCanvas, { let balanceChart = new Chart(balanceCanvas, {
type: "bar", type: "bar",
data: { data: {
@@ -66,27 +92,15 @@ function getResults():void {
datasets: [{ datasets: [{
label: "Outcome Balance Counts", label: "Outcome Balance Counts",
data: Object.values(rollstats.balanceCounts), 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(`<h4 class="card-subtitle my-1">Outcomes</h4>`);
resultsCardBody.append(`<canvas id="outcomesChart"></canvas>`); resultsCardBody.append(`<canvas id="outcomesChart"></canvas>`);
let outcomesCanvas = $("#outcomesChart");
let outcomesCanvas: any = $("#outcomesChart");
let outcomesChart = new Chart(outcomesCanvas, { let outcomesChart = new Chart(outcomesCanvas, {
type: "bar", type: "bar",
data: { data: {
@@ -94,27 +108,15 @@ function getResults():void {
datasets: [{ datasets: [{
label: "Outcome Counts", label: "Outcome Counts",
data: Object.values(rollstats.outcomeCounts), 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(`<h4 class="card-subtitle my-1">Rerolls</h4>`);
resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`); resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`);
let rerollsCanvas = $("#rerollsChart");
let rerollsCanvas: any = $("#rerollsChart");
let rerollsChart = new Chart(rerollsCanvas, { let rerollsChart = new Chart(rerollsCanvas, {
type: "doughnut", type: "doughnut",
data: { data: {
@@ -122,7 +124,7 @@ function getResults():void {
datasets: [{ datasets: [{
label: "Reroll Counts", label: "Reroll Counts",
data: Object.values(rollstats.rerollCounts), 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: { options: {


Write Preview
Loading…
Cancel
Save