Reverse legend and change colours on Reroll chart

src/ts/frontend.ts

@@ -9,6 +9,10 @@ let barChartOptions = { scales: {
 						beginAtZero: true,
 					}
 				}]
+			},
+			legend: {
+				position: "right",
+				display: false,
 			}
 }
 
@@ -33,6 +37,13 @@ function makeTableSkeleton(tableId: string, headings: Array<string>) {
 	return output;
 }
 
+/**
+ * Remap true to "rerolled" and false to "Not rerolled"
+ */
+function mapRerolledKeys(Keys: Array<string>): Array<string> {
+	return Keys.map((k) => {return (k == "true") ? "Rerolled" : "Not Rerolled"});
+}
+
 function buildData(): string {
 	let output = "";
 	return output;
@@ -76,8 +87,6 @@ function rerollReport(rollstats: RollStats): string {
 	// Preamble (ie it looks super confusing)
 	output += "<p>This is super confusing because the colours are swapped on the legend and the chart, then the data below swaps back.</p>";
 	// Chart
-	//resultsCardBody.append(`<h4 class="card-subtitle my-1">Rerolls</h4>`);
-	//resultsCardBody.append(`<canvas id="rerollsChart"></canvas>`);
 	output += `<canvas id="rerollsChart"></canvas>`
 
 	// Numbers
@@ -136,11 +145,12 @@ function generateCharts(rollstats: RollStats): void {
 	let rerollsChart = new Chart(rerollsCanvas, {
 		type: "doughnut",
 		data: {
-			labels: Object.keys(rollstats.rerollCounts),
+			labels: mapRerolledKeys(Object.keys(rollstats.rerollCounts)),
 			datasets: [{
 				label: "Reroll Counts",
 				data: Object.values(rollstats.rerollCounts),
-				backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
+				backgroundColor: ["#d1e7dd", "#fff3cd"],
+				//backgroundColor: hexColours(Object.values(rollstats.balanceCounts).length),
 			}],
 		},
 		options: {
@@ -148,6 +158,9 @@ function generateCharts(rollstats: RollStats): void {
 				text: "Rerolls Chart",
 				display: false,
 			},
+			legend: {
+				reverse: true,
+			}
 		}
 	});