From e88218f4be42f0490c1ddbbbcfa0da938841fc20 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 18 Dec 2022 14:18:07 +0100 Subject: [PATCH] Fix heatmap first color being unused (#22158) Backport #22157. 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 | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index b5c5c65bbf..896eb81258 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)', @@ -50,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('.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