From ea613a10c9e4d6105cee81fc4142fe31efcfec83 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 24 Jun 2024 00:33:56 +0200 Subject: [PATCH 1/4] improved update-button animation --- public/elotracker/chart-integration.js | 9 +++++++-- public/elotracker/styles.css | 4 +++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index eed08a6..c7a7294 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -372,9 +372,14 @@ async function update_leaderboard_entries() { update_leaderboard_elements(); }) - function reset_button(button) { - button.disabled = false; + async function reset_button(button) { + await new Promise(r => setTimeout(r,400)); // warten bis ladebalken am ende angekommen ist + button.style.setProperty("--button-loading-bar-opacity", `0`); + await new Promise(r => setTimeout(r,400)); // warten bis ladebalken verblasst ist button.style.setProperty("--button-loading-bar-width", `0`); + await new Promise(r => setTimeout(r,400)); // warten bis ladebalken wieder am anfang angekommen ist + button.style.setProperty("--button-loading-bar-opacity", `1`); + button.disabled = false; button.classList.remove("button-updating"); } } diff --git a/public/elotracker/styles.css b/public/elotracker/styles.css index 8517683..5e97743 100644 --- a/public/elotracker/styles.css +++ b/public/elotracker/styles.css @@ -60,16 +60,18 @@ button.progress-button { position: relative; overflow: hidden; --button-loading-bar-width: 0; + --button-loading-bar-opacity: 1; } button.progress-button::before { content: ''; position: absolute; + opacity: var(--button-loading-bar-opacity); width: var(--button-loading-bar-width); height: 100%; left: 0; background-color: #294c87; border-radius: 10px; - transition: width 400ms ease-out; + transition: width 400ms ease-out, opacity 400ms ease-out; z-index: -1; } button.button-updating svg { From 550b33c7ccfe8cb47b8e58a01f1d03cfb1a73845 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 24 Jun 2024 00:52:44 +0200 Subject: [PATCH 2/4] added limit to zooming --- public/elotracker/chart-integration.js | 39 ++++++++++++++++++++------ 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index c7a7294..91006c8 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -110,6 +110,9 @@ async function create_charts() { let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_rank_values let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_progress_values + let minval = -1; + let maxval = -1; + let color_counter = 0; for (const puuid in player_entries) { player_rank_values[puuid] = []; @@ -121,17 +124,24 @@ async function create_charts() { // Für alle Player Entries Punktzahl und Punktedifferenz berechnen // Bei der Gelegenheit auch Entries in player_entries_byName eintragen const current_points = rank_to_points(player_entries[puuid][timestamp]["tier"], player_entries[puuid][timestamp]["rank"], player_entries[puuid][timestamp]["points"]); - player_rank_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points}); + const adj_timestamp = parseInt(timestamp) * 1000; + player_rank_values[puuid].push({x: adj_timestamp, y: current_points}); player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][timestamp] = player_entries[puuid][timestamp]; if (player_start_points === -1) { player_start_points = current_points; - player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0}); + player_progress_values[puuid].push({x: adj_timestamp, y: 0}); } else { player_progress_values[puuid].push({ - x: parseInt(timestamp) * 1000, + x: adj_timestamp, y: current_points - player_start_points }); } + if (minval === -1 || adj_timestamp < minval) { + minval = adj_timestamp; + } + if (maxval === -1 || adj_timestamp > maxval) { + maxval = adj_timestamp; + } } // Linie für den Spieler zu Datasets des Graphen hinzufügen all_rank_yDatasets.push({ @@ -165,7 +175,7 @@ async function create_charts() { options: { plugins: { tooltip: tooltip_plugin, - zoom: zoom_plugin, + zoom: {...zoom_plugin}, legend: legend_plugin, }, scales: { @@ -192,7 +202,7 @@ async function create_charts() { options: { plugins: { tooltip: tooltip_plugin, - zoom: zoom_plugin, + zoom: {...zoom_plugin}, legend: legend_plugin, }, scales: { @@ -205,6 +215,13 @@ async function create_charts() { maintainAspectRatio: false, } })); + minval -= 7200000; + maxval += 7200000; + combined_charts.forEach(combined_chart => { + combined_chart.options.plugins.zoom.limits = { + x: {min: minval, max: maxval}, + } + }) }) .catch(e => console.error(e)) @@ -214,11 +231,13 @@ async function create_charts() { puuid.splice(0, 2); puuid = puuid.join("-"); let values = []; + let minval = Object.keys(player_entries[puuid])[0] * 1000 - 7200000; + let maxval = Object.keys(player_entries[puuid])[Object.keys(player_entries[puuid]).length - 1] * 1000 + 7200000; for (const entriesKey in player_entries[puuid]) { let points = rank_to_points(player_entries[puuid][entriesKey]["tier"], player_entries[puuid][entriesKey]["rank"], player_entries[puuid][entriesKey]["points"]); values.push({x: parseInt(entriesKey) * 1000, y: points}); } - player_charts.push(new Chart(`progress-chart-${puuid}`, { + const player_chart = new Chart(`progress-chart-${puuid}`, { type: "line", data: { datasets: [{ @@ -235,7 +254,7 @@ async function create_charts() { plugins: { legend: {display: false}, tooltip: tooltip_plugin, - zoom: zoom_plugin, + zoom: {...zoom_plugin}, }, scales: { x: x_scale, @@ -252,7 +271,11 @@ async function create_charts() { responsive: true, maintainAspectRatio: false, } - })); + }); + player_chart.options.plugins.zoom.limits = { + x: {min: minval, max: maxval}, + } + player_charts.push(player_chart); } } From 0e00f9d471f32391d5836f2bf1f689abaa26d92b Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 24 Jun 2024 02:04:43 +0200 Subject: [PATCH 3/4] hide linechart points when zoomed out --- public/elotracker/chart-integration.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index b317d68..1615a21 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -21,6 +21,25 @@ const zoom_plugin = { enabled: true, }, mode: "x", + onZoomComplete: function({chart}) { + const show_point_cutoff = 1000 * 60 * 60 * 24 * 3 + const diff = parseInt(chart.scales.x.max) - parseInt(chart.scales.x.min); + const show_points = diff < show_point_cutoff; + const hide_points = diff >= show_point_cutoff; + let update_chart = false; + chart.data.datasets.forEach(dataset => { + const points_shown = dataset.pointRadius > 0 + if (show_points && !points_shown) { + dataset.pointRadius = 3; + update_chart = true; + } + if (hide_points && points_shown) { + dataset.pointRadius = 0; + update_chart = true; + } + }) + if (update_chart) chart.update(); + } }, pan: { enabled: true, @@ -35,7 +54,7 @@ const trigger_legend_hover = function (e, legendItem, legend) { dataset.backgroundColor = (legendItem.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '3D'; dataset.borderColor = (legendItem.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '3D'; dataset.borderWidth = legendItem.datasetIndex === i ? 4 : 3; - dataset.pointRadius = 2; + dataset.pointRadius = dataset.pointRadius===0 ? 0 : 2; }); legend.chart.update(); } @@ -161,6 +180,7 @@ async function create_charts() { data: player_rank_values[puuid], spanGaps: true, pointHitRadius: 16, + pointRadius: 0, }) all_progress_yDatasets.push({ label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`, @@ -171,6 +191,7 @@ async function create_charts() { data: player_progress_values[puuid], spanGaps: true, pointHitRadius: 16, + pointRadius: 0, }) color_counter++; } @@ -256,6 +277,7 @@ async function create_charts() { borderJoinStyle: "round", data: values, pointHitRadius: 16, + pointRadius: 0, }] }, options: { From 7a0c26ce5d61b0a20af05650bf376d4aa5319c74 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 24 Jun 2024 13:13:00 +0200 Subject: [PATCH 4/4] improved button state visualization --- public/elotracker/chart-integration.js | 4 ++++ public/elotracker/index.php | 4 ++-- public/elotracker/styles.css | 21 +++++++++++++++++++ ...w_down_24dp_FILL1_wght300_GRAD0_opsz24.svg | 1 + 4 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index 1615a21..418bf4a 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -378,11 +378,15 @@ function getColor(num) { 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"); 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"); } else { chart.classList.add("closed"); + this.classList.remove("dropdown-open"); } } diff --git a/public/elotracker/index.php b/public/elotracker/index.php index a268a67..bd5c26f 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -14,8 +14,8 @@
- - + +
diff --git a/public/elotracker/styles.css b/public/elotracker/styles.css index 5e97743..d51607e 100644 --- a/public/elotracker/styles.css +++ b/public/elotracker/styles.css @@ -38,6 +38,9 @@ button[disabled] { button[disabled]:hover { background-color: initial; } +button svg { + transition: transform 400ms; +} .uem-logo-header { display: flex; @@ -56,6 +59,18 @@ button.update-leaderboard { align-items: center; margin-bottom: 8px; } +button.open-general-graph { + display: flex; + flex-direction: row; + gap: 4px; + align-items: center; +} +button.dropdown-open { + background-color: #1f2931; +} +button.dropdown-open svg { + transform: rotateX(180deg); +} button.progress-button { position: relative; overflow: hidden; @@ -81,6 +96,12 @@ button.button-updating svg { to { transform: rotate(-360deg)} } +.combined-charts-buttons { + display: flex; + flex-direction: row; + gap: 4px; +} + .leaderboard { display: flex; flex-direction: column; diff --git a/public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg b/public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg new file mode 100644 index 0000000..4dcc74c --- /dev/null +++ b/public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file