custom chart legend sorted by latest entry

each chart has its own sorted legend
hidden lines sync between charts

public/elotracker/chart-integration.js

@@ -49,7 +49,7 @@ const zoom_plugin = {
 
 let hovered = false;
 const trigger_legend_hover = function (legendItem, chart) {
-	if (legendItem.hidden || hovered) {
+	if (chart.legend.legendItems[legendItem.datasetIndex].hidden || hovered) {
 		return;
 	}
 	hovered = true;
@@ -75,10 +75,10 @@ const trigger_legend_click = function (item) {
 		if (c_chart.isDatasetVisible(item.datasetIndex)) {
 			trigger_legend_leave(c_chart)
 			c_chart.hide(item.datasetIndex);
-			item.hidden = true;
+			c_chart.legend.legendItems[item.datasetIndex].hidden = true;
 		} else {
 			c_chart.show(item.datasetIndex);
-			item.hidden = false;
+			c_chart.legend.legendItems[item.datasetIndex].hidden = false;
 			trigger_legend_hover(item, c_chart)
 		}
 	})
@@ -107,6 +107,19 @@ const get_create_LegendList = (chart, id) => {
 const htmlLegendPlugin = {
 	id: 'htmlLegend',
 	afterUpdate(chart, args, options) {
+		function sort_legend(a,b) {
+			const a_values = chart.data.datasets[a.datasetIndex].data
+			const b_values = chart.data.datasets[b.datasetIndex].data
+			const a_value = a_values[a_values.length - 1].y;
+			const b_value = b_values[b_values.length - 1].y;
+
+			if (a_value > b_value) {
+				return -1;
+			} else if (a_value < b_value) {
+				return 1;
+			}
+			return 0;
+		}
 		//console.log("update")
 		const legendList = get_create_LegendList(chart, options.containerID);
 		const ul = legendList.list;
@@ -114,7 +127,9 @@ const htmlLegendPlugin = {
 		// Reuse the built-in legendItems generator
 		const items = chart.options.plugins.legend.labels.generateLabels(chart);
 
-		items.forEach(item => {
+		items.sort(sort_legend);
+
+		items.forEach((item, i) => {
 			if (legendList.created) {
 				const li = document.createElement('li');
 				li.classList.add("legend-element");
@@ -142,7 +157,7 @@ const htmlLegendPlugin = {
 				ul.appendChild(li);
 
 			} else {
-				const list_element = ul.querySelector(`li.legend-element:nth-of-type(${item.datasetIndex+1})`);
+				const list_element = ul.querySelector(`li.legend-element:nth-of-type(${i+1})`);
 				const boxSpan = list_element.querySelector("span");
 				const textContainer = list_element.querySelector("p");
 				boxSpan.style.background = item.fillStyle;
@@ -276,7 +291,7 @@ async function create_charts() {
 							display: false,
 						},
 						htmlLegend: {
-							containerID: 'combined-chart-legend',
+							containerID: 'legend-rank-graph',
 						}
 					},
 					scales: {
@@ -309,7 +324,7 @@ async function create_charts() {
 							display: false,
 						},
 						htmlLegend: {
-							containerID: 'combined-chart-legend',
+							containerID: 'legend-progress-graph',
 						}
 					},
 					scales: {
@@ -458,16 +473,20 @@ function toggle_combined_chart() {
 	const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
 	const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
 	const buttons = document.querySelectorAll("button.open-general-graph");
+	const legend = document.querySelector(`#combined-chart-legends #legend-${this.id}`)
+	const all_legends = document.querySelectorAll(`#combined-chart-legends .chart-legend`);
+	all_legends.forEach(element => {element.classList.add("hidden")});
+	legend.classList.remove("hidden");
 	if (chart.classList.contains("closed")) {
 		comb_charts.forEach(element => element.classList.add("closed"));
 		buttons.forEach(element => element.classList.remove("dropdown-open"));
 		chart.classList.remove("closed");
 		this.classList.add("dropdown-open");
-		document.querySelector("#combined-chart-legend").classList.remove("hidden");
+		document.querySelector("#combined-chart-legends").classList.remove("hidden");
 	} else {
 		chart.classList.add("closed");
 		this.classList.remove("dropdown-open");
-		document.querySelector("#combined-chart-legend").classList.add("hidden");
+		document.querySelector("#combined-chart-legends").classList.add("hidden");
 	}
 }
 

public/elotracker/index.php

@@ -19,7 +19,10 @@
         </div>
         <div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
         <div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>
-        <div id="combined-chart-legend" class="combined-chart-legend hidden"></div>
+        <div id="combined-chart-legends" class="hidden">
+            <div id="legend-rank-graph" class="chart-legend "></div>
+            <div id="legend-progress-graph" class="chart-legend "></div>
+        </div>
         <?php include "leaderboard_list.php"; ?>
     </div>
     <script src="chart-integration.js"></script>

public/elotracker/styles.css

@@ -264,7 +264,7 @@ button.button-updating svg {
 	position: relative;
 	display: flex;
 	justify-content: center;
-	height: 600px;
+	height: 520px;
 	width: 90vw;
 	max-width: 800px;
 	transition: height 400ms;
@@ -274,15 +274,18 @@ button.button-updating svg {
 	height: 0;
 }
 
-.combined-chart-legend {
+#combined-chart-legends .chart-legend {
 	display: grid;
 	grid-template-rows: 1fr;
 	transition: height 400ms, grid-template-rows 400ms;
 	overflow: hidden;
 }
-.combined-chart-legend.hidden {
+#combined-chart-legends.hidden .chart-legend {
 	grid-template-rows: 0fr;
 }
+#combined-chart-legends .chart-legend.hidden {
+	display: none;
+}
 ul.legend-list {
 	display: flex;
 	flex-direction: column;