diff --git a/Family tree.md b/Family tree.md index e69de29..7639486 100644 --- a/Family tree.md +++ b/Family tree.md @@ -0,0 +1,18 @@ +Family Tree is a [[Script API]] and [[promoted attributes]] showcase present in the [[demo document|Document#demo-document]]. + +Sometimes it can be difficult to remember all the extended family, relations and birthdays. Trilium notes might be useful in recording these data and possibly visualizing them. + +## Demo +[[images/family-tree.png]] + +[[images/family-tree-queen.png]] + +## Implementation + +Members note has `child:template` [[attribute|attributes]] defined which means that any note created as a child to Members will have `template` attribute pointing to the `Person template` note (see [[template]]). + +This `Person template` defines multiple [[promoted attributes]], some of which (isPartnerOf, isChildOf) allow multiplicity - there can be multiple such relations. + +Using these promoted attributes, user can define the whole family tree. + +JS code note then uses [[Script API]] to pick up all the notes from Members note (pointing to it via `familyContainer` relation), constructs the graph in memory and renders it via 3rd party [Dagre](https://github.com/dagrejs/dagre) library which is uploaded (together with its [D3](https://d3js.org/) dependency) as an attachment. \ No newline at end of file diff --git a/Task manager.md b/Task manager.md index f0c43bb..e69de29 100644 --- a/Task manager.md +++ b/Task manager.md @@ -1,63 +0,0 @@ -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 index d239aca..7039e34 100644 --- a/Weight tracker.md +++ b/Weight tracker.md @@ -1,4 +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/images/family-tree-queen.png b/images/family-tree-queen.png new file mode 100644 index 0000000..830840f Binary files /dev/null and b/images/family-tree-queen.png differ diff --git a/images/family-tree.png b/images/family-tree.png new file mode 100644 index 0000000..c2c4edf Binary files /dev/null and b/images/family-tree.png differ