From f52cc82165403224cabd11aac813349ff6bb1ee7 Mon Sep 17 00:00:00 2001
From: MeiK <meik2333@gmail.com>
Date: Mon, 11 May 2020 22:16:06 +0800
Subject: [PATCH] bug fix & update Post activity

---
 layouts/_default/about.html    |   2 +-
 layouts/_default/list.html     |   2 +-
 layouts/partials/about.html    |   2 +-
 layouts/partials/home.html     |   2 +-
 layouts/partials/overview.html | 192 +++++++++-----------------
 layouts/partials/post.html     |   2 +-
 layouts/partials/posts.html    |   2 +-
 layouts/partials/script.html   |   6 +-
 static/js/contributions.js     | 242 +++++++++++++++++++++++++++++++++
 static/js/stop.js              |  13 ++
 10 files changed, 332 insertions(+), 133 deletions(-)
 create mode 100644 static/js/contributions.js
 create mode 100644 static/js/stop.js

diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index f804747..3420ea0 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
 <div class="application-main " data-commit-hovercards-enabled>
-    <main id="js-pjax-container" data-pjax-container>
+    <main>
         <div class="container-xl clearfix px-3 mt-4">
 
             {{ partial "user-profile.html" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 51b1fb9..57faa97 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
 <div class="application-main " data-commit-hovercards-enabled>
-    <main id="js-pjax-container" data-pjax-container>
+    <main>
         <div class="container-xl clearfix px-3 mt-4">
 
             {{ partial "user-profile.html" . }}
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index 31a610d..7b1f2bd 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -7,7 +7,7 @@
         style="visibility: hidden; display: none; height: 56px;"></div>
     <div class="UnderlineNav width-full user-profile-nav js-sticky top-0"
         style="position: static; top: 0px; left: 330.5px; width: 911.5px;">
-        <nav class="UnderlineNav-body" data-pjax aria-label="User profile">
+        <nav class="UnderlineNav-body" aria-label="User profile">
             <a aria-current="page" class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ .Site.BaseURL }}">
                 Overview
             </a>
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index b1f3ad9..e43b4f4 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -1,5 +1,5 @@
 <div class="application-main " data-commit-hovercards-enabled>
-    <main id="js-pjax-container" data-pjax-container>
+    <main>
         <div class="container-xl clearfix px-3 mt-4">
 
             {{ partial "user-profile.html" . }}
diff --git a/layouts/partials/overview.html b/layouts/partials/overview.html
index 2307f1f..a1406c0 100644
--- a/layouts/partials/overview.html
+++ b/layouts/partials/overview.html
@@ -4,7 +4,7 @@
 {{ $n_posts := $.Param "recent_posts_number" | default 6 }}
 <div class="col-lg-9 col-md-8 col-12 float-md-left pl-md-2">
     <div class="UnderlineNav width-full user-profile-nav js-sticky top-0">
-        <nav class="UnderlineNav-body" data-pjax aria-label="User profile">
+        <nav class="UnderlineNav-body" aria-label="User profile">
             <a aria-current="page" class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 selected " href="{{ .Site.BaseURL }}">
                 Overview
             </a>
@@ -57,135 +57,77 @@
                 </ol>
             </div>
         </div>
