Build mermaid diagram

[dxcore35]

Why aren't you using the mermaid diagram to show the task distribution over day?
https://mermaid-js.github.io/mermaid/#/gantt

Live example: Here

[lynchjames]

Great idea!

I wasn't sure if this would work for minute length tasks within a day but it does and I've now got some PoC code generating this:

Day Planner

• 16:08 Setup
• 17:00 BREAK

Current Task

• 18:30 Reading

||18:30||->->->->->->->->->->->->->->->->->->||19:00||

• 19:00 BREAK
• 19:30 Writing blog post
• 20:30 BREAK
• 21:20 Prep for tomorrow
• 21:50 END

gantt
    title Day Planner for 6 November 2020
    dateFormat  HH-mm
    axisFormat %H:%M
    section Tasks
    Setup      :16-08, 52mm
    Reading      :18-30, 30mm
    Writing blog post      :19-30, 60mm
    Prep for tomorrow      :21-20, 30mm
    END      :21-50
    section Breaks
    BREAK      :17-00, 90mm
    BREAK      :19-00, 30mm
    BREAK      :20-30, 50mm

Loading

---

[dxcore35]

Amazing! Add some CSS color to distinguish between breaks and task!

You can use my example to understand the CSS color classes:

graph LR
	X(Extreme bright) -- Derange --> A
    Bright --Increase --> A((Tejas))
	Dark --Diminish --> A
	C(Reduce excess) --> A
	White --> C
	Blue --> C
	Green --> C
	Gold --> Bright
	%% Class Definitions
    %% =================
    class Bright cssClass1;
    classDef cssClass1 fill:grey;
    class Dark cssClass2;
    classDef cssClass2 fill:#373737;
	class Tejas cssClass3;
    classDef cssClass3 fill:#97593A;
    class White cssClass4;
    classDef cssClass4 fill:grey;
	class Green cssClass5;
    classDef cssClass5 fill:green;
    class Blue cssClass6;
    classDef cssClass6 fill:#1D4AAC;
    class Gold cssClass7;
    classDef cssClass7 fill:#B6B151;
	class X cssClass8;
    classDef cssClass8 fill:tDBD6A9, border:red;
    class C cssClass9;
    classDef cssClass9 fill:transparent, stroke:transparent;;

Loading

And please put it on the top of the note, as it is overview!

[lynchjames]

Makes sense to have it at the top of the Day Planner section, will be in 0.2.2.

I've added more info to the gantt chart section of the docs to cover the CSS customisation and added a file with some example CSS overrides:

mermaid-gantt-example.css.

[dxcore35]

I was even thinking if the current task and next task should be shown in diagram:

gantt
    title A Gantt Diagram
title Day Planner for 6 November 2020
    dateFormat  HH-mm
    axisFormat %H:%M
    section NOW
    Setup      :16-08, 52mm
    Writing blog post      :17-00, 60mm

And remove the current progress indicator
> ||14:00||->->->->->->->->->->_ _ _ _ _ _ _ _ ||15:00||

This will force you to focus more on current task and prepare mentally :D for the next one. And it is more beautiful and obvious then textual progress bar.

Probably you can add Mermaid CSS class into div class and change width of display....just thinking aloud.

[lynchjames]

Could you raise this in a separate issue? We can discuss there.