Работа с датами в компоненте Vue временной шкалы SVG

Question

Я создаю компонент Vue, который является временной шкалой. Временная шкала - это SVG, и это мое первое знакомство с SVG, поэтому некоторые концепции не совсем ясны.

Моя главная проблема заключается в том, как связать часть Dateline на временной шкале с фактической частью временной шкалы, есть 2 отдельных компонента, но они передают одни и те же данные, ТАКЖЕ есть некоторые отступы вокруг линии даты для видов, а такжедата в конце, которая дальше в будущее, также для внешности.

Проект, представленный ниже, заканчивается 01.01.2021, и, как вы можете видеть, он выходит в сентябре, но сама дата выходит на апрель 2022 года.

Компонент получаетряд объектов с Start_Date и End_Date, а затем они проходят через цикл, и мы получаем первые даты начала и последнего конца. Но сроки идут один год. Я не уверен, как исправить это с датами, показанными на графиках выше.

Что является хорошим способом решения этой проблемы, я пытаюсь понять, как сделать это изначально, поэтому я не хочу использовать другую библиотеку шкалы времени.

Ниже указана временная шкала

    <template>
    <svg :viewBox="viewBox" class="inlineSVG">
      <g>
        <rect
          v-if="stage.endDate"
          ref="popper"
          class="row:stage stageBar"
          :x="xOffset"
          :y="yOffset"
          :height="barHeight"
          :width="barWidth"
          :style="stageColor"
        />
        <rect
          class="row:event"
          v-for="(event, idx) in stage.events"
          v-bind="computeEventCoords(event, idx, stage.events.length)"
          :key="event.meta.eventId"
          @click="handleEventClick(event)"
        />
      </g>
    </svg>
</template>

Ниже указана дата

<template>
  <div id="dateLine">
    <div id="yearArea">
      <ul class="dateList">
        <li v-for="year in years">
          <span class="yearSpan">
            <year-icon class="yearIcon" />
            <span class="yearText">{{year}}</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

Макетсделано с сеткой, так что это сетка 2x2, то есть, как они связаны друг с другом.