[Widget]Trilium-Heatmap #4213

dvai · 2023-08-30T00:50:01Z

dvai
Aug 30, 2023

Display the number of note edits in Trilium, just like the GitHub contributions heatmap.
https://github.com/dvai/Trilium-Heatmap

SiriusXT · 2023-08-30T01:14:59Z

SiriusXT
Aug 30, 2023
Collaborator

I've always wanted a widget like this

0 replies

zerebos · 2023-08-30T01:16:15Z

zerebos
Aug 30, 2023

This is really cool! I just have a question about runOnServer.js. If I add this, should I then disable setHistoryCount?

3 replies

zerebos Aug 30, 2023

Also, you should add this to the Awesome Trilium list!

dvai Aug 30, 2023
Author

Yes，you should disable it.

meichthys Aug 30, 2023
Collaborator

FYI - I've submitted a pull request to add it to Awesome Trilium: Nriver/awesome-trilium#31

meichthys · 2023-08-30T14:37:25Z

meichthys
Aug 30, 2023
Collaborator

This widget is so cool! Keep up the great work! I love adding it to other notes (especially my default root note) by 'Including' it 👍

1 reply

jwhonce Aug 30, 2023

What fun! Thank you for sharing. And thanks to @zadam for creating and sharing such a great platform.

zadam · 2023-08-30T20:03:48Z

zadam
Aug 30, 2023
Maintainer

Hi, that's very cool. I admit I had a very similar widget like this for years, but it's been so ugly I've never shared it. This one looks much better.

I have two suggestions for querying data from the database:

you're taking into account only the last date of modification which ignores the changes made before that. You can use "revisions" table to get older changes.
you can use GROUP BY to avoid querying for each date separately.

Combining those two points, you can make a single query to count everything:

SELECT COUNT(*), date FROM (
	SELECT noteId, SUBSTR(utcDateModified, 0, 11) AS date FROM notes
	UNION
	SELECT DISTINCT noteId, SUBSTR(utcDateCreated, 0, 11) AS date FROM revisions
)
GROUP BY date

On my pretty large database the query takes 100 milliseconds, so it's likely fast enough to not have to save/cache the results in a data note.

(the query uses schema from 0.61 and won't work on 0.60 and older)

2 replies

dvai Aug 31, 2023
Author

Thank you for the suggestion, I will improve it.

Ivy-End Aug 31, 2023

i follow you instruction, but got the error that 'revisions' not found. haha, i have ignored the info in your () before. I am current running it on 0.60.4. Thank you for advising, I found the query speed much more fast than before.

Nriver · 2023-08-31T02:09:37Z

Nriver
Aug 31, 2023
Collaborator

It's on fire.

0 replies

Nriver · 2023-08-31T02:19:36Z

Nriver
Aug 31, 2023
Collaborator

I like the idea of releasing a .zip file instead of separate files and long descriptions to configure various attributes. It saves a lot of effort compared to copying and pasting, setting attributes, and so on. It's very beginner-friendly. This could also be helpful for building a Plugin Manager in the future (if luck permits).

1 reply

zerebos Aug 31, 2023

I like it as well, and I decided if my addons start to become any more complicated I'll start releasing them as zip files. You're right that it could be a good basis for a plugin manager for Trilium... Maybe after the 0.61 release and I'm more familiar with the codebase I'll put together a proposal

Ivy-End · 2023-08-31T04:21:44Z

Ivy-End
Aug 31, 2023

I have modified it with my custom stylizing, and merge 3 js files into ones. Here is what it look like:

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            #heatmap-tooltip {
                padding: 8px;

                font-size: 13px;
                line-height: 1.5;
                text-align: center;

                color: #FFFFFF;
                background: #24292F;

                display: none;
                position: absolute;
                border-radius: 8px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div  style="display: flex; justify-content: center; align-items: center;">
            <svg id="trilium-heatmap"></svg>
        </div>
        <div id="heatmap-tooltip"></div>
    </body>
</html>

And here is my js code: The original version clicked on each square to jump to the notes for the day, but there were times when there were no notes for the day, so that's been fixed over here.

/******************** Custom Parameters ********************/
const dataRange = [1, 32];
const colorRange = ["#9be9a8", "#216e39"];

const displayWeekTable = ['Mon', 'Wed', 'Fri'];
const displayMonthTable = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];

/******************** Drawing Parameters ********************/
const borderMargin = 16; const titleMargin = 8;
const monthBoxSize = 13; const boxSize = 13; const boxMargin = 3;
const weekBoxSize = boxSize * 3; 

