trilium/src/scripts/weight.html

<form id="weight-form" style="display: flex; width: 500px; justify-content: space-around; align-items: flex-end;">
    <div>
        <label for="weight-date">Date</label>
        <input type="text" id="weight-date" class="form-control" style="width: 150px; text-align: center;" />
    </div>
    <div>
        <label for="weight">Weight</label>
        <input type="number" id="weight" value="80.0" step="0.1" class="form-control" style="text-align: center; width: 100px;" />
    </div>

    <button type="submit" class="btn btn-primary">Add</button>
</form>

<br/><br/>

<canvas id="canvas"></canvas>

<script>
    (async function() {
        const dateEl = $("#weight-date");
        const weightEl = $("#weight");
        let chart;

        dateEl.datepicker();
        dateEl.datepicker('option', 'dateFormat', 'yy-mm-dd');
        dateEl.datepicker('setDate', new Date());

        async function saveWeight() {
            await server.exec([dateEl.val(), weightEl.val()], async (date, weight) => {
                const dataNote = await this.getNoteWithAttribute('date_data', date);

                if (dataNote) {
                    dataNote.jsonContent.weight = weight;

                    await this.updateEntity(dataNote);
                }
                else {
                    const parentNoteId = await this.getDateNoteId(date);
                    const jsonContent = { weight: weight };

                    await this.createNote(parentNoteId, 'data', jsonContent, {
                        json: true,
                        attributes: {
                            date_data: date,
                            hide_in_autocomplete: null
                        }
                    });
                }
            });

            showMessage("Weight has been saved");

            const data = await getData();

            chart.data = data;
            chart.update();
        }

        async function drawChart() {
            const data = await getData();

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

            chart = new Chart(ctx, {
                type: 'line',
                data: data
            });
        }

        async function getData() {
            const data = await server.exec([], async () => {
                const notes = await this.getNotesWithAttribute('date_data');
                const data = [];

                for (const note of notes) {
                    const dateAttr = await note.getAttribute('date_data');

                    data.push({
                        date: dateAttr.value,
                        weight: note.jsonContent.weight
                    });
                }

                data.sort((a, b) => a.date < b.date ? -1 : +1);

                return data;
            });

            const datasets = [{
                label: "Weight",
                backgroundColor: 'red',
                borderColor: 'red',
                data: data.map(row => row.weight),
                fill: false
            }];

            const labels = data.map(row => row.date);

            return {
                labels: labels,
                datasets: datasets
            };
        }

        $("#weight-form").submit(event => {
            saveWeight();

            event.preventDefault();
        });

        drawChart();
    })();
</script>