Obsidian の成長観測を Obsidian Chart で実装
日々のObsidianの成長をデイリーノート上で確認したかったので、Dataview と Chart を利用して作ってみました。
成果物のメージはこんな感じ。
コード
デイリーの投稿頻度
```dataviewjs
// メモの記事作成頻度をグラフ化する
let pages = dv.pages('')
let dateHash = {}
pages.forEach(page => {
let cday = page.file.cday;
let date = `${cday.year}-${String(cday.month).padStart(2, '0')}-${String(cday.day).padStart(2, '0')}`;
if (dateHash[date]) {
dateHash[date]++
} else {
dateHash[date] = 1
}
});
let labels = Object.keys(dateHash).sort();
let data = labels.map(date => dateHash[date]);
renderChart(
{
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Docs created',
data: data,
backgroundColor: '#4e9a06',
borderColor: '#4e9a06',
borderWidth: 1,
fill: false
},
]
},
},
this.container
);
````
投稿数累計
```dataviewjs
let pages = dv.pages('');
let dateHash = {};
let dateList = [];
pages.forEach(page => {
let cday = page.file.cday;
let date = `${cday.year}-${String(cday.month).padStart(2, '0')}-${String(cday.day).padStart(2, '0')}`;
if (!dateHash[date]) {
dateHash[date] = 0;
dateList.push(date);
}
dateHash[date]++;
});
dateList.sort();
let cumulativeData = [];
let cumulativeCount = 0;
dateList.forEach(date => {
cumulativeCount += dateHash[date];
cumulativeData.push(cumulativeCount);
});
renderChart(
{
type: 'line',
data: {
labels: dateList,
datasets: [
{
label: 'Docs created',
data: cumulativeData,
backgroundColor: '#4e9a06',
borderColor: '#4e9a06',
borderWidth: 1,
fill: false
},
]
},
},
this.container
);
```
以上!
この記事が気に入ったらサポートをしてみませんか?