dataviewjs for obsidian vault statistics chart

statistics_chart.js

const staticsDataDir = this.app.vault.configDir + "/vault-stats.json";
const data = await this.app.vault.adapter.read(staticsDataDir);

const statics = JSON.parse(data);
let wordsData = [];
let filesData = [];
let pagesData = [];
const history = Object.keys(statics.history);
for (const date of history) {
    wordsData.push({ x: date, y: statics.history[date].words });
    filesData.push({ x: date, y: statics.history[date].files });
    pagesData.push({ x: date, y: statics.history[date].totalPages });
}
console.log(history);
console.log(wordsData);

const chartData = {
    type: "line",
    data: {
        datasets: [
            {
                label: "Daily Words",
                data: wordsData,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 1.2,
            },
            {
                label: "Total Files",
                data: filesData,
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 1.2,
            },
            {
                label: "Total Pages",
                data: pagesData,
                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 1.2,
            }
        ],
    },
    options: {
        pointHoverBorderWidth: 6,
        interaction: {
            mode: 'index',
            axis: 'y',
        },
        plugins: {
            title: {
                display: true,
                text: 'Statistics of Obsidian Vault',
                font: { weight: 'bold italic', size: '16px', family: 'Barlow' },
            },
            subtitle: {
                display: true,
                text: this.app.vault.getName(),
                font: { size: '14px', style: 'italic', family: 'sans-serif' }
            }
        },
        animations: {
            tension: {
                duration: 1000,
                easing: 'easeInOutSine',
                from: 0.5,
                to: 0,
                loop: true
            }
        },
        scales: {
            y: {
                stacked: true,
                border: {
                    display: true,
                    width: 0.8,
                },
                grid: {
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: true,
                    color: 'rgba(239, 239, 239, 0.2)',
                },
            },
            x: {
                border: {
                    display: false,
                    width: 0.8,
                },
                grid: {
                    color: 'rgba(239, 239, 239, 0.2)',
                },
            },
        },
    },
};

window.renderChart(chartData, this.container);