From 1733dbdec001acdff57b2f6fb1c7ee82e038aa53 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 df7e0beb000c0..96ca1d4399771 100644 --- a/web_src/js/components/ActivityHeatmap.vue +++ b/web_src/js/components/ActivityHeatmap.vue @@ -32,6 +32,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 0e0ed3327245dfb14fa05d4401c0aed0cd04d233 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 96ca1d4399771..7fa2f2c38906a 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 632725a9c3bb6ec64e4b0440c72e9473d3a2847d 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 7fa2f2c38906a..6cd72a8bf75de 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'; },