SVG Year timeline in your daily note (now a plugin)

Share & showcase
, , ,
59

I love your timeline and use it daily. But I had a problem that it didn’t render when I created the note on iOS.
Modifying the timeline snippet helped:

<%*
let title = tp.file.title;
let startDate;

if (title.match(/\d{4}-\d{2}-\d{2}/)) {
  startDate = tp.date.now("YYYY-MM-DD", 0, title);
} else if (title.match(/\d{4}-W\d{2}/)) {
  startDate = tp.date.now("YYYY-MM-DD", 0, title, "gggg-[W]ww [-- Week]");
} else {
  startDate = moment().format("YYYY-MM-DD");
}

const year = moment(startDate).format("YYYY");
let monthStart = 0;
let monthBlocks = "";
let monthLabels = "";
let marker = "";

for (let i = 1; i <= 12; i++) {
  const daysInMonth = moment().year(year).month(i).daysInMonth();
  const monthName = moment().year(year).month(i).format("MMMM");
  monthBlocks += `<rect class="month-block month-block--${monthName}" x="${monthStart * 10}" width="${daysInMonth * 10}" height="25"></rect>`;
  monthLabels += `<text class="month-label month-label--${monthName}" fill="#747474" x="${monthStart * 10}" y="120">${monthName}</text>`;

  if (moment(startDate).format("M") == i) {
    marker = monthStart + parseInt(moment(startDate).format("D"));
  }

  monthStart += daysInMonth + 1;
};


tR += `<svg class="year-timeline year-timeline--${year}" viewBox="0 -20 3760 150">
    <title>Timeline ${year}</title>
    <g class='bars'>
      ${monthBlocks}
    </g>
    <g class='labels' style="font-size:50px;" text-anchor="start">
      ${monthLabels}
    </g>
    <g class='markers'>
      <circle class="day-marker" cx="${marker * 10}" cy="14" r="15" stroke="black" fill="white" /> 
      <rect class="week-marker"  x="${marker * 10}" width="70" height="25" /> 
    </g>
  </svg>`
%>

Cheers!

1 Like