Huaiyao Jin

Huaiyao Jin

博客添加习惯打卡记录

缘起

看到少数派上介绍 HabitKit,发现它的呈现方式有点像 github 代码提交的热力图,挺好看。

加上之前也浏览过椒盐豆豉的文章 如何给 Hugo 博客添加热力图,想着能不能在自己的博客上也用类似的形式来记录一下平常的运动、学习,也是一种激励。

实现

了解到可以用 echart 的 js 后,和 ChatGPT 4 展开了数轮的对话,历经众多问题,终于得到了我想到的样子。

主要代码如下:

<script type="text/javascript">
    function createHeatmap(containerId, dataUrl) {
        var chartDom = document.getElementById(containerId);
        var myChart = echarts.init(chartDom);
        var option = {
            tooltip: {
                position: 'top',
                formatter: function (params) {
                    return params.value[0] + ' - ' + params.value[2];
                }
            },
            calendar: {
                top: 'middle',
                left: 'center',
                orient: 'horizontal',
                cellSize: [15, 15],
                range: '2024',  
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ccc'
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: []
            }]
        };
        myChart.setOption(option);

        fetch(dataUrl)
        .then(response => response.text())
        .then(text => {
            const data = text.split('\n').map(line => {
                const parts = line.split('|');
                if (parts.length === 3) {
                    return [parts[0].trim(), 1, parts[2].trim()]; // 使用 1 作为占位数值
                }
                return null;
            }).filter(item => item !== null);
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
    }
    createHeatmap('heatmap1', 'https://utils.jinhuaiyao.com/exercise.txt');
    createHeatmap('heatmap2', 'https://utils.jinhuaiyao.com/running.txt');
    createHeatmap('heatmap3', 'https://utils.jinhuaiyao.com/reading.txt');
    createHeatmap('heatmap4', 'https://utils.jinhuaiyao.com/vocabulary.txt');
    createHeatmap('heatmap5', 'https://utils.jinhuaiyao.com/englishpod.txt');
</script>
 

数据源

数据源要以特定的格式写到文本文件里,写了一个简单的 cron job,每天晚上 12 点把 Logseq 里当天的的运动、学习记录抓取出来放到 VPS 上。

cd /Users/jinhuaiyao/.tmp/

DT=`date +%Y_%m_%d`

for file in `ls *.txt`
do
cp $file /Users/jinhuaiyao/OneDrive/Backup/backup_heatmap/${file}.${DT}
done

cd /Users/jinhuaiyao/Dropbox/my_logseq/journals

grep '\[\[今日运动\]\]' 2024* |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[今日运动\]\]/1/g' > /Users/jinhuaiyao/.tmp/exercise.txt

grep '\[\[跑步\]\]' 2024* |grep -v '\-  km' |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[跑步\]\]/1/g' > /Users/jinhuaiyao/.tmp/running.txt

grep '\[\[今日阅读\]\]' 2024* |grep -v '\-  km' |sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[今日阅读\]\]/1/g' > /Users/jinhuaiyao/.tmp/reading.txt

grep '\[\[英语学习\]\]' 2024* |grep 背单词 |sed 's/EnglishPod//g' |sed 's/,//g'|sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[英语学习\]\]/1/g' |sed 's/背单词//g' > /Users/jinhuaiyao/.tmp/vocabulary.txt

grep '\[\[英语学习\]\]' 2024* |grep  EnglishPod|sed 's/背单词//g' |sed 's/,//g'|sed 's/-/|/g' |sed 's/.md://g' | sed 's/_/-/g' |sed 's/\[\[英语学习\]\]/1/g' > /Users/jinhuaiyao/.tmp/englishpod.txt

cd /Users/jinhuaiyao/.tmp/
scp -P xx *.txt [email protected]:/home/xx/www/webpage
jinhuaiyao@huaiyaos-mac-mini .tmp % ls -ltr
total 40
-rw-r--r--  1 jinhuaiyao  staff  1221 May 10 23:59 exercise.txt
-rw-r--r--  1 jinhuaiyao  staff   184 May 10 23:59 running.txt
-rw-r--r--  1 jinhuaiyao  staff  3479 May 10 23:59 reading.txt
-rw-r--r--  1 jinhuaiyao  staff   938 May 10 23:59 vocabulary.txt
-rw-r--r--  1 jinhuaiyao  staff   957 May 10 23:59 englishpod.txt
jinhuaiyao@huaiyaos-mac-mini .tmp % tail -5 englishpod.txt
2024-04-27| 1 | EnglishPod
2024-04-28| 1 | EnglishPod 15
2024-05-07| 1 | EnglishPod 16
2024-05-08| 1 | EnglishPod 17
2024-05-09| 1 | EnglishPod 17

最终效果见 https://www.jinhuaiyao.com/2024/

新事物 解决问题