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.
This commit is contained in:
silverwind 2022-12-18 14:18:07 +01:00 committed by GitHub
parent 4297aced93
commit e88218f4be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -28,6 +28,7 @@ export default {
}, },
data: () => ({ data: () => ({
colorRange: [ colorRange: [
'var(--color-secondary-alpha-70)',
'var(--color-secondary-alpha-70)', 'var(--color-secondary-alpha-70)',
'var(--color-primary-light-4)', 'var(--color-primary-light-4)',
'var(--color-primary-light-2)', 'var(--color-primary-light-2)',
@ -50,6 +51,12 @@ export default {
return s; 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: { methods: {
handleDayClick(e) { handleDayClick(e) {
// Reset filter if same date is clicked // Reset filter if same date is clicked