Obsidian Chart demo (Markdown format)

chart-test.md

aliases	created	modified	number headings	tags	type	folder	daysback	chartDays
	2023-05-22 11:32:55 -0700	2023-08-12 05:27:05 -0700	first-level 1, max 6, _.1.1.		專案筆記	""	3	100

test2

const iDaysback = parseInt(dv.current().daysback) || 2;
const iChartDays = parseInt(dv.current().chartDays) || 10;

const lStartTime = moment();
const sFolder = dv.current().folder || '';  // 要統計的資料夾
// const dateField = 'created'; // 使用YAML欄位時需要
const sChartColor = '#4e9a06';
const oDocs = dv.pages(sFolder);
 
function getRecentDocs(iNumDays) {
  return oDocs.where(f => {
    //if (!f[dateField]) return false;  // 如果沒有日期欄位則不繼續處理
    const lPastTime = moment().subtract(iNumDays, 'days');
    let lDocTime = f.file.ctime;   // moment(f[dateField]);  //.toISO());
    let valid = lDocTime >= lPastTime && lStartTime >= lDocTime;  //.isAfter(lPastTime) && lDocTime.isBefore(start);
    return valid;
  });
}

// creating the table
var oChartDocs = getRecentDocs(iDaysback);

// 輸出表格樣式的符合條件筆記清單
dv.span(iDaysback + " days ago");
dv.table(['link', 'Created on'], oChartDocs
    .sort(file => file.file.ctime, 'desc')
    .map(page => [page.file.link, page.file.ctime]));

// creating the charts
var oChartDocs = getRecentDocs(iChartDays).sort(f => f.file.ctime);
var daysData = [];
var totalcount = 0;

dv.paragraph(iChartDays + " days ago");
// formatting the data
for (var i=0; i<=oChartDocs.length; i++) {
  var f = oChartDocs[i];
  if (f) {
    var itemDate = moment(f.file.ctime.ts);  //moment(f[dateField]);
    var newDate = moment(itemDate).format('MM-DD');
     var index = daysData.findIndex(d => d.label === newDate);
    if (index !== -1) {
        daysData[index].num += 1;  // 該日數值遞增
    } else {
        daysData.push({label: newDate, num: 1});  // 該日啟始為1
    }
    totalcount += 1;
  }
};

var labels = [], data = [], aggData = [];

daysData.map(el => {
  labels.push(el.label);
  data.push(el.num);

  if (aggData.length) {
    var lastNum = aggData[aggData.length - 1];
    aggData.push(el.num + lastNum);
  } else {
    aggData.push(el.num);
  }
});

const lineChart = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'Docs created',
      data: data,
      backgroundColor: [
        sChartColor
      ],
      borderColor: [
        sChartColor
      ],
      borderWidth: 1
    }]
  }
}

const aggregateChart = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'Aggregate Docs Created',
      data: aggData,
      backgroundColor: [
          sChartColor
      ],
      borderColor: [
          sChartColor
      ],
      borderWidth: 1
    }]
  }
}

dv.paragraph('Created Chart');
window.renderChart(lineChart, this.container);

dv.paragraph('Growth Chart');
window.renderChart(aggregateChart, this.container);

dv.paragraph('Total: ' + totalcount);