diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index c3614ec19..4c90654c8 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -1,7 +1,7 @@ /* eslint-env jest */ import { imgSnapshotTest } from '../../helpers/util.js'; -describe('Sequencediagram', () => { +describe('Gantt diagram', () => { it('should render a gantt chart', () => { imgSnapshotTest( ` @@ -130,4 +130,34 @@ describe('Sequencediagram', () => { {} ); }); + + it('should hide today marker', () => { + imgSnapshotTest( + ` + gantt + title Hide today marker (vertical line should not be visible) + dateFormat YYYY-MM-DD + axisFormat %d + todayMarker off + section Section1 + Today: 1, -1h + `, + {} + ); + }); + + it('should style today marker', () => { + imgSnapshotTest( + ` + gantt + title Style today marker (vertical line should be 5px wide and half-transparent blue) + dateFormat YYYY-MM-DD + axisFormat %d + todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 + section Section1 + Today: 1, -1h + `, + {} + ); + }); }); diff --git a/dist/index.html b/dist/index.html index 6c6d9dc8c..277729f66 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,6 +16,9 @@
info
+ +
+
gantt title Exclusive end dates (Manual date should end on 3d) @@ -25,7 +28,6 @@ 2 Days: 1, 2019-01-01,2d Manual Date: 2, 2019-01-01,2019-01-03
-
gantt title Inclusive end dates (Manual date should end on 4th) @@ -36,6 +38,27 @@ 2 Days: 1, 2019-01-01,2d Manual Date: 2, 2019-01-01,2019-01-03
+
+ gantt + title Hide today marker (vertical line should not be visible) + dateFormat YYYY-MM-DD + axisFormat %d + todayMarker off + section Section1 + Today: 1, -1h +
+
+ gantt + title Style today marker (vertical line should be 5px wide and half-transparent blue) + dateFormat YYYY-MM-DD + axisFormat %d + todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 + section Section1 + Today: 1, -1h +
+ +
+
graph LR sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index de86c916d..702dc78b6 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -6,6 +6,7 @@ import { getConfig } from '../../config'; const config = getConfig(); let dateFormat = ''; let axisFormat = ''; +let todayMarker = ''; let excludes = []; let title = ''; let sections = []; @@ -27,6 +28,7 @@ export const clear = function() { rawTasks = []; dateFormat = ''; axisFormat = ''; + todayMarker = ''; excludes = []; inclusiveEndDates = false; }; @@ -39,6 +41,14 @@ export const getAxisFormat = function() { return axisFormat; }; +export const setTodayMarker = function(txt) { + todayMarker = txt; +}; + +export const getTodayMarker = function() { + return todayMarker; +}; + export const setDateFormat = function(txt) { dateFormat = txt; }; @@ -572,6 +582,8 @@ export default { endDatesAreInclusive, setAxisFormat, getAxisFormat, + setTodayMarker, + getTodayMarker, setTitle, getTitle, addSection, diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js index 547122685..67e150c15 100644 --- a/src/diagrams/gantt/ganttDb.spec.js +++ b/src/diagrams/gantt/ganttDb.spec.js @@ -21,6 +21,7 @@ describe('when using the ganttDb', function() { beforeEach(function() { ganttDb.setDateFormat('YYYY-MM-DD'); ganttDb.enableInclusiveEndDates(); + ganttDb.setTodayMarker('off'); ganttDb.setExcludes('weekends 2019-02-06,friday'); ganttDb.addSection('weekends skip test'); ganttDb.addTask('test1', 'id1,2019-02-01,1d'); @@ -34,6 +35,7 @@ describe('when using the ganttDb', function() { ${'getTitle'} | ${''} ${'getDateFormat'} | ${''} ${'getAxisFormat'} | ${''} + ${'getTodayMarker'} | ${''} ${'getExcludes'} | ${[]} ${'getSections'} | ${[]} ${'endDatesAreInclusive'} | ${false} @@ -216,4 +218,13 @@ describe('when using the ganttDb', function() { expect(tasks[1].task).toEqual('test2'); }); }); + + it.each` + type | expected + ${'hide'} | ${'off'} + ${'style'} | ${'stoke:stroke-width:5px,stroke:#00f,opacity:0.5'} + `('should ${type} today marker', ({ expected }) => { + ganttDb.setTodayMarker(expected); + expect(ganttDb.getTodayMarker()).toEqual(expected); + }); }); diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 050b1cc7b..825b7dce8 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -396,17 +396,25 @@ export const draw = function(text, id) { } function drawToday(theSidePad, theTopPad, w, h) { + const todayMarker = ganttDb.getTodayMarker(); + if (todayMarker === 'off') { + return; + } + const todayG = svg.append('g').attr('class', 'today'); - const today = new Date(); + const todayLine = todayG.append('line'); - todayG - .append('line') + todayLine .attr('x1', timeScale(today) + theSidePad) .attr('x2', timeScale(today) + theSidePad) .attr('y1', conf.titleTopMargin) .attr('y2', h - conf.titleTopMargin) .attr('class', 'today'); + + if (todayMarker !== '') { + todayLine.attr('style', todayMarker.replace(/,/g, ';')); + } } // from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index ea76b59a1..4a0a0e889 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -55,13 +55,14 @@ that id. "gantt" return 'gantt'; "dateFormat"\s[^#\n;]+ return 'dateFormat'; -"inclusiveEndDates" return 'inclusiveEndDates'; +"inclusiveEndDates" return 'inclusiveEndDates'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; "excludes"\s[^#\n;]+ return 'excludes'; +"todayMarker"\s[^\n;]+ return 'todayMarker'; \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; +[^#:\n;]+ return 'taskTxt'; ":"[^#\n;]+ return 'taskData'; ":" return ':'; <> return 'EOF'; @@ -93,9 +94,10 @@ line statement : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} - | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} + | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} + | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} | title {yy.setTitle($1.substr(6));$$=$1.substr(6);} | section {yy.addSection($1.substr(8));$$=$1.substr(8);} | clickStatement diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js index 463dd26e6..4e7366ab4 100644 --- a/src/diagrams/gantt/parser/gantt.spec.js +++ b/src/diagrams/gantt/parser/gantt.spec.js @@ -37,6 +37,14 @@ describe('when parsing a gantt diagram it', function() { expect(parserFnConstructor(str)).not.toThrow(); }); + it('should handle a todayMarker definition', function() { + spyOn(ganttDb, 'setTodayMarker'); + const str = + 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntodayMarker off'; + + expect(parserFnConstructor(str)).not.toThrow(); + expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off'); + }); it('should handle a section definition', function() { const str = 'gantt\n' +