見出し画像

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
);

```

以上!

この記事が気に入ったらサポートをしてみませんか?