diff --git a/Family tree.md b/Family tree.md new file mode 100644 index 0000000..e69de29 diff --git a/Screenshot tour.md b/Screenshot tour.md new file mode 100644 index 0000000..e69de29 diff --git a/Script API.md b/Script API.md new file mode 100644 index 0000000..2cf2ae8 --- /dev/null +++ b/Script API.md @@ -0,0 +1,4 @@ +For [[Scripts]] to do anything useful, Trilium publishes "Script API". Actually there are two such APIs: + +* [Frontend API](https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html) +* [Backend API](https://zadam.github.io/trilium/backend_api/BackendScriptApi.html) \ No newline at end of file diff --git a/Scripts.md b/Scripts.md index 0a42de7..62715b3 100644 --- a/Scripts.md +++ b/Scripts.md @@ -67,7 +67,4 @@ Other events are bound to some entity, these are defined as [[relations|Attribut ## Script API -To do anything useful, Trilium publishes "Script API". Actually there are two such APIs: - -* [Frontend API](https://zadam.github.io/trilium/frontend_api/) -* [Backend API](https://zadam.github.io/trilium/backend_api/) \ No newline at end of file +See [[Script API]]. \ No newline at end of file diff --git a/Task manager.md b/Task manager.md new file mode 100644 index 0000000..f0c43bb --- /dev/null +++ b/Task manager.md @@ -0,0 +1,63 @@ +Weight Tracker is a [[Script API]] showcase present in the [[demo document|Document#demo-document]]. + +[[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 graph of weight change in time. + +## Demo +[[images/weight-tracker.png]] + +## 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 then contains some HTML and JavaScript which loads all the notes with "weight" attribute and displays them in a graph. To actually render graph 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.runOnServer(async () => { + const notes = await api.getNotesWithLabel('weight'); + const days = []; + + for (const note of notes) { + const date = await note.getLabelValue('dateNote'); + const weight = parseFloat(await 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() +}); +``` \ No newline at end of file diff --git a/Weight tracker.md b/Weight tracker.md new file mode 100644 index 0000000..d239aca --- /dev/null +++ b/Weight tracker.md @@ -0,0 +1,4 @@ + + +## Demo + diff --git a/gifs/weight-tracker.gif b/gifs/weight-tracker.gif deleted file mode 100644 index 04d764c..0000000 Binary files a/gifs/weight-tracker.gif and /dev/null differ diff --git a/images/day-notes.png b/images/day-notes.png index 6b375c3..fe51ce3 100644 Binary files a/images/day-notes.png and b/images/day-notes.png differ diff --git a/images/weight-tracker.png b/images/weight-tracker.png new file mode 100644 index 0000000..5d75d71 Binary files /dev/null and b/images/weight-tracker.png differ