-        <div class="mt-4 position-relative">
-            <div class="js-yearly-contributions">
-                <div class="position-relative">
-                    <h2 class="f4 text-normal mb-2">
-                        {{ $scratch := newScratch }}
-                        {{ if eq now.Weekday.String "Monday" }}
-                        {{ $scratch.Set "dayOfWeek" 1 }}
-                        {{ else if eq now.Weekday.String "Tuesday"  }}
-                        {{ $scratch.Set "dayOfWeek" 2 }}
-                        {{ else if eq now.Weekday.String "Wednesday"  }}
-                        {{ $scratch.Set "dayOfWeek" 3 }}
-                        {{ else if eq now.Weekday.String "Thursday"  }}
-                        {{ $scratch.Set "dayOfWeek" 4 }}
-                        {{ else if eq now.Weekday.String "Friday"  }}
-                        {{ $scratch.Set "dayOfWeek" 5 }}
-                        {{ else if eq now.Weekday.String "Saturday"  }}
-                        {{ $scratch.Set "dayOfWeek" 6 }}
-                        {{ else if eq now.Weekday.String "Sunday"  }}
-                        {{ $scratch.Set "dayOfWeek" 7 }}
-                        {{ end }}
-                        {{ $dayOfWeek := $scratch.Get "dayOfWeek" }}
-
-                        {{ $allDays := add 364 $dayOfWeek }}
-                        {{ $startDate := (time (now.Format "2006-01-02")).AddDate 0 0 (int (sub 0 $allDays)) }}
-                        {{ $startMonth := 0 }}
-                        {{ $monthPos := slice }}
-                        {{ $weeks := 53 }}
-                        {{ $count := 0 }}
-
-                        {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
-                        {{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
-
-                        {{ range $section }}
-                        {{ $scratch.Add (.PublishDate.Format "2006-01-02") 1 }}
-                        {{ if le $startDate .PublishDate }}
-                        {{ $count = add $count 1 }}
-                        {{ end }}
-                        {{ end }}
-                        {{ $count }} posts in the last year
-                    </h2>
-                    <div class="js-profile-timeline-year-list">
-                        <a href="?tab=overview&from=from&to=to" class="js-year-link selected"></a>
-                    </div>
-                    <div class="border border-gray-dark py-2 graph-before-activity-overview">
-                        <div class="js-calendar-graph mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas calendar-graph height-full text-center"
-                            data-from="{{ $startDate.Format "2006-01-02" }} 00:00:00"
-                            data-to="{{ now.Format "2006-01-02" }} 00:00:00" data-org=""
-                            data-url="/{{ .Site.Params.github }}">
-
-                            <svg width="828" height="128" class="js-calendar-graph-svg">
-                                <g transform="translate(10, 20)">
-                                    {{ range $i, $sequence :=  (seq $weeks) }}
-                                    <g transform="translate({{mul $i 16}}, 0)">
-                                        {{ range $j, $seq := (seq 7) }}
-
-                                        {{ $date := $startDate.AddDate 0 0 (int (add (mul $i 7) $j)) }}
-                                        {{ if ge now $date }}
-                                        {{ $color := newScratch }}
-
-                                        <!-- 获得月份标记的位置 -->
-                                        {{ if eq $j 0 }}
-                                        {{ if ne $startMonth $date.Month }}
-                                        <!-- 月份至少需要两格空间 -->
-                                        {{ if le $i (sub $weeks 2) }}
-                                        {{ $monthPos = $monthPos | append $i}}
-                                        {{ $startMonth = $date.Month }}
-                                        {{ end }}
-                                        {{ end }}
-                                        {{ end }}
-
-                                        {{ $dateCount := $scratch.Get ($date.Format "2006-01-02") }}
-                                        {{ if eq $dateCount nil }}
-                                        {{ $dateCount = 0 }}
-                                        {{ end }}
-
-                                        {{ if eq $dateCount 0 }}
-                                        {{ $color.Set "color" "#ebedf0" }}
-                                        {{ else if eq $dateCount 1 }}
-                                        {{ $color.Set "color" "#c6e48b" }}
-                                        {{ else if eq $dateCount 2 }}
-                                        {{ $color.Set "color" "#7bc96f" }}
-                                        {{ else if eq $dateCount 3 }}
-                                        {{ $color.Set "color" "#239a3b" }}
-                                        {{ else }}
-                                        {{ $color.Set "color" "#196127" }}
-                                        {{ end }}
-                                        <rect class="day" width="12" height="12" x="{{sub 16 $i}}" y="{{mul 15 $j}}"
-                                            fill="{{ $color.Get "color" }}" data-count="{{ $dateCount }}"
-                                            data-date="{{ $date.Format "2006-01-02" }}"></rect>
-                                        {{ end }}
-                                        {{ end }}
-                                    </g>
-                                    {{ end }}
-                                    {{ range $index, $element := $monthPos }}
-                                    <text x="{{ add (mul 15 $element) 16 }}" y="-9"
-                                        class="month">{{ (now.AddDate 0 $index 0).Format "Jan" }}</text>
-                                    {{ end }}
-                                    <text text-anchor="start" class="wday" dx="-10" dy="8"
-                                        style="display: none;">Sun</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="25">Mon</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="32"
-                                        style="display: none;">Tue</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="56">Wed</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="57"
-                                        style="display: none;">Thu</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="85">Fri</text>
-                                    <text text-anchor="start" class="wday" dx="-10" dy="81"
-                                        style="display: none;">Sat</text>
-                                </g>
-
-                            </svg>
-
+        {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
+        {{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
+        <div id="contributions" data='[{{ range $index, $elem := $section }}
+{
+    "title": "{{ .Title }}",
+    "link": "{{ .Permalink }}",
+    "publishDate": "{{ .PublishDate.Format "2006-01-02 15:04:05" }}"
+}{{ if ne $index (sub (len $section) 1) }},{{ end }}
+{{ end }}]'>
+            <div class="mt-4 position-relative">
+                <div class="js-yearly-contributions">
+                    <div class="position-relative">
+                        <h2 class="f4 text-normal mb-2" id="posts-count">
+                        </h2>
+                        <div class="js-profile-timeline-year-list">
+                            <a class="js-year-link selected"></a>
                         </div>
-                        <div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1">
-                            <div class="contrib-legend text-gray"
-                                title="A summary of pull requests, issues opened, and commits to the default and gh-pages branches.">
-                                Less
-                                <ul class="legend">
-                                    <li style="background-color: #ebedf0"></li>
-                                    <li style="background-color: #c6e48b"></li>
-                                    <li style="background-color: #7bc96f"></li>
-                                    <li style="background-color: #239a3b"></li>
-                                    <li style="background-color: #196127"></li>
-                                </ul>
-                                More
+                        <div class="border border-gray-dark py-2 graph-before-activity-overview">
+                            <div class="js-calendar-graph mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas calendar-graph height-full text-center">
+                                <svg width="828" height="128" class="js-calendar-graph-svg">
+                                    <g transform="translate(10, 20)" id="graph-svg">
+                                    </g>
+                                </svg>
+                            </div>
+                            <div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1">
+                                <div class="contrib-legend text-gray"
+                                    title="A summary of pull requests, issues opened, and commits to the default and gh-pages branches.">
+                                    Less
+                                    <ul class="legend">
+                                        <li style="background-color: #ebedf0"></li>
+                                        <li style="background-color: #c6e48b"></li>
+                                        <li style="background-color: #7bc96f"></li>
+                                        <li style="background-color: #239a3b"></li>
+                                        <li style="background-color: #196127"></li>
+                                    </ul>
+                                    More
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <div class="activity-listing contribution-activity">
+                    <div class="d-none d-lg-block">
+                        <div class="profile-timeline-year-list js-profile-timeline-year-list bg-white float-right col-2 pl-5 is-placeholder"
+                            style="visibility: hidden; display: none; height: 210px;"></div>
+                        <div class="profile-timeline-year-list js-profile-timeline-year-list bg-white js-sticky float-right col-2 pl-5"
+                            data-original-top="74px" style="position: static;">
+                            <ul class="filter-list small" id="year-list">
+                            </ul>
+                        </div>
+                    </div>
+
+                    <h2 class="f4 text-normal mb-2">
+                        Post activity
+                    </h2>
+
+                    <div id="posts-activity">
+                    </div>
+
+                    <!-- TODO -->
+                    <!-- 默认只显示最新月的，点击按钮来显示全部数据 -->
+                    <!-- <div class="ajax-pagination-form js-ajax-pagination js-show-more-timeline-form col-lg-10 col-12">
+                        <img class="contribution-activity-spinner col-10 next" alt=""
+                            src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif">
+                        <button name="button"
+                            class="ajax-pagination-btn btn btn-outline border-gray-dark width-full f6 mt-0 py-2 contribution-activity-show-more ">Show
+                            more activity</button>
+                    </div> -->
+
+
+                </div>
             </div>
         </div>
         <div id="pinned-items-modal-wrapper"></div>
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 358d50c..f735a20 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,6 +1,6 @@
 <div class="application-main " data-commit-hovercards-enabled="">
     <div itemscope="" itemtype="http://schema.org/SoftwareSourceCode" class="">
-        <main id="js-repo-pjax-container" data-pjax-container="">
+        <main>
             <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav pt-0 pt-lg-4 ">
                 <div class="repohead-details-container clearfix container-lg p-responsive d-none d-lg-block">
                     <div class="mb-3 d-flex">
diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html
index 2bdafca..87b27cb 100644
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@@ -7,7 +7,7 @@
         style="visibility: hidden; display: none; height: 56px;"></div>
     <div class="UnderlineNav width-full user-profile-nav js-sticky top-0"
         style="position: static; top: 0px; left: 330.5px; width: 911.5px;">
-        <nav class="UnderlineNav-body" data-pjax aria-label="User profile">
+        <nav class="UnderlineNav-body" aria-label="User profile">
             <a aria-current="page" class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ .Site.BaseURL }}">
                 Overview
             </a>
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
index f777396..f9cb244 100644
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@@ -1,5 +1,7 @@
 <script crossorigin="anonymous"
     type="application/javascript" src="{{ "js/frameworks.js" | absURL }}"></script>
 
-<script crossorigin="anonymous" async="async"
-    type="application/javascript" src="{{ "js/github-bootstrap.js" | absURL }}"></script>
\ No newline at end of file
+<script crossorigin="anonymous"
+    type="application/javascript" src="{{ "js/github-bootstrap.js" | absURL }}"></script>
+<script src="{{ "js/stop.js" | absURL }}"></script>
+<script src="{{ "js/contributions.js" | absURL }}"></script>
\ No newline at end of file
diff --git a/static/js/contributions.js b/static/js/contributions.js
new file mode 100644
index 0000000..1a7562d
--- /dev/null
+++ b/static/js/contributions.js
@@ -0,0 +1,242 @@
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const now = new Date();
+let contributions;
+
+(() => {
+  const dom = document.querySelector('#contributions');
+  if (!dom) {
+    return;
+  }
+
+  contributions = JSON.parse(dom.getAttribute('data'));
+  let year = 0;
+  for (const item of contributions) {
+    item.publishDate = unescape(item.publishDate);
+    item.date = new Date(item.publishDate);
+    if (item.date.getFullYear() > year) {
+      year = item.date.getFullYear();
+    }
+    item.title = unescape(item.title);
+  }
+
+  yearList();
+  yearly(year.toString());
+})();
+
+function yearly(year) {
+  let startDate;
+  let endDate;
+  if (year != now.getFullYear().toString()) {
+    const date = new Date(year);
+    startDate = new Date(date.getTime() - date.getDay() * 24 * 60 * 60 * 1000);
+    endDate = new Date(date.getFullYear(), 11, 31);
+  } else {
+    endDate = now;
+    startDate = new Date(endDate.getTime() - 364 * 24 * 60 * 60 * 1000 - endDate.getDay() * 24 * 60 * 60 * 1000);
+  }
+  startDate.setHours(0, 0, 0, 0);
+  const posts = [];
+  const ms = [];
+  for (const item of contributions) {
+    if (item.date >= startDate && item.date <= endDate) {
+      posts.push(item);
+      if (!ms.includes(item.date.getMonth())) {
+        ms.push(item.date.getMonth());
+      }
+    }
+  }
+  posts.sort((a, b) => { return b - a });
+  document.querySelector('#posts-activity').innerHTML = '';
+  for (const month of ms) {
+    const node = document.createElement('div');
+    node.innerHTML = monthly(year, month, posts);
+    document.querySelector('#posts-activity').appendChild(node);
+  }
+
+  graph(year, posts, startDate, endDate);
+
+  const yearList = document.querySelectorAll('.js-year-link');
+  for (const elem of yearList) {
+    if (elem.innerText == year) {
+      elem.classList.add('selected');
+    } else {
+      elem.classList.remove('selected');
+    }
+  }
+}
+
+function monthly(year, month, posts) {
+  const monthPosts = posts.filter(post => post.date.getMonth() === month);
+  let liHtml = '';
+  for (const post of monthPosts) {
+    liHtml += `<li class="d-block mt-1 py-1"><span class="css-truncate css-truncate-target">
+  <span class="profile-rollup-icon">
+    <svg class="octicon octicon-repo v-align-middle text-gray-light mr-1" viewBox="0 0 12 16" version="1.1"
+      width="12" height="16" aria-hidden="true">
+      <path fill-rule="evenodd"
+        d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
+      </path>
+    </svg>
+  </span>
+  <a class="mr-2 " data-hovercard-type="repository" href="${post.link}">${post.title}</a>
+</span>
+<span class="f6 text-gray d-block mt-1 d-lg-inline mt-lg-0">
+</span>
+<time title="This post was made on ${months[post.date.getMonth()]} ${post.date.getDate()}" class="float-right f6 text-gray-light pt-1">
+  ${months[post.date.getMonth()]} ${post.date.getDate()}
+</time></li>`;
+  }
+  let html = `
+  <div class="contribution-activity-listing float-left col-12 col-lg-10">
+    <div class="profile-timeline discussion-timeline width-full pb-4">
+      <h3 class="profile-timeline-month-heading bg-white d-inline-block h6 pr-2 py-1">
+        ${months[month]} <span class="text-gray">${year}</span>
+      </h3>
+      <div class="profile-rollup-wrapper py-4 pl-4 position-relative ml-3 js-details-container Details open">
+        <span class="discussion-item-icon"><svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12"
+            height="16" aria-hidden="true">
+            <path fill-rule="evenodd"
+              d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
+            </path>
+          </svg></span>
+        <button type="button" class="btn-link f4 muted-link no-underline lh-condensed width-full js-details-target "
+          aria-expanded="false">
+          <span class="float-left ws-normal text-left">
+            Created ${monthPosts.length} post
+          </span>
+          <span class="d-inline-block float-right">
+            <span class="profile-rollup-toggle-closed float-right" aria_label="Collapse"><svg class="octicon octicon-fold"
+                viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M7 9l3 3H8v3H6v-3H4l3-3zm3-6H8V0H6v3H4l3 3 3-3zm4 2c0-.55-.45-1-1-1h-2.5l-1 1h3l-2 2h-7l-2-2h3l-1-1H1c-.55 0-1 .45-1 1l2.5 2.5L0 10c0 .55.45 1 1 1h2.5l1-1h-3l2-2h7l2 2h-3l1 1H13c.55 0 1-.45 1-1l-2.5-2.5L14 5z">
+                </path>
+              </svg></span>
+            <span class="profile-rollup-toggle-open float-right" aria_label="Expand"><svg class="octicon octicon-unfold"
+                viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z">
+                </path>
+              </svg></span>
+          </span>
+        </button>
+        <ul class="profile-rollup-content mt-1" data-repository-hovercards-enabled="" id="posts-activity-ul">
+        ${liHtml}
+        </ul>
+      </div>
+    </div>
+  </div>
+  `;
+  return html;
+}
+
+function yearList() {
+  const years = [];
+  for (const item of contributions) {
+    const year = item.date.getFullYear();
+    if (!years.includes(year)) {
+      years.push(year);
+    }
+  }
+  years.sort((a, b) => { return b - a });
+
+  for (let i = 0; i < years.length; i++) {
+    const year = years[i];
+    const node = document.createElement('li');
+    node.innerHTML = `<a class="js-year-link filter-item px-3 mb-2 py-2" aria-label="Post activity in ${year}" onclick="yearly('${year}') | event.stopPropagation()">${year}</a>`;
+    document.querySelector('#year-list').appendChild(node);
+  }
+}
+
+function graph(year, posts, startDate, endDate) {
+  if (year == now.getFullYear().toString()) {
+    document.querySelector('#posts-count').innerText = `${posts.length}  posts in the last year`;
+  } else {
+    document.querySelector('#posts-count').innerText = `${posts.length}  posts in ${year}`;
+  }
+
+  let html = ``;
+  const count = {};
+  for (const post of posts) {
+    const date = post.date.toISOString().substr(0, 10);
+    if (count[date] == undefined) {
+      count[date] = 1;
+    } else {
+      count[date]++;
+    }
+  }
+  const monthPos = [];
+  let startMonth = -1;
+  for (let i = 0; i < 53; i++) {
+    html += `<g transform="translate(${i * 16}, 0)">`;
+    for (let j = 0; j < 7; j++) {
+      const date = new Date(startDate.getTime() + (i * 7 + j) * 24 * 60 * 60 * 1000);
+      const dataDate = date.toISOString().substr(0, 10);
+      if (date > endDate) {
+        continue;
+      }
+
+      if (j == 0) {
+        if (i <= 51) {
+          if (startMonth != date.getMonth()) {
+            monthPos.push(i);
+            startMonth = date.getMonth();
+          }
+        }
+      }
+
+      let c;
+      if (count[dataDate] == undefined) {
+        c = 0;
+      } else {
+        c = count[dataDate];
+      }
+      let color;
+      switch (c) {
+        case 0:
+          color = "#ebedf0";
+          break;
+        case 1:
+          color = "#c6e48b";
+          break;
+        case 2:
+          color = "#7bc96f";
+          break;
+        case 3:
+          color = "#239a3b";
+          break;
+        default:
+          color = "#196127";
+      }
+      html += `<rect class="day" width="12" height="12" x="${16 - i}" y="${j * 15}"
+      fill="${color}" data-count="${c}"
+      data-date="${dataDate}"></rect>`;
+    }
+    html += '</g>';
+  }
+  if (monthPos[1] - monthPos[0] < 2) {
+    monthPos[0] = -1;
+  }
+  for (let i = 0; i < monthPos.length; i++) {
+    const month = monthPos[i];
+    if (month == -1) {
+      continue;
+    }
+    html += `<text x="${15 * month + 16}" y="-9"
+    class="month">${months[(i + startDate.getMonth()) % 12]}</text>`;
+  }
+  html += `
+<text text-anchor="start" class="wday" dx="-10" dy="8"
+style="display: none;">Sun</text>
+<text text-anchor="start" class="wday" dx="-10" dy="25">Mon</text>
+<text text-anchor="start" class="wday" dx="-10" dy="32"
+style="display: none;">Tue</text>
+<text text-anchor="start" class="wday" dx="-10" dy="56">Wed</text>
+<text text-anchor="start" class="wday" dx="-10" dy="57"
+style="display: none;">Thu</text>
+<text text-anchor="start" class="wday" dx="-10" dy="85">Fri</text>
+<text text-anchor="start" class="wday" dx="-10" dy="81"
+style="display: none;">Sat</text>
+`;
+  document.querySelector('#graph-svg').innerHTML = html;
+  stopClickEvent('.day');
+}
diff --git a/static/js/stop.js b/static/js/stop.js
new file mode 100644
index 0000000..8758258
--- /dev/null
+++ b/static/js/stop.js
@@ -0,0 +1,13 @@
+function stopClickEvent(selector) {
+  const elements = document.querySelectorAll(selector);
+  for (const current of elements) {
+    current.onclick = (event) => {
+      event.stopPropagation();
+    }
+  }
+}
+
+(() => {
+  stopClickEvent('.day');
+  stopClickEvent('.js-year-link');
+})();