const svgWidth = borderMargin * 2 + weekBoxSize + titleMargin + 52 * boxSize + 51 * boxMargin;
const svgHeight = borderMargin * 2 + monthBoxSize + titleMargin + 7 * boxSize + 6 * boxMargin;

/******************** Drawing Handles ********************/
const svg = d3.select('#trilium-heatmap').attr('width', svgWidth).attr('height', svgHeight);

const drawWeeks = svg.append('g').attr(
    'transform', `translate(${borderMargin + titleMargin}, ${borderMargin + monthBoxSize + titleMargin})`
);
const drawMonths = svg.append('g').attr(
    'transform', `translate(${borderMargin + weekBoxSize + titleMargin}, ${borderMargin})`
);
const drawBoxes = svg.append('g').attr(
    'transform', `translate(${borderMargin + weekBoxSize + titleMargin}, ${borderMargin + monthBoxSize + titleMargin})`
);

/******************** Dataset ********************/
const notesData = {};
    
const notes = await api.runOnBackend(async() => {
    const results = api.sql.getRows(`SELECT date as notesDate, COUNT(*) as notesCount FROM (
            SELECT noteId, SUBSTR(utcDateModified, 0, 11) AS date FROM notes
            UNION
            SELECT DISTINCT noteId, SUBSTR(utcDateCreated, 0, 11) AS date FROM notes
        )
        GROUP by date`);
    return results;
});

for (let i = 0; i < notes.length; i++) {
    notesData[notes[i]['notesDate']] = notes[i]['notesCount']
}

/******************** Drawing ********************/
const totalDays = new Date(new Date().getFullYear(), 1, 29).getDate() === 29 ? 366 : 365;
const colorScale = d3.scaleSequential().domain(dataRange).interpolator(d3.interpolateRgb(colorRange[0], colorRange[1]));

const startDate = new Date();
startDate.setDate(new Date().getDate() - totalDays + 1);
const startDayOfWeek = startDate.getDay();

// Draw Weeks
for (let i = 0; i < 3; i++) {
    drawWeeks.append('text').text(displayWeekTable[i])
        .attr('week', displayWeekTable[i])
        .attr('font-size', '13px')
        .attr('fill', '#1F2328')
        .attr('x', 0)
        .attr('y', (boxSize + boxMargin) * (2 * i + 1) + boxSize);
}

// Draw Boxes
let currentX = 0; let currentY = startDayOfWeek;
for (let i = totalDays - 1; i >= 0; i--) {
    let referDate = new Date();
    referDate.setDate(referDate.getDate() - i);
    drawBoxes.append('rect').attr('date', referDate.toISOString().slice(0, 10))
        .attr('width', boxSize).attr('height', boxSize)
        .attr('rx', boxMargin).attr('ry', boxMargin)
        .attr('x', (boxSize + boxMargin) * currentX).attr('y', (boxSize + boxMargin) * currentY)
        .attr('fill', () => {
                const referDateFormatted = referDate.toISOString().slice(0, 10);
                const notesCount = parseInt(notesData[referDateFormatted]);
                if (isNaN(notesCount)) {
                    return '#ebedf0';
                } else if (notesCount <= dataRange[1]) {
                    return colorScale(notesCount - 1);
                } else {
                    return colorRange[1];
                }
            })
        .on('mouseover', function(event) {
                const toolTips = document.getElementById('heatmap-tooltip');
                const heatMapDiv = document.getElementById('heatmap-tooltip').parentElement;
        
                const referDateFormatted = this.getAttribute('date');
                const notesCount = parseInt(notesData[referDateFormatted]);
        
                let bounds = heatMapDiv.getBoundingClientRect();
                
                d3.select(this).style('stroke', 'black').style('stroke-width', 0.75);
                console.log(event.clientX + " " + event.clientY);
                toolTips.innerHTML  = `${!isNaN(notesCount) ? notesCount.toString() : 'No'} notes modified in ${referDateFormatted}`;
                toolTips.style.left    = `${event.clientX - bounds.left - 96}px`;
                toolTips.style.top     = `${event.clientY - bounds.top + 12}px`;
                toolTips.style.display = 'block';
            })
        .on('mouseout', function() {
                const toolTips = document.getElementById('heatmap-tooltip');
        
                d3.select(this).style("stroke", null); 
                toolTips.style.display = 'none';
            })
        .on("click", async function() {
                const referDateFormatted = this.getAttribute('date');
                const notesCount = parseInt(notesData[referDateFormatted]);
        
                if (!isNaN(notesCount)) {
                    const noteId = await api.runOnBackend(async (referDateFormatted) => {
                        const note = await api.getDayNote(referDateFormatted);
                        return note.noteId;
                    }, [referDateFormatted]);
                    await api.waitUntilSynced();
                    api.activateNote(noteId);
                }
            });
  
    if (referDate.getDate() == 1) {
        drawMonths.append('text').text(displayMonthTable[referDate.getMonth()])
            .attr('month', displayMonthTable[referDate.getMonth()])
            .attr('font-size', '13px')
            .attr('fill', '#1F2328')
            .attr('x', (boxSize + boxMargin) * currentX)
            .attr('y', monthBoxSize);
    }
    
    currentY = (currentY + 1) % 7;
    currentX = currentX + (currentY == 0);
}

