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.
For this extension to work the class variable needs to be set to timeline and the file variable needs to give the name of the additional json file including the timeline data as shown below.
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.
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.
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:
{
"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 [pages.json|pages.json.html] file.</p>\r\n\r\n<h3>The Example</h3>\r\n[##]\r\n\r\n<h3>Summary</h3>\r\n<div class=\"alert alert-info\" role=\"alert\"><h4 class=\"alert-heading\">Extension Variables</h4><p>For this extension to work the <b>class</b> variable needs to be set to <b>timeline</b> and the <b>file</b> variable needs to give the name of the additional json file including the timeline data as shown below.</p></div>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>... \r\n \"<b>timeline</b>\": {\r\n \"<b>parent</b>\": \"extensions\",\r\n \"<b>class</b>\": \"timeline\",\r\n \"<b>file</b>\": \"timeline.json\",\r\n \"<b>title</b>\": \"Simple Site - The <b>Timeline Extension</b>\",\r\n \"<b>content</b>\": \"<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 ... \",\r\n \"<b>content right</b>\": \"\"\t\t\r\n\t}\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">Simplified version of the JSON object used to describe this page.</figcaption>\r\n</figure>\r\n\r\n<p>The details included in the <b>content</b> and <b>content right</b> variable will be presented as [previously described|pages.json.html], however the data included in the named file, in this case <b>timeline.json</b> will be processed to add a formatted timeline to the page.</p>\r\n\r\n<h3>Timeline JSON file</h3>\r\n\r\n<p>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|https://github.com/jpadfield/simple-site/blob/master/build/timeline.json] file.</p>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>project</b>\": \"Simple title for time line\",\r\n \"<b>start date</b>\": \"Start date of your project in the 2020-12-31 format\",\r\n \"<b>margin</b>\": -3, /* negative number of months - adds a margin to the left of your timeline to leave room for the group titles.*/\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">The top three variable required in the timeline JSON file.</figcaption>\r\n</figure>\r\n\r\n<p>The rest of the data within the JSON file relates to a series of event organised in <b>groups</b>, 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 <b>stages</b>.</p>\r\n\r\n<p>Each stage is made up of four unnamed variables which equate to:</p>\r\n<ul>\r\n<li>The display text that describes the particular stage or event</li>\r\n<li>An optional styling class - at this time only three options are used in the example below;\r\n<ul>\r\n<li><b>\"\"</b>: (basically empty) a mid blue with a dark blue outline</li>\r\n<li><b>\"crit\"</b>: a red with a lighter read outline</li>\r\n<li><b>\"crit, active\"</b>: a lighter blue with a red outline.</li>\r\n</ul></li>\r\n<li>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.</li>\r\n<li>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.</li>\r\n</ul>\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>\r\n... \r\n \"<b>groups</b>\": { \r\n \"<b>tag1</b>\": {\r\n \"<b>title</b>\": \"Tag1 Title\",\r\n \"<b>stages</b>\" : [\r\n [\"Text string describing the stage\", \"\", 1, 2],\r\n [\"Text string describing a critical stage\", \"crit\", 2, 4],\r\n [\"Text string describing an active stage\", \"crit, active\", 3, 8]\r\n ]}\r\n }\r\n...\r\n</code></pre><figcaption class=\"figure-caption\">The first few objects in the [JSON file|https://github.com/jpadfield/simple-site/blob/master/build/timeline.json] used to describe the example timeline are shown below.</figcaption>\r\n</figure>\r\n\r\n<figure>\r\n\t\t<pre style=\"overflow: hidden;border: 2px solid black;padding: 10px;\">\r\n<code>{\r\n \"<b>project</b>\": \"Simple Site Time Line Example\",\r\n \"<b>start date</b>\": \"2020-02-01\",\r\n \"<b>margin</b>\": -3,\r\n \"<b>groups</b>\": {\r\n \"<b>int</b>\": {\r\n \"<b>title</b>\": \"Initial discussion and planning\",\r\n \"<b>stages</b>\" : [\r\n [\"Literature/website/software review\", \"\", 2, 8],\r\n [\"Establish communications, collaborative environments and links with related interest groups\",\t\"\", 0, 4],\t\t\t\t\r\n [\"Recruit Project Researcher\", \"crit\", \"3,3\", 6],\r\n [\"Project Researcher In Post\", \"crit\", 6, 21]\r\n ]},\r\n \"<b>ws</b>\": {\r\n \"<b>title</b>\": \"Workshops\",\r\n \"<b>stages</b>\": [\r\n [\"Organise Workshop 1\", \"\", 2, \"5,20\"],\r\n [\"Workshop 1 - The Beginning\", \"crit\", \"5,20\", \"5,21\"],\r\n [\"Organise Workshop 2\",\t\"\", 6, 9],\r\n [\"Workshop 2 - The Middle\", \"crit, active\", 9, 10],\r\n [\"Organise Workshop 3 \u2013 Document available resources and development ideas\", \"\", 10, 18],\r\n [\"Workshop 3 - The End\", \"crit, active\", 18, 19]\r\n ]},\r\n\t\t\t\r\n...\r\n\r\n }\r\n }\r\n</code></pre><figcaption class=\"figure-caption\">The first few objects in the [JSON file|https://github.com/jpadfield/simple-site/blob/master/build/timeline.json] used to describe the example timeline.</figcaption>\r\n</figure>",
"content right": "",
"copy": false,
"displaycode": true
}{
"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 \u2013 Document available resources and development ideas",
"",
10,
18
],
[
"Workshop 3 - The End",
"crit, active",
18,
19
]
]
},
"cr": {
"title": "Collaborative Research",
"stages": [
[
"Assessing the output of Workshop 1",
"",
"5,21",
7
],
[
"Assessing the output of Workshop 2",
"",
10,
12
],
[
"Project Resource survey",
"",
6,
10
],
[
"Evaluate selection of identified project Resources",
"",
10,
11
],
[
"Assessing the output of Workshop 3",
"",
19,
20
]
]
},
"pl": {
"title": "Placements",
"stages": [
[
"Secondments (some may be virtual) for researcher",
"",
9,
17
]
]
},
"pd": {
"title": "Public demonstrations",
"stages": [
[
"Evaluation of demonstration deliverables",
"crit, active",
19,
20
],
[
"Presentation of demonstration deliverables",
"crit, active",
20,
21
]
]
},
"rp": {
"title": "Reporting",
"stages": [
[
"Complete and Deliver Final Rreport",
"crit, active",
20,
21
]
]
}
}
}