From 955c4d146e174816bcbbbf8c4dd9e9885da6a678 Mon Sep 17 00:00:00 2001 From: simon Date: Wed, 26 Jun 2024 14:50:29 +0200 Subject: [PATCH] custom chart legend sorted by latest entry each chart has its own sorted legend hidden lines sync between charts --- public/elotracker/chart-integration.js | 37 +++++++++++++++++++------- public/elotracker/index.php | 5 +++- public/elotracker/styles.css | 9 ++++--- 3 files changed, 38 insertions(+), 13 deletions(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index 834f4a4..e4cb70c 100644 --- a/public/elotracker/chart-integration.js +++ b/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"); } } diff --git a/public/elotracker/index.php b/public/elotracker/index.php index 21da170..c0ad70c 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -19,7 +19,10 @@
- + diff --git a/public/elotracker/styles.css b/public/elotracker/styles.css index eebff6c..6e19938 100644 --- a/public/elotracker/styles.css +++ b/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;