Weight Tracker

The Weight Tracker is a Script API showcase present in the demo notes.

By adding weight as a promoted attribute in the template from which day notes are created, you can aggregate the data and plot weight change over time.

Implementation#

The Weight Tracker note in the screenshot above is of the type Render Note. That type of note doesn't have any useful content itself. Instead it is a placeholder where a script can render its output.

Scripts for Render Notes are defined in a relation called ~renderNote. In this example, it's the Weight Tracker's child Implementation. The Implementation consists of two code notes that contain some HTML and JavaScript respectively, which load all the notes with a weight attribute and display their values in a chart.

To actually render the chart, we're using a third party library called chart.jswhich is imported as an attachment, since it's not built into Trilium.

Code#

Here's the content of the script which is placed in a code note of type JS Frontend:

async function getChartData() {
    const days = await api.runOnBackend(async () => {
        const notes = api.getNotesWithLabel('weight');
        const days = [];

        for (const note of notes) {
            const date = note.getLabelValue('dateNote');
            const weight = parseFloat(note.getLabelValue('weight'));

            if (date && weight) {
                days.push({ date, weight });
            }
        }

        days.sort((a, b) => a.date > b.date ? 1 : -1);

        return days;
    });

    const datasets = [
        {
            label: "Weight (kg)",
            backgroundColor: 'red',
            borderColor: 'red',
            data: days.map(day => day.weight),
            fill: false,
            spanGaps: true,
            datalabels: {
                display: false
            }
        }
    ];

    return {
        datasets: datasets,
        labels: days.map(day => day.date)
    };
}

const ctx = $("#canvas")[0].getContext("2d");

new chartjs.Chart(ctx, {
    type: 'line',
    data: await getChartData()
});

How to remove the Weight Tracker button from the top bar#

In the link map of the Weight Tracker, there is a note called Button. Open it and delete or comment out its contents. The Weight Tracker button will disappear after you restart Trilium.