From a1502eb001a7540c242856f40858a5cb93fddf07 Mon Sep 17 00:00:00 2001 From: Moritz Riede Date: Thu, 9 Nov 2023 12:01:04 +0100 Subject: [PATCH 1/3] fix: year marks --- app/src/components/map/SliderTicks.vue | 84 ++++++++------------------ 1 file changed, 26 insertions(+), 58 deletions(-) diff --git a/app/src/components/map/SliderTicks.vue b/app/src/components/map/SliderTicks.vue index 97dd52ae6b..cab4ef7544 100644 --- a/app/src/components/map/SliderTicks.vue +++ b/app/src/components/map/SliderTicks.vue @@ -6,7 +6,7 @@ :viewBox="`-1 0 ${width + 2} ${height}`" > i * spacing); + }, + + /** Lines with limited tick frequency for display purposes only */ + displayedLines () { const num = this.numLines > (this.width / 2) ? (this.width / 2) : this.numLines; @@ -63,67 +69,29 @@ export default { }, yearMarks() { - const yearIndices = []; - let lastDecade = null; - let lastYear = null; - - // Calculate first and last dates as fractions of a year - const firstTime = DateTime.fromISO(this.times[0].value); - const firstYear = firstTime.year + (firstTime.ordinal / 365); - const lastTime = DateTime.fromISO(this.times[this.times.length - 1].value); - const lastTimeYear = lastTime.year + (lastTime.ordinal / 365); - - // Calculate the total range in fractions of a year - const totalYears = lastTimeYear - firstYear; - - // If the total range of years crosses a certain threshold (e.g., 10 years), - // we will show marks for every decade. - const showDecades = totalYears > 10; - - this.times.forEach((time) => { - const currentTime = DateTime.fromISO(time.value); - const currentTimeYear = currentTime.year + (currentTime.ordinal / 365); - - if (showDecades) { - // If we are in a new decade, place a mark - const currentDecade = Math.floor(currentTimeYear / 10) * 10; - if (currentDecade !== lastDecade) { - yearIndices.push({ - label: currentDecade, - position: ((currentTimeYear - firstYear) / totalYears) * this.width, - }); - lastDecade = currentDecade; - } - } else { - // If we are in a new year, place a mark - const currentYear = Math.floor(currentTimeYear); - if (currentYear !== lastYear) { - yearIndices.push({ - label: currentYear, - position: ((currentTimeYear - firstYear) / totalYears) * this.width, - }); - lastYear = currentYear; - } + const yearMarks = []; + let previousYear = null; + + this.lines.forEach((line, index) => { + const currentTime = DateTime.fromISO(this.times[index].value); + console.log(currentTime); + const currentYear = currentTime.year; + + console.log(`Current year: ${currentYear} | Previous year: ${previousYear}`); + + // If it's the first tick or if the year has changed, add a year mark + if (index === 0 || currentYear !== previousYear) { + yearMarks.push({ + label: currentYear, + position: line // Assuming 'line' is the position of the tick + }); } - }); - - // Create a new array with removed overlapping labels - const nonOverlappingYearIndices = yearIndices.filter((yearMark, index, array) => { - // If it's the last item in the array, it can't overlap with a next item - if (index === array.length - 1) return true; - - // Get the next item in the array - const nextYearMark = array[index + 1]; - - // Determine the distance between the current and next labels - const distance = nextYearMark.position - yearMark.position; - // Only keep this label if it's more than a certain distance from the next one - const minDistance = 50; // set this to the minimum acceptable distance - return distance > minDistance; + // Update previousYear for the next iteration + previousYear = currentYear; }); - return nonOverlappingYearIndices; + return yearMarks; }, }, mounted() { From ea2e8cfb10b95a5cc2e91963f1c09def02fbc092 Mon Sep 17 00:00:00 2001 From: Moritz Riede Date: Thu, 9 Nov 2023 12:53:27 +0100 Subject: [PATCH 2/3] fix: overlapping year marks --- app/src/components/map/SliderTicks.vue | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/src/components/map/SliderTicks.vue b/app/src/components/map/SliderTicks.vue index cab4ef7544..bc8e7b86ba 100644 --- a/app/src/components/map/SliderTicks.vue +++ b/app/src/components/map/SliderTicks.vue @@ -74,11 +74,8 @@ export default { this.lines.forEach((line, index) => { const currentTime = DateTime.fromISO(this.times[index].value); - console.log(currentTime); const currentYear = currentTime.year; - console.log(`Current year: ${currentYear} | Previous year: ${previousYear}`); - // If it's the first tick or if the year has changed, add a year mark if (index === 0 || currentYear !== previousYear) { yearMarks.push({ @@ -91,6 +88,16 @@ export default { previousYear = currentYear; }); + // Filter out year marks that are too close together, in favor of the second one. + return yearMarks.filter((current, i) => { + const next = yearMarks[i + 1]; + if (next && next.position - current.position < 20) { + return false; + } else { + return true; + } + }); + return yearMarks; }, }, From 465f0cc4df6357f699d22f7f76dacb1daed8c316 Mon Sep 17 00:00:00 2001 From: Moritz Riede Date: Thu, 9 Nov 2023 14:07:01 +0100 Subject: [PATCH 3/3] fix: linter errors --- app/src/components/map/SliderTicks.vue | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/app/src/components/map/SliderTicks.vue b/app/src/components/map/SliderTicks.vue index bc8e7b86ba..bf7ad46419 100644 --- a/app/src/components/map/SliderTicks.vue +++ b/app/src/components/map/SliderTicks.vue @@ -55,7 +55,7 @@ export default { }, /** Lines with limited tick frequency for display purposes only */ - displayedLines () { + displayedLines() { const num = this.numLines > (this.width / 2) ? (this.width / 2) : this.numLines; @@ -80,7 +80,7 @@ export default { if (index === 0 || currentYear !== previousYear) { yearMarks.push({ label: currentYear, - position: line // Assuming 'line' is the position of the tick + position: line, }); } @@ -91,14 +91,8 @@ export default { // Filter out year marks that are too close together, in favor of the second one. return yearMarks.filter((current, i) => { const next = yearMarks[i + 1]; - if (next && next.position - current.position < 20) { - return false; - } else { - return true; - } + return !(next && next.position - current.position < 20); }); - - return yearMarks; }, }, mounted() {