Sort outcome balance data for chart

src/ts/frontend.ts

@@ -118,7 +118,7 @@ function outcomesReport(rollstats: RollStats): string {
 }
 
 function outcomeBalancesReport(rollstats: RollStats): string {
-	let output = subTitle("Outcome Balancess");
+	let output = subTitle("Outcome Balances");
 	// Preamble
 
 	// Chart
@@ -185,14 +185,23 @@ function generateCharts(rollstats: RollStats): void {
 	 * Outcome Balances
 	 */
 
+	let bc = rollstats.balanceCounts;
+	let keys = Object.keys(bc);
+	keys.sort(function(a: string, b: string){return Number(a) - Number(b)});
+	// sort values too
+	let values = [];
+	for (let i = 0; i < keys.length; i++) {
+		values.push(rollstats.balanceCounts[keys[i]]);
+	}
+
 	let balanceCanvas: any = $("#balanceChart");
 	let balanceChart = new Chart(balanceCanvas, {
 		type: "bar",
 		data: {
-			labels: Object.keys(rollstats.balanceCounts),
+			labels: keys,
 			datasets: [{
 				label: "Outcome Balance Counts",
-				data: Object.values(rollstats.balanceCounts),
+				data: values,
 				backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
 			}],
 		},