From 2271afe39fdb58412cdaed13b3ef56682216faac Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 18 Dec 2022 09:18:33 +0100 Subject: [PATCH 1/3] Fix heatmap first color being unused vue3-calendar-heatmap has the behaviour that the first and second colors are mapped to values null and 0, meaning the second color was not used as intended for values > 0. I think this is a behaviour change from previous vue2 version that was missed during the upgrade. This change makes first and second values the same, so the heatmap can now use one additional color for meaningful values. --- web_src/js/components/ActivityHeatmap.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index b5c5c65bbf495..75c1e8e175164 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -28,6 +28,7 @@ export default { }, data: () => ({ colorRange: [ + 'var(--color-secondary-alpha-70)', 'var(--color-secondary-alpha-70)', 'var(--color-primary-light-4)', 'var(--color-primary-light-2)', From 1ed0fce5962abba1d9c1bae0ef35107cbc5d4c4f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 18 Dec 2022 10:01:08 +0100 Subject: [PATCH 2/3] add workaround for legend bug --- web_src/js/components/ActivityHeatmap.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index 75c1e8e175164..5cddc85a98d87 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -51,6 +51,12 @@ export default { return s; } }, + mounted() { + // work around issue with first legend color being rendered twice and legend cut off + const legend = document.querySelector('#user-heatmap .vch__external-legend-wrapper'); + legend.setAttribute('viewBox', '12 0 80 10'); + legend.style.marginRight = '-12px'; + }, methods: { handleDayClick(e) { // Reset filter if same date is clicked From efc08be6e01c619e8503f31259f809da2c93e2a1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 18 Dec 2022 10:14:44 +0100 Subject: [PATCH 3/3] tweak selector --- web_src/js/components/ActivityHeatmap.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index 5cddc85a98d87..896eb8125853b 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -53,7 +53,7 @@ export default { }, mounted() { // work around issue with first legend color being rendered twice and legend cut off - const legend = document.querySelector('#user-heatmap .vch__external-legend-wrapper'); + const legend = document.querySelector('.vch__external-legend-wrapper'); legend.setAttribute('viewBox', '12 0 80 10'); legend.style.marginRight = '-12px'; },