diff --git a/app/src/components/map/SliderTicks.vue b/app/src/components/map/SliderTicks.vue index 97dd52ae6b..bf7ad46419 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,30 @@ 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); + const currentYear = currentTime.year; + + // 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, + }); } - }); - - // 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; + // 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]; + return !(next && next.position - current.position < 20); + }); }, }, mounted() {