gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-04 22:44:25 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Updated Weight tracker (markdown)

Elian Doran 2025-10-30 09:50:18 +02:00
parent 5187843fda
commit 494fc7f72c
1 changed files with 1 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
Weight-tracker.md

@ -1,67 +1 @@
Weight Tracker is a [[Script API]] showcase present in the [[demo document|Document#demo-document]]. See https://docs.triliumnotes.org/user-guide/advanced-usage/advanced-showcases/weight-tracker.
[[Day notes]] shows (among others) how we have "weight" [[promoted attribute|promoted attributes]] in the day note [[template]]. This then aggregates the data and shows a nice chart of weight change in time.
## Demo
[[images/weight-tracker.png]]
## How to remove Weight Tracker button from the top bar
In the link map of Weight Tracker, there is a note "Button". Open it and delete or comment out its contents. Weight Tracker button will disappear after you close and open the app.
## Implementation
Note "Weight Tracker" in the screenshot above is of type "Render HTML note". Such note doesn't have any useful content itself, the only purpose of it is to provide a place where some [[script|scripts]] can render some output. This script is defined in [[relation|attributes]] `renderNote` - coincidentally it's the Weight Tracker's child `Implementation`.
This Implementation [[code note|code notes]] then contains some HTML and JavaScript which loads all the notes with "weight" attribute and displays them in a chart. To actually render chart we're using third party library [chart.js](https://www.chartjs.org/) which is imported as an attachment (it's not built-in into Trilium).
### JS code
To get an idea of the script, here's the "JS code" note content:
```javascript
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()
});
```