Simple Site - The Timeline Extension

This extension uses the Mermaid library to produce a customised timeline gantt chart. It is an example of a special page that can be added to the pages.json file.

The Example

gantt dateFormat YYYY-MM-DD title Simple Site Time Line Example section Initial discussion and planning Add as a margin :int0, 2019-11-01, 2019-11-01 Literature/website/software review :int1, 2020-04-01, 2020-10-01 Establish communications, collaborative environments and links with related interest groups :int2, 2020-02-01, 2020-06-01 Recruit Project Researcher :crit, int3, 2020-05-03, 2020-08-01 Project Researcher In Post :crit, int4, 2020-08-01, 2021-11-01 section Workshops Organise Workshop 1 :ws0, 2020-04-01, 2020-07-20 Workshop 1 - The Beginning :crit, ws1, 2020-07-20, 2020-07-21 Organise Workshop 2 :ws2, 2020-08-01, 2020-11-01 Workshop 2 - The Middle :crit, active, ws3, 2020-11-01, 2020-12-01 Organise Workshop 3 – Document available resources and development ideas :ws4, 2020-12-01, 2021-08-01 Workshop 3 - The End :crit, active, ws5, 2021-08-01, 2021-09-01 section Collaborative Research Assessing the output of Workshop 1 :cr0, 2020-07-21, 2020-09-01 Assessing the output of Workshop 2 :cr1, 2020-12-01, 2021-02-01 Project Resource survey :cr2, 2020-08-01, 2020-12-01 Evaluate selection of identified project Resources :cr3, 2020-12-01, 2021-01-01 Assessing the output of Workshop 3 :cr4, 2021-09-01, 2021-10-01 section Placements Secondments (some may be virtual) for researcher :pl0, 2020-11-01, 2021-07-01 section Public demonstrations Evaluation of demonstration deliverables :crit, active, pd0, 2021-09-01, 2021-10-01 Presentation of demonstration deliverables :crit, active, pd1, 2021-10-01, 2021-11-01 section Reporting Complete and Deliver Final Rreport :crit, active, rp0, 2021-10-01, 2021-11-01

Summary

...  
  "timeline": {
    "parent": "extensions",
    "class": "timeline",
    "file": "timeline.json",
    "title": "Simple Site - The <b>Timeline Extension</b>",
    "content": "<p>This extension uses the [Mermaid|https://mermaid-js.github.io/mermaid/#/] library to produce a customised timeline gantt chart. It is an example of a special page that can be added to the ... ",
    "content right": ""		
	}
...
Simplified version of the JSON object used to describe this page.

The details included in the content and content right variable will be presented as previously described, however the data included in the named file, in this case timeline.json will be processed to add a formatted timeline to the page.

Timeline JSON file

As with the other JSON files the timeline data needs to be organised in a series of JSON objects, an example of which is provided below, for an example of real code please see the timeline.json file.

{
  "project": "Simple title for time line",
  "start date": "Start date of your project in the 2020-12-31 format",
  "margin": -3, /* negative number of months - adds a margin to the left of your timeline to leave room for the group titles.*/
...
The top three variable required in the timeline JSON file.

The rest of the data within the JSON file relates to a series of event organised in groups, it is ok just to have a single group, but the system automatically applies different background colours to each group, which allows an easy method of breaking up or organising a longer list of events. Each is identified with a unique short tag, and then within each individual group you have a group title and list of events called stages.

Each stage is made up of four unnamed variables which equate to:

  • The display text that describes the particular stage or event
  • An optional styling class - at this time only three options are used in the example below;
    • "": (basically empty) a mid blue with a dark blue outline
    • "crit": a red with a lighter read outline
    • "crit, active": a lighter blue with a red outline.
  • The start of the event: given in a number of months from the start date, or a number of months and days if formatted as "3,3" - three months and three days.
  • The end of the event: given in a number of months from the start date, or a number of months and days if formatted as "3,3" - three months and three days.


... 
  "groups": { 
    "tag1": {
      "title": "Tag1 Title",
      "stages" : [
        ["Text string describing the stage", "", 1, 2],
        ["Text string describing a critical stage", "crit", 2, 4],
        ["Text string describing an active stage", "crit, active", 3, 8]
      ]}
    }
...
The first few objects in the JSON file used to describe the example timeline are shown below.
{
  "project": "Simple Site Time Line Example",
  "start date": "2020-02-01",
  "margin": -3,
  "groups": {
    "int": {
      "title": "Initial discussion and planning",
      "stages" : [
        ["Literature/website/software review", "", 2, 8],
        ["Establish communications, collaborative environments and links with related interest groups",	"", 0, 4],				
        ["Recruit Project Researcher", "crit", "3,3", 6],
        ["Project Researcher In Post", "crit", 6, 21]
      ]},
    "ws": {
      "title": "Workshops",
       "stages": [
        ["Organise Workshop 1", "", 2, "5,20"],
        ["Workshop 1 - The Beginning", "crit", "5,20", "5,21"],
        ["Organise Workshop 2",	"", 6, 9],
        ["Workshop 2 - The Middle", "crit, active", 9, 10],
        ["Organise Workshop 3 – Document available resources and development ideas", "", 10, 18],
        ["Workshop 3 - The End", "crit, active", 18, 19]
      ]},
			
...

    }
  }
The first few objects in the JSON file used to describe the example timeline.