// Draw Months
for (let i = 0; i < totalDays; i++) {
    let referDate = new Date();
    referDate.setDate(referDate.getDate() - i);
    
    currentY = (currentY + 1) % 7;
    currentX = currentX + (currentY == 0);
}

0 replies

sottey · 2023-08-31T04:23:18Z

sottey
Aug 31, 2023

I like the idea of a plugin system as well. The possible tasks that are taken for installing an extension currently are:

Creating notes
- Templates
- Text Notes
- JS Notes
- CSS Notes
- Etc.
Assigning attributes to certain notes, both existing notes and imported/created notes
- Relations (with validation that the related note exists)
- Labels
Error checking to roll back install (could use transaction api)
Adding in of LaunchBar icons
SQL direct actions (?)

Some of these arepotentially super dangerous:

any changes to existing data
SQL actions
Adding labels could be risky as it could share out unintended pages innocently or maliciously
adding notes with #appCss could interfere with other CSS
JS pages could potentially introduce malware/damage into the instance of Trilium

A lot of these issues could be mitigated with a bit of coding or some minor tweaks to Trilium (example: the ability to limit the tree scope of #appCss would be amazing. i.e. #appCss=2 results in the Css only being applied at it's own level and it's parent level.

I think this could be a really fun project. If anyone starts working on this I would be happy to help.

7 replies

meichthys Aug 31, 2023
Collaborator

@QuentinLeCaignec Until a plugin manager happens, could you add your widgets/scripts/etc to Awesome-Trilium? I've been trying to keep that repo up to date with any snippes or trilium-based tools that could be useful.

zerebos Aug 31, 2023

@QuentinLeCaignec as for the part about bundling and the developer experience, I've been working on some tools to help with just that, including a @types package for typescript use or just for autocomplete in regular JS. As well as a way to automatically update the note in Trilium with the newly built bundle.

MorganeLeCaignec Aug 31, 2023

@meichthys I'm pleasantly surprised to learn my two widgets already are on there! I hadn't heard of this initiative, very nice. They are the trilium-hexmap and trilium-timeline widgets, linked to my Gitlab repos.

meichthys Aug 31, 2023
Collaborator

Haha, cool 🎉
I reallly like the Timeline widget - i didn't realize that was yours. Kudos!

mm21 Sep 2, 2023

I'm planning to build a tool like that in TriliumAlchemy, but working on a tool to synchronize Trilium with a local folder first. I'd like to support a plugin config file which can take a list of paths to .zip files or repo URLs which are cloned and managed by the tool. The existing functionality of the project provides a high-level interface to Trilium which makes working with attributes and child notes easy.

spirit1431007 · 2023-08-31T06:04:05Z

spirit1431007
Aug 31, 2023

very cool!

0 replies

[Widget]Trilium-Heatmap #4213

Uh oh!

Uh oh!

Replies: 9 comments · 14 replies

Uh oh!

SiriusXT Aug 30, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

dvai Aug 30, 2023 Author

Uh oh!

meichthys Aug 30, 2023 Collaborator

Uh oh!

Uh oh!

meichthys Aug 30, 2023 Collaborator

Uh oh!

Uh oh!

zadam Aug 30, 2023 Maintainer

Uh oh!

dvai Aug 31, 2023 Author

Uh oh!

Uh oh!

Nriver Aug 31, 2023 Collaborator

Uh oh!

Nriver Aug 31, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

meichthys Aug 31, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

meichthys Aug 31, 2023 Collaborator

Uh oh!

Uh oh!

Replies: 9 comments 14 replies

SiriusXT
Aug 30, 2023
Collaborator

dvai Aug 30, 2023
Author

meichthys Aug 30, 2023
Collaborator

meichthys
Aug 30, 2023
Collaborator

zadam
Aug 30, 2023
Maintainer

dvai Aug 31, 2023
Author

Nriver
Aug 31, 2023
Collaborator

Nriver
Aug 31, 2023
Collaborator

meichthys Aug 31, 2023
Collaborator

meichthys Aug 31, 2023
Collaborator