From 27746715842da4739d3dba2f3c423df520113a18 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 19 Dec 2022 22:14:49 +0100
Subject: [PATCH] Fix heatmap first color being unused (#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.

Before:
<img width="710" alt="Screenshot 2022-12-18 at 09 17 58"
src="https://user-images.githubusercontent.com/115237/208288347-df4973af-8ebd-4582-b828-bec948ffdf60.png">

After:
<img width="709" alt="Screenshot 2022-12-18 at 09 18 15"
src="https://user-images.githubusercontent.com/115237/208288350-e0b85aa2-6925-4a37-83d2-89e2518c91ce.png">

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 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 df7e0beb0..6cd72a8bf 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)',
@@ -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