1/**
2 * Scripts of the heatmap Plugin
3 *
4 * add event listener to render TeX expressions with KaTeX
5 *
6 * @license GPLv3 https://www.gnu.org/licenses/gpl-3.0.html
7 * @author  H.-H. PENG (Hsins) <hsinspeng@gmail.com>
8 */
9
10document.addEventListener('DOMContentLoaded', () => {
11    let scriptTags = document.querySelectorAll('script[type="application/json"]');
12
13    scriptTags.forEach((script) => {
14      if (!script.id.startsWith('data-heatmap')) return;
15      const heatmapId = script.id.replace('data-', '');
16      const data = JSON.parse(script.textContent);
17
18      // Reqired Data
19      const dateRange = data.dateRange;
20      const postCount = data.postCount;
21      const postMap = new Map(Object.entries(data.postMap).map(entry => entry));
22
23      const chartElement = document.getElementById(heatmapId);
24      const chart = echarts.init(chartElement, null, opts = { locale: "ZH" });
25      window.onresize = () => { chart.resize() };
26
27      const option = {
28        tooltip: {
29          triggerOn: "mousemove|click",
30          hideDelay: 800,
31          enterable: true,
32          backgroundColor: "#f4f4f4",
33          borderColor: "#67320e",
34          formatter: function (params) {
35            const date = params.data[0];
36            const posts = postMap.get(date);
37            let content = `${date}`;
38            for (const [i, post] of posts.entries()) {
39              content += "<br>";
40              var url = post.url;
41              var title = post.title;
42              content += `<a href="${url}" target="_blank">${title}</a>`;
43            }
44            return content;
45          }
46        },
47        visualMap: {
48            type: 'piecewise',
49            orient: 'horizontal',
50            calculable: true,
51            showLabel: false,
52            left: 0,
53            bottom: 0,
54            pieces: [{
55              lte: 0,
56              color: "#EBEDF0"
57            }, {
58              gt: 0,
59              lte: 5,
60              color: "#0E4429"
61            }, {
62              gt: 5,
63              lte: 10,
64              color: "#006D32"
65            }, {
66              gt: 10,
67              lte: 15,
68              color: "#26A641"
69            }, {
70              gt: 15,
71              color: "#39D353"
72            }]
73        },
74        calendar: {
75          top: 60,
76          left: 20,
77          right: 0,
78          cellSize: ['auto', 15],
79          range: dateRange,
80          itemStyle: {
81            borderWidth: 3,
82            borderCap: "round",
83            borderJoin: "round",
84            color: '#F1F1F1',
85            borderColor: '#fff',
86          },
87          dayLabel: { show: true },
88          monthLabel: { show: true },
89          yearLabel: {
90            show: true,
91            position: "top",
92            margin: 36,
93            verticalAlign: "top"
94          },
95          // the splitline between months. set to transparent for now.
96          splitLine: {
97            lineStyle: {
98              color: 'rgba(0, 0, 0, 0.0)',
99              // shadowColor: 'rgba(0, 0, 0, 0.5)',
100              // shadowBlur: 5,
101              // width: 0.5,
102              // type: 'dashed',
103            }
104          }
105        },
106        series: {
107          type: 'heatmap',
108          coordinateSystem: 'calendar',
109          calendarIndex: 0,
110          data: postCount,
111        }
112      };
113      chart.setOption(option);
114    });
115  });
116