Skip to content

Commit 2774671

Browse files
silverwindlunny
andauthored
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 <[email protected]>
1 parent d6b9662 commit 2774671

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

web_src/js/components/ActivityHeatmap.vue

+7
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default {
3232
},
3333
data: () => ({
3434
colorRange: [
35+
'var(--color-secondary-alpha-70)',
3536
'var(--color-secondary-alpha-70)',
3637
'var(--color-primary-light-4)',
3738
'var(--color-primary-light-2)',
@@ -50,6 +51,12 @@ export default {
5051
return s;
5152
}
5253
},
54+
mounted() {
55+
// work around issue with first legend color being rendered twice and legend cut off
56+
const legend = document.querySelector('.vch__external-legend-wrapper');
57+
legend.setAttribute('viewBox', '12 0 80 10');
58+
legend.style.marginRight = '-12px';
59+
},
5360
methods: {
5461
handleDayClick(e) {
5562
// Reset filter if same date is clicked

0 commit comments

Comments
 (0)